/* QUMESH brain-first shell. Uses the existing brand tokens; adds no new palette. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
  background: var(--color-background-default, #f7f8fa);
  color: var(--color-text-default, #16181d);
}
.hide { display: none !important; }
.grow { flex: 1; }
.muted { color: var(--color-text-subtle, #6b7280); }
.err { color: #b42318; font-size: 13px; min-height: 16px; }
.bidi { unicode-bidi: plaintext; text-align: start; }
button {
  font: inherit; border: 1px solid var(--color-border-default, #d7dae0);
  background: var(--color-background-surface, #fff);
  color: inherit; border-radius: 10px; padding: 8px 14px; cursor: pointer;
}
button:hover { border-color: var(--color-border-strong, #b9bec7); }
button.primary {
  background: var(--color-background-brand, #4b46d6); color: #fff; border-color: transparent;
}
button.link { border: 0; background: none; text-align: start; padding: 7px 10px; width: 100%; }
button.link:hover { background: rgba(127,127,127,.09); }
input, textarea, select {
  font: inherit; border: 1px solid var(--color-border-default, #d7dae0);
  border-radius: 10px; padding: 10px 12px; background: var(--color-background-surface, #fff);
  color: inherit;
}
textarea { resize: vertical; width: 100%; }
.row { display: flex; align-items: center; gap: 10px; }
.pill {
  border: 1px solid var(--color-border-default, #d7dae0); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px;
}
.pill.ok { border-color: #1a7f45; color: #1a7f45; }
.pill.warn { border-color: #b26a00; color: #b26a00; }
.pill.bad { border-color: #b42318; color: #b42318; }
.pill.info { border-color: #4b46d6; color: #4b46d6; }

/* gate */
#gate { display: grid; place-items: center; height: 100%; }
#gate .card {
  width: 380px; background: var(--color-background-surface, #fff); padding: 30px;
  border: 1px solid var(--color-border-default, #d7dae0); border-radius: 16px;
  display: grid; gap: 12px;
}
#gate input { width: 100%; }

/* shell */
#app { display: grid; grid-template-columns: 262px 1fr; height: 100%; }
#rail {
  border-inline-end: 1px solid var(--color-border-default, #d7dae0);
  background: var(--color-background-surface, #fff);
  display: flex; flex-direction: column; padding: 14px; gap: 10px; min-height: 0;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 4px 6px 10px; }
.brand .word { font-weight: 650; letter-spacing: .04em; }
.new { width: 100%; }
.rail-label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-text-subtle, #6b7280); padding: 8px 6px 2px; }
/* Block flow, not grid: as a grid the rows were compressed to 18px in the real browser and every
   conversation name was sliced in half. Measured on the running page, not assumed. */
#chats { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; }
#chats .c { display: block; padding: 9px 10px; margin-bottom: 4px; border-radius: 9px;
  cursor: pointer; font-size: 14px; line-height: 1.4; min-height: 36px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chats .c:hover { background: rgba(127,127,127,.09); }
#chats .c.on { background: rgba(75,70,214,.12); }
.rail-foot { border-top: 1px solid var(--color-border-default, #d7dae0); padding-top: 8px; }

main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
header {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  border-bottom: 1px solid var(--color-border-default, #d7dae0);
  background: var(--color-background-surface, #fff);
}
.mode { display: inline-flex; border: 1px solid var(--color-border-default, #d7dae0);
  border-radius: 999px; overflow: hidden; }
.mode .seg { border: 0; border-radius: 0; padding: 6px 16px; background: none; font-size: 13.5px; }
.mode .seg.on { background: var(--color-background-brand, #4b46d6); color: #fff; }

section { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 20px; }
section#view-conn, section#view-space { overflow: auto; padding: 22px 26px; display: block; }
h2 { margin: 0 0 6px; font-size: 20px; }

.note { margin: 12px 0 0; font-size: 13px; padding: 9px 13px; border-radius: 10px;
  background: rgba(75,70,214,.08); }

#stream { flex: 1; overflow: auto; padding: 18px 0; display: grid; gap: 14px; align-content: start; }
.hello { text-align: center; margin: 9vh auto 0; max-width: 560px; display: grid;
  gap: 8px; justify-items: center; }
.hello h1 { margin: 6px 0 0; font-size: 27px; }

.turn { max-width: 860px; width: 100%; }
.turn.me { justify-self: end; }
.turn .who { font-size: 12px; color: var(--color-text-subtle, #6b7280); margin-bottom: 4px; }
.turn .body {
  background: var(--color-background-surface, #fff); border: 1px solid var(--color-border-default, #d7dae0);
  border-radius: 14px; padding: 13px 16px; white-space: pre-wrap; line-height: 1.65;
}
.turn.me .body { background: rgba(75,70,214,.09); border-color: transparent; }
.turn details { margin-top: 7px; }
.turn summary { cursor: pointer; font-size: 13px; color: var(--color-text-subtle, #6b7280); }
.turn .kv { font-size: 13px; padding: 8px 2px; display: grid; gap: 4px; }

.rec { display: flex; align-items: center; gap: 11px; padding: 11px 15px; margin-bottom: 10px;
  border: 1px solid #b42318; border-radius: 12px; background: rgba(180,35,24,.06); }
.rec .dot { width: 11px; height: 11px; border-radius: 50%; background: #b42318;
  animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.draft { border: 1px solid var(--color-border-default, #d7dae0); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 9px;
  background: var(--color-background-surface, #fff); }

.composer { border-top: 1px solid var(--color-border-default, #d7dae0); padding: 12px 0 16px;
  display: grid; gap: 8px; }
.composer textarea { min-height: 46px; max-height: 190px; }
.tools { display: flex; align-items: center; gap: 9px; }

.card2 { border: 1px solid var(--color-border-default, #d7dae0); border-radius: 12px;
  padding: 14px 16px; margin: 10px 0; background: var(--color-background-surface, #fff); }
.card2 .t { display: flex; align-items: center; gap: 10px; }
.card2 .d { font-size: 13px; color: var(--color-text-subtle, #6b7280); margin-top: 5px; }
.group-h { margin: 22px 0 6px; font-size: 15px; font-weight: 650; }
.myth { border-inline-start: 3px solid #b26a00; padding: 8px 13px; margin: 8px 0;
  font-size: 13.5px; background: rgba(178,106,0,.06); border-radius: 0 10px 10px 0; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: #0f1115; color: #e8eaee; }
  :root:not([data-theme="light"]) #rail,
  :root:not([data-theme="light"]) header,
  :root:not([data-theme="light"]) .turn .body,
  :root:not([data-theme="light"]) .card2,
  :root:not([data-theme="light"]) .draft,
  :root:not([data-theme="light"]) #gate .card,
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) textarea,
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) button { background: #171a20; border-color: #2a2f38; }
  :root:not([data-theme="light"]) button.primary { background: #5b56e8; }
}
:root[data-theme="dark"] body { background: #0f1115; color: #e8eaee; }
:root[data-theme="dark"] #rail, :root[data-theme="dark"] header,
:root[data-theme="dark"] .turn .body, :root[data-theme="dark"] .card2,
:root[data-theme="dark"] .draft, :root[data-theme="dark"] #gate .card,
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea,
:root[data-theme="dark"] select, :root[data-theme="dark"] button {
  background: #171a20; border-color: #2a2f38; }
:root[data-theme="dark"] button.primary { background: #5b56e8; }


/* Creating a workspace is opt-in: nothing has to be created to start talking. */
#view-space .row { display: flex; align-items: center; gap: 9px; margin: 12px 0 4px; }
#view-space .row input { flex: 1 1 auto; min-width: 0; }
.pill.ok { background: rgba(4,120,87,.12); color: #047857; }
.pill.info { background: rgba(75,70,214,.12); color: #4b46d6; }

#mic { display: inline-flex; align-items: center; gap: 7px; }
#mic .mic-word { font-size: 13.5px; }
#mic:disabled { opacity: .55; cursor: default; }

/* Mixed Arabic and English in one RTL page: let each run set its own direction, or English
   sentences render with the full stop on the wrong side. */
.myth, .card2 .d, .card2 .t b { unicode-bidi: plaintext; text-align: start; }
.myth .alt { margin-top: 6px; font-size: 12.5px; unicode-bidi: plaintext; text-align: start; }

.rail-foot button.on { background: rgba(75,70,214,.12); font-weight: 600; }


/* A turn says what kind of thing it is before it says anything else. */
.banner { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; display: inline-block;
  margin-bottom: 6px; unicode-bidi: plaintext; }
.banner.ok { background: rgba(4,120,87,.12); color: #047857; }
.banner.local { background: rgba(178,106,0,.12); color: #b26a00; }
.banner.ext { background: rgba(180,35,24,.10); color: #b42318; }
.banner.save { background: rgba(75,70,214,.12); color: #4b46d6; }
/* BV-SELF: provenance, not an alarm - an understated line, no pill, no red. */
.banner.prov { background: none; color: var(--color-text-subtle, #6b7280); padding: 0 1px; border-radius: 0;
  font-size: 12px; }
.turn .answered-by { unicode-bidi: plaintext; }
.turn .acts { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.turn .saved { margin-top: 8px; font-size: 13px; padding: 9px 12px; border-radius: 10px;
  background: rgba(75,70,214,.07); display: grid; gap: 4px; }
.note.bad { background: rgba(180,35,24,.08); }

/* Saved knowledge: versions, and the one editable box that supersedes the current one. */
.note-body .ver { display: grid; gap: 8px; margin: 8px 0; }
.note-body .ver .cur { border-inline-start: 3px solid #047857; padding-inline-start: 10px; }
.note-body .ver .old { border-inline-start: 3px solid #b9bec7; padding-inline-start: 10px;
  opacity: .72; }
.note-body .pre { white-space: pre-wrap; margin-top: 4px; }
.note-body .fix { display: grid; gap: 8px; margin-top: 10px; }
.note-body .fix .row input { flex: 1 1 auto; min-width: 0; }

/* The key form. Nothing here is ever rendered back from the server. */
.keyform { display: grid; gap: 9px; margin-top: 12px; padding: 12px;
  border: 1px dashed var(--color-border-strong, #b9bec7); border-radius: 10px; }
.keyform input[type="password"] { width: 100%; }
.keyform .ack { display: flex; gap: 8px; align-items: flex-start; font-size: 13px;
  line-height: 1.5; }
.keyform .ack input { margin-top: 3px; }


.banner.ret { background: rgba(4,120,87,.10); color: #047857; }
.banner.warn2 { background: rgba(178,106,0,.14); color: #b26a00; }
.keyform .k-budget { width: 180px; }


/* A retrieved source is a long URL, and a long URL must wrap rather than push the page sideways. */
.turn .body, .saved, .card2 .d { overflow-wrap: anywhere; word-break: break-word; }

/* DEF-PROTO-BRAIN-MOBILE-01. The shell was desktop-only: a fixed 262px rail beside the chat and a
   380px sign-in card. On a 360-390px phone the card overflowed and the chat got ~120px. Below
   760px the rail becomes a drawer opened from the header, and nothing is wider than the screen. */
.menu-btn, .scrim { display: none; }
@media (max-width: 760px) {
  #gate { padding: 16px; }
  #gate .card { width: 100%; max-width: 380px; padding: 22px; }
  #app { grid-template-columns: 1fr; height: 100%; height: 100dvh; }
  #rail { display: none; position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: min(300px, 86vw); z-index: 30; box-shadow: 0 0 28px rgba(0,0,0,.28); }
  #app.rail-open #rail { display: flex; }
  #app.rail-open .scrim { display: block; position: fixed; inset: 0; z-index: 20;
    background: rgba(0,0,0,.35); }
  .menu-btn { display: inline-flex; padding: 6px 12px; font-size: 17px; line-height: 1; }
  header { padding: 8px 10px; gap: 6px; flex-wrap: wrap; }
  .pill { font-size: 12px; padding: 3px 9px; }
  .mode .seg { padding: 6px 12px; }
  section { padding: 0 10px; }
  section#view-conn, section#view-space { padding: 14px 12px; }
  .hello { margin-top: 4vh; }
  .hello h1 { font-size: 22px; }
  .turn .body { padding: 11px 13px; }
  /* iOS zooms the page when a focused field is under 16px. */
  input, textarea, select { font-size: 16px; }
  .composer { padding: 8px 0 max(10px, env(safe-area-inset-bottom)); }
  .rec { flex-wrap: wrap; }
  .keyform .k-budget { width: 100%; }
}

/* R4 trusted-device entry */
.pair-code { font: 600 30px/1.2 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .28em;
  text-align: center; padding: 12px; border-radius: 12px; background: rgba(75,70,214,.08); }
.adv-key { margin-top: 6px; font-size: 13px; }
.adv-key summary { cursor: pointer; color: var(--color-text-subtle, #6b7280); }
.adv-key input, .adv-key button { width: 100%; margin-top: 8px; }
section#view-dev { overflow: auto; padding: 22px 26px; display: block; }
#dev-pill { cursor: pointer; }
.dev-row .code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .18em; font-weight: 650; }

/* R5: chat management, task card, code blocks, side panel, accounts */
.search { width: 100%; margin-top: 6px; }
.arch-toggle { font-size: 12.5px; color: var(--color-text-subtle, #6b7280); display: flex; gap: 6px; align-items: center; padding: 2px 6px; }
#chats .c { position: relative; display: flex; align-items: center; gap: 4px; white-space: normal; }
#chats .c .c-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
#chats .c.hit { display: block; }
#chats .c .c-more { border: 0; background: none; padding: 2px 8px; opacity: .55; }
#chats .c:hover .c-more, #chats .c.on .c-more { opacity: 1; }
#chats .c-menu { position: absolute; inset-inline-end: 6px; top: 100%; z-index: 5; display: grid;
  background: var(--color-background-surface, #fff); border: 1px solid var(--color-border-default, #d7dae0);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 150px; }
#chats .c-menu button { border: 0; border-radius: 0; text-align: start; }
button.danger, .c-menu .danger { color: #b42318; }
.small { font-size: 12px; }
.turn-tools { display: flex; gap: 6px; margin-top: 6px; opacity: .8; flex-wrap: wrap; }
.turn-tools button { font-size: 12.5px; padding: 4px 10px; }
details.task { margin-top: 8px; font-size: 13px; }
details.task ol, details.task ul { margin: 6px 0; padding-inline-start: 20px; }
details.task li.ok::marker { color: #1a7f45; } details.task li.bad { color: #b42318; }
.codeblock { border: 1px solid var(--color-border-default, #d7dae0); border-radius: 10px; margin: 8px 0; overflow: hidden; white-space: normal; }
.codeblock .cb-bar { display: flex; gap: 6px; align-items: center; padding: 4px 8px; font-size: 12px;
  background: rgba(127,127,127,.08); }
.codeblock .cb-bar button { font-size: 12px; padding: 3px 8px; }
.codeblock pre { margin: 0; padding: 10px 12px; overflow: auto; font: 13px/1.5 ui-monospace, Consolas, monospace; white-space: pre; }
.turn .body code { font-family: ui-monospace, Consolas, monospace; background: rgba(127,127,127,.12); padding: 1px 5px; border-radius: 5px; }
.turn .body .li { display: block; } .turn .body .h { display: block; margin-top: 4px; }
#app.panel-open { grid-template-columns: 262px minmax(0,1fr) minmax(340px, 42%); }
#panel { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-height: 0;
  border-inline-start: 1px solid var(--color-border-default, #d7dae0); background: var(--color-background-surface, #fff); }
#panel.hide { display: none; }
#panel .panel-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#panel .panel-bar button { font-size: 12.5px; padding: 5px 10px; }
#panel textarea, #panel iframe { flex: 1; min-height: 0; width: 100%; border: 1px solid var(--color-border-default, #d7dae0);
  border-radius: 10px; font: 13px/1.5 ui-monospace, Consolas, monospace; resize: none; background: #fff; }
.login-flow { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 10px; background: rgba(75,70,214,.06); }
.primary-link { display: inline-block; padding: 9px 14px; border-radius: 10px; background: var(--color-background-brand, #4b46d6);
  color: #fff; text-decoration: none; font-weight: 600; width: fit-content; }
.rt .d.bad, .note.bad { color: #b42318; }
@media (max-width: 760px) {
  #app.panel-open { grid-template-columns: 1fr; }
  #panel { position: fixed; inset: 0; z-index: 40; border: 0; }
  #chats .c .c-more { opacity: 1; padding: 6px 10px; }
  .turn-tools button { padding: 7px 12px; }
  .composer .tools { flex-wrap: wrap; }
}

/* R6: provenance strip, approved-asset cards, transcript raw line */
details.prov { margin: 6px 0 2px; font-size: 12.5px; color: var(--muted, #6b7280); }
details.prov summary { cursor: pointer; list-style: none; }
details.prov summary::-webkit-details-marker { display: none; }
details.prov summary::before { content: "ⓘ "; }
details.prov .kv div { margin: 3px 0; }
.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 8px 0; }
.asset { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; overflow: hidden; background: var(--card, #fff); }
.asset img { display: block; width: 100%; height: 120px; object-fit: contain; background: #f8fafc; padding: 10px; box-sizing: border-box; }
.asset .noprev { height: 120px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #64748b; background: #f8fafc; }
.asset .a-meta { padding: 8px 10px; font-size: 13px; word-break: break-word; }
.asset .a-meta a { display: inline-block; margin-top: 4px; }
#draft-raw { margin: 4px 0; }
#answer-mode { max-width: 44vw; }
#pair-label { width: 100%; margin: 8px 0; box-sizing: border-box; }
@media (max-width: 640px) { #answer-mode { max-width: 34vw; font-size: 12px; } }

/* R6: phone landscape and narrow desktop - nothing wider than the screen */
main { min-width: 0; }
header { flex-wrap: wrap; min-width: 0; }
#ws-pill { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) {
  #ws-pill { max-width: 130px; }
  #answer-mode { max-width: 130px; font-size: 12.5px; }
  #learn-pill { display: none; }
}

/* R6: phone in landscape (short and not wide) uses the same drawer layout as portrait. */
@media (max-height: 520px) and (max-width: 1000px) {
  #app { grid-template-columns: 1fr; height: 100%; height: 100dvh; }
  #rail { display: none; position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: min(300px, 86vw); z-index: 30; box-shadow: 0 0 28px rgba(0,0,0,.28); overflow-y: auto; }
  #app.rail-open #rail { display: flex; }
  #app.rail-open .scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.35); }
  .menu-btn { display: inline-flex; padding: 6px 12px; font-size: 17px; line-height: 1; }
  header { padding: 6px 10px; gap: 6px; }
  .note#mode-note { display: none; }
  input, textarea, select { font-size: 16px; }
}

/* Outputs (rendered candidates) - one card per editing task, shared by the chat and Files.
   Logical properties only, so the RTL page mirrors it; the grid collapses to one or two columns at
   375 px; every link and the play control are at least 40 px tall for a thumb. */
.outputs { margin-top: 10px; border: 1px solid var(--color-border-default, #d7dae0); border-radius: 12px;
  padding: 12px; background: var(--color-background-surface, #fff); min-width: 0; font-size: 13px; }
.outputs + .outputs { margin-top: 12px; }
.outputs .o-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.outputs .o-head b { unicode-bidi: plaintext; overflow-wrap: anywhere; }
.outputs .o-rev { margin-top: 6px; font-size: 12.5px; }
.outputs .o-rev a { color: inherit; }
.outputs .o-stage { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.outputs .o-bar { flex: 1 1 60px; height: 6px; border-radius: 999px; background: rgba(127,127,127,.22); overflow: hidden; }
.outputs .o-bar i { display: block; height: 100%; background: #4b46d6; }
.outputs .o-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.outputs .oc { border: 1px solid var(--color-border-default, #d7dae0); border-radius: 10px; padding: 8px;
  display: grid; gap: 5px; align-content: start; min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.outputs .o-media { position: relative; background: #111; border-radius: 8px; overflow: hidden; aspect-ratio: 9 / 16;
  max-height: 320px; display: grid; place-items: center; }
.outputs .o-media.wide { aspect-ratio: 16 / 9; }
.outputs .o-media img, .outputs .o-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.outputs .o-media .o-nop { color: #bbb; font-size: 11.5px; padding: 8px; text-align: center; }
.outputs .o-play { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 40px; border: 0; cursor: pointer;
  background: transparent; color: #fff; font-size: 34px; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.outputs .o-play:hover, .outputs .o-play:focus-visible { background: rgba(0,0,0,.28); }
.outputs .o-name { font-weight: 600; }
.outputs .o-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.outputs .o-tags span { border: 1px solid var(--color-border-default, #d7dae0); border-radius: 999px; padding: 1px 7px;
  font-size: 11px; white-space: nowrap; }
.outputs .o-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.outputs .o-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--color-border-default, #d7dae0); text-decoration: none; color: inherit; }
.outputs .o-fail { color: #b42318; }
.outputs .o-ok { color: #1a7f45; }
#build { padding: 6px 10px 2px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .outputs, :root:not([data-theme="light"]) .outputs .oc { background: #171a20; border-color: #2a2f38; }
}
:root[data-theme="dark"] .outputs, :root[data-theme="dark"] .outputs .oc { background: #171a20; border-color: #2a2f38; }

/* Increment B (chat UI): times, edits, one Advanced disclosure per turn, one task card per request,
   the console's own confirmation box, the artifact panel's versions, the revision card. Logical
   properties only, so the RTL page mirrors everything; every new control is at least 40 px tall
   on a phone (the last block below). */
.turn .when { font-size: 11.5px; color: var(--q-sub, #6b7280); margin-top: 3px; font-variant-numeric: tabular-nums; }
.turn.me .when { text-align: end; }
.day-sep { text-align: center; font-size: 12px; color: var(--q-sub, #6b7280); margin: 6px auto 0; display: flex; align-items: center; gap: 10px; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; border-top: 1px solid var(--q-line, #e3e0d6); }
.turn .edited { font-size: 11.5px; color: var(--q-sub, #6b7280); }
.turn .edited summary { cursor: pointer; display: inline; }
.turn .edited .rev { margin: 4px 0; padding: 6px 10px; border-inline-start: 2px solid var(--q-line2, #d5d1c4);
  white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; }
.turn .editbox { display: grid; gap: 6px; width: 100%; }
.turn .editbox textarea { min-height: 60px; }
.turn .editbox .acts { justify-content: flex-end; }
.turn .srcline { font-size: 12.5px; color: var(--q-sub, #6b7280); margin-top: 4px; }
.turn .reply-to { font-size: 12px; color: var(--q-sub, #6b7280); margin-bottom: 4px; }
details.adv-turn { margin-top: 6px; font-size: 12.5px; color: var(--q-sub, #6b7280); }
details.adv-turn > summary { cursor: pointer; }
details.adv-turn .kv { display: grid; gap: 4px; padding: 6px 2px; }
details.adv-turn .ids { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; overflow-wrap: anywhere; }
details.task .t-stage { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
details.task .t-bar { flex: 1 1 60px; height: 6px; border-radius: 999px; background: rgba(127,127,127,.22); overflow: hidden; }
details.task .t-bar i { display: block; height: 100%; background: #4b46d6; }
details.task .t-stop { font-size: 12px; padding: 3px 9px; }
.pill.cancelled { border-color: #6b7280; color: #6b7280; text-decoration: line-through; }
#chats .c .c-when { flex: none; font-size: 11px; color: var(--q-sub, #6b7280); margin-inline-start: 4px; font-variant-numeric: tabular-nums; }
/* Inline, above the composer: a part of the page, not a modal - no scrim, nothing blocked. */
.cbox { margin: 0 0 8px; }
.cbox-card { width: 100%; background: var(--q-card, #fff); border: 1px solid var(--q-line2, #d5d1c4);
  border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.cbox-card h3 { margin: 0; font-size: 17px; }
.cbox-body { font-size: 14px; line-height: 1.55; display: grid; gap: 6px; unicode-bidi: plaintext; text-align: start; }
.cbox-body a { color: var(--q-brand, #4b46d6); }
.cbox-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cbox-acts button.danger { background: #b42318; color: #fff; border-color: transparent; }
.p-versions { font-size: 12.5px; display: grid; gap: 3px; max-height: 120px; overflow: auto; }
.p-versions .cur { font-weight: 600; }
.revcard { border: 1px solid #b26a00; background: rgba(178,106,0,.06); border-radius: 12px; padding: 12px; margin-top: 8px; display: grid; gap: 8px; }
.revcard .cands, .revcard .pick { display: flex; flex-wrap: wrap; gap: 6px; }
.revcard .pick { max-height: 200px; overflow: auto; }
.outputs .o-revise { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.outputs .o-revise input { flex: 1 1 180px; min-width: 0; }
.outputs .o-note { font-size: 12.5px; margin-top: 6px; }
@media (max-width: 860px) {
  .turn-tools button, .turn .editbox .acts button, details.task .t-stop, .revcard button, .outputs .o-revise button,
  .cbox-acts button, #panel .panel-bar button, .p-versions button { min-height: 40px; }
  .outputs .o-revise input { min-height: 40px; }
  /* The disclosures under a turn are tap targets too: Advanced, "edited · n versions" and what
     followed an earlier version. */
  details.adv-turn > summary, .turn .edited > summary, .turn details.rev-after > summary, details.t-tech > summary {
    min-height: 40px; display: inline-flex; align-items: center; }
  #panel .panel-bar { gap: 4px; }
}
.turn details.rev-after { margin-top: 4px; }
.turn details.rev-after > summary { cursor: pointer; }
.turn .rev-turn { margin: 3px 0; white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; }

/* Increment B, phone width: a card row's tags and buttons are words, not text to break. brain_r7.css
   lets a whole .card2 break anywhere (long file names, ids), which split "default" and "Open" into
   two lines on a 375 px screen; the row wraps as a whole instead. */
.card2 .t > .pill, .card2 .t > button { flex: none; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
@media (max-width: 560px) { .card2 .t { flex-wrap: wrap; row-gap: 6px; } }

/* Saved knowledge, Arabic, desktop (19 Oct): a card's head is one row whose tags and buttons never shrink
   (above), knowledge.js adds two tags and a button to it, and brain_r7.css lets a card break anywhere, so the
   title gave up its width and stood one letter a line while the last button left the card. On this page the
   head wraps at every width: the title keeps a readable width (a whole line when the rest does not fit
   beside it), and the tags and buttons follow on the next line. Nothing is hidden or cut. */
#view-notes .card2 .t { flex-wrap: wrap; row-gap: 6px; }
#view-notes .card2 .t > b { flex: 1 1 18rem; min-width: min(100%, 18rem); }
/* A URL, a hash or an id inside an Arabic title or note keeps its own left-to-right order (brain.js bidiRuns). */
.ltr-run { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }

/* Chat status (19 Oct): a task says its state in words (Queued, Processing, Completed, Failed, Cancelled),
   the step it is on, and a bar only when the record reports a number. The record's own codes are one tap
   away under "Technical details", on their own line. A collapsed card keeps its state in the summary; an
   open one says it once, in its status line. Inside a chat task card the outputs card's own status line
   would repeat the card's, so it is left to the card; Files -> Outputs still shows it. */
details.t-tech { flex-basis: 100%; font-size: 12px; color: var(--muted, #6b7280); }
details.t-tech > summary { cursor: pointer; width: fit-content; }
details.t-tech .t-code { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; overflow-wrap: anywhere; }
details.task[open] > summary .t-sum { display: none; }
details.task .outputs > .o-state-line { display: none; }

/* Users page, phone width (browser regression of a84bb94 at 375 px): the invite and department rows
   ran off the right edge. The rows wrap and the fields shrink; buttons keep their words. */
#view-users .row { display: flex; flex-wrap: wrap; gap: 8px; }
#view-users .row > input, #view-users .row > select { flex: 1 1 160px; min-width: 0; max-width: 100%; }
#view-users .row > button { flex: none; white-space: nowrap; }

/* BV-VOICE (BV-03..BV-06): the recorder's controls are touch-sized (44 px, WCAG 2.5.5), the keep
   opt-in sits in the strip, and the transcript's suggestions are underlined spans in a row under
   the composer - a tap opens the alternatives, Undo and "Always use this". Logical properties
   only, so RTL mirrors it. */
#mic, .voice .v-btn, .voice .v-lang, .v-meta button, .v-keep { min-height: 44px; min-width: 44px; }
.v-keep { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; flex: 1 1 100%; cursor: pointer; }
.v-keep input { width: 20px; height: 20px; margin: 0; flex: none; }
.v-details { display: inline; }
.v-details > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.v-details[open] { display: flex; flex-wrap: wrap; gap: 4px 10px; flex-basis: 100%; }
.v-meta .v-state { font-weight: 600; }
.v-props { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 0 6px; font-size: 13px; }
.v-props button { min-height: 44px; min-width: 44px; padding: 4px 10px; border-radius: 9px; }
.v-props .v-prop { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 100%; }
.v-props .v-prop-text { background: transparent; border: 1px solid var(--q-line2, #d5d1c4); unicode-bidi: plaintext;
  text-decoration: underline wavy var(--q-brand, #4b46d6); text-underline-offset: 3px; overflow-wrap: anywhere; }
.v-props .v-risk-consequential .v-prop-text { text-decoration-color: #b42318; }
.v-props .v-prop-menu { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.v-props .v-why { font-size: 12px; color: var(--q-muted, #6b6860); flex-basis: 100%; }
.v-props .v-props-h { font-size: 12px; color: var(--q-muted, #6b6860); }
.v-records { flex-direction: column; align-items: stretch; }
.v-records .v-entry { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* The person's own correction inside a suggestion's menu, and the strip's links to the dictionary and the
   kept recordings (their delete controls). */
.v-props .v-own { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.v-props .v-own input { min-height: 44px; min-width: 0; inline-size: 12em; max-inline-size: 100%; padding: 4px 8px; }
.voice .v-link { font-size: 12.5px; background: transparent; }
.v-keep input:disabled + span { opacity: .6; }