/* Trace drawer: timeline strip, transcript, tool calls. */

.trace-drawer { width: min(990px, calc(100vw - 24px)); }
.drawer-header .back { margin: -6px 0 6px -10px; }

.timeline h3 { margin: 0; }
.timeline-strip { display: flex; gap: 3px; margin-top: 10px; }
.segment {
  flex: 1 1 0;
  min-width: 6px;
  height: 52px;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: #dfe7d9;
  color: var(--ink);
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.segment .name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segment .time { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.segment.user { background: #eef2e8; }
.segment.tool { background: #f0f3ec; }
.segment.error { background: var(--fault-soft); }
.segment.error .name { color: var(--fault); }
.segment:hover { outline: 2px solid var(--green); outline-offset: -2px; }

.transcript { display: flex; flex-direction: column; gap: 14px; }
.turn { display: grid; grid-template-columns: 66px 1fr; gap: 12px; }
.turn .role { padding-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.turn .content { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.turn.highlight .content { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 9px; }
.bubble { padding: 12px 16px; border-radius: 9px; background: var(--user-bubble); }
.reply { padding: 4px 0; }
.bubble p + p, .reply p + p { margin-top: 8px; }
.turn .meta { display: flex; gap: 10px; align-items: center; font-size: 10px; color: var(--ink-3); }
.system-prompt > summary { padding: 10px 14px; border-radius: 7px; background: var(--tool-row); font-size: 12px; }
.system-prompt .prompt { margin-top: 8px; padding: 12px 14px; border-radius: 7px; background: var(--recess-2); font-family: var(--font); font-size: 12px; color: var(--ink-2); }
.tool-call > summary { padding: 9px 12px; border-radius: 7px; background: var(--tool-row); font-size: 12px; }
.tool-call.error > summary { background: var(--fault-soft); }
.tool-call .name { font-size: 12px; color: var(--ink); }
.tool-detail { display: grid; gap: 12px; padding: 12px 0 4px 22px; }
.tool-detail .code-box { margin-top: 6px; max-height: 320px; }
.symptom { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; }
.symptom p { margin-top: 4px; }

@media (max-width: 760px) {
  .turn { grid-template-columns: 1fr; gap: 4px; }
  .turn .role:empty { display: none; }
}

/* Conversation reading layout, shared with the current poc-evals direction. */
.trace-drawer { width: min(990px, calc(100vw - 42px)); }
.trace-drawer .drawer-body { padding: 20px 28px 36px; gap: 22px; }
.trace-drawer .facts { background: var(--recess-2); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.trace-drawer .facts dd { overflow-wrap: anywhere; }
.trace-drawer .tabs { gap: 28px; }
.trace-drawer .tabs button { padding: 14px 0; font-size: 14px; }
.trace-drawer .tabs button:hover { color: var(--green); }
.timeline > .row { align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.timeline h3 { font-size: 16px; font-weight: 500; }
.timeline-strip { gap: 4px; margin-top: 14px; }
.segment { min-width: 0; padding: 0; height: 52px; border-radius: 6px; position: relative; container-type: inline-size; }
.segment .name, .segment .time { display: none; padding: 0 10px; max-width: 100%; }
@container (min-width: 72px) {
  .segment .name, .segment .time { display: block; }
}
.segment:hover, .segment:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.timeline-tooltip { position: fixed; z-index: 4; max-width: min(360px, calc(100vw - 24px)); padding: 9px 12px; border-radius: 7px; background: var(--tooltip); color: white; box-shadow: var(--shadow-pop); font-size: 12px; pointer-events: none; overflow-wrap: anywhere; }
.timeline-tooltip[hidden] { display: none; }
.transcript { gap: 26px; padding-top: 10px; }
.turn { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; scroll-margin: 28px; }
.turn .role { padding-top: 14px; font-size: 11px; letter-spacing: .025em; font-weight: 600; }
.turn.user .role { color: var(--green); }
.turn .content { position: relative; gap: 8px; padding-left: 18px; border-left: 1px solid var(--rule-2); }

.turn .turn-index { position: absolute; right: 0; top: -15px; font-size: 10px; color: var(--ink-3); opacity: 0; transition: opacity .15s; }
.turn:hover .turn-index, .turn:focus-within .turn-index { opacity: 1; }
.turn.system .content { border-left-color: transparent; }
.bubble { background: var(--user-bubble); padding: 16px 20px; border-radius: 9px; }
.reply { padding: 12px 0 4px; }
.bubble p, .reply p { max-width: 82ch; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.turn .meta { justify-content: flex-end; flex-wrap: wrap; font-size: 11px; gap: 7px 12px; }
.turn .meta .chip { margin-right: auto; }
.system-prompt > summary { background: transparent; padding: 10px 0; gap: 12px; }
.system-prompt .prompt { max-height: 360px; overflow: auto; white-space: pre-wrap; }
.tool-call > summary { padding: 13px 14px; gap: 10px; background: #f7f9f4; }
.tool-call > summary:hover { background: var(--recess); }
.tool-call .name { font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.tool-detail { padding-left: 14px; }
.trace-drawer .kv { grid-template-columns: 120px minmax(0, 1fr); }
.trace-drawer .kv dd { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .trace-drawer { width: min(990px, calc(100vw - 42px)); }
  .trace-drawer .drawer-body { padding: 18px 22px 28px; }
}

/* Match the poc-evals reading rail and metadata-dot interaction. */
.trace-drawer .drawer-header h2 { font-size: 23px; line-height: 1.3; }
.trace-drawer .drawer-body { padding: 21px 26px 32px; }
.transcript { gap: 22px; }
.turn { grid-template-columns: 66px minmax(0, 1fr); gap: 16px; }
.turn .role { font-size: 10px; padding-top: 13px; }
.turn .content { padding-left: 17px; }
.turn-dot { position: absolute; left: -12px; top: 10px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; z-index: 2; }
.turn-dot::before { content: ''; position: absolute; inset: 8px; border: 1px solid #a6b69b; border-radius: 50%; background: #a6b69b; }
.turn-dot:hover::before, .turn-dot:focus-visible::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px #e9f0e1; }
.timeline-tooltip { white-space: pre-line; line-height: 1.65; background: #fff; color: #344238; border: 1px solid var(--rule); box-shadow: 0 6px 24px #29382e20; }
.bubble { padding: 12px 15px; }
.reply { padding: 8px 0; }
.bubble p, .reply p { font-size: 13px; line-height: 1.7; }
.turn .meta { position: absolute; right: 15px; top: 13px; font-size: 10px; pointer-events: none; }
.turn:has(.meta:not(:empty)) .bubble, .turn:has(.meta:not(:empty)) .reply { padding-right: 80px; }

.turn.highlight .content { outline: none; border-radius: 5px; background: #e9f0e1; }

.trace-drawer .drawer-header { flex-shrink: 0; }
.trace-drawer .drawer-header > div { min-width: 0; }
.trace-drawer .drawer-header h2 { overflow-wrap: anywhere; }
.trace-exploration { min-width: 0; }
.trace-sticky-navigation { position: sticky; top: -21px; z-index: 5; background: var(--paper); padding-top: 16px; box-shadow: 26px 0 var(--paper), -26px 0 var(--paper); }
.trace-sticky-navigation .tabs { margin-top: 16px; margin-bottom: 0; }
.trace-exploration .tab-panel { padding-top: 20px; }
.trace-exploration .turn { scroll-margin-top: 190px; }
.timeline-tooltip { z-index: 8; }

/* Structured tool payloads, with the original JSON available on demand. */
.structured-value { margin-top: 10px; min-width: 0; }
.json-fields { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px 24px; }
.json-field { min-width: 0; }
.json-field:has(.json-branch) { grid-column: 1 / -1; }
.json-field dt { color: var(--ink-3); font-size: 11px; margin-bottom: 4px; }
.json-field dd { margin: 0; font-size: 13px; color: var(--ink); min-width: 0; }
.json-scalar { white-space: pre-wrap; overflow-wrap: anywhere; }
.json-scalar.boolean { color: var(--green); }
.json-empty { font-size: 12px; color: var(--ink-3); }
.json-branch { border: 1px solid var(--rule); border-radius: 6px; padding: 0 12px; }
.json-branch > summary { padding: 9px 0; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.json-branch > .json-fields { padding: 8px 0 14px; }
.json-source { margin-top: 16px; }
.json-source > summary { font-size: 11px; color: var(--ink-3); cursor: pointer; }
.tool-text { font: 13px/1.65 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 10px; }
.tool-detail { padding: 16px 14px; gap: 24px; }

/* Use the drawer's available width for paired tool inputs and outputs. */
.tool-call { container-type: inline-size; }
.tool-detail > div { min-width: 0; }
@container (min-width: 600px) {
  .tool-detail-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .tool-detail-pair > div + div { border-left: 1px solid var(--rule); padding-left: 24px; }
}

.findings-heading { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; }
.finding-rows { border:1px solid var(--rule); border-radius:8px; overflow:hidden; }
.finding-row + .finding-row { border-top:1px solid var(--rule); }
.finding-row > summary { display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; list-style:none; background:#fcf7f3; }
.finding-row > summary::-webkit-details-marker { display:none; }
.finding-row > summary::before { content:'›'; font-size:17px; color:var(--ink-3); transition:transform .15s; }
.finding-row[open] > summary::before { transform:rotate(90deg); }
.finding-row > summary:hover { background:#f8eee7; }
.finding-row-title { flex:1; min-width:0; font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.finding-row-meta { display:flex; gap:12px; font-size:11px; color:var(--ink-3); white-space:nowrap; }
.finding-severity { color:#a36350; }
.finding-row-body { padding:12px 18px 16px; }
.finding-row-context { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:var(--ink-3); margin-bottom:8px; }
.finding-row-context a { color:var(--green); text-decoration:none; }
.finding-row-context a:hover { text-decoration:underline; }
.finding-row-body p { margin:0; padding:6px 0; font-size:13px; line-height:1.7; color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.finding-row-body p + p { margin-top:8px; padding-top:12px; border-top:1px solid var(--rule); }

.finding-related-count { font-size:11px; font-weight:400; color:var(--ink-3); }

/* The span index findings cite as #N: on every turn, and as a jump inside a finding. */
.turn .turn-number { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.turn-ref { padding: 0 3px; border: 0; border-radius: 4px; background: #e9f0e1; color: var(--green); font: inherit; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.turn-ref:hover, .turn-ref:focus-visible { background: var(--green); color: #fff; }