/* チャット画面: 会話一覧の行・吹き出し・Markdown描画・進捗・完全性メーター・添付。
   会話一覧（#side）の器そのものは base.css（左ナビの一段）にある。 */

/* --- 左ナビの中の会話一覧。地が濃いので、明るい側の色は使えない --- */
#side .item { padding:var(--s2) var(--s3); border-radius:var(--r1);
              font-size:var(--f-sm); color:var(--nav-ink); cursor:pointer;
              line-height:1.5; margin-bottom:1px; }
#side .item:hover { background:var(--nav-hover); color:var(--nav-ink-strong); }
#side .item.active { background:var(--nav-active); color:var(--nav-ink-strong);
                     font-weight:600; box-shadow:inset 3px 0 0 var(--accent-line); }
#side .item .date { display:block; color:var(--nav-ink-dim); font-size:10px; font-weight:400; }
#side .item .live { color:#E8B76A; font-size:10px; }

/* --- 会話の本体 --- */
#main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
#log { flex:1; overflow-y:auto; padding:var(--s5) var(--s4) var(--s2); scroll-behavior:smooth; }

.msg { margin:var(--s3) auto; max-width:820px; padding:var(--s3) var(--s4);
       border-radius:var(--r2); white-space:pre-wrap; line-height:1.8;
       font-size:var(--f-lg); }
.user { background:var(--accent); color:var(--ink-on-accent);
        margin-left:auto; margin-right:0; max-width:min(70%, 640px);
        border-bottom-right-radius:var(--r1); }
.bot  { background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh1);
        border-bottom-left-radius:var(--r1); }
.err  { background:var(--bad-soft); border:1px solid var(--bad-line); color:var(--bad); }

/* --- Markdown 描画 --- */
.md { white-space:normal; font-size:var(--f-lg); }
.md > :first-child { margin-top:0; }
.md > :last-child { margin-bottom:0; }
/* 見出しは**本文より一段大きく**する。同じ大きさだと、太字との区別が付かない */
.md h1, .md h2, .md h3 { font-size:17px; font-weight:600; color:var(--ink);
                         margin:var(--s5) 0 var(--s2); padding-bottom:var(--s1);
                         border-bottom:1px solid var(--line); }
/* markdown.js は `#`→h2、`##` 以降→h3 に落とす（見出しの深さは3段までに畳む）。
   **回答で一番よく出るのは h3** なので、ここを本文より弱くすると節が読めなくなる。 */
.md h3 { font-size:var(--f-lg); font-weight:600; color:var(--ink);
         border-bottom:none; margin:var(--s4) 0 var(--s1); }
.md p { margin:var(--s2) 0; }
.md ul, .md ol { margin:var(--s2) 0 var(--s2) 22px; }
.md li { margin:3px 0; }
.md strong { font-weight:600; }
.md code { background:var(--surface-3); border-radius:var(--r1); padding:1px 5px;
           font-size:var(--f-sm); font-family:var(--mono); }
.md pre { background:var(--surface-2); border:1px solid var(--line);
          border-radius:var(--r2); padding:var(--s3); overflow-x:auto; margin:var(--s2) 0; }
.md pre code { background:none; padding:0; font-size:var(--f-sm); }
.md blockquote { border-left:3px solid var(--line-strong); padding-left:var(--s3);
                 color:var(--ink-2); margin:var(--s2) 0; }
.md hr { border:none; border-top:1px solid var(--line); margin:var(--s3) 0; }
.md a { color:var(--accent); }
/* 表の器は**中身の幅まで**。画面幅いっぱいに広げると、表の右に空の箱が残る */
.md .tablewrap { overflow-x:auto; margin:var(--s3) 0; width:max-content; max-width:100%;
                 border:1px solid var(--line); border-radius:var(--r2); }
.md table { border-collapse:separate; border-spacing:0; font-size:var(--f-md);
            min-width:min(100%,320px); }
.md th, .md td { border-bottom:1px solid var(--line); padding:var(--s1) var(--s3);
                 text-align:left; white-space:nowrap; }
.md tr:last-child td { border-bottom:none; }
.md th { background:var(--surface-3); font-weight:600; font-size:var(--f-sm);
         color:var(--ink-2); }
.md tbody tr:nth-child(even) { background:var(--surface-2); }
.md td.num, .md th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* --- 応答に付く帯（根拠・費用） --- */
.meta { font-size:var(--f-xs); color:var(--ink-2); margin-top:var(--s2);
        border-top:1px dashed var(--line); padding-top:var(--s2); }
/* トークンと費用の目安。会話を続けるほど増えることを利用者に見せる（render.js usageBox） */
.usage { font-size:var(--f-xs); color:var(--ink-2); margin-top:var(--s2);
         border-top:1px dashed var(--line); padding-top:var(--s2); line-height:1.8;
         font-variant-numeric:tabular-nums; }
.usage b { color:var(--ink); font-weight:600; }
.usage .note { display:block; margin:3px 0 0; opacity:.85; font-size:var(--f-xs); }
.code { margin-top:var(--s2); }
.code summary { font-size:var(--f-xs); color:var(--accent); cursor:pointer; }
.code pre { background:var(--surface-2); border:1px solid var(--line);
            border-radius:var(--r2); padding:var(--s2); margin-top:var(--s2);
            font-size:var(--f-xs); overflow-x:auto; white-space:pre; }

/* --- 進捗 --- */
.prog { background:var(--warn-soft); border:1px solid var(--warn-line); }
.prog .steps { font-size:var(--f-md); line-height:2; }
.prog .step { color:var(--ink-2); }
.prog .step.now { color:var(--ink); font-weight:600; }
.prog .step::before { content:"✓ "; color:var(--ok); }
.prog .step.now::before { content:"● "; color:var(--warn); }
.prog .elapsed { font-size:var(--f-xs); color:var(--ink-2); margin-top:var(--s2);
                 font-variant-numeric:tabular-nums; }

/* --- 入力欄。**画面の下に貼り付ける**（長い会話でも探さずに書ける） --- */
form.chat { display:flex; gap:var(--s2); align-items:flex-end;
            padding:var(--s3) var(--s4) var(--s4); max-width:880px; width:100%;
            margin:0 auto; flex-shrink:0; }
form.chat textarea { flex:1; min-width:0; resize:none; height:52px; line-height:1.6;
                     font-size:var(--f-lg); }
form.chat button { height:52px; padding:0 var(--s5); flex-shrink:0; }
.hint { max-width:880px; margin:0 auto; padding:var(--s3) var(--s4) 0;
        font-size:var(--f-sm); color:var(--ink-2); line-height:1.7; }

/* --- 技術者からの回答（画面G）。role='support' は user でも assistant でもない
       第3の値で、**人が書いたものをカナエの発言と取り違えさせない**ために分ける --- */
.support { background:var(--ok-soft); border:1px solid var(--ok-line);
           border-left:3px solid var(--ok); }
.support .shead { font-size:var(--f-xs); color:var(--ok); font-weight:600;
                  margin-bottom:var(--s1); }
.support .shead .when { color:var(--ink-2); font-weight:400; margin-left:var(--s2); }
.support .ssrc { margin-top:var(--s2); padding-top:var(--s2);
                 border-top:1px dashed var(--ok-line); font-size:var(--f-xs);
                 color:var(--ink-2); }

/* 「技術者に確認中」。回答が返るまでの待ち状態。会話の流れの中に置く */
.waiting { background:var(--warn-soft); border:1px solid var(--warn-line);
           color:var(--ink-2); font-size:var(--f-sm); }

/* 応答末尾の支援要請ボタン。「役に立った／立たない」の二択評価は置かない
   （評価は集まるが次の行動に繋がらない。40_learning-design.md §10） */
.askrow { margin-top:var(--s2); padding-top:var(--s2); border-top:1px dashed var(--line);
          display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.askrow .sp { flex:1; }

/* --- 完全性メーター（インテークの充足状況） --- */
.cmp { margin-top:var(--s3); border-top:1px dashed var(--line); padding-top:var(--s2); }
.cmp .bar { height:6px; border-radius:var(--r-pill); background:var(--surface-3);
            overflow:hidden; margin:var(--s2) 0; }
.cmp .bar i { display:block; height:100%; background:var(--ok);
              border-radius:var(--r-pill); transition:width .3s ease; }
.cmp.short .bar i { background:var(--warn); }
.cmp .lbl { font-size:var(--f-xs); color:var(--ink-2); }
.cmp .miss { font-size:var(--f-sm); margin-top:var(--s1); }
.cmp .miss b { color:var(--bad); font-weight:600; }

/* --- 添付ファイル（run_python が作った Excel/CSV など） --- */
.attach { margin:var(--s3) 0 var(--s1); padding:var(--s2) var(--s3);
          background:var(--accent-soft); border:1px solid var(--accent-line);
          border-radius:var(--r2); }
.attach .k { font-size:var(--f-xs); color:var(--ink-2); margin-bottom:var(--s2); }
.attach .dl { display:block; width:100%; text-align:left; margin-bottom:var(--s1);
              font-size:var(--f-md); color:var(--accent); }
.attach .dl:last-child { margin-bottom:0; }

/* --- 画面幅への追随 ---
   **文字サイズはここで触らない。** トークン（base.css の 900px 以下）で一段
   上げてあり、ここで下げ直すと元の木阿弥になる。詰めるのは余白と幅だけ。 */
@media (max-width:900px),
       (hover:none) and (pointer:coarse) and (max-width:1280px) {
  #log { padding:var(--s3) var(--s3) 0; }
  .msg { padding:var(--s3); margin:var(--s2) auto; }
  .user { max-width:88%; }
  form.chat { padding:var(--s2) var(--s3) var(--s3); gap:var(--s2); }
  /* 入力欄は**16px を割らない**。iOS/Android は 16px 未満の入力に触れると
     画面ごと拡大するので、それだけで版面が壊れる */
  form.chat textarea { font-size:16px; height:48px; }
  form.chat button { padding:0 var(--s4); height:48px; }
  .hint { padding:var(--s2) var(--s3) 0; }
  .md th, .md td { padding:var(--s1) var(--s2); }
  /* シート（過去の会話）の中は指で押す。行の高さを確保する */
  #side .item { padding:var(--s3); border-radius:var(--r2); margin-bottom:var(--s1); }
  #side .item .date { margin-top:2px; }
}