/* ===========================================================
   Chat con IA - Estilos
   =========================================================== */
:root {
    --color-primario: #0057FF;
    --color-acento: #FF7A00;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;  /* respaldo para navegadores que no soportan dvh */
    height: 100dvh; /* "dynamic viewport height": se ajusta al espacio real visible en móviles/tablets, aunque la barra de direcciones del navegador se muestre u oculte */
    background: #F4F6FB;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    overflow: hidden;
}

/* El body es el contenedor flex de todo el chat: barra superior, mensajes
   (que se encogen/expanden solos), vista previa de imagen (si aplica) y
   la barra de entrada — así el botón de enviar NUNCA queda fuera de
   pantalla, sea cual sea el alto de cada parte. */
body {
    display: flex;
    flex-direction: column;
}

.chat-desactivado {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: #5B6478;
}

/* ---------- Barra superior ---------- */
.chat-top-bar {
    flex: 0 0 auto;
    height: 8vh;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--color-primario);
    color: #FFFFFF;
}
.chat-titulo-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-logo { height: 32px; max-width: 120px; object-fit: contain; flex-shrink: 0; }
.chat-titulo { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-top-acciones { display: flex; align-items: center; gap: 10px; }
.chat-voz-control { display: flex; align-items: center; gap: 6px; }
.chat-selector-voz {
    max-width: 160px;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #FFFFFF;
}
.chat-selector-voz option { color: #1B2333; }
.chat-btn-limpiar {
    background: rgba(255,255,255,0.18);
    border: none;
    color: #FFFFFF;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.chat-btn-limpiar:hover { background: rgba(255,255,255,0.3); }

/* ---------- Mensajes ---------- */
.chat-mensajes {
    flex: 1 1 auto;
    min-height: 0; /* imprescindible para que el scroll interno funcione dentro de flex */
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chat-msg { display: flex; }
.chat-msg-usuario { justify-content: flex-end; }
.chat-msg-asistente { justify-content: flex-start; }

.chat-burbuja {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.chat-msg-usuario .chat-burbuja {
    background: var(--color-primario);
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
}
.chat-msg-asistente .chat-burbuja {
    background: #FFFFFF;
    color: #1B2333;
    border: 1px solid #DCE2F0;
    border-bottom-left-radius: 4px;
}
.chat-burbuja img { max-width: 100%; border-radius: 10px; margin-top: 8px; display: block; }
.chat-burbuja.chat-cargando { color: #5B6478; font-style: italic; }

/* ---------- Vista previa de imagen adjunta ---------- */
.chat-vista-previa {
    flex: 0 0 auto;
    padding: 10px 20px;
    background: #FFFFFF;
    border-top: 1px solid #DCE2F0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.chat-vista-previa img { height: 60px; border-radius: 8px; object-fit: cover; }
.chat-btn-quitar-imagen {
    background: #FDECEC;
    color: #E23A3A;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 700;
}

/* ---------- Barra de entrada ---------- */
.chat-input-bar {
    flex: 0 0 auto;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: #FFFFFF;
    border-top: 1px solid #DCE2F0;
}
.chat-icon-btn {
    background: #F4F6FB;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-icon-btn.grabando { background: #FDECEC; color: #E23A3A; animation: pulso-grabando 1s infinite; }
@keyframes pulso-grabando {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.chat-icon-btn-chico {
    width: 34px;
    height: 34px;
    font-size: 15px;
    background: rgba(255,255,255,0.18);
    color: #FFFFFF;
}
.chat-icon-btn-chico.silenciado { background: rgba(255,255,255,0.08); opacity: 0.6; }
.chat-btn-enviar { background: var(--color-acento); color: #FFFFFF; }
.chat-input-texto {
    flex: 1;
    min-width: 0; /* permite que el input se encoja en pantallas angostas, en vez de empujar el botón de enviar fuera de la vista */
    height: 46px;
    border: 1px solid #DCE2F0;
    border-radius: 23px;
    padding: 0 18px;
    font-size: 15px;
    font-family: inherit;
}

/* ---------- Overlay de PIN ---------- */
.chat-overlay-pin {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.chat-pin-caja {
    background: #FFFFFF;
    padding: 32px;
    border-radius: 14px;
    text-align: center;
    width: 260px;
}
.chat-pin-caja h2 { margin: 0 0 16px; font-size: 18px; }
.chat-pin-caja input {
    width: 100%;
    font-size: 22px;
    text-align: center;
    letter-spacing: 6px;
    padding: 10px;
    border: 1px solid #DCE2F0;
    border-radius: 8px;
    margin-bottom: 14px;
}
.chat-pin-error { color: #E23A3A; font-size: 13px; margin-top: 10px; }
.btn {
    display: inline-block;
    background: var(--color-primario);
    color: #FFFFFF;
    border: none;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}
.btn-accent { background: var(--color-acento); }

/* ---------- Ajustes para pantallas angostas (celular en vertical) ---------- */
@media (max-width: 480px) {
    .chat-input-bar { gap: 6px; padding: 0 10px; }
    .chat-icon-btn { width: 40px; height: 40px; font-size: 18px; }
    .chat-input-texto { padding: 0 12px; font-size: 14px; }
    .chat-titulo { font-size: 15px; }
    .chat-logo { height: 24px; max-width: 80px; }
    .chat-selector-voz { max-width: 110px; }
}