/* ============================================================
   Asistente HACBA — burbuja de chat flotante.
   ============================================================ */

#chatbot-container {
    position: fixed;
    bottom: 24px;
    right: 100px;
    font-family: 'Public Sans', 'Segoe UI', Arial, sans-serif;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
}

#chatbot-button {
    background-color: #159eee;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(21,158,238,0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
}

#chatbot-button:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(21,158,238,0.55);
}

#chatbot-window {
    display: none;
    width: 360px;
    height: 500px;
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15,25,40,0.22);
    flex-direction: column;
    overflow: hidden;
}

#chatbot-window.open {
    display: flex;
    animation: chatbotIn 0.22s ease;
}

@keyframes chatbotIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Encabezado ---- */
#chatbot-header {
    background: linear-gradient(135deg, #159eee, #0d7ccf);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

#chatbot-header .chatbot-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

#chatbot-header .chatbot-title-block {
    flex: 1;
    min-width: 0;
}

/* Se fuerza el color acá porque el tema del sitio (scss/skin.css,
   regla "body.blue span") pinta TODO <span> de azul por defecto:
   sin esto el título queda azul sobre el fondo azul del header,
   invisible. */
#chatbot-header .chatbot-title,
#chatbot-header .chatbot-subtitle {
    display: block;
    color: #fff !important;
}

#chatbot-header .chatbot-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatbot-header .chatbot-subtitle {
    font-size: 12px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 5px;
}

#chatbot-header .chatbot-subtitle::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ecf8e;
    flex-shrink: 0;
}

#chatbot-header button {
    background: rgba(255,255,255,0.14);
    border: none;
    color: #fff !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

#chatbot-header button:hover {
    background: rgba(255,255,255,0.26);
}

/* ---- Mensajes ---- */
#chatbot-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #f4f7fa;
}

.message {
    font-size: 14px;
    line-height: 1.45;
}

.message.user {
    align-self: flex-end;
    background-color: #159eee;
    color: #fff !important;
    padding: 10px 16px;
    border-radius: 18px 18px 4px 18px;
    max-width: 80%;
    animation: fadeIn 0.25s ease;
}

.message.bot {
    align-self: flex-start;
    background-color: #fff;
    color: #1f2937 !important;
    padding: 10px 16px;
    border-radius: 18px 18px 18px 4px;
    max-width: 85%;
    box-shadow: 0 1px 2px rgba(15,25,40,0.08);
    animation: fadeIn 0.25s ease;
}

.message.bot button,
.message.bot a {
    color: #159eee !important;
}

.specialty-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.message.bot .special-btn {
    display: inline-block;
    padding: 7px 14px;
    background-color: #e3f3fd;
    color: #0d7ccf !important;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.message.bot .special-btn:hover {
    background-color: #159eee;
    color: #fff !important;
}

.message.bot button {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 16px;
    background-color: #159eee;
    color: #fff !important;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.message.bot button:hover {
    background-color: #0d7ccf;
}

/* ---- Input ---- */
#chatbot-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #e6eaee;
    background: #fff;
    flex-shrink: 0;
}

#chatbot-input-area input {
    flex: 1;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid #dde3e9;
    outline: none;
    font-size: 14px;
    color: #1f2937;
    background: #f4f7fa;
    transition: border-color 0.2s ease;
}

#chatbot-input-area input:focus {
    border-color: #159eee;
    background: #fff;
}

#chatbot-input-area button {
    margin: 0;
    background-color: #159eee;
    color: #fff !important;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

#chatbot-input-area button:hover {
    background-color: #0d7ccf;
}

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

@media (max-width: 1024px) {
    /* En mobile no entran los dos botones lado a lado: se apila el
       del chat arriba del de WhatsApp (mismo margen derecho), en vez
       de correrlo hacia la izquierda con un offset que en pantallas
       angostas empujaba la ventana fuera del borde. */
    #chatbot-container { bottom: 88px; right: 16px; }
    #chatbot-button { width: 52px; height: 52px; line-height: 52px; font-size: 22px; }
    #chatbot-window { width: calc(100vw - 32px); max-width: 340px; height: 60vh; max-height: 460px; }
}