/* ============================================================
   UBM Lead Bot — Elite Support UI
   Unified with "Monolith" Design System
   ============================================================ */

:root {
    /* Aligned with modern-theme.css tokens */
    --chat-primary: var(--color-blue);
    --chat-primary-hover: var(--color-blue-hover);
    --chat-bg: oklch(100% 0 0 / 75%);
    --chat-glass-bg: oklch(100% 0 0 / 85%);
    --chat-border: var(--color-border);
    --chat-text: var(--color-text);
    --chat-text-muted: var(--color-text-muted);
    
    /* Shadows from modern-theme.css */
    --chat-shadow-xl: var(--shadow-xl);
    --chat-shadow-lg: var(--shadow-lg);
}

.chat-container {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    font-family: 'DM Sans', sans-serif;
}

/* Elite Floating Bubble */
.chat-bubble {
    width: 68px;
    height: 68px;
    background: var(--chat-primary);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 12px 30px oklch(60% 0.22 255 / 30%);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid oklch(100% 0 0 / 20%);
    position: relative;
    overflow: hidden;
}

.chat-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, oklch(100% 0 0 / 0.15), transparent);
    pointer-events: none;
}

.chat-bubble:hover {
    transform: translateY(-6px) scale(1.04);
    background: var(--chat-primary-hover);
    box-shadow: 0 20px 40px oklch(60% 0.22 255 / 40%);
}

/* Premium Glass Window */
.chat-window {
    position: absolute;
    bottom: 90px;
    right: 0;
    width: 400px;
    height: 620px;
    background: var(--chat-glass-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--chat-border);
    border-radius: 32px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--chat-shadow-xl);
    animation: elite-window-entry 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes elite-window-entry {
    from { transform: translateY(30px) scale(0.96); opacity: 0; filter: blur(10px); }
    to { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}

.chat-header {
    background: transparent;
    padding: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid oklch(0% 0 0 / 5%);
}

.chat-header .title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-header span[style*="font-weight: 700"] {
    font-family: 'Sora', sans-serif !important;
    letter-spacing: -0.02em;
    color: var(--chat-text) !important;
}

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

.chat-header .status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.chat-messages {
    flex: 1;
    padding: 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: none;
}

.chat-messages::-webkit-scrollbar { display: none; }

/* Message Artistry */
.message {
    max-width: 88%;
    padding: 14px 20px;
    border-radius: 20px;
    font-size: 15px;
    line-height: 1.6;
    animation: message-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes message-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message.ai {
    background: white;
    color: var(--chat-text);
    align-self: flex-start;
    border-bottom-left-radius: 6px;
    box-shadow: 0 4px 12px oklch(0% 0 0 / 3%);
    border: 1px solid oklch(0% 0 0 / 2%);
}

.message.ai strong {
    font-family: 'Sora', sans-serif;
    color: var(--chat-primary);
}

.message.user {
    background: var(--chat-primary);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 16px oklch(60% 0.22 255 / 15%);
}

/* Premium Footer */
.chat-input-area {
    padding: 24px 28px;
    background: oklch(100% 0 0 / 50%);
    border-top: 1px solid oklch(0% 0 0 / 5%);
    display: flex;
    gap: 12px;
    align-items: center;
}

.chat-input-area input {
    flex: 1;
    border: 1px solid oklch(0% 0 0 / 8%);
    background: white;
    padding: 14px 22px;
    border-radius: 100px;
    outline: none;
    font-size: 15px;
    color: var(--chat-text);
    transition: all 0.3s var(--ease-out);
    box-shadow: inset 0 1px 2px oklch(0% 0 0 / 2%);
}

.chat-input-area input:focus {
    border-color: var(--chat-primary);
    box-shadow: 0 0 0 4px oklch(60% 0.22 255 / 10%);
}

.chat-input-area button {
    width: 48px;
    height: 48px;
    background: var(--chat-primary);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s var(--ease-spring);
    box-shadow: 0 4px 12px oklch(60% 0.22 255 / 20%);
}

.chat-input-area button:hover {
    transform: rotate(12deg) scale(1.1);
    background: var(--chat-primary-hover);
}

/* Monolith Style Buttons */
.chat-window .ubm-chat-btn {
    width: calc(100% - 56px) !important;
    margin: 0 28px 20px !important;
    padding: 16px !important;
    background: var(--chat-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: 'Sora', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.3s var(--ease-out) !important;
    box-shadow: 0 8px 20px oklch(60% 0.22 255 / 25%) !important;
}

.chat-window .ubm-chat-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px oklch(60% 0.22 255 / 35%) !important;
    background: var(--chat-primary-hover) !important;
}

/* Typing Indicator Elite */
.chat-loading {
    padding: 0 28px 15px;
}

.chat-loading div {
    display: flex;
    gap: 6px;
}

.chat-loading span {
    width: 6px;
    height: 6px;
    background: var(--chat-primary);
    border-radius: 50%;
    opacity: 0.4;
    animation: ubm-dot-wave 1.2s infinite ease-in-out;
}

@keyframes ubm-dot-wave {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

.chat-loading span:nth-child(2) { animation-delay: 0.2s; }
.chat-loading span:nth-child(3) { animation-delay: 0.4s; }

/* Choice Buttons Elite */
.chat-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 28px 20px;
    animation: message-fade-in 0.5s var(--ease-out) both;
}

.choice-btn {
    padding: 10px 18px;
    background: white;
    border: 1px solid oklch(0% 0 0 / 8%);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--chat-primary);
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
    box-shadow: 0 4px 12px oklch(0% 0 0 / 2%);
}

.choice-btn:hover {
    background: var(--chat-primary);
    color: white;
    border-color: var(--chat-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px oklch(60% 0.22 255 / 20%);
}

.choice-btn.active {
    background: var(--chat-primary-hover);
    color: white;
    border-color: var(--chat-primary-hover);
}