/* =============================================================
   ATF Juniors Chatbot Widget — Stylesheet
   Sprint 3 Session 20 (search + categories + 6-lang + dark mode)
   =============================================================
   Per sealed franchise-template-atf-juniors.md "Critical Safety
   Rules" #5 (Widget isolation):
     - All classes prefixed `atfchat-` to avoid collisions with the
       host page's stylesheet
     - No external CSS dependencies (no Bootstrap, no font CDN)
     - Self-contained — drop into any host page

   Per sealed pwa-capacitor-level1-compliance.md §6 (Mobile-First
   Widget):
     - 100dvh for full-screen on mobile
     - safe-area-inset-* for notched devices
     - inputs font-size >= 16px to prevent iOS auto-zoom
     - touch targets >= 44x44px (Apple HIG)
     - Hide floating button when panel is open on mobile
     - Separate breakpoint at 360px for small phones
   ============================================================= */

/* ---- Brand tokens (LIGHT mode default) ---- */
.atfchat-root {
    --atfchat-primary: #054a8b;
    --atfchat-primary-dark: #043a6e;
    --atfchat-accent: #f57c00;
    --atfchat-bg: #ffffff;
    --atfchat-bg-soft: #f5f7fa;
    --atfchat-text: #1a1a1a;
    --atfchat-text-muted: #666666;
    --atfchat-border: #e5e7eb;
    --atfchat-input-bg: #ffffff;
    --atfchat-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    --atfchat-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
    --atfchat-radius: 14px;
    --atfchat-radius-sm: 8px;
    --atfchat-z: 2147483000;       /* near max int — sit above host modals */

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;               /* mobile: prevents iOS input auto-zoom */
    line-height: 1.5;
    color: var(--atfchat-text);
    box-sizing: border-box;
}
.atfchat-root *, .atfchat-root *::before, .atfchat-root *::after {
    box-sizing: inherit;
}

/* ---- DARK mode token override ----
   Applied when state.theme === 'dark' (chatbot.js adds the class).
   Brand primary stays the same — recognisable across modes. Body/
   surface colors flip; text contrast preserved at WCAG AA against
   dark surfaces. */
.atfchat-root.atfchat-dark {
    --atfchat-bg: #1f2227;
    --atfchat-bg-soft: #15171b;
    --atfchat-text: #e8eaed;
    --atfchat-text-muted: #9aa3af;
    --atfchat-border: #2f343b;
    --atfchat-input-bg: #2a2e34;
    --atfchat-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    --atfchat-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---- Floating launcher (collapsed state) ---- */
.atfchat-launcher {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 64px;
    height: 64px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: var(--atfchat-primary);
    color: #ffffff;
    border: none;
    cursor: pointer;
    overflow: hidden;
    padding: 3px;
    box-shadow: var(--atfchat-shadow);
    z-index: var(--atfchat-z);
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.atfchat-launcher:hover { transform: scale(1.05); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.atfchat-launcher:focus-visible { outline: 3px solid var(--atfchat-accent); outline-offset: 2px; }
.atfchat-launcher[aria-expanded="true"] { display: none; }
.atfchat-launcher-mascot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ---- Expanded panel ---- */
.atfchat-panel {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 380px;
    max-width: calc(100vw - 40px);
    height: 580px;
    max-height: calc(100dvh - 40px);
    background: var(--atfchat-bg);
    border-radius: var(--atfchat-radius);
    box-shadow: var(--atfchat-shadow);
    z-index: var(--atfchat-z);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--atfchat-text);
}
.atfchat-panel[hidden] { display: none; }

/* ---- Panel header ---- */
.atfchat-header {
    background: linear-gradient(135deg, var(--atfchat-primary), var(--atfchat-primary-dark));
    color: #ffffff;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
}
.atfchat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
.atfchat-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: #ffffff;
}
.atfchat-header-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atfchat-header-actions { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
.atfchat-icon-button {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0;
    transition: background 150ms ease;
}
.atfchat-icon-button:hover { background: rgba(255, 255, 255, 0.25); }
.atfchat-icon-button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.atfchat-icon-button[hidden] { display: none; }
.atfchat-icon-button svg { width: 18px; height: 18px; display: block; }

/* ---- Language selector (native <select> styled to fit header) ----
   S21+ owner ask: shortened to flag emoji + ISO code (e.g., "🇬🇧 EN")
   so the picker takes minimal header width. Frees space for the new
   mail icon next to the theme toggle. */
.atfchat-lang-select {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    height: 32px;
    padding: 0 18px 0 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='white'><path d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 8px 6px;
    max-width: 78px;
    min-width: 60px;
    text-overflow: ellipsis;
}
/* Native option list inherits the host OS dropdown — readable text, no
   need to fight per-OS styling. The select itself is what the user sees
   most of the time (closed state). */
.atfchat-lang-select option { color: #1a1a1a; background: #ffffff; }
.atfchat-lang-select:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ---- Body (scrollable view container) ---- */
.atfchat-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px;
    background: var(--atfchat-bg-soft);
    -webkit-overflow-scrolling: touch;
}
.atfchat-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--atfchat-text-muted);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.atfchat-section-title-spaced { margin-top: 18px; }

/* ---- Search ---- */
.atfchat-search {
    position: relative;
    margin: 0 0 12px 0;
}
.atfchat-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--atfchat-text-muted);
    pointer-events: none;
    display: inline-flex;
}
.atfchat-search-icon svg { width: 16px; height: 16px; display: block; }
.atfchat-search-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 38px;
    font-size: 16px;          /* Mobile: prevents iOS auto-zoom on focus */
    font-family: inherit;
    color: var(--atfchat-text);
    background: var(--atfchat-input-bg);
    border: 1px solid var(--atfchat-border);
    border-radius: var(--atfchat-radius-sm);
    line-height: 1.4;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.atfchat-search-input::placeholder { color: var(--atfchat-text-muted); }
.atfchat-search-input:focus {
    outline: none;
    border-color: var(--atfchat-primary);
    box-shadow: 0 0 0 3px rgba(5, 74, 139, 0.15);
}

/* ---- Tile list (S20.5 redesign — single column with full-text labels) ----
   Replaces the prior 2-column grid that truncated long category names. The
   first tile is "Popular questions" (drill-in to the 10 popular Qs); the
   remaining tiles are categories. Per-tile min-height stays at 44px (Apple
   HIG touch target) but vertical padding is tighter for visual density.
   Owner direction 2026-05-07: ship as a reversible single-commit redesign. */
.atfchat-tiles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 4px 0;
}
.atfchat-tile {
    background: var(--atfchat-bg);
    border: 1px solid var(--atfchat-border);
    border-radius: var(--atfchat-radius-sm);
    padding: 8px 12px;          /* tighter than the prior 10px 12px */
    text-align: left;
    color: var(--atfchat-text);
    font-size: 13.5px;
    line-height: 1.3;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;           /* Apple HIG touch target — preserved */
    width: 100%;
    font-family: inherit;
    transition: border-color 150ms ease, transform 150ms ease;
}
.atfchat-tile:hover {
    border-color: var(--atfchat-primary);
    transform: translateY(-1px);
}
.atfchat-tile:focus-visible {
    outline: 2px solid var(--atfchat-primary);
    outline-offset: 2px;
}

/* Leading visual: colored dot for category tiles, star icon for Popular */
.atfchat-tile-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--atfchat-primary);
}
.atfchat-tile-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--atfchat-accent);   /* orange star — pops against dark + light */
}
.atfchat-tile-icon svg { width: 16px; height: 16px; display: block; }

.atfchat-tile-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.atfchat-tile-count {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--atfchat-text-muted);
    font-variant-numeric: tabular-nums;
}
.atfchat-tile-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--atfchat-primary);
    opacity: 0.5;
    transition: opacity 150ms ease, transform 150ms ease;
}
.atfchat-tile-chevron svg { width: 12px; height: 12px; display: block; }
.atfchat-tile:hover .atfchat-tile-chevron { opacity: 1; transform: translateX(2px); }

/* Popular tile — distinct accent so the eye lands here first; subtle gradient
   wash on the left; accent border. Light mode uses a faint orange tint;
   dark mode bumps the alpha so the wash is still visible against dark bg. */
.atfchat-tile-popular {
    border-color: var(--atfchat-accent);
    background: linear-gradient(90deg, rgba(245, 124, 0, 0.08), transparent 35%);
}
.atfchat-tile-popular:hover {
    border-color: var(--atfchat-accent);
}

/* ---- Q&A list (home / search / category views) ---- */
.atfchat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.atfchat-list-item {
    background: var(--atfchat-bg);
    border: 1px solid var(--atfchat-border);
    border-radius: var(--atfchat-radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    color: var(--atfchat-text);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    width: 100%;
    transition: border-color 150ms ease, background 150ms ease;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    font-family: inherit;
}
.atfchat-list-item:hover { border-color: var(--atfchat-primary); }
.atfchat-list-item:focus-visible { outline: 2px solid var(--atfchat-primary); outline-offset: 2px; }
.atfchat-list-item-text { flex: 1 1 auto; }
.atfchat-list-item-chevron {
    color: var(--atfchat-primary);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 150ms ease, transform 150ms ease;
}
.atfchat-list-item-chevron svg { width: 14px; height: 14px; display: block; }
.atfchat-list-item:hover .atfchat-list-item-chevron { opacity: 1; transform: translateX(2px); }

/* In dark mode the Q&A primary blue is hard to see on the dark blue
   primary; chevron + hover use a lighter accent instead. */
.atfchat-root.atfchat-dark .atfchat-list-item-chevron { color: #6fa8dc; }
.atfchat-root.atfchat-dark .atfchat-list-item:hover { border-color: #6fa8dc; }
.atfchat-root.atfchat-dark .atfchat-tile-chevron { color: #6fa8dc; }
.atfchat-root.atfchat-dark .atfchat-tile:hover { border-color: #6fa8dc; }
/* Popular gradient wash bumped in dark mode for visibility against dark bg */
.atfchat-root.atfchat-dark .atfchat-tile-popular {
    background: linear-gradient(90deg, rgba(245, 124, 0, 0.18), transparent 35%);
}
.atfchat-root.atfchat-dark .atfchat-tile-popular:hover {
    border-color: var(--atfchat-accent);
}

/* ---- Answer view ---- */
.atfchat-answer-question {
    font-size: 16px;
    font-weight: 600;
    color: var(--atfchat-primary);
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.atfchat-root.atfchat-dark .atfchat-answer-question { color: #6fa8dc; }
.atfchat-answer-body {
    background: var(--atfchat-bg);
    border: 1px solid var(--atfchat-border);
    border-radius: var(--atfchat-radius-sm);
    padding: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--atfchat-text);
}
.atfchat-answer-body p { margin: 0 0 10px 0; }
.atfchat-answer-body p:last-child { margin-bottom: 0; }
.atfchat-answer-body ul, .atfchat-answer-body ol { margin: 0 0 10px 0; padding-left: 22px; }
.atfchat-answer-body li { margin-bottom: 4px; }
.atfchat-answer-body strong { color: var(--atfchat-primary-dark); }
.atfchat-answer-body a { color: var(--atfchat-primary); text-decoration: underline; word-break: break-word; }
.atfchat-root.atfchat-dark .atfchat-answer-body strong { color: #a8c8e8; }
.atfchat-root.atfchat-dark .atfchat-answer-body a { color: #6fa8dc; }

/* CTA button rendered as <a> inside .atfchat-answer-body. The selector
   .atfchat-answer-body a above (specificity 0,1,1) was overriding our
   white-on-blue CTA styling — bump to 0,2,1 so button styling wins.
   (S19 5/N fix per owner observation #1.) */
.atfchat-answer-body a.atfchat-answer-cta {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--atfchat-primary);
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--atfchat-radius-sm);
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
    line-height: 1.5;
    word-break: normal;
}
.atfchat-answer-body a.atfchat-answer-cta:hover,
.atfchat-answer-body a.atfchat-answer-cta:focus {
    background: var(--atfchat-primary-dark);
    color: #ffffff;
    text-decoration: none;
}

/* ---- Loading + error states ---- */
.atfchat-status {
    text-align: center;
    color: var(--atfchat-text-muted);
    padding: 20px 12px;
    font-size: 14px;
}
.atfchat-status-error { color: #c62828; }
.atfchat-root.atfchat-dark .atfchat-status-error { color: #ff8a80; }

/* ---- Footer ---- */
.atfchat-footer {
    flex: 0 0 auto;
    padding: 8px 16px;
    text-align: center;
    font-size: 11px;
    color: var(--atfchat-text-muted);
    background: var(--atfchat-bg);
    border-top: 1px solid var(--atfchat-border);
}

/* ---- Mobile breakpoints ---- */
@media (max-width: 480px) {
    .atfchat-panel {
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    /* Hide floating button when panel is open (per pwa-level1 §6) */
    body.atfchat-panel-open .atfchat-launcher { display: none; }
    /* Header gets tight on phones — let lang select shrink; hide its
       text and rely on the chosen-language label only (still visible) */
    .atfchat-lang-select { max-width: 70px; font-size: 12px; padding-right: 16px; }
}
@media (max-width: 360px) {
    .atfchat-launcher { width: 52px; height: 52px; }
    .atfchat-header { padding: 10px 12px; }
    .atfchat-header-actions { gap: 4px; }
    .atfchat-lang-select { max-width: 62px; padding-right: 16px; }
    .atfchat-icon-button { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
    .atfchat-icon-button svg { width: 15px; height: 15px; }
}

/* =============================================================
   Welcome view (S21 post-close) — additive under the feature-floor seal
   =============================================================
   First-launcher-click landing per page-load. Centered card with the
   session mascot, a small ATF logo to its right, a friendly greeting,
   and a Continue button into the home view.
   ============================================================= */
.atfchat-welcome {
    background: var(--atfchat-bg);
    border: 1px solid var(--atfchat-border);
    border-radius: var(--atfchat-radius);
    padding: 28px 24px 24px 24px;
    text-align: center;
    box-shadow: var(--atfchat-shadow-soft);
    margin: 4px 0;
}
.atfchat-welcome-images {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 18px;
}
.atfchat-welcome-mascot {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--atfchat-primary);
    background: #ffffff;
    flex: 0 0 auto;
    box-shadow: var(--atfchat-shadow-soft);
}
.atfchat-welcome-logo {
    width: 72px;
    height: auto;
    flex: 0 0 auto;
}
.atfchat-welcome-heading {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--atfchat-primary);
    line-height: 1.4;
}
.atfchat-root.atfchat-dark .atfchat-welcome-heading { color: #6fa8dc; }
.atfchat-welcome-body {
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--atfchat-text);
}
.atfchat-welcome-continue {
    display: inline-block;
    padding: 12px 32px;
    background: var(--atfchat-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--atfchat-radius-sm);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    min-height: 44px;
    line-height: 1.4;
    transition: background 150ms ease;
}
.atfchat-welcome-continue:hover { background: var(--atfchat-primary-dark); }
.atfchat-welcome-continue:focus-visible {
    outline: 2px solid var(--atfchat-accent);
    outline-offset: 2px;
}

/* Mobile: tighter padding so the card doesn't feel cramped on small screens */
@media (max-width: 480px) {
    .atfchat-welcome { padding: 22px 18px 20px 18px; }
    .atfchat-welcome-mascot { width: 88px; height: 88px; }
    .atfchat-welcome-logo { width: 64px; }
}

/* =============================================================
   "Leave a Question" form (S21) — additive under the feature-floor seal
   =============================================================
   Tier 4 escalation per CLAUDE.md hierarchy. Visitor can't find
   what they're looking for in the FAQ -> taps "Ask us" CTA below
   the tile list -> form -> submit -> success card. POSTs to
   /api/chatbot/question (S21 backend).

   Class names all prefixed `atfchat-ask-` — additive to the
   protected class set per the feature-floor seal at S20.5.
   ============================================================= */

/* CTA below the home tile list — secondary action so the FAQ tiles
   stay primary. Subtle outline button that doesn't compete visually
   with the colored category dots above. */
.atfchat-ask-cta {
    display: block;
    width: 100%;
    margin: 14px 0 4px 0;
    padding: 10px 14px;
    background: transparent;
    border: 1px dashed var(--atfchat-border);
    border-radius: var(--atfchat-radius-sm);
    color: var(--atfchat-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    min-height: 44px;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.atfchat-ask-cta:hover {
    border-style: solid;
    border-color: var(--atfchat-accent);
    color: var(--atfchat-accent);
    background: rgba(245, 124, 0, 0.05);
}
.atfchat-ask-cta:focus-visible {
    outline: 2px solid var(--atfchat-accent);
    outline-offset: 2px;
}

/* Inline variant on the answer view — slimmer, less visually loud than
   the home-bottom one. Sits under the answer body as a follow-up nudge. */
.atfchat-ask-cta-inline {
    margin-top: 14px;
    padding: 8px 12px;
    font-size: 12px;
    border-style: solid;
    color: var(--atfchat-text-muted);
}
.atfchat-ask-cta-inline:hover {
    border-color: var(--atfchat-accent);
    color: var(--atfchat-accent);
}

/* Dark-mode overrides for the dashed-CTA */
.atfchat-root.atfchat-dark .atfchat-ask-cta:hover {
    background: rgba(245, 124, 0, 0.12);
}

/* ---- Form ---- */
.atfchat-ask-intro {
    margin: 0 0 14px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--atfchat-text-muted);
}
.atfchat-ask-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.atfchat-ask-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atfchat-ask-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--atfchat-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.atfchat-ask-input,
.atfchat-ask-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;          /* iOS auto-zoom prevention — same rule as search */
    font-family: inherit;
    color: var(--atfchat-text);
    background: var(--atfchat-input-bg);
    border: 1px solid var(--atfchat-border);
    border-radius: var(--atfchat-radius-sm);
    line-height: 1.4;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.atfchat-ask-input { min-height: 44px; }
.atfchat-ask-textarea {
    resize: vertical;
    min-height: 100px;
    max-height: 300px;
    font-family: inherit;     /* override the textarea-default monospace */
}
.atfchat-ask-input::placeholder,
.atfchat-ask-textarea::placeholder {
    color: var(--atfchat-text-muted);
}
.atfchat-ask-input:focus,
.atfchat-ask-textarea:focus {
    outline: none;
    border-color: var(--atfchat-primary);
    box-shadow: 0 0 0 3px rgba(5, 74, 139, 0.15);
}

/* Attachment field (S21+ — owner ask "an attachment facility too").
   Uses the native file picker for accessibility + cross-platform
   consistency; styled to match the rest of the form. */
.atfchat-ask-attachment-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--atfchat-text);
    background: var(--atfchat-input-bg);
    border: 1px solid var(--atfchat-border);
    border-radius: var(--atfchat-radius-sm);
    cursor: pointer;
    min-height: 44px;
}
.atfchat-ask-attachment-input::file-selector-button {
    background: var(--atfchat-bg-soft);
    color: var(--atfchat-text);
    border: 1px solid var(--atfchat-border);
    border-radius: var(--atfchat-radius-sm);
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    margin-right: 10px;
    transition: background 150ms ease, border-color 150ms ease;
}
.atfchat-ask-attachment-input::file-selector-button:hover {
    border-color: var(--atfchat-primary);
}
.atfchat-ask-attachment-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--atfchat-text-muted);
    line-height: 1.4;
}

/* Inline error region (PWA-Level-1 forbids alert/confirm/prompt — errors
   render in the form per Critical Safety Rule 10) */
.atfchat-ask-error {
    background: rgba(198, 40, 40, 0.08);
    border: 1px solid rgba(198, 40, 40, 0.35);
    color: #c62828;
    border-radius: var(--atfchat-radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
}
.atfchat-root.atfchat-dark .atfchat-ask-error {
    background: rgba(255, 138, 128, 0.12);
    border-color: rgba(255, 138, 128, 0.4);
    color: #ff8a80;
}

/* Action row — Cancel (secondary) + Submit (primary) */
.atfchat-ask-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.atfchat-ask-submit,
.atfchat-ask-cancel {
    padding: 10px 18px;
    font-size: 14px;
    font-family: inherit;
    border-radius: var(--atfchat-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    min-height: 44px;
    line-height: 1.4;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.atfchat-ask-submit {
    background: var(--atfchat-primary);
    color: #ffffff;
    font-weight: 500;
}
.atfchat-ask-submit:hover { background: var(--atfchat-primary-dark); }
.atfchat-ask-submit:focus-visible {
    outline: 2px solid var(--atfchat-accent);
    outline-offset: 2px;
}
.atfchat-ask-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.atfchat-ask-cancel {
    background: transparent;
    color: var(--atfchat-text-muted);
    border-color: var(--atfchat-border);
}
.atfchat-ask-cancel:hover {
    color: var(--atfchat-text);
    border-color: var(--atfchat-text-muted);
}
.atfchat-ask-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Success card ---- */
.atfchat-ask-success {
    background: var(--atfchat-bg);
    border: 1px solid var(--atfchat-border);
    border-radius: var(--atfchat-radius);
    padding: 24px 20px;
    text-align: center;
    box-shadow: var(--atfchat-shadow-soft);
}
.atfchat-ask-success-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--atfchat-primary);
    line-height: 1.4;
}
.atfchat-root.atfchat-dark .atfchat-ask-success-title { color: #6fa8dc; }
.atfchat-ask-success-body {
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--atfchat-text);
}

/* ---- Accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .atfchat-launcher,
    .atfchat-icon-button,
    .atfchat-list-item,
    .atfchat-tile,
    .atfchat-tile-chevron,
    .atfchat-search-input,
    .atfchat-answer-cta,
    .atfchat-ask-cta,
    .atfchat-ask-input,
    .atfchat-ask-textarea,
    .atfchat-ask-submit,
    .atfchat-ask-cancel {
        transition: none;
    }
}