/* =========================
   MODERN V5 — NEON AI SYSTEM + MOTION
========================= */

[data-theme="modern"] {

    --bg-main: #05070f;
    --bg-widget: rgba(15,20,40,0.75);
    --bg-soft: rgba(30,40,70,0.6);

    --text-primary: #c7d4f5;
    --text-secondary: #9aa8c7;
    --text-muted: #5f6b8a;

    --accent: #5b8cff;
    --accent-2: #7c3aed;

    --border: rgba(255,255,255,0.08);

    --radius: 16px;

    --glow-blue: rgba(91,140,255,0.6);
    --glow-purple: rgba(124,58,237,0.6);
}

/* =========================
   BACKGROUND
========================= */

[data-theme="modern"] body {

    background:
        radial-gradient(circle at 20% 0%, rgba(91,140,255,0.25), transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(124,58,237,0.18), transparent 50%),
        #02030a;
}

/* =========================
   WIDGET
========================= */

[data-theme="modern"] #chat-widget {

    background:
        radial-gradient(circle at 20% 0%, rgba(91,140,255,0.12), transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(124,58,237,0.10), transparent 50%),
        rgba(17, 10, 30, 0.85);

    backdrop-filter: blur(18px);

    backdrop-filter: blur(16px);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow:
        0 30px 90px rgba(0,0,0,0.9),
        0 0 60px rgba(91,140,255,0.12);
}

/* =========================
   HEADER
========================= */

[data-theme="modern"] .chat-header {

    /*background: rgba(15,20,40,0.75);*/

    background:
        linear-gradient(180deg, rgba(20,30,60,0.9), rgba(10,15,30,0.9));

    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,0.04),
        0 10px 30px rgba(0,0,0,0.6);

    backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(255,255,255,0.04);

    padding: 16px 18px;

    position: relative;
}

[data-theme="modern"] .chat-header::after {

    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    height: 1px;
    width: 100%;

    background: linear-gradient(90deg,
        transparent,
        rgba(91,140,255,0.8),
        rgba(124,58,237,0.8),
        transparent
    );
}

[data-theme="modern"] #chat-widget h3 {
    background: transparent !important;
    padding: 0;
    color: var(--text-primary);
}

[data-theme="modern"] .chat-header h3 {

    color: var(--text-primary);

    font-weight: 600;

    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="modern"] .chat-header h3::before {

    content: "";
    width: 6px;
    height: 6px;

    background: var(--accent);

    border-radius: 50%;

    box-shadow: 0 0 10px var(--glow-blue);
}

/* =========================
   CHAT BUTTON
========================= */

[data-theme="modern"] #chat-button {

    background: linear-gradient(135deg, #5b8cff, #7c3aed) !important;

    color: white;

    border-radius: 999px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.6),
        0 0 25px var(--glow-blue);

    transition: all .25s cubic-bezier(0.22,1,0.36,1);
}

[data-theme="modern"] #chat-button:hover {
    transform: translateY(-2px);
}

/* =========================
   MESSAGES
========================= */

[data-theme="modern"] #messages {
    padding: 28px;
    gap: 18px;
}

/* MESSAGE ENTRY */

[data-theme="modern"] .message {

    opacity: 0;
    transform: translateY(10px) scale(.98);

    animation: messageIn .4s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes messageIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* BOT */

[data-theme="modern"] .bot-message {

    background: linear-gradient(145deg, rgba(20,30,60,0.9), rgba(10,15,30,0.9));

    border: 1px solid rgba(91,140,255,0.15);

    border-radius: var(--radius);

    padding: 13px 15px;

    color: var(--text-primary);

    position: relative;

    transition: all .25s cubic-bezier(0.22,1,0.36,1);
}

/* edge glow */

[data-theme="modern"] .bot-message::after {

    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;

    background: linear-gradient(120deg, transparent, rgba(91,140,255,0.25), transparent);

    pointer-events: none; /* 🔥 CLAVE */

    opacity: 0;
    transition: .3s;
}

[data-theme="modern"] .bot-message:hover::after {
    opacity: 1;
}

/* hover lift */

[data-theme="modern"] .bot-message:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.6),
        0 0 20px rgba(91,140,255,0.15);
}

/* USER */

[data-theme="modern"] .user {

    background: linear-gradient(135deg, #5b8cff, #7c3aed) !important;

    color: white;

    border-radius: var(--radius);

    padding: 13px 15px;

    box-shadow:
        0 6px 25px rgba(91,140,255,0.4);
}

/* =========================
   AVATAR
========================= */

[data-theme="modern"] .bot-avatar {

    background: radial-gradient(circle, #5b8cff, #7c3aed);

    color: white;

    box-shadow: 0 0 10px rgba(91,140,255,0.4);

    transition: box-shadow .3s ease;
}

[data-theme="modern"] .bot-message:hover .bot-avatar {

    box-shadow: 0 0 18px rgba(91,140,255,0.7);
}

/* =========================
   BUTTONS
========================= */

[data-theme="modern"] #quick-actions button,
[data-theme="modern"] #proactive-actions button,
[data-theme="modern"] #messages button {

    background: rgba(10,15,30,0.9);

    border: 1px solid rgba(255,255,255,0.06);

    color: var(--text-secondary);

    border-radius: 999px;

    padding: 10px 16px;

    backdrop-filter: blur(6px);

    transition: all .25s cubic-bezier(0.22,1,0.36,1);
}

[data-theme="modern"] #quick-actions button:hover,
[data-theme="modern"] #proactive-actions button:hover,
[data-theme="modern"] #messages button:hover {

    background: rgba(91,140,255,0.1);

    border-color: rgba(91,140,255,0.4);

    color: white;

    transform: translateY(-2px);
}

/* =========================
   INPUT
========================= */

[data-theme="modern"] .input-area {

    /*
    background: rgba(5,10,25,0.9);

    border-top: 1px solid var(--border);
    */
    background:
        radial-gradient(circle at center, rgba(91,140,255,0.08), transparent 60%),
        rgba(5,10,25,0.95);

    border-top: 1px solid rgba(255,255,255,0.04);
}

[data-theme="modern"] input {

    background: rgba(10,15,30,0.9);

    border: 1px solid rgba(255,255,255,0.05);

    border-radius: 999px;

    padding: 12px 16px;

    color: var(--text-primary);

    transition: all .25s ease;
}

[data-theme="modern"] input::placeholder {
    color: var(--text-muted);
}

[data-theme="modern"] input:focus {

    transform: scale(1.01);

    border-color: rgba(91,140,255,0.6);

    box-shadow:
        0 0 0 2px rgba(91,140,255,0.15),
        0 0 20px rgba(91,140,255,0.2);
}

/* =========================
   SEND BUTTON
========================= */

[data-theme="modern"] button.send {

    width: 46px;
    height: 42px;

    border-radius: var(--radius);

    background: linear-gradient(135deg, #5b8cff, #7c3aed) !important;

    color: white;

    box-shadow:
        0 0 25px rgba(91,140,255,0.6),
        0 10px 40px rgba(124,58,237,0.5);

    transition: all .25s cubic-bezier(0.22,1,0.36,1);
}

[data-theme="modern"] button.send:hover {

    transform: scale(1.08);

    box-shadow:
        0 0 40px rgba(91,140,255,0.9),
        0 15px 50px rgba(124,58,237,0.7);
}

[data-theme="modern"] button.send:active {

    transform: scale(0.92);
}

/* =========================
   MAP BUTTON
========================= */

[data-theme="modern"] .maps-btn {

    background: linear-gradient(135deg, rgba(91,140,255,0.2), rgba(124,58,237,0.2));

    border: 1px solid rgba(91,140,255,0.3);

    color: #cfe1ff;

    border-radius: 999px;

    backdrop-filter: blur(6px);

    transition: all .25s ease;
}

[data-theme="modern"] .maps-btn:hover {

    background: linear-gradient(135deg, #5b8cff, #7c3aed);

    color: white;

    box-shadow:
        0 0 25px rgba(91,140,255,0.5);
}

/* =========================
   SCROLL
========================= */

[data-theme="modern"] #messages::-webkit-scrollbar {
    width: 6px;
}

[data-theme="modern"] #messages::-webkit-scrollbar-thumb {

    background: rgba(91,140,255,0.25);

    border-radius: 10px;
}

[data-theme="modern"] #messages::-webkit-scrollbar-thumb:hover {

    background: rgba(124,58,237,0.6);
}

[data-theme="modern"] #messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(91,140,255,0.4) transparent;
}

/* =========================
   OPTIONAL — AI SHIMMER
========================= */

[data-theme="modern"] .thinking {

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.02),
        rgba(91,140,255,0.15),
        rgba(255,255,255,0.02)
    );

    background-size: 200% 100%;

    animation: shimmer 1.6s infinite linear;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}