/* Chat view + markdown / code blocks / diff extras (md.js). Theme variables only (style.css). */

/* ── Markdown (CC.md) ────────────────────────────────────────── */
.md { line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .75em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1.1em 0 .45em; line-height: 1.3; font-weight: 650; }
.md h1 { font-size: 1.24em; } .md h2 { font-size: 1.14em; } .md h3 { font-size: 1.05em; }
.md h4, .md h5, .md h6 { font-size: 1em; color: var(--dim2); }
.md ul, .md ol { margin: 0 0 .75em; padding-left: 1.35em; }
.md li { margin: .25em 0; }
.md li > p { margin: 0 0 .45em; }
.md li > ul, .md li > ol { margin: .2em 0 .3em; }
.md li::marker { color: var(--dim); }
.md li.task { list-style: none; margin-left: -1.25em; }
.md-check { display: inline-block; width: .95em; height: .95em; border: 1.5px solid var(--dim); border-radius: 4px;
  vertical-align: -.12em; margin-right: .5em; position: relative; }
.md-check.on { background: var(--accent); border-color: var(--accent); }
.md-check.on::after { content: ""; position: absolute; left: .26em; top: .06em; width: .22em; height: .45em;
  border: solid var(--onaccent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.md li.task.done { color: var(--dim2); }
.md code { font-family: var(--mono); font-size: .86em; background: var(--raised); border: 1px solid var(--line);
  padding: .05em .35em; border-radius: 5px; }
.md code.path { color: var(--accent); cursor: pointer; }
.md a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px; }
.md a.path { text-decoration-style: dotted; }
.md strong { font-weight: 650; }
.md blockquote { margin: 0 0 .75em; padding: .1em 0 .1em .9em; border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--dim2); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1.1em 0; }
.md-table { overflow-x: auto; margin: 0 0 .85em; border: 1px solid var(--line); border-radius: 8px; }
.md table { border-collapse: collapse; font-size: .88em; line-height: 1.45; min-width: 100%; }
.md th, .md td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 5.5em; }
.md th { background: var(--raised); font-weight: 600; white-space: nowrap; }
.md tr:last-child td { border-bottom: 0; }
.md td code, .md th code { white-space: nowrap; }

/* ── Code blocks (CC.codeBlock) ──────────────────────────────── */
.cb { margin: 0 0 .85em; border-radius: 8px; overflow: hidden; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 60%, black); }
.cb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px;
  padding: 0 2px 0 12px; border-bottom: 1px solid var(--line); color: var(--dim); font: .72em var(--mono); }
.cb-lang { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.cb-copy { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 15px;
  color: var(--dim2); font: 600 1em var(--sans); flex: none; }
.cb-copy:active { background: var(--key); }
.cb pre.code { background: none; border-radius: 0; margin: 0; }
.cb.wrap pre.code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.cb.collapsed pre.code { max-height: calc(var(--ml) * 1.45em + 20px); overflow-y: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); mask-image: linear-gradient(to bottom, #000 65%, transparent); }
.cb-more { display: block; width: 100%; height: 38px; font-size: .84em; font-weight: 600; color: var(--accent);
  border-top: 1px solid var(--line); }
.cb-more:active { background: var(--raised); }
.cb.err { border-color: color-mix(in srgb, var(--red) 35%, transparent);
  background: color-mix(in srgb, var(--red) 8%, color-mix(in srgb, var(--bg) 60%, black)); }
.cb.err .cb-lang { color: var(--red); }
pre.code.nums .cl { display: block; }
pre.code.nums .cn::before { content: attr(data-n); display: inline-block; min-width: 2.6em; padding-right: 12px;
  text-align: right; color: var(--dim); opacity: .6; user-select: none; }
.hl-r { color: var(--red); }

/* ── Diff extras (CC.diffEdit / CC.diffUnified) ──────────────── */
.ci .diff { border: 1px solid var(--line); }
.diff.nonum .ln { padding-left: 6px; }
.diff .ln .tx { flex: none; }
.diff.wrap .ln .tx { flex: 1; min-width: 0; }
.diff .ln.sep { justify-content: center; padding: 3px 12px; margin: 2px 0; cursor: pointer; color: var(--dim2);
  font: .92em var(--sans); background: color-mix(in srgb, var(--text) 4%, transparent); }
.diff .ln.sep:active { background: var(--raised); }
.diff .ln.x { color: var(--dim); font-style: italic; }
.diff-head { position: sticky; left: 0; display: flex; align-items: center; gap: 8px; margin: -4px 0 4px;
  padding: 7px 10px; border-bottom: 1px solid var(--line); font: .95em var(--sans); width: 100%; }
.diff-file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); cursor: pointer; }
.diff-tag { font-size: .85em; color: var(--dim2); }
.diff-n { flex: none; font: .9em var(--mono); }

/* ── Chat screen ─────────────────────────────────────────────── */
.chat-body { flex: 1; min-height: 0; position: relative; }
.chat-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: 6px 0 20px; overscroll-behavior: contain; }
.chat-list { max-width: 780px; margin: 0 auto; transition: opacity .15s; }
.chat-body.reloading .chat-list, .chat-body.reloading .chat-foot { opacity: .35; pointer-events: none; }
.chat-reload { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: none;
  padding: 8px; border-radius: 50%; background: var(--bar); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.chat-body.reloading .chat-reload { display: block; }
.chat-reload .spin { display: block; }
.chat-top { display: none; justify-content: center; align-items: center; height: 48px; }
.chat-top.on { display: flex; }
.chat-empty { padding-top: 22vh; }

/* each unit; content-visibility skips layout/paint for the ones off screen */
.ci { padding: 0 16px; margin: 10px 0; content-visibility: auto; contain-intrinsic-size: auto 48px; }

/* time label */
.ci.tlabel { text-align: center; color: var(--dim); font-size: .74em; margin: 20px 0 6px; letter-spacing: .02em; }

/* you */
.ci.u { display: flex; flex-direction: column; align-items: flex-end; margin: 18px 0 14px; }
.bubble { max-width: 86%; padding: 9px 13px; border-radius: 12px 12px 4px 12px; background: var(--accent-soft);
  color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; user-select: text; }
.bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.img-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--dim2); font-size: .78em; }

/* Claude */
.ci.a { margin: 12px 0; }
.ci.a .md { max-width: 68ch; }

/* work block: a run of tool steps */
.wb { margin: 6px 0; }
.wb-head { display: none; align-items: center; gap: 8px; width: 100%; min-height: 36px; text-align: left;
  color: var(--dim2); font-size: .84em; }
.wb.grouped .wb-head { display: flex; }
.wb-head .ic-chev { transition: transform .15s; color: var(--dim); }
.wb.open .wb-head .ic-chev { transform: rotate(90deg); }
.wb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-err { color: var(--red); flex: none; }
.wb.grouped .wb-steps { margin-left: 6px; padding-left: 12px; border-left: 2px solid var(--line); }
.wb.collapsed .wb-steps > .step:not(:last-child) { display: none; }

.step-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 3px 0; text-align: left; color: var(--dim2); }
.step-row:active { color: var(--text); }
.step-row .icon { color: var(--dim); }
.step-sum { flex: 1; min-width: 0; font: .82em/1.4 var(--mono); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.open > .step-row .step-sum { white-space: normal; overflow-wrap: anywhere; }
.step-st { flex: none; min-width: 14px; display: flex; justify-content: flex-end; color: var(--dim); font-size: .9em; }
.step-st.err { color: var(--red); font-weight: 700; }
.spin.sm { width: 13px; height: 13px; border-width: 2px; }
.step.think .step-sum { font-family: var(--sans); font-style: italic; color: var(--dim2); font-size: .88em; }
.step.think .ic-chev { color: var(--dim); transition: transform .15s; }
.step.think.open .ic-chev { transform: rotate(90deg); }
.think-text { padding: 2px 0 10px 26px; color: var(--dim2); font-style: italic; font-size: .9em; white-space: pre-wrap; line-height: 1.55; }
.step-detail { padding: 2px 0 12px 26px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.step-detail .cb, .step-detail .md-table { margin: 0; }
.step-detail .md { font-size: .94em; }
.dlabel { color: var(--dim); font-size: .74em; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.dnote { color: var(--dim2); font-size: .84em; white-space: pre-wrap; overflow-wrap: anywhere; }
.fhead { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: .86em; min-width: 0; }
.fpath { color: var(--accent); font-family: var(--mono); font-size: .95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; cursor: pointer; }
.fhead .badge { flex: none; }
.kv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .86em; }
.kv-main { font-family: var(--mono); background: var(--raised); border: 1px solid var(--line); padding: 2px 7px; border-radius: 5px; overflow-wrap: anywhere; }
.kv-sub { color: var(--dim2); font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }
.kv-text { color: var(--text); }
.weblink { font-family: var(--mono); font-size: .84em; overflow-wrap: anywhere; }
.clamp { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, #000 75%, transparent); }
.clamp.open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.clamp-more { margin-top: 4px; color: var(--accent); font-size: .84em; font-weight: 600; min-height: 32px; }
.md-box { padding: 10px 12px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); }
.agent { display: flex; flex-direction: column; gap: 8px; }
.mini-toggle { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--dim2); font-size: .84em; min-height: 32px; }
.mini-toggle .icon { transition: transform .15s; }
.agent-prompt { display: none; }
.agent-prompt.open { display: block; }
.agent-prompt.open + * { margin-top: 2px; }
.agent .mini-toggle:has(+ .agent-prompt.open) .icon { transform: rotate(90deg); }

.ask { display: flex; flex-direction: column; gap: 14px; }
.ask-head { color: var(--dim); font-size: .72em; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ask-text { font-weight: 600; margin: 2px 0 6px; }
.ask-opt { display: flex; gap: 10px; padding: 6px 0; color: var(--dim2); }
.ask-opt.on { color: var(--text); }
.ask-opt.on .ask-mark { color: var(--accent); }
.ask-mark { flex: none; width: 1em; text-align: center; }
.ask-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ask-label { font-weight: 500; }
.ask-desc { font-size: .86em; color: var(--dim2); margin-top: -4px; }
.ask-ans { font-size: .9em; padding: 6px 0; }

/* tasks */
.ci.todos { margin: 12px 16px; padding: 0; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; }
.td-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; text-align: left; min-height: 48px; }
.td-head > .icon { color: var(--accent); }
.td-head .ic-down { color: var(--dim); transition: transform .15s; }
.todos.collapsed .td-head .ic-down { transform: rotate(-90deg); }
.td-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.td-title { font-weight: 600; flex: none; }
.td-cur { color: var(--dim2); font-size: .84em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; }
.todos.collapsed .td-cur { display: inline; }
.td-count { color: var(--dim2); font-size: .82em; flex: none; font-variant-numeric: tabular-nums; }
.td-bar { height: 3px; margin: 0 14px; border-radius: 2px; background: var(--line); overflow: hidden; }
.td-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }
.td-list { padding: 8px 14px 12px; }
.td-row { display: flex; gap: 10px; padding: 3px 0; font-size: .92em; line-height: 1.45; }
.td-mark { flex: none; width: 1.1em; text-align: center; color: var(--dim); }
.td-row.done .td-mark { color: var(--green); }
.td-row.done .td-text { text-decoration: line-through; color: var(--dim); }
.td-row.doing, .td-row.doing .td-mark { color: var(--accent); font-weight: 600; }
.todos.collapsed .td-list, .todos.collapsed .td-bar { display: none; }

/* slash commands, their output, notes */
.ci.cmd { text-align: center; margin: 14px 0; }
.cmd-chip { display: inline-block; padding: 3px 12px; border-radius: 22px; background: var(--key); color: var(--keytext);
  font: .8em var(--mono); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.ci.cmdout .cb { opacity: .85; }
.ci.cmdout pre.code { color: var(--dim2); }
.ci.note { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: .78em; margin: 16px 0; }
.ci.note::before, .ci.note::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ci.note span { flex: none; max-width: 75%; text-align: center; }

/* search hit */
.ci.flash { animation: ci-flash 2s ease-out; border-radius: 12px; }
@keyframes ci-flash { 0%, 35% { background: var(--accent-soft); } 100% { background: transparent; } }

/* live footer */
.chat-foot { display: none; align-items: center; gap: 10px; max-width: 780px; margin: 0 auto; padding: 6px 16px 8px;
  min-height: 40px; font-size: .86em; color: var(--dim2); }
.chat-foot.on { display: flex; }
.chat-foot .spin { width: 14px; height: 14px; flex: none; display: none; }
.chat-foot.work .spin { display: block; }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; display: none;
  animation: cf-pulse 1.6s ease-in-out infinite; }
.chat-foot.wait .cf-dot { display: block; }
.chat-foot.wait { color: var(--yellow); font-weight: 600; }
.cf-act { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-foot.work .cf-act { font-family: var(--mono); font-size: .94em; color: var(--fg); }
.cf-time { flex: none; color: var(--dim); font-variant-numeric: tabular-nums; }
@keyframes cf-pulse { 50% { opacity: .35; } }

/* "↓ New" */
.chat-pill { position: absolute; left: 50%; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px 0 12px; border-radius: 18px; background: var(--accent); color: var(--onaccent);
  font-weight: 600; font-size: .86em; box-shadow: 0 4px 16px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .18s, transform .18s; }
.chat-pill.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

/* The terminal's menu (permission prompt / question), answerable here. */
.chat-menu { display: none; max-width: 780px; margin: 0 auto; padding: 4px 12px 0; }
.chat-menu.on { display: block; }
.cm-card { border: 1px solid color-mix(in srgb, var(--yellow) 55%, transparent); border-radius: 14px;
  padding: 12px; background: var(--raised); display: flex; flex-direction: column; gap: 8px; }
.cm-card.sent { opacity: .5; pointer-events: none; }
.cm-q { font-weight: 600; }
.cm-opt { display: flex; gap: 10px; align-items: baseline; text-align: left; width: 100%; min-height: 44px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--yellow); background: transparent;
  color: var(--text); font: inherit; cursor: pointer; }
.cm-opt.solid { background: var(--yellow); color: var(--bg); border-color: var(--yellow); }
.cm-opt.plain { border-color: transparent; background: var(--key); color: var(--keytext); }
.cm-opt:active { filter: brightness(1.12); }
.cm-n { flex: none; opacity: .65; font-variant-numeric: tabular-nums; }
.cm-l { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ── Sent, not in the transcript yet (receipts) ──────────────── */
.chat-out { max-width: 780px; margin: 0 auto; }
.ci.u.out .bubble { opacity: .75; }
.out-meta, .rcpt-w { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--dim); font-size: .74em; }
.rcpt { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rcpt.done { color: var(--accent); }
.rcpt.done circle { fill: currentColor; stroke: none; }
.rcpt.done path { stroke: var(--bg); stroke-width: 1.8; }
.out-fail { margin-top: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--red);
  background: transparent; color: var(--red); font: .78em var(--sans); cursor: pointer; }
.ci.u.out.failed .bubble { opacity: .55; }
.out-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.out-rm { border-color: var(--dim); color: var(--dim); }

/* your answers to Claude's questions */
.bubble.ans { display: flex; flex-direction: column; gap: 3px; white-space: normal; }
.ans-row { display: flex; gap: 8px; align-items: baseline; }
.ans-h { flex: none; color: var(--dim2); font-size: .82em; }

/* ── Docked above the message box ────────────────────────────── */
.chat-dock { flex: none; max-width: 780px; width: 100%; margin: 0 auto; box-sizing: border-box; }
/* A past conversation (History / Search): Continue instead of the message box. */
.chat-continue { flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--key);
  background: var(--bar); }
.chat-continue .cc-btn { display: block; width: 100%; max-width: 748px; margin: 0 auto; padding: 13px; border: 0;
  border-radius: 12px; background: var(--accent); color: var(--onaccent); font: inherit; font-weight: 600; font-size: 15px; }
.chat-agents { display: none; align-items: center; gap: 8px; padding: 7px 16px; color: var(--dim2);
  font-size: .8em; border-top: 1px solid var(--line); }
.chat-agents.on { display: flex; }
.chat-agents .ag-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-agents .ag-t { flex: none; color: var(--dim); font-variant-numeric: tabular-nums; }

/* Claude's question card */
.qcard-wrap:empty { display: none; }
.qcard { margin: 6px 10px 8px; padding: 10px 12px 10px; border-radius: 16px; background: var(--raised);
  border: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(0,0,0,.25); max-height: 55vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; }
.qc-head { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.qc-back { flex: none; display: flex; padding: 4px; margin-left: -4px; border: 0; background: none; color: var(--dim2); }
.qc-back .icon { transform: rotate(180deg); }
.qc-prog { flex: 1; color: var(--dim2); font-size: .8em; }
.qc-skip { flex: none; border: 0; background: none; color: var(--dim2); font: .85em var(--sans); padding: 6px 4px; cursor: pointer; }
.qc-chip { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: .74em; font-weight: 600; }
.qc-q { font-weight: 600; line-height: 1.4; }
.qc-opts { display: flex; flex-direction: column; gap: 6px; }
.qc-opt { display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: 46px; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font: inherit; cursor: pointer; }
.qc-opt:active { filter: brightness(1.15); }
.qc-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.qc-box { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--dim);
  display: flex; align-items: center; justify-content: center; color: var(--onaccent); }
.qc-opt.on .qc-box { background: var(--accent); border-color: var(--accent); }
.qc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qc-l { overflow-wrap: anywhere; }
.qc-d { color: var(--dim2); font-size: .8em; line-height: 1.35; }
.qc-prev { margin: -2px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line);
  font: .78em/1.35 var(--mono); white-space: pre; overflow-x: auto; max-height: 30vh; }
.qc-foot { display: flex; align-items: center; gap: 10px; }
.qc-hint { flex: 1; color: var(--dim); font-size: .76em; }
.qc-next { flex: none; padding: 9px 18px; border-radius: 999px; border: 0; background: var(--accent);
  color: var(--onaccent); font: 600 .9em var(--sans); cursor: pointer; }
.qc-next[disabled] { opacity: .4; }
.qc-status { display: flex; align-items: center; gap: 6px; color: var(--dim2); font-size: .8em; }
.qc-fail { display: flex; flex-direction: column; gap: 8px; color: var(--red); font-size: .85em; }
.qc-btns { display: flex; gap: 8px; align-items: center; }

/* /btw side answers: a quieter card, set off from the main conversation */
.ci.btw { margin: 12px 16px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--raised) 60%, transparent); }
.btw-q { display: flex; gap: 8px; align-items: baseline; color: var(--dim2); font-size: .86em; margin-bottom: 6px; }
.btw-q > span:last-child { overflow-wrap: anywhere; }
.btw-chip { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: .8em; font-weight: 600; letter-spacing: .03em; }
.btw-a .md { max-width: 68ch; }
.btw-wait { display: flex; gap: 8px; align-items: center; color: var(--dim); font-size: .9em; }
.btw-note { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; color: var(--dim); font-size: .82em; }
.btw-acts { display: flex; justify-content: flex-end; margin-top: 6px; }
.btw-reply { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--accent); font: inherit; font-size: .85em; font-weight: 600; }
.btw-reply:active { background: var(--accent-soft); }