/*
 * Apollo Chat Widget — chat-widget.css v3.8.0
 * Minimal: Tailwind CDN handles all utility classes.
 * This file only contains: animations, float panel transition,
 * verify-form show/hide toggle, page-mode layout, and structural rules Tailwind can't cover.
 */

/* ── Animations ─────────────────────────────────────────────────────────────── */

@keyframes apollo-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-5px); }
}

@keyframes apollo-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}

.apollo-live-dot {
    animation: apollo-pulse 2s infinite;
}

.apollo-dot:nth-child(1) { animation: apollo-bounce 1.2s infinite 0s; }
.apollo-dot:nth-child(2) { animation: apollo-bounce 1.2s infinite .2s; }
.apollo-dot:nth-child(3) { animation: apollo-bounce 1.2s infinite .4s; }

.apollo-typing-status {
    font-size: 0.68rem;
    color: #94a3b8;
    min-height: 1em;
    transition: opacity 0.4s ease;
}

/* ── Uniform field base — overrides any WordPress theme interference ─────────── */
/* All selects, inputs and the verify button inside the widget share one token set */

.apollo-chat .apollo-field {
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}

/* Native select arrow — re-add after resetting appearance */
.apollo-chat .apollo-club-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.apollo-chat .apollo-field:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* Chat input — pill shape to differentiate the send row */
.apollo-chat .apollo-field--chat {
    height: 40px;
    border-radius: 9999px;
    padding: 0 16px;
    flex: 1;
}

/* Dark mode */
.apollo-chat.dark .apollo-field {
    color: #e2e8f0;
    background: #1e293b;
    border-color: #334155;
}

.apollo-chat.dark .apollo-field:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,.15);
}

/* Verify button — matches field height, clean blue */
.apollo-chat .apollo-verify-btn {
    box-sizing: border-box;
    height: 38px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}

.apollo-chat .apollo-verify-btn:hover { background: #2563eb; }

/* ── Verify form toggle ──────────────────────────────────────────────────────── */

.apollo-chat .apollo-verify-form {
    display: none;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px;
    align-items: center;
}

.apollo-chat .apollo-verify-form.is-visible {
    display: flex !important;
}

/* Force fields to respect flex — beats theme's width:100%/display:block rules */
.apollo-chat .apollo-verify-form .apollo-club-select {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
}

.apollo-chat .apollo-verify-form .apollo-area-input {
    flex: 0 0 90px !important;
    width: 90px !important;
    min-width: 0 !important;
    display: block !important;
}

.apollo-chat .apollo-verify-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    display: block !important;
}

/* ── Floating panel open/close transition ────────────────────────────────────── */

.apollo-float-panel {
    transform-origin: bottom right;
    transition: opacity .2s ease, transform .2s ease;
}

.apollo-float-panel[aria-hidden="true"] {
    opacity: 0;
    transform: scale(.93) translateY(8px);
    pointer-events: none;
}

.apollo-float-panel[aria-hidden="false"] {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* ── Scrollbar (messages area) ───────────────────────────────────────────────── */

.apollo-messages::-webkit-scrollbar       { width: 4px; }
.apollo-messages::-webkit-scrollbar-track { background: transparent; }
.apollo-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }

/* Matches when JS adds .dark to the .apollo-chat container (class strategy) */
.dark .apollo-messages::-webkit-scrollbar-thumb { background: #475569; }

/* ── Disclaimer bar ──────────────────────────────────────────────────────────── */

.apollo-disclaimer {
    font-size: 10px;
    color: #94a3b8;
    text-align: center;
    padding: 4px 8px 2px;
    line-height: 1.5;
}

.dark .apollo-disclaimer { color: #64748b; }

.apollo-privacy-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 10px;
    color: #ef4444;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.apollo-privacy-link:hover { color: #dc2626; }

/* ── Avatar — bubble button ──────────────────────────────────────────────────── */

.apollo-bubble-btn {
    position: relative;
}

.apollo-bubble-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ✕ badge — bottom-right corner, visible only when panel is open */
.apollo-bubble-close-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

.apollo-float.is-open .apollo-bubble-close-badge {
    display: flex;
}

/* ── Avatar — chat header (float + inline) ───────────────────────────────────── */

.apollo-header-avatar {
    width: clamp(28px, 1.7vw, 40px);
    height: clamp(28px, 1.7vw, 40px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

/* ── Avatar — page mode intro hero ──────────────────────────────────────────── */

.apollo-page-intro-avatar {
    width: clamp(80px, 23vw, 108px);
    height: clamp(80px, 23vw, 108px);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 4px 20px rgba(0, 0, 0, 0.12);
}

.apollo-page.dark .apollo-page-intro-avatar {
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2), 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ── Avatar — page mode top bar ──────────────────────────────────────────────── */

.apollo-page-header-avatar {
    width: clamp(32px, 2vw, 44px);
    height: clamp(32px, 2vw, 44px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
    margin-right: 4px;
}

/* ── Avatar — per-message bubble ────────────────────────────────────────────── */

.apollo-msg-avatar {
    width: clamp(28px, 1.7vw, 40px);
    height: clamp(28px, 1.7vw, 40px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Avatar — inline mode intro screen ──────────────────────────────────────── */

.apollo-inline-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 12px;
    gap: 8px;
    text-align: center;
    pointer-events: none;
}

.apollo-inline-intro p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.apollo-inline.has-messages .apollo-inline-intro {
    display: none;
}

/* ── Thinking indicator — circular spinner ring ──────────────────────────────── */

@keyframes apollo-spin-ring {
    to { transform: rotate(360deg); }
}

/* Wrapper that surrounds the avatar during typing — spinning arc drawn by ::before */
.apollo-avatar-ring {
    position: relative;
    width: clamp(28px, 1.7vw, 40px);
    height: clamp(28px, 1.7vw, 40px);
    flex-shrink: 0;
    margin-top: 2px;
}

.apollo-avatar-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.18);
    border-top-color: rgba(59, 130, 246, 0.85);
    animation: apollo-spin-ring 0.85s linear infinite;
}

.apollo-avatar-ring .apollo-msg-avatar {
    margin-top: 0;
    flex-shrink: unset;
}

/* Header avatar thinking state (chat-widget.js adds this class to the header img) */
@keyframes apollo-pulse-thinking {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    60%       { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}

.apollo-avatar--thinking {
    animation: apollo-pulse-thinking 1.4s ease-in-out infinite;
}

/* ── Turnstile verification overlay (inside .apollo-messages) ────────────────── */

.apollo-turnstile-overlay {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
}

.apollo-turnstile-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: apollo-spin 0.75s linear infinite;
}

@keyframes apollo-spin {
    to { transform: rotate(360deg); }
}

.apollo-turnstile-overlay-text {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    margin: 0;
}

.apollo-turnstile-overlay.is-error .apollo-turnstile-spinner {
    display: none;
}

.apollo-turnstile-error-icon {
    font-size: 28px;
    line-height: 1;
}

.apollo-turnstile-overlay.is-error .apollo-turnstile-overlay-text {
    color: #ef4444;
}

/* ── Turnstile challenge modal ───────────────────────────────────────────────── */
/* Shown when CF escalates from invisible to interactive (checkbox challenge).    */
/* Appended to document.body so position:fixed is always relative to viewport.   */

.apollo-ts-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
}

.apollo-ts-modal.is-open {
    display: flex;
    animation: apollo-ts-backdrop-in 0.2s ease;
}

@keyframes apollo-ts-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.apollo-ts-modal-box {
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px 24px;
    text-align: center;
    max-width: 340px;
    width: calc(100% - 48px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.12);
    animation: apollo-ts-box-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes apollo-ts-box-in {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.apollo-ts-modal-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 14px;
}

.apollo-ts-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 8px;
}

.apollo-ts-modal-hint {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 20px;
    line-height: 1.55;
}

.apollo-ts-widget-slot {
    display: flex;
    justify-content: center;
    min-height: 65px;
    margin-bottom: 16px;
}

.apollo-ts-modal-footer {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

/* ── Privacy Policy modal ────────────────────────────────────────────────────── */

.apollo-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, .45);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.apollo-modal-backdrop.is-open {
    display: flex;
}

.apollo-modal-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.apollo-modal-header {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.apollo-modal-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.apollo-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s;
}

.apollo-modal-close:hover { color: #334155; }

.apollo-modal-body {
    padding: 18px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.65;
    color: #334155;
}

.apollo-modal-body p          { margin: 0 0 0.75em; }
.apollo-modal-body p:last-child { margin-bottom: 0; }
.apollo-modal-body ul,
.apollo-modal-body ol         { margin: 0.4em 0 0.75em 1.4em; padding: 0; }
.apollo-modal-body li         { margin: 0.25em 0; }
.apollo-modal-body strong     { font-weight: 600; }
.apollo-modal-body a          { color: #3b82f6; text-decoration: underline; }

/* ── Consent modal ───────────────────────────────────────────────────────────── */
/* Full-screen overlay with blurred backdrop. Shown once per session when
   apollo_consent_enabled is true. Blocks all interaction until Accept/Decline. */

.apollo-consent-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.apollo-consent-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .35);
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: apollo-consent-in .22s ease;
}

@keyframes apollo-consent-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.apollo-consent-body {
    padding: 28px 28px 20px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
    flex: 1;
}

.apollo-consent-body p          { margin: 0 0 0.85em; }
.apollo-consent-body p:last-child { margin-bottom: 0; }
.apollo-consent-body ul,
.apollo-consent-body ol         { margin: 0.4em 0 0.85em 1.4em; padding: 0; }
.apollo-consent-body li         { margin: 0.3em 0; }
.apollo-consent-body strong     { font-weight: 600; }
.apollo-consent-body a          { color: #3b82f6; text-decoration: underline; }
.apollo-consent-body h1,
.apollo-consent-body h2,
.apollo-consent-body h3         { font-weight: 700; margin: 0 0 0.5em; color: #1e293b; }

.apollo-consent-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 28px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    background: #f8fafc;
}

.apollo-consent-btn {
    padding: 10px 26px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
}

.apollo-consent-btn--decline {
    background: #f1f5f9;
    color: #64748b;
}

.apollo-consent-btn--decline:hover {
    background: #fee2e2;
    color: #dc2626;
}

.apollo-consent-btn--accept {
    background: #3b82f6;
    color: #fff;
}

.apollo-consent-btn--accept:hover {
    background: #2563eb;
}

/* ── Page mode — full-viewport, Claude-style layout ─────────────────────────── */
/*
 * [apollo_chat mode="page"]
 * Takes over the entire viewport: header top, messages centre, input bottom.
 * For best results use a page template that hides the theme header/footer.
 */

.apollo-page {
    /* Normal document flow — sits below theme header, above theme footer.
       Height is set by JS to fill exactly from this element down to the
       bottom of the viewport, so header and footer remain fully visible.

       Full-bleed breakout: escapes the theme/Elementor content container
       so the background fills the full viewport width, not just the column. */
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f6f7f9;
    overflow: hidden;
    /* Fallback height before JS runs */
    min-height: 480px;

    /* Break out of any parent max-width container (Elementor, theme, etc.) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.apollo-page.dark {
    background: #0d0f17;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */

.apollo-page-header {
    flex-shrink: 0;
    background: #f6f7f9;
    border-bottom: none;
}

.apollo-page.dark .apollo-page-header {
    background: #0d0f17;
    border-bottom: none;
}

.apollo-page-header-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.apollo-page-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.apollo-page-status-label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.apollo-page.dark .apollo-page-status-label {
    color: #94a3b8;
}

/* Reuse the live-dot pulse; override size/position for page header */
.apollo-page-header .apollo-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    flex-shrink: 0;
}

/* ── Body — scrollable messages column ───────────────────────────────────────── */

/* Pre-chat: collapsed so intro + spacer can centre the footer */
.apollo-page-body {
    flex: 0 0 0;
    overflow: hidden;
    visibility: hidden;
    display: flex;
    flex-direction: column;
}

/* Post-chat: expands to fill, messages visible */
@keyframes apollo-body-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.apollo-page.has-messages .apollo-page-body {
    flex: 1;
    overflow: hidden;
    visibility: visible;
    animation: apollo-body-fadein 0.25s ease;
}

.apollo-page .apollo-messages {
    flex: 1;
    overflow-y: auto;
    padding: 32px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    /* Remove the background set on inline/float mode */
    background: transparent !important;
}

/* Wider message bubbles in the page layout */
.apollo-page .apollo-msg {
    max-width: 88%;
}

/* ── Verifying state — spinner only, footer/spacer fully removed ─────────────── */

/* Footer and spacer are display:none during verification — not just transparent.  */
/* opacity:0 still renders backgrounds and can bleed through on some themes.       */
.apollo-page.is-verifying .apollo-page-footer,
.apollo-page.is-verifying .apollo-page-spacer {
    display: none;
}

/* Intro stays in the flex flow as flex:1, filling all space below the header.    */
/* Align-items switches to center so the spinner sits at the visual midpoint.     */
.apollo-page.is-verifying .apollo-page-intro {
    align-items: center;
    padding-bottom: 0;
}

/* ── Verifying spinner — sits inside .apollo-page-intro ─────────────────────── */

.apollo-page-verifying {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.apollo-page.is-verifying .apollo-page-verifying {
    display: flex;
}

.apollo-page.is-verifying .apollo-page-intro-inner {
    display: none;
}

@keyframes apollo-verify-spin {
    to { transform: rotate(360deg); }
}

.apollo-page-verifying-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: apollo-verify-spin 0.8s linear infinite;
}

.apollo-page.dark .apollo-page-verifying-spinner {
    border-color: #1e2236;
    border-top-color: #60a5fa;
}

.apollo-page-verifying-text {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

.apollo-page-verifying-error-icon {
    font-size: 36px;
    line-height: 1;
}

/* Reload & Retry button — shown when Turnstile is fully blocked */
.apollo-retry-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 22px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.apollo-retry-btn:hover {
    background: #2563eb;
}

.apollo-page.dark .apollo-retry-btn {
    background: #2563eb;
}

.apollo-page.dark .apollo-retry-btn:hover {
    background: #1d4ed8;
}

/* ── Intro — centring hero above input (pre-chat only) ───────────────────────── */

.apollo-page-intro {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 32px;
}

.apollo-page.has-messages .apollo-page-intro {
    display: none;
}

.apollo-page-intro-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.apollo-page-intro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 4px 20px rgba(59, 130, 246, .35);
}

.apollo-page.dark .apollo-page-intro-icon {
    background: #2563eb;
    box-shadow: 0 4px 20px rgba(37, 99, 235, .45);
}

.apollo-page-intro-heading {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.apollo-page.dark .apollo-page-intro-heading {
    color: #e2e8f0;
}

.apollo-page-intro-sub {
    max-width: 480px;
    margin: 0;
    padding: 12px 16px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.65;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    text-align: left;
    overflow-wrap: break-word;
}

.apollo-page.dark .apollo-page-intro-sub {
    background: #1e2a3a;
    border-color: #2d4a6e;
    color: #94a3b8;
}

/* ── Spacer — balancing flex below input (pre-chat only) ─────────────────────── */

.apollo-page-spacer {
    flex: 1;
}

.apollo-page.has-messages .apollo-page-spacer {
    display: none;
}

/* ── Footer — pinned input bar ────────────────────────────────────────────────── */

.apollo-page-footer {
    flex-shrink: 0;
    padding: 0 20px 20px;
    background: #f6f7f9;
}

.apollo-page.dark .apollo-page-footer {
    background: #0d0f17;
}

/* Input area card: centred, rounded, elevated */
.apollo-page .apollo-input-area {
    max-width: 760px;
    margin: 0 auto;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 1px solid #e2e8f0 !important;  /* override the Tailwind border-t utility */
    border-radius: 20px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .04);
    padding: 10px 14px 8px !important;
}

.apollo-page.dark .apollo-input-area {
    background: #13151f !important;
    border-color: #1e2236 !important;
    border-top-color: #1e2236 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

/* Pill input inside the card */
.apollo-page .apollo-field--chat {
    background: #f1f5f9 !important;
    border-color: transparent !important;
}

.apollo-page.dark .apollo-field--chat {
    background: #1e2236 !important;
    border-color: transparent !important;
    color: #e2e8f0 !important;
}

.apollo-page .apollo-field--chat:focus {
    background: #fff !important;
    border-color: #93c5fd !important;
}

.apollo-page.dark .apollo-field--chat:focus {
    background: #262840 !important;
    border-color: #60a5fa !important;
}

/* ── Markdown rendering inside AI message bubbles ────────────────────────────── */

.apollo-answer p                { margin: 0 0 0.45em; line-height: 1.55; }
.apollo-answer p:last-child     { margin-bottom: 0; }
.apollo-answer ol,
.apollo-answer ul               { margin: 0.3em 0 0.45em 1.3em; padding: 0; }
.apollo-answer ol               { list-style-type: decimal; }
.apollo-answer ul               { list-style-type: disc; }
.apollo-answer li               { margin: 0.2em 0; line-height: 1.5; }
.apollo-answer li + li          { margin-top: 0.25em; }
.apollo-answer ul ul            { list-style-type: circle; }
.apollo-answer ul ul ul         { list-style-type: square; }
.apollo-answer strong           { font-weight: 600; }

/* ── Markdown rendering inside embed.js bot bubbles ─────────────────────────── */

.apollo-bubble-bot p            { margin: 0 0 0.45em; line-height: 1.55; }
.apollo-bubble-bot p:last-child { margin-bottom: 0; }
.apollo-bubble-bot ol,
.apollo-bubble-bot ul           { margin: 0.3em 0 0.45em 1.3em; padding: 0; }
.apollo-bubble-bot ol           { list-style-type: decimal; }
.apollo-bubble-bot ul           { list-style-type: disc; }
.apollo-bubble-bot ul ul        { list-style-type: circle; }
.apollo-bubble-bot ul ul ul     { list-style-type: square; }
.apollo-bubble-bot li           { margin: 0.2em 0; line-height: 1.5; }
.apollo-bubble-bot li + li      { margin-top: 0.25em; }
.apollo-bubble-bot strong       { font-weight: 600; }

/* ── Table rendering (.apollo-table) ─────────────────────────────────────────── */

.apollo-answer .apollo-table,
.apollo-bubble-bot .apollo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    margin: 0.5em 0 0.75em;
    line-height: 1.4;
}

.apollo-answer .apollo-table th,
.apollo-answer .apollo-table td,
.apollo-bubble-bot .apollo-table th,
.apollo-bubble-bot .apollo-table td {
    padding: 0.35em 0.65em;
    border: 1px solid #d1d5db;
    vertical-align: top;
}

.apollo-answer .apollo-table th,
.apollo-bubble-bot .apollo-table th {
    background: #f3f4f6;
    font-weight: 600;
    white-space: nowrap;
}

.apollo-answer .apollo-table tr:nth-child(even) td,
.apollo-bubble-bot .apollo-table tr:nth-child(even) td {
    background: #fafafa;
}

[data-apollo-theme="dark"] .apollo-table th,
[data-apollo-theme="dark"] .apollo-table td         { border-color: #4b5563; }
[data-apollo-theme="dark"] .apollo-table th         { background: #1e2030; }
[data-apollo-theme="dark"] .apollo-table tr:nth-child(even) td { background: #1a1c2e; }