/* chat-mode-surfaces.css — the two containers CHAT_REDESIGN_MASTER_PLAN §قوانین
   ۱ و ۴ require and that never got built: #nabgolModeBar (the sentence + off
   switch under the header) and #nabgolQuickStrip (the mode's own tools, one
   row, directly above the composer). chat-workspace.js has carried the full
   logic for both since before this file existed — syncModeBar() and
   syncQuickStrip() — and both start with `if (!el) return;`. Neither id was
   ever placed in either template, so both functions returned immediately from
   day one. This file is only the container and its paint; the content is the
   registry's, filled by chat-workspace.js.

   SELF-CONTAINED ON PURPOSE. chat-workbench.css already carries a
   `.nabgol-mode-bar` / `.nabgol-quick-strip` design (same idea, same
   measured colours) — but that file loads only `if ($workbenchOn)`, and a
   studio robot with no learner rail never loads it. A parent or teacher can
   turn a special mode on regardless of whether the workbench exists, so this
   file repeats the tokens rather than depending on a stylesheet that may not
   be on the page. It targets #nabgolModeBar / #nabgolQuickStrip by id (and
   [data-mode-bar-*] the same way chat-workspace.js does) so it never collides
   with chat-workbench.css's own rules on the rare page that loads both — and
   where chat-workspace.js itself creates `.nabgol-quick-strip-label` /
   `.nabgol-quick-strip-btn` (syncQuickStrip(), hardcoded className), this
   file's selectors are scoped under #nabgolQuickStrip so they win regardless
   of link order. */

:root {
  --nbgms-band-face: rgba(251, 191, 36, 0.16);
  --nbgms-band-edge: rgba(251, 191, 36, 0.40);
  --nbgms-band-ink: var(--nbgc-ink, #e8eef6);
  --nbgms-mode-mark: #fbbf24;

  /* §33 — the WORK BAND's own surface, which is NOT the mode's colour.
     `--nbgms-band-*` above tints a row that exists only while a special mode
     is on. The work band is on for every student on every screen, so it takes
     the composer's own construction and reads as the top edge of that block
     rather than as a warning.
     And the composer's own construction is `background: none` plus one
     hairline (chat-composer.css section 1 — measured, not guessed: an opaque
     copy of the dark canvas would have been a black slab across a light-theme
     phone, which is exactly the fault chat-mobile-flagship.css's own
     `html[data-theme="light"] body.mobile-chat` rule exists to undo). So the
     band inherits the page's surface in both themes for free, and only the
     hairline is a token. */
  --nbgms-work-face: transparent;
  --nbgms-work-edge: var(--nbgc-hairline, rgba(148, 168, 200, 0.16));
  --nbgms-work-ink: var(--nbgc-ink, #e8eef6);

  /* §33-11 — the FILLED way-out pill. It is not `--nbgms-mode-mark` reused:
     that token is a 7px dot and a 3px rule, where nothing is written on top of
     it, so it never had to carry text. These two are a pair, chosen so the
     label clears 4.5:1 on its own fill in every mode and both themes
     (measured: amber 11.1:1 · indigo 8.8:1 · light amber 6.3:1 · light indigo
     7.9:1), and test_chat_stage_workbench_gate reads them off the live page
     rather than trusting these comments. */
  --nbgms-off-face: #fbbf24;
  --nbgms-off-ink: #1f1400;
}

/* §36-4 — teacher mode left red. The reasoning and the five re-measured
   combinations are written once, in chat-workbench.css §36-4-۱; these are the
   same five hues so the bar in the flow and the bar in the panel cannot drift
   apart. The filled way-out pill keeps its own measured pair:
   #131047 on #a5b4fc = 8.83:1 (night) · #ffffff on #4338ca = 7.90:1 (day),
   against 6.74:1 and 4.83:1 for the red it replaces. */
body[data-nabgol-mode="teacher_mode"] {
  --nbgms-band-face: rgba(99, 102, 241, 0.18);
  --nbgms-band-edge: rgba(99, 102, 241, 0.46);
  --nbgms-mode-mark: #818cf8;
  --nbgms-off-face: #a5b4fc;
  --nbgms-off-ink: #131047;
}

/* Light theme — inks re-measured on the tinted band itself, not the panel
   behind it (chat-workbench.css's own numbers, reused here verbatim):
   #78350f on the amber band ≈ 8.6:1 · #312e81 on the indigo band ≈ 9.8:1. */
html[data-theme="light"] {
  --nbgms-band-face: rgba(217, 119, 6, 0.12);
  --nbgms-band-edge: rgba(217, 119, 6, 0.40);
  --nbgms-band-ink: #78350f;
  --nbgms-mode-mark: #b45309;
  --nbgms-off-face: #b45309;
  --nbgms-off-ink: #ffffff;
}

html[data-theme="light"] body[data-nabgol-mode="teacher_mode"] {
  --nbgms-band-face: rgba(79, 70, 229, 0.10);
  --nbgms-band-edge: rgba(79, 70, 229, 0.42);
  --nbgms-band-ink: #312e81;
  --nbgms-mode-mark: #4f46e5;
  --nbgms-off-face: #4338ca;
  --nbgms-off-ink: #ffffff;
}

/* ── the bar ─────────────────────────────────────────────────────────────
   First child of .chat-main in both templates, so it sits immediately under
   the header and above #messages as a REAL row — .chat-main is a flex
   column on both shells, so #messages simply shrinks by this row's height.
   `hidden` (server-rendered) keeps the ordinary screen exactly the height it
   was; chat-workspace.js's syncModeBar() only ever flips that attribute. */
/* Fixed HEIGHT, not min-height, on the row itself — measured: font-metric
   guesses (line-height * font-size) landed the row at 39px against a 28px
   target. A flex row with align-items:center and a fixed height centres any
   child regardless of its own line-height, so the row's height is exactly
   this number on both shells, and everything inside it is sized to fit. */
#nabgolModeBar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  overflow: visible;
  padding: 0 12px;
  border-bottom: 1px solid var(--nbgms-band-edge);
  background: var(--nbgms-band-face);
  color: var(--nbgms-band-ink);
  font-size: 0.76rem;
  line-height: 1;
  direction: rtl;
  text-align: right;
  white-space: nowrap;
}

#nabgolModeBar[hidden] { display: none; }

/* ── THE PHONE'S BAR — §33-11 ────────────────────────────────────────────
   30px, not 32, and 0.70rem, not 0.76 — the owner asked for the warning back
   «با ارتفاع کمتر و نوشته کوچکتر».

   WHY 30 AND NOT 26, WHICH IS WHAT THIS BLOCK SAID FIRST. The 26px draft put a
   22px button on the row and bought the missing touch area back with the
   `::after` hit-slop this file already used elsewhere. Measured, it does not
   work: `elementFromPoint` two pixels BELOW the button returns
   `header#chatHeader`, never the button. Sideways the slop lands (tap box
   101px wide for an 82px pill); downward it does not, because `#messages` is
   `position: relative` and a LATER sibling of this bar, so it paints over a
   positioned pseudo owned by an earlier one. That rule had sat in this file
   unmeasured since the bar first shipped.
   The fix would be a z-index on the bar — and that would hang an invisible
   101x24 tap-eater over the top-left corner of the conversation, which is the
   «دیده می‌شود ولی کار نمی‌کند» fault pointed at the canvas instead of at the
   control. So the button is honestly 26px tall and the row is 30.
   Effective target 26 x ~106px = 2,756px², against 44 x 44 = 1,936px². The
   SIDEWAYS slop is kept: it works, and it stays inside the bar's own row where
   it covers nothing.
   `[data-mode-bar-compact]` is written by mobile.php and by nothing else, so
   the desktop bar (a separate element in desktop.php) keeps its 28px and its
   full sentence with no viewport test in the JS. */
@media (max-width: 767.98px) {
  #nabgolModeBar[data-mode-bar-compact] {
    height: 30px;
    gap: 6px;
    padding: 0 10px;
    font-size: 0.70rem;
  }

  /* The mode's colour, as a mark a colour-blind reader can ignore without
     losing anything — the sentence beside it names the mode in words. */
  #nabgolModeBar[data-mode-bar-compact] .nabgol-mode-bar-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nbgms-mode-mark);
  }
}

#nabgolModeBar [data-mode-bar-text] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* The off-switch is on the SAME line as the sentence explaining why it is
   there — a person who did not mean to be in this mode should not have to
   find a panel to leave it. Fixed height for the same reason as the bar:
   `inline-flex` + `align-items:center` centres the label inside it instead of
   the button growing to fit the label's own line-height. */
#nabgolModeBar [data-mode-bar-off] {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  appearance: none;
  height: 20px;
  padding: 0 10px;
  border: 1px solid var(--nbgms-band-edge);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.74rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#nabgolModeBar [data-mode-bar-off]:hover,
#nabgolModeBar [data-mode-bar-off]:focus-visible {
  background: var(--nbgms-band-edge);
  outline: none;
}

#nabgolModeBar [data-mode-bar-off]:focus-visible {
  outline: 2px solid var(--nbgms-mode-mark);
  outline-offset: 2px;
}

/* ≥44×44 touch area on mobile, bought with padding on the CONTROL, not
   height on the BAR (the bar stays a 26px line). The button's own visible
   box stays small; a hit-slop pseudo extends the tappable area sideways and
   DOWNWARD only, into #messages' own (unclipped) territory inside
   .chat-main — never upward, where .chat-main's `overflow: hidden` would
   silently clip and deaden it the same way a see-through scrim would.

   THAT IS WHAT IT SAID. IT WAS HALF TRUE, AND THE HALF THAT MATTERED WAS THE
   FALSE ONE (measured 2026-09-09). The DOWNWARD extension never reached
   anything: `#messages` is `position: relative` and a later sibling, so it
   paints over this pseudo and `elementFromPoint` below the button returns the
   page. The SIDEWAYS extension works and costs nothing, so that is all this
   rule does now; the vertical target is bought with real height on the
   button. */
@media (max-width: 767.98px) {
  #nabgolModeBar [data-mode-bar-off]::after {
    content: '';
    position: absolute;
    inset: 0 -12px;
  }

  /* ── THE WAY OUT, AS THE ONE OBVIOUS THING ON THE ROW — §33-11 ──────────
     The owner: «نحوهٔ بستن ... جوری واضح و در دسترس نیست که یک دانش‌آموز
     بلافاصله با دیدنش و راحت و سریع پیدایش کند.» Three changes, each one a
     reason it was missable:

       · it was a GHOST outline on a tinted bar — the lowest-contrast object
         on the row. It is a FILLED pill in the mode's own colour now, so it
         is the one thing on the bar that looks pressable;
       · it said «خاموش کن» — which asks the reader to already know what is
         on. It says «حالت عادی»: where you LAND, not what you switch off;
       · it had no icon. A ✕ is what «this closes» looks like at 22px, in any
         language, to a nine-year-old.

     The visible box is 22px so the row can be 26px; the hit-slop above makes
     the real target 46px tall and 20px wider than it looks. */
  #nabgolModeBar[data-mode-bar-compact] [data-mode-bar-off] {
    height: 26px;
    gap: 4px;
    padding: 0 10px 0 8px;
    border: 0;
    border-radius: 999px;
    background: var(--nbgms-off-face);
    color: var(--nbgms-off-ink);
    font-size: 0.70rem;
    font-weight: 800;
  }

  #nabgolModeBar[data-mode-bar-compact] [data-mode-bar-off] .ico {
    flex: 0 0 auto;
    width: 12px !important;
    height: 12px !important;
  }

  /* `:hover` is a mouse state a phone reports on first tap; the shared rule
     above repaints the button with the BAR's edge colour, which on a filled
     pill would drop it back to the outline look mid-press. */
  #nabgolModeBar[data-mode-bar-compact] [data-mode-bar-off]:hover,
  #nabgolModeBar[data-mode-bar-compact] [data-mode-bar-off]:focus-visible {
    background: var(--nbgms-off-face);
    filter: brightness(1.06);
  }
}

/* ── the quick strip ───────────────────────────────────────────────────────
   Mobile: a normal flow row, inserted directly before .chat-input — body is
   a flex column there and .chat-input floats over nothing, so DOM order is
   the whole story and #messages needs no reserve for it.
   Desktop: .chat-input is the one sanctioned floater over the canvas (rule
   4's documented exception, chat-desktop-shell.css) — an `align-self: end`
   item in body's own zero-height grid row. This strip is a second item in
   that SAME row, lifted clear of the composer by `--nabgol-composer-offset`
   (the composer's own live-measured height), so it always docks flush above
   the bar and re-anchors the instant the composer resizes. script.js's
   syncCanvasReserveNow() adds this strip's height to #messages' own
   padding-bottom for the same reason it already does for the player —
   compare rectangles, not an open/closed flag. */
#nabgolQuickStrip {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  flex: 0 0 auto;
  padding: 6px 12px;
  border-top: 1px solid var(--nbgms-band-edge);
  background: var(--nbgms-band-face);
  direction: rtl;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#nabgolQuickStrip[hidden] { display: none; }
#nabgolQuickStrip::-webkit-scrollbar { display: none; }

/* No overflow button, ever — a nowrap row whose overflow control sits past
   the edge is not reachable ("پنجگانه" trap ROUTER.md §1 already names). This
   row only ever scrolls; it never grows a second control to manage that. */
#nabgolQuickStrip .nabgol-quick-strip-label {
  flex: 0 0 auto;
  color: var(--nbgms-band-ink);
  font-size: 0.74rem;
  font-weight: 700;
  opacity: 0.9;
  white-space: nowrap;
}

#nabgolQuickStrip .nabgol-quick-strip-btn {
  flex: 0 0 auto;
  appearance: none;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--nab-btn-edge, rgba(148, 163, 184, 0.26));
  border-radius: var(--nab-btn-radius-sm, 12px);
  background-color: var(--nab-btn-face-2, var(--nab-btn-face-1, #1e2736));
  background-image: linear-gradient(180deg, var(--nab-btn-face-1, #1e2736) 0%, var(--nab-btn-face-2, #161d29) 100%);
  color: var(--nab-btn-ink, #eaf0f7);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#nabgolQuickStrip .nabgol-quick-strip-btn:hover,
#nabgolQuickStrip .nabgol-quick-strip-btn:focus-visible {
  border-color: var(--nab-btn-edge-hover, rgba(52, 211, 153, 0.62));
  outline: none;
}

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

#nabgolQuickStrip .nabgol-quick-strip-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ══ «نوارِ کار» — THE ONE TOOL BAND ON A PHONE (§33) ═══════════════════════
   Everything below is scoped to `body.mobile-chat #nabgolQuickStrip[data-nabgol-band]`.
   The desktop shell never carries that attribute, so every rule above and the
   desktop block below are byte-for-byte what they were.

   WHY THE BAND IS NOT TINTED WITH THE MODE COLOUR.
   Above, the strip paints `--nbgms-band-face` because it only ever existed
   while a special mode was on — an amber/red row WAS the mode. The band is on
   for every student on every screen now, so it takes the composer's own
   surface and reads as the top edge of the composer block, and the MODE keeps
   its colour where it belongs: on the pill, which is the only part that means
   «you are not in the ordinary state».

   HEIGHT — 45px, and every pixel of the saving comes from deleting the second
   band, not from shrinking a control (§33-4):
     2px padding + 40px control + 2px padding + 1px border-top = 45px
   The controls got BIGGER (39px -> 40px). 44px is this band's FLOOR, not its
   ceiling: from today it is the most-used control surface in the product on a
   phone, and 8px more canvas is not worth a mis-hit on it. */
body.mobile-chat #nabgolQuickStrip[data-nabgol-band] {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 2px 10px;
  border-top: 1px solid var(--nbgms-work-edge);
  background: var(--nbgms-work-face);
  color: var(--nbgms-work-ink);
  direction: rtl;
  /* The BAND does not scroll — its rail does. Keeping the scroller on the
     inner element is what lets the pinned end be genuinely pinned without
     `position: sticky` inside an RTL overflow box, and it is why the pill's ✕
     can be a real 40x40 instead of a 20px button wearing a hit-slop pseudo:
     ::after would have been sliced off by `overflow-y: hidden` (§33-4). */
  overflow: visible;
}

/* The base rule two blocks up is `#nabgolQuickStrip[hidden] { display: none }`
   — one id + one attribute. The band selector above outranks it, so without
   this the product wall would leak a band onto a non-tutor robot. */
body.mobile-chat #nabgolQuickStrip[data-nabgol-band][hidden] { display: none; }

/* ── the pinned end (RTL: the right edge) ─────────────────────────────────
   Never scrolls. The door is FIRST in DOM so it is the rightmost thing on the
   band, and the pill is appended to its left INSIDE this block — which is the
   whole mechanism behind «x ثابت»: adding or removing the pill cannot move
   the door, because the door is measured from the band's right padding edge. */
body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-pinned {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  /* RTL: inline-end is the LEFT side — the seam with the rail. */
  padding-inline-end: 8px;
  border-inline-end: 1px solid var(--nbgms-work-edge);
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-door {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  appearance: none;
  border: 1px solid var(--nab-btn-edge, rgba(148, 163, 184, 0.26));
  border-radius: var(--nab-btn-radius-sm, 12px);
  background-color: var(--nab-btn-face-2, var(--nab-btn-face-1, #1e2736));
  background-image: linear-gradient(180deg, var(--nab-btn-face-1, #1e2736) 0%, var(--nab-btn-face-2, #161d29) 100%);
  color: var(--nab-btn-ink, #eaf0f7);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* THE DOOR HAS A NAME NOW. Measured before this step: the word «میزِ کار» was
   written nowhere on the phone — the door was an unlabelled glyph among six
   other glyphs. A label is affordable here in a way it was not in the header,
   because this row has one job and the header had seven. */
body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-door-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-door .ico {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-door:focus-visible {
  outline: 2px solid var(--nab-btn-win-2, #10b981);
  outline-offset: 2px;
}

/* The band's mode pill (§33) lived here for one day and its rules went
   with its markup on 2026-09-09: the state and its way out are one object
   again, at the top of the conversation. §33-11. */

/* ── the rail ─────────────────────────────────────────────────────────────
   Scrolls, and only scrolls. No overflow button, ever — a control that manages
   an edge by living past it is the «درِ پنجم» trap ROUTER.md §1 names. */
body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-rail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-rail::-webkit-scrollbar {
  display: none;
}

/* ── §34-3ث · how much of this row is in view ──────────────────────────────
   These two lines above are why the row said nothing: Android Chrome's own
   scrollbar is an OVERLAY one — measured gutter here is exactly 0 — and this
   file hides even that. So the signal is drawn instead of borrowed, and it is
   drawn where the reader is already looking: a 3px rail directly under the
   chips, the full width of the scroller and no wider.
   The two hide-the-scrollbar lines stay. They are the right call and always
   were: an overlay bar that appears for 800ms while a thumb is moving is not
   an answer to «how much is there», and a second, fainter marker beside this
   one would be two signals for one fact — the duplication §33 spent a step
   removing. What changes is that something now answers the question.
   Out of flow, because the strip is a flex ROW: a third flex child would take
   width from the chips, which is the one thing a 320px phone cannot spare.
   chat-workspace.js::syncBandScrollRail sizes and places it. */
body.mobile-chat #nabgolQuickStrip[data-nabgol-band] {
  position: relative;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-srail {
  position: absolute;
  bottom: 1px;
  height: 3px;
  border-radius: 999px;
  background: #64748b;
  pointer-events: none;
  z-index: 2;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-srail[hidden] {
  display: none;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-sthumb {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: #e2e8f0;
  will-change: transform;
}

html[data-theme="light"] body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-sthumb {
  background: #0f172a;
}

/* 40px, up from a rendered 39. The chips keep their class, their paint and
   their renderer — only their box grew. */
body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-quick-strip-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Desktop placement: a second align-self:end item in .chat-input's own
   zero-height grid row (chat-desktop-shell.css: header/main/1fr/0px/auto). */
@media (min-width: 768px) {
  body.desktop-chat #nabgolQuickStrip {
    grid-column: 1 / 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    width: var(--stage-col-width, 100%) !important;
    max-width: var(--stage-col-width, 100%) !important;
    margin-inline: auto !important;
    margin-bottom: var(--nabgol-composer-offset, 76px) !important;
    border-radius: 12px 12px 0 0;
    position: relative !important;
    z-index: 5 !important;
    transition: width 0.28s var(--shell-ease, ease), max-width 0.28s var(--shell-ease, ease);
  }

  body.desktop-chat.nabgol-workspace-open #nabgolQuickStrip {
    grid-column: 2 / 3 !important;
  }
}

/* ══ §34-8 · THE MODE BAR SAYS ONE SENTENCE, AND THE WAY OUT SAYS ONE WORD ══
 *
 * §33-11 brought this bar back and fixed the right things: one surface that
 * both names the state and undoes it. What it still carried was the shape of a
 * label — «معلم: راهنمای تدریس، نه درسِ دانش‌آموز» — and a way out that was a ✕
 * next to a word, i.e. one button with two meanings («ببند» and «برو به حالت
 * عادی»). §34-3چ: a whole positive sentence, and a pill that names where you
 * LAND. The sentence and the label both come from the SPECIAL_MODES registry
 * in chat-workspace.js (single producer, so a third mode is right for free);
 * the numbers below are the geometry that sentence needs.
 *
 * 34px, not 30: the pill is 28px tall now (a word at 26px was legible but the
 * ✕ carried the pressability, and the word has to carry it alone), and 34 is
 * 28 plus the 3px of air on each side that keeps it from touching the edges.
 * The 3px rule at the START edge is the mode's own colour — the same mark the
 * dot gives, at the one place a thumb never covers.
 *
 * The 4px this costs the canvas is bought back in chat-workbench.css, whose
 * cap is now `100dvh - 144px` (94 header + 34 bar + a 16px sliver of the last
 * bubble) instead of `- 148px`.
 */
@media (max-width: 767.98px) {
  #nabgolModeBar[data-mode-bar-compact] {
    height: 34px;
    padding: 0 10px;
    border-inline-start: 3px solid var(--nbgms-mode-mark);
  }

  /* THE WORD IS THE WHOLE CONTROL NOW. No icon, ≥88px wide, 28px tall — and
     the hit-slop pseudo from §33-11 stays exactly as it was: it works
     horizontally, and its vertical half is covered by #messages (§33-11-ت,
     a day of a control that looked pressable and was not). */
  #nabgolModeBar[data-mode-bar-compact] [data-mode-bar-off] {
    height: 28px;
    min-width: 88px;
    justify-content: center;
    gap: 0;
    padding: 0 12px;
    font-size: 0.70rem;
    font-weight: 800;
  }

  /* ── §34-8 · FOUR WHOLE CHIPS, WHICH IS ONE MEASUREMENT AND NOT A STYLE ──
     Measured at 390px: the rail has 272px of visible width for 929px of chips,
     and the first three of them need 318px at 0.82rem/12px padding — so two
     showed whole and the third was always cut. §34-3ج asks for four in view
     counting the door (the plan's own «امروز ۲ تا + در»).
     0.74rem with 8px of padding and a 4px gap makes those same three 270px
     wide, and 6px of band padding instead of 10 gives the rail 284px to put
     them in. The height stays 40px — §33 measured that floor and this step is
     not allowed to spend it (§34-4-۳: density is bought with room, never with
     a smaller touch target). */
  body.mobile-chat #nabgolQuickStrip[data-nabgol-band] {
    padding: 2px 6px;
    gap: 6px;
  }

  body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-pinned {
    padding-inline-end: 6px;
  }

  body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-rail {
    gap: 4px;
  }

  body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-quick-strip-btn {
    padding: 0 8px;
    font-size: 0.74rem;
  }
}

/* ══ §12-2 · TEACHER MODE: ONE ROW, AN INDEX, NOTHING HIDDEN (docs/GAM-12-PANEL-SHAD.md §2-4) ══
   Only while a mode declares two groups (chat-workspace.js stamps
   `data-band-clustered`); the student band and the parent band never carry it.
   FINAL FORM 2026-09-13, after two measured rejections: stacked rows doubled
   the band (90px, 255px of conversation left at 320×568); a switch hid half
   the tools. The band keeps its ONE 45px row (40px controls, §33-4): a small
   index names every group at first glance and jumps the row there; every tool
   sits in the one row; a hairline and the group's own marker show exactly
   where the next group begins. Colours are the mode's band tokens (§36-4). */
body.mobile-chat #nabgolQuickStrip[data-nabgol-band][data-band-clustered] .nabgol-band-rail {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  overflow: visible;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-index {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: var(--nab-btn-radius-sm, 12px);
  border: 1px solid var(--nbgms-band-edge);
  background: transparent;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-cluster-tag {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  height: 34px;
  min-width: 40px;
  padding: 0 5px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--nbgms-work-ink);
  opacity: 0.7;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-cluster-tag.is-on {
  background: var(--nbgms-band-face);
  color: var(--nbgms-band-ink);
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--nbgms-band-edge);
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-cluster-tag .ico {
  width: 14px !important;
  height: 14px !important;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-cluster-tag.is-on .ico {
  color: var(--nbgms-mode-mark);
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-cluster-tag:focus-visible {
  outline: 2px solid var(--nab-btn-win-2, #10b981);
  outline-offset: 1px;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-cluster {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  align-self: stretch;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-cluster-rail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-cluster-rail::-webkit-scrollbar {
  display: none;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-cluster-srail {
  bottom: -1px;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-section {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* THE BOUNDARY — exactly where one group ends and the next begins: a hairline,
   then the next group's own marker (the same glyph and word as its index item,
   drawn in the index's lit state so the pair reads as one). */
body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-section + .nabgol-band-section {
  margin-inline-start: 6px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--nbgms-band-edge);
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-boundary {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 34px;
  min-width: 40px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--nbgms-band-face);
  box-shadow: inset 0 0 0 1px var(--nbgms-band-edge);
  color: var(--nbgms-band-ink);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

body.mobile-chat #nabgolQuickStrip[data-nabgol-band] .nabgol-band-boundary .ico {
  width: 14px !important;
  height: 14px !important;
  color: var(--nbgms-mode-mark);
}


/* Desktop: two titled groups, one per line; a line may wrap, so every
   group's first button is on screen with no scrolling. */
#nabgolQuickStrip[data-strip-clustered]:not([data-nabgol-band]) {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  overflow: visible;
}

#nabgolQuickStrip .nabgol-quick-strip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#nabgolQuickStrip .nabgol-quick-strip-group + .nabgol-quick-strip-group {
  padding-top: 4px;
  border-top: 1px solid var(--nbgms-band-edge);
}