/* سحاب · layout and components, on the tokens only (tokens.css). From apps/client/design/v1 (docs/17 §11).
   Two worlds, never mixed (the trust line):
   - .well … session content (sunken, no seal). The Markdown renderer can only emit the classes listed in
     src/dom.ts CONTENT_CLASSES; none of them is styled as native.
   - .native / .seal … Sahab itself (permission sheet, core notes, step-up, decision dock). Never inside .md. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--sb-bg); color: var(--sb-text); font-family: var(--sb-font-ui); font-size: var(--sb-fs-md);
  line-height: var(--sb-lh-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sb-primary); outline-offset: 2px; }
.mono, code, pre, kbd { font-family: var(--sb-font-mono); }
[dir="ltr"].mono, .ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }
.muted { color: var(--sb-muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }

/* ------------------------------------------------------------------------------------------- icons & mark */
.ico { width: 22px; height: 22px; flex: none; display: inline-block; }
.ico-sm { width: 16px; height: 16px; }
.ico-xs { width: 14px; height: 14px; }
.mark { width: 22px; height: 22px; flex: none; }
.mark .m1, .mark .m3 { fill: var(--sb-seal); }
.mark .m3 { fill-opacity: .5; }
.mark .m2, .mark .m4 { fill: var(--sb-primary); }
.app-icon { width: 104px; height: 104px; border-radius: 28px; background: var(--sb-surface); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--sb-border); }
.app-icon .mark { width: 72px; height: 72px; }

/* ------------------------------------------------------------------------------------------- the seal (native only) */
.seal { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sb-font-display); font-size: 12px; font-weight: 600; color: var(--sb-seal); }
.seal .mark { width: 16px; height: 16px; }
.native { background: var(--sb-native); border-radius: 18px; padding: 14px 16px; box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-border-strong); display: flex; flex-direction: column; gap: 8px; }
.native h3 { margin: 0; font-size: var(--sb-fs-md); font-weight: 700; }
.native p { margin: 0; font-size: var(--sb-fs-sm); color: var(--sb-muted); }

/* ------------------------------------------------------------------------------------------- buttons */
.ib { width: var(--sb-tap); height: var(--sb-tap); flex: none; border-radius: 14px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--sb-text); }
.ib:hover { background: var(--sb-surface-2); }
.btn { min-height: 52px; border-radius: var(--sb-r-pill); border: 0; font-weight: 600; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-p { background: var(--sb-primary); color: var(--sb-on-primary); }
.btn-g { background: var(--sb-surface-2); color: var(--sb-text); box-shadow: inset 0 0 0 1px var(--sb-border-strong); }
.btn-d { background: var(--sb-danger); color: var(--sb-on-danger); }
.btn-dl { background: transparent; color: var(--sb-danger); box-shadow: inset 0 0 0 1.5px var(--sb-border-strong); min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }
.lnk { background: none; border: 0; padding: 8px; font-weight: 500; font-size: 14px; color: var(--sb-muted); text-decoration: underline; text-underline-offset: 3px; }
.lnk-p { color: var(--sb-primary); }
.lnk-d { color: var(--sb-danger); text-decoration: none; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: var(--sb-r-pill); font-size: 12px; font-weight: 600; background: var(--sb-surface-2); color: var(--sb-muted); }
.chip-d { background: var(--sb-danger-soft); color: var(--sb-danger); }
.chip-w { background: var(--sb-warning-soft); color: var(--sb-warning); }
.chip-p { background: var(--sb-primary-soft); color: var(--sb-primary); }
.chip-ok { color: var(--sb-success); }
.pend { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--sb-r-pill); background: var(--sb-pending); color: var(--sb-on-warning); font-size: 12px; font-weight: 700; flex: none; }
.pend-was { background: transparent; color: var(--sb-warning); box-shadow: inset 0 0 0 1px var(--sb-warning); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sb-border-strong); border-top-color: var(--sb-primary); animation: sbs .9s linear infinite; flex: none; }
@keyframes sbs { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------------------------------- session state shapes */
.st { width: 10px; height: 10px; flex: none; display: inline-block; border-radius: 50%; }
.st-none { border: 1.5px dashed var(--sb-st-none); }
.st-starting { border: 2px solid var(--sb-st-starting); background: linear-gradient(90deg, var(--sb-st-starting) 50%, transparent 50%); }
.st-ready { background: var(--sb-st-ready); }
.st-running { background: var(--sb-st-running); box-shadow: 0 0 0 3px var(--sb-primary-soft); animation: sbp 1.6s ease-in-out infinite; }
.st-idle { border: 2px solid var(--sb-st-idle); }
.st-stopping { border: 2px solid var(--sb-st-stopping); background: linear-gradient(90deg, var(--sb-st-stopping) 50%, transparent 50%); }
.st-stopped { background: var(--sb-st-stopped); border-radius: 2px; }
.st-error { background: var(--sb-st-error); border-radius: 2px; transform: rotate(45deg) scale(.85); }
@keyframes sbp { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .st-running, .spin { animation: none; } }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sb-muted); }
.state-error { color: var(--sb-danger); }
.state-running { color: var(--sb-primary); }

/* ------------------------------------------------------------------------------------------- app shell */
/* The on-screen keyboard (B-111, src/keyboard.ts): --sb-kb is its inset where the browser does not shrink the layout
   viewport for it (iOS Safari; Android without interactive-widget=resizes-content). #app is the containing block of the
   sheets (they are appended to it), so every sheet and the composer end above the keyboard. */
#app { height: calc(100dvh - var(--sb-kb, 0px)); display: flex; flex-direction: column; position: relative; }
[data-kb] .comp, [data-kb] .sheet, [data-kb] .perm { padding-bottom: 12px; }
.screen { height: 100%; display: flex; flex-direction: column; min-height: 0; position: relative; background: var(--sb-bg); }
.bar { display: flex; align-items: center; gap: 4px; padding: max(env(safe-area-inset-top), 10px) 8px 8px; background: var(--sb-bg); box-shadow: 0 1px 0 var(--sb-border); position: relative; z-index: 2; }
.bar-plain { box-shadow: none; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sb-font-display); font-weight: 600; font-size: 22px; padding-inline: 8px; }
.brand .mark { width: 22px; height: 22px; }
.ttl { font-family: var(--sb-font-display); font-weight: 500; font-size: 26px; margin: 0; flex: 1; padding-inline: 8px; }
.nodechip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--sb-r-pill); box-shadow: inset 0 0 0 1px var(--sb-border-strong); font-size: 12px; color: var(--sb-muted); }
.nodechip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sb-success); }
.nodechip.off .dot { background: transparent; border: 1.5px dashed var(--sb-faint); }
.scroll { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.pad { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

/* desktop: two columns, the list on the start (right) side */
.shell { height: 100%; display: flex; min-height: 0; overflow: hidden; }
.shell > .side { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.shell > .main { display: none; min-width: 0; flex-direction: column; }
.shell > * > .screen { flex: 1; min-width: 0; }
.stream > * { min-width: 0; max-width: 100%; }
.well { overflow-x: hidden; }
@media (min-width: 980px) {
  .shell { padding: 0; }
  .shell > .side { width: 340px; flex: none; border-inline-end: 1px solid var(--sb-border); }
  .shell > .main { display: flex; flex: 1; min-width: 0; }
  .shell.in-conv > .side { display: flex; }
  .main-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--sb-muted); }
}
@media (max-width: 979px) {
  .shell.in-conv > .side { display: none; }
  .shell.in-conv > .main { display: flex; flex: 1; }
}

/* ------------------------------------------------------------------------------------------- banners */
.banner { margin: 8px 12px 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--sb-native); box-shadow: inset 0 0 0 1px var(--sb-border-strong); }
.banner .t { font-weight: 700; font-size: 14px; }
.banner .d { font-size: 12px; color: var(--sb-muted); }
.banner .ico { color: var(--sb-warning); }

/* ------------------------------------------------------------------------------------------- login & onboarding */
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; }
.hero h1 { font-family: var(--sb-font-display); font-weight: 600; font-size: 52px; margin: 0; line-height: 1.1; }
.hero p { margin: 0; color: var(--sb-muted); }
.foot { padding: 16px 24px max(env(safe-area-inset-bottom), 24px); display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
.foot small { color: var(--sb-muted); font-size: 12px; }
.alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sb-danger-soft); color: var(--sb-text); font-size: 14px; }
.alert .ico { color: var(--sb-danger); }
.wait { background: var(--sb-native); border-radius: 18px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--sb-border-strong); display: flex; flex-direction: column; gap: 4px; text-align: start; }
.wait .row1 { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 14px; }
.wait .clock { font-family: var(--sb-font-mono); color: var(--sb-warning); font-weight: 700; direction: ltr; }
.steps { display: flex; gap: 6px; margin: 4px 0 0; }
.steps span { height: 4px; border-radius: 4px; flex: 1; background: var(--sb-surface-2); }
.steps span.on { background: var(--sb-primary); }
.onb { flex: 1; padding: 8px 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.onb .top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--sb-muted); }
.h1 { font-family: var(--sb-font-display); font-weight: 500; font-size: 30px; line-height: 1.25; margin: 0; }
.p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--sb-muted); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-size: 13px; font-weight: 600; }
.input { width: 100%; min-height: 56px; border-radius: 16px; border: 0; background: var(--sb-surface); box-shadow: inset 0 0 0 1.5px var(--sb-border-strong); padding: 12px 16px; font-size: 18px; }
.input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--sb-primary); }
.input.bad { box-shadow: inset 0 0 0 2px var(--sb-danger); }
.code-input { font-family: var(--sb-font-mono); letter-spacing: .04em; text-transform: uppercase; direction: ltr; text-align: center; font-size: 16px; padding-inline: 8px; }
.err { color: var(--sb-danger); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.cmdline { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--sb-surface); box-shadow: inset 0 0 0 1px var(--sb-border); font-family: var(--sb-font-mono); font-size: 13px; direction: ltr; }
.ring { width: 200px; height: 200px; border-radius: 50%; margin: 12px auto; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 14px var(--sb-surface-2); color: var(--sb-primary); }
.ring .ico { width: 56px; height: 56px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--sb-muted); }
.checks li { display: flex; gap: 8px; align-items: center; }
.checks .ico { color: var(--sb-success); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { border: 0; border-radius: var(--sb-r-pill); background: var(--sb-surface-2); padding: 8px 14px; font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------------------------------------------- list */
.sec { font-size: 12px; font-weight: 600; color: var(--sb-muted); padding: 18px 20px 6px; }
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 20px; border: 0; background: transparent; text-align: start; width: 100%; }
.row + .row { box-shadow: 0 -1px 0 var(--sb-border); }
.row:hover, .row.sel { background: var(--sb-surface); }
.rt { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm { font-size: 13px; color: var(--sb-muted); margin-top: 3px; }
.rm.error { color: var(--sb-danger); }
.dock { padding: 4px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.dock-card { border-radius: 18px; padding: 12px 14px; background: var(--sb-native); box-shadow: inset 0 0 0 1.5px var(--sb-warning); display: flex; flex-direction: column; gap: 6px; text-align: start; border: 0; width: 100%; }
.dock-card .h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.dock-card .clock { font-family: var(--sb-font-mono); color: var(--sb-warning); direction: ltr; display: inline-flex; gap: 4px; align-items: center; }
.dock-card .tt { font-weight: 700; font-size: 15px; }
.dock-card .cmd1 { font-family: var(--sb-font-mono); font-size: 12px; color: var(--sb-muted); direction: ltr; text-align: left; unicode-bidi: isolate; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-card .go { color: var(--sb-primary); font-size: 13px; font-weight: 600; }
.fab { position: absolute; bottom: max(env(safe-area-inset-bottom), 24px); inset-inline-start: 20px; height: 58px; padding: 0 24px 0 22px; border-radius: 20px; border: 0; background: var(--sb-primary); color: var(--sb-on-primary); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); z-index: 3; }
.listfoot { display: flex; align-items: center; gap: 8px; padding: 12px 20px max(env(safe-area-inset-bottom), 24px); color: var(--sb-muted); font-size: 13px; min-height: 100px; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 24px; }
.empty h2 { font-family: var(--sb-font-display); font-weight: 500; font-size: 30px; margin: 0; }
.empty .mark-outline { width: 132px; height: 132px; }
.mark-outline rect, .mark-outline circle { fill: none; stroke-width: 6; }
.mark-outline .m1, .mark-outline .m3 { stroke: var(--sb-border-strong); }
.mark-outline .m2, .mark-outline .m4 { stroke: var(--sb-primary); }
.statuscard { width: 100%; background: var(--sb-surface); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--sb-border); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.statuscard .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.statuscard .ok { width: 8px; height: 8px; border-radius: 50%; background: var(--sb-success); display: inline-block; margin-inline-end: 6px; }
.statuscard .no { width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed var(--sb-faint); display: inline-block; margin-inline-end: 6px; }
.sk { background: var(--sb-surface-2); border-radius: 8px; animation: sbk 1.4s ease-in-out infinite; }
@keyframes sbk { 50% { opacity: .5; } }

/* ------------------------------------------------------------------------------------------- sheets & scrims */
.scrim { position: absolute; inset: 0; background: var(--sb-scrim); z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet { background: var(--sb-native); border-radius: 30px 30px 0 0; box-shadow: 0 -1px 0 var(--sb-border-strong), 0 -24px 60px rgba(0,0,0,.5); padding: 18px 18px max(env(safe-area-inset-bottom), 24px); display: flex; flex-direction: column; gap: 14px; max-height: 92%; overflow-y: auto; }
.sheet-plain { background: var(--sb-surface); }
.sheet .grab { width: 36px; height: 4px; border-radius: 4px; background: var(--sb-border-strong); margin: 0 auto 4px; }
.sheet h2 { font-family: var(--sb-font-display); font-weight: 500; font-size: 26px; margin: 0; line-height: 1.3; }
.sheet .hrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts .x { color: var(--sb-danger); }
.facts .v { color: var(--sb-success); }
.kv { background: var(--sb-bg); border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 13px; }
.kv dt { color: var(--sb-muted); }
.kv dd { margin: 0; }
.btns { display: flex; gap: 10px; }
.btns > * { flex: 1; }
.btns-col { display: flex; flex-direction: column; gap: 10px; }
.danger-word { color: var(--sb-danger); }

@media (min-width: 980px) {
  .scrim.center { justify-content: center; align-items: center; }
  .scrim.center .sheet { border-radius: 24px; width: 440px; }
}

/* ------------------------------------------------------------------------------------------- conversation */
.convbar { gap: 2px; }
.convbar .titles { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-inline: 4px; }
.convbar .t { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stopbtn { height: 34px; border-radius: var(--sb-r-pill); border: 0; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: var(--sb-danger-soft); color: var(--sb-danger); box-shadow: inset 0 0 0 1px var(--sb-danger); }
.stopbtn .sq { width: 8px; height: 8px; background: currentColor; border-radius: 1px; }
.menu { position: absolute; inset-inline-end: 8px; top: 56px; z-index: 30; background: var(--sb-surface); border-radius: 14px; box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-border-strong); padding: 6px; display: flex; flex-direction: column; min-width: 200px; }
.menu button { border: 0; background: transparent; text-align: start; padding: 12px; border-radius: 10px; }
.menu button:hover { background: var(--sb-surface-2); }

/* the well: session content only */
.well { flex: 1; min-height: 0; overflow-y: auto; background: var(--sb-well); box-shadow: var(--sb-well-shadow); padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; contain: paint; position: relative; }
.stream { display: flex; flex-direction: column; gap: 16px; max-width: 760px; width: 100%; margin: 0 auto; }
.sys { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--sb-muted); }
.sys::before, .sys::after { content: ""; flex: 1; height: 1px; background: var(--sb-border); }
.sys .mono { direction: ltr; }
.sys.error { color: var(--sb-danger); }
.you { align-self: flex-start; max-width: 86%; background: var(--sb-surface-2); border-radius: 20px 20px 20px 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.you.failed { box-shadow: inset 0 0 0 1.5px var(--sb-danger); }
.ack { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sb-muted); margin-top: -10px; padding-inline-start: 6px; }
.ack.failed { color: var(--sb-danger); }
.ack .lnk { padding: 0 4px; font-size: 12px; color: var(--sb-primary); }
.att { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--sb-bg); font-size: 13px; }
.att .n { font-family: var(--sb-font-mono); direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.think { align-self: flex-start; }
.think summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--sb-r-pill); box-shadow: inset 0 0 0 1px var(--sb-border-strong); font-size: 12px; color: var(--sb-muted); cursor: pointer; }
.think summary::-webkit-details-marker { display: none; }
.think[open] .body { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--sb-surface); color: var(--sb-muted); font-size: 14px; white-space: pre-wrap; }
.trail { background: var(--sb-surface); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--sb-border); overflow: hidden; }
.trail > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.trail > summary::-webkit-details-marker { display: none; }
.trail .tsum { display: inline-flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.tool { box-shadow: 0 -1px 0 var(--sb-border); }
.tool > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; font-size: 13px; cursor: pointer; }
.tool > summary::-webkit-details-marker { display: none; }
.tn { font-family: var(--sb-font-mono); font-size: 12.5px; font-weight: 700; min-width: 40px; direction: ltr; unicode-bidi: isolate; text-align: right; }
.ts { font-family: var(--sb-font-mono); font-size: 12.5px; color: var(--sb-muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; unicode-bidi: isolate; text-align: right; }
.tool .ok { color: var(--sb-success); }
.tool .bad { color: var(--sb-danger); }
.tool .body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.res { background: var(--sb-bg); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--sb-border); font-family: var(--sb-font-mono); font-size: 12px; line-height: 1.65; padding: 10px 12px; direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; margin: 0; }
.res.error { box-shadow: inset 0 0 0 1px var(--sb-danger); }
.diff { background: var(--sb-bg); border-radius: 12px; overflow: auto; font-family: var(--sb-font-mono); font-size: 12px; line-height: 1.6; direction: ltr; text-align: left; max-height: 320px; margin: 0; padding: 6px 0; box-shadow: inset 0 0 0 1px var(--sb-border); }
.diff .l { display: block; padding: 0 10px; white-space: pre-wrap; word-break: break-all; line-break: anywhere; overflow-wrap: anywhere; }
.diff .add { background: var(--sb-diff-add); }
.diff .del { background: var(--sb-diff-del); }
.diff .add::before { content: "+ "; color: var(--sb-success); }
.diff .del::before { content: "- "; color: var(--sb-danger); }
.file { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 6px; border-radius: 16px; background: var(--sb-surface); box-shadow: inset 0 0 0 1px var(--sb-border); }
.file-wrap { display: flex; flex-direction: column; gap: 8px; border-radius: 16px; background: var(--sb-surface); box-shadow: inset 0 0 0 1px var(--sb-border); padding: 8px; }
.file-wrap .file { box-shadow: none; padding: 2px; }
.file .meta { flex: 1; min-width: 0; }
.file .n { font-family: var(--sb-font-mono); font-size: 13px; font-weight: 700; direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.file .s { font-size: 12px; color: var(--sb-muted); }
.preview { width: 100%; max-height: 260px; object-fit: contain; border-radius: 12px; background: var(--sb-bg); display: block; }
.turn { font-size: 12px; color: var(--sb-muted); }
.turn .mono { direction: ltr; unicode-bidi: isolate; }
.trunc { font-size: 12px; color: var(--sb-muted); display: inline-flex; gap: 6px; align-items: center; }
.ask { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sb-surface); box-shadow: inset 0 0 0 1px var(--sb-border); font-size: 13px; }
.ask .ico { color: var(--sb-warning); }
.ask.allow .ico { color: var(--sb-success); }
.ask.deny .ico { color: var(--sb-danger); }
.older { align-self: center; }
.newpill { position: sticky; bottom: 8px; align-self: center; z-index: 5; border: 0; height: 36px; padding: 0 14px; border-radius: var(--sb-r-pill); background: var(--sb-surface); box-shadow: var(--sb-shadow), inset 0 0 0 1px var(--sb-border-strong); font-size: 13px; font-weight: 600; }
.coremsg { margin: 0 -8px; }
.coremsg.warn h3 { color: var(--sb-warning); }
/* G6: Sahab's own note under content shown in pages (views/common.ts moreNote): how much is not shown yet, and the way
   to see it. Native and sealed, outside the content box. */
.morenote { margin: 0 -8px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; }
.morenote p { flex: 1 1 200px; }
.morenote .btn { height: 36px; }
.paged { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Content shown in pieces (pieces.ts): each piece is a block box of its own, so the browser shapes and breaks a bounded
   amount of text at a time. Pieces cut inside a line read as a wrapped line. */
.md-piece { display: block; }
.code-block.md-cont { border-start-start-radius: 0; border-start-end-radius: 0; }
.diff .l.cont::before { content: "\21AA  "; color: var(--sb-muted); }
/* The permission sheet's edit (G6): the path is the first line of the paged diff, the rest of the input (B-92) «#» lines. */
.diff .l.path { font-weight: 600; color: var(--sb-text); box-shadow: inset 0 -1px 0 var(--sb-border); padding-bottom: 2px; margin-bottom: 2px; }
.diff .l.meta { color: var(--sb-warning); }
.pending-item { min-height: 24px; }

/* composer */
.working { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12px; color: var(--sb-muted); background: var(--sb-bg); }
.comp { background: var(--sb-bg); padding: 10px 12px max(env(safe-area-inset-bottom), 16px); box-shadow: 0 -1px 0 var(--sb-border); position: relative; z-index: 2; }
.cbox { background: var(--sb-surface); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--sb-border-strong); padding: 10px 8px 8px; display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin: 0 auto; }
.cbox textarea { border: 0; background: transparent; resize: none; min-height: 28px; max-height: 180px; padding: 4px 10px; font-size: 16px; line-height: 1.5; }
.cbox textarea:focus { outline: none; }
.crow { display: flex; align-items: center; gap: 4px; }
/* CL-10: Sahab's own note under the composer (a message that starts with a slash is not sent). */
.slash-note { max-width: 760px; margin: 8px auto 0; padding: 10px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--sb-warning); }
.slash-note p { color: var(--sb-text); }
.send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sb-primary); color: var(--sb-on-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.send[disabled] { opacity: .5; }
.startsend { height: 40px; border-radius: var(--sb-r-pill); border: 0; padding: 0 14px; background: var(--sb-primary); color: var(--sb-on-primary); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.pending-att { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
.pending-att .chip { max-width: 100%; }
.pending-att progress { width: 60px; height: 6px; }

/* ------------------------------------------------------------------------------------------- permission (native) */
.permwrap { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.permwrap > * { pointer-events: auto; }
.permwrap::before { content: ""; position: absolute; inset: 0; background: var(--sb-scrim); opacity: .5; pointer-events: none; }
.perm { position: relative; background: var(--sb-native); border-radius: 30px 30px 0 0; box-shadow: 0 -1px 0 var(--sb-border-strong), 0 -24px 60px rgba(0,0,0,.5); padding: 18px 18px max(env(safe-area-inset-bottom), 22px); display: flex; flex-direction: column; gap: 12px; max-height: 88%; overflow-y: auto; scrollbar-gutter: stable; }
/* PR #19: the gutter is kept whether or not the sheet scrolls. Without it, once the reason (locked at its full height,
   no longer shrunk) made the sheet overflow, each page added to the input was laid out twice (with and without the
   scrollbar) and all of the input again with it: a 64 KiB Syriac edit took 85-100 s to fill in Edge, 5.5 s tasks. With
   it, 6 s. And the reason's width no longer changes when the scrollbar comes. */
.perm .hrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.perm .clock { font-family: var(--sb-font-mono); color: var(--sb-warning); font-weight: 700; direction: ltr; }
.perm .tlabel { font-size: 12px; color: var(--sb-muted); }
.perm .toolrow { display: flex; align-items: center; gap: 10px; }
.perm .toolname { font-family: var(--sb-font-mono); font-weight: 700; font-size: 17px; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.perm .tooldesc { font-size: 13px; color: var(--sb-muted); }
.perm .tico { width: 40px; height: 40px; border-radius: 12px; background: var(--sb-surface-2); display: inline-flex; align-items: center; justify-content: center; }
.perm .lbl { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--sb-muted); }
.perm .lbl .mono { direction: ltr; }
.cmd { background: var(--sb-well); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--sb-border); padding: 12px 14px; font-family: var(--sb-font-mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; line-break: anywhere; overflow-wrap: anywhere; margin: 0; direction: ltr; text-align: left; unicode-bidi: isolate; max-height: 40vh; overflow-y: auto; }
/* PR #19: a line breaks anywhere, glue characters too (NBSP, U+202F, U+2060…): nothing of a command waits off to the right. */
.perm > .cmd { flex-shrink: 0; }
/* PR #19 targeted round: the command keeps its height, min(its content, 40vh), in the sheet's height-capped column. A
   scroller's min-height is 0, so a long reason (locked, no longer shrunk) squeezed it to its padding (24 px) on a phone;
   now the sheet scrolls instead (sheet.mjs C1-C4). */
.flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flags .cap { font-size: 12px; color: var(--sb-muted); width: 100%; }
.from { background: var(--sb-well); border-radius: 14px; padding: 10px 14px; box-shadow: inset 0 0 0 1px var(--sb-border); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* G6: the agent's reason, once all of it is shown, is fixed at its measured height and contained (permission.ts lockReason),
   and never shrunk below it by the sheet's height-capped column (PR #19). */
.from.locked { contain: strict; overflow: hidden; flex-shrink: 0; }
.from .cap { font-size: 11px; color: var(--sb-muted); display: block; margin-bottom: 2px; }
.decide { display: flex; gap: var(--sb-gap-decision); align-items: stretch; }
.deny { height: 58px; border-radius: 18px; border: 0; background: var(--sb-surface-2); color: var(--sb-text); box-shadow: inset 0 0 0 1.5px var(--sb-border-strong); font-weight: 700; font-size: 17px; flex: 1.25; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hold { position: relative; overflow: hidden; height: 58px; border-radius: 18px; border: 0; background: transparent; color: var(--sb-success); box-shadow: inset 0 0 0 1.5px var(--sb-success); font-weight: 600; font-size: 14px; flex: 1; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; }
.hold[disabled] { color: var(--sb-muted); box-shadow: inset 0 0 0 1.5px var(--sb-border-strong); cursor: not-allowed; }
.hold .fill { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 0; background: var(--sb-success); }
.hold.holding .fill { width: 100%; transition: width var(--sb-hold-ms) linear; }
.hold .lbl2 { position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.hold.holding .lbl2 { color: var(--sb-on-primary); mix-blend-mode: normal; }
.hold.armed { box-shadow: inset 0 0 0 2.5px var(--sb-success); }
/* The press left the button and was cancelled (permission.ts): a short flash, so the reset is seen, not only read. */
.hold.reset { animation: sbreset .7s ease-out; }
@keyframes sbreset { 0%, 40% { box-shadow: inset 0 0 0 2.5px var(--sb-warning); background: var(--sb-warning-soft); } }
@media (prefers-reduced-motion: reduce) { .hold.reset { animation: none; box-shadow: inset 0 0 0 2.5px var(--sb-warning); } }
.permnote { font-size: 12px; color: var(--sb-muted); text-align: center; }
.permnote.warn { color: var(--sb-warning); }
.denyform textarea { width: 100%; min-height: 96px; border-radius: 16px; border: 0; background: var(--sb-surface); box-shadow: inset 0 0 0 2px var(--sb-primary); padding: 12px 14px; font-size: 16px; resize: vertical; }
.rec { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sb-native); box-shadow: inset 0 0 0 1px var(--sb-border-strong); font-size: 14px; }
@media (min-width: 980px) {
  .permwrap { position: static; z-index: auto; pointer-events: auto; }
  .permwrap::before { display: none; }
  .perm { border-radius: 0; max-height: 46vh; box-shadow: 0 -1px 0 var(--sb-border-strong); display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; }
  .perm > .side { grid-column: 2; grid-row: 1 / span 6; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
  .perm > :not(.side) { grid-column: 1; }
  .decide { flex-direction: column; }   /* the gap stays --sb-gap-decision (T-4: 28 px) */
  .deny, .hold { flex: none; }
}

/* ------------------------------------------------------------------------------------------- devices & settings */
.grp { margin: 0 16px; background: var(--sb-surface); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--sb-border); overflow: hidden; }
.dv { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 76px; }
.dv + .dv { box-shadow: 0 -1px 0 var(--sb-border); }
.dico { width: 42px; height: 42px; border-radius: 12px; background: var(--sb-surface-2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dv .nm { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dv .mt { font-size: 12px; color: var(--sb-muted); }
.lbl { font-size: 12px; font-weight: 600; color: var(--sb-muted); margin: 22px 28px 8px; }
.setrow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 60px; width: 100%; border: 0; background: transparent; text-align: start; }
.setrow + .setrow { box-shadow: 0 -1px 0 var(--sb-border); }
.tog { width: 52px; height: 32px; border-radius: var(--sb-r-pill); background: var(--sb-surface-2); position: relative; flex: none; border: 0; padding: 0; box-shadow: inset 0 0 0 1px var(--sb-border-strong); }
.tog span { position: absolute; top: 3px; inset-inline-end: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--sb-muted); transition: inset-inline-end .2s var(--sb-ease); }
.tog[aria-checked="true"] { background: var(--sb-primary); }
.tog[aria-checked="true"] span { inset-inline-end: 23px; background: var(--sb-on-primary); }
.segc { display: flex; background: var(--sb-surface-2); border-radius: 14px; padding: 4px; gap: 4px; margin: 0 16px; }
.segc button { flex: 1; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--sb-muted); font-weight: 600; font-size: 14px; }
.segc button[aria-pressed="true"] { background: var(--sb-bg); color: var(--sb-text); box-shadow: inset 0 0 0 1px var(--sb-border-strong); }
.bigcode { font-family: var(--sb-font-mono); font-weight: 700; font-size: 34px; letter-spacing: .06em; direction: ltr; text-align: center; line-height: 1.35; word-spacing: .3em; }
.bar-progress { height: 6px; border-radius: 6px; background: var(--sb-surface-2); overflow: hidden; }
.bar-progress span { display: block; height: 100%; background: var(--sb-primary); }
.toast { position: absolute; top: calc(max(env(safe-area-inset-top), 10px) + 60px); inset-inline: 16px; z-index: 40; pointer-events: none; }

/* ------------------------------------------------------------------------------------------- session content (well) */
/* Only CONTENT_CLASSES (src/dom.ts) appear below .md. Nothing here uses --sb-native or --sb-seal. */
.md { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.md p { margin: 0 0 8px; white-space: pre-line; }   /* a paragraph is one text node; its line breaks are its \n (markdown.ts textRun) */
.md p:last-child { margin-bottom: 0; }
.md ol, .md ul { margin: 6px 0; padding-inline-start: 22px; }
.md li { margin: 2px 0; }
.md .md-h { font-family: var(--sb-font-ui); font-weight: 700; margin: 10px 0 6px; line-height: 1.4; }
.md h3.md-h { font-size: 18px; } .md h4.md-h { font-size: 16px; } .md h5.md-h, .md h6.md-h { font-size: 15px; }
.md blockquote { margin: 6px 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--sb-border-strong); color: var(--sb-muted); }
.md hr { border: 0; height: 1px; background: var(--sb-border); margin: 12px 0; }
.md del { opacity: .7; }
.md .inline-code { font-family: var(--sb-font-mono); font-size: 13px; background: var(--sb-surface-2); padding: 1px 6px; border-radius: 6px; direction: ltr; unicode-bidi: isolate; }
.md .md-cut, .md .image-ref { color: var(--sb-muted); font-size: 13px; }
.md .link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.md .link-label { font-weight: 600; }
.md .link-url { font-family: var(--sb-font-mono); font-size: 12.5px; color: var(--sb-muted); direction: ltr; unicode-bidi: isolate; word-break: break-all; }
.md .well-btn, .code-block .well-btn { border: 0; background: var(--sb-surface-2); color: var(--sb-muted); font-size: 11.5px; height: 24px; padding: 0 8px; border-radius: 6px; }
.code-block { background: var(--sb-bg); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--sb-border); overflow: hidden; margin: 6px 0; direction: ltr; }
.code-block .code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 0; font-family: var(--sb-font-mono); font-size: 12px; color: var(--sb-muted); }
.code-block pre { margin: 0; padding: 10px 14px 12px; font-family: var(--sb-font-mono); font-size: var(--sb-fs-code); line-height: var(--sb-lh-code); direction: ltr; text-align: left; white-space: pre; overflow-x: auto; }
.tok-k { color: var(--sb-code-kw); } .tok-s { color: var(--sb-code-str); } .tok-c { color: var(--sb-code-cm); } .tok-n { color: var(--sb-code-str); }
.table-wrap { overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--sb-border); margin: 6px 0; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap th { text-align: start; font-weight: 600; padding: 9px 12px; background: var(--sb-surface-2); font-size: 13px; }
.table-wrap td { padding: 9px 12px; border-top: 1px solid var(--sb-border); }
.table-wrap [data-align="c"] { text-align: center; } .table-wrap [data-align="r"] { text-align: right; } .table-wrap [data-align="l"] { text-align: left; }