/* =====================================================================
   css/chat.css — Widget y panel de chat en vivo (frontend publico).
   Usa las variables CSS dinamicas del tema.
   ===================================================================== */

/* El atributo HTML [hidden] debe ganar siempre: sin esto, las reglas con
   `display` explicito (p.ej. .chat-panel { display: flex }) lo sobreescriben
   y el panel no se oculta al pulsar cerrar. */
[hidden] {
    display: none !important;
}

.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 9999; font-family: 'Segoe UI', system-ui, sans-serif; }

/* --- Boton flotante --- */
.chat-toggle {
    width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--color-primario, #FF6B9D); color: #fff; font-size: 1.4rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .2s, box-shadow .2s;
    position: relative;
}
.chat-toggle:hover { transform: scale(1.06); }
.chat-badge {
    position: absolute; top: -4px; right: -4px; background: var(--color-secundario, #4ECDC4);
    color: #fff; font-size: .72rem; font-weight: 700; min-width: 20px; height: 20px;
    border-radius: 50%; display: grid; place-items: center; padding: 0 4px;
}

/* --- Panel --- */
.chat-panel {
    position: absolute; right: 0; bottom: 74px; width: 350px; max-width: calc(100vw - 32px);
    height: 480px; max-height: calc(100vh - 120px); background: #fff; border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22); display: flex; flex-direction: column; overflow: hidden;
    animation: chat-pop .18s ease-out;
}
@keyframes chat-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* --- Cabecera --- */
.chat-header {
    background: var(--color-primario, #FF6B9D); color: #fff; padding: .9rem 1rem;
    display: flex; align-items: center; justify-content: space-between;
}
.chat-header-info { display: flex; align-items: center; gap: .7rem; }
.chat-header-info i { font-size: 1.5rem; }
.chat-header-info strong { display: block; font-size: .98rem; }
.chat-header-info small { opacity: .85; font-size: .76rem; }
.chat-close { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* --- Cuerpo / mensajes --- */
.chat-body { flex: 1; overflow-y: auto; padding: 1rem; background: #f7f8fa; display: flex; flex-direction: column; gap: .6rem; }
.chat-welcome { text-align: center; color: #8b95a5; font-size: .9rem; margin: auto 0; }
.chat-msg { max-width: 82%; padding: .6rem .9rem; border-radius: 14px; font-size: .9rem; line-height: 1.4; word-wrap: break-word; }
.chat-msg .chat-meta { display: block; font-size: .68rem; opacity: .7; margin-top: .25rem; }
.chat-msg.cliente { align-self: flex-end; background: var(--color-primario, #FF6B9D); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.admin { align-self: flex-start; background: #fff; color: var(--color-texto, #2D3436);
    border: 1px solid #eceff3; border-bottom-left-radius: 4px; }
.chat-msg.sistema { align-self: center; background: transparent; color: #9aa4b2; font-size: .78rem; font-style: italic; }

/* --- Formulario --- */
.chat-form { border-top: 1px solid #eceff3; padding: .7rem; background: #fff; }
.chat-input-row { display: flex; gap: .5rem; align-items: flex-end; }
.chat-input-row textarea {
    flex: 1; resize: none; border: 1px solid #e3e6ea; border-radius: 20px; padding: .6rem .9rem;
    font: inherit; font-size: .9rem; max-height: 90px; outline: none;
}
.chat-input-row textarea:focus { border-color: var(--color-primario, #FF6B9D); }
.chat-send {
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
    background: var(--color-primario, #FF6B9D); color: #fff;
}
.chat-send:disabled { opacity: .5; cursor: default; }
.chat-visitante-datos { display: flex; gap: .5rem; margin-bottom: .5rem; }
.chat-visitante-datos input { flex: 1; border: 1px solid #e3e6ea; border-radius: 10px; padding: .5rem .7rem; font: inherit; font-size: .85rem; }

/* --- Responsive --- */
@media (max-width: 480px) {
    .chat-panel { width: calc(100vw - 24px); right: -10px; height: 70vh; }
    .chat-widget { right: 14px; bottom: 14px; }
}