/* ============================================================
   ハカドル（社内AI・業務自動化）デモ 固有スタイル
   共通部品は demo.css。ここは商品固有の追加のみ。
   ============================================================ */
[hidden] { display: none !important; }

/* ---------- 案内バー（2ステップ＋ボタン） ---------- */
.hk-guide { flex-wrap: wrap; align-items: center; }
.hk-guide__item { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 300px; min-width: 0; }
.hk-guide .dm-btn { flex: 0 0 auto; }

/* ---------- よく聞かれた質問（ランキング） ---------- */
.hk-rank { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.hk-rank:last-child { border-bottom: none; }
.hk-rank__n { width: 28px; height: 28px; border-radius: 8px; background: var(--p-bg); color: var(--p-text); font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.hk-rank__t { font-weight: 900; font-size: 13.5px; min-width: 0; line-height: 1.4; }
.hk-rank__t .dm-prog { margin-top: 6px; height: 5px; }
.hk-rank__c { font-size: 12.5px; color: var(--gray); font-weight: 700; white-space: nowrap; }

/* ---------- 資料検索AI ---------- */
.hk-grid--search { grid-template-columns: minmax(0, .78fr) minmax(0, 1.32fr); }
.hk-docs { display: grid; gap: 6px; }
.hk-doc { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; transition: border-color .25s, background .25s, box-shadow .25s; }
.hk-doc__ext { flex-shrink: 0; width: 46px; text-align: center; font-family: var(--ff-num); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 0; border-radius: 5px; background: var(--hair); color: var(--gray); }
.hk-doc__ext--pdf { background: var(--ng-bg); color: var(--ng); }
.hk-doc__ext--xlsx { background: var(--ok-bg); color: var(--ok); }
.hk-doc__ext--docx { background: var(--info-bg); color: var(--info); }
.hk-doc__body { min-width: 0; display: grid; line-height: 1.4; }
.hk-doc__body b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-doc__body small { font-size: 11.5px; color: var(--gray); font-weight: 700; font-family: var(--ff-num); }
.hk-doc.is-hit { border-color: var(--p); background: var(--p-bg); box-shadow: 0 0 0 3px var(--p-weak); }
.hk-doc.is-hit::after { content: "参照中"; margin-left: auto; font-size: 11px; font-weight: 900; color: var(--p-text); white-space: nowrap; }
.hk-hit-sample { display: inline-block; padding: 0 8px; border-radius: 5px; background: var(--p-bg); color: var(--p-text); border: 1px solid var(--p); font-size: 12px; }
.hk-chat { min-height: 620px; }
.hk-chat .dm-chat__log { max-height: 560px; min-height: 420px; }
.dm-msg mark { background: linear-gradient(transparent 55%, var(--p-weak) 55%, var(--p-weak) 90%, transparent 90%); color: inherit; font-weight: 900; padding: 0 1px; }
.dm-msg .src svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dm-msg .hk-ask { margin-top: 10px; }
.dm-msg .hk-asked { margin-top: 10px; }
.dm-msg--bot.hk-miss { border-left: 4px solid var(--warn); }

/* ---------- 文書の下書き ---------- */
.hk-memo { min-height: 190px; font-size: 16px; }
.hk-fill { background: var(--warn-bg); color: var(--warn); font-weight: 900; border-radius: 4px; padding: 0 3px; }
.dm-out .hk-h { font-weight: 900; color: var(--p-text); }
.dm-out .hk-sub { font-size: 13px; color: var(--gray); font-weight: 700; }

/* ---------- 議事録→ToDo（抽出ルール表示） ---------- */
.hk-rules { display: grid; gap: 5px; font-size: 12.5px; color: var(--gray); font-weight: 700; line-height: 1.6; }
.hk-rules span { display: inline-block; padding: 0 8px; border-radius: 4px; margin-right: 6px; font-weight: 900; }
.hk-rule--ok { background: var(--ok-bg); color: var(--ok); }
.hk-rule--p { background: var(--p-bg); color: var(--p-text); }
.hk-rule--warn { background: var(--warn-bg); color: var(--warn); }

/* ---------- 3カード分類（決定=ok／ToDo=商品色／保留=warn） ---------- */
.hk-grid--result { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }
.hk-cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hk-cat { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: #fff; animation: dm-rowin .5s var(--ease); }
.hk-cat__head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-weight: 900; font-size: 13.5px; border-left: 4px solid; }
.hk-cat__head .cnt { margin-left: auto; font-family: var(--ff-num); font-size: 12px; font-weight: 700; padding: 1px 10px; border-radius: 999px; background: #fff; }
.hk-cat--ok .hk-cat__head { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.hk-cat--p .hk-cat__head { background: var(--p-bg); color: var(--p-text); border-color: var(--p); }
.hk-cat--warn .hk-cat__head { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.hk-cat__list { padding: 6px 14px; display: grid; }
.hk-cat__list li { padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; display: flex; gap: 10px; line-height: 1.6; }
.hk-cat__list li:last-child { border-bottom: none; }
.hk-cat__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-top: 8px; flex-shrink: 0; background: var(--gray-2); }
.hk-cat--ok .hk-cat__list li::before { background: var(--ok); }
.hk-cat--warn .hk-cat__list li::before { background: var(--warn); }
.hk-cat mark { background: linear-gradient(transparent 55%, var(--p-weak) 55%, var(--p-weak) 90%, transparent 90%); color: inherit; font-weight: 900; padding: 0 1px; }
.hk-cat__list .empty { color: var(--gray); font-weight: 700; }
.hk-cat__list .empty::before { display: none; }
.hk-cat .dm-tbl-wrap { border: none; border-radius: 0; }
.hk-cat .dm-tbl { min-width: 520px; }
.hk-cat .dm-tbl th:first-child, .hk-cat .dm-tbl td:first-child { padding-left: 14px; }
.hk-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; white-space: nowrap; }
.hk-who i { width: 24px; height: 24px; border-radius: 50%; background: var(--p-bg); color: var(--p-text); font-style: normal; font-size: 11.5px; font-weight: 900; display: grid; place-items: center; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
  /* 横スクロール防止: 上部ナビの nowrap がグリッド幅を押し広げないようにする */
  .dm-app { grid-template-columns: minmax(0, 1fr); }
  .dm-side, .dm-nav, .dm-view { min-width: 0; }
  .hk-grid--search, .hk-grid--result { grid-template-columns: minmax(0, 1fr); }
  .hk-chat { min-height: 520px; }
  .hk-chat .dm-chat__log { max-height: 400px; min-height: 300px; }
  .hk-guide .dm-btn { width: 100%; }
}