/**
 * Botvee AI – Premium Chat Widget Styles
 * Version: 3.0.0 – New Design System
 * Fully dynamic via CSS custom properties injected from PHP
 */

/* ─── Google Font ─── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ─── CSS Custom Properties ─── */
:root {
    --bv-primary:        #0066ff;
    --bv-primary-dark:   #004ecc;
    --bv-primary-rgb:    0, 102, 255;
    --bv-cyan:           #00d4ff;
    --bv-radius:         22px;
    --bv-btn-radius:     12px;
    --bv-font:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bv-toggle-size:    62px;
    --bv-window-w:       375px;
    --bv-window-h:       560px;
    --bv-gradient:       linear-gradient(135deg, var(--bv-primary) 0%, #00b4d8 60%, var(--bv-cyan) 100%);
    --bv-gradient-hero:  linear-gradient(145deg, #003da8 0%, var(--bv-primary) 45%, #00b4d8 80%, var(--bv-cyan) 100%);
    --bv-surface:        #f7faff;
    --bv-border:         #e4eaf5;
    --bv-text:           #0a0f1e;
    --bv-muted:          #6b7a99;
}

/* ══ BASE WIDGET ═══════════════════════════════════════════════ */
.botvee-chatbot-widget {
    position: fixed;
    z-index: 9999;
    font-family: var(--bv-font);
}
.botvee-widget-bottom-right { bottom: 24px; right: 24px; }
.botvee-widget-bottom-left  { bottom: 24px; left:  24px; }

/* ══ TOGGLE BUTTON ══════════════════════════════════════════════ */
.botvee-chat-toggle {
    width:  var(--bv-toggle-size);
    height: var(--bv-toggle-size);
    border-radius: 50%;
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform .25s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.botvee-chat-toggle:hover { transform: scale(1.08); }

/* Breathing glow halo */
.botvee-chat-toggle::before {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    background: var(--bv-gradient);
    opacity: .22;
    animation: bv-breathe 2.5s ease-in-out infinite;
    z-index: 0;
}
/* Orbit ring */
.botvee-chat-toggle::after {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--bv-cyan);
    border-right-color: rgba(0,212,255,.4);
    animation: bv-orbit 3s linear infinite;
    z-index: 0;
}
.botvee-chat-toggle.open::after { animation: none; }
.botvee-chat-toggle.open::before { opacity: 0; }

@keyframes bv-breathe {
    0%,100% { transform: scale(1); opacity: .2; }
    50%      { transform: scale(1.15); opacity: .42; }
}
@keyframes bv-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Toggle logo */
.botvee-chat-icon,
.botvee-toggle-logo {
    width: 54px; height: 54px;
    object-fit: contain; border-radius: 50%;
    filter: drop-shadow(0 4px 14px rgba(0,102,255,0.5));
    transition: opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
    position: relative; z-index: 1;
}
.botvee-chat-icon { width: 54px; height: 54px; }
.botvee-chat-emoji { font-size: 26px; line-height: 1; }
.botvee-chat-custom-svg { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.botvee-chat-custom-svg svg { width: 28px; height: 28px; }

.botvee-close-icon {
    position: absolute; display: none;
    background: var(--bv-gradient);
    border-radius: 50%; width: 36px; height: 36px;
    align-items: center; justify-content: center;
    z-index: 2;
    transition: opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
}

/* Pulse ring on first load */
.botvee-chat-toggle.botvee-pulse::before {
    animation: bv-breathe 2.5s ease-in-out infinite, bv-pulse-ring 2.4s ease-out infinite;
}
@keyframes bv-pulse-ring {
    0%   { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0;    transform: scale(1.75); }
}

/* Unread badge */
.botvee-unread-indicator {
    position: absolute; top: -3px; right: -3px;
    background: #ef4444; color: white;
    border-radius: 12px; padding: 2px 6px;
    font-size: 11px; font-weight: 700; min-width: 18px;
    text-align: center; border: 2px solid white; line-height: 1.4;
    z-index: 3;
}

/* ══ CHAT WINDOW ════════════════════════════════════════════════ */
.botvee-chat-window {
    position: absolute;
    width:      var(--bv-window-w);
    height:     var(--bv-window-h);
    max-height: calc(100vh - 110px);
    background: #fff;
    border-radius: var(--bv-radius);
    box-shadow: 0 24px 80px rgba(0,40,120,.18), 0 4px 20px rgba(0,102,255,.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
}
@keyframes bv-open {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}
@keyframes bv-close {
    from { opacity: 1; transform: scale(1)   translateY(0);    }
    to   { opacity: 0; transform: scale(0.9) translateY(14px); }
}
.botvee-chat-window.bv-opening { animation: bv-open  .35s cubic-bezier(.22,1,.36,1) both; }
.botvee-chat-window.bv-closing { animation: bv-close .22s ease-in both; }

.botvee-widget-bottom-right .botvee-chat-window { bottom: calc(var(--bv-toggle-size) + 16px); right: 0; }
.botvee-widget-bottom-left  .botvee-chat-window { bottom: calc(var(--bv-toggle-size) + 16px); left:  0; }

/* ══ CHAT HEADER ════════════════════════════════════════════════ */
.botvee-chat-header {
    background: var(--bv-gradient-hero);
    color: #fff;
    padding: 13px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.botvee-chat-header::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(0,212,255,.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Animated logo container */
.botvee-chat-header-info { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }

.botvee-bot-avatar-container {
    width: 44px; height: 44px;
    position: relative; flex-shrink: 0;
}
/* Spinning orbit ring on header avatar */
.botvee-bot-avatar-container::before {
    content: '';
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--bv-cyan);
    border-right-color: rgba(0,212,255,.35);
    animation: bv-orbit 2s linear infinite;
}
/* Glow pulse */
.botvee-bot-avatar-container::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: rgba(0,180,216,.15);
    animation: bv-logo-glow 2s ease-in-out infinite;
}
@keyframes bv-logo-glow {
    0%,100% { opacity: .4; transform: scale(1); }
    50%      { opacity: .8; transform: scale(1.15); }
}

/* Online dot on avatar */
.botvee-bot-avatar-container .bv-live-dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 10px; height: 10px;
    background: #00ff88; border-radius: 50%;
    border: 2px solid rgba(0,50,120,.8);
    box-shadow: 0 0 6px #00ff88;
    animation: bv-dot-pulse 2s ease-in-out infinite;
    z-index: 3;
}
@keyframes bv-dot-pulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.4); }
}

.botvee-bot-avatar,
.botvee-header-brand-logo {
    width: 44px; height: 44px;
    object-fit: contain; border-radius: 50%;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
    position: relative; z-index: 2;
    display: block;
}

/* Fallback SVG avatar */
.botvee-bot-avatar-container svg {
    width: 30px; height: 30px;
    position: relative; z-index: 2;
    color: rgba(255,255,255,.9);
}

.botvee-chat-header-text h3 {
    margin: 0; font-size: 14px; font-weight: 800;
    letter-spacing: -.3px; line-height: 1.2; color: #fff;
}
.botvee-chat-header-text p {
    margin: 2px 0 0; font-size: 11px;
    color: rgba(255,255,255,.8); font-weight: 600;
    display: flex; align-items: center; gap: 5px;
}
.botvee-online-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 5px #00ff88;
    display: inline-block; flex-shrink: 0;
}

.botvee-header-actions { display: flex; align-items: center; gap: 2px; position: relative; z-index: 1; }
.botvee-header-btn,
.botvee-chat-close {
    background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.9); cursor: pointer;
    padding: 6px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.botvee-header-btn:hover, .botvee-chat-close:hover {
    background: rgba(255,255,255,.25); color: #fff;
}

/* Mode indicator */
.botvee-mode-indicator {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 600; margin-left: 6px;
}
.botvee-mode-indicator.mode-ai    { background: rgba(255,255,255,.18); color: white; }
.botvee-mode-indicator.mode-human { background: #10b981; color: white; }
.botvee-mode-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ══ WELCOME SCREEN ═════════════════════════════════════════════ */
#botvee-welcome-screen {
    display: flex;
    flex-direction: column;
    background: var(--bv-surface);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* Welcome hero strip */
.bv-welcome-hero {
    background: var(--bv-gradient-hero);
    padding: 20px 18px 22px;
    position: relative;
    overflow: hidden;
}
.bv-welcome-hero::before {
    content: '';
    position: absolute; top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(0,212,255,.3) 0%, transparent 70%);
    border-radius: 50%;
}
.bv-welcome-hero::after {
    content: '';
    position: absolute; bottom: -30px; left: -30px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(0,102,255,.35) 0%, transparent 70%);
    border-radius: 50%;
}
.bv-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 28px 28px;
}
.bv-hero-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.12); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18); border-radius: 20px;
    padding: 4px 10px 4px 7px; font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,.95); position: relative; z-index: 1;
    margin-bottom: 10px; width: fit-content;
}
.bv-hero-badge-dot {
    width: 7px; height: 7px; background: #00ff88;
    border-radius: 50%; box-shadow: 0 0 6px #00ff88;
    animation: bv-blink 2s ease-in-out infinite;
}
@keyframes bv-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.bv-welcome-title {
    font-size: 22px; font-weight: 800; color: #fff;
    letter-spacing: -.5px; line-height: 1.2;
    margin: 0 0 6px; position: relative; z-index: 1;
}
.bv-welcome-sub {
    font-size: 13px; color: rgba(255,255,255,.8); font-weight: 500;
    line-height: 1.5; margin: 0; position: relative; z-index: 1;
    max-width: 280px;
}
.bv-hero-agents {
    position: absolute; right: 16px; bottom: 16px; z-index: 2;
    display: flex;
}
.bv-av {
    width: 32px; height: 32px; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.6);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff;
    margin-left: -10px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
    background: var(--bv-gradient);
}
.bv-av:first-child { margin-left: 0; }
.bv-av img { width: 100%; height: 100%; object-fit: cover; }

/* Welcome body area */
.bv-welcome-body { padding: 14px; }

.bv-faq-card {
    background: #fff; border: 1.5px solid var(--bv-border);
    border-radius: 16px; overflow: hidden; margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0,40,120,.05);
}
.bv-faq-label {
    font-size: 10.5px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .07em;
    padding: 12px 14px 6px; display: block;
    border-bottom: 1px solid var(--bv-border);
}
.bv-faq-item, .botvee-faq-send {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; cursor: pointer;
    transition: background .2s; font-weight: 600;
    font-size: 13px; color: var(--bv-text);
    border: none; border-bottom: 1.5px solid var(--bv-border);
    background: #fff; text-align: left; width: 100%; gap: 10px;
    font-family: var(--bv-font);
}
.bv-faq-item:last-child, .botvee-faq-send:last-child { border-bottom: none; }
.bv-faq-item:hover, .botvee-faq-send:hover { background: #e0f7ff; }
.bv-faq-left { display: flex; align-items: center; gap: 10px; }
.bv-faq-emoji {
    width: 30px; height: 30px;
    background: linear-gradient(135deg, #e0f0ff, #d0f4ff);
    border-radius: 8px; display: flex; align-items: center;
    justify-content: center; font-size: 14px; flex-shrink: 0;
}
.bv-faq-arrow { color: var(--bv-primary); font-size: 18px; font-weight: 800; flex-shrink: 0; }
.bv-faq-item svg, .botvee-faq-send svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--bv-primary); }

/* CTA start button */
.bv-start-btn {
    width: 100%; padding: 13px 18px;
    background: var(--bv-gradient); color: white;
    border: none; border-radius: var(--bv-btn-radius);
    font-size: 14px; font-weight: 700; font-family: var(--bv-font);
    cursor: pointer; letter-spacing: -.01em;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 16px rgba(var(--bv-primary-rgb), .4);
}
.bv-start-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(var(--bv-primary-rgb),.52); }
.bv-start-btn:active { transform: translateY(0) scale(.97); }
.bv-start-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ══ MESSAGES ════════════════════════════════════════════════════ */
.botvee-chat-messages {
    flex: 1; overflow-y: auto;
    padding: 16px 14px 10px;
    background: var(--bv-surface);
    display: flex; flex-direction: column; gap: 12px;
    scroll-behavior: smooth;
}
.botvee-chat-messages::-webkit-scrollbar { width: 4px; }
.botvee-chat-messages::-webkit-scrollbar-track { background: transparent; }
.botvee-chat-messages::-webkit-scrollbar-thumb { background: #c5d0e8; border-radius: 10px; }

.botvee-message {
    display: flex; gap: 8px; align-items: flex-end;
    animation: bv-msg-in .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bv-msg-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.botvee-user-message { flex-direction: row-reverse; }

/* Bot message avatar — clean icon */
.botvee-message-avatar, .botvee-avatar-placeholder {
    width: 28px; height: 28px; border-radius: 50%;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.botvee-bot-message   .botvee-avatar-placeholder { background: transparent !important; }
.botvee-bot-message   .botvee-avatar-placeholder img,
.botvee-message-avatar img,
.botvee-avatar-placeholder img {
    width: 28px; height: 28px; object-fit: contain; border-radius: 50%;
    display: block;
}
/* Always transparent when wrapping an img */
.botvee-avatar-placeholder:has(img),
.botvee-avatar-placeholder:empty {
    background: transparent !important;
}
.botvee-user-message  .botvee-avatar-placeholder { background: #e5e7eb; color: #6b7280; }
.botvee-agent-message .botvee-avatar-placeholder { background: #10b981; color: white; }

.botvee-message-content { max-width: 78%; display: flex; flex-direction: column; }
.botvee-message-bubble {
    padding: 10px 14px; border-radius: 18px;
    font-size: 13.5px; line-height: 1.55; word-wrap: break-word;
}
.botvee-bot-message .botvee-message-bubble {
    background: white; color: var(--bv-text);
    border-bottom-left-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,40,120,.07);
    border: 1px solid var(--bv-border);
}
.botvee-user-message .botvee-message-bubble {
    background: var(--bv-gradient); color: white;
    border-bottom-right-radius: 5px;
    box-shadow: 0 3px 14px rgba(var(--bv-primary-rgb),.35);
}
.botvee-agent-message .botvee-message-bubble {
    background: #ecfdf5; color: #065f46;
    border: 1px solid #a7f3d0; border-bottom-left-radius: 5px;
}
.botvee-message-time {
    font-size: 10.5px; color: #b0b7c3;
    margin-top: 4px; padding: 0 4px;
}
.botvee-user-message .botvee-message-time { text-align: right; }

/* Typing indicator */
.botvee-typing-indicator { display: flex; align-items: flex-end; gap: 8px; }
.botvee-typing-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    overflow: hidden;
}
.botvee-typing-avatar img {
    width: 28px; height: 28px; object-fit: contain; border-radius: 50%;
    filter: drop-shadow(0 1px 4px rgba(0,102,255,.4));
}
.botvee-typing-dots {
    display: flex; gap: 5px; padding: 11px 14px;
    background: white; border-radius: 18px; border-bottom-left-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,40,120,.07);
    border: 1px solid var(--bv-border);
}
.botvee-typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #c0ccdd;
    animation: bv-bounce 1.1s ease-in-out infinite;
}
.botvee-typing-dots span:nth-child(2) { animation-delay: .16s; }
.botvee-typing-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes bv-bounce {
    0%,60%,100% { transform: translateY(0); background: #c0ccdd; }
    30%          { transform: translateY(-6px); background: var(--bv-cyan); }
}

/* System / notification messages */
.botvee-notification { display: flex; justify-content: center; padding: 4px 0; animation: bv-msg-in .3s ease both; }
.botvee-notification-text {
    display: inline-block;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    color: #0369a1; padding: 6px 14px; border-radius: 20px;
    font-size: 11.5px; font-weight: 500;
    border: 1px solid #bae6fd;
}
.botvee-system-message { display: flex; flex-direction: column; align-items: center; padding: 6px 0; animation: bv-msg-in .3s ease both; }
.botvee-system-content {
    display: flex; align-items: center; gap: 6px;
    background: #f3f4f6; color: #6b7280;
    padding: 7px 16px; border-radius: 16px; font-size: 12.5px;
}
.botvee-system-icon { font-size: 14px; }
.botvee-system-text { font-weight: 500; }

/* ══ INPUT AREA ══════════════════════════════════════════════════ */
.botvee-chat-input-container {
    padding: 10px 12px 8px;
    background: white; border-top: 1.5px solid var(--bv-border);
    flex-shrink: 0;
}
.botvee-action-buttons { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.botvee-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    background: var(--bv-surface); border: 1.5px solid var(--bv-border);
    border-radius: 20px; color: #4b5563;
    font-size: 12px; font-weight: 500; font-family: var(--bv-font);
    cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.botvee-action-btn:hover { border-color: var(--bv-primary); color: var(--bv-primary); background: #e0f7ff; }

.botvee-input-row { display: flex; align-items: center; gap: 6px; }
.botvee-chat-form { flex: 1; }
.botvee-input-group { width: 100%; }
.botvee-chat-input {
    width: 100%; padding: 10px 16px;
    border: 1.5px solid var(--bv-border); border-radius: 24px;
    font-size: 13px; font-family: var(--bv-font);
    color: var(--bv-text); background: var(--bv-surface);
    transition: border-color .2s, box-shadow .2s, background .2s;
    box-sizing: border-box; outline: none;
}
.botvee-chat-input:focus {
    border-color: var(--bv-primary); background: white;
    box-shadow: 0 0 0 3px rgba(var(--bv-primary-rgb),.1);
}
.botvee-chat-input::placeholder { color: #b0bcd4; }
.botvee-chat-input:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }

.botvee-end-btn {
    padding: 9px 10px;
    background: var(--bv-surface); border: 1.5px solid var(--bv-border);
    border-radius: var(--bv-btn-radius);
    color: var(--bv-muted); font-size: 12px; font-family: var(--bv-font);
    font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: background .2s, color .2s; flex-shrink: 0;
}
.botvee-end-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

button.botvee-send-button,
.botvee-send-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    background: var(--bv-gradient) !important;
    border: none !important;
    border-radius: 50% !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: transform .15s, box-shadow .2s;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(var(--bv-primary-rgb),.4);
    line-height: 1 !important;
    overflow: visible !important;
}
button.botvee-send-button:hover,
.botvee-send-button:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(var(--bv-primary-rgb),.5); }
button.botvee-send-button:active,
.botvee-send-button:active { transform: scale(.95); }
.botvee-send-button svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    pointer-events: none;
}

/* Footer */
.botvee-footer {
    text-align: center; padding: 6px 0 4px;
    display: flex; justify-content: center; align-items: center;
    border-top: 1px solid #f0f4fc; margin-top: 6px;
}
.botvee-footer a {
    display: inline-flex; align-items: center; gap: 5px;
    text-decoration: none; color: #b0bcd4;
    font-size: 10.5px; font-weight: 600; transition: color .2s;
}
.botvee-footer a:hover { color: var(--bv-primary); }
.botvee-footer img { height: 14px; width: auto; filter: drop-shadow(0 1px 3px rgba(0,102,255,.3)); }
.botvee-brand-text { font-weight: 700; }

/* ══ REPORT OVERLAY ══════════════════════════════════════════════ */
.botvee-report-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; animation: bv-msg-in .2s ease both;
}
.botvee-report-form {
    background: white; border-radius: 16px; padding: 22px;
    width: calc(100% - 40px); max-width: 320px;
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
    animation: bv-open .3s cubic-bezier(.22,1,.36,1) both;
}
.botvee-report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.botvee-report-header h4 { margin: 0; font-size: 15px; font-weight: 700; color: #111; }
.botvee-report-close { background: transparent; border: none; color: #9ca3af; cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; }
.botvee-report-close:hover { background: #f3f4f6; color: #374151; }
.botvee-report-field { margin-bottom: 12px; }
.botvee-report-field label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 5px; }
.botvee-report-field .required { color: #dc2626; }
.botvee-report-field input, .botvee-report-field textarea {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid var(--bv-border); border-radius: 8px;
    font-size: 13.5px; font-family: var(--bv-font); color: #111;
    box-sizing: border-box; outline: none;
}
.botvee-report-field input:focus, .botvee-report-field textarea:focus { border-color: var(--bv-primary); box-shadow: 0 0 0 3px rgba(var(--bv-primary-rgb),.1); }
.botvee-report-field input.error, .botvee-report-field textarea.error { border-color: #dc2626; }
.botvee-report-field .error-message { font-size: 11px; color: #dc2626; margin-top: 3px; }
.botvee-report-field textarea { min-height: 76px; resize: vertical; }
.botvee-report-actions { display: flex; gap: 8px; margin-top: 14px; }
.botvee-report-cancel {
    flex: 1; padding: 9px 16px;
    background: #f3f4f6; border: 1.5px solid var(--bv-border);
    border-radius: 8px; color: #374151;
    font-size: 13px; font-weight: 600; font-family: var(--bv-font); cursor: pointer;
}
.botvee-report-cancel:hover { background: #e5e7eb; }
.botvee-report-submit {
    flex: 1; padding: 9px 16px;
    background: var(--bv-gradient); border: none;
    border-radius: 8px; color: white;
    font-size: 13px; font-weight: 700; font-family: var(--bv-font); cursor: pointer;
}
.botvee-report-submit:hover { opacity: .9; }
.botvee-report-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ══ DARK THEME ══════════════════════════════════════════════════ */
.botvee-theme-dark .botvee-chat-window  { background: #1f2937; }
.botvee-theme-dark .botvee-chat-messages { background: #111827; }
.botvee-theme-dark #botvee-welcome-screen { background: #111827; }
.botvee-theme-dark .bv-welcome-body { background: #111827; }
.botvee-theme-dark .bv-faq-card { background: #1f2937; border-color: #374151; }
.botvee-theme-dark .bv-faq-item, .botvee-theme-dark .botvee-faq-send { background: #1f2937; border-color: #374151; color: #d1d5db; }
.botvee-theme-dark .bv-faq-item:hover, .botvee-theme-dark .botvee-faq-send:hover { background: rgba(var(--bv-primary-rgb),.1); }
.botvee-theme-dark .botvee-bot-message .botvee-message-bubble { background: #374151; color: #f3f4f6; border-color: #4b5563; }
.botvee-theme-dark .botvee-typing-dots { background: #374151; border-color: #4b5563; }
.botvee-theme-dark .botvee-chat-input-container { background: #1f2937; border-top-color: #374151; }
.botvee-theme-dark .botvee-chat-input { background: #374151; color: #f3f4f6; border-color: #4b5563; }
.botvee-theme-dark .botvee-chat-input:focus { background: #4b5563; }
.botvee-theme-dark .botvee-action-btn { background: #374151; border-color: #4b5563; color: #d1d5db; }
.botvee-theme-dark .botvee-end-btn    { background: #374151; border-color: #4b5563; color: #9ca3af; }
.botvee-theme-dark .botvee-report-form { background: #1f2937; }
.botvee-theme-dark .botvee-report-header h4 { color: #f3f4f6; }
.botvee-theme-dark .botvee-report-field label { color: #d1d5db; }
.botvee-theme-dark .botvee-report-field input,
.botvee-theme-dark .botvee-report-field textarea { background: #374151; border-color: #4b5563; color: #f3f4f6; }
.botvee-theme-dark .botvee-report-cancel { background: #374151; border-color: #4b5563; color: #d1d5db; }

/* ══ MOBILE ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .botvee-chat-window {
        width: 100vw !important; height: 100vh !important;
        bottom: 0 !important; right: 0 !important; left: 0 !important; top: 0 !important;
        border-radius: 0 !important; max-height: 100vh !important;
    }
    .botvee-widget-bottom-left,
    .botvee-widget-bottom-right { bottom: 20px !important; }
    .botvee-widget-bottom-right { right: 20px !important; }
    .botvee-widget-bottom-left  { left:  20px !important; }
}

/* Accessibility */
.botvee-chat-toggle:focus-visible,
.botvee-send-button:focus-visible,
.bv-start-btn:focus-visible {
    outline: 3px solid var(--bv-primary);
    outline-offset: 3px;
}

/* Hide welcome screen when messages already exist (CSS :has() fallback) */
.botvee-chat-window:has(#botvee-chat-messages .botvee-message) #botvee-welcome-screen {
    display: none !important;
}