/* ===== Chat Widget — compact desktop + compact mobile sheet ===== */

:root {
    --chat-bg: #0e1a24;
    --chat-bg-2: #132433;
    --chat-text: #e7eef7;
    --chat-muted: #a8bccf;
    --chat-border: rgba(255,255,255,0.08);
    --chat-shadow: 0 16px 40px rgba(0,0,0,.40);
    --radius-xl: 18px;
    --radius-md: 12px;
    /* Desktop card */
    --panel-w: 420px;
    --panel-h: 420px;
    /* Mobile sheet height (make smaller/bigger to taste) */
    --sheet-h-mobile: 70dvh;
    --fab-size: 56px;
    --accent: #2ea8ff;
    --send: #22c55e;
    --bubble-admin: #293544;
    --bubble-user: #23a6f0;
}

/* ---- Container ---- */
#chat-widget {
    color: var(--chat-text);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
    transform: none !important;
    filter: none !important; /* defensive */
}

/* ---- FAB ---- */
#chat-toggle.chat-fab {
    all: unset;
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    width: var(--fab-size);
    height: var(--fab-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent) !important;
    color: #001824 !important;
    border-radius: 9999px !important;
    cursor: pointer;
    box-shadow: var(--chat-shadow);
    z-index: 2147483001;
    font-size: 22px;
    line-height: 1;
}

/* ---- Panel (desktop card) ---- */
#chat-widget .chat-panel {
    position: fixed !important;
    right: 24px !important;
    bottom: calc(24px + var(--fab-size) + 10px) !important;
    width: var(--panel-w);
    height: var(--panel-h);
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--chat-shadow);
    overflow: hidden;
    display: none;
    grid-template-rows: auto 1fr auto;
    z-index: 2147483000;
}
/* JS toggles .chat-open; we keep grid layout */
#chat-widget.chat-open .chat-panel {
    display: grid;
}

/* ---- Header ---- */
#chat-widget .chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(180deg,#1b2938,#152230);
    border-bottom: 1px solid var(--chat-border);
}

#chat-title {
    font-weight: 700;
}

#chat-widget .chat-sub {
    font-size: 12px;
    color: var(--chat-muted);
}

#chat-widget .chat-close {
    border: 0;
    background: transparent;
    color: #b98cff;
    font-size: 18px;
    cursor: pointer;
}

/* ---- Messages (scrollable) ---- */
#chat-widget .chat-body {
    padding: 12px 14px;
    overflow-y: auto;
    position: relative;
    background: linear-gradient(180deg,rgba(255,255,255,.02),transparent 120px) var(--chat-bg);
    /* modern scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.30) transparent; /* Firefox */
}

    #chat-widget .chat-body::-webkit-scrollbar {
        width: 10px;
    }

    #chat-widget .chat-body::-webkit-scrollbar-track {
        background: transparent;
    }

    #chat-widget .chat-body::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.20);
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        #chat-widget .chat-body::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,.30);
        }

/* Basic rows still fine */
#chat-messages > div {
    margin: 6px 0;
}

/* Bubbles */
#chat-messages .msg {
    display: flex;
    margin: 6px 0;
}

    #chat-messages .msg.user, #chat-messages .msg.me {
        justify-content: flex-end;
    }

    #chat-messages .msg.admin, #chat-messages .msg.them {
        justify-content: flex-start;
    }

#chat-messages .bubble,
#chat-messages .msg-bubble {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 14px;
    line-height: 1.25;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

#chat-messages .msg.user .bubble,
#chat-messages .msg.me .msg-bubble {
    background: var(--bubble-user);
    color: #001520;
    border-bottom-right-radius: 6px;
}

#chat-messages .msg.admin .bubble,
#chat-messages .msg.them .msg-bubble {
    background: var(--bubble-admin);
    color: var(--chat-text);
    border: 1px solid var(--chat-border);
    border-bottom-left-radius: 6px;
}

/* Compact timestamp inside bubble (JS adds .meta) */
#chat-messages .bubble .meta,
#chat-messages .msg-bubble .meta {
    font-size: 11px;
    color: var(--chat-muted);
    opacity: .85;
    margin-top: 4px;
    font-feature-settings: "tnum";
}

#chat-messages .msg-time {
    display: none;
}
/* old external time hidden */

/* ---- Input row (desktop) ---- */
#chat-widget .chat-input {
    display: grid;
    grid-template-columns: 140px 1fr 96px;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background: var(--chat-bg-2);
    border-top: 1px solid var(--chat-border);
}

    #chat-widget .chat-input input[type="text"] {
        height: 42px;
        border-radius: var(--radius-md);
        border: 1px solid var(--chat-border);
        background: #0b1721;
        color: var(--chat-text);
        padding: 0 10px;
        outline: none;
    }

#chat-widget #chat-displayname {
    min-width: 120px;
}

#chat-widget #chat-text {
    min-width: 80px;
}

#chat-widget .chat-input .chat-send {
    height: 42px;
    border-radius: var(--radius-md);
    border: 0;
    background: var(--send);
    color: #06240f;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(34,197,94,.35);
}

/* === Mobile: COMPACT bottom sheet (≤600px) === */
@media (max-width:600px) {

    /* Smaller FAB and placement */
    #chat-toggle.chat-fab {
        right: 14px !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    /* Not full-screen: a comfy bottom sheet */
    #chat-widget .chat-panel {
        left: 4vw;
        right: 4vw; /* side gutters */
        bottom: calc(18px + env(safe-area-inset-bottom) + 50px); /* sit above FAB */
        width: 92vw;
        height: var(--sheet-h-mobile); /* <— change this variable if you want shorter/taller */
        border-radius: 16px;
    }

    /* Tighten header/body paddings */
    #chat-widget .chat-header {
        padding: 10px 12px;
    }

    #chat-widget .chat-body {
        padding: 10px 12px;
    }

    /* Slightly wider bubbles, slightly smaller font to fit more */
    #chat-messages .bubble, #chat-messages .msg-bubble {
        max-width: 86%;
        font-size: 13.5px;
        padding: 8px 10px;
    }

    /* Input: 2 rows (Name on top, Text+Send below) with smaller heights */
    #chat-widget .chat-input {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name name"
            "text send";
        gap: 8px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    }

    #chat-displayname {
        grid-area: name;
    }

    #chat-text {
        grid-area: text;
    }

    #chat-widget .chat-input .chat-send {
        grid-area: send;
    }

    #chat-widget .chat-input input[type="text"] {
        height: 38px;
    }

    #chat-widget .chat-input .chat-send {
        height: 38px;
        padding: 0 14px;
    }

    /* Scroll buttons move up so they don’t shadow the input */
    #chat-widget .scroll-ctrls {
        right: 10px;
        bottom: calc(112px + env(safe-area-inset-bottom));
    }
}

/* --- Scroll controls (Top / Bottom) --- */
#chat-widget .scroll-ctrls {
    position: absolute;
    right: 10px;
    bottom: 86px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 3;
}

#chat-widget .scroll-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--chat-border);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: var(--chat-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--chat-shadow);
}

    #chat-widget .scroll-btn:hover {
        background: rgba(255,255,255,.12);
    }

    #chat-widget .scroll-btn[hidden] {
        display: none;
    }

    #chat-widget .scroll-btn.pulse {
        animation: chatPulse 1.2s ease-out 2;
    }

@keyframes chatPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(46,168,255,.55);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(46,168,255,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46,168,255,0);
    }
}


#chat-displayname.readonly {
    opacity: .95;
    cursor: default;
}