/* ==========================================================================
   ai-chat.css — floating AI search widget (rag_search)

   Every color here is a semantic token from theme_bridge.css, so dark mode and
   the wallpaper themes are handled by the token layer rather than by overrides
   in this file. See the rules at the top of theme_bridge.css.

   Contents
     1. Launcher button
     2. Panel shell
     3. Messages
     4. Sources
     5. Composer
     6. Mobile layout (≤ 1023px — clears the bottom nav)
   ========================================================================== */


/* ==========================================================================
   1. LAUNCHER BUTTON
   ========================================================================== */

.ai-chat-launcher {
    position: fixed;
    right: 20px;
    /* Sits above the footer/bottom-nav stack; the mobile block below raises it
       clear of the bottom navigation. */
    bottom: 24px;
    z-index: 1035;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* No fill, border or shadow: the artwork is the whole button face, so any
       of those would only draw a ring around it. */
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s var(--ag-bounce);
}

.ai-chat-launcher-icon {
    display: block;
    width: 100%;
    height: 100%;
    /* flex: none — as a flex item this would otherwise be shrunk by any sibling
       that turns up next to it, which squashes a square icon into an ellipse. */
    flex: none;
    object-fit: cover;
    border-radius: 50%;
}

/* Lift only — a hover shadow would reintroduce the ring the fill just lost. */
.ai-chat-launcher:hover,
.ai-chat-launcher:focus-visible {
    transform: translateY(-2px) scale(1.04);
}

.ai-chat-launcher:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Open state: the artwork gives way to a chevron on the accent fill, so the
   button becomes the way back out. It used to hide itself here, which left an
   empty corner under the panel and no obvious close beyond the header X. */
/* Scoped to the parent on purpose. Font Awesome's `.fas { display: ... }` has
   the same specificity as a bare `.ai-chat-launcher-close` and loads AFTER this
   file, so it wins the tie and the chevron stays visible while the panel is
   closed — where it sits beside the artwork and squashes it. Two classes beat
   one, whatever the load order. */
.ai-chat-launcher .ai-chat-launcher-close {
    display: none;
    font-size: var(--fs-700);
    color: var(--text-on-accent);
}

.ai-chat-launcher[aria-expanded="true"] {
    background: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.ai-chat-launcher[aria-expanded="true"] .ai-chat-launcher-icon { display: none; }

.ai-chat-launcher[aria-expanded="true"] .ai-chat-launcher-close { display: block; }


/* ==========================================================================
   2. PANEL SHELL
   ========================================================================== */

.ai-chat-panel {
    position: fixed;
    right: 20px;
    /* Clears the launcher (24px + 52px + a 12px gap), which stays on screen as
       the close button now instead of hiding underneath this panel. */
    bottom: 88px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 32px));
    /* Tall enough that the starter questions arrive unscrolled, and no taller.
       The second term keeps it inside short viewports. */
    height: min(520px, calc(100vh - 112px));
    border: 1px solid var(--border-default);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* [hidden] alone loses to display:flex above, so restate it. */
.ai-chat-panel[hidden] {
    display: none;
}

.ai-chat-panel.is-opening {
    animation: ai-chat-rise 0.22s var(--ag-bounce);
}

@keyframes ai-chat-rise {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* A filled accent bar, so the panel reads as one object against whatever page
   is behind it. The title centres and the close button sits over it, rather
   than the two sharing a row — which keeps the title optically centred. */
.ai-chat-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 44px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--text-on-accent);
}

.ai-chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--fs-600);
    font-weight: var(--fw-semibold);
    color: var(--text-on-accent);
}

.ai-chat-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-on-accent);
    opacity: 0.85;
    cursor: pointer;
    transition: background 0.15s var(--ag-smooth), opacity 0.15s var(--ag-smooth);
}

.ai-chat-close:hover {
    background: rgba(255, 255, 255, 0.18);
    opacity: 1;
}


/* ==========================================================================
   2b. BODY + OPENING VIEW
   ========================================================================== */

.ai-chat-body {
    flex: 1;
    min-height: 0;              /* lets the log scroll instead of the panel */
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-chat-intro { padding: 18px 16px 8px; }

.ai-chat-intro-title {
    margin: 0 0 14px;
    font-size: var(--fs-600);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.ai-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-chat-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s var(--ag-smooth),
                background 0.15s var(--ag-smooth),
                transform 0.15s var(--ag-smooth);
}

.ai-chat-suggestion:hover {
    border-color: var(--border-strong);
    background: var(--accent-glow);
    transform: translateX(2px);
}

.ai-chat-suggestion:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.ai-chat-suggestion-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: var(--lh-none);
}

.ai-chat-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 16px 0 0;
    font-size: var(--fs-200);
    color: var(--text-muted);
}

.ai-chat-credit-icon { display: block; }


/* ==========================================================================
   3. MESSAGES
   ========================================================================== */

.ai-chat-log {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}

/* Empty until the first message, and it must take no room while the starter
   questions are on screen — an empty flex child would still pad the layout. */
.ai-chat-log:empty { display: none; }

.ai-chat-msg { display: flex; }
.ai-chat-msg-user { justify-content: flex-end; }
.ai-chat-msg-bot { flex-direction: column; align-items: flex-start; }

.ai-chat-bubble {
    max-width: 85%;
    margin: 0;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: var(--fs-400);
    line-height: var(--lh-normal);
    /* Answers arrive as plain text and are inserted with textContent, but a long
       URL or code token would still stretch the panel without this. */
    overflow-wrap: anywhere;
}

.ai-chat-msg-bot .ai-chat-bubble {
    border: 1px solid var(--border-default);
    border-bottom-left-radius: 4px;
    background: var(--surface-inset);
    color: var(--text-primary);
}

.ai-chat-msg-user .ai-chat-bubble {
    border-bottom-right-radius: 4px;
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.ai-chat-msg-error .ai-chat-bubble {
    border-color: var(--text-danger);
    color: var(--text-danger);
}

/* Typing indicator — three dots on a loop while the request is in flight. */
.ai-chat-typing { display: inline-flex; gap: 4px; padding: 12px; }

.ai-chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: ai-chat-blink 1.2s var(--ag-smooth) infinite;
}

.ai-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ai-chat-blink {
    0%, 60%, 100% { opacity: 0.25; }
    30%           { opacity: 1; }
}


/* ==========================================================================
   4. SOURCES
   ========================================================================== */

.ai-chat-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding-left: 2px;
}

.ai-chat-source {
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-overlay);
    color: var(--text-interactive);
    font-size: var(--fs-200);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chat-source:hover {
    border-color: var(--border-strong);
    background: var(--accent-glow);
}


/* ==========================================================================
   5. COMPOSER
   ========================================================================== */

/* One open row rather than a boxed input inside a boxed panel: the panel edge
   is already the container, so a second border just adds visual noise. */
.ai-chat-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 8px 8px 16px;
    border-top: 1px solid var(--border-default);
    background: var(--surface-raised);
}

.ai-chat-input {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--fs-400);
}

.ai-chat-input::placeholder { color: var(--text-disabled); }

.ai-chat-input:focus { outline: none; }

/* The focus ring goes on the row, since the input itself has no border. */
.ai-chat-form:focus-within {
    box-shadow: inset 0 1px 0 0 var(--border-focus);
}

.ai-chat-send {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--accent-primary);
    font-size: var(--fs-600);
    cursor: pointer;
    transition: background 0.15s var(--ag-smooth), opacity 0.15s var(--ag-smooth);
}

.ai-chat-send:hover:not(:disabled) { background: var(--accent-glow); }

.ai-chat-send:disabled { opacity: 0.4; cursor: default; }


/* ==========================================================================
   6. MOBILE LAYOUT (≤ 1023px)
   The bottom navigation is a floating pill (main.css: bottom 8px + safe area,
   ~64px tall), so the launcher clears its top edge with room to spare, and the
   panel opens as a full-screen sheet rather than a card.
   ========================================================================== */

@media (max-width: 1023px) {
    .ai-chat-launcher {
        right: 18px;
        /* Nav pill top edge lands near 72px; 88px keeps the button off it
           instead of tucked against it. */
        bottom: 5.5rem;
        width: 48px;
        height: 48px;
    }

    /* Full screen. A floating card on a phone leaves an answer and its source
       links fighting over about half a screen, and it has to dodge the nav pill
       and the launcher on the way. Taking the whole viewport avoids all three. */
    .ai-chat-panel {
        inset: 0;
        width: auto;
        height: auto;
        border: none;
        border-radius: 0;
    }

    /* The sheet covers the launcher anyway, and the header X is the way out. */
    .ai-chat-launcher[aria-expanded="true"] { display: none; }

    /* Clear the notch and the home indicator on the edges the sheet now owns. */
    .ai-chat-header { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
    .ai-chat-form { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

    /* The sheet scrolls its own body; the page behind it must not scroll too,
       or closing returns the visitor somewhere they never navigated to. */
    body.ai-chat-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-chat-launcher,
    .ai-chat-panel.is-opening,
    .ai-chat-typing span {
        animation: none;
        transition: none;
    }

    .ai-chat-launcher:hover { transform: none; }
}