/* The conversation. It used to be a light card in a dark room, which meant two palettes and two
   ink ramps on one screen; it is now the same room, raised one step. */

.chat{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
      grid-template-columns:minmax(0,1fr);min-width:0;background:var(--g-1);color:var(--ink);
      overflow:hidden;container-type:inline-size;border-radius:14px;margin-bottom:0;
      box-shadow:var(--sh-left)}
.shell.chatshut .chat{display:none}
.grip{position:absolute;top:12px;bottom:0;right:calc(var(--chatw,560px) + 12px);width:14px;
      margin-right:-4px;cursor:col-resize;z-index:20;background:transparent}
.shell.chatshut .grip{display:none}
.chat.sizing{box-shadow:inset 3px 0 0 var(--held)}
.chat.closing{opacity:.55;box-shadow:inset 3px 0 0 var(--ink-3)}
.grip:hover~.chat{box-shadow:inset 3px 0 0 var(--held)}
body.resizing{cursor:col-resize;user-select:none}
/* Collapsed, the conversation is a tab: Sandy's face and her name, a rounded pill standing in the
   middle of the column, never a white wall from the top of the room to the bottom. */
.strip{display:none;grid-column:2;grid-row:1;align-self:stretch;justify-self:center;width:64px;margin:0;
       padding:22px 0 0;gap:18px;flex-direction:column;align-items:center;background:var(--g-1);
       border:1px solid var(--line);border-radius:32px;box-shadow:var(--sh-1);cursor:pointer;color:var(--ink-2);font:inherit;
       transition:color .14s,border-color .14s}
.shell.chatshut .strip{display:flex}
.strip:hover{color:var(--ink);border-color:var(--held)}
.strip img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated;display:block}
.strip span{writing-mode:vertical-rl;font-size:14px;font-weight:600;letter-spacing:.06em}
/* Opening: the panel slides in from its edge once the room has been read. */
.chat.opening{animation:chatin .55s cubic-bezier(.22,.68,.32,1) both}
@keyframes chatin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chat.opening{animation:none}}

.chead{display:flex;align-items:center;gap:9px;padding:0 13px 0 5px;height:64px;flex:none;min-width:0}
/* Sandy leads her own header from the left; the spacer holds the middle; a new conversation,
   search, the plans and collapse sit together on the right, under one hand, the collapse arrow
   pointing the way the panel actually goes. Every button carrying its own `margin-left:auto` made
   flexbox share the free space out between them and scatter the row. */
.chead .ct{display:inline-flex;align-items:center;gap:8px;flex:none;min-width:0}
.chead .cgap{flex:1 1 auto;min-width:0}
.cname{font-size:13px;font-weight:600;color:var(--ink)}
.smark{width:56px;height:56px;flex:none;overflow:hidden;display:block}
.smark img{width:100%;height:100%;object-fit:contain;
           image-rendering:pixelated;display:block}
.ibtn{width:30px;height:30px;flex:none;display:grid;place-content:center;border:0;background:transparent;
      color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s}
.ibtn:hover{background:var(--g-2);color:var(--ink)}
.ibtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.log{overflow-y:auto;min-height:0;padding:16px 14px 14px;display:flex;flex-direction:column;gap:14px;
     scrollbar-width:thin;scrollbar-color:transparent transparent}
.log.scrolling{scrollbar-color:var(--held) transparent}
.log::-webkit-scrollbar{width:8px}
.log::-webkit-scrollbar-track{background:transparent}
.log::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;transition:background .3s}
.log.scrolling::-webkit-scrollbar-thumb{background:var(--held);
     border:2px solid transparent;background-clip:content-box}
.turn{display:flex;flex-direction:column;gap:9px}
.turn .prose+.tool,.turn .tool+.prose{margin-top:1px}
/* Each block eases in as it lands, so a tool row or a fresh span arrives smoothly instead of
   snapping. A replayed turn (nofade) skips it, and reduced motion kills it. */
.turn:not(.nofade) .tool,.turn:not(.nofade) .prose,.turn:not(.nofade) .think,.turn:not(.nofade) .confirm,
.turn:not(.nofade) .qa{
  animation:blockin .28s cubic-bezier(.22,.68,.32,1) both}
@keyframes blockin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.turn .tool,.turn .prose,.turn .think,.turn .confirm,.turn .qa{animation:none}}

/* What you said, on your side. The only rounded object in a room built of hairlines is now not
   rounded. */
.said{align-self:flex-end;max-width:84%;background:var(--g-2);box-shadow:inset 0 0 0 1px var(--line-2);
      border-radius:10px;padding:9px 12px;font-size:13.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.ask{font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.4;color:var(--ink)}

/* The pre-answer beat: five cells, one green course laid across them in steps -- the house
   bricks, not a spinner. Discrete flips, nothing pulses. */
.pend{display:flex;gap:5px;padding:6px 2px}
.pend i{width:7px;height:7px;background:var(--line);animation:pcell 1.15s steps(1,end) infinite}
.pend i:nth-child(2){animation-delay:.14s}
.pend i:nth-child(3){animation-delay:.28s}
.pend i:nth-child(4){animation-delay:.42s}
.pend i:nth-child(5){animation-delay:.56s}
@keyframes pcell{0%{background:var(--line)}30%{background:var(--held)}60%{background:var(--line)}}

/* Thinking, distinct from the answer and shut by default. Thinking that looks like an answer IS an
   answer to a reader. */
.think{margin:0}
.think>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
               font-size:11.5px;font-weight:500;color:var(--ink-3);padding:3px 0}
.think>summary::-webkit-details-marker{display:none}
.think>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.think .tb{border-left:1px solid var(--line-2);padding:4px 0 4px 12px;margin-top:6px;font-size:12.5px;
           line-height:1.6;color:var(--ink-3);max-height:260px;overflow-y:auto}
.think .tb .keel,.think .tb .code{border:0;background:none;padding-left:0}

.prose{font-size:14.5px;line-height:1.68;color:var(--ink);max-width:64ch;overflow-wrap:anywhere}
.prose>*+*{margin-top:.85em}
.prose>*{margin-top:0;margin-bottom:0}
.prose h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:1.4em}
.prose h4{font-size:13.5px;font-weight:600;margin-top:1.3em}
.prose h5{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:1.3em}
.prose code{font-family:var(--mono);font-size:12px;background:var(--g-2);padding:1px 5px}
.prose ul,.prose ol{margin:0;padding-left:20px}
.prose li{margin-top:.35em}
.prose li::marker{color:var(--ink-3)}
.prose hr{border:0;border-top:1px solid var(--line)}
.prose a{color:var(--ink);text-decoration-color:var(--line-2);text-underline-offset:3px}
.prose a .ext{font-size:.85em;padding-left:2px;color:var(--ink-3)}
.prose .tbl{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-2);
            background:var(--g-2);padding:9px 11px;overflow-x:auto;white-space:pre}
/* Something that was said keeps the green keel, wherever it was said. */
.prose blockquote.keel{margin:0}

.code{margin:0;background:var(--g-2);border-left:2px solid var(--line-2);position:relative}
.code figcaption{font-family:var(--mono);font-size:10px;color:var(--ink-3);padding:7px 12px 0}
.code pre{margin:0;padding:8px 12px 12px;overflow-x:auto}
/* No highlighter. It needs a grammar per language, it is a dependency in disguise, and mono at
   11.5px on this ground is already legible. */
.code code{font-family:var(--mono);font-size:11.5px;line-height:1.62;color:var(--ink-2);background:none;padding:0}
.code .copy{position:absolute;top:5px;right:5px;opacity:0;transition:opacity 120ms;padding:4px 8px}
.code:hover .copy,.code:focus-within .copy{opacity:1}
.loc{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:none;border:0;padding:0;
     cursor:pointer;border-bottom:1px solid var(--held)}
.loc:hover{color:var(--ink)}

/* A tool call, one row, keyed by its call id and patched in place. No coloured bar down the side:
   the glyph on the left tells the kind of tool, and tints to the outcome once it settles, so a
   stack of rows never reads as a barcode of stripes. */
.tool{background:var(--g-2);border-radius:8px;overflow:hidden}
.thead{display:grid;grid-template-columns:18px auto minmax(0,1fr) 14px;gap:10px;align-items:center;
       width:100%;border:0;background:transparent;text-align:left;padding:9px 12px;cursor:pointer;
       transition:background .12s}
/* Hover is a whisper, and it never lifts the text to white. */
.thead:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.ticon{width:18px;height:18px;display:grid;place-content:center;color:var(--ink-3);transition:color .15s}
.ticon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool[data-state="running"] .ticon{color:var(--ink-2);animation:tpulse 1.3s ease-in-out infinite}
.tool[data-state="held"] .ticon{color:var(--held)}
.tool[data-state="broke"] .ticon{color:var(--broke)}
.tool[data-state="hold"] .ticon{color:var(--hold)}
@keyframes tpulse{0%,100%{opacity:.55}50%{opacity:1}}
.thead b{font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thead .tsub{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thead .cv{width:14px;height:14px;justify-self:end;color:var(--ink-3);transition:transform .18s}
.thead .cv svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.thead[aria-expanded="true"] .cv{transform:rotate(180deg)}
/* The result, in full, wrapping, always visible: what the call returned. */
.tres{padding:1px 12px 10px 40px;font-size:12.5px;line-height:1.5;color:var(--ink-3);overflow-wrap:anywhere}
.tbody{padding:0 12px 12px 40px}
.tbody .lab{margin:10px 0 5px}
.tbody pre.mono{background:var(--g-1);white-space:pre-wrap;overflow-wrap:anywhere}

/* The confirmation. The prose is ours, filled from typed fields; only the title and the diff come
   from the call. */
.confirm{background:var(--g-2);border-left:2px solid var(--hold);border-radius:10px;padding:14px 15px}
.confirm .lab{margin:0 0 7px}
.confirm h4{font-size:15px;font-weight:600;letter-spacing:-.015em;margin:0 0 8px;color:var(--ink)}
.cwhat{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.cwhat b{color:var(--ink);font-weight:600}
.dhead-line{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3);margin:0 0 6px}
.diff{font-family:var(--mono);font-size:11.5px;line-height:1.68;background:var(--g-1);overflow-x:auto;
      padding:9px 0;margin:0 0 13px;max-height:340px;overflow-y:auto}
.diff div{white-space:pre-wrap;overflow-wrap:anywhere}
.diff .n{color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;user-select:none}
.diff .add{background:color-mix(in srgb,var(--held) 15%,transparent)}
.diff .del{background:color-mix(in srgb,var(--broke) 15%,transparent)}
/* The sign is the carrier; the wash is the convenience. A copy-paste keeps the sign. */
.diff .add .g::before{content:'+ ';color:var(--held)}
.diff .del .g::before{content:'- ';color:var(--broke)}
.diff .cx .g::before{content:'  '}
/* The question. It asks for a preference and never for permission: the confirmation above is the
   other card, and the two never merge. A chosen option is marked by colour alone -- no rail, no
   underline, no tick -- and the card collapses in place to its own ledger line once it is answered,
   because a decision that vanished is a decision nobody can audit. */
.qa{background:var(--g-2);padding:14px 15px;border-radius:10px}
.qa .lab{margin:0 0 7px}
.qa h4{font-size:15px;font-weight:600;letter-spacing:-.015em;margin:0 0 10px;color:var(--ink)}
.opts{display:flex;flex-direction:column;gap:6px;margin:0 0 11px}
.opt{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 8px;text-align:left;border:0;
     background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);padding:9px 11px;cursor:pointer;
     color:var(--ink-2);transition:color .12s,box-shadow .12s}
.opt:hover{color:var(--ink)}
.opt[aria-checked="true"]{color:var(--ink);box-shadow:inset 0 0 0 1px var(--held)}
.opt .n{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);line-height:1.75}
.opt .l{font-size:13.5px;font-weight:600;color:inherit}
.opt .l i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
          text-transform:uppercase;color:var(--held);margin-inline-start:5px}
.opt .b{grid-column:2;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.qa .free{display:block;width:100%;margin:0 0 11px;background:var(--g-1);border:0;
          box-shadow:inset 0 0 0 1px var(--line-2);padding:9px 11px;font-family:var(--disp);
          font-size:13.5px;color:var(--ink);outline:none}
.qa .free:focus{box-shadow:inset 0 0 0 1px var(--held)}
.qa .cd{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.qa[data-done]{background:transparent;padding:0;display:flex;align-items:center;gap:10px}
.qline{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}
.qnote{font-size:13px;line-height:1.5;color:var(--ink-3)}

.crow{display:flex;gap:10px;align-items:center}

.suggest{padding:2px 14px 10px;display:flex;flex-direction:column;align-items:stretch}
.suggest:empty{display:none}
.sg{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;cursor:pointer;
    padding:9px 8px;text-align:left;font-size:13.5px;color:var(--ink-2);transition:background .13s,color .13s}
.sg:hover{background:var(--g-2);color:var(--ink)}
.sg:disabled{color:var(--ink-3);cursor:default}
.sg::before{content:'';width:8px;height:8px;flex:none;box-shadow:inset 0 0 0 1px var(--held)}
.sg:hover::before{background:var(--held);box-shadow:none}

.composer{padding:2px 14px 14px}
/* The composer wears the green always; attention makes it glow, not appear. */
.box{position:relative;background:var(--g-2);box-shadow:inset 0 0 0 1px var(--held);border-radius:12px;
     padding:13px 14px 9px;transition:box-shadow .16s}
.box:focus-within{box-shadow:inset 0 0 0 1px var(--held),
     0 0 0 3px color-mix(in srgb,var(--held) 22%,transparent),
     0 0 18px color-mix(in srgb,var(--held) 30%,transparent)}
.box textarea{display:block;width:100%;min-height:26px;max-height:150px;border:0;background:none;padding-right:66px;
              resize:none;outline:none;font-family:var(--disp);font-size:14.5px;line-height:1.5;color:var(--ink)}
.box textarea::placeholder{color:var(--ink-3)}
.brow{display:flex;align-items:center;gap:8px;margin-top:8px;min-width:0}
/* Mic to the left of send, one row, floated in the text lane so it adds no height. */
.sendstack{position:absolute;right:10px;bottom:9px;display:flex;flex-direction:row;align-items:center;gap:2px}
.sendstack .mini{width:28px;height:28px}
/* The mic pulses green while it is listening, so the session is never a silent guess. */
#mic.live{color:var(--held)}
/* Blocked by the browser: the button says so at a glance, and its title tells the fix. */
#mic.denied{color:var(--broke)}
#mic.denied::before{content:'';position:absolute;left:50%;top:50%;width:22px;height:2px;
     background:var(--broke);transform:translate(-50%,-50%) rotate(-45deg);border-radius:2px}
#mic.live::after{content:'';position:absolute;inset:-2px;border-radius:8px;
     box-shadow:0 0 0 0 color-mix(in srgb,var(--held) 55%,transparent);animation:miclive 1.4s ease-out infinite}
@keyframes miclive{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--held) 45%,transparent)}
     70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
#mic{position:relative}
/* The send button lights green once the box has something to send. */
#send.ready{color:var(--held)}
#send.ready:hover{color:var(--focus)}
.mini{width:30px;height:30px;flex:none;display:grid;place-content:center;border:0;background:transparent;
      color:var(--ink-3);cursor:pointer;transition:background .14s,color .14s}
.mini:hover{background:var(--g-1);color:var(--ink)}
.mini svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* One button, two jobs: Send when idle, Stop while an answer is in flight. */
#send .halt{display:none}
#send.halting .up{display:none}
#send.halting .halt{display:block}
#send.halting{color:var(--broke)}
.seg{display:inline-flex;gap:2px;padding:2px;background:var(--g-1);flex:none}
.seg button{border:0;background:transparent;cursor:pointer;padding:5px 12px;
            font-size:11.5px;font-weight:500;color:var(--ink-3);
            transition:background .14s,color .14s}
.seg button:hover{color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--g-2);color:var(--ink)}

@container (max-width:430px){
  .prose{max-width:none}
}

/* Below 820px the room is the whole screen. This must be the last word on `.chat`'s display: it sits
   in this sheet because room.css's copy lost to `.chat{display:grid}` above -- same specificity,
   earlier file. */
@media(max-width:820px){.chat,.strip,.grip{display:none}}

/* Her message before she has said it: three grey lines, the length a first message has. */
.prose.held{display:grid;gap:9px;padding-top:4px}