/* ===========================
   BELLA CHATBOT
=========================== */

.bella-chatbot {
    position: fixed;
    right: 24px;
    bottom: 96px;
    z-index: 99990;
    font-family: var(--font-body, "Inter", sans-serif);
}

.bella-chatbot-window {
    width: min(380px, calc(100vw - 32px));
    height: 560px;
    max-height: calc(100vh - 150px);
    background: #fffaf3;
    border: 1px solid rgba(200, 169, 106, 0.38);
    border-radius: 30px;
    box-shadow: 0 28px 85px rgba(15, 12, 9, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(24px) scale(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.35s ease;
}

.bella-chatbot.open .bella-chatbot-window {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bella-chatbot-header {
    background:
        radial-gradient(circle at 18% 20%, rgba(200, 169, 106, 0.32), transparent 36%),
        linear-gradient(135deg, #0f0c09, #2b2118);
    color: #ffffff;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.bella-chatbot-avatar {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f0dca6, #c8a96a, #a8894e);
    color: #0f0c09;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
    box-shadow: 0 12px 30px rgba(200, 169, 106, 0.34);
}

.bella-chatbot-header-info {
    flex: 1;
}

.bella-chatbot-header-info strong {
    display: block;
    font-family: var(--font-title, Georgia, serif);
    font-size: 1.16rem;
    font-weight: 900;
    line-height: 1.1;
}

.bella-chatbot-header-info span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.82rem;
    font-weight: 700;
    margin-top: 5px;
}

.bella-chatbot-status-dot {
    width: 8px;
    height: 8px;
    background-color: #75b798;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(117, 183, 152, 0.18);
}

.bella-chatbot-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.bella-chatbot-close:hover {
    background-color: rgba(255, 255, 255, 0.18);
    transform: rotate(90deg);
}

.bella-chatbot-body {
    flex: 1;
    padding: 18px;
    overflow-y: auto;
    background:
        radial-gradient(circle at top right, rgba(200, 169, 106, 0.12), transparent 32%),
        #fffaf3;
}

.bella-chatbot-body::-webkit-scrollbar {
    width: 6px;
}

.bella-chatbot-body::-webkit-scrollbar-thumb {
    background-color: rgba(200, 169, 106, 0.55);
    border-radius: 999px;
}

.chat-message {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    animation: chatMessageIn 0.28s ease both;
}

.chat-message.user {
    justify-content: flex-end;
}

.chat-message.bot {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 82%;
    padding: 13px 15px;
    border-radius: 20px;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 650;
}

.chat-message.bot .chat-bubble {
    background-color: #ffffff;
    color: #302820;
    border: 1px solid rgba(200, 169, 106, 0.24);
    border-bottom-left-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 12, 9, 0.06);
}

.chat-message.user .chat-bubble {
    background: linear-gradient(135deg, #f0dca6, #c8a96a);
    color: #0f0c09;
    border-bottom-right-radius: 8px;
    box-shadow: 0 10px 28px rgba(200, 169, 106, 0.22);
}

.chat-bubble a {
    color: #a8894e;
    font-weight: 900;
    text-decoration: none;
}

.chat-bubble a:hover {
    color: #0f0c09;
}

.chat-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
}

.chat-quick-btn {
    border: 1px solid rgba(200, 169, 106, 0.32);
    background-color: #ffffff;
    color: #302820;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 900;
    transition: all 0.25s ease;
}

.chat-quick-btn:hover {
    background-color: #0f0c09;
    color: #c8a96a;
    transform: translateY(-2px);
}

.bella-chatbot-footer {
    padding: 14px;
    background-color: #ffffff;
    border-top: 1px solid rgba(200, 169, 106, 0.24);
}

.bella-chatbot-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bella-chatbot-input {
    flex: 1;
    border: 1px solid rgba(200, 169, 106, 0.34);
    border-radius: 999px;
    padding: 12px 15px;
    outline: none;
    font-size: 0.92rem;
    font-weight: 650;
    color: #302820;
    background-color: #fffaf3;
}

.bella-chatbot-input:focus {
    border-color: #c8a96a;
    box-shadow: 0 0 0 0.2rem rgba(200, 169, 106, 0.16);
}

.bella-chatbot-send {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0dca6, #c8a96a, #a8894e);
    color: #0f0c09;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.25s ease;
    box-shadow: 0 12px 28px rgba(200, 169, 106, 0.24);
}

.bella-chatbot-send:hover {
    transform: translateY(-2px) rotate(-8deg);
}

.bella-chatbot-toggle {
    margin-left: auto;
    margin-top: 16px;
    width: 66px;
    height: 66px;
    border: none;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.42), transparent 28%),
        linear-gradient(135deg, #f0dca6, #c8a96a, #a8894e);
    color: #0f0c09;
    box-shadow: 0 20px 54px rgba(15, 12, 9, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    position: relative;
    transition: all 0.3s ease;
}

.bella-chatbot-toggle:hover {
    transform: translateY(-4px) scale(1.04);
}

.bella-chatbot.open .bella-chatbot-toggle {
    transform: scale(0.92);
}

.bella-chatbot-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(200, 169, 106, 0.52);
    animation: bellaChatPulse 1.9s infinite;
}

.bella-chatbot-notification {
    position: absolute;
    top: -5px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #dc3545;
    color: #ffffff;
    border: 3px solid #fffaf3;
    font-size: 0.65rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bella-chatbot.open .bella-chatbot-notification,
.bella-chatbot.open .bella-chatbot-pulse {
    display: none;
}

.chat-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #a8894e;
    animation: chatTyping 1s infinite ease-in-out;
}

.chat-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.chat-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes chatTyping {
    0%, 80%, 100% {
        transform: scale(0.7);
        opacity: 0.45;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bellaChatPulse {
    0% {
        transform: scale(0.88);
        opacity: 0.8;
    }
    70% {
        transform: scale(1.25);
        opacity: 0;
    }
    100% {
        transform: scale(0.88);
        opacity: 0;
    }
}

@keyframes chatMessageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 576px) {
    .bella-chatbot {
        right: 16px;
        left: 16px;
        bottom: 86px;
    }

    .bella-chatbot-window {
        width: 100%;
        height: min(560px, calc(100vh - 145px));
        border-radius: 26px;
    }

    .bella-chatbot-toggle {
        width: 60px;
        height: 60px;
        margin-left: auto;
    }

    .chat-bubble {
        max-width: 88%;
    }
}

/* ===========================
   TEMA AZUL MARINO GRADIENT - CHATBOT
=========================== */

.bella-chatbot-window {
    background: #F5FAFF;
    border-color: rgba(18, 76, 124, 0.28);
    box-shadow: 0 28px 85px rgba(2, 11, 30, 0.28);
}

.bella-chatbot-header {
    background:
        radial-gradient(circle at 18% 20%, rgba(234, 246, 255, 0.16), transparent 36%),
        linear-gradient(135deg, #020B1E 0%, #071B3A 32%, #0B2D57 66%, #124C7C 100%);
}

.bella-chatbot-avatar,
.bella-chatbot-toggle,
.bella-chatbot-send {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 28%),
        linear-gradient(135deg, #1E73A8 0%, #124C7C 46%, #071B3A 100%);
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(2, 11, 30, 0.30);
}

.bella-chatbot-body {
    background:
        radial-gradient(circle at top right, rgba(234, 246, 255, 0.75), transparent 35%),
        #F5FAFF;
}

.chat-message.bot .chat-bubble {
    background-color: #FFFDF8;
    color: #102A43;
    border-color: rgba(18, 76, 124, 0.18);
}

.chat-message.user .chat-bubble {
    background: linear-gradient(135deg, #1E73A8, #124C7C, #0B2D57);
    color: #ffffff;
}

.chat-bubble a {
    color: #124C7C;
}

.chat-bubble a:hover {
    color: #020B1E;
}

.chat-quick-btn {
    background-color: #FFFDF8;
    color: #102A43;
    border-color: rgba(18, 76, 124, 0.24);
}

.chat-quick-btn:hover {
    background-color: #020B1E;
    color: #EAF6FF;
}

.bella-chatbot-footer {
    background-color: #FFFDF8;
    border-top-color: rgba(18, 76, 124, 0.18);
}

.bella-chatbot-input {
    background-color: #F5FAFF;
    border-color: rgba(18, 76, 124, 0.26);
    color: #102A43;
}

.bella-chatbot-input:focus {
    border-color: #124C7C;
    box-shadow: 0 0 0 0.2rem rgba(30, 115, 168, 0.15);
}

.bella-chatbot-pulse {
    border-color: rgba(30, 115, 168, 0.45);
}

.chat-typing span {
    background-color: #124C7C;
}

.bella-chatbot-notification {
    background-color: #1E73A8;
    border-color: #FFFDF8;
}

/* ===========================
   LIMPIEZA FINAL AZUL MARINO - CHATBOT
=========================== */

.bella-chatbot-window,
.bella-chatbot-body,
.bella-chatbot-input {
    background-color: #F4FAFF !important;
}

.bella-chatbot-footer,
.chat-message.bot .chat-bubble,
.chat-quick-btn {
    background-color: #FFFFFF !important;
}

.bella-chatbot-window,
.chat-message.bot .chat-bubble,
.chat-quick-btn,
.bella-chatbot-footer,
.bella-chatbot-input {
    border-color: rgba(18, 76, 124, 0.20) !important;
}

.bella-chatbot-header,
.bella-chatbot-avatar,
.bella-chatbot-toggle,
.bella-chatbot-send {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), transparent 28%),
        linear-gradient(135deg, #020B1E, #071B3A, #0B2D57, #124C7C) !important;
    color: #FFFFFF !important;
}

.chat-message.user .chat-bubble {
    background: linear-gradient(135deg, #1E73A8, #124C7C, #071B3A) !important;
    color: #FFFFFF !important;
}

.chat-bubble a {
    color: #124C7C !important;
}

/* ===========================
   PARCHE FINAL CHATBOT
   Solo quitar scroll dorado
=========================== */

/* Scroll interno del chatbot */
.bella-chatbot-body::-webkit-scrollbar {
    width: 7px;
}

.bella-chatbot-body::-webkit-scrollbar-track {
    background-color: #EAF6FF !important;
}

.bella-chatbot-body::-webkit-scrollbar-thumb {
    background-color: rgba(18, 76, 124, 0.55) !important;
    border-radius: 999px;
}

.bella-chatbot-body::-webkit-scrollbar-thumb:hover {
    background-color: #124C7C !important;
}

/* Firefox */
.bella-chatbot-body {
    scrollbar-width: thin;
    scrollbar-color: #124C7C #EAF6FF;
}

/* ===========================
   POSICIÓN FINAL CHATBOT
   Separado de WhatsApp y flecha subir
=========================== */

.bella-chatbot {
    right: 22px !important;
    bottom: 156px !important;
    z-index: 1051 !important;
}

@media (max-width: 576px) {
    .bella-chatbot {
        right: 18px !important;
        bottom: 142px !important;
    }
}

/* ===========================
   OPCIONES DEL CHATBOT
=========================== */

.chat-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-left: 4px;
}

.chat-option-btn {
    border: 1px solid rgba(18, 76, 124, 0.22);
    background: #FFFFFF;
    color: #124C7C;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 18px rgba(2, 11, 30, 0.08);
}

.chat-option-btn:hover {
    background: linear-gradient(135deg, #1E73A8, #124C7C, #071B3A);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.chat-option-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* ===========================
   OPCIONES DEL CHATBOT - PREMIUM
=========================== */

.chat-bubble-text {
    width: 100%;
}

.chat-message.bot .chat-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: 14px !important;
    padding: 0 !important;
    width: 100% !important;
}

.chat-message.bot .chat-option-btn {
    width: 100% !important;
    border: 1px solid rgba(18, 76, 124, 0.18) !important;
    background: #FFFFFF !important;
    color: #102A43 !important;
    border-radius: 14px !important;
    padding: 11px 13px !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 8px 18px rgba(2, 11, 30, 0.06) !important;
}

.chat-message.bot .chat-option-btn::before {
    content: "›";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 8px;
    background: #EAF6FF;
    color: #124C7C;
    font-weight: 900;
}

.chat-message.bot .chat-option-btn:hover {
    background: linear-gradient(135deg, #EAF6FF, #FFFFFF) !important;
    border-color: rgba(18, 76, 124, 0.34) !important;
    color: #124C7C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(2, 11, 30, 0.10) !important;
}

.chat-message.bot .chat-option-btn.selected,
.chat-message.bot .chat-option-btn:disabled.selected {
    background: linear-gradient(135deg, #1E73A8, #124C7C, #071B3A) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

.chat-message.bot .chat-option-btn.selected::before {
    content: "✓";
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}

.chat-message.bot .chat-option-btn:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Botón cancelar dentro del chatbot */

.chat-message.bot .chat-option-btn[data-value="cancelar"] {
    border-color: rgba(220, 53, 69, 0.28) !important;
    color: #B02A37 !important;
}

.chat-message.bot .chat-option-btn[data-value="cancelar"]::before {
    content: "×";
    background: rgba(220, 53, 69, 0.10);
    color: #B02A37;
}

.chat-message.bot .chat-option-btn[data-value="cancelar"]:hover {
    background: rgba(220, 53, 69, 0.10) !important;
    color: #B02A37 !important;
    border-color: rgba(220, 53, 69, 0.38) !important;
}

/* ===========================
   LOGO REAL EN CHATBOT
=========================== */

.bella-chatbot-logo-avatar {
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
}

.bella-chatbot-logo-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
}

.bella-chatbot-logo-toggle {
    overflow: visible !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 3px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow:
        0 18px 38px rgba(2, 11, 30, 0.28),
        0 0 0 8px rgba(30, 115, 168, 0.12) !important;
}

.bella-chatbot-logo-toggle img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.bella-chatbot-logo-toggle:hover {
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow:
        0 22px 46px rgba(2, 11, 30, 0.34),
        0 0 0 10px rgba(30, 115, 168, 0.16) !important;
}