/* ==========================================
   THEME TOKENS

   Light is the base. Dark is declared under BOTH the OS media query
   and the [data-theme] scope, so the viewer's explicit choice wins in
   either direction: the :not() guard lets a light stamp beat OS-dark,
   and the toggle scope sits below the media block.
   ========================================== */

:root {
    color-scheme: light;

    --page-bg:         #f4f7fb;
    --panel:           #ffffff;
    --header-bg:       #0757a0;
    --header-text:     #ffffff;
    --text:            #172033;
    --text-muted:      #6d7585;
    --text-faint:      #9aa3b2;
    --bubble-bot:      #edf4fb;
    --bubble-bot-text: #172033;
    --accent:          #0757a0;
    --on-accent:       #ffffff;
    --border:          #e4e8ef;
    /* Darker than the old #cddcee: the chip outline is the only thing
       separating a choice from the panel, and needed real contrast. */
    --chip-border:     #a9c3de;
    --closure-bg:      #f7faff;
    --online:          #d9ffd9;
}


@media (prefers-color-scheme: dark) {

    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --page-bg:         #0f1419;
        --panel:           #1a2027;
        --header-bg:       #14293f;
        --header-text:     #eaf1f8;
        --text:            #e6eaf0;
        --text-muted:      #9aa5b3;
        --text-faint:      #7d8796;
        --bubble-bot:      #232c36;
        --bubble-bot-text: #e6eaf0;
        --accent:          #4a9eea;
        --on-accent:       #08121c;
        --border:          #2c3540;
        --chip-border:     #35424f;
        --closure-bg:      #1d242c;
        --online:          #7ee08a;
    }
}


:root[data-theme="dark"] {
    color-scheme: dark;

    --page-bg:         #0f1419;
    --panel:           #1a2027;
    --header-bg:       #14293f;
    --header-text:     #eaf1f8;
    --text:            #e6eaf0;
    --text-muted:      #9aa5b3;
    --text-faint:      #7d8796;
    --bubble-bot:      #232c36;
    --bubble-bot-text: #e6eaf0;
    --accent:          #4a9eea;
    --on-accent:       #08121c;
    --border:          #2c3540;
    --chip-border:     #35424f;
    --closure-bg:      #1d242c;
    --online:          #7ee08a;
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family:
        Inter,
        Arial,
        sans-serif;
    background: var(--page-bg);
    color: var(--text);
}


/* ==========================================
   CUSTOMER CHAT
   ========================================== */

.chat-page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.chat-shell {
    width: 100%;
    max-width: 900px;
    height: 92vh;
    background: var(--panel);

    border-radius: 16px;

    box-shadow:
        0 12px 40px
        rgba(0, 0, 0, 0.10);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


.chat-header {
    padding: 20px 24px;

    background: var(--header-bg);
    color: var(--header-text);

    display: flex;
    justify-content: space-between;
    align-items: center;
}


.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}


.logo-badge {
    width: 40px;
    height: 40px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;

    flex-shrink: 0;

    overflow: hidden;
}


.logo-badge.has-image {
    background: var(--panel);
    border-color: var(--border);
}


.logo-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.logo-badge.small {
    width: 26px;
    height: 26px;
    font-size: 10px;
}


.tenant-name {
    font-size: 18px;
    font-weight: 700;
}


.assistant-name {
    font-size: 13px;
    opacity: .85;
    margin-top: 3px;
}


.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}


.theme-toggle {
    border: 1px solid rgba(255, 255, 255, 0.35);

    background: rgba(255, 255, 255, 0.12);

    color: inherit;

    width: 32px;
    height: 32px;

    border-radius: 8px;

    font-size: 15px;
    line-height: 1;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
}


.online {
    font-size: 12px;
    color: var(--online);

    white-space: nowrap;
}


.messages {
    flex: 1;

    overflow-y: auto;

    padding: 24px;
}


.message {
    display: flex;
    margin-bottom: 18px;
}


.message.bot {
    flex-direction: column;
    align-items: flex-start;
}


.message.user {
    flex-direction: column;
    align-items: flex-end;
}


/* Sender name + timestamp line above every bubble, on both sides. */
.message-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;

    margin-bottom: 5px;
}


.message-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}


.message-time {
    font-size: 11px;
    color: var(--text-faint);
}


.bubble {
    padding: 12px 16px;

    border-radius: 14px;

    max-width: 75%;

    line-height: 1.5;
}


.bot .bubble {
    background: var(--bubble-bot);
    color: var(--bubble-bot-text);
}


.user .bubble {
    background: var(--accent);
    color: var(--on-accent);
}


.chat-input {
    border-top: 1px solid var(--border);

    padding: 14px;

    display: flex;

    gap: 10px;
}


.chat-input input {
    flex: 1;

    min-width: 0;

    border: 1px solid var(--chip-border);

    border-radius: 10px;

    padding: 13px;

    /* 16px minimum stops iOS Safari zooming the page on focus. */
    font-size: 16px;

    font-family: inherit;

    background: var(--panel);
    color: var(--text);

    outline: none;
}


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


.chat-input input:focus {
    border-color: var(--accent);
}


.chat-input button {
    border: 0;

    border-radius: 10px;

    background: var(--accent);

    color: var(--on-accent);

    padding:
        0 22px;

    cursor: pointer;

    font-weight: 600;
}


.chat-input button:disabled {
    opacity: .5;

    cursor: not-allowed;
}


.chat-input.hidden {
    display: none;
}


/* ==========================================
   CLOSURE
   ========================================== */

.closure-banner {
    border-top: 1px solid var(--border);

    padding: 18px 24px;

    text-align: center;

    background: var(--closure-bg);
}


.closure-banner.hidden {
    display: none;
}


.closure-text {
    color: var(--text);

    margin-bottom: 12px;

    line-height: 1.5;
}


.closure-banner button {
    border: 0;

    border-radius: 10px;

    background: var(--accent);

    color: var(--on-accent);

    padding: 11px 22px;

    cursor: pointer;

    font-weight: 600;

    font-size: 14px;
}


/* ==========================================
   AI DISCLAIMER

   Sits directly under the composer, above the powered-by line, so
   it's visible whenever the customer is typing.
   ========================================== */

.ai-disclaimer {
    text-align: center;

    padding: 8px 16px 0;

    font-size: 11px;
    color: var(--text-muted);

    line-height: 1.4;
}


.ai-disclaimer:empty {
    display: none;
}


/* ==========================================
   POWERED BY
   ========================================== */

.powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 0 16px;

    font-size: 11px;
    color: var(--text-muted);
}


.powered-by .logo-badge {
    background: var(--bubble-bot);
    border-color: var(--border);
    color: var(--accent);
}


.powered-by .logo-badge.has-image {
    background: var(--panel);
}


/* ==========================================
   MEDIA ATTACHMENTS
   ========================================== */

.media-attachment {
    margin-top: 8px;

    max-width: 280px;
}


/* Video needs more room than a thumbnail image to stay watchable,
   but must still fit the narrow embedded widget. */
.media-attachment-video {
    max-width: min(420px, 100%);
    width: 100%;
}


.media-attachment img,
.media-attachment video {
    width: 100%;

    border-radius: 10px;

    border: 1px solid var(--border);

    display: block;
}


/* Responsive 16:9 wrapper for embedded YouTube players - the iframe
   has no intrinsic size, so without this it collapses or overflows
   the chat bubble on narrow widget widths. */
.media-video-frame {
    position: relative;

    width: 100%;

    padding-top: 56.25%;

    border-radius: 10px;

    overflow: hidden;

    background: #000;
}


.media-video-frame iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


.media-caption {
    font-size: 11px;
    color: var(--text-muted);

    margin-top: 5px;
}


.media-file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    background: var(--panel);

    border: 1px solid var(--chip-border);

    border-radius: 8px;

    padding: 8px 14px;

    font-size: 13px;
    font-weight: 600;

    color: var(--accent);

    text-decoration: none;
}


.media-file-link:hover {
    background: var(--bubble-bot);
}


/* ==========================================
   TOPIC CHIPS
   ========================================== */

.topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 10px;

    max-width: 90%;
}


.topic-chips.hidden {
    display: none;
}


.topic-chip {
    border: 1px solid var(--chip-border);

    background: var(--panel);

    color: var(--accent);

    border-radius: 999px;

    padding: 8px 16px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}


.topic-chip:hover {
    background: var(--bubble-bot);
}


/* ==========================================
   QUICK REPLIES
   ========================================== */

.quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: -8px 0 18px;

    padding-left: 2px;

    /* Quick replies sit outside a bubble, so without this a long menu
       label can push the whole message column wider than the shell. */
    max-width: 90%;
}


.quick-reply-btn {
    border: 1px solid var(--accent);

    background: var(--panel);

    color: var(--accent);

    border-radius: 999px;

    padding: 8px 20px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    max-width: 100%;
}


.quick-reply-btn:hover {
    background: var(--accent);
    color: var(--on-accent);
}


/* ==========================================
   TYPING
   ========================================== */

.typing {
    display: flex;

    gap: 5px;

    padding:
        15px 18px;
}


.typing span {
    width: 6px;
    height: 6px;

    background: var(--text-muted);

    border-radius: 50%;

    animation:
        typing 1.2s infinite;
}


.typing span:nth-child(2) {
    animation-delay:
        .15s;
}


.typing span:nth-child(3) {
    animation-delay:
        .30s;
}


@keyframes typing {

    0%, 60%, 100% {
        opacity: .25;
        transform:
            translateY(0);
    }

    30% {
        opacity: 1;
        transform:
            translateY(-3px);
    }
}


@media (
    max-width: 700px
) {

    .chat-page {
        align-items: stretch;
    }

    .chat-shell {
        /* dvh follows the mobile browser's collapsing toolbar, so the
           composer isn't pushed off-screen the way 100vh does. */
        height: 100vh;
        height: 100dvh;

        border-radius: 0;
    }

    .bubble {
        max-width: 90%;
    }

    .chat-header {
        padding: 14px 16px;
    }

    .tenant-name {
        font-size: 16px;
    }

    .messages {
        padding: 16px;
    }

    /* Choice options: one per row, full width, with a comfortable
       touch target. Wrapped pill chips were the misalignment - a
       long label wrapped mid-pill and the rows lost their rhythm. */
    .topic-chips {
        max-width: 100%;

        flex-direction: column;
        align-items: stretch;

        gap: 8px;
    }

    .topic-chip {
        width: 100%;

        min-height: 46px;

        border-radius: 12px;

        text-align: left;

        padding: 12px 16px;

        font-size: 14px;
    }

    .quick-replies {
        max-width: 100%;

        padding-right: 2px;
    }

    /* A binary confirm (Yes/No) stays two-up; `1 1 40%` rather than
       `1 1 0` so a pair of long labels can still wrap instead of being
       crushed below their own padding. */
    .quick-reply-btn {
        flex: 1 1 40%;

        min-width: 0;
        min-height: 46px;

        border-radius: 12px;

        font-size: 14px;
    }

    /* A menu is not a confirm. Three or more options laid out two-up
       wrap mid-label and overflow the shell, so a menu gets the same
       full-width rows as the opening topic chips. */
    .quick-replies.is-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-replies.is-menu .quick-reply-btn {
        flex: none;

        width: 100%;

        text-align: left;

        padding: 12px 16px;
    }

    .chat-input {
        padding: 10px;

        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .chat-input button {
        padding: 0 18px;

        min-height: 46px;
    }

    /* The status text is decorative next to the header title; the
       theme control is not, so it keeps its place. */
    .online {
        display: none;
    }

}