/* ═══════════════════════════════════════════════════════════════════════════
   RENTLY HELPER — COMPANION DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────────────
   Brand-bound token layer for the Help Companion widget. These DERIVE from the
   global Rently design tokens (css/rently-dashboard-tokens.css) so the companion
   stays brand-true automatically — we never hard-code a second palette.

   Phase 1 establishes the token layer + the avatar consumes --companion-accent.
   Phase 2+ (launcher FAB + slide-out panel chrome) is added below as it lands.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Accent (the avatar + interactive accents) — brand teal, with the small-text-safe dark */
    --companion-accent: var(--rently-primary, #35a0ae);
    --companion-accent-light: color-mix(in srgb, var(--rently-primary, #35a0ae) 72%, #ffffff);
    --companion-accent-hover: var(--rently-primary-hover, #2d8a96); /* reserved — P3 interactive accents */
    --companion-accent-dark: var(--rently-primary-dark, #256f7a);
    --companion-on-accent: var(--rently-text-on-accent, #ffffff);
    --companion-coral: var(--rently-secondary, #EF412c);
    --companion-online: var(--rently-ok, #16a34a);

    /* Surfaces — brand Nordic-frost, not a bespoke warm tint */
    --companion-bg: var(--rently-shell-bg, #f8f9fb);
    --companion-surface: var(--rently-card-bg, #ffffff);
    --companion-muted: var(--rently-muted-bg, #f1f5f9);
    --companion-border: var(--rently-border, #e8ecf1);

    /* Text */
    --companion-text: var(--rently-text-primary, #0f172a);
    --companion-text-body: var(--rently-text-body, #334155);
    --companion-text-soft: var(--rently-text-tertiary, #64748b);

    /* Radii — from the brand scale (8px family) */
    --companion-radius-panel: var(--rently-radius-2xl, 18px);
    --companion-radius-card: var(--rently-radius-xl, 12px);
    --companion-radius-control: var(--rently-radius-md, 8px);
    --companion-radius-pill: var(--rently-radius-full, 999px);
    --companion-radius-bubble: 14px; /* speech-bubble corner (Phase 3 chat) */

    /* Shadows */
    --companion-shadow-card: var(--rently-shadow-2, 0 2px 8px rgba(15, 23, 42, 0.06));
    --companion-shadow-float: var(--rently-shadow-hover, 0 8px 20px rgba(15, 23, 42, 0.08));
    /* Initiative C · C6 Pt3 (M2) — the FAB shadow's ambient "depth" grounding half, tokenised so it
       DEEPENS under dark (the [data-theme="dark"] override below) instead of staying a fixed light-mode
       slate. Light keeps the original rgba(15,23,42,0.25); dark goes near-black + heavier. */
    --companion-shadow-depth: rgba(15, 23, 42, 0.25);
    /* The FAB wants a brand-tinted lift (teal glow + an ambient grounding layer), heftier than the
       generic float shadow — mirrors the prototype's purpose-built FAB shadow. */
    --companion-shadow-fab: 0 10px 24px -6px rgba(var(--rently-primary-rgb, 53, 160, 174), 0.5), 0 4px 10px -4px var(--companion-shadow-depth);
    /* Session-5 F3 — the panel/sheet ambient drop shadows, tokenised like --companion-shadow-depth
       so dark DEEPENS them instead of keeping a fixed light-mode slate (unifies the old
       0.28 panel / 0.32 sheet pair on 0.3). */
    --companion-shadow-ambient: rgba(15, 23, 42, 0.3);

    /* Motion — the guided-UX easing language. S7-06: these two no longer duplicate the literals that
       rently-loading.css also carried; both now alias the canonical primitives in
       rently-dashboard-tokens.css, which is what "mirrors rently-loading.css" was trying to achieve by
       hand. The names stay so nothing downstream changes, and the fallbacks are the previous literals
       verbatim, so the computed values are byte-identical with or without the token sheet. */
    --companion-ease-emphasized: var(--rently-ease-emphasized, cubic-bezier(0.2, 0, 0, 1));
    --companion-ease-spring: var(--rently-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    --companion-transition: var(--rently-transition-base, 0.2s ease);

    /* Stacking — Phase 2, reconciled against the LIVE app stack (not the MudTheme map).
       Verified: the real top nav (MainNav --z-nav-normal) sits at ~1500, MudDialog is forced to
       1900 (site.css .mud-dialog-container !important), and .category-nav-overlay occupies 1250.
       So the FAB sits above page content + the scroll-to-top FAB (MudFab has no z-index, stacks by
       DOM order) but below the AppBar. The panel must sit ABOVE the nav (1500): that nav header is
       position:relative; z-index:1500, so at panel<1500 it OCCLUDES the panel's own header + close
       button (caught in the Phase-2 Playwright pass — Esc closed it, the close button didn't click).
       It stays BELOW the notifications menu (1600) and the handoff MudDialog (forced to 1900 in
       site.css !important) so a dialog always opens on top. As a full-height right side-sheet it
       overlays only the nav's right edge; the left/centre nav stays usable. No !important. */
    --companion-z-fab: 1075;
    /* Two backdrop planes (session 6): the MOBILE modal scrim keeps 1550 (must cover the ~1500
       nav under the bottom sheet). The DESKTOP light-dismiss catcher sits at 1300 — above page
       content, the category overlay band's floor and both FABs (1075), but BELOW Popover (1400),
       nav (~1500) and Snackbar (1500) — so while the side-sheet is open, toasts and the nav stay
       fully clickable (the "left/centre nav stays usable" contract above holds) and only clicks
       on page content light-dismiss the panel. Adversarial review caught the original 1550
       desktop catcher silently swallowing snackbar clicks (Snackbar z 1500 < 1550). */
    --companion-z-backdrop: 1550;
    --companion-z-lightdismiss: 1300;
    --companion-z-panel: 1560;
}

/* Initiative C · C6 Pt3 (M2) — deepen the Companion FAB shadow's ambient grounding half under dark,
   mirroring how --rently-shadow-hover goes rgba(15,23,42,0.08) → rgba(2,6,23,0.6). Keyed on
   [data-theme="dark"] on <html> (same element as :root), so --companion-shadow-fab + the breathe
   keyframe re-resolve to the deeper value automatically. */
[data-theme="dark"] {
    --companion-shadow-depth: rgba(2, 6, 23, 0.55);
    --companion-shadow-ambient: rgba(2, 6, 23, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 — LAUNCHER FAB + SLIDE-OUT PANEL SHELL
   All structural + animation CSS lives here (global, non-scoped) to avoid the
   scoped-`:root`/`::deep` traps; the components only reference these classes.
   Desktop = right side-sheet · Mobile (≤599px) = bottom-sheet (single element,
   repositioned by @media — the approved-prototype approach, not MudHidden).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Launcher (fixed bottom-right anchor + the FAB) ───────────────────────── */
.companion-launcher {
    position: fixed;
    right: 20px;
    /* --rently-fab-lift is written by js/fab-dock.js while the footer scrolls into view, so the FAB
       clamps at the footer's top edge instead of sinking into it and hiding the Socials/Theme columns.
       0px at rest, and 0px on any page with no footer (admin), so the fallback IS the resting state.
       Deliberately NOT transitioned: it tracks scroll 1:1, which is what reads as "clamped" — an
       eased bottom would visibly lag the page. */
    bottom: calc(max(env(safe-area-inset-bottom), 20px) + var(--rently-fab-lift, 0px));
    z-index: var(--companion-z-fab);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    /* OPACITY only — never `bottom` (see the note above; `all` here would silently ease the lift and
       reintroduce the drag the fab-dock rewrite removed). This eases the S8-09 yield below.
       visibility rides along at 0s so the un-yield shows the element the instant the fade-in starts. */
    transition: opacity 0.15s ease, visibility 0s linear;
}

/* ── Yield (S8-09) ─────────────────────────────────────────────────────────
   js/fab-dock.js adds .rently-fab-yield to this host when the lift it NEEDS to clear the footer or
   a declared obstacle exceeds what the viewport can give (the clamp is binding) — i.e. exactly when
   riding the clamp would park the FAB on the content it is supposed to avoid. The FAB fades out
   until a scroll back up releases it. This is a visibility signal only: the yield class must never
   touch `bottom`, which fab-dock alone owns. */
.companion-launcher.rently-fab-yield {
    opacity: 0;
    pointer-events: none;
    /* S9-01 re-review: visibility removes the invisible launcher from the TAB ORDER (it stayed
       focusable+operable at opacity 0 — SC 2.4.7). Delayed until the fade completes; the FULL
       transition list is re-declared because a state-class `transition:` replaces the base list. */
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

/* AFTER the rules it suppresses, or the cascade keeps the transition. Yielding still happens — it
   just happens instantly, which is the correct reduced-motion answer for a fade. The yield twin is
   needed at (0,2,0): the state rule above re-declares a transition that would outrank the base
   suppressor here. */
@media (prefers-reduced-motion: reduce) {
    .companion-launcher,
    .companion-launcher.rently-fab-yield {
        transition: none;
    }
}

.companion-fab {
    position: relative;
    width: 60px;
    height: 60px;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--companion-on-accent);
    background: linear-gradient(145deg, var(--companion-accent-light), var(--companion-accent) 55%, var(--companion-accent-dark));
    border-radius: 34% / 38%; /* squircle */
    box-shadow: var(--companion-shadow-fab);
    display: grid;
    place-items: center;
    transition: transform var(--companion-transition), box-shadow var(--companion-transition);
}

.companion-fab:hover { transform: translateY(-3px) scale(1.04); }
.companion-fab:active { transform: translateY(-1px) scale(0.98); }
.companion-fab:focus-visible { outline: 3px solid var(--companion-accent-dark); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
    .companion-fab { animation: companion-fab-breathe 4s ease-in-out infinite; }
}

@keyframes companion-fab-breathe {
    0%, 100% { box-shadow: var(--companion-shadow-fab); }
    50% { box-shadow: 0 13px 30px -6px rgba(var(--rently-primary-rgb, 53, 160, 174), 0.62), 0 4px 10px -4px var(--companion-shadow-depth); }
}

/* ── Scrim — desktop: a fully TRANSPARENT click-catcher (light-dismiss). The side-sheet
   stays non-modal (companion.js keeps aria-modal="false", no Tab-trap) and the page stays
   visible — but an outside click now closes the panel via the scrim's existing
   @onclick="CloseAsync" binding (CompanionHost). No tint/blur here: the ≤599px block below
   layers the mobile modal backdrop on top of these positional rules.
   z is the LIGHT-DISMISS plane (1300), NOT the mobile backdrop (1550) — see the token block:
   at 1550 the invisible catcher sat above Snackbar (1500) and swallowed toast clicks. ─ */
.companion-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: var(--companion-z-lightdismiss);
}

.companion-scrim.is-open { pointer-events: auto; }

/* ── Panel — desktop right side-sheet ─────────────────────────────────────── */
.companion-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(404px, 100vw);
    z-index: var(--companion-z-panel);
    background: var(--companion-bg);
    border-radius: var(--companion-radius-panel) 0 0 var(--companion-radius-panel);
    box-shadow: -24px 0 60px -24px var(--companion-shadow-ambient), 0 2px 8px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Closed: off-screen AND visibility:hidden so its controls leave the tab order + a11y tree.
       visibility is animatable (flips at the end of the close), so the slide stays smooth. */
    visibility: hidden;
    transform: translateX(104%);
    transition: transform 0.42s var(--companion-ease-emphasized), visibility 0.42s;
}

/* S7-06: will-change is declared on the OPEN state only, never on the base rule — a permanent
   compositor layer on a full-height fixed panel is a standing memory cost for an element that is
   idle almost all the time. Promoting here covers the expensive direction: the open slide is the
   one that runs while the panel's content is still mounting (baseline: a 111ms frame at ~740ms
   after the click). The close drops the layer as the class is removed; that direction animates over
   already-rendered content, so it has nothing to stall on.
   Safe against the containing-block trap that bit .main-nav-appbar (N1): a promoted ancestor becomes
   the containing block for position:fixed descendants, and this subtree has NONE — the only fixed
   elements in this file are .companion-launcher, .companion-scrim and the panel itself, and the
   first two are SIBLINGS of the panel, per the locked z-plane design (lightdismiss 1300 /
   mobile backdrop 1550). Re-verify that before ever moving a fixed element inside the panel. */
.companion-panel.is-open {
    visibility: visible;
    transform: translateX(0);
    will-change: transform;
}

/* ── Header (avatar + greeting + online dot + close) ──────────────────────── */
.companion-header {
    position: relative;
    padding: 18px 18px 20px;
    color: var(--companion-on-accent);
    /* F3 (session 5): unified on the FAB's gradient axis + dark tail (145deg, accent → dark; the
       FAB recipe at .companion-fab). The radial white kiss plays the accent-light role and stays
       confined to the top-right corner; the 145deg ramp only DARKENS from #35a0ae, so the title
       zone never sits on a lighter-than-accent stop (the 3.09:1 large-bold contract below). */
    background:
        radial-gradient(120px 80px at 88% -20%, rgba(255, 255, 255, 0.22), transparent 70%),
        linear-gradient(145deg, var(--companion-accent) 45%, var(--companion-accent-dark));
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 0 0 auto;
}

.companion-header__avatar {
    width: 52px;
    height: 52px;
    border-radius: 34% / 38%; /* FAB squircle — the header avatar echoes the button just clicked */
    background: rgba(255, 255, 255, 0.16);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.companion-header__greet { display: flex; flex-direction: column; min-width: 0; }

/* 1.2rem (19.2px) bold clears the 18.66px "large bold" threshold, so the 3:1 contrast bar applies
   (NOT 4.5:1): white over the #35a0ae end of the 145deg ramp is 3.09:1 — it passes at large size
   but would FAIL the normal-text rule, so do not drop below 1.2rem here, and never add a
   lighter-than-accent gradient stop under the title (the radial kiss never reaches the text). */
.companion-header__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.companion-header__sub {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.92;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.companion-header__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--companion-online);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
    flex: 0 0 auto;
}

.companion-header__close {
    margin-left: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%; /* one icon-button shape in the panel — matches the ask-box submit circle */
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.16);
    color: var(--companion-on-accent);
    display: grid;
    place-items: center;
    transition: background var(--companion-transition);
    flex: 0 0 auto;
}

.companion-header__close:hover { background: rgba(255, 255, 255, 0.28); }
.companion-header__close:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* ── Body (Phase-2 placeholder; the ask box + topics arrive in P3/P6) ─────── */
.companion-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.companion-body__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin: 0; /* anchor to top so the starters list never centres below the fold on small screens */
    padding: 12px 8px;
}

.companion-body__placeholder {
    margin: 0;
    color: var(--companion-text-body);
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 32ch;
}

/* ── Mobile (≤599px): bottom-sheet + modal scrim ──────────────────────────── */
@media (max-width: 599px) {
    .companion-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20, 30, 32, 0.28);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--rently-transition-slow, 0.4s ease);
        z-index: var(--companion-z-backdrop);
    }
    .companion-scrim.is-open { opacity: 1; pointer-events: auto; }

    .companion-panel {
        top: auto;
        bottom: 0;
        right: 0;
        height: 86dvh;
        width: 100vw;
        border-radius: var(--companion-radius-panel) var(--companion-radius-panel) 0 0;
        transform: translateY(104%);
        box-shadow: 0 -16px 48px -20px var(--companion-shadow-ambient);
    }
    .companion-panel.is-open { transform: translateY(0); }

    /* drag-handle affordance */
    .companion-header { padding-top: 22px; }
    .companion-header::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.5);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3 — ASK BOX + CONVERSATION (the Q&A read path)
   Global (non-scoped), reusing the --companion-* token layer above. Answer-body
   and deep-link text use --companion-accent-dark (#256f7a, 5.78:1) — NEVER the
   brand teal --companion-accent (#35a0ae, 3.09:1), which fails 1.4.3 for normal
   text. Every control carries a ≥3:1 focus ring (1.4.11 / 2.4.7).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section lead above a chip group / starters / suggestions */
.companion-suggest__lead {
    margin: 0 0 8px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--companion-text-soft);
}

.companion-starters { width: 100%; margin-top: 4px; text-align: left; }

/* ── Suggestion chips (related · did-you-mean · starters · no-match) ───────── */
.companion-suggest { display: flex; flex-direction: column; gap: 12px; }

.companion-suggest__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.companion-suggest__chip {
    border: 1px solid var(--companion-border);
    background: var(--companion-surface);
    color: var(--companion-accent-dark);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    padding: 8px 13px;
    min-height: 36px;
    border-radius: var(--companion-radius-pill);
    cursor: pointer;
    transition: background var(--companion-transition), border-color var(--companion-transition), transform var(--companion-transition);
}
.companion-suggest__chip:hover { background: var(--companion-muted); border-color: var(--companion-accent); transform: translateY(-1px); }
.companion-suggest__chip:focus-visible { outline: 3px solid var(--companion-accent-dark); outline-offset: 2px; }

/* ── Human handoff (a real link, not a button) ────────────────────────────── */
.companion-suggest__handoff {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--companion-radius-control);
    background: var(--companion-accent-dark);
    color: var(--companion-on-accent);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: filter var(--companion-transition), transform var(--companion-transition);
}
.companion-suggest__handoff:hover { filter: brightness(1.06); transform: translateY(-1px); color: var(--companion-on-accent); }
.companion-suggest__handoff:focus-visible { outline: 3px solid var(--companion-accent-dark); outline-offset: 2px; }

/* ── Conversation transcript ──────────────────────────────────────────────── */
.companion-convo { display: flex; flex-direction: column; gap: 16px; }
.companion-convo__turn { display: flex; flex-direction: column; gap: 10px; }
.companion-convo__a { align-self: stretch; }

/* The echoed user question — a right-aligned brand bubble */
.companion-convo__q {
    align-self: flex-end;
    max-width: 85%;
    margin: 0;
    padding: 9px 13px;
    border-radius: var(--companion-radius-bubble) var(--companion-radius-bubble) 4px var(--companion-radius-bubble);
    /* Both gradient stops stay >=5.78:1 under white 0.9rem (normal) text — never the 3.09:1 brand teal. */
    background: linear-gradient(135deg, var(--companion-accent-dark), color-mix(in srgb, var(--companion-accent-dark) 78%, #000));
    color: var(--companion-on-accent);
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Thinking indicator (decorative — aria-busy + the avatar carry the meaning) */
.companion-convo__thinking {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 11px 14px;
    border-radius: var(--companion-radius-bubble) var(--companion-radius-bubble) var(--companion-radius-bubble) 4px;
    background: var(--companion-surface);
    border: 1px solid var(--companion-border);
    align-self: flex-start;
}
.companion-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--companion-accent);
    opacity: 0.5;
    animation: companion-dot-pulse 1.2s ease-in-out infinite;
}
.companion-dot:nth-child(2) { animation-delay: 0.15s; }
.companion-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes companion-dot-pulse {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* ── Answer card (confident) ──────────────────────────────────────────────── */
.companion-answer {
    align-self: stretch;
    background: var(--companion-surface);
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-card);
    box-shadow: var(--companion-shadow-card);
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.companion-answer__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--companion-text); }
.companion-answer__title:focus-visible { outline: 3px solid var(--companion-accent-dark); outline-offset: 3px; border-radius: 4px; }

.companion-answer__body { color: var(--companion-text-body); font-size: 0.9rem; line-height: 1.6; }
.companion-answer__body p { margin: 0 0 8px; }
.companion-answer__body p:last-child { margin-bottom: 0; }
.companion-answer__body ul, .companion-answer__body ol { margin: 0 0 8px; padding-left: 20px; }
.companion-answer__body a { color: var(--companion-accent-dark); font-weight: 600; text-decoration: underline; }
.companion-answer__body a:hover { filter: brightness(0.9); text-decoration-thickness: 2px; }

/* "Take me there" deep-link CTA */
.companion-answer__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--companion-radius-control);
    background: var(--companion-accent-dark);
    color: var(--companion-on-accent);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: filter var(--companion-transition), transform var(--companion-transition);
}
.companion-answer__cta:hover { filter: brightness(1.06); transform: translateY(-1px); color: var(--companion-on-accent); }
.companion-answer__cta:focus-visible { outline: 3px solid var(--companion-accent-dark); outline-offset: 2px; }

.companion-answer__related { margin-top: 2px; }

/* A gentle, reduced-motion-safe entrance for each reply (the answer content always renders regardless). */
@media (prefers-reduced-motion: no-preference) {
    .companion-answer,
    .companion-convo__a { animation: companion-answer-in 0.3s var(--companion-ease-emphasized) both; }
}
@keyframes companion-answer-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── No-match block ───────────────────────────────────────────────────────── */
.companion-nomatch { display: flex; flex-direction: column; gap: 8px; }
.companion-nomatch__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--companion-text); }
.companion-nomatch__body { margin: 0 0 4px; font-size: 0.88rem; line-height: 1.55; color: var(--companion-text-body); }

/* ── Ask box (pinned at the foot of the panel, below the scrolling body) ───── */
.companion-askbox {
    flex: 0 0 auto;
    border-top: 1px solid var(--companion-border);
    background: var(--companion-surface);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.companion-askbox__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--companion-text-soft);
}

.companion-askbox__row { display: flex; align-items: flex-end; gap: 8px; }

.companion-askbox__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid var(--companion-border);
    border-radius: var(--companion-radius-pill);
    background: var(--companion-bg);
    color: var(--companion-text);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color var(--companion-transition), box-shadow var(--companion-transition);
}
.companion-askbox__input::placeholder { color: var(--companion-text-soft); }
.companion-askbox__input:focus-visible {
    outline: 2px solid var(--companion-accent-dark);
    outline-offset: 1px;
    border-color: var(--companion-accent-dark);
}
.companion-askbox__input:disabled { opacity: 0.6; cursor: not-allowed; }

.companion-askbox__submit {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(145deg, var(--companion-accent), var(--companion-accent-dark));
    color: var(--companion-on-accent);
    display: grid;
    place-items: center;
    transition: transform var(--companion-transition), filter var(--companion-transition);
}
.companion-askbox__submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.companion-askbox__submit:focus-visible { outline: 3px solid var(--companion-accent-dark); outline-offset: 2px; }
.companion-askbox__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Reduced motion (MUST be last so it wins on a mobile + reduced-motion device):
   kill the FAB breathing/lift and replace the slide with a brief in-place fade. ── */
@media (prefers-reduced-motion: reduce) {
    .companion-fab { animation: none; transition: none; }
    .companion-fab:hover, .companion-fab:active { transform: none; }

    .companion-panel {
        transform: none;
        opacity: 0;
        transition: opacity 0.18s ease, visibility 0.18s;
    }
    .companion-panel.is-open { transform: none; opacity: 1; }

    .companion-scrim { transition: opacity 0.12s ease; }

    /* Phase 3 — Q&A: still the thinking dots + the hover lifts (the answer still renders instantly). */
    .companion-dot { animation: none; opacity: 0.6; }
    .companion-suggest__chip:hover,
    .companion-answer__cta:hover,
    .companion-suggest__handoff:hover,
    .companion-askbox__submit:hover { transform: none; }
}