/* ============================================================
   cai_guided.css — Group 49 (F3) + Group 59 (re-skin)
   Guided-first-question spotlight overlay for AI Comprehension.
   Sibling of cai_tutorial.css. Namespace `.cai-g-`.

   Group 59 — re-skinned to match the Group 50/51 book-page
   vocabulary on the surface beneath it: cream paper, 4px navy
   border, chunky 4px-offset shadow, amber accents, gold
   bookmark-style action button. The kid should feel the F3
   spotlight belongs to the same book they're reading, not a
   separate UI layer.
   ============================================================ */

/* ---- Dim-everything backdrop ----
   Implemented via box-shadow on the spotlight target itself: an
   enormous shadow on a positioned element creates the "outside
   the cutout" darkness without needing a stacking div. The kid
   can still see the highlighted element naturally — the rest of
   the page is dimmed. Gold halo already matched the book
   vocabulary in Group 49 — kept unchanged in Group 59. */

.cai-g-spotlit {
    position: relative !important;
    z-index: 99998 !important;
    box-shadow:
        0 0 0 6px rgba(252, 211, 77, 0.85),       /* gold halo */
        0 0 0 9999px rgba(15, 23, 42, 0.78) !important; /* huge dim */
    border-radius: 14px !important;
    transition: box-shadow 280ms ease;
    animation: cai-g-pulse 1.6s ease-in-out infinite;
}
@keyframes cai-g-pulse {
    0%, 100% { box-shadow:
        0 0 0 6px  rgba(252, 211, 77, 0.85),
        0 0 0 9999px rgba(15, 23, 42, 0.78); }
    50%      { box-shadow:
        0 0 0 10px rgba(252, 211, 77, 1),
        0 0 0 9999px rgba(15, 23, 42, 0.82); }
}

/* The coach bubble — positioned absolutely by JS adjacent to the
   highlighted element. SVG arrow sits inside it pointing at the
   spotlight.

   Group 59 — book vocabulary:
   - Cream paper background (`#fefbf3` matches .qa-book-page)
   - 4px navy border (`#1e293b` matches Group 50)
   - Chunky 4px offset shadow (matches .qa-question-card)
   - Andika body font (already book-correct)
   No more indigo border + glow shadow. */
.cai-g-bubble {
    position: fixed;
    z-index: 99999;
    background: #fefbf3;
    border: 4px solid #1e293b;
    border-radius: 18px;
    padding: 16px 20px 12px;
    box-shadow: 4px 4px 0 #1e293b, 0 12px 28px rgba(15, 23, 42, 0.25);
    min-width: 260px;
    max-width: 360px;
    font-family: 'Andika', 'Comic Neue', -apple-system, system-ui, sans-serif;
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 240ms ease, transform 240ms ease;
}
.cai-g-bubble.show {
    opacity: 1;
    transform: scale(1);
}

/* Step pill — amber stamp matching .qa-question-pin's vocabulary
   but in amber (gold-question-card tone) rather than red so the
   F3 pill reads as "guide" not "alert". */
.cai-g-bubble-step {
    display: inline-block;
    background: #fef3c7;
    color: #78350f;
    border: 3px solid #1e293b;
    box-shadow: 2px 2px 0 #1e293b;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 10px;
    font-family: 'Lexend Mega', sans-serif;
}

.cai-g-bubble-msg {
    font-family: 'Andika', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #1e293b;
    line-height: 1.35;
    margin-bottom: 14px;
}

.cai-g-bubble-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Skip — quiet, unframed text button. Reads as "I'm out" without
   competing with the gold "Got it!" affordance. */
.cai-g-skip {
    background: transparent;
    border: 0;
    color: #6b7280;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Lexend Mega', sans-serif;
}
.cai-g-skip:hover { color: #1e293b; }

/* Got it — gold-bookmark vocabulary, matching the submit
   button on the page underneath. Chunky navy border, offset
   shadow, gold gradient. When the kid taps it, the affordance
   should feel like the same family as the page's primary
   action. */
.cai-g-next {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
    border: 3px solid #1e293b;
    border-radius: 14px;
    box-shadow: 3px 3px 0 #1e293b;
    padding: 10px 22px;
    font-family: 'Lexend Mega', sans-serif;
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.cai-g-next:hover { transform: translateY(-2px); box-shadow: 3px 5px 0 #1e293b; }
.cai-g-next:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1e293b; }
.cai-g-next.wait {
    /* Step 3 — "wait for target click", no advance button shown */
    display: none;
}

/* Eli mascot at the corner of the bubble — same fox emoji,
   now sitting on the cream-paper bubble's navy corner. */
.cai-g-eli {
    position: absolute;
    top: -22px;
    left: -14px;
    font-size: 40px;
    line-height: 1;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
}

/* SVG arrow — pointing at the spotlit element. Group 59:
   recolour navy to match the bubble's border so the whole
   F3 chrome reads as one cohesive ink. */
.cai-g-arrow {
    position: fixed;
    z-index: 99999;
    width: 64px;
    height: 64px;
    color: #1e293b;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    animation: cai-g-arrow-bob 1.2s ease-in-out infinite;
}
@keyframes cai-g-arrow-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@media (max-width: 520px) {
    .cai-g-bubble {
        max-width: calc(100vw - 32px);
        min-width: 0;
        border-width: 3px;
        box-shadow: 3px 3px 0 #1e293b, 0 10px 22px rgba(15, 23, 42, 0.25);
    }
    .cai-g-bubble-msg { font-size: 15px; }
    .cai-g-next { font-size: 14px; padding: 9px 18px; }
}