/* ===== Design tokens - shared palette for the marketing site AND the AI Assistant panel/fab, so both
   read as one coherent product rather than two mismatched color schemes.
   Bright/energetic "sporty event" theme: vivid orange-red brand gradient, light surfaces, bold
   condensed display font - swap the values here to re-theme everything downstream. ===== */
:root {
    --brand-1: #f97316;
    --brand-2: #ef4444;
    --brand-dark: #c2410c;
    --brand-rgb: 249, 115, 22;
    --cta: #1e293b;
    --cta-dark: #0f172a;
    --ink: #1f2937;
    --ink-muted: #6b7280;
    --surface-alt: #fff7ed;
    --tint-light: #ffedd5;
    --tint-border: #fed7aa;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.ai-panel-header h5 {
    font-family: 'Oswald', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
}

h2 { font-weight: 700; }

/* Bootstrap primary-color overrides so every stock Bootstrap control (buttons, accordion, form focus
   rings) used across the marketing page AND the AI Assistant forms shares the same brand palette above,
   instead of Bootstrap's default blue clashing with it. No markup/classes changed - same .btn-primary
   etc. selectors, just their color values. */
.btn-primary {
    --bs-btn-bg: var(--brand-1);
    --bs-btn-border-color: var(--brand-1);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-1);
    --bs-btn-border-color: var(--brand-1);
    --bs-btn-hover-bg: var(--brand-1);
    --bs-btn-hover-border-color: var(--brand-1);
    --bs-btn-active-bg: var(--brand-1);
    --bs-btn-active-border-color: var(--brand-1);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-primary { color: var(--brand-1) !important; }
.form-control:focus {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .15);
}
.accordion-button:not(.collapsed) {
    color: var(--brand-dark);
    background-color: var(--tint-light);
}
.accordion-button:focus {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .15);
}

/* ===== Site ===== */
.site-navbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow .2s ease;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.site-navbar.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.08); }
.site-navbar .navbar-brand {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.site-navbar .nav-link {
    color: var(--ink);
    font-weight: 600;
    transition: color .15s ease;
}
.site-navbar .nav-link:hover { color: var(--brand-1); }

.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--brand-2);
    margin-bottom: .4rem;
}

.section-alt { background: var(--surface-alt); }

.hero {
    min-height: 64vh;
    background: radial-gradient(circle at 15% 20%, #fb923c 0%, transparent 45%),
                linear-gradient(135deg, var(--brand-dark), var(--brand-1) 55%, var(--brand-2));
    position: relative;
    overflow: hidden;
}
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .35;
    pointer-events: none;
}
.hero-blob-1 { width: 320px; height: 320px; background: #fde047; top: -80px; right: -60px; }
.hero-blob-2 { width: 260px; height: 260px; background: #7f1d1d; bottom: -90px; left: -60px; }

.hero-badge {
    display: inline-block;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    font-size: .85em;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.btn-cta {
    background: linear-gradient(135deg, var(--cta), var(--cta-dark));
    border: none;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .4);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(217, 119, 6, .45);
    color: #1e1b3a;
}

.fact-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(30, 27, 58, .07);
    border: 1px solid #eee;
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}
.fact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(30, 27, 58, .12);
}
.fact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    font-size: 1.4rem;
    margin-bottom: .6rem;
}

.category-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(30, 27, 58, .07);
    border: 1px solid #eee;
    border-top: 4px solid var(--brand-2);
    padding: 1.25rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
}
.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(30, 27, 58, .12);
}

.contact-card {
    max-width: 480px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eee;
    box-shadow: 0 4px 18px rgba(30, 27, 58, .07);
    padding: 1.5rem;
}
.contact-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--ink-muted);
    margin-bottom: .5rem;
}
.contact-row:last-of-type { margin-bottom: 0; }
.contact-icon { font-size: 1.1em; line-height: 1; flex-shrink: 0; }
.contact-value {
    white-space: nowrap;
    font-weight: 500;
}

.site-footer {
    background: var(--ink);
    color: rgba(255,255,255,.6);
}

/* ===== AI Assistant floating button ===== */
.ai-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff;
    box-shadow: 0 6px 20px rgba(67, 56, 202, .45);
    z-index: 1080;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ai-fab:hover { background: linear-gradient(135deg, var(--brand-dark), var(--brand-1)); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(67, 56, 202, .55); }
.ai-fab-icon { font-size: 28px; line-height: 1; }
.ai-fab-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 14px;
    background: var(--cta);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* =====================================================================
   AI Assistant panel - self-contained, no framework offcanvas dependency
   Structure: .ai-panel (flex column)
     -> .ai-panel-header  (flex-shrink: 0, always visible)
     -> .ai-panel-scroll  (flex: 1, the ONLY scrolling region)
     -> .ai-panel-footer  (flex-shrink: 0, pinned at the bottom, sticky)
   Breakpoints: mobile <=767px, tablet 768-1023px, desktop >=1024px.
   ===================================================================== */
.ai-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1090;
    opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.ai-backdrop.show { opacity: 1; visibility: visible; }

.ai-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    background: #fff; z-index: 1091; box-shadow: -4px 0 16px rgba(0,0,0,.25);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .3s ease;
    font-size: 14px;
}
.ai-panel.show { transform: translateX(0); }

/* Drag-to-resize handle on the left edge (WhatsApp Web style) - desktop/tablet only, see the
   min-width:768px rule below. A few pixels wide with generous invisible padding so it's easy to grab
   without needing pixel-perfect aim, and highlights on hover/drag so it reads as interactive. */
.ai-resize-handle {
    display: none;
    position: absolute; top: 0; left: -4px; bottom: 0;
    width: 8px; cursor: ew-resize; z-index: 1093; background: transparent;
}
.ai-resize-handle:hover, .ai-resize-handle.ai-resizing {
    background: rgba(249, 115, 22, .35);
}
.ai-panel.ai-resizing { transition: none; }

.ai-panel-header {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: stretch;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff;
}
.ai-panel-header-top { display: flex; align-items: center; justify-content: space-between; }
.ai-panel-header h5 { font-size: 1.125rem; }

/* Icon + title, and icon-width spacer + banner text, share the exact same width/gap so the title text and
   the banner text line up under each other - without this, the banner text (no icon) started flush with
   the icon's own left edge while the title text (after the icon) started further right. */
.ai-header-title,
.ai-banner-text-row { display: flex; align-items: center; gap: .5rem; }
.ai-header-icon,
.ai-header-icon-spacer { width: 1.2rem; flex-shrink: 0; text-align: center; }

/* Verified/unverified banners live inside the header now (see markup) - margin-bottom only when a
   banner is actually shown, so a hidden one (d-none) never leaves a dead gap. */
.ai-panel-header .ai-verified-banner,
.ai-panel-header .ai-unverified-banner { margin: .6rem 0 0; }

.ai-close-btn {
    background: transparent; border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.ai-close-btn:focus-visible,
.ai-suggested-q:focus-visible,
#btnOpenAiAssistant:focus-visible,
.ai-input:focus-visible,
.ai-send-btn:focus-visible {
    outline: 2px solid #ffc107; outline-offset: 2px;
}

/* Header "more options" menu: theme toggle, transcript download, reset chat. */
.ai-header-actions { display: flex; align-items: center; position: relative; }
.ai-menu-btn {
    background: transparent; border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 40px; flex-shrink: 0;
    font-size: 1.3rem; line-height: 1; cursor: pointer;
}

/* Topics-menu button now lives in the footer (light background) instead of the header (colored
   gradient) - overrides the white icon color above so it's actually visible there. */
.ai-topics-menu-btn { color: var(--brand-1); }
.ai-panel.ai-dark .ai-topics-menu-btn { color: #fdba74; }
.ai-menu-dropdown {
    position: absolute; top: 100%; right: 44px; margin-top: 4px;
    background: #fff; color: #212529; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.2); overflow: hidden;
    min-width: 200px; z-index: 1092;
}
.ai-menu-item {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    background: transparent; border: none; text-align: left;
    padding: .6rem .9rem; font-size: .85rem; color: inherit; cursor: pointer;
}
.ai-menu-item:hover { background: #f1f1f1; }
.ai-menu-item-icon { width: 1.1em; text-align: center; }
.ai-menu-item-danger { color: #b02a37; }

/* Dark mode - scoped entirely to the panel, toggled via the menu above and remembered per-browser. */
.ai-panel.ai-dark { background: #1e1f24; color: #e6e6e6; }
.ai-panel.ai-dark .ai-panel-scroll { background: #1e1f24; }
.ai-panel.ai-dark .ai-panel-footer { background: #1e1f24; border-top-color: #33343b; }
.ai-panel.ai-dark .ai-msg-bot { background: #2b2c33; color: #e6e6e6; }
.ai-panel.ai-dark .ai-msg-user { background: #37456e; color: #e6e6e6; }
.ai-panel.ai-dark .ai-msg-error { background: #4a2328; color: #f3b6bc; }
.ai-panel.ai-dark .ai-msg-time { color: #9a9a9a; }
.ai-panel.ai-dark .ai-input { background: #2b2c33; color: #e6e6e6; border-color: #3a3b42; }
.ai-panel.ai-dark .ai-verify-form,
.ai-panel.ai-dark #aiTicketForm,
.ai-panel.ai-dark #aiTicketSuccess { background: #2b2c33; border-color: #3a3b42; color: #e6e6e6; }
.ai-panel.ai-dark .ai-menu-dropdown { background: #2b2c33; color: #e6e6e6; }
.ai-panel.ai-dark .ai-menu-item:hover { background: #33343b; }

.ai-panel-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Participant Services / suggested questions stay pinned to the bottom of the scroll area (right
   above the input) when the chat log is short, instead of floating mid-panel with a dead gap above.
   margin-top:auto absorbs any positive free space, pushing this block down - safe as long as nothing
   above it is allowed to shrink below its own content height (see #aiResults below for why that part
   matters: a flex item that shrinks below content height still renders its full content, which then
   visually overlaps whatever comes after it). */
.ai-bottom-group {
    margin-top: auto;
    flex-shrink: 0;
}

.ai-panel-footer {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #eee;
}

/* font-size must stay >=16px - anything smaller makes iOS WebKit (Safari AND Chrome/every other iOS
   browser, since Apple requires them all to use WebKit) auto-zoom the whole page on focus, and it doesn't
   zoom back out on its own after the reply comes in. Android has no such behavior either way. */
.ai-input { height: 44px; font-size: 16px; }
.ai-send-btn {
    min-width: 44px;
    height: 44px;
    flex-shrink: 0;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
}

.ai-verified-banner {
    background: #d1e7dd; color: #0f5132; padding: .5rem .75rem; border-radius: 6px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}

/* "End session" needs to actually be visible against the light-green banner above - a white
   btn-outline-light button had almost no contrast there. Dark-green outline matches the banner's own
   text color instead. */
.ai-end-session-btn {
    border: 1px solid #0f5132;
    color: #0f5132;
    background: transparent;
    font-weight: 600;
}
.ai-end-session-btn:hover {
    background: #0f5132;
    color: #fff;
}

/* Compact persistent entry point (public mode, not yet verified) - a single line instead of a full-width
   card, so it never eats into the chat's visible space. Lives inside the header (see markup), sitting
   directly on the header's own gradient (no separate pill background of its own) with a solid white
   "Verify" button, matching the reference design - so it's always visible without needing sticky
   positioning.

   .ai-banner-content is its own nested flex row (text + button) so the button sits right beside the text
   with a small gap whenever there's room, and only drops to its own line - still tightly spaced, no
   floating gap - when the panel is too narrow for both on one line. */
.ai-unverified-banner {
    color: rgba(255, 255, 255, .92);
    font-size: .78rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.ai-banner-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem;
}
.ai-banner-text { line-height: 1.4; }
.ai-banner-verify-link {
    flex-shrink: 0;
    background: #fff;
    border: none;
    padding: .2rem .7rem;
    border-radius: 20px;
    color: var(--brand-1, #d85a30);
    font-weight: 700;
    font-size: .78rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.ai-banner-verify-link:hover { background: #fff1e8; }

.ai-results {
    /* flex-shrink:0 is the actual fix here - #aiResults is a flex item inside .ai-panel-scroll, and flex
       items default to flex-shrink:1. Once total content overflowed the panel, the browser was shrinking
       #aiResults' box below its own content's real height - but the content itself doesn't shrink (text
       can't compress), so it visually spilled out past the bottom of its own shrunk box and rendered on
       top of .ai-bottom-group below it. flex-shrink:0 stops the box from ever going smaller than its
       content, so it can never happen. */
    flex: 0 0 auto;
    min-height: 40px;
}

.ai-msg {
    padding: .6rem .9rem;
    border-radius: 10px;
    margin-bottom: .6rem;
    font-size: .95em;
    max-width: 92%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap; /* preserves \n line breaks AND leading spaces (indented sub-lines under a bullet), still wraps normally */
}
.ai-msg-user { background: #dbe7ff; margin-left: auto; text-align: right; }
.ai-msg-bot { background: #f1f1f1; }
.ai-msg-error { background: #f8d7da; color: #842029; }

/* Bouncing-dots "typing" bubble shown while waiting for the AI's answer (see appendTypingIndicator in
   marathon-ai.js) - three dots that bounce in sequence, standard chat-app loading pattern. */
.ai-typing-indicator { display: flex; align-items: center; gap: 6px; padding: .4rem .7rem; width: fit-content; font-size: .78rem; color: #888; }
/* .ai-typing-dots is itself a <span> too (so it can sit inline after the "Thinking" text) - dot styling
   must be scoped to its CHILD spans only, not this selector matching the wrapper span as well (that
   previously turned the wrapper into its own tiny circle, squashing the real dots down to one blob). */
.ai-typing-indicator .ai-typing-dots { display: flex; align-items: center; gap: 3px; }
.ai-typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #999;
    animation: ai-typing-bounce 1.2s infinite ease-in-out;
}
.ai-typing-dots span:nth-child(2) { animation-delay: .12s; }
.ai-typing-dots span:nth-child(3) { animation-delay: .24s; }
@keyframes ai-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-3px); opacity: 1; }
}
.ai-panel.ai-dark .ai-typing-indicator { color: #aaa; }
.ai-panel.ai-dark .ai-typing-indicator span { background: #999; }

/* Timestamp + read-aloud row under each message bubble. */
.ai-msg-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .3rem;
    font-size: .72rem;
    color: #8a8a8a;
    white-space: normal;
}
.ai-msg-user .ai-msg-meta { justify-content: flex-end; }
.ai-msg-speak {
    background: transparent;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: .85rem;
    cursor: pointer;
    opacity: .65;
    transition: opacity .12s ease;
}
.ai-msg-speak:hover { opacity: 1; }

/* Like/dislike feedback under each assistant answer - small and out of the way, not competing with the
   answer itself for attention. */
.ai-feedback-row {
    display: flex;
    gap: .4rem;
    margin: -.3rem 0 .6rem;
}
.ai-feedback-btn {
    background: transparent;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    width: 28px;
    height: 24px;
    font-size: .8em;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
    transition: opacity .12s ease, background .12s ease;
}
.ai-feedback-btn:hover { opacity: 1; background: #f5f5f5; }
.ai-feedback-btn:disabled { cursor: default; }
.ai-feedback-btn.ai-feedback-selected { opacity: 1; border-color: var(--brand-1, #4338ca); background: #ede9fe; }

.ai-verify-form {
    border: 1px solid #e2e2e2; border-radius: 8px; padding: .9rem; margin-bottom: .75rem;
}

/* Suggested questions - real <button> elements so they're keyboard/focus accessible,
   sized as proper touch targets rather than small inline badges. */
.ai-suggested-q {
    cursor: pointer;
    margin: 0 .4rem .4rem 0;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-weight: 500;
    font-size: .85em;
    padding: .5rem 1rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, .25);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.ai-suggested-q:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 4px 12px rgba(239, 68, 68, .4); }
.ai-suggested-q-participant {
    background: linear-gradient(135deg, #16a34a, #0f5132);
    box-shadow: 0 2px 6px rgba(16, 163, 74, .25);
}
.ai-suggested-q-participant:hover { box-shadow: 0 4px 12px rgba(16, 163, 74, .4); }

.ai-table-group-title { font-weight: 600; margin-bottom: .4rem; }

/* Stacked "Label: Value" cards on EVERY screen size, not a real grid table - a real <table> reads fine on
   a wide desktop screen but is the same layout most people (95% on mobile, per the reason this changed)
   see, so one consistent view avoids the jarring "looks different on my phone vs. my laptop" gap. Uses the
   data-label attribute already on every <td> (see buildDataTableHtml in marathon-ai.js). Each registration
   is its own block, separated by a visible line rather than a boxed border around each one. */
.ai-data-table { width: 100%; font-size: .9em; }
.ai-data-table thead { display: none; }
.ai-data-table, .ai-data-table tbody, .ai-data-table tr, .ai-data-table td { display: block; width: 100%; }
.ai-data-table tr {
    padding: .5rem 0;
    border-bottom: 1px solid #ddd;
}
.ai-data-table tr:last-child { border-bottom: none; }
.ai-data-table td {
    padding: .2rem 0;
    display: flex;
    gap: .6rem;
    overflow-wrap: anywhere;
}
.ai-data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #666;
    flex-shrink: 0;
    width: 90px;
}

/* Purpose-built result cards (categories, event overview, participant data) */
.ai-card, .ai-inline-card {
    background: #fff;
    border: 1px solid #e6e6ee;
    border-radius: 8px;
    padding: .75rem .9rem;
    margin-bottom: .6rem;
    font-size: .9em;
}
/* .ai-inline-card/.ai-inline-table sit INSIDE the bot message bubble (see buildDataHtml in
   marathon-ai.js), right after the answer text, instead of as separate blocks below it - one visual
   section per answer. */
.ai-inline-card, .ai-inline-table { margin-top: .6rem; }
.ai-msg-bot .ai-inline-card:last-child, .ai-msg-bot .ai-inline-table:last-child { margin-bottom: 0; }
.ai-inline-table { overflow-x: auto; }
.ai-card-title {
    font-weight: 700;
    color: var(--brand-1);
    margin-bottom: .4rem;
    font-size: 1.05em;
    overflow-wrap: anywhere;
}
.ai-card-body {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}
.ai-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .3rem 0;
    border-bottom: 1px dashed #eee;
}
.ai-info-row:last-child { border-bottom: none; }
.ai-info-label { color: #777; font-size: .9em; }
.ai-info-value { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.ai-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 12px;
    font-size: .85em;
    font-weight: 700;
}
.ai-badge-success { background: #d1e7dd; color: #0f5132; }
.ai-badge-warning { background: #fff3cd; color: #7a5c00; }
.ai-badge-danger { background: #f8d7da; color: #842029; }
.ai-badge-muted { background: #e9ecef; color: #495057; }

.ai-eligibility-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}
.ai-eligibility-head .ai-card-title { margin-bottom: 0; }
.ai-eligibility-date { font-weight: 700; color: #222; margin-bottom: .35rem; font-size: .92em; }
.ai-eligibility-desc { color: #777; font-size: .88em; margin-bottom: .3rem; }
.ai-eligibility-conditions { margin: 0; padding-left: 1.1rem; font-size: .92em; }
.ai-eligibility-conditions li { padding: .1rem 0; }
.ai-eligibility-note { color: #999; font-size: .82em; margin-top: .35rem; }

.ai-panel.ai-dark .ai-eligibility-date { color: #f0f0f0; }
.ai-panel.ai-dark .ai-eligibility-desc { color: #aaa; }
.ai-panel.ai-dark .ai-eligibility-note { color: #888; }

/* Deliberately a real grid table (not .ai-data-table's universal stacked-card layout) - size-chart data
   is meant to be compared across sizes at a glance, which stacking into separate boxes defeats. */
.ai-compare-table { width: 100%; border-collapse: collapse; font-size: .85em; }
.ai-compare-table th, .ai-compare-table td { padding: .35rem .3rem; text-align: right; }
.ai-compare-table th:first-child, .ai-compare-table td:first-child { text-align: left; font-weight: 600; }
.ai-compare-table thead tr { border-bottom: 1px solid #ddd; }
.ai-compare-table tbody tr { border-bottom: 1px dashed #eee; }
.ai-compare-table tbody tr:last-child { border-bottom: none; }
.ai-compare-table th { color: #777; font-weight: 600; }

.ai-panel.ai-dark .ai-compare-table thead tr { border-color: #444; }
.ai-panel.ai-dark .ai-compare-table tbody tr { border-color: #3a3a3a; }
.ai-panel.ai-dark .ai-compare-table th { color: #aaa; }

.ai-pending-note {
    background: #fff3cd;
    color: #7a5c00;
    border-radius: 6px;
    padding: .5rem .7rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* "Still need help?" ticket prompt - shown only under unsuccessful/unclear answers, kept visually
   secondary to the answer itself (muted box, small outline button, not a big filled CTA). Sits INSIDE the
   relevant message bubble (see appendHelpPrompt in marathon-ai.js), so margin-top separates it from the
   text/data above it in that same bubble. */
.ai-help-prompt {
    border: 1px solid var(--ai-border, #e2e2e2);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin-top: .6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    background: #fafafa;
    font-size: .9em;
}
.ai-help-prompt .btn {
    flex-shrink: 0;
    font-size: .85em;
    padding: 0 .8rem;
    height: 32px;
}

.ai-ticket-back {
    background: transparent;
    border: none;
    color: var(--brand-1);
    font-weight: 500;
    padding: 0;
    margin-bottom: .75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ai-ticket-contact-note {
    color: #0f5132;
    font-weight: 600;
    margin-bottom: .5rem;
}

/* Browse-by-topic menu (☰) - collapsible sections, each an icon-tile grid of one-tap questions.
   Alternative to typing. Collapsed by default except the first (see marathon-ai.js openTopicsMenu). */
.ai-topic-section { border: 1px solid #eee; border-radius: 8px; margin-bottom: 1rem; overflow: hidden; flex-shrink: 0; }
.ai-topic-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: .7rem .9rem;
    font-size: .88rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}
.ai-topic-chevron { color: var(--brand-1); transition: transform .15s ease; }
.ai-topic-section.ai-topic-open .ai-topic-chevron { transform: rotate(180deg); }
.ai-topic-section-note {
    display: none;
    margin: 0;
    padding: 0 .9rem .5rem;
    font-size: .78rem;
    color: #777;
}
.ai-topic-section.ai-topic-open .ai-topic-section-note { display: block; }
.ai-panel.ai-dark .ai-topic-section-note { color: #aaa; }

.ai-topic-grid {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .6rem;
    padding: .3rem .9rem .9rem;
}
.ai-topic-section.ai-topic-open .ai-topic-grid { display: grid; }
.ai-topic-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    background: transparent;
    border: none;
    padding: .2rem;
    font-size: .74rem;
    line-height: 1.25;
    text-align: center;
    color: #333;
    cursor: pointer;
}
.ai-topic-tile:hover .ai-topic-icon { background: #ececec; }
.ai-topic-tile:hover { color: var(--brand-1); }
.ai-topic-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f2f2f2;
    color: #333;
    font-size: 1.05rem;
    line-height: 1;
}

.ai-panel.ai-dark .ai-topic-section { border-color: #33343b; }
.ai-panel.ai-dark .ai-topic-section-header { color: #e6e6e6; }
.ai-panel.ai-dark .ai-topic-tile { color: #e6e6e6; }
.ai-panel.ai-dark .ai-topic-tile:hover { color: #fdba74; }
.ai-panel.ai-dark .ai-topic-icon { background: #2b2c33; color: #e6e6e6; }
.ai-panel.ai-dark .ai-topic-tile:hover .ai-topic-icon { background: #3a2a1a; }

/* Desktop/tablet - wider panel comfortably fits 3 tiles per row instead of 2. */
@media (min-width: 768px) {
    .ai-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ai-ticket-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 2rem;
}
.ai-ticket-success-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #d1e7dd;
    color: #0f5132;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Responsive breakpoints ===== */

/* Laptop/Desktop: 1024px and up - right-side panel, 420px wide by default, drag-resizable */
@media (min-width: 1024px) {
    .ai-panel { width: 420px; max-width: 90vw; }
    .ai-panel-header { padding: 18px; }
    .ai-panel-scroll { padding: 18px; }
    .ai-panel-footer { padding: 18px; }
    .ai-resize-handle { display: block; }
}

/* Tablet: 768px-1023px - still a right-side panel, narrower, and also drag-resizable */
@media (min-width: 768px) and (max-width: 1023px) {
    .ai-panel { width: min(420px, 80vw); max-width: none; }
    .ai-panel-header { padding: 16px; }
    .ai-panel-scroll { padding: 16px; }
    .ai-panel-footer { padding: 16px; }
    .ai-resize-handle { display: block; }
}

/* Mobile: up to 767px - full-screen chat, not a narrow side panel */
@media (max-width: 767px) {
    .ai-panel {
        width: 100%;
        max-width: none;
        height: 100vh;  /* fallback for browsers without dvh support */
        height: 100dvh; /* modern viewport unit accounts for the on-screen keyboard/address bar */
        top: 0; bottom: auto; right: 0;
    }
    .ai-panel-header { padding: 14px 16px; }
    .ai-panel-scroll { padding: 12px 16px; }
    .ai-panel-footer { padding: 12px 16px; }

    .ai-close-btn { width: 44px; height: 44px; }
    #btnOpenAiAssistant { width: 56px; height: 56px; }

    .ai-msg { max-width: 100%; }

    /* Suggested chips stay full-width, stacked buttons rather than a cramped chip row. */
    .ai-suggested-q { display: flex; width: 100%; margin: 0 0 .5rem; text-align: left; }
}