/* ══════════════════════════════════════════════
   Asistente IA de Cotización — botón flotante (estilo ARIA) + ventana de chat
   Se muestra en /elegir-plan/ cuando el tenant tiene ConfiguracionIATenant.activo
   ══════════════════════════════════════════════ */

/* Paleta del widget. Los valores por defecto son el azul del cotizador
   vehicular; cada portal puede re-mapearlos a su marca sobreescribiendo estas
   variables (ver static/cotizacion_am_ia/chat_am.css, que las engancha a la
   paleta de /cotimedica/). Así el chat no queda desentonando con el template
   que lo hospeda y no hay que duplicar la hoja de estilos. */
:root {
    --cotia-primary:      #1d4ed8;   /* base de gradientes y textos de acento */
    --cotia-primary-2:    #3b82f6;   /* fin del gradiente */
    --cotia-suave:        #eef2ff;   /* fondo de chips y hovers claros */
    --cotia-suave-2:      #dbe4ff;   /* hover de chip */
    --cotia-borde:        #c7d7fe;   /* borde de chip */
    --cotia-borde-fuerte: #93c5fd;   /* foco de input, borde elegido */
    --cotia-elegido:      #dbeafe;   /* feedback 👍/👎 marcado */
    /* Tintes translúcidos del FAB (sombra, halo, bordes de la nube). Son
       rgba porque van encima del fondo de la página; si se dejan en azul
       fijo, el robotcito sigue delatando el tema vehicular aunque los
       sólidos ya estén re-mapeados. */
    --cotia-tinte-12:     rgba(37, 99, 235, .12);
    --cotia-tinte-15:     rgba(37, 99, 235, .15);
    --cotia-tinte-55:     rgba(37, 99, 235, .55);
    --cotia-tinte-65:     rgba(37, 99, 235, .65);
    --cotia-anillo:       rgba(59, 130, 246, .6);
}

.cotia-widget {
    position: fixed;
    /* Lado IZQUIERDO: el botón de WhatsApp vive a la derecha en todos los
       diseños (broktech incluido) — cero choques. */
    bottom: 1.5rem;
    left: 1.5rem;
    right: auto;
    z-index: 9991;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Nube de conversación flotante (estilo cómic: burbuja + bolitas) */
.cotia-tooltip {
    background: #fff;
    color: #1e293b;
    border-radius: 18px;
    padding: 11px 14px 11px 16px;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .16), 0 1px 4px rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    animation: cotia-tooltip-in .3s cubic-bezier(.34, 1.56, .64, 1) both,
    cotia-nube-flota 3.2s ease-in-out .3s infinite;
    border: 1px solid var(--cotia-tinte-15);
    position: relative;
    margin-left: 8px;
}

/* Bolitas de la nube (cola de pensamiento, hacia el robot abajo-izquierda) */
.cotia-tooltip::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12), -12px 8px 0 -3px #fff;
    border: 1px solid var(--cotia-tinte-12);
}

@keyframes cotia-nube-flota {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes cotia-tooltip-in {
    from { opacity: 0; transform: translateY(6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cotia-tooltip-close {
    background: none;
    border: none;
    font-size: 1rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 2px;
    transition: color .15s;
    flex-shrink: 0;
}

.cotia-tooltip-close:hover { color: #475569; }

/* FAB — el glifo de ALMA, grande y flotando */
.cotia-fab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cotia-primary) 0%, var(--cotia-primary-2) 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px var(--cotia-tinte-55), 0 2px 6px rgba(0, 0, 0, .18);
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
    gap: 2px;
    animation: cotia-bob 3.2s ease-in-out infinite;
}

@keyframes cotia-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.cotia-fab:hover {
    animation-play-state: paused;
    transform: scale(1.12) translateY(-3px);
    box-shadow: 0 10px 30px var(--cotia-tinte-65), 0 3px 8px rgba(0, 0, 0, .22);
    color: #fff;
}

.cotia-fab-icon .cotia-alma-glifo {
    display: block;
    width: 30px;
    height: 30px;
}

/* Anillo pulsante (animación del logo ARIA) */
.cotia-fab-pulse {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    border: 2px solid var(--cotia-anillo);
    animation: cotia-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes cotia-pulse {
    0%   { transform: scale(1);   opacity: .9; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

.cotia-fab-icon {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cotia-fab-label {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1;
    opacity: .88;
}

/* ── Ventana de chat ─────────────────────────── */
.cotia-panel {
    position: fixed;
    bottom: calc(1.5rem + 66px + 14px);
    left: 1.5rem;
    right: auto;
    z-index: 9992;
    width: 430px;
    max-width: calc(100vw - 2rem);
    height: 620px;
    max-height: calc(100vh - 8rem);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .1);
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: cotia-panel-in .25s cubic-bezier(.34, 1.56, .64, 1) both;
}

.cotia-panel.abierto { display: flex; }

/* Pantalla completa: modal centrado SIN transform (los transform de la página
   rompen position:fixed) — left/right 0 + margin auto centra, y el box-shadow
   gigante oscurece el fondo como un modal real. */
.cotia-panel.pantalla-completa {
    top: 4vh;
    bottom: 4vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 860px;
    max-width: 94vw;
    height: auto;
    max-height: none;
    z-index: 99999;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .55), 0 24px 80px rgba(0, 0, 0, .35);
}

.cotia-panel.pantalla-completa .cotia-msg { max-width: 75%; font-size: .9rem; }

/* Chips de productos — el cliente toca un plan y la IA lo explica */
.cotia-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 10px 4px;
    background: #fff;
    border-top: 1px solid #eef2f7;
}

.cotia-chip {
    flex-shrink: 0;
    background: var(--cotia-suave);
    color: var(--cotia-primary);
    border: 1px solid var(--cotia-borde);
    border-radius: 999px;
    font-size: .72rem;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s, background .12s;
}

.cotia-chip:hover { background: var(--cotia-suave-2); transform: translateY(-1px); }

/* Jerarquía dentro del chip: nombre del plan > aseguradora > precio.
   La aseguradora se repite entre chips, así que va atenuada. */
.cotia-chip-aseg {
    margin-left: 5px;
    opacity: .7;
    font-weight: 400;
}

.cotia-chip-precio {
    margin-left: 5px;
    font-weight: 600;
}

.cotia-chip.activo {
    background: linear-gradient(135deg, var(--cotia-primary) 0%, var(--cotia-primary-2) 100%);
    color: #fff;
    border-color: var(--cotia-primary);
}

.cotia-chip b { font-weight: 700; }

/* Encabezado de bloque (plan/aseguradora) y separador en respuestas del bot */
.cotia-msg .cotia-h {
    margin-top: 8px;
    font-size: .86rem;
    color: var(--cotia-primary);
}

.cotia-msg .cotia-h:first-child { margin-top: 0; }

.cotia-msg hr.cotia-sep {
    border: none;
    border-top: 1px dashed #cbd5e1;
    margin: 8px 0;
}

@keyframes cotia-panel-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cotia-header {
    background: linear-gradient(135deg, var(--cotia-primary) 0%, var(--cotia-primary-2) 100%);
    color: #fff;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cotia-header-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    flex-shrink: 0;
}

.cotia-header-title { font-size: .9rem; font-weight: 700; line-height: 1.15; }

.cotia-header-sub { font-size: .68rem; opacity: .85; }

.cotia-header-reiniciar {
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    font-size: .85rem;
    cursor: pointer;
    opacity: .8;
    padding: 4px 6px;
}

.cotia-header-reiniciar:hover { opacity: 1; transform: rotate(90deg); transition: transform .25s; }

.cotia-header-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
}

.cotia-header-close:hover { opacity: 1; }

.cotia-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #f5f7fb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cotia-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: .83rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    animation: cotia-msg-in .2s ease-out both;
}

@keyframes cotia-msg-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cotia-msg.humano {
    align-self: flex-end;
    background: var(--cotia-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.cotia-msg.bot {
    align-self: flex-start;
    background: #fff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}

/* Accesos directos de contacto dentro del chat (mailto / WhatsApp) */
.cotia-msg.bot a {
    color: var(--cotia-primary);
    font-weight: 700;
    text-decoration: underline;
}

.cotia-msg.bot a .fa-whatsapp { color: #25d366; }

.cotia-msg.error-msg {
    align-self: flex-start;
    background: #fdf1f1;
    color: #a94442;
    border: 1px solid #f0caca;
}

/* Feedback 👍/👎 */
.cotia-feedback {
    align-self: flex-start;
    display: flex;
    gap: 6px;
    margin: -4px 0 2px 4px;
}

.cotia-feedback button {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: .75rem;
    padding: 2px 8px;
    cursor: pointer;
    transition: transform .12s, background .12s;
}

.cotia-feedback button:hover { transform: scale(1.12); background: var(--cotia-suave); }

.cotia-feedback button.elegido { background: var(--cotia-elegido); border-color: var(--cotia-borde-fuerte); }

/* Confirmación de reinicio — dentro del chat, sin alert del navegador */
.cotia-confirm {
    align-self: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    max-width: 92%;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    animation: cotia-msg-in .2s ease-out both;
}

.cotia-confirm-texto {
    font-size: .82rem;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.4;
}

.cotia-confirm-botones {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.cotia-btn-confirmar {
    background: linear-gradient(135deg, var(--cotia-primary) 0%, var(--cotia-primary-2) 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    transition: transform .12s;
}

.cotia-btn-confirmar:hover { transform: scale(1.05); }

.cotia-btn-cancelar {
    background: #e2e8f0;
    color: #475569;
    border: none;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    transition: transform .12s;
}

.cotia-btn-cancelar:hover { transform: scale(1.05); }

/* Servicio inactivo — estado bloqueado del widget */
.cotia-bloqueado {
    align-self: center;
    text-align: center;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    border-radius: 12px;
    padding: 18px 16px;
    margin-top: 20px;
    max-width: 90%;
    font-size: .85rem;
    line-height: 1.45;
}

.cotia-bloqueado i {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 8px;
    color: #ea580c;
}

/* Indicador escribiendo */
.cotia-typing {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    gap: 4px;
}

.cotia-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: cotia-bounce .9s infinite;
}

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

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

/* Etapa del turno en streaming ("Revisando tu cotización…") */
.cotia-typing-etapa {
    align-self: center;
    margin-left: 6px;
    color: #64748b;
    font-size: 11px;
    font-style: normal;
}

@keyframes cotia-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

.cotia-input-zone {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.cotia-input-zone input {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .84rem;
    outline: none;
}

.cotia-input-zone input:focus { border-color: var(--cotia-borde-fuerte); }

.cotia-btn-enviar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--cotia-primary) 0%, var(--cotia-primary-2) 100%);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s;
}

.cotia-btn-enviar:hover { transform: scale(1.08); }

.cotia-btn-enviar:disabled { opacity: .5; cursor: not-allowed; }

.cotia-disclaimer {
    font-size: .62rem;
    color: #94a3b8;
    text-align: center;
    padding: 0 10px 8px;
    background: #fff;
}

@media (max-width: 575px) {
    .cotia-widget { left: 1rem; }
    .cotia-tooltip { font-size: .78rem; white-space: normal; max-width: 210px; }
    .cotia-panel { left: .5rem; right: auto; width: calc(100vw - 1rem); height: 78vh; }
}

html.cotia-derecha .cotia-widget { left: auto; right: 1.5rem; align-items: flex-end; }
html.cotia-derecha .cotia-tooltip { margin-left: 0; margin-right: 8px; }
html.cotia-derecha .cotia-tooltip::after {
    left: auto;
    right: 22px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 12px 8px 0 -3px #fff;
}
html.cotia-derecha .cotia-panel { left: auto; right: 1.5rem; }
html.cotia-derecha .cotia-panel.pantalla-completa { left: 0; right: 0; }

@media (max-width: 575px) {
    html.cotia-derecha .cotia-widget { right: 1rem; }
    html.cotia-derecha .cotia-panel { left: auto; right: .5rem; }
    html.cotia-derecha .cotia-panel.pantalla-completa { left: 0; right: 0; }
}