/* Proモード（1回の依頼の内部トレース）のタイムライン */

#proDetail[hidden] { display:none; }
/* 依頼一覧はトークン列3本を足して9列になった。既定幅では見出しが折れるので広げる */
#proJobs .utable { max-width:1120px; }
.prohead { display:flex; gap:var(--s3); align-items:baseline; flex-wrap:wrap;
           max-width:1000px; margin-top:var(--s4); }
.prohead .q { font-weight:600; font-size:var(--f-md); }
.prohead .num { color:var(--ink-2); font-size:var(--f-xs);
                font-variant-numeric:tabular-nums; }
.prohead .sub { color:var(--ink-2); }

.tl { max-width:1000px; margin-top:var(--s3); }
.tl .step { border:1px solid var(--line); border-radius:var(--r2);
            background:var(--surface); margin-bottom:var(--s2); box-shadow:var(--sh1); }
.tl .step > summary { cursor:pointer; padding:var(--s2) var(--s3); font-size:var(--f-sm);
                      display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap;
                      list-style:none; border-radius:var(--r2); }
.tl .step > summary::-webkit-details-marker { display:none; }
.tl .step > summary:hover { background:var(--surface-2); }
.tl .step[open] > summary { border-bottom:1px solid var(--line);
                            background:var(--surface-2);
                            border-radius:var(--r2) var(--r2) 0 0; }
/* 種別のしるし。**面で塗る**（1行に何十個も並ぶので、罫では判別が追いつかない） */
.tl .tag { font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px var(--s2);
           border-radius:var(--r-pill); color:#fff; white-space:nowrap; border:none;
           background:var(--ink-2); margin-left:0; }
.tl .tag.llm { background:#3A6EA5; }
.tl .tag.tool { background:#5E7A3C; }
.tl .tag.retrieval { background:#8A6D3B; }
.tl .ttl { flex:1; min-width:160px; overflow:hidden; text-overflow:ellipsis;
           white-space:nowrap; }
.tl .num { color:var(--ink-2); font-size:var(--f-xs); white-space:nowrap;
           font-variant-numeric:tabular-nums; }
.tl .num.bad { color:var(--bad); font-weight:600; }
/* 起きた順の通し番号。表示は新しい順なので、これが前後関係の唯一の手掛かりになる。
   等幅・右寄せ・固定幅にして、桁が増えてもタグの位置が動かないようにする */
.tl .stepno { font-family:var(--mono); font-size:var(--f-xs); color:var(--ink-3);
              min-width:2.6em; text-align:right; flex-shrink:0; }
.tl .body { padding:var(--s3); }
.tl .body h5 { margin:var(--s2) 0 var(--s1); font-size:var(--f-xs); color:var(--ink-2);
               font-weight:600; letter-spacing:.04em; }
.tl .body h5:first-child { margin-top:0; }
.tl pre { background:var(--surface-2); border:1px solid var(--line);
          border-radius:var(--r1); padding:var(--s2); font-size:var(--f-xs);
          font-family:var(--mono); overflow:auto; max-height:340px;
          white-space:pre-wrap; word-break:break-word; }
/* クラス名は tmsg / r-* で独自に持つ。チャットの吹き出し（.msg と .user）は
   背景色・max-width・margin:auto を持っており、流用すると読めなくなる */
.tl .tmsg { border-left:3px solid var(--line); padding:2px 0 2px var(--s2);
            margin-bottom:var(--s2); }
.tl .tmsg .r { font-size:10px; font-weight:700; color:var(--ink-2);
               text-transform:uppercase; letter-spacing:.06em; }
/* 出典はファイルパスなので大文字化しない（haccp/spec-knowledge.md が別物に見える） */
.tl .tmsg .r.src { text-transform:none; font-size:var(--f-xs); color:#6B5B3A;
                   letter-spacing:0; }
.tl .tmsg.r-system { border-left-color:#8A6D3B; }
.tl .tmsg.r-user { border-left-color:var(--accent); }
.tl .tmsg.r-assistant { border-left-color:#3A6EA5; }
.tl .tmsg.r-tool { border-left-color:#5E7A3C; }
.tl .tmsg pre { max-height:220px; margin-top:2px; }

@media (max-width:900px),
       (hover:none) and (pointer:coarse) and (max-width:1280px) {
  .tl .step > summary { gap:var(--s2); font-size:var(--f-xs); }
  .tl .ttl { min-width:100%; order:9; }
}