/* ==========================================================================
   VIETXINCHAO THEME - CUSTOM CHATBOT & TALKING ROBOT STYLES
   Brand Identity: VietXinChao & VLearn Blue Palette
   Primary Language: English
   ========================================================================== */

:root {
    /* --- VIETXINCHAO & VLEARN BLUE BRAND PALETTE --- */
    --vxc-primary: #0284c7;               /* Sky / Ocean Blue (Main Brand) */
    --vxc-primary-hover: #0369a1;         /* Deep Blue Hover */
    --vxc-accent-cyan: #06b6d4;           /* Vibrant Cyan Accent */
    --vxc-glow-cyan: #38bdf8;             /* Neon Glow while speaking */
    --vxc-soft-blue: #f0f9ff;             /* Subtle Blue Background */

    /* --- CHATBOX DIMENSIONS & SHADOWS --- */
    --vxc-chat-width: 410px;              /* Desktop Chatbox Width */
    --vxc-chat-height: 630px;             /* Chatbox Height */
    --vxc-chat-radius: 24px;              /* Rounded Corners */
    --vxc-chat-shadow: 0 20px 45px -10px rgba(2, 132, 199, 0.22), 0 10px 20px -5px rgba(0, 0, 0, 0.08);

    /* --- TALKING ROBOT STAGE --- */
    --vxc-robot-bg: linear-gradient(180deg, #091326 0%, #0f274a 100%); /* Deep Ocean Night */
    --vxc-avatar-size: 165px;             /* Avatar Circle Diameter */
}

/* ==========================================================================
   1. FLOATING LAUNCHER BUTTON
   ========================================================================== */
.vxc-ai-toggle-btn {
    width: 66px !important;
    height: 66px !important;
    background: linear-gradient(135deg, var(--vxc-primary), var(--vxc-accent-cyan)) !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.vxc-ai-toggle-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 10px 28px rgba(2, 132, 199, 0.6) !important;
}

/* ==========================================================================
   2. CHATBOX WINDOW
   ========================================================================== */
.vxc-ai-chatbox {
    width: var(--vxc-chat-width) !important;
    height: var(--vxc-chat-height) !important;
    border-radius: var(--vxc-chat-radius) !important;
    box-shadow: var(--vxc-chat-shadow) !important;
    border: 1px solid #bae6fd !important;
}

/* Header */
.vxc-chat-header {
    background: linear-gradient(135deg, var(--vxc-primary), #075985) !important;
    padding: 14px 18px !important;
}

.vxc-tutor-name {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
    color: #ffffff !important;
}

.vxc-tutor-status {
    color: #e0f2fe !important;
}

/* Switch to Voice Call Mode Button */
.vxc-mode-pill-btn {
    background: linear-gradient(135deg, #0284c7, #06b6d4) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 7px 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 3px 10px rgba(6, 182, 212, 0.3) !important;
}

/* ==========================================================================
   3. MESSAGE BUBBLES
   ========================================================================== */
/* Tutor Vietxinchao Bubble */
.vxc-msg-bot .vxc-msg-bubble {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    border-radius: 16px 16px 16px 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

/* English Translation underneath */
.vxc-msg-translation {
    color: #64748b !important;
    font-size: 12.5px !important;
    margin-top: 6px !important;
    border-top: 1px dashed #cbd5e1 !important;
    padding-top: 5px !important;
}

/* Learner Message Bubble */
.vxc-msg-user .vxc-msg-bubble {
    background: linear-gradient(135deg, var(--vxc-primary), var(--vxc-primary-hover)) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    border-radius: 16px 16px 4px 16px !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
}

/* Input Send Button */
.vxc-send-btn {
    background: var(--vxc-primary) !important;
}
.vxc-send-btn:hover {
    background: var(--vxc-primary-hover) !important;
}

/* ==========================================================================
   4. TALKING ROBOT STAGE (VOICE CALL INTERFACE)
   ========================================================================== */
.vxc-robot-mode-container {
    background: var(--vxc-robot-bg) !important;
}

.vxc-avatar-photo-wrapper {
    width: var(--vxc-avatar-size) !important;
    height: var(--vxc-avatar-size) !important;
}

.vxc-avatar-photo {
    border: 4px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Neon Glow while speaking */
.vxc-robot-avatar.speaking .vxc-avatar-glow-ring {
    border-color: var(--vxc-glow-cyan) !important;
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.9) !important;
}

/* Live Subtitle Box */
.vxc-live-subtitle-box {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 14px 18px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.vxc-sub-vn {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    letter-spacing: -0.2px;
}

.vxc-sub-en {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-top: 5px !important;
}

/* Voice Call Action Button */
.vxc-btn-start-call {
    background: linear-gradient(135deg, #0284c7, #0284c7) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4) !important;
}