/* CONTROL_SURFACE — platform dock (never covers chat composer)
 * Desktop: real grid column beside chat
 * Mobile: sheet above composer + persistent dock chip
 */

:root {
  --cs-rail-width: min(400px, 36vw);
  --cs-composer-offset: 88px;
  --cs-sheet-max: min(52dvh, 520px);
  --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.nabgol-control-surface {
  --cs-bg: #0b1220;
  --cs-fg: #e8eef5;
  --cs-muted: #9aa8b5;
  --cs-accent: #2a6f97;
  --cs-border: rgba(148, 163, 184, 0.28);
  --cs-field-bg: #0f172a;
  --cs-field-fg: #f8fafc;
  display: none;
  flex-direction: column;
  background: var(--cs-bg);
  color: var(--cs-fg);
  border: 1px solid var(--cs-border);
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  z-index: 30;
}

.nabgol-control-surface.is-open {
  display: flex;
}

html[data-theme="light"] .nabgol-control-surface,
html.light .nabgol-control-surface {
  --cs-bg: #f8fafc;
  --cs-fg: #0f172a;
  --cs-muted: #64748b;
  --cs-border: rgba(15, 23, 42, 0.12);
  --cs-field-bg: #ffffff;
  --cs-field-fg: #0f172a;
}

/* —— Dock chip: always reachable, never blocks composer —— */
.nabgol-cs-dock {
  position: fixed;
  z-index: 36;
  inset-inline-end: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--cs-composer-offset) + 10px);
  display: none;
  align-items: center;
  gap: 8px;
  max-width: min(240px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--cs-border, rgba(148, 163, 184, 0.35));
  background: rgba(11, 18, 32, 0.92);
  color: #e8eef5;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  direction: rtl;
}

.nabgol-cs-dock.is-visible {
  display: inline-flex;
}

body.nabgol-control-surface-open .nabgol-cs-dock.is-visible {
  display: none;
}

html[data-theme="light"] .nabgol-cs-dock,
html.light .nabgol-cs-dock {
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
}

.nabgol-cs-dock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  flex: 0 0 auto;
}

.nabgol-cs-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.nabgol-cs-handle {
  display: none;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.45);
  margin: 8px auto 0;
  flex: 0 0 auto;
}

.nabgol-cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cs-border);
  flex: 0 0 auto;
}

.nabgol-cs-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.nabgol-cs-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nabgol-cs-icon-btn {
  border: 0;
  background: transparent;
  color: var(--cs-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  min-width: 36px;
  min-height: 36px;
}

.nabgol-cs-icon-btn:hover {
  background: rgba(148, 163, 184, 0.15);
  color: var(--cs-fg);
}

/* ══ §12-1 · THE ONE DOOR OUT OF THIS PANEL, AT FULL SIZE ══════════════════
   The head used to carry «–» and «×» — two controls calling one function —
   and the survivor was a 36px icon in the corner of a panel the reader is
   trying to dismiss with a thumb. It is now the panel's primary exit and it
   is sized like one: a 44×44 target with a face, matching «بستن میزِ کار» on
   the sheet underneath, so the two layers dismiss in the same language. */
.nabgol-cs-icon-btn.nabgol-cs-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--cs-fg);
  background: rgba(148, 163, 184, 0.14);
  border-radius: 12px;
}

.nabgol-cs-icon-btn.nabgol-cs-close:hover,
.nabgol-cs-icon-btn.nabgol-cs-close:focus-visible {
  background: rgba(148, 163, 184, 0.24);
  outline: none;
}

.nabgol-cs-body {
  padding: 12px 14px;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.nabgol-cs-footer {
  flex: 0 0 auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cs-border);
  background: color-mix(in srgb, var(--cs-bg) 92%, #000 8%);
}

.nabgol-cs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.nabgol-cs-label {
  font-size: 0.85rem;
  color: var(--cs-muted);
}

.nabgol-cs-field input[type="text"],
.nabgol-cs-field input[type="number"],
.nabgol-cs-field textarea,
.nabgol-cs-field select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background-color: var(--cs-field-bg) !important;
  color: var(--cs-field-fg) !important;
  padding: 10px 12px;
  font: inherit;
  color-scheme: dark;
  box-sizing: border-box;
}

html[data-theme="light"] .nabgol-cs-field select,
html.light .nabgol-cs-field select,
html[data-theme="light"] .nabgol-cs-field input,
html.light .nabgol-cs-field input,
html[data-theme="light"] .nabgol-cs-field textarea,
html.light .nabgol-cs-field textarea {
  color-scheme: light;
}

.nabgol-cs-field select {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 28px;
}

.nabgol-cs-field select option,
.nabgol-cs-field select optgroup {
  background-color: var(--cs-field-bg) !important;
  color: var(--cs-field-fg) !important;
}

.nabgol-cs-field input::placeholder,
.nabgol-cs-field textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

.nabgol-cs-coach {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(120, 53, 15, 0.28);
  color: #fde68a;
  font-size: 0.86rem;
  line-height: 1.55;
}

html[data-theme="light"] .nabgol-cs-coach,
html.light .nabgol-cs-coach {
  background: #fffbeb;
  color: #92400e;
  border-color: #fbbf24;
}

.nabgol-cs-lead {
  margin: 0 0 10px;
  font-size: 0.86rem;
  color: var(--cs-muted);
  line-height: 1.55;
}

.nabgol-cs-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.nabgol-cs-preset {
  appearance: none;
  border: 1px solid var(--cs-border);
  background: rgba(148, 163, 184, 0.08);
  color: inherit;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  min-height: 34px;
}

.nabgol-cs-preset:hover {
  border-color: var(--cs-accent);
}

.nabgol-cs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nabgol-cs-btn {
  border: 1px solid var(--cs-border);
  background: rgba(148, 163, 184, 0.1);
  color: inherit;
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  min-height: 40px;
}

.nabgol-cs-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nabgol-cs-btn-apply {
  background: var(--cs-accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  flex: 1 1 auto;
}

.nabgol-cs-btn-revise {
  background: rgba(148, 163, 184, 0.12);
  border-style: dashed;
}

.nabgol-cs-btn-file {
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.45);
  color: #a7f3d0;
  font-weight: 700;
}

.nabgol-cs-btn-soft {
  opacity: 0.85;
  border-style: dashed;
}

.nabgol-cs-status {
  margin: 0 0 8px;
  color: var(--cs-muted);
  font-size: 0.9rem;
}

.nabgol-cs-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 8px;
}

.nabgol-cs-output-title {
  margin: 0;
  font-size: 0.92rem;
}

.nabgol-cs-preview-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(42, 111, 151, 0.55);
  background: rgba(42, 111, 151, 0.18);
  color: #cfe8f5;
}

.nabgol-cs-output {
  min-height: 120px;
  white-space: pre-wrap;
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .nabgol-cs-output,
html.light .nabgol-cs-output {
  background: #fff;
}

.nabgol-cs-empty {
  margin: 0;
  color: var(--cs-muted);
}

.nabgol-control-surface.is-busy .nabgol-cs-output {
  outline: 1px dashed var(--cs-accent);
}

/* ========== DESKTOP: grid column — composer stays fully usable ========== */
@media (min-width: 768px) {
  body.desktop-chat.nabgol-control-surface-open:not(.nabgol-workspace-open) {
    --cs-rail-width: min(400px, 36vw);
    grid-template-columns: minmax(0, 1fr) var(--cs-rail-width) !important;
  }

  /* THE WORKBENCH RAIL SURVIVES AN OPEN PANE.
     These templates used to redefine the grid as exactly two tracks, so opening
     any pane (progress, studio, messenger) deleted the rail's track and «میزِ
     کار» vanished from the screen — the "sometimes it is there" failure rule 1
     of docs/CHAT_REDESIGN_MASTER_PLAN.md exists to prevent, and it would have
     shipped invisibly because nothing about the pane looks wrong.
     Four classes, deliberately: chat-desktop-shell.css carries three-class
     rules for the same property and loads AFTER this file, so a three-class
     rule here would lose the tie on source order. The pane itself stays at
     `2 / 3` in both worlds — it is the second track either way. */
  body.desktop-chat.nabgol-control-surface-open.nabgol-workbench-on:not(.nabgol-workspace-open) {
    grid-template-columns: minmax(0, 1fr) var(--cs-rail-width) var(--nbgc-rail, 0px) !important;
  }

  body.desktop-chat.nabgol-control-surface-open:not(.nabgol-workspace-open) .chat-main,
  body.desktop-chat.nabgol-control-surface-open:not(.nabgol-workspace-open) .chat-input,
  body.desktop-chat.nabgol-control-surface-open:not(.nabgol-workspace-open) .tts-player.tts-player-dock.show {
    grid-column: 1 / 2 !important;
  }

  body.desktop-chat #nabgolControlSurface.nabgol-control-surface.is-open {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    grid-column: 2 / 3 !important;
    grid-row: 2 / -1 !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--cs-border);
    border-right: 0;
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.28);
    z-index: 5;
    transition: opacity 0.22s var(--cs-ease);
  }

  /* Prefer control surface over dossier when both requested */
  body.desktop-chat.nabgol-control-surface-open.nabgol-workspace-open {
    grid-template-columns: minmax(0, 1fr) var(--cs-rail-width) !important;
  }

  body.desktop-chat.nabgol-control-surface-open.nabgol-workspace-open.nabgol-workbench-on {
    grid-template-columns: minmax(0, 1fr) var(--cs-rail-width) var(--nbgc-rail, 0px) !important;
  }

  body.desktop-chat.nabgol-control-surface-open.nabgol-workspace-open #splitPanel.open,
  body.desktop-chat.nabgol-control-surface-open.nabgol-workspace-open #splitPanel.nabgol-workspace-v2.open {
    display: none !important;
  }

  body.desktop-chat.nabgol-control-surface-open.nabgol-workspace-open .chat-main,
  body.desktop-chat.nabgol-control-surface-open.nabgol-workspace-open .chat-input,
  body.desktop-chat.nabgol-control-surface-open.nabgol-workspace-open .tts-player.tts-player-dock.show {
    grid-column: 1 / 2 !important;
  }

  body.desktop-chat .nabgol-cs-dock {
    bottom: 24px;
  }

  /* ZERO FLOATING CONTROLS OVER THE DESKTOP CANVAS (rule 4).
     `bottom: 24px` put this pill on top of the last line of the newest answer —
     the one place the eye lands after every reply, and the place scrolling
     always ends. Where a rail exists the pill has a real home in it, so it is
     removed rather than moved: a floating door and a rail door are two doors to
     one room. Robots with no rail keep the pill (it is their only door), which
     is why this is scoped to .nabgol-workbench-on and not deleted outright.
     Gate: live/tools/test_no_floating_over_canvas.js. */
  body.desktop-chat.nabgol-workbench-on .nabgol-cs-dock {
    display: none !important;
  }
}

/* ========== MOBILE: sheet above composer — never covers input ========== */
body.mobile-chat #nabgolControlSurface.nabgol-control-surface.is-open {
  position: fixed !important;
  left: 0;
  right: 0;
  top: auto !important;
  bottom: calc(var(--cs-composer-offset) + env(safe-area-inset-bottom, 0px)) !important;
  width: 100%;
  max-height: var(--cs-sheet-max);
  height: auto;
  border-radius: 16px 16px 0 0;
  border-bottom: 0;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35);
  z-index: 34;
}

/* ══ §12-1 · A PANEL OPENED FROM A SHEET IS IN FRONT OF THAT SHEET ═════════
   Measured on the live origin at 390×844 before this rule existed: press
   «کارِ امروز» or «فرستادن به والدین» inside «میزِ کار» and the panel really
   did open — #nabgolWorkbenchSheet sits at z-index 1300, #sheetOverlay at
   1250, and this host at 34, so elementFromPoint at the panel's own centre
   returned the WORKBENCH. The panel was never missing; it was underneath.

   The condition is «a sheet is open», NOT «this is a phone». The desktop rail
   changes nothing because no sheet is ever open there — but a messenger's
   narrow desktop window carries a desktop UA and DOES open sheets, and a
   `mobile-chat` test would have left exactly those readers with the bug.

   `nabgol-layer-open` is written by script.js, the same owner that keeps the
   history entry for this layer, so the stacking and the back button can never
   disagree — and no magic number is spread across two files. Any pane mounted
   on this host tomorrow is covered without another line here.

   No scrim is added between the two: the sheet's visible top stays lit and
   still answers a touch, which is how «close the workbench and keep the
   panel» is reachable at all. Depth is carried by the shadow instead. */
body.nabgol-sheet-open.nabgol-layer-open #nabgolControlSurface.is-open {
  z-index: 1400;
  box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.5);
}

/* ══ EVERY PANE IS A CENTRED CARD ON A PHONE (owner, 2026-09-14) ═══════════
   A pane (برگهٔ امتحانی · تدریس در شاد · پیشرفت من · کارِ امروز · فرستادن به
   والدین · any pane mounted tomorrow) used to be a bottom sheet anchored on
   --cs-composer-offset. That offset never knew about the audio bar and the
   footnote under the composer, so on the owner's phone the pane's own button
   sat UNDER the composer and could not be pressed. Measuring every stack
   would be a new estimate to keep true; not touching the bottom at all is
   true by construction: the card floats in the middle of the viewport, above
   every chrome layer (1400 — the same layer §12-1 already gives a pane over
   the workbench), and its height is capped by the viewport alone.
   `translate` (not `transform`) centres it, because the drag-down gesture
   owns `transform` (chat-workbench.js mountDragTo) and the two compose.
   Keyed on [data-cs-pane], so the studio of a control_surface robot keeps
   its bottom-sheet geometry (control-surface.js removes the attribute when
   it paints the studio). Fallback without `translate`: top-anchored. */
body.mobile-chat #nabgolControlSurface.nabgol-control-surface.is-open[data-cs-pane] {
  left: 12px;
  right: 12px;
  width: auto;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  bottom: auto !important;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  border-radius: 16px;
  border-bottom: 1px solid var(--cs-border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  z-index: 1400;
}
@supports (translate: 0 0) {
  body.mobile-chat #nabgolControlSurface.nabgol-control-surface.is-open[data-cs-pane] {
    top: 50% !important;
    translate: 0 -50%;
  }
}
body.mobile-chat #nabgolControlSurface.nabgol-control-surface.is-open[data-cs-pane] .nabgol-cs-handle {
  display: none;
}
/* The card's body is the one scroller, so a long pane scrolls inside the
   card instead of growing past the viewport. */
body.mobile-chat #nabgolControlSurface.is-open[data-cs-pane] .nabgol-cs-shell {
  max-height: inherit;
  min-height: 0;
}
body.mobile-chat #nabgolControlSurface.is-open[data-cs-pane] [data-cs-pane-body] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* A centred card needs a scrim that says «this is on top»; the base dim sits
   under the header (z 28). Still pointer-events:none — nothing is made
   unpressable, a tap outside simply reaches what is under it. */
body.mobile-chat.nabgol-control-surface-open:has(#nabgolControlSurface.is-open[data-cs-pane])::after {
  inset: 0;
  z-index: 1390;
  background: rgba(2, 6, 23, 0.45);
}

body.mobile-chat.nabgol-control-surface-open.nabgol-cs-expanded {
  --cs-sheet-max: min(72dvh, 680px);
}

body.mobile-chat .nabgol-cs-handle {
  display: block;
}

body.mobile-chat.nabgol-control-surface-open .chat-messages {
  padding-bottom: calc(var(--cs-sheet-max) + 12px) !important;
}

body.mobile-chat.nabgol-control-surface-open .chat-input {
  z-index: 40 !important;
  position: relative;
  background: var(--tg-composer, var(--cs-bg, #0b1220));
}

/* Soft dim behind sheet, pointer-events none so chat chrome stays usable */
body.mobile-chat.nabgol-control-surface-open::after {
  content: '';
  position: fixed;
  inset: 0 0 calc(var(--cs-composer-offset) + env(safe-area-inset-bottom, 0px)) 0;
  background: rgba(2, 6, 23, 0.28);
  z-index: 28;
  pointer-events: none;
}

/* ══ §12-2 · «تدریس مجازی در شاد» — the confirmation pane ═══════════════════
   docs/GAM-12-PANEL-SHAD.md §2-5. Rendered inside the shared pane host, so it
   inherits the layer, the 44px close, Back and drag-down from §12-1 and owns
   nothing but its own content. Declares its own direction (body computes ltr
   on this page). Colours from the existing tokens, both themes. */
.nabgol-shad {
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px;
  font-size: 0.95rem;
  line-height: 1.85;
}

.nabgol-shad-guide {
  border: 1px solid var(--nabgol-border, rgba(127, 127, 127, 0.28));
  border-radius: 14px;
  padding: 10px 13px;
  background: var(--nabgol-surface-2, rgba(127, 127, 127, 0.06));
}

.nabgol-shad-guide-sum {
  cursor: pointer;
  font-weight: 750;
  min-height: 32px;
  display: flex;
  align-items: center;
  list-style-position: inside;
}

.nabgol-shad-steps {
  margin: 4px 0 2px;
  padding: 0;
  list-style: none;
}

.nabgol-shad-step {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 4px;
  font-size: 0.86rem;
  line-height: 1.75;
  opacity: 0.88;
}

.nabgol-shad-step-n {
  flex: 0 0 auto;
  min-width: 1.1em;
  font-weight: 800;
  color: var(--nab-btn-win-2, #10b981);
}

.nabgol-shad-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nabgol-shad-field-label {
  font-weight: 700;
  font-size: 0.9rem;
}

.nabgol-shad-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--nabgol-border, rgba(127, 127, 127, 0.35));
  border-radius: 11px;
  background: rgba(127, 127, 127, 0.08);
  color: inherit;
  font: inherit;
  direction: rtl;
}

.nabgol-shad-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.nabgol-shad-seg-btn {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 52px;
  padding: 6px 8px;
  border: 1px solid var(--nabgol-border, rgba(127, 127, 127, 0.35));
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  line-height: 1.5;
}

.nabgol-shad-seg-label { font-weight: 750; font-size: 0.92rem; }
.nabgol-shad-seg-sub { font-size: 0.76rem; opacity: 0.78; }

.nabgol-shad-seg-btn.is-on {
  border-color: var(--nab-btn-win-2, #10b981);
  background: rgba(16, 185, 129, 0.12);
  box-shadow: inset 0 0 0 1px var(--nab-btn-win-2, #10b981);
}

/* The one action of the pane never sits below the fold: an OPAQUE footer
   rides the bottom edge of the pane's own scroller (.nabgol-cs-body pads
   12px, hence the -12px), so content scrolls under it with a clean edge. */
.nabgol-shad-foot {
  position: sticky;
  bottom: -12px;
  z-index: 1;
  margin: 0 -14px -12px;
  padding: 10px 14px 12px;
  background: var(--cs-bg);
  border-top: 1px solid var(--cs-border);
}

.nabgol-shad-go {
  width: 100%;
  appearance: none;
  min-height: 48px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--nabgol-accent, #2f7d5d);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.nabgol-shad-go:focus-visible,
.nabgol-shad-seg-btn:focus-visible {
  outline: 2px solid var(--nab-btn-win-2, #10b981);
  outline-offset: 2px;
}

/* ══ docs/OFFICIAL_TEACHER_SHEETS.md D13 — «بانکِ سؤال» دو گزینه ═══════════
   همان پنلِ مشترک (nabgol-shad و qbank-choice خواهر و برادرند)؛ هیچ سیستمِ
   پنلِ تازه‌ای نیست — رنگ‌ها همان توکن‌ها، هر دو تم. */
.nabgol-qbank-choice {
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px;
}

.nabgol-qbank-choice-hint {
  margin: 0 0 2px;
  font-size: 0.92rem;
  opacity: 0.85;
}

.nabgol-qbank-choice-btn {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--nabgol-border, rgba(127, 127, 127, 0.35));
  border-radius: 13px;
  background: var(--nabgol-surface-2, rgba(127, 127, 127, 0.06));
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
}

.nabgol-qbank-choice-btn:hover,
.nabgol-qbank-choice-btn:focus-visible {
  border-color: var(--nab-btn-win-2, #10b981);
  outline: 2px solid var(--nab-btn-win-2, #10b981);
  outline-offset: 2px;
}

.nabgol-qbank-choice-title { font-weight: 750; font-size: 0.95rem; }
.nabgol-qbank-choice-sub { font-size: 0.78rem; opacity: 0.78; }

/* ══ برگهٔ امتحانیِ رسمی — فرم/پیش‌نمایش/دکمه‌ها (D13) ════════════════════ */
.nbg-os-panel { direction: rtl; text-align: right; display: flex; flex-direction: column; gap: 12px; }
.nbg-os-status { font-size: 0.86rem; opacity: 0.8; min-height: 1.2em; }
.nbg-os-status.is-error { color: var(--nab-btn-lose-2, #dc2626); opacity: 1; font-weight: 700; }
.nbg-os-form { display: flex; flex-direction: column; gap: 10px; }
.nbg-os-field { display: flex; flex-direction: column; gap: 4px; }
.nbg-os-field-label { font-weight: 700; font-size: 0.88rem; }
.nbg-os-field select {
  min-height: 44px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--nabgol-border, rgba(127, 127, 127, 0.35));
  background: rgba(127, 127, 127, 0.08); color: inherit; font: inherit; direction: rtl;
}
.nbg-os-scope-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.nbg-os-scope-item { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; min-height: 32px; }
.nbg-os-scope-item.is-disabled { opacity: 0.5; }
.nbg-os-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nbg-os-go, .nbg-os-word-btn, .nbg-os-pdf-btn, .nbg-os-back-btn {
  appearance: none; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 11px;
  background: var(--nabgol-accent, #2f7d5d); color: #fff; font: inherit; font-weight: 750; cursor: pointer;
}
.nbg-os-cancel {
  appearance: none; min-height: 44px; padding: 8px 16px; border-radius: 11px;
  border: 1px solid var(--nabgol-border, rgba(127, 127, 127, 0.4));
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.nbg-os-back-btn { background: transparent; color: inherit; border: 1px solid var(--nabgol-border, rgba(127, 127, 127, 0.4)); }
.nbg-os-recent { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.nbg-os-recent-title { font-weight: 700; font-size: 0.85rem; opacity: 0.8; }
.nbg-os-recent-item {
  appearance: none; text-align: right; min-height: 38px; padding: 6px 10px; border-radius: 9px;
  border: 1px solid var(--nabgol-border, rgba(127, 127, 127, 0.3)); background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.nbg-os-preview { border: 1px solid var(--nabgol-border, rgba(127, 127, 127, 0.3)); border-radius: 10px; overflow: auto; max-height: 60vh; background: #fff; }
.nbg-os-panel-warnings { font-size: 0.82rem; color: #92650a; background: rgba(240, 200, 80, 0.16); border: 1px solid rgba(240, 200, 80, 0.5); border-radius: 9px; padding: 8px 10px; }

.nbg-os-go:focus-visible, .nbg-os-word-btn:focus-visible, .nbg-os-pdf-btn:focus-visible,
.nbg-os-back-btn:focus-visible, .nbg-os-cancel:focus-visible, .nbg-os-recent-item:focus-visible {
  outline: 2px solid var(--nab-btn-win-2, #10b981);
  outline-offset: 2px;
}

/* ══ برگهٔ امتحانی در خودِ چت — کارتِ زنده و نوارِ ابزار (مالک، ۲۰۲۶-۰۹-۱۴) ═══
   chat-official-sheet.js::startSheetJob. The record's own pending sentence is
   for a reload; while the job is live the card replaces it on screen. Ink is
   the bubble's own (currentColor), accents are the app green, so both themes
   read without a second recipe. Own direction (body computes ltr here). */
/* The chat sheets set .text display with more weight; measured on live. */
html body #messages .message.nbg-os-pending .message-bubble > .text { display: none !important; }
.nbg-os-live {
  direction: rtl;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: min(300px, 70vw);
  padding: 4px 2px 6px;
}
.nbg-os-live-head { display: flex; align-items: center; gap: 10px; }
.nbg-os-live-title { font-weight: 750; font-size: 1rem; }
.nbg-os-live-sub { font-size: 0.86rem; opacity: 0.85; margin-top: -4px; }
.nbg-os-live-spin {
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(16, 185, 129, 0.25);
  border-top-color: #10b981;
  animation: nbg-os-spin 0.9s linear infinite;
}
@keyframes nbg-os-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nbg-os-live-spin { animation: none; } }
.nbg-os-live-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nbg-os-live-step { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; opacity: 0.55; }
.nbg-os-live-step.is-on { opacity: 1; font-weight: 700; }
.nbg-os-live-step.is-done { opacity: 0.85; }
.nbg-os-live-dot {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
  border: 1.5px solid currentColor;
}
.nbg-os-live-step.is-on .nbg-os-live-dot { border-color: #10b981; color: #10b981; }
.nbg-os-live-step.is-done .nbg-os-live-dot { background: #047857; border-color: #047857; color: #fff; }
.nbg-os-live-track { height: 6px; border-radius: 999px; background: rgba(127, 127, 127, 0.22); overflow: hidden; }
.nbg-os-live-fill { height: 100%; width: 4%; border-radius: 999px; background: linear-gradient(90deg, #10b981, #34d399); transition: width 0.8s ease; }
.nbg-os-live-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nbg-os-live-clock { font-size: 0.82rem; opacity: 0.85; }
.nbg-os-chatbar { direction: rtl; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.nbg-os-chatbtn {
  font: inherit; font-size: 0.88rem; font-weight: 700;
  min-height: 38px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  color: inherit;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.45);
}
.nbg-os-chatbtn.is-primary { background: #047857; border-color: #047857; color: #fff; }
.nbg-os-chatbtn:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }