/* 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;
}

/* (The transcript used to reserve the studio sheet's height at its foot. Since
   1405/07/13 nothing on this host sits ABOVE the composer any more — panes are
   centred cards, the studio is a full sheet — so the reservation only made the
   chat jump when the host closed. Removed.) */

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, .nbg-os-field input[type="number"] {
  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; }

/* ══ چهرهٔ استودیو (مالک، ۱۴۰۵/۰۷/۱۳) ════════════════════════════════════════
   control-surface.js «چهرهٔ استودیو». The studio is NOT a pane (no
   [data-cs-pane]); everything below is scoped to .nabgol-cs-studio or to the
   studio host, so every pane keeps its own face.

   Phone: a full-height sheet ABOVE the composer and every chrome layer (1400,
   the layer panes already use). The old sheet stood on --cs-composer-offset,
   which never knew about the audio bar and the footnote, so «تولید نهایی» sat
   under the composer on the owner's phone. Standing on the keyboard height
   (--cs-kb, from visualViewport) instead keeps the one action above the keys.
   Desktop: the same grid column beside the chat, a little wider for paper. */
.nabgol-control-surface {
  --cs-accent: #34d399;
  --cs-accent-ink: #04130d;
  --cs-accent-soft: rgba(52, 211, 153, 0.13);
  --cs-accent-line: rgba(52, 211, 153, 0.45);
  --cs-danger: #fca5a5;
  --cs-card: rgba(148, 163, 184, 0.07);
  --cs-desk: rgba(0, 0, 0, 0.22);
  --cs-seg-on: #1e293b;
}
html[data-theme="light"] .nabgol-control-surface,
html.light .nabgol-control-surface {
  --cs-accent: #047857;
  --cs-accent-ink: #ffffff;
  --cs-accent-soft: rgba(4, 120, 87, 0.09);
  --cs-accent-line: rgba(4, 120, 87, 0.4);
  --cs-danger: #b91c1c;
  --cs-card: #ffffff;
  --cs-desk: #e9edf1;
  --cs-seg-on: #ffffff;
}

body.mobile-chat #nabgolControlSurface.nabgol-control-surface.is-open:not([data-cs-pane]) {
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  bottom: var(--cs-kb, 0px) !important;
  max-height: none;
  height: auto;
  border-radius: 22px 22px 0 0;
  border-bottom: 0;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.5);
  z-index: 1400;
  transition: bottom 0.18s var(--cs-ease);
}
body.mobile-chat.nabgol-control-surface-open.nabgol-cs-studio-open::after {
  inset: 0;
  z-index: 1390;
  background: rgba(2, 6, 23, 0.55);
}
@media (min-width: 768px) {
  body.desktop-chat.nabgol-control-surface-open.nabgol-cs-studio-open:not(.nabgol-workspace-open) {
    --cs-rail-width: min(460px, 38vw);
  }
}

.nabgol-cs-studio {
  direction: rtl;
  text-align: right;
}
.nabgol-cs-studio .nabgol-cs-header {
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px 6px;
  border-bottom: 0;
}
.nabgol-cs-badge {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--cs-accent-soft);
  color: var(--cs-accent);
}
.nabgol-cs-heading {
  flex: 1 1 auto;
  min-width: 0;
}
.nabgol-cs-studio .nabgol-cs-title {
  font-size: 1.05rem;
  font-weight: 800;
}
.nabgol-cs-sub {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--cs-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nabgol-cs-studio .nabgol-cs-header-actions {
  gap: 6px;
}
.nabgol-cs-icon-btn.nabgol-cs-restart {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.nabgol-cs-icon-btn.nabgol-cs-restart.is-armed {
  color: var(--cs-danger);
  background: rgba(248, 113, 113, 0.14);
}

/* ── the two views, always in sight ── */
.nabgol-cs-tabs {
  display: flex;
  gap: 6px;
  padding: 6px 16px 12px;
  border-bottom: 1px solid var(--cs-border);
  flex: 0 0 auto;
}
.nabgol-cs-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--cs-border);
  background: transparent;
  color: var(--cs-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.nabgol-cs-tab.is-on {
  background: var(--cs-accent-soft);
  border-color: var(--cs-accent-line);
  color: var(--cs-fg);
}
.nabgol-cs-tab[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}
.nabgol-cs-tab-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.78rem;
  background: rgba(148, 163, 184, 0.2);
  color: var(--cs-fg);
}
.nabgol-cs-tab.is-on .nabgol-cs-tab-n,
.nabgol-cs-tab.is-ready .nabgol-cs-tab-n {
  background: var(--cs-accent);
  color: var(--cs-accent-ink);
}

.nabgol-cs-studio .nabgol-cs-body {
  padding: 16px 16px 20px;
  overscroll-behavior: contain;
}
.nabgol-cs-studio[data-cs-mode="doc"] .nabgol-cs-body {
  background: var(--cs-desk);
}

/* ── type ── */
.nabgol-cs-sec {
  margin-bottom: 16px;
}
.nabgol-cs-types {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 2px 16px 4px;
  scroll-padding-inline: 16px;
}
.nabgol-cs-types::-webkit-scrollbar {
  display: none;
}
body.desktop-chat .nabgol-cs-types {
  flex-wrap: wrap;
  overflow: visible;
}
.nabgol-cs-type {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--cs-border);
  background: var(--cs-card);
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.nabgol-cs-type.is-on {
  background: var(--cs-accent);
  border-color: transparent;
  color: var(--cs-accent-ink);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25);
}
.nabgol-cs-type-hint {
  margin: 8px 2px 0;
  font-size: 0.82rem;
  color: var(--cs-muted);
}

/* ── answers ── */
.nabgol-cs-card {
  background: var(--cs-card);
  border: 1px solid var(--cs-border);
  border-radius: 16px;
  padding: 14px 14px 2px;
  margin-bottom: 12px;
}
.nabgol-cs-card--quiet {
  background: transparent;
}
.nabgol-cs-studio .nabgol-cs-field {
  margin-bottom: 14px;
}
.nabgol-cs-studio .nabgol-cs-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cs-fg);
}
.nabgol-cs-opt {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--cs-muted);
  background: rgba(148, 163, 184, 0.15);
  border-radius: 999px;
  padding: 1px 8px;
  margin-inline-start: 4px;
  vertical-align: 1px;
}
.nabgol-cs-studio .nabgol-cs-field input[type="text"],
.nabgol-cs-studio .nabgol-cs-field textarea,
.nabgol-cs-studio .nabgol-cs-field select {
  min-height: 48px;
  border-radius: 12px;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
  line-height: 1.7;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nabgol-cs-studio .nabgol-cs-field textarea {
  resize: none;
  overflow: hidden;
}
/* An example must never read as an answer already given. */
.nabgol-cs-studio .nabgol-cs-field input::placeholder,
.nabgol-cs-studio .nabgol-cs-field textarea::placeholder {
  color: rgba(148, 163, 184, 0.62) !important;
}
html[data-theme="light"] .nabgol-cs-studio .nabgol-cs-field input::placeholder,
html.light .nabgol-cs-studio .nabgol-cs-field input::placeholder,
html[data-theme="light"] .nabgol-cs-studio .nabgol-cs-field textarea::placeholder,
html.light .nabgol-cs-studio .nabgol-cs-field textarea::placeholder {
  color: #94a3b8 !important;
}
.nabgol-cs-studio .nabgol-cs-field input[type="text"]:focus,
.nabgol-cs-studio .nabgol-cs-field textarea:focus,
.nabgol-cs-studio .nabgol-cs-field select:focus {
  outline: none;
  border-color: var(--cs-accent);
  box-shadow: 0 0 0 3px var(--cs-accent-soft);
}
.nabgol-cs-studio .nabgol-cs-field.is-invalid input,
.nabgol-cs-studio .nabgol-cs-field.is-invalid textarea {
  border-color: var(--cs-danger);
}
.nabgol-cs-field-help {
  margin: 0;
  font-size: 0.8rem;
  color: var(--cs-danger);
}
.nabgol-cs-field-note {
  margin: 0;
  font-size: 0.76rem;
  color: var(--cs-muted);
}

/* ── the shape of the text (collapsed) ── */
.nabgol-cs-more {
  border: 1px solid var(--cs-border);
  border-radius: 16px;
  overflow: hidden;
}
.nabgol-cs-more-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.nabgol-cs-more-title {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.9rem;
}
.nabgol-cs-more-sum {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--cs-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nabgol-cs-more-chev {
  display: inline-flex;
  color: var(--cs-muted);
  transition: transform 0.2s var(--cs-ease);
}
.nabgol-cs-more.is-open .nabgol-cs-more-chev {
  transform: rotate(180deg);
}
.nabgol-cs-more-body {
  padding: 14px 14px 4px;
  border-top: 1px solid var(--cs-border);
}
.nabgol-cs-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.13);
}
.nabgol-cs-seg-btn {
  flex: 1 1 0;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cs-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.nabgol-cs-seg-btn.is-on {
  background: var(--cs-seg-on);
  color: var(--cs-fg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
.nabgol-cs-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}
.nabgol-cs-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.38);
  cursor: pointer;
  transition: background 0.2s;
}
.nabgol-cs-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: inset-inline-start 0.2s var(--cs-ease);
}
.nabgol-cs-switch:checked {
  background: var(--cs-accent);
}
.nabgol-cs-switch:checked::after {
  inset-inline-start: 21px;
}

/* ── the document ── */
.nabgol-cs-paper {
  position: relative;
  background: #fffdf8;
  color: #1f2937;
  border-radius: 4px;
  padding: 30px 22px 34px;
  min-height: 320px;
  font-size: 15px;
  line-height: 2;
  text-align: justify;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 18px 44px rgba(0, 0, 0, 0.32);
  overflow-wrap: anywhere;
}
html[data-theme="light"] .nabgol-cs-paper,
html.light .nabgol-cs-paper {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 14px 34px rgba(15, 23, 42, 0.14);
}
/* The chat's markdown paints for a dark bubble; on paper every word is ink. */
.nabgol-control-surface .nabgol-cs-paper :is(p, li, span, strong, em, b, i, h1, h2, h3, h4, h5, div, blockquote, td, th):not(.nabgol-cs-skel) {
  color: inherit !important;
  background: transparent !important;
}
.nabgol-cs-paper p {
  margin: 0 0 0.75em;
}
.nabgol-cs-paper strong,
.nabgol-cs-paper b {
  font-weight: 800;
}
.nabgol-cs-output-plain {
  white-space: pre-wrap;
}
.nabgol-cs-paper.is-loading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.nabgol-cs-skel {
  display: block;
  width: var(--w, 100%);
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ece9e1 0%, #f8f6f0 50%, #ece9e1 100%);
  background-size: 200% 100%;
  animation: nbcs-shimmer 1.25s linear infinite;
}
@keyframes nbcs-shimmer {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nabgol-cs-skel { animation: none; }
}
.nabgol-cs-doc-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--cs-muted);
}
.nabgol-cs-notice {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.1);
  color: #fde68a;
  font-size: 0.86rem;
  line-height: 1.7;
}
html[data-theme="light"] .nabgol-cs-notice,
html.light .nabgol-cs-notice {
  background: #fffbeb;
  color: #92400e;
  border-color: #fbbf24;
}
.nabgol-cs-revise {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.nabgol-cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--cs-border);
  background: var(--cs-card);
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.nabgol-cs-empty-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 12px;
  text-align: center;
  color: var(--cs-muted);
}
.nabgol-cs-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--cs-accent-soft);
  color: var(--cs-accent);
}
.nabgol-cs-empty-doc p {
  margin: 0;
}

/* ── the one action, never below the fold ── */
.nabgol-cs-studio .nabgol-cs-footer {
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--cs-bg);
  border-top: 1px solid var(--cs-border);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.16);
}
.nabgol-cs-ready {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 8px;
  font-size: 0.8rem;
  color: var(--cs-muted);
}
.nabgol-cs-ready-ok {
  display: inline-flex;
  color: var(--cs-accent);
}
.nabgol-cs-studio .nabgol-cs-actions {
  flex-wrap: nowrap;
}
.nabgol-cs-studio .nabgol-cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  border-radius: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.nabgol-cs-studio .nabgol-cs-btn-apply {
  flex: 1 1 auto;
  background: var(--cs-accent);
  color: var(--cs-accent-ink);
  border-color: transparent;
  font-size: 1rem;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.26);
}
.nabgol-cs-studio .nabgol-cs-btn-apply:disabled {
  opacity: 0.8;
  box-shadow: none;
}
.nabgol-cs-studio .nabgol-cs-btn-sec {
  flex: 0 0 auto;
  background: var(--cs-card);
  padding: 0 14px;
}
.nabgol-cs-actions--doc .nabgol-cs-btn-sec {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  font-size: 0.74rem;
}
.nabgol-cs-actions--doc .nabgol-cs-btn-apply {
  flex: 1.7 1 0;
}
body.desktop-chat .nabgol-cs-actions--doc .nabgol-cs-btn-sec {
  flex-direction: row;
  font-size: 0.84rem;
  gap: 6px;
}
.nabgol-cs-studio :is(.nabgol-cs-btn, .nabgol-cs-chip, .nabgol-cs-type, .nabgol-cs-tab, .nabgol-cs-seg-btn, .nabgol-cs-more-head, .nabgol-cs-icon-btn):focus-visible {
  outline: 2px solid var(--cs-accent);
  outline-offset: 2px;
}

/* ══ استودیوی انعطاف‌پذیر — کاغذِ چاپی، پیامِ آماده، جاهای خالی (۱۴۰۵/۰۷/۱۴) ══
   control-surface.js «استودیوی انعطاف‌پذیر». */

/* Opening: the sheet rises (phone) or the column fades in (desktop); a view
   switch fades. Nothing moves for a reader who asked for less motion. */
@keyframes nbcs-rise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes nbcs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nbcs-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.mobile-chat #nabgolControlSurface.nabgol-control-surface.is-open:not([data-cs-pane]) {
  animation: nbcs-rise 0.32s var(--cs-ease);
}
body.mobile-chat.nabgol-control-surface-open.nabgol-cs-studio-open::after {
  animation: nbcs-fade 0.25s ease;
}
body.desktop-chat #nabgolControlSurface.nabgol-control-surface.is-open:not([data-cs-pane]) {
  animation: nbcs-fade 0.2s ease;
}
.nabgol-cs-studio .nabgol-cs-body.is-entering > * {
  animation: nbcs-enter 0.22s var(--cs-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  body.mobile-chat #nabgolControlSurface.nabgol-control-surface.is-open:not([data-cs-pane]),
  body.mobile-chat.nabgol-control-surface-open.nabgol-cs-studio-open::after,
  body.desktop-chat #nabgolControlSurface.nabgol-control-surface.is-open:not([data-cs-pane]),
  .nabgol-cs-studio .nabgol-cs-body.is-entering > * {
    animation: none;
  }
}

/* A compact head on a phone: every pixel above the form is a pixel of form. */
body.mobile-chat .nabgol-cs-studio .nabgol-cs-header {
  padding: 8px 14px 4px;
}
body.mobile-chat .nabgol-cs-studio .nabgol-cs-badge {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
body.mobile-chat .nabgol-cs-studio .nabgol-cs-tabs {
  padding: 4px 14px 10px;
}
body.mobile-chat .nabgol-cs-studio .nabgol-cs-tab {
  min-height: 40px;
}
body.mobile-chat .nabgol-cs-studio .nabgol-cs-body {
  padding: 14px 14px 18px;
}
@media (max-width: 360px) {
  .nabgol-cs-studio .nabgol-cs-sub { display: none; }
}

/* ── the exact print page ── */
.nabgol-cs-sheet {
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 18px 44px rgba(0, 0, 0, 0.32);
}
html[data-theme="light"] .nabgol-cs-sheet,
html.light .nabgol-cs-sheet {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 14px 34px rgba(15, 23, 42, 0.14);
}
.nabgol-cs-frame {
  display: block;
  width: 100%;
  min-height: 240px;
  border: 0;
  background: #ffffff;
}

/* ── a message, as it will be read ── */
.nabgol-cs-msgcard {
  padding: 14px 12px 16px;
  border-radius: 18px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid var(--cs-border);
}
.nabgol-cs-msghead {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 10px;
  font-size: 0.78rem;
  color: var(--cs-muted);
}
.nabgol-cs-msghead svg {
  width: 15px;
  height: 15px;
}
.nabgol-cs-msg {
  position: relative;
  margin-inline-start: 22px;
  padding: 12px 14px;
  border-radius: 18px 18px 6px 18px;
  background: #0f5a43;
  color: #ecfdf5;
  font-size: 15px;
  line-height: 1.95;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  overflow-wrap: anywhere;
}
html[data-theme="light"] .nabgol-cs-msg,
html.light .nabgol-cs-msg {
  background: #dcf8e8;
  color: #0b2b1f;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.nabgol-control-surface .nabgol-cs-msg :is(p, li, span, strong, em, b, i, h1, h2, h3, h4, h5, div, blockquote) {
  color: inherit !important;
  background: transparent !important;
}
.nabgol-cs-msg p {
  margin: 0 0 0.6em;
}
.nabgol-cs-msg p:last-child {
  margin-bottom: 0;
}

/* ── blanks, on the paper and in the message ── */
.nabgol-control-surface mark.cs-blank {
  background: #fde68a !important;
  color: #713f12 !important;
  border-radius: 5px;
  padding: 0 5px;
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.nabgol-control-surface mark.cs-blank.is-filled {
  background: #bbf7d0 !important;
  color: #14532d !important;
}

/* ── «n جای خالی — همین‌جا پرشان کنید» ── */
.nabgol-cs-fill {
  margin-bottom: 14px;
  padding: 12px 14px 4px;
  border-radius: 16px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.08);
}
.nabgol-cs-fill.is-done {
  border-color: var(--cs-border);
  background: var(--cs-card);
  padding-bottom: 10px;
}
html[data-theme="light"] .nabgol-cs-fill:not(.is-done),
html.light .nabgol-cs-fill:not(.is-done) {
  background: #fffbeb;
  border-color: #fcd34d;
}
.nabgol-cs-fill-title {
  margin: 0 0 4px;
  font-size: 0.92rem;
}
.nabgol-cs-fill-private {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 0.76rem;
  color: var(--cs-muted);
}
.nabgol-cs-fill-done {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.nabgol-cs-fill-edit {
  margin-inline-start: auto;
  font-weight: 600;
  color: var(--cs-accent);
}
/* One row per blank: its name beside its box (a phone shows four without scrolling). */
.nabgol-cs-blank-row {
  display: grid;
  grid-template-columns: minmax(84px, 34%) 1fr;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 10px;
}
.nabgol-cs-blank-row .nabgol-cs-label {
  font-size: 0.84rem;
  line-height: 1.5;
}
.nabgol-cs-blank-row .nabgol-cs-quick {
  grid-column: 2;
}
.nabgol-cs-blank-row input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: var(--cs-field-bg);
  color: var(--cs-field-fg);
  font: inherit;
  font-size: 16px;
}
.nabgol-cs-blank-row input:focus {
  outline: none;
  border-color: var(--cs-accent);
  box-shadow: 0 0 0 3px var(--cs-accent-soft);
}
html[data-theme="light"] .nabgol-cs-blank-row input,
html.light .nabgol-cs-blank-row input {
  border-color: rgba(15, 23, 42, 0.18);
}
.nabgol-cs-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nabgol-cs-chip.nabgol-cs-chip--sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.8rem;
}

/* ── words appearing on the paper while the model writes ── */
.nabgol-cs-paper--live:not(.is-loading) {
  white-space: pre-wrap;
  text-align: right;
}
.nabgol-cs-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-inline-start: 2px;
  vertical-align: -0.15em;
  background: #047857;
  animation: nbcs-blink 1s steps(2, start) infinite;
}
@keyframes nbcs-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .nabgol-cs-caret { animation: none; }
}

.nabgol-cs-doc-note--warn {
  margin: 12px 4px 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.1);
  text-align: start;
  font-size: 0.8rem;
  line-height: 1.7;
}

/* ── short form (۱۴۰۵/۰۷/۱۴): the studio's sheet for a job that needs a few facts ──
   On a phone it is as tall as its few boxes, standing on the keyboard — never a full
   screen for four fields. The answer lands in the chat, so nothing here mentions a paper. */
body.mobile-chat #nabgolControlSurface.nabgol-control-surface.is-open[data-cs-quick] {
  top: auto !important;
  max-height: calc(100% - var(--cs-kb, 0px) - env(safe-area-inset-top, 0px) - 10px);
}
.nabgol-cs-qform .nabgol-cs-header { padding-bottom: 2px; }
.nabgol-cs-qform .nabgol-cs-body { overflow-y: auto; min-height: 0; }
.nabgol-qf-fields { display: flex; flex-direction: column; gap: 14px; }
.nabgol-qf-fields .nabgol-cs-field { margin: 0; }
.nabgol-qf-box { position: relative; }
.nabgol-qf-box input { width: 100%; box-sizing: border-box; }
.nabgol-qf-box input:has(+ .nabgol-qf-unit) { padding-inline-end: 64px; }
.nabgol-qf-unit {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cs-muted);
  font-size: 14px;
  pointer-events: none;
}
.nabgol-cs-qform .nabgol-cs-seg { flex-wrap: wrap; }
.nabgol-cs-qform .nabgol-cs-actions { margin: 0; }
.nabgol-cs-qform .nabgol-cs-btn-apply { width: 100%; justify-content: center; min-height: 50px; }
.nabgol-qf-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--cs-muted);
}