/* ══ ★★ THE FLOATING TRIGGER (ported from CT, 2026-10-02) ════════════════════
   ⚠⚠ THE `.aisg-aov-fab` CLASS IS ON THE SELECTOR ON PURPOSE — DO NOT "SIMPLIFY"
   THIS TO `.aisg-aov-trigger` ALONE. In CT the first version wrote

       .aisg-aov-trigger { position: fixed; }

   and the HERO button rule (`.aisg-aov-trigger--hero`, same specificity, later in
   the file) won where it mattered. The FAB then rendered FULL-WIDTH across the
   desktop and invisibly covered the site menu — Playwright reported "intercepts
   pointer events", so the page's own nav stopped working.
   ★ A FIX BY SPECIFICITY, NOT BY REORDERING: `.aisg-aov-trigger.aisg-aov-fab`
   (two classes) outranks the single-class hero rule regardless of file order, so
   adding a hero style later can never resurrect the full-width bug.

   ⚠ BOTTOM-LEFT, NOT BOTTOM-RIGHT. The orb owns the right-hand corner; a second
   floating element there is the obstruction the visitor reported, moved rather than
   fixed. `left` is also the side that stays clear of a right-handed thumb. */
.aisg-aov-trigger.aisg-aov-fab {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9990;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--aisg-aov-text);
  background: color-mix(in srgb, var(--aisg-aov-ink) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--aisg-aov-text) 28%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  /* ⚠ `max-width` IS A BELT ON THE SAME BUG: even if a future rule wins the
     `display`, this element can never stretch across the viewport and swallow
     clicks meant for the page. */
  max-width: 52px;
}
.aisg-aov-trigger.aisg-aov-fab:hover,
.aisg-aov-trigger.aisg-aov-fab:focus-visible {
  background: color-mix(in srgb, var(--aisg-aov-ink) 100%, transparent);
  border-color: color-mix(in srgb, var(--aisg-aov-text) 50%, transparent);
}
@media (max-width: 480px) {
  /* A slightly larger tap target on a phone - the device this exists for. */
  .aisg-aov-trigger.aisg-aov-fab {
    width: 56px; height: 56px; max-width: 56px;
    font-size: 22px;
  }
}
.aisg-aov-fab-icon { display: block; }

/* The panel is inline, so the FAB must not sit on top of it once opened. */
.aisg-aov-fab[aria-hidden="true"] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════════
 * ★★ "HEAR THIS PAGE" — THE AUDIO TOUR PANEL
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * ── WHY IT HAS ITS OWN PANEL, OFF THE ORB ─────────────────────────────────────
 * The first build put the button on the orb panel and painted the tour's lines
 * into HER caption. The visitor heard the result:
 *     "the discussion between two people and the hostess are kind of obstructing
 *      each other"
 * Two features were sharing one text box and one audio channel. The tour now has
 * its own panel, its own caption and its own controls, and the ONLY thing the two
 * share is a rule: **whoever starts speaking stops the other.**
 *
 * ── WHY IT IS INLINE, NOT FLOATING ────────────────────────────────────────────
 * A second floating element would compete with the orb for the same corner — the
 * same obstruction, moved. The tour is ABOUT THIS PAGE, so it lives IN the page:
 * it opens directly under the hero, where the visitor clicked.
 *
 * ⚠ ON A PHONE IT TAKES THE SCREEN (<=480px). Caption plus controls cannot fit in
 * a hero strip, and a tall inline block on a phone is the *"the size of the
 * caption window is too high"* fault reported twice already.
 *
 * ⚠ IT IS MOUNTED LAZILY. Nothing exists until the first click, so a visitor who
 * never uses it sees no extra element — the "clean page until tap" rule.
 *
 * ★ PORTED FROM `ct-audio-overview.css` (ConfidenceTalk v2026.09.26.4).
 * Prefixes swapped ct- → aisg-. ⚠ THE TOKENS NOW FALL BACK TO AISG's OWN VARIABLES
 * — the tour may render on a page WITHOUT the orb, so it must not depend on
 * `--aisg-orb-*` being defined. Hardcoded colours would fail a light palette.
 */

.aisg-aov {
  /* ★ THE THEME'S OWN TOKENS, WITH FALLBACKS. The tour may render on a page
     without the orb, so it must not depend on `--aisg-orb-*` being defined. */
  --aisg-aov-ink: var(--aisg-orb-ink, #0e1422);
  --aisg-aov-text: var(--aisg-orb-text, #f4f4f5);
  max-width: 760px;
  margin: 0 auto 18px;
  padding: 0 20px;
}

.aisg-aov-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.aisg-aov-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--aisg-aov-text);
  opacity: .92;
}

.aisg-aov-icon { font-size: 14px; }

/* The controls sit at the far end, away from the reading line. */
.aisg-aov-stop, .aisg-aov-close, .aisg-aov-cc {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--aisg-aov-text);
  background: color-mix(in srgb, var(--aisg-aov-text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--aisg-aov-text) 24%, transparent);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.aisg-aov-close {
  margin-left: auto;         /* pushes BOTH controls to the right */
  padding: 6px 10px;
  font-size: 15px;
}
/* ⚠ [CC] TAKES THE `auto` MARGIN, NOT `.stop` — otherwise the caption toggle would
   sit BEFORE the Stop button and the header order would read Stop, [CC], X. The
   `[CC]`-then-close grouping is the one visitors already expect from video. */
.aisg-aov-cc { margin-left: auto; }
.aisg-aov-stop { margin-left: 6px; }
.aisg-aov-close { margin-left: 6px; }

.aisg-aov-stop:hover, .aisg-aov-close:hover, .aisg-aov-cc:hover,
.aisg-aov-stop:focus-visible, .aisg-aov-close:focus-visible, .aisg-aov-cc:focus-visible {
  background: color-mix(in srgb, var(--aisg-aov-text) 18%, transparent);
  outline: none;
}

/* ── THE READING SURFACE ──────────────────────────────────────────────────────
 * ⚠ IT SCROLLS INTERNALLY, WHICH IS THE POINT. A long tour must not push the
 * whole page down; capping it here is the same discipline the orb's caption uses,
 * and it is what keeps the hero from jumping on a phone. */
.aisg-aov-caption {
  background: color-mix(in srgb, var(--aisg-aov-ink) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--aisg-aov-text) 14%, transparent);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 58px;
  max-height: 34vh;
  overflow-y: auto;
  color: var(--aisg-aov-text);
  font-size: 15px;
  line-height: 1.6;
}

/* ══ ★★ THE CAPTION IS COLLAPSED BY DEFAULT (ported 2026-10-02) ══════════════
   ⚠ MEASURED IN CT, AND THIS IS WHY THE TOGGLE EXISTS RATHER THAN A VISIBLE BOX:
   with the caption always shown the panel was 115px on DESKTOP and 844px — the
   ENTIRE SCREEN — on a phone, because a line of prose wraps into a tall black box.
   The visitor said "it covers everything".
   ★ THE COLLAPSE IS CSS `display`, NOT A REMOVED ELEMENT: the caption is still in
   the DOM and still updated while hidden, so opening [CC] mid-sentence shows the
   CURRENT line rather than starting from empty. ⚠ Hiding it by clearing its text
   would break the read-along for anyone who opens it late. */
.aisg-aov-caption { display: none; }
.aisg-aov.aisg-aov-cc-on .aisg-aov-caption { display: block; }

/* ⚠ THE TOGGLE IS ALWAYS VISIBLE, NEVER HOVER-ONLY. A touch device has no hover,
   so a hover-revealed control would be unreachable on a phone — the exact device
   the tall caption was reported on. */
.aisg-aov-cc {
  margin-left: auto;
  min-width: 42px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
/* ★ AND IT READS AS "ON" WHEN THE WORDS ARE SHOWING, so the control's state is
   legible without relying on the panel's height alone. */
.aisg-aov.aisg-aov-cc-on .aisg-aov-cc {
  background: color-mix(in srgb, var(--aisg-aov-text) 22%, transparent);
  border-color: color-mix(in srgb, var(--aisg-aov-text) 40%, transparent);
}

/* While the script is being written there is nothing to scroll. */
.aisg-aov[data-aisg-aov-state="writing"] .aisg-aov-caption { opacity: .82; }

/* Once it has finished, the surface steps back so it stops competing with the
   page it just described. */
.aisg-aov[data-aisg-aov-state="done"] .aisg-aov-caption { opacity: .9; }

.aisg-aov[data-aisg-aov-state="error"] .aisg-aov-caption {
  border-color: color-mix(in srgb, #ff8f7a 55%, transparent);
}

/* ── PHONE: THE FULL-SCREEN STAGE ─────────────────────────────────────────────
 * The visitor's own requested pattern for the orb ("become full screen for mobile
 * ... minimize - sign on the corner"), applied to the tour.
 *
 * ⚠⚠ BUT IT IS `min-height`, NOT `height`-BY-INSET, AND `inset: 0` WAS WRONG
 * (fixed 2026-10-02). MEASURED: with the caption collapsed by default (see the
 * [CC] toggle above) `inset: 0` painted a FIXED 844px panel whose only visible
 * content was a 49px header — 795px of empty black over the whole phone. That is
 * exactly the failure CT's visitor reported as *"it covers everything"*, and it
 * appeared HERE the moment the caption stopped filling the space.
 *
 * ★ THE STAGE IS STILL THE VISITOR'S PATTERN — it still fills the phone WHEN THERE
 * IS CONTENT TO FILL IT, which is the case they actually asked about. It simply
 * refuses to be taller than its own contents, so a collapsed tour is a 49px bar
 * pinned to the bottom and an opened one grows to the full stage.
 *
 * ⚠ `top: auto` IS THE WHOLE FIX. With `inset: 0` the panel is anchored top AND
 * bottom; releasing `top` lets `bottom` + the content height decide the size. */
@media (max-width: 480px) {
  .aisg-aov {
    position: fixed;
    top: auto;                 /* ← the fix: do not anchor the top edge */
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 100vh;         /* a long tour still uses the whole stage */
    z-index: 99998;            /* above the page, below the orb (99999) */
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--aisg-aov-ink);
    display: flex;
    flex-direction: column;
    /* ⚠ ROUNDED TOPS, because the bar now sits ON the page rather than replacing
       it — a square edge over content reads as a rendering fault. */
    border-radius: 16px 16px 0 0;
  }
  /* ★ AND IT STILL GOES FULL-STAGE THE MOMENT THE WORDS ARE SHOWN. The visitor's
     requested pattern is preserved exactly where it makes sense: with the caption
     open the panel is a full-screen reading surface again. */
  .aisg-aov.aisg-aov-cc-on {
    top: 0;
    max-height: none;
    border-radius: 0;
  }
  .aisg-aov-head {
    padding: max(env(safe-area-inset-top, 0px), 10px) 14px 10px;
    margin: 0;
  }
  .aisg-aov-caption {
    flex: 1 1 auto;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    font-size: 17px;
    line-height: 1.55;
    padding: 16px 18px;
  }
}


/* ── THE TRIGGER BUTTON (hero + the tour page) ────────────────────────────────
 *
 * ★ IT IS A GHOST, DELIBERATELY — A SECONDARY CONTROL, NOT A THIRD CTA.
 * The hero's primary pair is the money path and must not be diluted. A ghost reads
 * as an invitation: here is something else you can do.
 *
 * ⚠ IT USES FALLBACKABLE TOKENS. The tour renders on pages WITHOUT the orb, so
 * `--aisg-orb-*` may be undefined; and a hardcoded light colour would vanish on a
 * light palette's near-black ink. */

/* ★★ THE BUTTON OUT-STACKS THE HERO OVERLAY. `position: relative; z-index: 3`.
 * Without it the button is **visible and unclickable** — measured in Playwright as
 * `intercepts pointer events`. This is LOCK 4 of the port. */
.aisg-hero-aov-bar--hero {
  /* ★★ A NORMAL IN-FLOW CHILD OF THE HERO'S TEXT COLUMN. Every other child of the
   * hero is `position:absolute`; an absolutely positioned button is what put it in
   * the wrong place twice (overlapping the CTAs). As a normal block sibling it
   * shares the column's spacing and CANNOT overlap — two block siblings in normal
   * flow cannot overlap.
   *
   * ⚠ DO NOT re-add `position:absolute` or a `left`/`bottom` here. Absolute
   * positioning is what put it in the wrong place. */
  position: relative;        /* creates the stacking context the z-index needs */
  z-index: 3;                /* ★ LOCK 4 — out-stacks the hero overlay */
  display: block;
  margin: 10px 0 0 0;
  padding: 0;
  /* ★ LOCK 5 — the button sits in the HERO'S COLUMN, not centred on the page.
   * `max-width: 550px; padding: 0 24px; text-align: left` is the same column as
   * the slide text. Centring it against the page is the reported bug. */
  max-width: 550px;
}

/* On a phone the copy goes edge-to-edge already; just tighten the gap. */
@media (max-width: 480px) {
  .aisg-hero-aov-bar--hero {
    margin-top: 8px;
    max-width: none;
  }
}

.aisg-aov-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  /* Transparent fill + a bright hairline: present, but clearly not the CTA. */
  background: color-mix(in srgb, #ffffff 8%, transparent);
  color: inherit;
  border: 1px solid color-mix(in srgb, #ffffff 34%, transparent);
  border-radius: 999px;
  padding: 10px 18px 10px 15px;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}

/* ★★ THE HERO VARIANT IS DELIBERATELY MORE SOLID.
 *
 * REPORTED: "hard to see". MEASURED: the base trigger is an 8% white fill with a
 * 34% hairline — which reads as a faint ghost on a DARK HERO PHOTOGRAPH, which is
 * exactly where this one sits. It was legible on the white tour page and invisible
 * on the hero, and only the hero has a photo behind it.
 *
 * ⚠ IT MUST STILL NOT COMPETE WITH THE PRIMARY CTA. So it gains a REAL surface and
 * a real edge, but stays visually secondary: no brand fill, a smaller type size
 * than the primary button, and a translucent backdrop so the photo shows through. */
.aisg-aov-trigger--hero {
  background: color-mix(in srgb, #0b1020 62%, transparent);
  color: #f4f7ff;
  border: 1px solid color-mix(in srgb, #ffffff 52%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 9px 17px 9px 14px;
  box-shadow: 0 2px 10px color-mix(in srgb, #000000 40%, transparent);
  text-shadow: 0 1px 2px color-mix(in srgb, #000000 45%, transparent);
}

.aisg-aov-trigger--hero:hover,
.aisg-aov-trigger--hero:focus-visible {
  background: color-mix(in srgb, #0b1020 78%, transparent);
  border-color: color-mix(in srgb, #ffffff 80%, transparent);
}

.aisg-aov-trigger:hover,
.aisg-aov-trigger:focus-visible {
  background: color-mix(in srgb, #ffffff 16%, transparent);
  border-color: color-mix(in srgb, #ffffff 55%, transparent);
  outline: none;
}

/* A visible ring, because the button is reachable by keyboard and a ghost fill
   alone is easy to lose against a photo hero. */
.aisg-aov-trigger:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, #ffffff 30%, transparent);
}

.aisg-aov-trigger:active { transform: translateY(1px); }

.aisg-aov-trigger-icon { font-size: 15px; }

/* On the tour's OWN page the section supplies the text colour, so the button
   follows it rather than assuming a dark hero behind it. */
.aisg-aov-page .aisg-aov-trigger {
  background: color-mix(in srgb, currentColor 7%, transparent);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.aisg-aov-page .aisg-aov-trigger:hover,
.aisg-aov-page .aisg-aov-trigger:focus-visible {
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-color: color-mix(in srgb, currentColor 48%, transparent);
}