/* =========================================================
   asistente-ia.css — Hormadi Assist (ventana flotante)
   Ubicación: wwwroot/css/asistente-ia.css
   Prefijo hia- para no chocar con Bootstrap/Keenthemes.
   ========================================================= */

:root {
    --hia-red: #B02A14; /* rojo del header DataHub (ajústalo si tu header usa otro) */
    --hia-red-dark: #7c2200;
    --hia-ink: #1a1a1a;
    --hia-muted: #6b7280;
    --hia-body-bg: #f4f6f8; /* mismo fondo que la app de Lovable */
    --hia-live: #22c55e;
    --hia-top: 68px; /* altura del header + margen: la ventana abre justo debajo */
    --hia-z: 1045; /* arriba del header, debajo de modales Bootstrap (1050/1055) */
}

/* ---------- Lanzador (botón robot en el header) ---------- */
.hia-launcher {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}

    .hia-launcher:hover {
        background: rgba(255, 255, 255, .24);
    }

    .hia-launcher:active {
        transform: scale(.95);
    }

    .hia-launcher:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .hia-launcher svg {
        width: 22px;
        height: 22px;
        display: block;
    }

/* Ventana abierta: el botón se "enciende" en blanco */
html.hia-open .hia-launcher {
    background: #fff;
    color: var(--hia-red);
    border-color: #fff;
}

/* Ojos que parpadean (siempre) */
.hia-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: hia-blink 4.8s infinite;
}

@keyframes hia-blink {
    0%, 86%, 100% {
        transform: scaleY(1);
    }

    89% {
        transform: scaleY(.12);
    }

    92% {
        transform: scaleY(1);
    }

    95% {
        transform: scaleY(.12);
    }

    98% {
        transform: scaleY(1);
    }
}

/* ===== Parpadeo del lanzador =====
   Tres capas sincronizadas para que se note desde cualquier parte de la pantalla:
   1) el botón completo "respira" (fondo + resplandor blanco),
   2) un halo que se expande hacia afuera,
   3) el punto verde "en línea" titila.
   Se detiene mientras la ventana está abierta. */
.hia-launcher {
    animation: hia-glow 1.6s ease-in-out infinite;
}

@keyframes hia-glow {
    0%, 100% {
        background: rgba(255, 255, 255, .14);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }

    50% {
        background: rgba(255, 255, 255, .42);
        box-shadow: 0 0 16px 4px rgba(255, 255, 255, .6);
    }
}

.hia-halo {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 2px solid rgba(255, 255, 255, .95);
    opacity: 0;
    pointer-events: none;
    animation: hia-halo 1.6s ease-out infinite;
}

@keyframes hia-halo {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    80%, 100% {
        opacity: 0;
        transform: scale(1.7);
    }
}

/* Punto "en línea" */
.hia-live {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hia-live);
    border: 2px solid var(--hia-red);
    animation: hia-live 0.8s ease-in-out infinite alternate;
}

@keyframes hia-live {
    from {
        opacity: 1;
        box-shadow: 0 0 6px 2px rgba(34, 197, 94, .8);
    }

    to {
        opacity: .25;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Con la ventana abierta: quieto y "encendido" en blanco */
html.hia-open .hia-launcher,
html.hia-open .hia-halo,
html.hia-open .hia-live {
    animation: none;
}

html.hia-open .hia-halo {
    opacity: 0;
}

/* ---------- Ventana ---------- */
.hia-window {
    position: fixed;
    top: var(--hia-top);
    right: 16px;
    width: min(420px, calc(100vw - 32px));
    height: min(640px, calc(100vh - var(--hia-top) - 16px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(124, 34, 0, .14), 0 28px 64px -16px rgba(60, 10, 0, .45);
    z-index: var(--hia-z);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

    .hia-window.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .18s ease, transform .18s ease;
    }

/* Botón cerrar sobrepuesto en el encabezado rojo de la app de Lovable */
.hia-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .hia-close:hover {
        background: rgba(0, 0, 0, .34);
    }

    .hia-close:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .hia-close svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
    }

/* Cuerpo con el iframe */
.hia-body {
    position: relative;
    flex: 1;
    background: var(--hia-body-bg);
}

.hia-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Mientras se redimensiona, el iframe no debe "robarse" el mouse */
.hia-window.is-resizing .hia-frame {
    pointer-events: none;
}

/* Cargando */
.hia-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: var(--hia-body-bg);
    color: var(--hia-muted);
    font-size: 13px;
    text-align: center;
    transition: opacity .2s ease;
}

    .hia-loader p {
        margin: 0;
    }

.hia-window.is-loaded .hia-loader {
    opacity: 0;
    pointer-events: none;
}

.hia-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #f1d6d0;
    border-top-color: var(--hia-red);
    animation: hia-spin .8s linear infinite;
}

@keyframes hia-spin {
    to {
        transform: rotate(360deg);
    }
}

.hia-loader__slow {
    display: none;
    max-width: 260px;
}

.hia-window.is-slow .hia-loader__slow {
    display: block;
}

.hia-loader__slow button {
    margin-top: 8px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--hia-red);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Agarradera de redimensionar (esquina inferior derecha) */
.hia-grip {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 2;
    background: linear-gradient(135deg, transparent 0 52%, rgba(26, 26, 26, .28) 52% 60%, transparent 60% 70%, rgba(26, 26, 26, .28) 70% 78%, transparent 78%);
}

/* Celular / tablet chica: pantalla completa */
@media (max-width: 640px) {
    .hia-window {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0;
    }

    .hia-grip {
        display: none;
    }
}

/* Accesibilidad: sin animaciones si el usuario lo pidió en su sistema */
@media (prefers-reduced-motion: reduce) {
    .hia-eye, .hia-halo, .hia-spinner,
    .hia-launcher, .hia-live {
        animation: none;
    }

    .hia-halo {
        display: none;
    }

    .hia-window, .hia-window.is-open {
        transition: none;
    }
}