/**
 * D3Clarity Custom Chat Widget - Styles
 *
 * Copyright (c) 2026 D3Clarity, Inc. All rights reserved.
 *
 * PROPRIETARY AND CONFIDENTIAL
 *
 * This software is the proprietary information of D3Clarity, Inc.
 * Unauthorized copying, distribution, modification, or use of this software,
 * via any medium, is strictly prohibited without prior written permission
 * from D3Clarity, Inc.
 *
 * Licensed to authorized clients only under separate written agreement.
 *
 * For licensing information: info@d3clarity.com
 *
 * @version 2.12
 * @license Proprietary
 *
 * CHANGELOG v2.9 (dark-mode rebuild aligned with d3clarity.com/l/amazon-connect):
 * - Re-themed to dark mode to match the Amazon Connect landing page.
 *   Chat surface, header, transcript and bubbles all live on deep navy;
 *   light copy on dark; cyan accents for interactivity and glow.
 * - BUG FIX: composer focus ring was rgba(255, 153, 0, 0.1) (orange, near-invisible).
 *   Replaced with cyan rgba(34, 201, 255, 0.45) via --focus-ring.
 * - BUG FIX: custom form input focus ring had the same orange-alpha bug. Fixed.
 * - Added token system: --surface-*, --text-*, --border-*, --shadow-*,
 *   --focus-ring, --ease, --dur-*. All new; does NOT remove v2.8's --color-*.
 * - --color-primary (#2785B3) and --color-accent (#22C9FF) preserved; they now
 *   drive user-bubble fill and launcher glow against the dark surface.
 * - Header: D3C-blue gradient (navy → brand blue) with white title.
 * - Transcript background: #0A121F so bubbles read as cards on canvas.
 * - Bot bubble: lifted dark surface with white-alpha border.
 * - User bubble: primary blue gradient with subtle brand-glow shadow.
 * - Typing dots: cyan accent, gentler 1.2s ease-in-out with opacity pulse.
 * - Launcher: brand-gradient fill with cyan-tinted glow shadow.
 * - Inputs: dark field with cyan focus ring and white text.
 * - Menu dropdown and toast: dark surfaces with soft white borders.
 * - Optional unread badge .floating-button__badge — styled, ready to use.
 * - Optional chat-ended CTA .chat-ended-message__cta — styled pill button.
 * - Mobile ≤ 480px: fullscreen takeover (100vw × 100dvh, no radius).
 *
 * CHANGELOG v2.8:
 * - Updated color palette to align with D3Clarity brand
 * - Removed header gradient for modern flat design
 * - Added AWS-inspired accent color (orange)
 * - Enhanced hover states and transitions
 * - Improved typography hierarchy with bolder weights
 * - Better visual feedback on interactive elements
 */

/*
    **************************************
    Root styles (v2.9 DARK)
    **************************************
*/
:root {
    /* --- D3Clarity brand (preserved from v2.8) --- */
    --color-primary: #2785B3;            /* D3Clarity primary blue */
    --color-accent: #22c9ff;             /* D3Clarity cyan accent */
    --color-secondary: #64748b;          /* Slate gray */
    --color-dark: #0b2b5a;               /* Dark navy blue */

    /* --- Dark-mode surfaces (v2.9 — raised contrast) --- */
    --surface-app:       #03060D;        /* deepest — only shows around fullscreen mobile */
    --surface-window:    #0E1A2E;        /* chat window frame */
    --surface-transcript:#060D1B;        /* transcript canvas — near-black for depth */
    --surface-raised:    #1D2E4F;        /* bot bubbles, menu dropdown, toast — clearly lifted */
    --surface-input:     #0C1A2E;        /* composer input field */
    --surface-input-hi:  #152945;        /* composer input on focus */
    --surface-chip:      rgba(255, 255, 255, 0.08);  /* icon-button rest */
    --surface-chip-hi:   rgba(255, 255, 255, 0.16);  /* icon-button hover */

    /* --- Header gradient (brand navy → D3C blue) --- */
    --header-gradient:   linear-gradient(135deg, #0B2B5A 0%, #1F6FB2 55%, #2785B3 100%);
    --user-gradient:     linear-gradient(135deg, #1F6FB2 0%, #2785B3 100%);
    --launcher-gradient: linear-gradient(135deg, #123F7A 0%, #2785B3 60%, #22C9FF 100%);

    /* --- Dark-mode text (bumped for legibility) --- */
    --text-strong:  #FFFFFF;             /* headlines, chat title, strong emphasis */
    --text-body:    #EDF3FA;             /* body text on dark surfaces */
    --text-muted:   #B3C3D6;             /* placeholders, helpers */
    --text-subtle:  #8498B0;             /* timestamps (lifted from #6B7E95 for AA) */
    --text-on-user: #FFFFFF;             /* text on user bubble */
    --text-on-header: #FFFFFF;           /* text + icons on header gradient (same in both themes) */

    /* --- Borders & rings — stronger for dark-mode definition --- */
    --border-soft:   rgba(255, 255, 255, 0.12);
    --border-mid:    rgba(255, 255, 255, 0.20);
    --border-strong: rgba(255, 255, 255, 0.28);
    --focus-ring:    0 0 0 3px rgba(34, 201, 255, 0.55);

    /* --- Shadows (deeper on dark; colored glows for brand moments) --- */
    --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:       0 8px 18px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg:       0 24px 56px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.35);
    --shadow-launcher: 0 10px 24px rgba(34, 201, 255, 0.32), 0 4px 10px rgba(0, 0, 0, 0.5);
    --shadow-bubble:   0 2px 8px rgba(0, 81, 167, 0.35);

    /* --- Semantic --- */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-red-500: #ff6b6b;            /* brighter on dark */
    --color-red-600: #ff8585;
    --color-success: #2CCF8F;
    --color-warning: #FFB84D;

    /* --- Grays (v2.8 legacy, retained for config compatibility) --- */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    --color-bg-bot: var(--surface-raised);
    --color-bg-user: var(--color-primary);
    --color-bg-white: var(--surface-window);

    /* --- Legacy mappings retained so existing client configs keep working --- */
    --color-quaternary: var(--surface-transcript);
    --color-blue-gray: var(--text-muted);
    --color-dark-blue: var(--color-dark);
    --color-light-gray: var(--text-subtle);
    --color-border-gray: var(--border-mid);
    --color-icon-gray: var(--border-strong);
    --color-icon-text: var(--text-body);
    --color-time-light: var(--text-muted);

    /* --- Motion --- */
    --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast:  140ms;
    --dur-med:   220ms;
}

* {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
}

input, button {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

svg {
    width: 1.75rem;
    height: 1.75rem;
}


/*
    **************************************
    Floating alert / pre-chat notification
    **************************************
*/
.alert-message {
    border-radius: 14px;
    position: fixed;
    margin: 1.25rem 0;
    bottom: 5rem;
    right: 0.75rem;
    width: 20rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-lg);
    z-index: 999999; /* #5: keep banner above host-page content (was 10) */
    cursor: pointer;
    transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
    color: var(--text-body);
}

.alert-message:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 28px 60px rgba(0,0,0,.6), 0 8px 14px rgba(0,0,0,.4) !important;
    border-color: var(--border-strong) !important;
}

.notification-header {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem 0.5rem;
}

.notification-left {
    display: flex;
    align-items: center;
}

.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--launcher-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.625rem;
    color: var(--color-white);
    box-shadow: 0 0 12px rgba(34, 201, 255, 0.25);
}

.notification-title {
    color: var(--text-strong);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: -0.005em;
}

.close-notification {
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 50%;
    background-color: var(--surface-chip) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.close-notification:hover {
    background-color: var(--surface-chip-hi) !important;
    color: var(--text-strong) !important;
    transform: scale(1.05) !important;
}

/* #5/UI: the X glyph had no fill (defaulted to black). Match the other buttons. */
.close-notification svg { fill: var(--color-white); }

.close-notification:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.notification-body {
    padding: 0.5rem 1rem 0.875rem 1rem;
    background: var(--surface-raised);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.notification-text {
    margin: 0;
    color: var(--text-body);
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1.5;
}


/*
    **************************************
    Floating launcher
    **************************************
*/
.floating-button {
    background: var(--launcher-gradient);
    border-radius: 50%;
    border: none;
    box-shadow: var(--shadow-launcher);
    position: fixed;
    bottom: 1.5rem;
    right: 0.75rem;
    width: 3.75rem;
    height: 3.75rem;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999; /* #5: keep launcher above host-page content (was 10) */
    cursor: pointer;
    transition: transform var(--dur-med) var(--ease),
                box-shadow var(--dur-med) var(--ease),
                filter var(--dur-med) var(--ease);
}

.floating-button:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 16px 36px rgba(34, 201, 255, 0.45), 0 6px 14px rgba(0, 0, 0, 0.55) !important;
    filter: brightness(1.08) !important;
}

.floating-button:active {
    transform: translateY(-1px) scale(0.98);
}

.floating-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-launcher);
}

.floating-button svg {
    fill: var(--color-white);
    width: 1.625rem !important;
    height: 1.625rem !important;
}

/* optional unread badge */
.floating-button__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--color-red-500);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    border: 2px solid var(--surface-app);
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4);
}


/*
    **************************************
    Chat widget container + window
    **************************************
*/
.chat-widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 999999;
    font-family: Inter, sans-serif !important;
    font-feature-settings: 'liga' 1, 'calt' 1;
}

.chat-widget {
    height: 90vh;
    max-height: 906px;
    width: 90vw;
    max-width: 450px;
    background: var(--surface-window);
    color: var(--text-body);
    box-shadow: var(--shadow-lg);
    border-radius: 14px;
    border: 1px solid var(--border-mid);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 1.5rem;
    right: 0.75rem;
    z-index: 999999;
}

.scroll-container {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    overflow-y: auto;
}
.scroll-container::-webkit-scrollbar { width: 6px; }
.scroll-container::-webkit-scrollbar-track { background: transparent; }
.scroll-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

.header-gradient {
    background: var(--header-gradient);
}


/*
    **************************************
    Header
    **************************************
*/
.chat-header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--header-gradient);
    color: var(--text-on-header);
    border-bottom: 1px solid var(--border-mid);
    position: relative;
    box-sizing: border-box;
}

.chat-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,201,255,0.35), transparent);
    pointer-events: none;
}

.chat-title {
    margin: 0;
    font-size: 1rem;
    line-height: 125%;
    font-weight: 600;
    color: var(--text-on-header);
    letter-spacing: -0.005em;
}

.menu-container { position: relative; }

.menu-button {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px !important;
    /* header chips are always white-alpha — the header gradient is the same in both themes */
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-on-header) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.menu-button:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: var(--color-accent) !important;
}

.menu-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.menu-button svg { fill: currentColor; width: 1.125rem !important; height: 1.125rem !important; }

.menu-dropdown {
    position: absolute;
    left: 0;
    margin-top: 0.5rem;
    min-width: 220px;
    width: max-content;
    background: var(--surface-raised);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 20;
    border: 1px solid var(--border-mid);

    #endChatButton > i {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
}

.menu-dropdown.hidden { display: none; }
.menu-dropdown.fade-in { transform-origin: top left; }

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-body);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.menu-item svg { fill: currentColor; width: 1rem !important; height: 1rem !important; }

.menu-item:hover {
    background-color: var(--surface-chip) !important;
    color: var(--color-accent) !important;
}

#endChatButton:hover {
    background-color: rgba(255, 107, 107, 0.12) !important;
    color: var(--color-red-500) !important;
}

.minimize-button {
    width: 36px;
    height: 36px;
    border-radius: 8px !important;
    padding: 0;
    /* header chips are always white-alpha — the header gradient is the same in both themes */
    background-color: rgba(255, 255, 255, 0.08) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-header) !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.minimize-button svg { fill: currentColor; width: 1.125rem !important; height: 1.125rem !important; }

.minimize-button:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    transform: scale(1.05) !important;
}

.minimize-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}


/*
    **************************************
    Transcript
    **************************************
*/
.transcript-container {
    height: calc(100% - 144px);
    flex-grow: 1;
    padding: 1rem;
    background: var(--surface-transcript);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.transcript-container::-webkit-scrollbar { width: 6px; }
.transcript-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
}
.transcript-container::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

.quick-replies-container {
    display: flex;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.quick-replies-button {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    font-weight: 600;
    background-color: transparent;
    color: var(--color-accent);
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.quick-replies-button:hover:not(:disabled) {
    background-color: var(--color-accent);
    color: var(--surface-window);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(34, 201, 255, 0.35);
}

.quick-replies-button:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.quick-replies-button:focus-visible { box-shadow: var(--focus-ring); }

.quick-replies-button:disabled {
    border-color: var(--border-mid);
    color: var(--text-subtle);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Host-page style isolation for quick replies.

   The rules above are unscoped single-class selectors, so a host site that
   styles <button> wins. On d3clarity.com (51 stylesheets, ~1MB of Elementor and
   Jet plugin CSS, 15 !important declarations in button rules) the quick replies
   rendered as solid orange uppercase CTA buttons instead of blue outline pills.
   This was never visible before, because quick replies never rendered on a new
   chat at all until engine 3.7 fixed that.

   The #chatWidget prefix raises specificity above the host's class selectors,
   and !important is required because some host rules carry it. Scoped to the
   widget root, so nothing here can leak outward onto the host page.

   Only the properties a host button style typically sets are forced; layout and
   motion stay with the rules above so the design intent remains readable there.
   --------------------------------------------------------------------------- */
#chatWidget .quick-replies-button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--color-accent) !important;
    border: 1px solid var(--color-accent) !important;
    border-radius: 999px !important;
    padding: 0.375rem 0.875rem !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.25rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-align: center !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#chatWidget .quick-replies-button:hover:not(:disabled) {
    background-color: var(--color-accent) !important;
    color: var(--surface-window) !important;
    box-shadow: 0 6px 14px rgba(34, 201, 255, 0.35) !important;
}

#chatWidget .quick-replies-button:disabled {
    border-color: var(--border-mid) !important;
    color: var(--text-subtle) !important;
    background-color: transparent !important;
}

/* Light theme, re-stated at the same specificity so it still wins. */
html.theme-light #chatWidget .quick-replies-button,
body.theme-light #chatWidget .quick-replies-button,
.theme-light #chatWidget .quick-replies-button,
html[data-chat-theme="light"] #chatWidget .quick-replies-button {
    background-color: var(--surface-window) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-accent) !important;
}

html.theme-light #chatWidget .quick-replies-button:hover:not(:disabled),
body.theme-light #chatWidget .quick-replies-button:hover:not(:disabled),
.theme-light #chatWidget .quick-replies-button:hover:not(:disabled),
html[data-chat-theme="light"] #chatWidget .quick-replies-button:hover:not(:disabled) {
    background-color: var(--color-accent) !important;
    color: var(--surface-window) !important;
}

.message-bubble {
    margin-bottom: 0.75rem;
    animation: fadeIn 0.3s ease-out;
}

.message-bubble-bot-container {
    display: flex;
    align-items: flex-start;
}

.message-bubble-bot-content {
    background: linear-gradient(180deg, #213557 0%, var(--surface-raised) 100%);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-radius: 0px 16px 16px 16px;
    padding: 0.75rem 1rem;
    color: var(--text-body);
}

.message-bubble-bot-content a {
    color: var(--color-accent) !important;
}

.message-bubble-bot-content a:hover {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
}

.message-bubble-bot-content ul {
    margin-left: 1rem;
}

.message-bubble-bot-content ol {
    margin-left: 1rem;
}

.message-bubble-bot-name-container {
    padding: 0.75rem 1rem;
    color: var(--text-muted);
}

.message-bubble-bot-icon { display: none; }

.message-bubble-bot-text {
    margin: 0;
    color: var(--text-body);
    max-width: 350px;
    font-size: 0.9375rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.message-bubble-bot-time {
    display: flex;
    margin-top: 0.25rem;
    margin-bottom: 0;
    justify-content: flex-end;
    color: var(--text-subtle);
    font-size: 0.75rem;
    line-height: 1rem;
}

.message-bubble-bot-content.typing {
    padding: 14px;
}

.message-bubble-bot-typing-container {
    display: flex;

    & > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0.3rem;
    }
}

.message-bubble-user-container {
    display: flex;
    justify-content: flex-end;
}

.message-bubble-user-content {
    background: var(--user-gradient);
    color: var(--text-on-user);
    border-radius: 16px 0px 16px 16px;
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-bubble);
}

.message-bubble-user-text {
    margin: 0;
    color: var(--text-on-user);
    max-width: 350px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.message-bubble-user-time {
    display: flex;
    margin-top: 0.25rem;
    margin-bottom: 0;
    justify-content: flex-end;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.75rem;
    line-height: 1rem;
}

.radio-group {
    margin-bottom: 1rem;
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.form-input {
    display: grid;
    gap: 0.5rem;
}

.custom-form-view {
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex-direction: row-reverse;
    gap: 0.625rem;
}

.custom-form-view-submit-button {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-primary);
    font-weight: 600;
    color: var(--color-white);
    background: var(--user-gradient);
    font-size: 0.875rem;
    line-height: 150%;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                filter var(--dur-fast) var(--ease);
}

.custom-form-view-submit-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 8px 20px rgba(39, 133, 179, 0.4);
}

.custom-form-view-submit-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.custom-form-view-action-button {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-mid);
    font-weight: 500;
    color: var(--text-body);
    background-color: transparent;
    font-size: 0.875rem;
    line-height: 150%;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.custom-form-view-action-button:hover {
    background-color: var(--surface-chip);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

.custom-form-view-action-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.custom-form-view-input-container {
    display: grid;
    padding-right: 0.5rem;
    gap: 0.5rem;
    max-width: 344px;
}

.custom-form-view-input-label {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 150%;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.custom-form-view-input-label.invalid {
    color: var(--color-red-500);
}

.custom-form-view-input-input {
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-mid);
    width: 100%;
    background-color: var(--surface-input);
    color: var(--text-strong);
    font-size: 0.875rem;
    line-height: 150%;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.custom-form-view-input-input::placeholder {
    color: var(--text-subtle);
}

.custom-form-view-input-input:focus {
    outline: none;
    border-color: var(--color-accent);
    /* v2.9 BUG FIX — was rgba(255, 153, 0, 0.1) (orange, near-invisible) */
    box-shadow: var(--focus-ring);
    background-color: var(--surface-input-hi);
}

.custom-form-view-input-input.invalid {
    background-color: rgba(255, 107, 107, 0.08);
    border-color: var(--color-red-500);
    color: var(--color-red-500);
}

.custom-form-view-input-small {
    color: var(--color-red-500);
    font-size: 0.875rem;
    line-height: 125%;
}

.typing-dot {
    animation: cwBounce 1.2s infinite ease-in-out;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-accent);
    border-radius: 50%;
    opacity: 0.4;
    box-shadow: 0 0 8px rgba(34, 201, 255, 0.3);
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.30s; }


/*
    **************************************
    Composer
    **************************************
*/
.composer-container {
    height: 80px;
    border-top: 1px solid var(--border-mid);
    background: var(--surface-window);
}

.composer-inner {
    padding: 0.75rem 1rem;
}

.input-container {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.5rem 0.5rem 0.875rem;
    border: 1px solid var(--border-mid);
    border-radius: 0.75rem;
    background-color: var(--surface-input);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease);
}

.input-container:focus-within {
    border-color: var(--color-accent);
    /* v2.9 BUG FIX — was rgba(255, 153, 0, 0.1). Now cyan at 45% alpha, visible on dark. */
    box-shadow: var(--focus-ring);
    background-color: var(--surface-input-hi);
}

.message-input {
    flex-grow: 1;
    color: var(--text-strong);
    font-size: 0.9375rem;
    line-height: 1.5;
    border: none;
    outline: none;
    background: transparent;
    caret-color: var(--color-accent);
}

.message-input::placeholder {
    color: var(--text-muted);
}

.send-button {
    margin-left: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0 !important;
    background: var(--launcher-gradient) !important;
    color: var(--color-white) !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(34, 201, 255, 0.2) !important;
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                filter var(--dur-fast) var(--ease) !important;
    flex-shrink: 0;
}

.send-button:hover {
    transform: scale(1.05) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 0 18px rgba(34, 201, 255, 0.4) !important;
}

.send-button:active { transform: scale(0.95) !important; }

.send-button:focus-visible {
    outline: none !important;
    box-shadow: var(--focus-ring) !important;
}

.send-button:disabled,
.send-button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
    transform: none;
    filter: none;
    box-shadow: none;
}

.send-button svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    fill: var(--color-white);
}


/*
    **************************************
    Utility + ended state
    **************************************
*/
.hidden { display: none; }
.fade-in { animation: fadeIn 0.3s ease-out; }
.fade-out { animation: fadeOut 0.3s ease-out; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

.chat-ended-message {
    margin: 0;
    font-size: 1rem;
    line-height: 150%;
    font-weight: 600;
    text-align: center;
    color: var(--text-strong);
}

.chat-ended-message__cta {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--launcher-gradient);
    color: var(--color-white) !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-md), 0 0 12px rgba(34, 201, 255, 0.25);
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                filter var(--dur-fast) var(--ease);
}

.chat-ended-message__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: var(--shadow-md), 0 0 22px rgba(34, 201, 255, 0.45);
}

.chat-ended-message__cta:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-md);
}


/*
    **************************************
    Animations
    **************************************
*/
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes cwBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40%           { transform: translateY(-3px); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); }
}


/*
    **************************************
    Media queries
    **************************************
*/
@media (min-width: 768px) {
    .chat-widget { bottom: 2rem; right: 2rem; }
    .floating-button { bottom: 2rem; right: 2rem; }
    .alert-message { bottom: 6rem; right: 2rem; width: 24rem; }
}

@media (min-width: 430px) {
    .message-input { font-size: 1.25rem; }
}

@media (max-width: 480px) {
    .chat-widget {
        right: 0; bottom: 0;
        width: 100vw; height: 100dvh;
        max-width: 100vw; max-height: 100dvh;
        border-radius: 0; border: 0;
    }
    .alert-message {
        right: 12px; left: 12px;
        bottom: 88px; width: auto;
    }
}


/*
    **************************************
    Accessibility
    **************************************
*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

button:focus-visible,
input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}


/*
    **************************************
    LIGHT THEME
    **************************************

    Dark is the default (see :root above). Light mode is opt-in
    by adding `theme-light` as a class anywhere up the tree, OR
    `data-chat-theme="light"` on <html>. The widget JS does not
    need to change — the tokens below override the defaults
    within the matching subtree.

    Example integration options:

      <html class="theme-light">               ← page-wide
      <body class="theme-light">               ← body-wide
      <div class="chat-widget-container theme-light">  ← widget-only
      <html data-chat-theme="light">           ← attribute form

    For automatic OS-preference following, add `theme-auto` to
    the same element; light tokens apply when the user's OS is
    in light mode, dark stays in dark mode.
*/

html.theme-light,
body.theme-light,
.theme-light,
html[data-chat-theme="light"] {
    /* Surfaces — light, cool-neutral */
    --surface-app:        #FFFFFF;
    --surface-window:     #FFFFFF;
    --surface-transcript: #F4F8FC;   /* faint blue-gray canvas */
    --surface-raised:     #F1F5F9;   /* bot bubble, menu, toast */
    --surface-input:      #F1F5F9;
    --surface-input-hi:   #FFFFFF;   /* focus lifts to white */
    --surface-chip:       rgba(39, 133, 179, 0.08);   /* primary-tinted icon-button rest */
    --surface-chip-hi:    rgba(39, 133, 179, 0.16);

    /* Header gradient — same brand gradient; looks good on both themes */
    --header-gradient:    linear-gradient(135deg, #0B2B5A 0%, #1F6FB2 55%, #2785B3 100%);
    --user-gradient:      linear-gradient(135deg, #1F6FB2 0%, #2785B3 100%);
    --launcher-gradient:  linear-gradient(135deg, #123F7A 0%, #2785B3 60%, #22C9FF 100%);

    /* Text — dark on light */
    --text-strong:  #0B1B33;
    --text-body:    #1E293B;
    --text-muted:   #64748B;
    --text-subtle:  #94A3B8;
    --text-on-user: #FFFFFF;

    /* Borders — dark alpha on light */
    --border-soft:   rgba(11, 27, 51, 0.06);
    --border-mid:    rgba(11, 27, 51, 0.10);
    --border-strong: rgba(11, 27, 51, 0.18);
    --focus-ring:    0 0 0 3px rgba(34, 201, 255, 0.35);

    /* Shadows — softer on light */
    --shadow-sm:       0 1px 2px rgba(10, 25, 55, 0.06);
    --shadow-md:       0 4px 12px rgba(10, 25, 55, 0.08), 0 2px 4px rgba(10, 25, 55, 0.04);
    --shadow-lg:       0 12px 28px rgba(10, 25, 55, 0.14), 0 4px 10px rgba(10, 25, 55, 0.06);
    --shadow-launcher: 0 10px 24px rgba(34, 201, 255, 0.30), 0 2px 6px rgba(10, 25, 55, 0.15);
    --shadow-bubble:   0 1px 2px rgba(0, 81, 167, 0.14);

    /* Semantic — red pulled back from the brighter dark-mode red */
    --color-red-500: #DC2626;
    --color-red-600: #B91C1C;

    /* v2.8-legacy mappings (kept pointing at new tokens) */
    --color-bg-bot: var(--surface-raised);
    --color-bg-user: var(--color-primary);
    --color-bg-white: var(--surface-window);
    --color-quaternary: var(--surface-transcript);
    --color-blue-gray: var(--text-muted);
    --color-dark-blue: var(--color-dark);
    --color-light-gray: var(--text-subtle);
    --color-border-gray: var(--border-mid);
    --color-icon-gray: var(--border-strong);
    --color-icon-text: var(--text-body);
    --color-time-light: var(--text-muted);
}

/* Auto theme — use prefers-color-scheme to choose */
@media (prefers-color-scheme: light) {
    html.theme-auto,
    body.theme-auto,
    .theme-auto,
    html[data-chat-theme="auto"] {
        --surface-app: #FFFFFF;
        --surface-window: #FFFFFF;
        --surface-transcript: #F4F8FC;
        --surface-raised: #F1F5F9;
        --surface-input: #F1F5F9;
        --surface-input-hi: #FFFFFF;
        --surface-chip: rgba(39, 133, 179, 0.08);
        --surface-chip-hi: rgba(39, 133, 179, 0.16);
        --text-strong: #0B1B33;
        --text-body: #1E293B;
        --text-muted: #64748B;
        --text-subtle: #94A3B8;
        --border-soft: rgba(11, 27, 51, 0.06);
        --border-mid: rgba(11, 27, 51, 0.10);
        --border-strong: rgba(11, 27, 51, 0.18);
        --shadow-sm: 0 1px 2px rgba(10, 25, 55, 0.06);
        --shadow-md: 0 4px 12px rgba(10, 25, 55, 0.08), 0 2px 4px rgba(10, 25, 55, 0.04);
        --shadow-lg: 0 12px 28px rgba(10, 25, 55, 0.14), 0 4px 10px rgba(10, 25, 55, 0.06);
        --shadow-launcher: 0 10px 24px rgba(34, 201, 255, 0.30), 0 2px 6px rgba(10, 25, 55, 0.15);
        --shadow-bubble: 0 1px 2px rgba(0, 81, 167, 0.14);
        --color-red-500: #DC2626;
        --color-red-600: #B91C1C;
    }
}

/* Light-theme fine-tuning beyond token swaps */
html.theme-light .chat-widget,
body.theme-light .chat-widget,
.theme-light.chat-widget,
.theme-light .chat-widget,
html[data-chat-theme="light"] .chat-widget {
    border-color: var(--border-mid);
}

html.theme-light .message-bubble-bot-content,
body.theme-light .message-bubble-bot-content,
.theme-light .message-bubble-bot-content,
html[data-chat-theme="light"] .message-bubble-bot-content {
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    color: var(--text-body);
}

html.theme-light .quick-replies-button,
body.theme-light .quick-replies-button,
.theme-light .quick-replies-button,
html[data-chat-theme="light"] .quick-replies-button {
    background-color: var(--surface-window);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

html.theme-light .quick-replies-button:hover:not(:disabled),
body.theme-light .quick-replies-button:hover:not(:disabled),
.theme-light .quick-replies-button:hover:not(:disabled),
html[data-chat-theme="light"] .quick-replies-button:hover:not(:disabled) {
    background-color: var(--color-accent);
    color: var(--surface-window);
}

html.theme-light #endChatButton:hover,
body.theme-light #endChatButton:hover,
.theme-light #endChatButton:hover,
html[data-chat-theme="light"] #endChatButton:hover {
    background-color: #FDECEE;
    color: var(--color-red-500);
}

html.theme-light .notification-icon,
body.theme-light .notification-icon,
.theme-light .notification-icon,
html[data-chat-theme="light"] .notification-icon {
    /* cleaner on light without the box-shadow halo */
    box-shadow: 0 2px 6px rgba(34, 201, 255, 0.25);
}