/* The transcript drawer: the scrim, the panel itself, the post-hoc banner, and the stream-json rows.

   ONE OF THE THREE SURFACES #63 NAMES AS BEING READ FROM A PHONE, and the one where that matters most: it is
   a full-height sheet carrying an agent's output, so at 390px it is the whole screen and every part of it has
   to work at that width — a close button a thumb can hit, a header that truncates rather than pushing the
   button off its own edge, monospaced lines that wrap instead of scrolling sideways, and a footer that clears
   the home indicator. */
#scrim { position:fixed; inset:0; background:var(--scrim); z-index:70; display:none;
         backdrop-filter:blur(2px); }
#scrim.open { display:block; }
.drawer { position:fixed; inset:0 0 0 auto; width:min(680px,100%); z-index:80; background:var(--panel);
          border-left:1px solid var(--line); box-shadow:var(--lift-high);
          transform:translateX(100%); transition:transform var(--dur-2) var(--ease);
          display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
.drawer header { position:static; padding:var(--s-4) var(--s-4) var(--s-3);
                 padding-top:calc(var(--s-4) + env(safe-area-inset-top, 0px));
                 border-bottom:1px solid var(--line); backdrop-filter:none;
                 background:var(--panel); display:block; }
.drawer .dhead { display:flex; align-items:center; gap:var(--s-3); }
/* The title takes whatever is left and gives it back before the close button loses room: on a 390px sheet the
   subject can be a whole issue reference, and the one control that gets the operator out must never be the
   thing that got pushed off the edge. */
#drawerTitle { font-size:var(--t-lead); font-weight:650; letter-spacing:-.02em; min-width:0;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#drawerClose { margin-left:auto; flex:none; min-height:var(--tap); }
.drawer .dsub { color:var(--muted); font-size:var(--t-meta); margin-top:var(--s-1);
                word-break:break-word; }

.posthoc { margin:0; padding:var(--s-3) var(--s-4); background:var(--limbo-soft); color:var(--limbo);
           font-size:var(--t-meta); font-weight:550; border-bottom:1px solid var(--line);
           display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap; }
.posthoc a { color:var(--accent); font-weight:600; text-decoration:underline; }
.tlines { flex:1; overflow:auto; overflow-wrap:anywhere; padding:var(--s-3) var(--s-4); margin:0;
          font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
          -webkit-overflow-scrolling:touch; }
.tline { white-space:pre-wrap; word-break:break-word; padding:2px 0; border-bottom:1px solid var(--line-soft); }
.tline.withheld { color:var(--faint); font-style:italic; }
/* Formatted stream-json rows: a colored left-rail + tag per event kind, body as plain text. */
.ev { white-space:pre-wrap; word-break:break-word; padding:var(--s-1) 0 var(--s-1) var(--s-3); margin:2px 0;
      border-left:2px solid transparent; }
.ev-tag { font-weight:600; margin-right:var(--s-2); }
.ev-assistant { border-left-color:var(--fg); }
.ev-think     { border-left-color:var(--faint); color:var(--faint); font-style:italic; }
.ev-tool      { border-left-color:var(--accent); color:var(--accent); }
.ev-result    { border-left-color:var(--muted); color:var(--muted); }
.ev-user      { border-left-color:var(--run); color:var(--run); }
.ev-system    { border-left-color:var(--faint); color:var(--faint); }
.ev-withheld  { color:var(--faint); font-style:italic; }
.ev-done      { border-left-color:var(--ready); color:var(--ready); font-weight:550; }
.ev-raw       { color:var(--faint); }
.drawer .dfoot { padding:var(--s-3) var(--s-4);
                 padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
                 border-top:1px solid var(--line); display:flex; gap:var(--s-2); align-items:center;
                 flex-wrap:wrap; }

/* The drawer's own motion, disarmed — AFTER the rules it has to beat, for the reason badges.css spells out at
   length: `@media` adds no specificity, so a disarm above `.drawer` would lose to it and read as though it
   had worked.

   This one was never covered at all: a 680px sheet has been sliding across the screen under
   `prefers-reduced-motion: reduce` since it was written, which is the largest single movement on the page and
   exactly the kind the preference exists for. It is disarmed rather than replaced — the sheet still arrives,
   it simply arrives where it is going. `transform` stays the mechanism: the panel is opened and shut by a
   class that translates it, and swapping that for `display` would change what "the drawer is on screen" means
   to the harness. */
@media (prefers-reduced-motion: reduce) {
  .drawer { transition:none; }
  #scrim { backdrop-filter:none; }
}