/* ───────────────────────── chat ─────────────────────────
   A column of prose with room around it, which is what makes this read as a
   page rather than a panel. Only what you said gets a surface; the answer is
   the page itself. */
#chatview { flex-direction: row; overflow: hidden; }
#chatmain { flex: 1 1 auto; display: flex; flex-direction: column;
            min-width: 0; min-height: 0; }

/* The conversation rail. It carries the page's own tone, not the rail tone —
   two panels of the same shade side by side read as one very wide sidebar. */
#convo {
  flex: 0 0 var(--convo-w); width: var(--convo-w); display: none;
  flex-direction: column; min-height: 0; background: var(--bg);
}
#convo.open { display: flex; }
#convo-hdr { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
             padding: 10px 10px 8px 18px; }
#convo-title { font-size: 11px; font-weight: 650; letter-spacing: .1em;
               text-transform: uppercase; color: var(--muted);
               margin-right: auto; }
#hist-list { flex: 1 1 auto; overflow-y: auto; min-height: 0;
             padding: 2px 10px calc(14px + var(--safe-b)); }
.conv {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-md);
  padding: 9px 12px; margin-bottom: 2px; transition: background var(--ease);
}
.conv:hover { background: var(--wash); }
.conv.on { background: var(--wash-2); }
.conv .ct { font-size: 13.5px; font-weight: 550; color: var(--text);
            line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden; }
.conv .cm { font-size: 11.5px; color: var(--muted); margin-top: 3px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.on .cm { color: var(--accent); }
/* What resuming costs. Context leads because it is the number that decides
   whether to pick this one up again; output trails as the smaller note. */
.conv .cc { display: flex; gap: 8px; margin-top: 3px; font-size: 11px;
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.conv .cc-ctx { color: var(--dim); font-weight: 550; }
.conv .cc-out { color: var(--muted); }
.hist-empty { color: var(--muted); font-size: 13px; padding: 22px 14px;
              text-align: center; line-height: 1.6; }

#feed { flex: 1 1 auto; overflow-y: auto; min-height: 0;
        padding: 8px 24px 8px; overscroll-behavior: contain;
        scroll-behavior: smooth; }
#feed > * { max-width: var(--read); margin-inline: auto; }
.msg { margin-bottom: 26px; }
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .body {
  background: var(--raised); border-radius: var(--r-lg);
  padding: 12px 17px; max-width: 78%;
  white-space: pre-wrap; word-break: break-word;
  font-size: 15px; line-height: 1.6;
}
.msg.assistant .body { font-size: 15px; line-height: 1.68;
                       word-break: break-word; }
.msg.error .body {
  color: var(--bad); font-size: 14.5px; background: var(--wash);
  border-radius: var(--r-md); padding: 12px 16px;
}
.msg .imgs { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.chat-note { color: var(--muted); font-size: 12.5px; text-align: center;
             margin: 22px auto; }
.chat-empty { color: var(--muted); font-size: 15px; text-align: center;
              padding: 15vh 24px; line-height: 1.6; }

/* markdown */
.body > :first-child { margin-top: 0; }
.body > :last-child { margin-bottom: 0; }
.body p { margin: 0 0 .9em; }
.body h1, .body h2, .body h3 { font-size: 16px; font-weight: 600;
                               margin: 1.4em 0 .5em; letter-spacing: -.01em; }
.body ul, .body ol { margin: 0 0 .9em; padding-left: 1.3em; }
.body li { margin: .3em 0; }
.body a { color: var(--accent); text-underline-offset: 2px; }
.body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
             font-size: .87em; background: var(--wash-2); border-radius: 5px;
             padding: .12em .38em; }
.body pre { background: var(--sunken); border-radius: var(--r-md);
            padding: 14px 16px; overflow-x: auto; margin: 0 0 .9em; }
.body pre code { background: none; padding: 0; font-size: 13px;
                 white-space: pre; line-height: 1.55; }
.body blockquote { margin: 0 0 .9em; padding-left: 14px;
                   border-left: 2px solid var(--line); color: var(--dim); }
.body table { border-collapse: collapse; font-size: 13.5px;
              margin-bottom: .9em; display: block; overflow-x: auto; }
.body th, .body td { border: 1px solid var(--line); padding: 7px 11px; }
.body th { background: var(--wash); font-weight: 600; }

/* The run: work between two answers. A quiet pill, not a bordered box. */
.run { margin-bottom: 26px; }
.run-head {
  display: inline-flex; align-items: center; gap: 8px; text-align: left;
  background: var(--wash); border: 0; padding: 7px 14px; cursor: pointer;
  color: var(--muted); font-size: 13px; border-radius: var(--r-pill);
  max-width: 100%; transition: background var(--ease), color var(--ease);
}
.run-head:hover { background: var(--wash-2); color: var(--text); }
.run-head.bad { color: var(--bad); }
.run-head .caret { font-size: 11px; flex: 0 0 auto; }
.run-head > span:last-child { overflow: hidden; text-overflow: ellipsis;
                              white-space: nowrap; }
.run-body { margin: 10px 0 0; padding: 14px 18px; background: var(--wash);
            border-radius: var(--r-md); }
.step { color: var(--dim); font-size: 13px; margin: 5px 0;
        word-break: break-word; }
.step.tool { color: var(--muted); }
.out { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
       font-size: 12px; line-height: 1.55; color: var(--dim);
       white-space: pre-wrap; word-break: break-word;
       margin: 6px 0 12px; padding: 10px 12px; background: var(--sunken);
       border-radius: var(--r-sm); }
.out.bad { color: var(--bad); }
.out-note { font-size: 11.5px; color: var(--muted); margin: -6px 0 12px; }
.tasks { margin: 8px 0 12px; }
.task { font-size: 13px; margin: 4px 0; color: var(--muted); }
.task.doing { color: var(--doing); }
.task.done { color: var(--dim); }

.thinking { display: flex; align-items: center; gap: 9px; color: var(--muted);
            font-size: 13.5px; margin-bottom: 26px; }
.thinking i { width: 6px; height: 6px; border-radius: 50%;
              background: var(--muted); animation: pulse 1.2s infinite; }
.thinking i:nth-child(2) { animation-delay: .18s; }
.thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes pulse { 0%,100% { opacity: .22; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .thinking i { animation: none; opacity: .6; }
  #feed { scroll-behavior: auto; }
}

/* Composer: one soft surface, floating clear of the edge. */
#composer { flex: 0 0 auto; padding: 4px 16px calc(14px + var(--safe-b));
            padding-left: max(16px, var(--safe-l));
            padding-right: max(16px, var(--safe-r)); }
#composer > * { max-width: var(--read); margin-inline: auto; }
#cbar { display: flex; align-items: center; gap: 2px; padding: 0 6px 7px;
        overflow-x: auto; scrollbar-width: none; }
#cbar::-webkit-scrollbar { display: none; }
.pick { background: none; border: 0; color: var(--muted); font-size: 12.5px;
        padding: 5px 10px; cursor: pointer; white-space: nowrap;
        flex: 0 0 auto; border-radius: var(--r-pill);
        transition: background var(--ease), color var(--ease); }
.pick:hover { color: var(--text); background: var(--wash); }
#ctx { font-size: 12px; color: var(--muted); margin-left: auto;
       white-space: nowrap; flex: 0 0 auto; padding-left: 10px; }
#cattach { display: flex; gap: 8px; padding: 0 4px 8px; flex-wrap: wrap; }
.thumb { position: relative; width: 54px; height: 54px;
         border-radius: var(--r-md); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button { position: absolute; top: 3px; right: 3px; border: 0;
                background: #000000a8; color: #fff; font-size: 11px;
                width: 19px; height: 19px; border-radius: 50%; cursor: pointer;
                display: flex; align-items: center; justify-content: center; }
#cbox { display: flex; align-items: flex-end; gap: 8px;
        background: var(--surface); border-radius: 26px; padding: 6px;
        box-shadow: var(--shadow); transition: box-shadow var(--ease); }
#cbox:focus-within { box-shadow: var(--shadow), 0 0 0 2px var(--accent); }
#cinput {
  flex: 1 1 auto; min-height: 38px; max-height: 34vh; resize: none;
  background: transparent; color: var(--text); font-size: 16px;
  border: 0; padding: 9px 4px; line-height: 1.5;
}
#cinput:focus { outline: none; }
#cinput::placeholder { color: var(--muted); }
.round {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-ink); font-size: 16px;
  font-weight: 600; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: filter var(--ease), opacity var(--ease);
}
.round:hover { filter: brightness(1.07); }
.round.ghost { background: transparent; color: var(--muted);
               font-weight: 400; font-size: 20px; }
.round.ghost:hover { background: var(--wash-2); color: var(--text);
                     filter: none; }
.round:disabled { opacity: .3; }