/* =============================================================
   CHATHEAD.CSS
   Styled to match the site's dark luxury theme.
   Gold (#d4af37) + Teal (#00d9ff) on dark backgrounds.
   Uses .ch- prefix to avoid conflicts with site styles.
   ============================================================= */

/* ---------------------------------------------------------------
   CSS VARIABLES — Mapped to site's design system
   --------------------------------------------------------------- */
:root {
    /* Primary colors — match site */
    --ch-primary:        #d4af37;      /* --color-gold */
    --ch-primary-dark:   #b8960c;      /* --color-gold-dark */
    --ch-primary-light:  rgba(212, 175, 55, 0.12);
    --ch-primary-glow:   rgba(212, 175, 55, 0.4);  /* --glow-gold */
    --ch-secondary:      #00d9ff;      /* --color-teal */
    --ch-secondary-glow: rgba(0, 217, 255, 0.4);   /* --glow-teal */

    /* Backgrounds — match site's dark layers */
    --ch-bg-window:      #101010;      /* --color-bg-card */
    --ch-bg-elevated:    #161616;      /* --color-bg-elevated */
    --ch-bg-deep:        #050505;      /* --color-bg-deep */
    --ch-bg-dark:        #0a0a0a;      /* --color-bg-dark */
    --ch-bg-input:       #161616;

    /* Text colors */
    --ch-text-primary:   #ffffff;      /* --color-text-primary */
    --ch-text-secondary: #a0a0a0;      /* --color-text-secondary */
    --ch-text-muted:     #666666;      /* --color-text-muted */

    /* Status */
    --ch-success:        #00c853;      /* --color-success */
    --ch-error:          #ff5252;      /* --color-error */

    /* Borders */
    --ch-border:         rgba(212, 175, 55, 0.15);
    --ch-border-hover:   rgba(212, 175, 55, 0.35);

    /* Shadows */
    --ch-shadow:         0 20px 60px rgba(0, 0, 0, 0.6),
                         0 0 40px rgba(212, 175, 55, 0.08);
    --ch-shadow-btn:     0 8px 25px rgba(212, 175, 55, 0.35);

    /* Misc */
    --ch-radius:         12px;         /* --radius-lg */
    --ch-radius-sm:      8px;          /* --radius-md */
    --ch-transition:     all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Fonts — match site */
    --ch-font:           'Inter', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------
   CHAT TRIGGER BUTTON
   --------------------------------------------------------------- */
#ch-trigger {
    position: fixed;
    bottom: 90px;   /* ← moved up to sit above back-to-top */
    right: 28px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-dark));
    border: 1px solid rgba(212, 175, 55, 0.3);
    cursor: pointer;
    box-shadow: var(--ch-shadow-btn);
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ch-transition);
    outline: none;
}

#ch-trigger:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.5);
    border-color: rgba(212, 175, 55, 0.6);
}

#ch-trigger:active {
    transform: scale(0.96);
}

/* Icon inside trigger */
#ch-trigger .ch-trigger-icon {
    font-size: 26px;
    transition: var(--ch-transition);
    line-height: 1;
}

/* Pulse ring */
#ch-trigger::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-dark));
    opacity: 0.4;
    animation: ch-pulse 2.5s ease-out infinite;
    z-index: -1;
}

#ch-trigger.ch-open::before {
    animation: none;
    opacity: 0;
}

@keyframes ch-pulse {
    0%   { transform: scale(1);    opacity: 0.4; }
    70%  { transform: scale(1.6);  opacity: 0;   }
    100% { transform: scale(1.6);  opacity: 0;   }
}

/* Unread badge */
#ch-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--ch-error);
    color: white;
    font-size: 11px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ch-bg-dark);
    opacity: 0;
    transform: scale(0);
    transition: var(--ch-transition);
    font-family: var(--ch-font);
}

#ch-badge.ch-visible {
    opacity: 1;
    transform: scale(1);
}

/* ---------------------------------------------------------------
   CHAT WINDOW
   --------------------------------------------------------------- */
#ch-window {
    position: fixed;
    bottom: 165px; 
    right: 28px;
    width: 380px;
    height: 560px;
    background: var(--ch-bg-window);
    border-radius: var(--ch-radius);
    border: 1px solid var(--ch-border);
    box-shadow: var(--ch-shadow);
    z-index: 999997;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Hidden by default */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: var(--ch-transition);
    transform-origin: bottom right;
    font-family: var(--ch-font);
}

/* Shown state */
#ch-window.ch-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ---------------------------------------------------------------
   CHAT HEADER
   --------------------------------------------------------------- */
#ch-header {
    background: var(--ch-bg-deep);
    border-bottom: 1px solid var(--ch-border);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Gold accent line at top of header */
#ch-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ch-primary),
        var(--ch-secondary),
        transparent
    );
}

.ch-header-avatar {
    width: 42px;
    height: 42px;
    background: var(--ch-primary-light);
    border: 1px solid var(--ch-border-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ch-header-info {
    flex: 1;
}

.ch-header-title {
    color: var(--ch-text-primary);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 3px;
    font-family: var(--ch-font);
}

.ch-header-status {
    color: var(--ch-text-muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Online dot */
.ch-status-dot {
    width: 7px;
    height: 7px;
    background: var(--ch-success);
    border-radius: 50%;
    display: inline-block;
    animation: ch-blink 2s ease-in-out infinite;
    box-shadow: 0 0 6px var(--ch-success);
}

@keyframes ch-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ---------------------------------------------------------------
   CHAT BODY
   --------------------------------------------------------------- */
#ch-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ch-bg-dark);
}

/* Panels */
.ch-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.ch-panel.ch-active {
    opacity: 1;
    pointer-events: all;
    position: relative;
}

/* ---------------------------------------------------------------
   PRE-CHAT FORM PANEL
   --------------------------------------------------------------- */
#ch-panel-prechat {
    padding: 28px 24px;
    overflow-y: auto;
    background: var(--ch-bg-dark);
}

.ch-prechat-welcome {
    text-align: center;
    margin-bottom: 28px;
}

.ch-prechat-welcome h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ch-text-primary);
    margin: 0 0 8px;
    font-family: var(--ch-font);
}

.ch-prechat-welcome p {
    font-size: 14px;
    color: var(--ch-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Decorative gold line under welcome */
.ch-prechat-welcome::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--ch-primary), var(--ch-secondary));
    margin: 16px auto 0;
    border-radius: 2px;
}

.ch-form-group {
    margin-bottom: 16px;
}

.ch-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ch-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ch-form-group input {
    width: 100%;
    padding: 11px 14px;
    background: var(--ch-bg-elevated);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    font-size: 14px;
    color: var(--ch-text-primary);
    outline: none;
    transition: var(--ch-transition);
    box-sizing: border-box;
    font-family: var(--ch-font);
}

.ch-form-group input::placeholder {
    color: var(--ch-text-muted);
}

.ch-form-group input:focus {
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 3px var(--ch-primary-light),
                0 0 12px var(--ch-primary-glow);
}

/* Start Chat Button */
.ch-btn-start {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-dark));
    color: var(--ch-bg-dark);
    border: none;
    border-radius: var(--ch-radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: var(--ch-transition);
    font-family: var(--ch-font);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ch-btn-start:hover {
    background: linear-gradient(135deg, #f4d03f, var(--ch-primary));
    box-shadow: 0 4px 20px var(--ch-primary-glow);
    transform: translateY(-1px);
}

.ch-btn-start:active {
    transform: translateY(0);
}

/* Skip link */
.ch-skip-link {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--ch-text-muted);
}

.ch-skip-link a {
    color: var(--ch-text-secondary);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--ch-border);
    padding-bottom: 1px;
    transition: var(--ch-transition);
}

.ch-skip-link a:hover {
    color: var(--ch-primary);
    border-color: var(--ch-primary);
}

/* ---------------------------------------------------------------
   MESSAGES PANEL
   --------------------------------------------------------------- */
#ch-panel-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Section indicator */
#ch-section-indicator {
    background: var(--ch-bg-elevated);
    border-bottom: 1px solid var(--ch-border);
    color: var(--ch-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 16px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    flex-shrink: 0;
}

/* Messages area */
#ch-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    background: var(--ch-bg-dark);
}

/* Custom scrollbar for messages */
#ch-messages::-webkit-scrollbar {
    width: 3px;
}
#ch-messages::-webkit-scrollbar-track {
    background: transparent;
}
#ch-messages::-webkit-scrollbar-thumb {
    background: var(--ch-border);
    border-radius: 99px;
}
#ch-messages::-webkit-scrollbar-thumb:hover {
    background: var(--ch-primary);
}

/* Message wrapper */
.ch-msg {
    display: flex;
    flex-direction: column;
    max-width: 82%;
    animation: ch-msg-in 0.25s ease;
}

@keyframes ch-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Visitor — right */
.ch-msg.ch-msg-visitor {
    align-self: flex-end;
    align-items: flex-end;
}

/* Bot/Admin — left */
.ch-msg.ch-msg-bot,
.ch-msg.ch-msg-admin {
    align-self: flex-start;
    align-items: flex-start;
}

/* Sender label */
.ch-msg-sender {
    font-size: 10px;
    color: var(--ch-text-muted);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Message bubble */
.ch-msg-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
}

/* Visitor bubble — gold gradient */
.ch-msg-visitor .ch-msg-bubble {
    background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-dark));
    color: var(--ch-bg-dark);
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

/* Bot bubble — dark elevated */
.ch-msg-bot .ch-msg-bubble {
    background: var(--ch-bg-elevated);
    color: var(--ch-text-primary);
    border: 1px solid var(--ch-border);
    border-bottom-left-radius: 4px;
}

/* Admin bubble — teal accent */
.ch-msg-admin .ch-msg-bubble {
    background: var(--ch-bg-elevated);
    color: var(--ch-text-primary);
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-left: 2px solid var(--ch-secondary);
    border-bottom-left-radius: 4px;
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.05);
}

/* Timestamp */
.ch-msg-time {
    font-size: 10px;
    color: var(--ch-text-muted);
    margin-top: 4px;
}

/* System messages */
.ch-msg-system {
    align-self: center;
    background: var(--ch-bg-elevated);
    border: 1px solid var(--ch-border);
    color: var(--ch-text-muted);
    font-size: 11px;
    padding: 5px 14px;
    border-radius: 99px;
    text-align: center;
}

/* ---------------------------------------------------------------
   FAQ BUTTONS
   --------------------------------------------------------------- */
#ch-faq-container {
    padding: 8px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    border-top: 1px solid var(--ch-border);
    background: var(--ch-bg-elevated);
    max-height: 155px;
    overflow-y: auto;
}

.ch-faq-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ch-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

.ch-faq-btn {
    background: var(--ch-bg-dark);
    color: var(--ch-text-secondary);
    border: 1px solid var(--ch-border);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: var(--ch-transition);
    font-family: var(--ch-font);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-faq-btn:hover {
    background: var(--ch-primary-light);
    color: var(--ch-primary);
    border-color: var(--ch-border-hover);
    box-shadow: 0 0 10px var(--ch-primary-glow);
}

/* ---------------------------------------------------------------
   TYPING INDICATOR
   --------------------------------------------------------------- */
#ch-typing {
    padding: 0 16px 8px;
    display: none;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: var(--ch-bg-dark);
}

#ch-typing.ch-visible {
    display: flex;
}

.ch-typing-dots {
    display: flex;
    gap: 4px;
    background: var(--ch-bg-elevated);
    border: 1px solid var(--ch-border);
    padding: 8px 12px;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}

.ch-typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--ch-primary);
    border-radius: 50%;
    animation: ch-typing 1.2s ease-in-out infinite;
    opacity: 0.5;
}

.ch-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ch-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ch-typing {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
    30%            { transform: translateY(-5px); opacity: 1;   }
}

.ch-typing-label {
    font-size: 11px;
    color: var(--ch-text-muted);
}

/* ---------------------------------------------------------------
   INPUT AREA
   --------------------------------------------------------------- */
#ch-input-area {
    padding: 12px 14px;
    border-top: 1px solid var(--ch-border);
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
    background: var(--ch-bg-elevated);
}

#ch-input {
    flex: 1;
    background: var(--ch-bg-dark);
    border: 1px solid var(--ch-border);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 13px;
    outline: none;
    resize: none;
    max-height: 100px;
    min-height: 40px;
    font-family: var(--ch-font);
    color: var(--ch-text-primary);
    line-height: 1.4;
    transition: var(--ch-transition);
    overflow-y: auto;
}

#ch-input:focus {
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 2px var(--ch-primary-light),
                0 0 8px var(--ch-primary-glow);
}

#ch-input::placeholder {
    color: var(--ch-text-muted);
}

/* Send button */
#ch-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-dark));
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--ch-transition);
    font-size: 15px;
    color: var(--ch-bg-dark);
}

#ch-send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px var(--ch-primary-glow);
}

#ch-send-btn:active {
    transform: scale(0.95);
}

/* Live agent button */
#ch-live-agent-btn {
    margin: 0 14px 8px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    color: var(--ch-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: var(--ch-transition);
    font-family: var(--ch-font);
    text-align: center;
    width: calc(100% - 28px);
}

#ch-live-agent-btn:hover {
    background: rgba(0, 217, 255, 0.05);
    color: var(--ch-secondary);
    border-color: rgba(0, 217, 255, 0.3);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.1);
}

/* ---------------------------------------------------------------
   MOBILE RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 480px) {
    #ch-window {
        bottom: 85px;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;  
        max-height: 100dvh;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    #ch-trigger {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
    }
}

/* ---------------------------------------------------------------
   UTILITY
   --------------------------------------------------------------- */
.ch-hidden {
    display: none !important;
}

/* ============================================================
   FAQ TRAY — Collapsible suggestion panel
   Sits between the messages area and the input bar.
   Collapsed by default — one thin toggle bar.
   Expands upward to show FAQ buttons and group dropdowns.
   ============================================================ */

/* ── Tray outer container ──────────────────────────────────── */
#ch-faq-tray {
    /* Sits between messages and input bar */
    flex-shrink: 0;
    background: #0f0f0f;
    border-top: 1px solid #1e1e1e;

    /* Hidden body by default — only toggle bar shows */
    display: block;
}

/* ── Toggle bar — always visible ──────────────────────────── */
#ch-faq-tray-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

#ch-faq-tray-toggle:hover {
    background: #161616;
}

/* Label text */
#ch-faq-tray-label {
    font-size: 11px;
    font-weight: 600;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Arrow indicator */
#ch-faq-tray-arrow {
    font-size: 11px;
    color: #555;
    transition: transform 0.2s;
}

/* ── Tray body — hidden until open ────────────────────────── */
#ch-faq-tray-body {
    /* Hidden by default */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Open state — JS adds ch-tray-open to #ch-faq-tray */
#ch-faq-tray.ch-tray-open #ch-faq-tray-body {
    /* Max height — has own scrollbar so it never covers full chat */
    max-height: 220px;
    overflow-y: auto;
}

/* Tray body scrollbar */
#ch-faq-tray-body::-webkit-scrollbar {
    width: 3px;
}

#ch-faq-tray-body::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 99px;
}

/* ── Regular FAQ buttons inside tray ──────────────────────── */
/* Override old .ch-faq-btn styles for tray context */
#ch-faq-list .ch-faq-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid #1a1a1a;
    padding: 9px 14px;
    font-size: 12px;
    color: #c0c0c0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}

#ch-faq-list .ch-faq-btn:hover {
    background: #161616;
    color: #d4af37;
}

#ch-faq-list .ch-faq-btn:last-child {
    border-bottom: none;
}

/* ── FAQ Group (Bet Types / Game Screens) ──────────────────── */
.ch-faq-group {
    border-bottom: 1px solid #1a1a1a;
}

.ch-faq-group:last-child {
    border-bottom: none;
}

/* Group toggle button (e.g. "🎲 Bet Types ▾") */
.ch-faq-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #d4af37;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s;
}

.ch-faq-group-toggle:hover {
    background: #161616;
}

/* Arrow inside group toggle */
.ch-group-arrow {
    font-size: 10px;
    color: #555;
    flex-shrink: 0;
}

/* Group body — hidden until open */
.ch-faq-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: #0a0a0a;
}

/* Open state — JS adds ch-group-open to .ch-faq-group */
.ch-faq-group.ch-group-open .ch-faq-group-body {
    max-height: 300px; /* Enough for all items */
}

/* Individual item inside a group */
.ch-faq-group-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-top: 1px solid #141414;
    padding: 8px 14px 8px 24px; /* Extra left indent */
    font-size: 12px;
    color: #a0a0a0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s, color 0.15s;
}

.ch-faq-group-item:hover {
    background: #161616;
    color: #00d9ff; /* Teal on hover */
}

/* ── Hide the old faq container if it still exists ─────────── */
/* Safety rule — in case any old reference remains */
#ch-faq-container {
    display: none !important;
}