/* ---------------- right: agent stream ---------------- */
  .detail-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
  #stream{ flex:1; min-height:0; overflow-y:auto; padding-right:4px; scroll-behavior:smooth; }
  .log{ position:relative; display:flex; flex-direction:column; gap:10px; }
  .stream-empty{ padding:6px 2px; font-size:13px; color:var(--ink-faint); }

  .screen-divider{
    display:flex; align-items:center; gap:8px;
    margin:6px 0 2px; padding-bottom:6px; border-bottom:1px solid var(--line);
    font-size:12px; font-weight:600; color:var(--ink-dim);
    animation:fadein .3s ease;
  }
  .screen-divider::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--ink-faint); flex-shrink:0; }
  .screen-divider[hidden]{ display:none; }

  .turn{
    padding:12px 14px; border:1px solid var(--line-soft); border-left:2px solid var(--ink-faint);
    border-radius:8px; background:var(--panel);
    opacity:0.9;
    /* The background transition is deliberately slow: a turn arriving is tinted
       from script and eases back to its resting colour, so a new step reads as an
       arrival rather than the list snapping. */
    transition:opacity .3s ease, border-color .3s ease, background .9s ease;
    animation:turnIn .52s cubic-bezier(.22,.61,.36,1);
  }
  .turn:hover{ opacity:1; border-block-color:var(--line); border-inline-end-color:var(--line); }
  .turn.current{ opacity:1; border-color:rgba(37,99,235,0.32); background:var(--panel2); }
  @keyframes turnIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:translateY(0); } }
  .turn[data-kind="action"]{ border-left-color:var(--blue); }
  .turn[data-kind="visual_action"]{ border-left-color:var(--violet); }
  .turn[data-kind="ask_user"]{ border-left-color:var(--amber); }
  .turn[data-kind="complete"]{ border-left-color:var(--green); }
  .turn[data-kind="unable_to_continue"]{ border-left-color:var(--red); }

  .turn-meta{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:9px; padding-bottom:7px; border-bottom:1px solid var(--line-soft); font-size:10px; color:var(--ink-faint); }
  /* The step number, as a badge: with the newest turn at the top, this is what
     tells you where in the run you are at a glance. */
  .turn-meta .idx{ padding:2px 6px; border-radius:4px; background:rgba(154,160,172,0.16); color:var(--ink); font-weight:600; letter-spacing:.02em; }
  /* A 12-hour clock time ("3:23:05 PM"). Tabular figures keep the row from
     shifting as the seconds change from turn to turn. */
  .turn-meta .turn-time{ font-variant-numeric:tabular-nums; color:var(--ink-dim); }
  /* What kind of turn this was, so a long run can be scanned by eye. */
  .turn-meta .dkind{ padding:1px 6px; border-radius:4px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); background:rgba(154,160,172,0.16); }
  .turn-meta .dkind.action{ color:var(--blue); background:rgba(37,99,235,0.12); }
  .turn-meta .dkind.visual_action{ color:var(--violet); background:rgba(106,63,224,0.12); }
  .turn-meta .dkind.ask_user{ color:var(--amber); background:rgba(180,83,9,0.13); }
  .turn-meta .dkind.complete{ color:var(--green); background:rgba(21,128,61,0.12); }
  .turn-meta .dkind.unable_to_continue{ color:var(--red); background:rgba(220,38,38,0.12); }
  .turn-meta .obs.animating{ animation:pulseOpacity 1.1s ease-in-out infinite; }
  .turn-meta .dur{ color:var(--ink-dim); font-variant-numeric:tabular-nums; padding:2px 6px; border-radius:4px; background:var(--panel2); }
  .info-link{
    margin-left:auto; padding:1px 8px; border:1px solid var(--line); border-radius:4px; background:none;
    font-family:inherit; font-size:10px; color:var(--ink-dim); cursor:pointer;
    transition:border-color .16s, color .16s, background .16s;
  }
  .info-link:hover{ border-color:var(--ink-faint); color:var(--ink); background:rgba(154,160,172,0.1); }

  .user-reply{ margin-bottom:8px; padding-left:9px; border-left:2px solid var(--blue); font-size:12.5px; color:var(--ink-dim); }
  .user-reply[hidden]{ display:none; }
  .user-reply .who{ display:block; margin-bottom:2px; font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
  .user-reply b{ color:var(--ink); font-weight:600; }

  .reasoning{ min-height:1px; font-family:var(--font-ui); font-size:12px; line-height:1.65; color:var(--ink); opacity:.7; overflow-wrap:anywhere; white-space:pre-wrap; }
  .reasoning.waiting{ color:var(--ink-faint); }
  .text-streaming::after{ content:"▍"; display:inline-block; padding-left:2px; color:var(--blue); animation:blink .9s steps(1) infinite; }
  .turn[data-phase="thinking"] .obs,.turn[data-phase="sent"] .obs{ color:var(--blue); }
  .turn[data-phase="failed"] .obs{ color:var(--red); }
  .turn[data-phase="done"] .obs{ color:var(--ink-dim); }
  @media(prefers-reduced-motion:reduce){ .text-streaming::after{ display:none; } }
  @keyframes blink{ 50%{ opacity:0; } }

  .thinking{ margin-bottom:7px; }
  .thinking[hidden]{ display:none; }
  .think-head{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-dim); opacity:.8; }
  .think-dots{ display:inline-flex; gap:4px; flex-shrink:0; }
  .think-dots i{ width:5px; height:5px; border-radius:50%; background:var(--blue); opacity:0.22; animation:thinkPulse 1.15s ease-in-out infinite; }
  .think-dots i:nth-child(2){ animation-delay:.15s; }
  .think-dots i:nth-child(3){ animation-delay:.3s; }
  @keyframes thinkPulse{ 0%,100%{ opacity:0.22; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-2px); } }
  .think-lines{ margin-top:9px; display:flex; flex-direction:column; gap:6px; }
  .think-lines span{
    height:8px; border-radius:3px;
    background:linear-gradient(90deg, var(--line) 0%, #EDF0F4 50%, var(--line) 100%);
    background-size:220% 100%; animation:thinkShimmer 1.5s linear infinite;
  }
  .think-lines span:nth-child(1){ width:100%; }
  .think-lines span:nth-child(2){ width:68%; }
  @keyframes thinkShimmer{ from{ background-position:220% 0; } to{ background-position:-220% 0; } }

  .overlay-line{ display:block; padding:0; margin:8px 0 0; font-family:var(--font-ui); color:var(--ink); font-size:14px; font-weight:400; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
  .overlay-line[hidden]{ display:none; }
  .notes{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
  .notes:empty{ display:none; }
  .notes[hidden],.turn .notes > [hidden]{ display:none; }
  .notes > .step-note,.notes > .tool-note,.notes > .expects{ margin-top:0; }

  .step-note{
    margin-top:8px; padding:10px 12px;
    border:1px solid var(--line-soft); border-radius:6px; background:var(--panel2);
    font-family:var(--font-ui); font-size:13px; font-weight:400; line-height:1.6; color:var(--ink); overflow-wrap:anywhere;
    animation:fadein .35s ease;
  }
  .stamp{
    display:inline-flex; align-items:center; vertical-align:middle; white-space:nowrap;
    margin-right:8px; padding:2px 6px; border-radius:4px; line-height:1.3;
    font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  }
  .step-note.action{ border-color:rgba(37,99,235,0.2); background:var(--panel); }
  .step-note.action .stamp{ color:var(--blue); background:rgba(37,99,235,0.1); }
  .step-note.action b{ color:var(--ink); font-weight:500; }
  .step-note.action .id{ color:var(--ink-faint); }
  .step-note.visual{ border-color:rgba(106,63,224,0.25); }
  .step-note.visual .stamp{ color:var(--violet); background:rgba(106,63,224,0.1); }
  /* What the device was actually told to do, when that differs from the decision
     (a web `open` sent as a bounds touch, or a server-side retry). It rides inside
     the decision's own note so the pair reads on one row - `.step-note.sent` is
     only for a turn that has nothing but the executed action to show. */
  .step-note.sent{ border-color:var(--line); background:var(--panel2); }
  .step-note.sent .stamp{ color:var(--ink-dim); background:rgba(113,118,128,0.12); }
  .step-note.sent b{ color:var(--ink); font-weight:600; }
  .sent-part{
    display:inline-flex; align-items:baseline; gap:5px; vertical-align:1px;
    margin-left:9px; padding-left:9px; border-left:1px solid var(--line);
  }
  /* `flex:0 0 auto` keeps the stamp its own size. As a shrinkable flex item a long
     sent line compressed it until "sent" broke one letter per line. */
  .sent-part .stamp{ margin-right:0; flex:0 0 auto; white-space:nowrap; color:var(--ink-dim); background:rgba(113,118,128,0.12); }
  .sent-part b{ color:var(--ink); font-weight:600; }
  /* A question turn is an exchange, not a one-line note: the question on top, the
     action it gates, and the user's answer beneath, as one card. Padding moves to
     the inner blocks so the answer can sit on its own tinted footer. */
  .step-note.ask{ padding:0; overflow:hidden; border-color:rgba(180,83,9,0.28); background:var(--panel2); }
  .step-note.ask .stamp{ color:var(--amber); background:rgba(180,83,9,0.1); }
  .qa{ display:flex; flex-direction:column; }
  .qa-label{ font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
  .qa-question{ padding:10px 12px; }
  .qa-question .qa-text{ margin-top:4px; font-size:13px; font-weight:600; line-height:1.45; color:var(--ink); }
  .qa-will{ margin-top:7px; font-size:11.5px; color:var(--ink-dim); }
  .qa-will b{ color:var(--ink); font-weight:600; }
  .qa-will .id{ color:var(--ink-faint); }
  .qa-answer{ padding:9px 12px; border-top:1px solid rgba(37,99,235,0.18); background:rgba(37,99,235,0.06); }
  .qa-answer .qa-text{ margin-top:4px; font-size:12.5px; font-weight:600; line-height:1.45; color:var(--ink); }
  .qa-answer.waiting{ border-top-color:rgba(180,83,9,0.2); background:rgba(180,83,9,0.05); }
  .qa-answer.waiting .qa-text{ font-weight:500; color:var(--amber); }
  .step-note.done{ border-color:rgba(21,128,61,0.28); background:rgba(21,128,61,0.05); color:var(--green); font-weight:600; }
  .step-note.done .stamp{ color:var(--green); background:rgba(21,128,61,0.12); }
  .step-note.stuck{ border-color:rgba(220,38,38,0.2); background:#fff7f7; color:var(--ink); font-weight:400; }
  .step-note.stuck .stamp{ color:var(--red); background:rgba(220,38,38,0.12); }
  .rejected-note{ display:flex; flex-direction:column; gap:6px; }
  .rejected-note .stamp{ align-self:flex-start; margin:0; }
  .rejected-description{ font-size:13px; line-height:1.6; }
  .rejected-reason{ padding-top:6px; border-top:1px solid #f2dddd; font-size:12px; line-height:1.55; color:#805457; }
  .opt-tag{ display:inline-block; margin:6px 6px 0 0; padding:2px 9px; border:1px solid var(--line); border-radius:4px; font-size:11px; color:var(--ink-dim); }
  .expects{ margin-top:8px; font-size:12px; line-height:1.55; color:var(--ink-dim); }

  .tool-note{
    margin-top:8px; padding:9px 11px;
    border:1px solid var(--line-soft); border-radius:6px; background:var(--panel);
    font-size:11.5px; line-height:1.5; color:var(--ink-dim); overflow-wrap:anywhere;
    animation:fadein .35s ease;
  }
  .tool-note.moondream-note{
    display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
    padding:6px 9px; background:var(--panel2); line-height:1.35;
  }
  .moondream-note .tool-status{ margin-left:0; }
  .vision-target{
    min-width:0; max-width:min(100%, 440px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:var(--ink); font-size:11px;
  }
  .vision-target::before{ content:"· "; color:var(--ink-faint); }
  .vision-point{ color:var(--ink-faint); font:10.5px ui-monospace,Menlo,Consolas,monospace; }
  .vision-error{ color:var(--red); font-size:11px; }
  .tool-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .tool-head .stamp{ margin-right:0; }
  .tool-note .tool-name{ font-size:11.5px; font-weight:600; color:var(--ink); }
  .tool-note .stamp{ color:var(--ink-dim); background:rgba(154,160,172,0.12); }
  .tool-status{
    margin-left:auto; padding:2px 7px; border-radius:4px;
    font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-dim); background:rgba(154,160,172,0.12);
  }
  .tool-target{ margin-top:8px; font-size:12px; line-height:1.5; color:var(--ink); }
  .tool-target .quote{ color:var(--ink-dim); }
  .tool-facts{ margin:8px 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 14px; align-items:baseline; font-size:11px; }
  .tool-facts dt{ color:var(--ink-faint); }
  .tool-facts dd{ margin:0; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .tool-json{
    margin:8px 0 0; padding:8px 10px; max-height:190px; overflow:auto;
    border:1px solid var(--line); border-radius:6px; background:var(--bg);
    font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size:10.5px; line-height:1.55; color:var(--ink-dim);
    white-space:pre-wrap; overflow-wrap:anywhere;
  }
  .tool-message{ margin-top:7px; font-size:11.5px; line-height:1.55; color:var(--ink-dim); }
  .tool-note.ok{ border-color:rgba(21,128,61,0.28); }
  .tool-note.ok .stamp, .tool-note.ok .tool-status{ color:var(--green); background:rgba(21,128,61,0.1); }
  .tool-note.failed{ border-color:rgba(220,38,38,0.28); }
  .tool-note.failed .stamp, .tool-note.failed .tool-status{ color:var(--red); background:rgba(220,38,38,0.1); }
  .tool-note.requested{ border-style:dashed; }
  .tool-note.requested .stamp, .tool-note.requested .tool-status{ color:var(--violet); background:rgba(106,63,224,0.1); }

  /* Lives in the stream's heading. Inert - just the order hint - until you scroll
     away from the newest turn, when it becomes the way back to it. */
  .jump-btn{
    padding:2px 8px; border:1px solid transparent; border-radius:6px; background:none;
    font-family:inherit; font-size:10.5px; font-weight:600; letter-spacing:.02em;
    text-transform:none; color:var(--ink-faint); cursor:default;
    transition:color .18s, background .18s, border-color .18s;
  }
  .jump-btn.active{ border-color:rgba(37,99,235,0.28); background:rgba(37,99,235,0.08); color:var(--blue); cursor:pointer; }
  .jump-btn.active:hover{ background:rgba(37,99,235,0.14); }

  .track{ flex-shrink:0; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }
  .track-row{ display:flex; gap:4px; }
  .tnode{ flex:1; height:5px; border-radius:3px; background:var(--line); cursor:pointer; transition:background .2s; }
  .tnode:hover{ background:var(--ink-faint); }
  .tnode.past{ background:var(--ink-faint); }
  .tnode.active{ background:var(--amber); }
  .tnode.complete{ background:var(--green); }
  .track-labels{ display:flex; justify-content:space-between; margin-top:6px; font-size:10.5px; color:var(--ink-faint); }


  .speech-play{ position:relative; width:20px; height:20px; margin-left:auto; flex-shrink:0; border:0; border-radius:5px; background:transparent; color:var(--blue); }
  .speech-play + .info-link{ margin-left:0; }
  .speech-play:hover{ background:#eff5ff; border-color:var(--blue); }
  .speech-play svg{ width:11px; height:11px; }
  .speech-play.loading svg{ visibility:hidden; }
  .speech-play.loading::after{ content:""; width:10px; height:10px; border:1.5px solid #cbdcff; border-top-color:var(--blue); border-radius:50%; position:absolute; animation:voiceSpin .8s linear infinite; }
  .speech-play.playing{ background:#eaf1ff; }
  .speech-play.playing svg{ display:none; }
  .voice-bars{ display:none; align-items:center; gap:2px; height:12px; }
  .speech-play.playing .voice-bars{ display:flex; }
  .voice-bars i{ display:block; width:2px; height:8px; border-radius:2px; background:currentColor; animation:voiceBar .65s ease-in-out infinite alternate; }
  .voice-bars i:nth-child(2){ height:12px; animation-delay:-.3s; }
  .voice-bars i:nth-child(3){ animation-delay:-.15s; }
  @keyframes voiceSpin{ to{ transform:rotate(360deg); } }
  @keyframes voiceBar{ from{ transform:scaleY(.35); } to{ transform:scaleY(1); } }
  .turn{ content-visibility:auto; contain-intrinsic-size:auto 240px; }