/* ============================================================================
   NabGol — Action Buttons Design System  (foundation, reusable across all apps)

   Owns every button a robot generates mid-chat:
     .nabgol-choice-button · .nabgol-multi-submit · .nabgol-other-option
     .nabgol-action-button-cta · .nabgol-confirmation buttons
     .nabgol-text-input-send · .nabgol-custom-input-go

   …and the robot-configured starter chips of the empty state (#starterChips):
   this file declares their --nab-chip-* tokens and every FX layer; their box
   still comes from chat-flagship-polish.css / chat-tutor-starter.css, which now
   read the tokens instead of hard-coding two themes. See the section at the end.

   Rules of this file
     1. ONE token block. Every colour comes from a token, so a new app only
        re-declares tokens — never selectors.
     2. Opaque surfaces only. No rgba-white-over-unknown: that is what used to
        break readability when the card behind changed. Contrast is therefore
        guaranteed in both day and night.
     3. Motion is transform/opacity only (GPU), and fully off under
        prefers-reduced-motion.
     4. Repair, never delete: the Live-tutor CTA keeps its own breathing pill
        (chat-live-power.css) — this file only lends it press feel.

   Pair file: assets/js/chat/chat-button-fx.js
   ========================================================================== */

:root {
  /* — night (default) — */
  --nab-btn-face-1: #1e2736;
  --nab-btn-face-2: #161d29;
  --nab-btn-face-hi: rgba(255, 255, 255, 0.10);   /* inner top highlight */
  --nab-btn-edge: rgba(148, 163, 184, 0.26);
  --nab-btn-edge-hover: rgba(52, 211, 153, 0.62);
  --nab-btn-ink: #eaf0f7;
  --nab-btn-ink-hover: #ffffff;
  --nab-btn-ink-soft: #94a3b8;

  --nab-btn-lift: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.26);
  --nab-btn-lift-hover: 0 2px 4px rgba(0, 0, 0, 0.30), 0 14px 34px rgba(4, 120, 87, 0.28);
  --nab-btn-glow: rgba(52, 211, 153, 0.20);

  --nab-btn-idx-face: rgba(148, 163, 184, 0.16);
  --nab-btn-idx-ink: #b8c4d4;

  /* accent — the reward colour, identical in both themes so «chosen» always
     reads as the same event, and always legible against either card */
  --nab-btn-win-1: #34d399;
  --nab-btn-win-2: #10b981;
  --nab-btn-win-ink: #012014;   /* measured 8.97:1 / 6.80:1 on the two stops */
  --nab-btn-win-ring: rgba(52, 211, 153, 0.42);

  --nab-btn-radius: 14px;
  --nab-btn-radius-sm: 12px;
  --nab-btn-min: 46px;
  --nab-btn-spring: cubic-bezier(0.34, 1.56, 0.44, 1);
  --nab-btn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------------------------------------------------------- starter chips

     The first button a robot ever shows (#starterChips, built by
     includes/starter_chips.php). Same family as the in-chat options, own
     tokens because a chip is a wide card with a lead icon, not an option in a
     grid.

     These tokens exist so the two legacy sheets that still own chip geometry
     (chat-flagship-polish.css and the inline-embedded chat-tutor-starter.css)
     can stop hard-coding colour. They used to fork on `body.dark-mode` — a
     class nothing in live/ ever sets, so the light branch always won and the
     chips painted a day card in the middle of a night chat.

     — night —                                                             */
  --nab-chip-face-1: #334155;
  --nab-chip-face-2: #1e293b;
  --nab-chip-face-3: #0f172a;
  --nab-chip-edge: rgba(203, 213, 225, 0.30);
  --nab-chip-edge-hover: rgba(52, 211, 153, 0.60);
  --nab-chip-ink: #f1f5f9;
  --nab-chip-ink-hover: #ffffff;
  --nab-chip-ring: rgba(255, 255, 255, 0.26);       /* inset top highlight */
  --nab-chip-lift:
    0 0 0 1px rgba(148, 163, 184, 0.20),
    0 8px 22px rgba(0, 0, 0, 0.28);
  --nab-chip-lift-hover:
    0 0 0 1px rgba(52, 211, 153, 0.32),
    0 14px 32px rgba(4, 120, 87, 0.30);
  --nab-chip-glow: rgba(52, 211, 153, 0.18);
  --nab-chip-lead-face: rgba(52, 211, 153, 0.18);
  --nab-chip-lead-ink: #34d399;
  --nab-chip-panel-face: rgba(15, 23, 42, 0.38);
  --nab-chip-panel-edge: rgba(148, 163, 184, 0.16);
  --nab-chip-eyebrow: #34d399;

  /* the primary path (teach) — the accent, and therefore the SAME in both
     themes, exactly like --nab-btn-win-*: «start here» must read as one event.
     Two stops only: a third, darker stop would drop the dark ink under AA. */
  --nab-chip-hero-1: var(--nab-btn-win-1);
  --nab-chip-hero-2: var(--nab-btn-win-2);
  --nab-chip-hero-ink: var(--nab-btn-win-ink);
  --nab-chip-hero-edge: rgba(167, 243, 208, 0.60);
  --nab-chip-hero-edge-hover: rgba(236, 253, 245, 0.85);
  --nab-chip-hero-ring: var(--nab-btn-win-ring);
  --nab-chip-hero-lead-face: rgba(255, 255, 255, 0.42);

  --nab-chip-radius: 0.95rem;
  --nab-chip-min: 3rem;
}

html[data-theme="light"] {
  /* — day — */
  --nab-btn-face-1: #ffffff;
  --nab-btn-face-2: #f4f7fb;
  --nab-btn-face-hi: rgba(255, 255, 255, 0.85);
  --nab-btn-edge: #d7dfe9;
  --nab-btn-edge-hover: rgba(5, 150, 105, 0.55);
  --nab-btn-ink: #16202e;
  --nab-btn-ink-hover: #04261c;
  --nab-btn-ink-soft: #475569;

  --nab-btn-lift: 0 1px 1px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.07);
  --nab-btn-lift-hover: 0 2px 4px rgba(15, 23, 42, 0.07), 0 14px 30px rgba(5, 150, 105, 0.18);
  --nab-btn-glow: rgba(5, 150, 105, 0.14);

  --nab-btn-idx-face: rgba(15, 23, 42, 0.06);
  --nab-btn-idx-ink: #475569;

  /* — starter chips, day — the neutral card flips side; the accent does not */
  --nab-chip-face-1: #e2e8f0;
  --nab-chip-face-2: #cbd5e1;
  --nab-chip-face-3: #94a3b8;
  --nab-chip-edge: rgba(100, 116, 139, 0.38);
  --nab-chip-edge-hover: rgba(5, 150, 105, 0.55);
  --nab-chip-ink: #0f172a;
  --nab-chip-ink-hover: #04261c;
  --nab-chip-ring: rgba(255, 255, 255, 0.75);
  --nab-chip-lift:
    0 0 0 1px rgba(148, 163, 184, 0.16),
    0 6px 16px rgba(15, 23, 42, 0.10);
  --nab-chip-lift-hover:
    0 0 0 1px rgba(5, 150, 105, 0.28),
    0 12px 28px rgba(5, 150, 105, 0.18);
  --nab-chip-glow: rgba(5, 150, 105, 0.14);
  /* Near-opaque on purpose. A 16%-emerald wash over the day card's darkest stop
     (#94a3b8) put the lead icon at 1.97:1 — under the 3:1 graphic floor, and the
     same defect the pre-token light rules shipped. A tinted white badge holding
     the emerald icon measures 4.89:1 on that same stop. */
  --nab-chip-lead-face: rgba(236, 253, 245, 0.90);
  --nab-chip-lead-ink: #047857;
  --nab-chip-panel-face: rgba(241, 245, 249, 0.72);
  --nab-chip-panel-edge: rgba(15, 23, 42, 0.10);
  /* #059669 measured 3.77:1 on the light panel — under AA for a text line */
  --nab-chip-eyebrow: #047857;
}

/* ============================================================ layout of a pack */

body:is(.desktop-chat, .mobile-chat) .nabgol-inline-components {
  border-top: 1px solid var(--nab-btn-edge);
  padding-top: 12px;
  margin-top: 12px;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-choice {
  gap: 10px;
}

/* Long options stack. chat-button-fx.js sets .is-stacked after measuring the real
   width the pack got — a fixed 3-column grid turns a sentence-length option into
   a squeezed tower of two-letter lines. */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice.is-stacked,
body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count].is-stacked {
  grid-template-columns: minmax(0, 1fr);
}

/* Below a phone-ish width a hard 3-across never reads; two is the floor. */
@media (max-width: 560px) {
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count="3"],
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count="5"],
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count="6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body:is(.desktop-chat, .mobile-chat) .nabgol-choice legend,
body:is(.desktop-chat, .mobile-chat) .nabgol-input-label {
  color: var(--nab-btn-ink);
  font-weight: 700;
  letter-spacing: 0.005em;
  margin-bottom: 12px;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-confirmation {
  display: flex;
  /* chat-components.css sets flex-direction:column here, which stacked «بله» and
     «نه» on separate rows. A yes/no pair belongs side by side. */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-confirmation > p {
  flex: 1 1 100%;
  margin: 0 0 4px;
  color: var(--nab-btn-ink);
  font-weight: 700;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-confirmation > button {
  flex: 1 1 auto;
  min-width: 8rem;
  width: auto;
  margin: 0;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-action-button-hint {
  margin: 0 0 8px;
  color: var(--nab-btn-ink-soft);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ============================================================== the button itself */

body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button,
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit,
body:is(.desktop-chat, .mobile-chat) .nabgol-text-input-send {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;

  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: var(--nab-btn-min);
  margin: 0;
  padding: 0.72rem 0.95rem;

  border: 1px solid var(--nab-btn-edge);
  border-radius: var(--nab-btn-radius);
  background:
    linear-gradient(180deg, var(--nab-btn-face-1) 0%, var(--nab-btn-face-2) 100%);
  box-shadow:
    inset 0 1px 0 var(--nab-btn-face-hi),
    var(--nab-btn-lift);

  color: var(--nab-btn-ink);
  font-weight: 650;
  font-size: 0.945rem;
  line-height: 1.5;
  text-align: right;
  letter-spacing: 0.005em;

  cursor: pointer;
  transition:
    transform 0.22s var(--nab-btn-spring),
    border-color 0.2s var(--nab-btn-ease),
    box-shadow 0.24s var(--nab-btn-ease),
    color 0.18s var(--nab-btn-ease),
    opacity 0.24s var(--nab-btn-ease),
    filter 0.24s var(--nab-btn-ease);
}

/* layer 1 — pointer spotlight: the surface lights up under finger/cursor */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button::before,
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit::before,
body:is(.desktop-chat, .mobile-chat) .nabgol-text-input-send::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    18rem 14rem at var(--nab-mx, 50%) var(--nab-my, 0%),
    var(--nab-btn-glow),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.26s var(--nab-btn-ease);
  pointer-events: none;
}

/* layer 2 — one-pass sheen on hover, so the button reads as glass, not paint */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button::after,
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  z-index: -1;
  inset-inline-start: 0;
  /* The sweep is a transform, never an inset. Animating inset-inline-start ran
     layout on every frame of every hover — invisible on a desktop, a stutter on a
     phone. transform + opacity stay on the compositor. */
  transform: translate3d(var(--nab-sheen, -240%), 0, 0);
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 45%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:hover,
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit:hover:not(:disabled),
body:is(.desktop-chat, .mobile-chat) .nabgol-text-input-send:hover {
  transform: translateY(-2px);
  border-color: var(--nab-btn-edge-hover);
  box-shadow:
    inset 0 1px 0 var(--nab-btn-face-hi),
    var(--nab-btn-lift-hover);
  color: var(--nab-btn-ink-hover);
  background:
    linear-gradient(180deg, var(--nab-btn-face-1) 0%, var(--nab-btn-face-2) 100%);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:hover::before,
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit:hover:not(:disabled)::before,
body:is(.desktop-chat, .mobile-chat) .nabgol-text-input-send:hover::before,
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:focus-visible::before {
  opacity: 1;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:hover::after,
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit:hover:not(:disabled)::after {
  animation: nabBtnSheen 0.72s var(--nab-btn-ease) 1;
}

@keyframes nabBtnSheen {
  0%   { opacity: 0; transform: translate3d(-240%, 0, 0); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(240%, 0, 0); }
}

/* press — a real squash, then spring back */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:active:not(:disabled),
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit:active:not(:disabled),
body:is(.desktop-chat, .mobile-chat) .nabgol-text-input-send:active {
  transform: translateY(1px) scale(0.975);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.18);
  transition-duration: 0.06s;
}

/* focus — visible on any surface, never on mouse click */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:focus-visible,
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit:focus-visible,
body:is(.desktop-chat, .mobile-chat) .nabgol-text-input-send:focus-visible {
  outline: 2px solid var(--nab-btn-win-2);
  outline-offset: 3px;
  border-color: var(--nab-btn-edge-hover);
}

/* ============================================================== label + index

   The index badge and the label are real spans (built in chat-components.js)
   because ::before is the spotlight layer and ::after is the sheen. The label
   span also gives a stable read of the option text, so nothing depends on the
   button raw textContent any more.                                          */

body:is(.desktop-chat, .mobile-chat) .nab-btn-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* A plain option centres; a numbered one lines up from the badge, because a badge
   floating in the middle of a centred row reads as an accident. */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice > .nabgol-choice-button,
body:is(.desktop-chat, .mobile-chat) .nabgol-choice[data-count] > .nabgol-choice-button {
  justify-content: center;
  text-align: center;
  min-height: var(--nab-btn-min); /* the token stays the single source of height */
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice > .nabgol-choice-button.has-idx {
  justify-content: flex-start;
  text-align: start;
}

/* Label + counter travel together, centred as a pair. */
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit .nab-btn-label,
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-primary .nab-btn-label,
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-quiet .nab-btn-label,
body:is(.desktop-chat, .mobile-chat) .nabgol-action-button-cta .nab-btn-label {
  flex: 0 1 auto;
}

body:is(.desktop-chat, .mobile-chat) .nab-btn-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 1.45rem;
  block-size: 1.45rem;
  border-radius: 8px;
  background: var(--nab-btn-idx-face);
  color: var(--nab-btn-idx-ink);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition:
    background 0.2s var(--nab-btn-ease),
    color 0.2s var(--nab-btn-ease),
    transform 0.24s var(--nab-btn-spring);
}

/* Dark ink on the light emerald stop — white here measured only 2.5:1. */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:hover .nab-btn-idx {
  background: var(--nab-btn-win-1);
  color: var(--nab-btn-win-ink);
  transform: scale(1.08);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-chosen .nab-btn-idx,
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-selected .nab-btn-idx {
  /* lighten on the emerald face, like the tick chip — a dark-on-dark tint
     measured only 4.47:1 */
  background: rgba(255, 255, 255, 0.45);
  color: var(--nab-btn-win-ink);
  transform: none;
}

/* ================================================================ chosen / passed */

body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-selected,
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-chosen {
  border-color: transparent;
  background: linear-gradient(150deg, var(--nab-btn-win-1) 0%, var(--nab-btn-win-2) 100%);
  color: var(--nab-btn-win-ink);
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 3px var(--nab-btn-win-ring),
    0 10px 26px rgba(5, 150, 105, 0.32);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-selected::before,
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-chosen::before {
  opacity: 0;
}

/* the winner's tick, appended by chat-button-fx.js (SVG only → no text noise) */
body:is(.desktop-chat, .mobile-chat) .nab-btn-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  margin-inline-start: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--nab-btn-win-ink);
  animation: nabBtnTick 0.42s var(--nab-btn-spring) both;
}

@keyframes nabBtnTick {
  0%   { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* the pop — 0.6s of «yes, that one» */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-pop {
  animation: nabBtnPop 0.6s var(--nab-btn-spring) 1;
}

@keyframes nabBtnPop {
  0%   { transform: scale(0.965); }
  38%  { transform: scale(1.045); }
  70%  { transform: scale(0.992); }
  100% { transform: scale(1); }
}

/* siblings step back — the chosen one has to win visibly */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-passed {
  opacity: 0.42;
  filter: saturate(0.55);
  transform: scale(0.985);
  box-shadow: none;
}

/* An answered pack is a *record*, not a ruin: keep it readable.
   (replaces the old flat opacity:.5 on the whole component) */
body:is(.desktop-chat, .mobile-chat) .nabgol-component[data-committed="true"],
body:is(.desktop-chat, .mobile-chat) .nabgol-component.is-answered {
  opacity: 1;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-component button:disabled {
  cursor: default;
  opacity: 1;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-component button:disabled:not(.is-chosen):not(.is-selected) {
  opacity: 0.44;
  filter: saturate(0.6);
}

body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:disabled:hover {
  transform: none;
  box-shadow:
    inset 0 1px 0 var(--nab-btn-face-hi),
    var(--nab-btn-lift);
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:disabled::after {
  animation: none;
}

/* frozen older turns (nabgolFreezePriorInteractives) — the answer stays legible */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice.is-spent-pack,
body:is(.desktop-chat, .mobile-chat) .nabgol-component.is-spent-pack {
  opacity: 1;
}
body:is(.desktop-chat, .mobile-chat) .is-spent-pack .nabgol-choice-button.is-spent:not(.is-chosen):not(.is-selected) {
  opacity: 0.4;
}
body:is(.desktop-chat, .mobile-chat) .is-spent-pack .nabgol-choice-button.is-chosen,
body:is(.desktop-chat, .mobile-chat) .is-spent-pack .nabgol-choice-button.is-selected {
  opacity: 0.92;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 2px var(--nab-btn-win-ring);
}

/* ==================================================================== variants */

/* multi-select confirm — the one primary action of the pack */
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit {
  grid-column: 1 / -1;
  justify-content: center;
  text-align: center;
  margin-top: 2px;
  border-color: transparent;
  background: linear-gradient(150deg, var(--nab-btn-win-1) 0%, var(--nab-btn-win-2) 100%);
  color: var(--nab-btn-win-ink);
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 8px 22px rgba(5, 150, 105, 0.26);
}

/* An explicit `display` beats the `hidden` attribute, so an empty counter painted
   as a grey disc next to «تأیید انتخاب‌ها». Hidden has to mean hidden. */
body:is(.desktop-chat, .mobile-chat) .nab-btn-count[hidden] {
  display: none !important;
}

/* live «how many did I pick» badge, kept in sync by chat-components.js */
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit .nab-btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.4rem;
  block-size: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(1, 32, 20, 0.24);
  color: var(--nab-btn-win-ink);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit:disabled {
  border-color: var(--nab-btn-edge);
  background: linear-gradient(180deg, var(--nab-btn-face-1) 0%, var(--nab-btn-face-2) 100%);
  color: var(--nab-btn-ink-soft);
  box-shadow: inset 0 1px 0 var(--nab-btn-face-hi), var(--nab-btn-lift);
}

/* confirmation — first button leads, second one stays quiet */
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-primary {
  border-color: transparent;
  background: linear-gradient(150deg, var(--nab-btn-win-1) 0%, var(--nab-btn-win-2) 100%);
  color: var(--nab-btn-win-ink);
  font-weight: 800;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 8px 22px rgba(5, 150, 105, 0.26);
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-primary:hover {
  color: var(--nab-btn-win-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 14px 32px rgba(5, 150, 105, 0.36);
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-quiet {
  justify-content: center;
  font-weight: 600;
  color: var(--nab-btn-ink-soft);
}
body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-quiet:hover {
  color: var(--nab-btn-ink);
}

/* «+ گزینه دیگر…» — an invitation, so dashed but never scruffy */
body:is(.desktop-chat, .mobile-chat) .nabgol-other-option {
  grid-column: 1 / -1;
  justify-content: center;
  border-style: dashed;
  border-color: var(--nab-btn-edge);
  background: none;
  box-shadow: none;
  color: var(--nab-btn-ink-soft);
  font-weight: 600;
  min-height: 42px;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-other-option:hover {
  border-style: dashed;
  border-color: var(--nab-btn-edge-hover);
  background: none;
  box-shadow: none;
  color: var(--nab-btn-ink);
  transform: translateY(-1px);
}
body:is(.desktop-chat, .mobile-chat) .nabgol-other-option::after { content: none; }

/* one-tap action CTA (non-Live) — centred, primary weight */
body:is(.desktop-chat, .mobile-chat) .nabgol-action-button-cta:not(.nabgol-live-tutor-cta) {
  justify-content: center;
  text-align: center;
  border-color: transparent;
  background: linear-gradient(150deg, var(--nab-btn-win-1) 0%, var(--nab-btn-win-2) 100%);
  color: var(--nab-btn-win-ink);
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 8px 22px rgba(5, 150, 105, 0.26);
}
body:is(.desktop-chat, .mobile-chat) .nabgol-action-button-cta:not(.nabgol-live-tutor-cta):hover {
  color: var(--nab-btn-win-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 14px 32px rgba(5, 150, 105, 0.36);
}

/* Live-tutor CTA keeps its own pill; it only borrows the press feel */
body:is(.desktop-chat, .mobile-chat) .nabgol-live-tutor-cta {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
body:is(.desktop-chat, .mobile-chat) .nabgol-live-tutor-cta::after { content: none; }
body:is(.desktop-chat, .mobile-chat) .nabgol-live-tutor-cta:active:not(:disabled) {
  transform: translateY(1px) scale(0.975);
}

/* send button inside a robot text-input */
body:is(.desktop-chat, .mobile-chat) .nabgol-text-input-send {
  width: auto;
  min-width: 5.5rem;
  justify-content: center;
  border-color: transparent;
  background: linear-gradient(150deg, var(--nab-btn-win-1) 0%, var(--nab-btn-win-2) 100%);
  color: var(--nab-btn-win-ink);
  font-weight: 800;
  border-radius: var(--nab-btn-radius-sm);
}

/* ===================================================================== ripple */

body:is(.desktop-chat, .mobile-chat) .nab-btn-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 70%);
  transform: scale(0.16);
  opacity: 0.85;
  pointer-events: none;
  animation: nabBtnRipple 0.58s var(--nab-btn-ease) forwards;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .nab-btn-ripple {
  background: radial-gradient(circle, rgba(5, 150, 105, 0.30) 0%, rgba(5, 150, 105, 0) 70%);
}
body:is(.desktop-chat, .mobile-chat) .is-chosen .nab-btn-ripple,
body:is(.desktop-chat, .mobile-chat) .is-primary .nab-btn-ripple,
body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit .nab-btn-ripple {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
}

@keyframes nabBtnRipple {
  to { transform: scale(1); opacity: 0; }
}

/* ================================================================== entrance */

body:is(.desktop-chat, .mobile-chat) .nab-fx-enter .nabgol-choice-button,
body:is(.desktop-chat, .mobile-chat) .nab-fx-enter.nabgol-choice-button {
  animation: nabBtnIn 0.44s var(--nab-btn-spring) backwards;
  animation-delay: calc(min(var(--nab-i, 0), 9) * 48ms);
}

@keyframes nabBtnIn {
  0%   { opacity: 0; transform: translateY(9px) scale(0.965); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================================================================== mobile */

body.mobile-chat .nabgol-choice {
  gap: 9px;
}

body.mobile-chat .nabgol-choice-button,
body.mobile-chat .nabgol-multi-submit {
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border-radius: 16px;
  justify-content: center;
  text-align: center;
  font-size: 0.925rem;
  touch-action: manipulation;
}

body.mobile-chat .nabgol-choice-button:hover {
  /* phones have no hover; never leave a stuck lifted state after a tap */
  transform: none;
  box-shadow: inset 0 1px 0 var(--nab-btn-face-hi), var(--nab-btn-lift);
  border-color: var(--nab-btn-edge);
}
body.mobile-chat .nabgol-choice-button:hover::after { animation: none; }
body.mobile-chat .nabgol-choice-button.is-chosen:hover,
body.mobile-chat .nabgol-choice-button.is-selected:hover,
body.mobile-chat .nabgol-multi-submit:hover,
body.mobile-chat .nabgol-choice-button.is-primary:hover,
body.mobile-chat .nabgol-action-button-cta:not(.nabgol-live-tutor-cta):hover {
  border-color: transparent;
  background: linear-gradient(150deg, var(--nab-btn-win-1) 0%, var(--nab-btn-win-2) 100%);
  color: var(--nab-btn-win-ink);
}

body.mobile-chat .nabgol-choice-button:active:not(:disabled) {
  transform: scale(0.955);
}

@media (max-width: 380px) {
  body.mobile-chat .nabgol-choice-button,
  body.mobile-chat .nabgol-multi-submit {
    font-size: 0.885rem;
    padding: 0.65rem 0.7rem;
  }
}

/* ========================================================= reduced motion / print */

@media (prefers-reduced-motion: reduce) {
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button,
  body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit,
  body:is(.desktop-chat, .mobile-chat) .nabgol-text-input-send,
  body:is(.desktop-chat, .mobile-chat) .nab-btn-tick,
  body:is(.desktop-chat, .mobile-chat) .nab-btn-ripple,
  body:is(.desktop-chat, .mobile-chat) .nab-fx-enter .nabgol-choice-button {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:hover,
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button:active:not(:disabled) {
    transform: none;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button::before,
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button::after {
    display: none;
  }
}

@media print {
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button,
  body:is(.desktop-chat, .mobile-chat) .nabgol-multi-submit {
    box-shadow: none !important;
    background: none !important;
    border: 1px solid #94a3b8 !important;
    color: #0f172a !important;
    animation: none !important;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-chosen,
  body:is(.desktop-chat, .mobile-chat) .nabgol-choice-button.is-selected {
    border: 2px solid #047857 !important;
    font-weight: 800;
  }
}

/* ============================================================================
   ADOPTED FAMILIES — the same tokens for the chips that live outside the chat
   bubble: the dossier action row, the assistant follow-ups, and the mobile
   «open dossier» chip.

   These are app chrome rather than model output, so their compact pill geometry
   is deliberately kept — a dossier row is not an option list. What they inherit
   is the part that was actually broken:

     · they painted `rgba(255,255,255,0.04)` over an unknown panel and hard-coded
       `color: #e2e8f0`, so in the day theme they were light ink on a light panel.
       Opaque token surfaces make their contrast independent of the panel.
     · `min-height: 28px` is not a touch target. On a coarse pointer they now
       reach 40px, while a mouse keeps the dense 30px row.

   Geometry stays theirs; colour, focus and press feel come from here.
   ========================================================================== */

body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-chip, .nabgol-assistant-chip) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;

  min-height: 30px;
  border: 1px solid var(--nab-btn-edge);
  background: linear-gradient(180deg, var(--nab-btn-face-1) 0%, var(--nab-btn-face-2) 100%);
  color: var(--nab-btn-ink);
  box-shadow: inset 0 1px 0 var(--nab-btn-face-hi), 0 1px 2px rgba(0, 0, 0, 0.14);
  font-weight: 600;
  transition:
    transform 0.18s var(--nab-btn-spring),
    border-color 0.18s var(--nab-btn-ease),
    box-shadow 0.2s var(--nab-btn-ease),
    color 0.16s var(--nab-btn-ease);
}

body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-chip, .nabgol-assistant-chip):hover {
  border-color: var(--nab-btn-edge-hover);
  color: var(--nab-btn-ink-hover);
  transform: translateY(-1px);
}

body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-chip, .nabgol-assistant-chip):active:not(:disabled) {
  transform: scale(0.96);
  transition-duration: 0.06s;
}

body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-chip, .nabgol-assistant-chip):focus-visible {
  outline: 2px solid var(--nab-btn-win-2);
  outline-offset: 2px;
}

/* «is-active» / delivered state uses the one reward colour the platform has,
   instead of a second blue accent that meant the same thing. */
body:is(.desktop-chat, .mobile-chat) .nabgol-learner-chip.is-active {
  border-color: transparent;
  background: linear-gradient(150deg, var(--nab-btn-win-1) 0%, var(--nab-btn-win-2) 100%);
  color: var(--nab-btn-win-ink);
  font-weight: 800;
}

/* Dashed variants stay an invitation, but readable in both themes. */
body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-deliver-chip, .nabgol-assistant-chip--soft) {
  background: none;
  box-shadow: none;
  color: var(--nab-btn-ink-soft);
  opacity: 1;
}
body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-deliver-chip, .nabgol-assistant-chip--soft):hover {
  background: none;
  color: var(--nab-btn-ink);
}

/* A finger needs a bigger target than a cursor does.
   Keyed on body.mobile-chat as well as `pointer: coarse`: the phone shell is
   decided server-side and is always true on a phone, while a WebView can report
   a fine pointer. Relying on the media query alone left 30px targets on the
   mobile shell — measured, not assumed. */
body.mobile-chat :is(.nabgol-learner-chip, .nabgol-assistant-chip) {
  min-height: 40px;
  padding-inline: 12px;
  font-size: 0.82rem;
}
body.mobile-chat .nabgol-dossier-chip {
  min-height: 44px;
}

@media (pointer: coarse) {
  body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-chip, .nabgol-assistant-chip) {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 0.82rem;
  }
  body:is(.desktop-chat, .mobile-chat) .nabgol-dossier-chip {
    min-height: 44px;
  }
}

/* The mobile «open dossier» chip is emerald by design; give it the token emerald
   and an ink that measures, instead of #d1fae5 on a 12% wash. */
body.mobile-chat .nabgol-dossier-chip {
  border-color: transparent;
  background: linear-gradient(150deg, var(--nab-btn-win-1) 0%, var(--nab-btn-win-2) 100%);
  color: var(--nab-btn-win-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(5, 150, 105, 0.26);
}

@media (prefers-reduced-motion: reduce) {
  body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-chip, .nabgol-assistant-chip) {
    transition-duration: 0.01ms !important;
  }
  body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-chip, .nabgol-assistant-chip):hover,
  body:is(.desktop-chat, .mobile-chat) :is(.nabgol-learner-chip, .nabgol-assistant-chip):active {
    transform: none;
  }
}

/* ============================================================ starter chips

   The robot-configured first-touch buttons (#starterChips). Their geometry
   still lives in the two legacy sheets that own the empty-state layout
   (chat-flagship-polish.css, and chat-tutor-starter.css which starter_chips.php
   embeds INLINE — i.e. after every linked sheet, `!important` and all). Fighting
   that with a louder selector is how this file would rot, so the split is:

     legacy sheets  → box, size, order  (now reading --nab-chip-* for colour)
     this file      → the tokens, and every layer nobody else declares:
                      isolation, spotlight, sheen, focus ring, entrance, ripple

   Live keeps its own identity: chat-live-power.css owns the breathing pill, so
   the hero chip gets ripple + press feel only — no spotlight, no sheen, exactly
   how .nabgol-live-tutor-cta is treated above.                              */

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip {
  position: relative;
  /* Required, not decorative: the ripple and the spotlight sit at z-index:-1,
     and without a stacking context they would paint *behind* the chip. */
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* layer 1 — pointer spotlight (chat-button-fx.js feeds --nab-mx/--nab-my) */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip:not(.suggestion-chip--live-power)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    20rem 15rem at var(--nab-mx, 50%) var(--nab-my, 0%),
    var(--nab-chip-glow),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.26s var(--nab-btn-ease);
  pointer-events: none;
}

/* layer 2 — one-pass sheen, so a chip reads as glass rather than paint */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip:not(.suggestion-chip--live-power)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  z-index: -1;
  inset-inline-start: -60%;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 45%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip:not(.suggestion-chip--live-power):hover::before,
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip:not(.suggestion-chip--live-power):focus-visible::before {
  opacity: 1;
}

body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip:not(.suggestion-chip--live-power):hover::after {
  animation: nabBtnSheen 0.72s var(--nab-btn-ease) 1;
}

/* focus — visible on either surface, never on a mouse click */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip:focus-visible {
  outline: 2px solid var(--nab-btn-win-2);
  outline-offset: 3px;
}

/* the hero and the Live pill both sit on emerald: a white ripple, like .is-chosen */
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip[data-kind="teach"] .nab-btn-ripple,
body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip--live-power .nab-btn-ripple {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
}

/* entrance — the chips are dealt like cards, in DOM order (--nab-i from FX) */
body:is(.desktop-chat, .mobile-chat) #starterChips.nab-fx-enter .suggestion-chip {
  animation: nabBtnIn 0.44s var(--nab-btn-spring) backwards;
  animation-delay: calc(min(var(--nab-i, 0), 9) * 48ms);
}

@media (prefers-reduced-motion: reduce) {
  body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip,
  body:is(.desktop-chat, .mobile-chat) #starterChips.nab-fx-enter .suggestion-chip {
    animation: none !important;
  }
  body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip::before,
  body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip::after {
    display: none;
  }
}

@media print {
  body:is(.desktop-chat, .mobile-chat) #starterChips .suggestion-chip {
    box-shadow: none !important;
    background: none !important;
    border: 1px solid #94a3b8 !important;
    color: #0f172a !important;
    animation: none !important;
  }
}