#eventols-chatbot {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.eventols-chat-toggle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: transparent;
    color: white;
    border: 3px solid #2563eb;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.eventols-chat-toggle:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.eventols-chat-toggle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eventols-chat-panel {
    position: absolute;
    bottom: 72px;
    left: 0;
    width: 360px;
    max-width: calc(100vw - 40px);
    height: 520px;
    max-height: calc(100vh - 100px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.eventols-chat-panel[hidden] {
    display: none;
}

/* Mobile: panel fullscreen para evitar que el teclado virtual tape el input.
   La altura real la maneja JS con visualViewport API (mejor que 100dvh,
   especialmente en iOS Safari). El CSS deja un valor inicial razonable. */
@media (max-width: 640px) {
    .eventols-chat-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh; /* fallback inicial, JS lo ajusta con visualViewport */
        max-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }
    /* Ocultar el botón flotante cuando el panel está abierto, así no flota
       encima del fullscreen del chat. */
    #eventols-chatbot:has(.eventols-chat-panel:not([hidden])) .eventols-chat-toggle {
        display: none;
    }
}

.eventols-chat-header {
    padding: 12px 16px;
    background: #2563eb;
    color: white;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.eventols-chat-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eventols-chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    display: block;
}

.eventols-chat-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.eventols-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
    position: relative; /* hace que offsetTop de los msgs sea relativo a este container */
}

.eventols-chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
}

.eventols-chat-msg-user {
    align-self: flex-end;
    background: #2563eb;
    color: white;
    border-bottom-right-radius: 4px;
}

.eventols-chat-msg-assistant {
    align-self: flex-start;
    background: white;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    border-bottom-left-radius: 4px;
}

.eventols-chat-msg-error {
    align-self: center;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    font-size: 13px;
}

.eventols-chat-sticker {
    width: 48px;
    height: 48px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 2px;
}

.eventols-chat-rating {
    display: flex;
    gap: 2px;
    margin-top: 4px;
    justify-content: flex-end;
}

.eventols-rating-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 11px;
    opacity: 0.35;
    transition: opacity 0.15s ease;
    line-height: 1;
}

.eventols-rating-btn:hover {
    opacity: 0.9;
}

.eventols-rating-btn.selected {
    opacity: 1;
}

.eventols-chat-typing {
    display: flex;
    gap: 4px;
    padding: 14px 16px;
}

.eventols-chat-typing span {
    width: 6px;
    height: 6px;
    background: #94a3b8;
    border-radius: 50%;
    display: inline-block;
    animation: eventols-chat-blink 1.4s infinite both;
}

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

@keyframes eventols-chat-blink {
    0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
    30% { opacity: 1; transform: scale(1.2); }
}

.eventols-chat-input {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e2e8f0;
    background: white;
    flex-shrink: 0;
}

.eventols-chat-input-text {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    /* 16px obligatorio: iOS Safari hace zoom-in automático si es <16px y eso
       ensancha toda la página al enfocar el input. */
    font-size: 16px;
    outline: none;
}

.eventols-chat-input-text:focus {
    border-color: #2563eb;
}

.eventols-chat-send {
    padding: 10px 18px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}

.eventols-chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}