/* ==========================================================================
   chatbot-responsive.css
   CSBC 2026 · Responsive & Mobile-Fullscreen layer
   --------------------------------------------------------------------------
   This file is loaded AFTER chatbot-styles.css and overrides/extends it
   for smaller viewports. It also contains the offline-banner styles and
   the mobile "fullscreen chat" behaviour (chat opens as a full-viewport
   overlay with a back button on mobile).

   Breakpoints:
     --bp-mobile  : max-width 767px   (phones, small tablets in portrait)
     --bp-tablet  : 768px – 1023px    (tablets, large phones landscape)
     --bp-desktop : 1024px+           (laptops, desktops)        ← unchanged
   ========================================================================== */


/* ── 0. CSS Custom Properties (extend existing set) ── */

:root {
    /* Offline / status colours */
    --color-offline        : #f59e0b;   /* amber-400            */
    --color-offline-bg     : #fffbeb;   /* amber-50             */
    --color-offline-border : #fde68a;   /* amber-200            */
    --color-online         : #22c55e;   /* green-500            */
    --color-error          : #ef4444;   /* red-500              */

    /* Mobile safe-area support */
    --safe-top    : env(safe-area-inset-top,    0px);
    --safe-bottom : env(safe-area-inset-bottom, 0px);
    --safe-left   : env(safe-area-inset-left,   0px);
    --safe-right  : env(safe-area-inset-right,  0px);
}


/* ========================================================================
   1. OFFLINE BANNER
   Declared in Chatbot.html as #offline-banner.
   Hidden by default; ChatbotQueue adds .visible when offline.
   ======================================================================== */

#offline-banner {
    display        : none;          /* hidden until .visible is added       */
    align-items    : center;
    gap            : 0.5rem;
    padding        : 0.55rem 1rem;
    background     : var(--color-offline-bg);
    border-bottom  : 1px solid var(--color-offline-border);
    color          : #92400e;       /* amber-800                            */
    font-size      : 0.8125rem;
    font-weight    : 500;
    line-height    : 1.4;
    z-index        : 10;
    transition     : opacity 0.2s;
}

#offline-banner.visible {
    display: flex;
}

.offline-banner-icon {
    flex-shrink : 0;
    width       : 1rem;
    height      : 1rem;
    color       : var(--color-offline);
}

.offline-banner-text {
    flex: 1;
}

.offline-banner-count {
    white-space  : nowrap;
    font-weight  : 600;
    margin-left  : 0.25rem;
    color        : #b45309;
}


/* ========================================================================
   2. STATUS DOT STATES
   The dot already has .connecting; we add .online / .offline.
   ======================================================================== */

.status-dot {
    display          : inline-block;
    width            : 0.5rem;
    height           : 0.5rem;
    border-radius    : 50%;
    flex-shrink      : 0;
}

.status-dot.online {
    background : var(--color-online);
    box-shadow : 0 0 0 2px rgba(34,197,94,.25);
    animation  : none;
}

.status-dot.offline {
    background : var(--color-offline);
    animation  : pulse-offline 1.4s ease-in-out infinite;
}

.status-dot.connecting {
    background : var(--color-offline);
    animation  : pulse-offline 1s ease-in-out infinite;
}

@keyframes pulse-offline {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.4; }
}


/* ========================================================================
   3. MOBILE BACK BUTTON
   Injected by JS (chatbot-responsive-init.js) only on mobile.
   Positioned inside .chat-header to replace / complement the close X.
   ======================================================================== */

.mobile-back-btn {
    display        : none;         /* shown only on mobile via media query  */
    align-items    : center;
    justify-content: center;
    width          : 2.25rem;
    height         : 2.25rem;
    border         : none;
    background     : transparent;
    color          : inherit;
    cursor         : pointer;
    border-radius  : 50%;
    flex-shrink    : 0;
    margin-right   : 0.25rem;
    transition     : background 0.15s;
}

.mobile-back-btn:hover,
.mobile-back-btn:focus-visible {
    background: rgba(0,0,0,0.07);
    outline: none;
}

.mobile-back-btn svg {
    width   : 1.25rem;
    height  : 1.25rem;
    pointer-events: none;
}


/* ========================================================================
   4. MOBILE CHAT TRIGGER BUTTON
   Floating action button visible on mobile when the chat panel is closed.
   Injected by JS into .page-layout (or body).
   ======================================================================== */

#mobile-chat-fab {
    display         : none;        /* shown only on mobile                  */
    position        : fixed;
    bottom          : calc(1.25rem + var(--safe-bottom));
    right           : calc(1.25rem + var(--safe-right));
    z-index         : 1000;
    width           : 3.5rem;
    height          : 3.5rem;
    border-radius   : 50%;
    border          : none;
    background      : var(--color-primary, #2563eb);
    color           : #fff;
    box-shadow      : 0 4px 16px rgba(0,0,0,.25);
    cursor          : pointer;
    align-items     : center;
    justify-content : center;
    transition      : transform 0.15s, box-shadow 0.15s;
}

#mobile-chat-fab:active {
    transform  : scale(0.94);
    box-shadow : 0 2px 8px rgba(0,0,0,.20);
}

#mobile-chat-fab svg {
    width  : 1.5rem;
    height : 1.5rem;
}

/* Unread badge on FAB */
#mobile-chat-fab .fab-badge {
    position      : absolute;
    top           : 0.25rem;
    right         : 0.25rem;
    width         : 1rem;
    height        : 1rem;
    border-radius : 50%;
    background    : #ef4444;
    border        : 2px solid #fff;
    display       : none;
}

#mobile-chat-fab .fab-badge.visible {
    display: block;
}


/* ========================================================================
   5. TABLET LAYOUT  (768px – 1023px)
   Keep desktop-like two-column BUT compress slightly.
   ======================================================================== */

@media (max-width: 1023px) and (min-width: 768px) {

    .page-layout {
        padding : 0.75rem;
        gap     : 0.75rem;
    }

    .chat-card {
        /* ensure the chat card never overflows horizontally */
        min-width  : 0;
        max-width  : 100%;
    }

    .input-hint {
        /* shorter hint on smaller screens */
        font-size: 0.7rem;
    }
}


/* ========================================================================
   6. MOBILE LAYOUT  (≤ 767px)
   Chat panel becomes a full-viewport overlay, triggered by JS.
   ======================================================================== */

@media (max-width: 767px) {

    /* ── 6a. General page shell ── */

    html, body {
        overflow-x : hidden;
    }

    .site-header {
        position : sticky;
        top      : 0;
        z-index  : 200;
    }

    .header-inner {
        padding : 0.5rem 0.875rem;
    }

    .header-title {
        font-size: 1rem;
    }

    .header-subtitle {
        font-size: 0.7rem;
    }

    /* ── 6b. Page layout: single column, no padding ── */

    .page-layout {
        display        : block;
        padding        : 0;
        height         : auto;
        overflow       : visible;
    }

    /* ── 6c. Chat card: HIDDEN by default on mobile ──
              JS adds .mobile-open to show it as full-viewport overlay.        */

    .chat-card {
        /* Reset desktop sizing */
        position   : fixed !important;
        inset      : 0 !important;
        width      : 100% !important;
        height     : 100% !important;
        max-height : none !important;
        max-width  : none !important;
        min-width  : 0 !important;
        border-radius: 0 !important;
        border     : none !important;
        z-index    : 500;

        /* Hidden until .mobile-open */
        display    : flex !important;   /* keep flex so children work     */
        flex-direction: column !important;
        transform  : translateY(100%);
        opacity    : 0;
        pointer-events: none;
        transition : transform 0.32s cubic-bezier(.4,0,.2,1),
                     opacity   0.25s ease;
    }

    .chat-card.mobile-open {
        transform      : translateY(0);
        opacity        : 1;
        pointer-events : auto;
    }

    /* Safe-area padding at bottom for iPhone home bar */
    .input-area {
        padding-bottom : calc(0.75rem + var(--safe-bottom));
    }

    /* ── 6d. Messages area fills remaining height ── */

    .messages-area {
        flex            : 1 1 auto;
        overflow-y      : auto;
        -webkit-overflow-scrolling: touch;
        /* prevent content from going under the iOS home bar */
        padding-bottom  : 0.5rem;
    }

    /* ── 6e. Show the mobile back button ── */

    .mobile-back-btn {
        display: flex;
    }

    /* ── 6f. Show the FAB ── */

    #mobile-chat-fab {
        display: flex;
    }

    /* ── 6g. Hide desktop-only elements ── */

    /* The fullscreen toggle is already handled by the .mobile-open toggle,
       so hide it to reduce clutter on small screens.                        */
    #fullscreen-btn {
        display: none !important;
    }

    /* ── 6h. Input row adjustments ── */

    .input-box {
        font-size  : 1rem; /* avoid iOS auto-zoom on focus (must be ≥ 16px) */
    }

    .input-hint {
        display: none; /* not useful on mobile */
    }

    /* ── 6i. Quick replies: horizontal scroll ── */

    .quick-replies {
        flex-wrap     : nowrap;
        overflow-x    : auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom : 0.25rem;
    }

    .quick-replies::-webkit-scrollbar { display: none; }

    /* ── 6j. Message bubbles: full-width adaptation ── */

    .message-bubble {
        max-width : 88% !important;
    }

    /* ── 6k. Offline banner: slightly more compact ── */

    #offline-banner {
        font-size: 0.75rem;
        padding  : 0.4rem 0.75rem;
    }

    /* ── 6l. Chat header: adjust for back button ── */

    .chat-header-inner {
        gap: 0.375rem;
    }

    /* ── 6m. Site footer: hide on mobile when chat is open ── */

    body.chat-open .site-footer {
        display: none;
    }
}


/* ========================================================================
   7. VERY SMALL SCREENS  (≤ 360px)
   ======================================================================== */

@media (max-width: 360px) {

    .header-title-group {
        max-width: 10rem;
        overflow : hidden;
    }

    .header-title {
        font-size: 0.9rem;
    }

    .bot-avatar {
        width  : 2rem;
        height : 2rem;
    }

    .chat-header-name {
        font-size: 0.875rem;
    }
}


/* ========================================================================
   8. LANDSCAPE PHONE  (height < 480px and width > 480px)
   ======================================================================== */

@media (max-height: 480px) and (orientation: landscape) and (max-width: 900px) {

    .chat-card {
        position : fixed !important;
        inset    : 0 !important;
    }

    .chat-header {
        padding: 0.375rem 0.75rem;
    }

    .bot-avatar {
        width  : 1.75rem;
        height : 1.75rem;
    }

    .messages-area {
        padding: 0.5rem 0.75rem;
    }

    .input-area {
        padding: 0.375rem 0.75rem calc(0.375rem + var(--safe-bottom));
    }
}


/* ========================================================================
   9. REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .chat-card,
    #mobile-chat-fab,
    .status-dot,
    #offline-banner {
        transition : none !important;
        animation  : none !important;
    }
}