/* ══════════════════════════════════════════════════════════════════
   Xerion AI - floating chat assistant (bottom-right).
   Colours come from tokens.css, so light, dark and seasonal themes
   carry through automatically. Markup is built by xerion-ai.js.
   ══════════════════════════════════════════════════════════════════ */

#xai-root {
    --xai-gap: 20px;
    --xai-accent: var(--blue, #1a56db);
    --xai-accent-dark: var(--blue-dark, #1344b8);
    font-family: var(--font-body, 'DM Sans', Arial, sans-serif);
}

/* The seasonal picker uses the same corner on pages without a header toggle. */
body.xai-on .season-fab { bottom: 92px; }

/* ── Launcher bubble ── */
.xai-launcher {
    position: fixed;
    right: var(--xai-gap); bottom: var(--xai-gap);
    z-index: 2500;
    display: flex; align-items: center; gap: 10px;
    height: 58px; padding: 0 20px 0 8px;
    border: none; border-radius: var(--radius-pill, 999px);
    background: var(--xai-accent); color: #fff;
    font: 600 0.98rem var(--font-head, 'Outfit', sans-serif);
    box-shadow: 0 10px 30px rgba(16,24,40,0.28), 0 2px 6px rgba(16,24,40,0.16);
    cursor: pointer;
    transition: transform var(--ease, 0.15s ease), background var(--ease, 0.15s ease), box-shadow var(--ease, 0.15s ease);
}
.xai-launcher:hover { background: var(--xai-accent-dark); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16,24,40,0.32); }
.xai-launcher:focus-visible { outline: none; box-shadow: var(--focus), 0 10px 30px rgba(16,24,40,0.28); }
.xai-launcher-icon {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.16);
}
.xai-launcher-icon svg { width: 22px; height: 22px; }
.xai-launcher .xai-dot {
    position: absolute; top: 6px; left: 38px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #22c55e; border: 2px solid var(--xai-accent);
}
.xai-root-open .xai-launcher { transform: scale(0.85); opacity: 0; pointer-events: none; }

/* Teaser that pops out of the bubble once per visitor. */
.xai-teaser {
    position: fixed;
    right: var(--xai-gap); bottom: calc(var(--xai-gap) + 70px);
    z-index: 2500;
    max-width: 260px;
    padding: 12px 34px 12px 14px;
    background: var(--card, #fff); color: var(--ink, #101828);
    border: 1px solid var(--border, #e4e7ec);
    border-radius: 14px 14px 4px 14px;
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(16,24,40,0.12));
    font-size: 0.9rem; line-height: 1.45;
    cursor: pointer;
    animation: xai-pop 0.25s ease-out;
}
.xai-teaser strong { font-family: var(--font-head, 'Outfit', sans-serif); }
.xai-teaser-close {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; border: none; border-radius: 50%;
    background: transparent; color: var(--ink-light, #667085);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.xai-teaser-close:hover { background: var(--surface, #f7f8fa); }

/* ── Panel ── */
.xai-panel {
    position: fixed;
    right: var(--xai-gap); bottom: var(--xai-gap);
    z-index: 2600;
    width: 390px; height: min(620px, calc(100vh - 2 * var(--xai-gap)));
    display: flex; flex-direction: column;
    background: var(--card, #fff); color: var(--ink, #101828);
    border: 1px solid var(--border, #e4e7ec);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(16,24,40,0.24), 0 4px 12px rgba(16,24,40,0.10);
    overflow: hidden;
    transform-origin: bottom right;
    animation: xai-pop 0.2s ease-out;
}
.xai-panel[hidden] { display: none; }
.xai-panel.xai-expanded { width: min(720px, calc(100vw - 2 * var(--xai-gap))); height: calc(100vh - 2 * var(--xai-gap)); }

@keyframes xai-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

.xai-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 12px 14px 16px;
    background: var(--hero-bg, #0a1428); color: var(--on-dark, #fff);
}
.xai-avatar {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--xai-accent); color: #fff;
}
.xai-avatar svg { width: 20px; height: 20px; }
.xai-title { flex: 1; min-width: 0; }
.xai-title strong { display: block; font: 600 1rem/1.2 var(--font-head, 'Outfit', sans-serif); }
.xai-title span { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--on-dark-mid, #b6c4d9); }
.xai-title span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.xai-head-btn {
    flex: none; width: 34px; height: 34px;
    display: grid; place-items: center;
    border: none; border-radius: 8px;
    background: transparent; color: var(--on-dark-mid, #b6c4d9);
    cursor: pointer;
}
.xai-head-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.xai-head-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.xai-head-btn svg { width: 18px; height: 18px; }

/* ── Messages ── */
.xai-log {
    flex: 1; overflow-y: auto;
    padding: 18px 16px 8px;
    background: var(--surface, #f7f8fa);
    scroll-behavior: smooth;
}
.xai-msg { display: flex; margin-bottom: 12px; }
.xai-msg-user { justify-content: flex-end; }
.xai-bubble {
    max-width: 86%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.93rem; line-height: 1.5;
    overflow-wrap: anywhere;
}
.xai-msg-bot .xai-bubble {
    background: var(--card, #fff); color: var(--ink, #101828);
    border: 1px solid var(--border, #e4e7ec);
    border-bottom-left-radius: 4px;
}
.xai-msg-user .xai-bubble {
    background: var(--xai-accent); color: #fff;
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}
.xai-msg-error .xai-bubble {
    background: var(--red-faint, #fdecec); color: var(--red, #dc2626);
    border-color: transparent;
}
.xai-bubble p { margin: 0 0 8px; }
.xai-bubble p:last-child, .xai-bubble ul:last-child { margin-bottom: 0; }
.xai-bubble ul, .xai-bubble ol { margin: 0 0 8px; padding-left: 20px; }
.xai-bubble ol:last-child { margin-bottom: 0; }
.xai-bubble li { margin: 2px 0; }
.xai-bubble a { color: var(--xai-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.xai-bubble code { font-family: var(--font-mono, monospace); font-size: 0.85em; background: var(--surface, #f7f8fa); padding: 1px 4px; border-radius: 4px; }

.xai-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.xai-typing i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ink-light, #667085); opacity: 0.4;
    animation: xai-blink 1.2s infinite;
}
.xai-typing i:nth-child(2) { animation-delay: 0.2s; }
.xai-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes xai-blink { 0%, 80%, 100% { opacity: 0.25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* Suggested questions */
.xai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.xai-chip {
    padding: 7px 12px;
    border: 1px solid var(--border-strong, #cfd5df); border-radius: var(--radius-pill, 999px);
    background: var(--card, #fff); color: var(--ink, #101828);
    font: 500 0.84rem var(--font-body, sans-serif);
    cursor: pointer; text-align: left;
}
.xai-chip:hover:not(:disabled) { border-color: var(--xai-accent); color: var(--xai-accent); background: var(--blue-faint, #eef4ff); }
.xai-chip:focus-visible, .xai-retry:focus-visible { outline: none; box-shadow: var(--focus); }
.xai-chip:disabled { opacity: 0.5; cursor: default; }
.xai-retry {
    display: inline-block; margin-top: 8px; padding: 6px 12px;
    border: 1px solid currentColor; border-radius: var(--radius-pill, 999px);
    background: transparent; color: inherit;
    font: 600 0.84rem var(--font-body, sans-serif); cursor: pointer;
}
.xai-retry:disabled { opacity: 0.5; cursor: default; }

/* ── Composer ── */
.xai-form {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border, #e4e7ec);
    background: var(--card, #fff);
}
.xai-input {
    flex: 1; resize: none;
    max-height: 120px; min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong, #cfd5df); border-radius: 12px;
    background: var(--card, #fff); color: var(--ink, #101828);
    font: 0.94rem/1.4 var(--font-body, sans-serif);
}
.xai-input:focus { outline: none; border-color: var(--xai-accent); box-shadow: var(--focus); }
.xai-send {
    flex: none; width: 42px; height: 42px;
    display: grid; place-items: center;
    border: none; border-radius: 12px;
    background: var(--xai-accent); color: #fff;
    cursor: pointer;
}
.xai-send:hover { background: var(--xai-accent-dark); }
.xai-send:disabled { opacity: 0.45; cursor: default; }
.xai-send svg { width: 18px; height: 18px; }
.xai-foot {
    padding: 0 12px 10px;
    background: var(--card, #fff);
    font-size: 0.72rem; color: var(--ink-light, #667085); text-align: center;
}
.xai-foot a { color: inherit; }

.xai-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Phones: launcher shrinks to a circle, panel goes full screen ── */
@media (max-width: 560px) {
    #xai-root { --xai-gap: 16px; }
    .xai-launcher { width: 58px; padding: 0; justify-content: center; }
    .xai-launcher-label { display: none; }
    .xai-launcher-icon { background: transparent; }
    .xai-launcher .xai-dot { left: 38px; }
    .xai-panel, .xai-panel.xai-expanded {
        right: 0; bottom: 0; width: 100%; height: 100%;
        border-radius: 0; border: none;
    }
    .xai-expand { display: none !important; }
    body.xai-on .season-fab { bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
    .xai-panel, .xai-teaser { animation: none; }
    .xai-launcher, .xai-log { transition: none; scroll-behavior: auto; }
    .xai-typing i { animation: none; opacity: 0.6; }
}

@media print { #xai-root { display: none !important; } }