/**
 * AI Chat addon — visual overrides driven from our side-cart launcher.
 *
 * The chat addon (ai-eshop-chat-addon.php) emits its own positioning +
 * sizing rules inline via `<style>` blocks rendered inside its
 * `render_floating_widget()` at wp_footer priority 999. Those inline
 * rules use #-id selectors, which means a stylesheet loaded in <head>
 * (like our base aieo-side-cart.css) loses every cascade fight at
 * equal specificity.
 *
 * This file is loaded by AIEO_DMM_Side_Cart::render_chat_overrides_style()
 * at wp_footer priority 1000 — AFTER the addon's inline <style>. Same
 * specificity, but later in document order → we win without `!important`
 * and without ID-stacking hacks.
 *
 * Only loaded when our chat slot is enabled in the side-cart admin.
 */

/* -------- Square corners always.
 *
 * The addon's "Rounded" theme applies `border-radius: 16px` to both
 * `.aieo-floating-chat-window` and `.aieo-chat-container`. Combined
 * with the window's `overflow: hidden` (chat-frontend.css line 583),
 * those rounded corners clip the dark-navy chat header at the top —
 * leaving small white slivers where the page background shows through
 * the rounded gaps.
 *
 * Pulled OUT of the mobile media query because this override file
 * only loads when our chat slot is enabled (see PHP), so making it
 * unconditional doesn't leak to non-launcher sites. Square corners
 * also play nicer with our launcher on narrow desktop windows where
 * the addon's default popup is smaller than the viewport. */
#aieo-floating-chat-window,
#aieo-floating-chat-window .aieo-chat-wrapper,
#aieo-floating-chat-window .aieo-chat-container {
    border-radius: 0;
}

/* -------- Mobile (≤720px): full viewport area, clear of the bottom bar.
 *
 * The addon's default popup is a small bottom-right card. On mobile we
 * want the full available area so a thumbed conversation has room. Our
 * 58px bottom bar must remain reachable, hence the 58px bottom offset.
 *
 * `!important` is reserved ONLY for properties the addon writes
 * INLINE on the element (its admin "Popup Width / Popup Height" fields
 * → `style="width: …; height: …"`). For inline styles, `!important` is
 * the only escape hatch in pure CSS regardless of cascade order or
 * specificity. Everything else wins on plain cascade — the addon's
 * `chat-frontend.css` mobile rules use `.aieo-floating-chat-window…`
 * (specificity 0,1,0 / 0,2,0); we use `#aieo-floating-chat-window…`
 * (specificity 1,0,0) which beats both. */
@media (max-width: 720px) {
    #aieo-floating-chat-window {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 58px;                  /* clear the side-cart bottom bar */
        /* width/height MUST keep `!important` — they're set as inline
         * style="..." on the element from the addon's admin fields,
         * which only `!important` can override. */
        width: 100vw !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0;
        transform: none;
        border-radius: 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    }
    /* The wrapper inside has its own height — needs to fill our box.
     * border-radius: 0 keeps the inner container's corners square so
     * the chat reaches edge-to-edge on the full-width mobile layout
     * (the addon's theme block sets 16px on rounded / 4px on square). */
    #aieo-floating-chat-window .aieo-chat-wrapper,
    #aieo-floating-chat-window .aieo-chat-container {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* -------- Loading indicator while the chat lazy-initializes.
 *
 * After the user clicks our launcher, the chat addon runs initFloatingChat
 * which AJAX-loads config + categories. That AJAX call can take a few
 * seconds on cold caches; meanwhile #aieo-floating-chat-messages is
 * empty and the user sees a blank panel.
 *
 * The :empty pseudo-class lets us paint a spinner inside the container
 * with NO JS bookkeeping — as soon as the addon appends its first
 * message / category bubble / welcome text, the container is no longer
 * `:empty` and the spinner disappears automatically. No race conditions,
 * no flicker. Fully self-cleaning. */
#aieo-floating-chat-messages:empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 120px;
    color: #6b7280;
}
#aieo-floating-chat-messages:empty::before {
    content: '';
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--wp--preset--color--accent, #F46767);
    border-radius: 50%;
    animation: aieo-chat-spinner 0.8s linear infinite;
}
#aieo-floating-chat-messages:empty::after {
    content: 'Φόρτωση συνομιλίας…';
    font-size: 13px;
    letter-spacing: 0.02em;
}
@keyframes aieo-chat-spinner {
    to { transform: rotate(360deg); }
}

/* -------- Compact header (mobile + desktop).
 *
 * The default header packs a 56px-ish avatar + 2-line title + status,
 * stealing 80–90px of vertical space which on a 600px-tall mobile popup
 * is a lot. We trim padding + avatar dimensions so the conversation
 * area gets that space back. */
#aieo-floating-chat-window .aieo-chat-header {
    padding: 8px 12px;
    min-height: 0;
    gap: 10px;
}
#aieo-floating-chat-window .aieo-chat-avatar {
    width: 32px;
    height: 32px;
    font-size: 18px;
    flex-shrink: 0;
}
#aieo-floating-chat-window .aieo-chat-title {
    line-height: 1.2;
    font-size: 14px;
}
#aieo-floating-chat-window .aieo-chat-title strong {
    font-size: 14px;
    display: block;
}
#aieo-floating-chat-window .aieo-chat-status {
    font-size: 11px;
    opacity: 0.85;
}
#aieo-floating-chat-window .aieo-chat-close {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 22px;
}
