/* El asistente. Prefijo as-.
 *
 * Panel anclado abajo a la derecha en escritorio y hoja completa en móvil. No
 * es un modal: se puede seguir viendo la tienda detrás, porque muchas de sus
 * respuestas terminan en "pues entonces pido esto". */

/* Va dentro de #pila-flotantes (index.html), en medio: encima de la barra de
 * edición y debajo del selector de perfil. Antes se posicionaba solo, en
 * nav+46, y se comía 18 px de la barra de edición —que va de nav+18 a nav+64—:
 * los dos anclados a la derecha, uno encima del otro. Saltaba en cuanto entraba
 * un proveedor, que también es cliente y ve las dos cosas a la vez.
 *
 * Si por lo que sea no existe la pila, el position:fixed de reserva lo deja
 * donde estaba y sigue siendo usable. */
.as-boton {
    position: fixed;
    right: var(--pila-lado, 16px);
    bottom: var(--pila-base, calc(var(--nav-height, 65px) + 18px));
    z-index: 6450;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border: 0; border-radius: 50%;
    background: #16181d; color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    cursor: pointer;
    transition: transform .16s cubic-bezier(.22,.61,.36,1), background-color .16s ease;
}
/* Dentro de la pila manda la columna, así que el botón vuelve al flujo: con
   position:fixed se salía de la columna y se plantaba encima de la barra de
   edición otra vez. El fixed de arriba es solo la reserva para cuando esta
   página no tenga pila. */
#pila-flotantes .as-boton { position: static; }

.as-boton:hover { transform: translateY(-2px); background: #000; }
.as-boton:active { transform: translateY(0); transition-duration: .06s; }


/* Con una pantalla completa abierta encima, el botón estorba: flota a 6450,
   por encima del panel (6100), de ajustes (6300) y del chat (6400), y tapaba
   filas enteras —se comía el importe de dos proveedores en el ranking—. El
   asistente es para consultar desde la tienda; ahí dentro ya estás mirando los
   datos. Se aparta y vuelve al cerrar.
   El panel del asistente NO se oculta: si lo has abierto tú, sigue siendo lo
   que estás usando. */
/* Regla movida a styles.css, junto a #pila-flotantes: ahora el asistente no
   está solo ahí arriba —comparte columna con la barra de edición y el selector
   de perfil— y esconder solo uno de los tres dejaba los otros dos flotando
   encima del panel. Se esconde la columna entera. */

.as-panel {
    position: fixed;
    right: 20px;
    bottom: calc(var(--nav-height, 65px) + 46px);
    z-index: 6460;
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 40px));
    height: min(560px, calc(100vh - 180px));
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 56px rgba(0, 0, 0, .26);
    overflow: hidden;
    animation: as-sube .2s cubic-bezier(.22,.61,.36,1);
}
@keyframes as-sube { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

.as-cabecera {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f3f5;
}
.as-cabecera > div { flex: 1; min-width: 0; }
.as-cabecera strong { display: block; font-size: 14.5px; font-weight: 700; color: #16181d; }
.as-cabecera small { display: block; margin-top: 1px; font-size: 11.5px; color: #868e96; }

.as-cerrar {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border: 0; border-radius: 50%;
    background: #f1f3f5; color: #495057;
    font-size: 20px; line-height: 1; cursor: pointer;
}
.as-cerrar:hover { background: #e9ecef; }

.as-hilo {
    flex: 1;
    min-height: 0;
    padding: 14px 14px 6px;
    overflow-y: auto;
    background: #fbfbfc;
}

.as-msg { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 12px; }
.as-msg.as-mio { align-items: flex-end; }

.as-burbuja {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    border: 1px solid #e9ecef;
    color: #16181d;
    font-size: 13.5px; line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Las cifras son el dato, no un adorno: tabulares para que alineen y algo más
   grandes que el texto que las rodea. */
.as-burbuja strong { font-size: 15px; font-variant-numeric: tabular-nums; }

.as-mio .as-burbuja {
    border-radius: 14px 14px 4px 14px;
    background: #16181d;
    border-color: #16181d;
    color: #fff;
}

/* Tres puntos mientras consulta. Es una consulta a la base, dura milisegundos:
   está para que no parezca que no ha pasado nada, no para simular que piensa. */
.as-pensando { display: flex; gap: 4px; padding: 13px; }
.as-pensando span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #adb5bd;
    animation: as-late 1.1s ease-in-out infinite;
}
.as-pensando span:nth-child(2) { animation-delay: .15s }
.as-pensando span:nth-child(3) { animation-delay: .3s }
@keyframes as-late { 0%, 60%, 100% { opacity: .3 } 30% { opacity: 1 } }

.as-acciones, .as-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-width: 92%; }

.as-accion {
    padding: 7px 13px;
    border: 0; border-radius: 999px;
    background: #2563eb; color: #fff;
    font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer;
}
.as-accion:hover { background: #1d4ed8; }

.as-sugerencia {
    padding: 7px 12px;
    border: 1px solid #dee2e6; border-radius: 999px;
    background: #fff; color: #495057;
    font: inherit; font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    text-align: left;
}
.as-sugerencia:hover { background: #f1f3f5; border-color: #ced4da; }

.as-escribir {
    display: flex; gap: 8px;
    flex-shrink: 0;
    padding: 11px 13px;
    border-top: 1px solid #f1f3f5;
    background: #fff;
}
.as-escribir input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #f8f9fa;
    color: #16181d;
    font: inherit; font-size: 13.5px;
}
.as-escribir input:focus { outline: 2px solid #2563eb; outline-offset: -1px; background: #fff; }

.as-enviar {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 0; border-radius: 50%;
    background: #16181d; color: #fff;
    cursor: pointer;
}
.as-enviar:hover { background: #000; }

/* En móvil ocupa casi toda la pantalla: las respuestas traen listas de pedidos
   y productos, y en 400×300 no se lee nada. */
@media (max-width: 600px) {
    .as-panel {
        right: 0; left: 0; bottom: 0;
        width: 100%;
        height: 82vh;
        border-radius: 18px 18px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .as-panel { animation: none }
    .as-pensando span { animation: none; opacity: .5 }
    .as-boton:hover, .as-boton:active { transform: none }
}