/* R7 - a Claude-familiar shell with QUMESH branding: warm neutral canvas, quiet sidebar with
   Recents and an account chip, one centred reading column, assistant text without bubbles, a
   rounded composer card with the answering account picker inside it, artifacts on the right. */
:root {
  --q-bg: #f5f4ef; --q-rail: #eeece4; --q-card: #ffffff; --q-line: #e3e0d6; --q-line2: #d5d1c4;
  --q-text: #1f1e1b; --q-sub: #6b6860; --q-brand: #4b46d6; --q-brand-2: #3d38b8; --q-user: #ebe8de;
  --q-hover: rgba(31,30,27,.06); --q-sel: rgba(31,30,27,.09); --col: 768px;
}
:root[data-theme="dark"] {
  --q-bg: #262624; --q-rail: #1f1e1d; --q-card: #30302e; --q-line: #3a3936; --q-line2: #4a4845;
  --q-text: #ecebe6; --q-sub: #a7a49b; --q-user: #3a3936; --q-hover: rgba(255,255,255,.06); --q-sel: rgba(255,255,255,.09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --q-bg: #262624; --q-rail: #1f1e1d; --q-card: #30302e; --q-line: #3a3936; --q-line2: #4a4845;
    --q-text: #ecebe6; --q-sub: #a7a49b; --q-user: #3a3936; --q-hover: rgba(255,255,255,.06); --q-sel: rgba(255,255,255,.09);
  }
}
html, body { background: var(--q-bg) !important; color: var(--q-text) !important; }
body { font-size: 15px; }
.muted { color: var(--q-sub); }
.small { font-size: 12.5px; }
button { background: var(--q-card); border-color: var(--q-line2); color: var(--q-text); }
button.primary { background: var(--q-brand); color: #fff; }
button.primary:hover { background: var(--q-brand-2); }
button.icon { border: 0; background: transparent; width: 36px; height: 36px; padding: 0; border-radius: 10px;
  display: inline-grid; place-items: center; font-size: 18px; }
button.icon:hover { background: var(--q-hover); }
input, textarea, select { background: var(--q-card); border-color: var(--q-line2); color: var(--q-text); }
.only-mobile { display: none !important; }

/* shell */
#app { grid-template-columns: 272px 1fr; height: 100dvh; height: var(--vvh, 100dvh); }
#app.panel-open { grid-template-columns: 272px minmax(0,1fr) minmax(360px, 44%); }
#rail { background: var(--q-rail); border-inline-end: 1px solid var(--q-line); padding: 12px 10px; gap: 6px; }
.brand { padding: 4px 8px 8px; }
.brand .word { font-weight: 700; letter-spacing: .06em; font-size: 15px; }
.new { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 9px 10px;
  border-radius: 10px; font-weight: 600; color: var(--q-brand); }
.new:hover { background: var(--q-hover); }
.new .plus { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--q-brand); color: #fff; font-size: 14px; }
.rail-nav { display: grid; gap: 1px; }
.rail-ext { display: contents; }
.rail-nav .link, .acct-menu .link { display: flex; align-items: center; gap: 10px; border-radius: 9px; padding: 8px 10px; font-size: 14px; }
.rail-nav .link.on { background: var(--q-sel); font-weight: 600; }
.ico { width: 20px; text-align: center; font-size: 14px; opacity: .85; }
.badge { margin-inline-start: auto; background: #b26a00; color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.search { margin: 6px 2px 2px; padding: 8px 11px; font-size: 13.5px; background: var(--q-card); }
.rail-label { display: flex; align-items: center; text-transform: none; letter-spacing: 0; font-size: 12.5px; padding: 10px 10px 4px; color: var(--q-sub); }
.arch-toggle { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.arch-toggle input { width: auto; }
#chats .c { position: relative; padding: 7px 34px 7px 10px; margin-bottom: 1px; font-size: 13.5px; min-height: 32px; }
#chats .c:hover { background: var(--q-hover); }
#chats .c.on { background: var(--q-sel); }
#chats .c .c-more { position: absolute; inset-inline-end: 4px; top: 3px; border: 0; background: transparent;
  padding: 2px 8px; opacity: 0; }
#chats .c:hover .c-more, #chats .c.on .c-more, #chats .c .c-more:focus { opacity: 1; }
#chats .c .c-menu { position: absolute; inset-inline-end: 4px; top: 30px; z-index: 5; background: var(--q-card);
  border: 1px solid var(--q-line2); border-radius: 10px; padding: 4px; display: grid; min-width: 150px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); }
#chats .c .c-menu button { border: 0; text-align: start; background: transparent; padding: 7px 10px; }
#chats .c .c-menu button:hover { background: var(--q-hover); }
#chats .c .c-menu button.danger { color: #b42318; }
.rail-foot { border-top: 1px solid var(--q-line); padding-top: 8px; position: relative; }
.acct { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; padding: 8px; border-radius: 10px; text-align: start; }
.acct:hover { background: var(--q-hover); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #3f3d38; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.acct-name { display: grid; line-height: 1.2; min-width: 0; }
.acct-name small { color: var(--q-sub); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
#ws-pill { border: 0; padding: 0; }
.acct-menu { position: absolute; bottom: 58px; inset-inline-start: 0; inset-inline-end: 0; background: var(--q-card);
  border: 1px solid var(--q-line2); border-radius: 12px; padding: 6px; display: grid; gap: 2px; z-index: 20;
  box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.menu-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13.5px; }
.menu-row select { padding: 4px 8px; font-size: 13px; }
.mode .seg { padding: 4px 10px; font-size: 12.5px; }

/* top bar: quiet, like Claude */
header.topbar { background: transparent; border-bottom: 0; padding: 10px 16px; gap: 8px; }
.chat-title { font-size: 14.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.menu-btn { border: 0; background: transparent; font-size: 18px; }

/* one centred column */
.col { width: 100%; max-width: var(--col); margin: 0 auto; }
section#view-chat { padding: 0 16px; }
section.page { overflow: auto; padding: 18px 16px 40px; display: block; }
section.page h2 { font-size: 22px; font-weight: 650; margin: 8px 0 10px; }
#stream { padding: 8px 0 24px; gap: 22px; }
#stream > * { width: 100%; max-width: var(--col); margin: 0 auto; }
.turn { max-width: var(--col); }
.turn .who { display: none; }
.turn.me { justify-self: stretch; display: flex; flex-direction: column; align-items: flex-end; }
.turn.me .body { background: var(--q-user); border: 0; border-radius: 16px; padding: 10px 15px; max-width: 85%; }
.turn.it .body { background: transparent; border: 0; padding: 2px 0; line-height: 1.7; font-size: 15.5px; }
.turn .turn-tools { display: flex; gap: 2px; margin-top: 4px; opacity: .0; transition: opacity .15s; }
.turn:hover .turn-tools, .turn:last-child .turn-tools, .turn:focus-within .turn-tools { opacity: 1; }
/* BV-07: a touch screen has no hover - Copy, Edit & resend and Retry stay visible on every turn. */
@media (hover:none), (pointer:coarse) { .turn .turn-tools { opacity: 1 } }
/* BV-10 (8189 QA at 375 px): Send and Stop were 40 px; touch targets are at least 44 px. */
@media (hover:none), (pointer:coarse) { #send, #stop { min-width: 44px; min-height: 44px } }
.turn .turn-tools button { border: 0; background: transparent; font-size: 12.5px; padding: 4px 8px; color: var(--q-sub); }
.turn .turn-tools button:hover { background: var(--q-hover); color: var(--q-text); }
.banner { font-size: 12.5px; border-radius: 8px; padding: 5px 10px; margin-bottom: 6px; display: inline-block; }
.hello { margin: 16vh auto 0; }
.hello h1 { font-size: 34px; font-weight: 500; font-family: Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.hello img { width: 38px; height: 38px; }

/* composer card */
.dock { padding: 0 0 max(14px, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--q-bg) 30%); }
.composer { border: 1px solid var(--q-line2); border-top: 1px solid var(--q-line2); background: var(--q-card);
  border-radius: 20px; padding: 12px 12px 10px 16px; gap: 6px; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.composer:focus-within { border-color: #b9b4a5; box-shadow: 0 2px 18px rgba(0,0,0,.08); }
.composer textarea { border: 0; padding: 4px 2px; min-height: 28px; max-height: 40vh; resize: none; background: transparent; font-size: 15.5px; outline: none; }
.tools { gap: 4px; }
select.model { border: 0; background: transparent; font-size: 13px; padding: 6px 8px; color: var(--q-sub); cursor: pointer; border-radius: 8px; max-width: 170px; }
select.model:hover { background: var(--q-hover); color: var(--q-text); }
button.send { width: 34px; height: 34px; border-radius: 10px; padding: 0; font-size: 17px; font-weight: 700; display: inline-grid; place-items: center; }
button.stopbtn { background: var(--q-text); color: var(--q-bg); border: 0; }
.setup-banner { margin: 6px 0 4px; padding: 9px 14px; border-radius: 12px; border: 1px solid #e3c98f; background: #fbf3e0; color: #6b4b00; font-size: 13.5px; cursor: pointer; }
:root[data-theme="dark"] .setup-banner { background: #3a3120; border-color: #6b5520; color: #f1d9a0; }

/* cards: connections, skills */
.card2 { background: var(--q-card); border-color: var(--q-line); border-radius: 14px; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 8px 0 18px; }
.cgrid .card2 { margin: 0; display: grid; gap: 6px; align-content: start; }
.cgrid .card2 .t { flex-wrap: wrap; }
.state { font-size: 11.5px; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--q-line2); white-space: nowrap; }
.state.ok { background: #e6f4ea; border-color: #b7dfc2; color: #16632e; }
.state.warn { background: #fdf3e1; border-color: #ecd29a; color: #7a5200; }
.state.bad { background: #fde8e7; border-color: #f2b8b5; color: #8c1d18; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; }
.acts button { padding: 6px 12px; font-size: 13px; }
.sec-h { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--q-sub); margin: 18px 0 4px; }
.setup-item { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #e3c98f; background: #fffaf0; border-radius: 12px; margin: 8px 0; }
:root[data-theme="dark"] .setup-item { background: #332c1f; border-color: #6b5520; }
.setup-item .n { width: 26px; height: 26px; border-radius: 50%; background: #b26a00; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--q-line2); border-radius: 999px; transition: .15s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + span { background: var(--q-brand); }
.switch input:checked + span::after { transform: translateX(18px); }
details.adv { margin-top: 24px; }
details.adv > summary { cursor: pointer; color: var(--q-sub); }
.pair-code { font-size: 28px; letter-spacing: .12em; font-weight: 700; }

/* artifact panel */
#panel { background: var(--q-card); border-inline-start: 1px solid var(--q-line); }

/* phones and small tablets: drawer navigation, full-screen artifacts, composer above the keyboard */
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .only-mobile { display: inline-grid !important; }
  #app, #app.panel-open { grid-template-columns: 1fr; }
  #rail { display: none; position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(310px, 88vw); z-index: 40;
    box-shadow: 0 0 30px rgba(0,0,0,.3); overflow-y: auto; padding-top: max(12px, env(safe-area-inset-top)); }
  #app.rail-open #rail { display: flex; }
  #app.rail-open .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.35); }
  .menu-btn { display: inline-flex; }
  header.topbar { padding: max(8px, env(safe-area-inset-top)) 8px 6px; }
  section#view-chat { padding: 0 10px; }
  .turn.me .body { max-width: 92%; }
  .hello { margin-top: 10vh; }
  .hello h1 { font-size: 27px; }
  #panel { position: fixed; inset: 0; z-index: 50; width: auto; }
  .composer { border-radius: 18px; }
  input, textarea, select { font-size: 16px !important; }
  button.icon, button.send { width: 40px; height: 40px; }
  #chats .c .c-more { opacity: 1; }
  .cgrid { grid-template-columns: 1fr; }
}

/* R8 cards */
.card2 { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.card2 .small, .card2 .note { overflow-wrap: anywhere; }
.card2 .acts { flex-wrap: wrap; }
details.diag { margin-top: 6px; font-size: 12px; color: var(--muted, #6b6b6b); }
details.diag pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto;
  background: rgba(0,0,0,.04); padding: 8px; border-radius: 8px; margin: 6px 0 0; font-size: 11.5px; }

.upbar { height: 6px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; margin: 8px 0 4px; }
.upfill { height: 100%; background: var(--accent, #4f46e5); transition: width .2s; }

.modechips { display: flex; gap: 6px; padding: 8px 10px 0; }
.modechips .chip { border: 1px solid var(--line, #e5e1d8); background: transparent; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; cursor: pointer; }
.modechips .chip.on { background: var(--ink, #1f1e1b); color: var(--bg, #fff); border-color: transparent; }
a.btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--line, #e5e1d8); border-radius: 8px; text-decoration: none; color: inherit; font-size: 13px; }

/* BV-STREAM: the reply while it is written - an understated stage line, provisional text marked as
   still being written, Stopped with the partial answer kept, and the timings in the details. */
.turn.live .live-stage { font-size: 12.5px; color: var(--q-sub); margin: 0 0 4px; }
.turn.live .live-clock { opacity: .75; }
.turn.live.writing .body { opacity: .92; }
.turn.live.writing .body:not(:empty)::after { content: "\258D"; margin-inline-start: 2px; opacity: .45; }
.turn.live.stopped .body, .turn.live.lost .body { color: var(--q-sub); }
.turn.live.stopping .body { opacity: .7; }
.turn.live .live-note { font-size: 12.5px; color: var(--q-sub); margin: 0 0 4px; }
.turn details.partial { margin-top: 6px; border-inline-start: 2px solid var(--q-line2); padding-inline-start: 10px; }
.turn details.partial > summary { cursor: pointer; font-size: 12.5px; color: var(--q-sub); }
.turn details.partial > .partial-note { font-size: 12.5px; color: var(--q-sub); margin: 4px 0; }
.turn details.partial > .body { opacity: .85; }
details.adv-turn .timings li.t-end { list-style: none; color: var(--q-sub); }
details.adv-turn .timings { margin-top: 6px; font-size: 12.5px; }
details.adv-turn .timings ol.t-stages { margin: 4px 0 0; padding-inline-start: 18px; }
@media (prefers-reduced-motion: reduce) { .turn.live.writing .body:not(:empty)::after { content: none; } }

/* BV-10 (8189 QA, 27 Sep): unicode-bidi is not inherited, so an Arabic answer's list items, headings and
   paragraphs fell back to the page's LTR direction (bullets and brackets at the wrong end), and an Arabic
   chat title read out of order. Each block takes its own direction from its text. */
.bidi p, .bidi li, .bidi .li, .bidi .h, .bidi blockquote, .bidi h1, .bidi h2, .bidi h3, .bidi h4, .bidi td, .bidi th,
#chat-title, #chats .c .c-label { unicode-bidi: plaintext; text-align: start; }

/* OP-UI (OPERATE-20260927-01): the improvement / correction card and its compact receipt form, the
   approval answer with its inline step-up box (a part of the card, never a modal), and the render
   recovery card. Logical properties only, so RTL mirrors them; each text block takes its direction
   from its own text (unicode-bidi: plaintext, as BV-10 above); a task id is isolated left-to-right; and
   every control is a 44 px touch target on a touch screen or a phone. */
.impcard { margin-top: 8px; border: 1px solid var(--q-line2); border-radius: 12px; background: var(--q-card);
  padding: 10px 12px; display: grid; gap: 6px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.impcard.off { border-color: #ecd29a; }
.impcard .ic-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.impcard .ic-kind { font-weight: 600; }
.impcard .ic-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
  direction: ltr; unicode-bidi: isolate; background: var(--q-hover); border-radius: 6px; padding: 1px 6px; }
.impcard .ic-lead, .impcard .ic-wait, .impcard .ic-line, .impcard .ic-note, .impcard .ic-fields dd,
.impcard .stepup > div, .o-recover .o-reason { unicode-bidi: plaintext; text-align: start; }
.impcard .ic-lines { display: grid; gap: 3px; }
.impcard .ic-lines:empty, .impcard .ic-live:empty, .impcard .ic-ask:empty, .impcard .ic-acts:empty,
.impcard .ic-box:empty, .impcard .ic-note:empty, .impcard .ic-ended:empty, .o-recover .o-again-note:empty { display: none; }
.impcard .ic-note.bad { color: #b42318; }
.impcard .ic-human { border-inline-start: 3px solid #b26a00; padding-inline-start: 10px; display: grid; gap: 6px; }
.impcard .ic-fields { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 3px 10px; margin: 0; }
.impcard .ic-fields dt { color: var(--q-sub); font-size: 12.5px; }
.impcard .ic-fields dd { margin: 0; }
.impcard details.ic-recorded > summary, .impcard details.ic-full > summary { cursor: pointer; font-size: 12.5px; color: var(--q-sub); }
.impcard details.ic-full > .body { margin-top: 6px; font-size: 14.5px; line-height: 1.6; }
.impcard .stepup { border: 1px solid var(--q-line2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; background: var(--q-bg); }
.impcard .stepup .su-label { display: grid; gap: 4px; font-size: 13px; }
.impcard .stepup .su-key { width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 8px; font-size: 15px; }
.impcard .stepup button.danger { background: #b42318; color: #fff; border-color: transparent; }
.impcard .acts button, .o-recover .acts button { min-height: 36px; }
.turn.receipt-turn .impcard { margin-top: 0; }
.o-recover { margin-top: 8px; display: grid; gap: 6px; border-inline-start: 3px solid #b26a00; padding-inline-start: 10px; }
.o-recover .o-stage { margin-top: 0; }
@media (hover: none), (pointer: coarse), (max-width: 860px) {
  .impcard button, .impcard .acts button, .o-recover button, .o-recover .acts button { min-height: 44px; min-width: 44px; }
  .impcard .stepup .su-key { min-height: 44px; }
  .impcard details > summary { min-height: 44px; display: flex; align-items: center; }
}