/* ============================================================
   The website assistant — a panel, not a chat window.

   It sits above the WhatsApp button rather than beside it: two round buttons
   at the same height on a phone is a thumb hitting the wrong one. The panel
   is sized to the options it shows and never covers the whole screen on
   desktop, because a visitor reading a page should not lose it to ask a
   question about it.

   Every colour here is one of the site's own theme tokens — --bg-card, --fg,
   --fg-2, --border, --accent — so the panel follows light and dark with the
   page around it. It carries no literal of its own except the ink on the gold,
   which is the one pairing that must not move: --accent is a light gold in
   both themes, and dark ink is what stays readable on it.
============================================================ */

#sa-fab {
  position: fixed; bottom: calc(6.6rem + var(--sa-lift, 0px)); right: 2rem; z-index: 201;
  width: 54px; height: 54px; border: none; padding: 0;
  background: var(--accent); color: #12161B;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,.18));
  transition: transform .2s ease, box-shadow .2s ease;
}
#sa-fab:hover { transform: scale(1.08) translateY(-2px); }
#sa-fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rtl #sa-fab { right: auto; left: 2rem; }

/* The unread dot: shown once, so the button says it does something. */
#sa-fab[data-new="1"]::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--accent);
}
.rtl #sa-fab[data-new="1"]::after { right: auto; left: 4px; }

#sa-panel {
  position: fixed; bottom: calc(6.6rem + var(--sa-lift, 0px)); right: 2rem; z-index: 191;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 9rem));
  display: none; flex-direction: column;
  background: var(--bg-card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,.2));
  overflow: hidden;
}
/* Open, it sits above the consent bar as well as the page: the bar is not modal, and a
   panel a visitor opened on purpose should not be the thing they cannot reach. It drops
   back under when closed, so the bar is never hidden by something nobody asked for. */
#sa-panel.is-open { display: flex; z-index: 201; }
.rtl #sa-panel { right: auto; left: 2rem; }

.sa-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.sa-head h2 { margin: 0; font-size: .95rem; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.sa-head .sa-sub { display: block; font-size: .68rem; font-weight: 400; color: var(--fg-muted); }
.sa-x {
  background: none; border: none; color: var(--fg-muted); cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px; font-size: 1.1rem; line-height: 1;
}
.sa-x:hover { background: var(--bg); color: var(--fg); }

.sa-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }

.sa-msg { font-size: .82rem; line-height: 1.65; max-width: 100%; }
.sa-msg-bot { color: var(--fg); }
.sa-msg-you {
  align-self: flex-end; background: var(--accent); color: #12161B;
  padding: .5rem .8rem; border-radius: 12px 12px 3px 12px; max-width: 85%;
}
.rtl .sa-msg-you { align-self: flex-start; border-radius: 12px 12px 12px 3px; }

.sa-opts { display: flex; flex-direction: column; gap: .4rem; }
.sa-opt {
  text-align: start; width: 100%;
  padding: .55rem .8rem; font-size: .8rem; font-family: inherit; line-height: 1.5;
  color: var(--fg);
  border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sa-opt:hover { border-color: var(--accent); }

.sa-link {
  display: inline-block; margin-top: .15rem;
  font-size: .78rem; font-weight: 600; color: var(--accent-text, var(--accent));
  text-decoration: underline; text-underline-offset: 3px;
}

/* The way back, always present once you are one level down. */
.sa-back {
  align-self: flex-start; background: none; border: none; cursor: pointer;
  font: inherit; font-size: .72rem; color: var(--fg-muted); padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.sa-back:hover { color: var(--fg); }

.sa-foot { border-top: 1px solid var(--border); padding: .7rem .8rem; }
.sa-ask { display: flex; gap: .4rem; align-items: center; }
.sa-ask input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: .8rem;
  padding: .5rem .7rem; border-radius: 8px;
  border: 1px solid var(--border-2, var(--border));
  background: var(--bg-card); color: var(--fg);
}
.sa-ask input::placeholder { color: var(--fg-subtle); }
.sa-ask button {
  flex: 0 0 auto; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
  padding: .5rem .85rem; border-radius: 8px; border: none;
  background: var(--accent); color: #12161B;
}
.sa-ask button[disabled] { opacity: .5; cursor: not-allowed; }
.sa-note { margin: .4rem 0 0; font-size: .68rem; color: var(--fg-muted); line-height: 1.5; }

/* The handover: the one thing that should look like a decision. */
.sa-handover {
  display: inline-block; align-self: flex-start; margin-top: .3rem;
  padding: .5rem .9rem; border-radius: 9px;
  background: var(--accent); color: #12161B;
  font-size: .78rem; font-weight: 700; text-decoration: none; border: none;
  cursor: pointer; font-family: inherit;
}
.sa-handover[disabled] { opacity: .55; cursor: default; }

.sa-typing { display: inline-flex; gap: .25rem; align-items: center; padding: .2rem 0; }
.sa-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-subtle);
  animation: sa-blink 1.2s infinite;
}
.sa-typing i:nth-child(2) { animation-delay: .18s }
.sa-typing i:nth-child(3) { animation-delay: .36s }
@keyframes sa-blink { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .sa-typing i { animation: none; opacity: .6 } }

/* A tint, not a second surface colour.

   On this site --bg-2 and --bg-card are both pure white in the light theme, so a head and a
   foot painted with them sat invisibly on the panel. The tint is mixed from the theme's own
   text colour over its own card, which darkens on light and lightens on dark by the same
   amount — one rule, right in both. --bg-2 stays as the fallback for a browser without
   color-mix, where the borders still do the separating. */
.sa-head, .sa-foot, .sa-opt { background: var(--bg-2); }
@supports (background: color-mix(in srgb, red 5%, white)) {
  .sa-head, .sa-foot { background: color-mix(in srgb, var(--fg) 5%, var(--bg-card)); }
  .sa-opt            { background: color-mix(in srgb, var(--fg) 4%, var(--bg-card)); }
  .sa-opt:hover      { background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); }
}

@media (max-width: 560px) {
  #sa-panel {
    right: .5rem; left: .5rem; bottom: calc(.5rem + var(--sa-lift, 0px)); width: auto;
    max-height: min(32rem, calc(100vh - 2rem - var(--sa-lift, 0px)));
  }
  .rtl #sa-panel { right: .5rem; left: .5rem; }
  #sa-fab { bottom: calc(6rem + var(--sa-lift, 0px)); right: 1.1rem; }
  .rtl #sa-fab { right: auto; left: 1.1rem; }
}

/* ============================================================
   The staff side. Three tabs on one page, because what the
   assistant says, what it was asked and how it behaves are
   one job done in one sitting.
============================================================ */
/* The label and the question are the primary text of their rows, so each states its colour
   rather than inheriting the table's muted default — which in the light theme put them at
   about 3.5:1 on white, faint for the one thing the row is about. */
.sa-name { font-weight: 600; color: var(--a-fg); }
.sa-name.is-child { font-weight: 400; color: var(--a-fg-2); padding-inline-start: 1.1rem; position: relative; }
.sa-name.is-child::before {
  content: ''; position: absolute; inset-inline-start: .25rem; top: .55em;
  width: .5rem; height: 1px; background: var(--a-border, currentColor); opacity: .6;
}
.sa-ans { color: var(--a-fg-2); font-size: var(--fs-xs); line-height: 1.5; }
.sa-q { display: block; max-width: 44ch; line-height: 1.5; color: var(--a-fg); }
.sa-acts-h { text-align: start; }
.sa-acts { white-space: normal; min-width: 11rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-start; }
.sa-inline { display: inline-flex; }
.sa-edit > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.sa-edit > summary::-webkit-details-marker { display: none; }
.sa-form { margin-top: .6rem; padding: .8rem; border: 1px solid var(--a-border); border-radius: 10px; background: var(--a-bg); }
.sa-new { margin-top: 1rem; }
.sa-stats { margin: 0 0 1rem; font-size: var(--fs-sm); color: var(--a-fg-2); }
.sa-stats b { color: var(--a-fg); font-variant-numeric: tabular-nums; }
/* Removing is not the loudest thing a row can offer: it is quiet until hovered. */
.sa-del { background: transparent; color: var(--a-fg-2); border: 1px solid var(--a-border); }
.sa-del:hover { color: var(--a-danger, #C0392B); border-color: currentColor; background: transparent; }

/* A settled group is history: readable, and no longer offering anything. */
.sa-opts.is-past .sa-opt, .sa-back.is-past, .sa-handover.is-past {
  opacity: .45; cursor: default; pointer-events: none;
}
.sa-opts.is-past .sa-opt:hover { border-color: var(--border); }

/* ---- the preview on the staff page ----
   The same panel, placed in the page instead of fixed to the corner, so a topic can be read
   the way a visitor reads it without publishing it to find out. Only the placement changes;
   every colour and rule above still applies. */
.sa-preview { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--a-border); }
.sa-preview-head { margin-bottom: .8rem; }
.sa-preview .s-hint { display: block; max-width: 62ch; }
#sa-fab.sa-fab-inline {
  position: static; width: auto; height: auto; border-radius: 10px;
  padding: .5rem .9rem; gap: .45rem; font: inherit; font-size: .82rem; font-weight: 600;
  background: var(--a-accent); color: var(--a-bg); box-shadow: none;
}
#sa-fab.sa-fab-inline:hover { transform: none; filter: brightness(1.06); }
#sa-fab.sa-fab-inline svg { width: 18px; height: 18px; }
#sa-fab.sa-fab-inline::after { content: none; }
#sa-panel.sa-panel-inline {
  position: static; width: min(23rem, 100%); max-height: 30rem; margin-top: .8rem;
  background: var(--a-bg); color: var(--a-fg);
  border: 1px solid var(--a-border); box-shadow: none;
}
/* Inside the staff panel the public tokens do not exist, so the same parts read from the
   admin set. The markup and the script are unchanged. */
.sa-panel-inline .sa-head { background: var(--a-bg-2); color: var(--a-fg); border-bottom-color: var(--a-border); }
.sa-panel-inline .sa-head .sa-sub, .sa-panel-inline .sa-back, .sa-panel-inline .sa-note { color: var(--a-fg-3); }
.sa-panel-inline .sa-x { color: var(--a-fg-3); }
.sa-panel-inline .sa-x:hover { background: var(--a-bg-3, var(--a-bg-2)); color: var(--a-fg); }
.sa-panel-inline .sa-msg-bot { color: var(--a-fg); }
/* The panel's accent pair is the panel's own, not a guess: the admin theme already decides
   what is readable on its gold, and in the light theme that gold is a deep #946510 where
   dark ink would fail. */
.sa-panel-inline .sa-msg-you, .sa-panel-inline .sa-ask button, .sa-panel-inline .sa-handover {
  background: var(--a-accent); color: var(--a-bg);
}
.sa-panel-inline .sa-opt { background: var(--a-bg-2); color: var(--a-fg); border-color: var(--a-border); }
.sa-panel-inline .sa-opt:hover { border-color: var(--a-accent); }
.sa-panel-inline .sa-link { color: var(--a-accent); }
.sa-panel-inline .sa-foot { background: var(--a-bg-2); border-top-color: var(--a-border); }
.sa-panel-inline .sa-ask input { background: var(--a-bg); color: var(--a-fg); border-color: var(--a-border); }
.sa-panel-inline .sa-typing i { background: var(--a-fg-3); }

/* The hidden attribute loses to a class that sets display.

   .msg-card is display:flex, which outranks the browser's own [hidden]{display:none}, so
   switching tabs highlighted the new one and left the old pane on screen. Stated here rather
   than by giving the panes a class of their own, because every tabbed .msg-card has this. */
.sa-tab[hidden] { display: none !important; }
/* A topic that reads the catalog says so where a hand-written one shows its link. */
.sa-src { font-size: var(--fs-xs); color: var(--a-fg-2); }
/* A drafted topic shows the question it was drafted for: the reviewer is checking the answer
   against what was actually asked, not against the label somebody chose for it. */
.sa-from { display: block; max-width: 44ch; line-height: 1.5; }
.sa-from q { font-style: italic; }

/* ============================================================
   How the panel moves.

   Four sets, chosen in Settings and applied as a class on the panel, so changing
   the portal's mind is a dropdown rather than a drop. The names are the ones the
   motion was picked by: calm, lift, unfold, none.

   Two rules hold across all of them. A visitor whose system asks for no animation
   gets none — the block at the end turns the lot off, and it is last so it wins
   whatever a set declares. And the typing dots are not in here: they are how the
   panel says it is thinking rather than decoration, so they run in every set.
============================================================ */

/* The stagger index each option carries, so a list arrives in order rather than
   all at once. Set by the script; nothing happens without it. */
.sa-opts .sa-opt { --sa-i: 0; }

/* ── calm: a short fade and a small rise. The panel barely moves. ── */
.sa-motion-calm.is-open { animation: sa-calm-in .22s ease-out both; }
.sa-motion-calm .sa-msg,
.sa-motion-calm .sa-opts,
.sa-motion-calm .sa-link,
.sa-motion-calm .sa-handover { animation: sa-calm-up .2s ease-out both; }
@keyframes sa-calm-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@keyframes sa-calm-up { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }

/* ── lift: the panel springs from the button it came out of. ── */
.sa-motion-lift.is-open { transform-origin: 100% 100%; animation: sa-lift-in .34s cubic-bezier(.2,1.25,.4,1) both; }
.rtl .sa-motion-lift.is-open { transform-origin: 0 100%; }
.sa-motion-lift .sa-msg,
.sa-motion-lift .sa-link,
.sa-motion-lift .sa-handover { animation: sa-lift-up .28s cubic-bezier(.2,1.1,.4,1) both; }
.sa-motion-lift .sa-opt { animation: sa-lift-up .26s cubic-bezier(.2,1.1,.4,1) both; animation-delay: calc(var(--sa-i) * 55ms); }
@keyframes sa-lift-in { from { opacity: 0; transform: scale(.9) translateY(14px) } to { opacity: 1; transform: none } }
@keyframes sa-lift-up { from { opacity: 0; transform: translateY(9px) scale(.98) } to { opacity: 1; transform: none } }

/* ── unfold: the panel opens downward, each option unrolls from its own top edge. ── */
.sa-motion-unfold.is-open { animation: sa-unfold-in .3s ease-out both; }
.sa-motion-unfold .sa-msg,
.sa-motion-unfold .sa-link,
.sa-motion-unfold .sa-handover { animation: sa-unfold-row .26s ease-out both; }
.sa-motion-unfold .sa-opt { animation: sa-unfold-row .24s ease-out both; animation-delay: calc(var(--sa-i) * 70ms); }
@keyframes sa-unfold-in { from { opacity: 0; transform: scaleY(.88); transform-origin: 50% 0 } to { opacity: 1; transform: none } }
@keyframes sa-unfold-row { from { opacity: 0; transform: scaleY(.6); transform-origin: 50% 0 } to { opacity: 1; transform: none } }

/* ── none: nothing moves. A real choice, not an omission. ── */

/* Last, so it wins whatever a set above declares. */
@media (prefers-reduced-motion: reduce) {
  #sa-panel, #sa-panel * { animation: none !important; transition: none !important; }
}

/* ---- selection on the topics list ---- */
.sa-tick { width: 2.2rem; text-align: center; }
.sa-tick input { cursor: pointer; }
.sa-bulkbar {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin-top: .8rem; padding: .6rem .8rem;
  background: var(--a-bg-2); border: 1px solid var(--a-border); border-radius: 10px;
}
.sa-bulkbar[hidden] { display: none; }
.sa-bulkn { font-size: var(--fs-sm); color: var(--a-fg-2); margin-inline-end: .4rem; }
.sa-bulkn span { font-weight: 700; color: var(--a-fg); font-variant-numeric: tabular-nums; }

/* What the seed last did — stated on its own page, not left in a cron log. */
.sa-seedstate { padding: .7rem .85rem; background: var(--a-bg-2); border: 1px solid var(--a-border); border-radius: 10px; }
.sa-seedline { margin: 0 0 .3rem; font-size: var(--fs-sm); color: var(--a-fg-2); line-height: 1.6; }
.sa-seedline:last-child { margin-bottom: 0; }
.sa-seedline b { color: var(--a-fg); font-variant-numeric: tabular-nums; }
.sa-seedsay { color: var(--a-fg); }
.sa-seedrun { align-items: center; gap: .5rem; flex-wrap: wrap; }

/* The way from "fifteen are waiting" to the fifteen themselves. */
.sa-draftbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .8rem; }
.sa-draftbar .s-hint { margin: 0; }