/* ============================================================================
   Estilos del chat.

   Vivian dentro de un <style> en ChatPage.razor: casi 2000 lineas de CSS que
   Blazor volvia a poner en el arbol de render en cada cambio de estado del
   componente. Aca se sirven como archivo estatico: el navegador los cachea y
   el componente deja de cargarlos a cuestas.

   Son globales a proposito (no aislados): ChatDock, ChatVentana y ChatBurbuja
   comparten estas clases.
   ============================================================================ */

    /* ===========================================================
       Chat · estilos modernos (light + dark)
       Alineado con el sidebar: mismos tokens y hook html.theme-dark
       =========================================================== */
    .chat-layout {
        position: relative;   /* ancla de la cinta de beta */

        /* ---------- Efectos: curvas y duraciones ----------
           Los springs son curvas reales muestreadas con linear(): no es un ease-out con
           overshoot, es un resorte con masa y amortiguacion. El fallback de @supports
           mantiene el movimiento en navegadores sin linear().
           Registro elegido: expresivo pero corto — nada pasa de 380 ms. */
        --spring-snap: cubic-bezier(.34, 1.56, .64, 1);
        --spring-soft: cubic-bezier(.22, 1.4, .36, 1);
        --ease-soft: cubic-bezier(.2, .8, .2, 1);
        --ease-exit: cubic-bezier(.4, 0, 1, 1);
        --t-bubble: 380ms;
        --t-ui: 220ms;
        --t-morph: 320ms;
        --c-surface: #ffffff;
        --c-surface-2: #f8fafc;
        --c-text: #334155;
        --c-muted: #94a3b8;
        --c-accent: #3c78ef;
        --c-accent-2: #6d5ef0;
        --c-hover: #eef2fb;
        --c-border: #e9edf5;
        --c-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);
        --c-badge: #ef4444;
        --c-online: #22c55e;

        display: flex;
        gap: 18px;
        height: calc(100vh - 150px);
        min-height: 520px;
        font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    }

    html.theme-dark .chat-layout {
        --c-surface: #0f1729;
        --c-surface-2: #131c30;
        --c-text: #cbd5e1;
        --c-muted: #64748b;
        --c-accent: #5b8cff;
        --c-accent-2: #8b7bff;
        --c-hover: rgba(255, 255, 255, .06);
        --c-border: rgba(255, 255, 255, .08);
        --c-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55);
    }

    /* ---------- Panel de contactos ---------- */
    .chat-contactos {
        width: 300px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: 16px;
        box-shadow: var(--c-shadow);
        overflow: hidden;
    }

    .chat-contactos-header {
        display: flex;
        align-items: center;
        gap: .55rem;
        padding: 1.05rem 1.15rem;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--c-text);
        border-bottom: 1px solid var(--c-border);
        background: var(--c-surface-2);
    }

        .chat-contactos-header .e-icons {
            color: var(--c-accent);
            font-size: 18px;
        }

    /* Buscador de contactos */
    .chat-buscador {
        position: relative;
        display: flex;
        align-items: center;
        padding: .6rem .75rem;
        border-bottom: 1px solid var(--c-border);
    }

    .chat-buscador-icono {
        position: absolute;
        left: 1.35rem;
        color: var(--c-muted);
        font-size: 15px;
        pointer-events: none;
    }

    .chat-buscador-input {
        flex: 1 1 auto;
        width: 100%;
        border: 1.5px solid var(--c-border);
        border-radius: 20px;
        background: var(--c-surface-2);
        color: var(--c-text);
        font-size: .88rem;
        padding: .5rem .8rem .5rem 2.2rem;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
        .chat-buscador-input::placeholder { color: var(--c-muted); }
        .chat-buscador-input:focus {
            background: var(--c-surface);
            border-color: var(--c-accent);
            box-shadow: 0 0 0 3px rgba(60, 120, 239, .14);
        }

    .chat-buscador-limpiar {
        position: absolute;
        right: 1.25rem;
        border: none;
        background: transparent;
        color: var(--c-muted);
        cursor: pointer;
        font-size: .85rem;
        line-height: 1;
        padding: .2rem;
        border-radius: 50%;
    }
        .chat-buscador-limpiar:hover { color: var(--c-text); background: var(--c-hover); }

    .chat-contactos-lista {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: .5rem;
    }

    /* Encabezado de grupo (Conectados / No conectados) */
    .chat-grupo {
        display: flex;
        align-items: center;
        gap: .45rem;
        padding: .55rem .7rem .3rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--c-muted);
    }
    .chat-grupo-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--c-muted);
    }
        .chat-grupo-dot.on { background: var(--c-online); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
    .chat-grupo-n {
        margin-left: auto;
        background: var(--c-hover);
        color: var(--c-muted);
        border-radius: 999px;
        padding: 0 .5rem;
        font-size: .68rem;
        font-weight: 700;
    }

        .chat-contactos-lista::-webkit-scrollbar { width: 7px; }
        .chat-contactos-lista::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

    /* Skeleton de carga de contactos (shimmer) */
    .chat-skel-row {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .6rem .7rem;
    }
    .chat-skel-lines { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
    .chat-skel {
        background: var(--c-hover);
        border-radius: 8px;
        position: relative;
        overflow: hidden;
    }
        .chat-skel::after {
            content: "";
            position: absolute;
            inset: 0;
            transform: translateX(-100%);
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
            animation: chatShimmer 1.3s infinite;
        }
    html.theme-dark .chat-skel::after {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
    }
    .chat-skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
    .chat-skel-line { height: 11px; }
        .chat-skel-line.lg { width: 62%; }
        .chat-skel-line.sm { width: 38%; }

    @keyframes chatShimmer { 100% { transform: translateX(100%); } }

    .chat-contactos-vacio {
        padding: 1rem;
        color: var(--c-muted);
        font-size: .9rem;
    }

    .chat-contacto {
        position: relative;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .6rem .7rem;
        border-radius: 12px;
        cursor: pointer;
        transition: background .16s ease, transform .12s ease;
    }

        .chat-contacto + .chat-contacto { margin-top: .15rem; }

        .chat-contacto:hover {
            background: var(--c-hover);
            transform: translateX(2px);
        }

        .chat-contacto.activo {
            background: linear-gradient(100deg, var(--c-accent), var(--c-accent-2));
            box-shadow: 0 10px 20px -12px rgba(60, 120, 239, .8);
        }

            .chat-contacto.activo .chat-contacto-nombre { color: #fff; }
            .chat-contacto.activo .chat-contacto-estado { color: rgba(255, 255, 255, .82); }

    /* ---------- Avatar ---------- */
    .chat-avatar {
        position: relative;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

        .chat-avatar img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
        }

    .chat-avatar-iniciales {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
        color: #fff;
        font-weight: 700;
        font-size: .95rem;
        letter-spacing: .02em;
    }

    .chat-contacto.activo .chat-avatar-iniciales {
        background: rgba(255, 255, 255, .25);
    }

    .chat-presencia {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--c-muted);
        border: 2.5px solid var(--c-surface);
    }

        .chat-presencia.en-linea {
            background: var(--c-online);
            box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
        }

    .chat-contacto.activo .chat-presencia { border-color: transparent; }

    /* ---------- Info del contacto ---------- */
    .chat-contacto-info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.3;
        gap: .05rem;
    }

    .chat-contacto-nombre {
        font-weight: 600;
        font-size: .95rem;
        color: var(--c-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-contacto-estado {
        font-size: .74rem;
        color: var(--c-muted);
    }

    .chat-badge {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--c-badge);
        color: #fff;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 700;
        box-shadow: 0 2px 6px rgba(239, 68, 68, .4);
    }

    .chat-contacto.activo .chat-badge {
        background: #fff;
        color: var(--c-accent);
        box-shadow: none;
    }

    /* ---------- Panel de conversación ---------- */
    .chat-conversacion {
        /* Ancla de lo que flota adentro: el aviso y el panel pertenecen a la conversación, no
           al layout entero. Sin esto el aviso se posicionaba contra el layout —contactos
           incluidos— y con el panel abierto le quedaba una franja donde el texto caía en
           una palabra por renglón. */
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: 16px;
        box-shadow: var(--c-shadow);
        overflow: hidden;
    }

    .chat-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .8rem;
        height: 100%;
        color: var(--c-muted);
        font-size: .95rem;
    }

    .chat-placeholder-icon {
        font-size: 46px !important;
        color: var(--c-accent);
        opacity: .55;
    }

    /* ==========================================================
       Conversación a medida (estilo apps de mensajería)
       ========================================================== */
    .chat-conv {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        position: relative;   /* para el panel de archivos/enlaces */
    }

    /* --- Encabezado --- */
    .chat-conv-header {
        position: relative;   /* marco de la cinta BETA */
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .7rem 1rem;
        transition: padding-right .2s ease;
        background: var(--c-surface-2);
        border-bottom: 1px solid var(--c-border);
        flex: 0 0 auto;
    }

    /* Botón volver (solo mobile) */
    .chat-volver {
        display: none;
        align-items: center; justify-content: center;
        width: 34px; height: 34px;
        border: none; background: transparent;
        color: var(--c-text); font-size: 1.6rem; line-height: 1;
        cursor: pointer; border-radius: 50%;
        flex: 0 0 auto;
    }
        .chat-volver:hover { background: var(--c-hover); }

    /* Botón del header (panel de archivos) */
    /* El margin-left:auto vivía en cada botón, así que sólo el último se iba a la derecha y
       el resto quedaba pegado al nombre. Ahora empuja el grupo entero. */
    .chat-header-acciones {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: .15rem;
        flex: 0 1 auto;
        min-width: 0;
    }

    .chat-header-btn {
        width: 38px; height: 38px;
        display: flex; align-items: center; justify-content: center;
        border: none; background: transparent;
        color: var(--c-muted); cursor: pointer; border-radius: 50%;
        transition: background .15s ease, color .15s ease;
        flex: 0 0 auto;
    }
        .chat-header-btn:hover { background: var(--c-hover); color: var(--c-accent); }
        .chat-header-btn.activo { background: var(--c-accent); color: #fff; }

    .chat-avatar-sm { width: 40px; height: 40px; }
        .chat-avatar-sm img,
        .chat-avatar-sm .chat-avatar-iniciales { width: 40px; height: 40px; font-size: .85rem; }

    .chat-conv-header-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 4.5rem; flex: 1 1 auto; overflow: hidden; }
    .chat-conv-nombre { font-weight: 700; font-size: 1rem; color: var(--c-text); }
    .chat-conv-estado { font-size: .74rem; color: var(--c-muted); min-height: 1em; }

    /* --- Área de mensajes --- */
    .chat-mensajes {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 1.1rem 1.2rem;
        display: flex;
        flex-direction: column;
        gap: .35rem;
        background:
            radial-gradient(circle at 100% 0, rgba(60,120,239,.04), transparent 240px),
            var(--c-surface);
    }
        .chat-mensajes::-webkit-scrollbar { width: 8px; }
        .chat-mensajes::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

    .chat-mensajes-vacio {
        margin: auto;
        color: var(--c-muted);
        font-size: .9rem;
        text-align: center;
    }

    /* Separador de día */
    .chat-dia { text-align: center; margin: .5rem 0; }
        .chat-dia span {
            background: var(--c-hover);
            color: var(--c-muted);
            font-size: .72rem;
            font-weight: 600;
            padding: .2rem .7rem;
            border-radius: 999px;
        }

    /* Fila + burbuja */
    .chat-burbuja-row { display: flex; }
        .chat-burbuja-row.propio { justify-content: flex-end; }
        .chat-burbuja-row.otro { justify-content: flex-start; }

    .chat-burbuja {
        max-width: 72%;
        padding: .5rem .75rem .35rem;
        border-radius: 14px;
        font-size: .92rem;
        line-height: 1.38;
        box-shadow: 0 1px 1.5px rgba(15, 23, 42, .12);
        animation: chatBubIn var(--t-bubble) var(--spring-soft) both;
        position: relative;
    }
        .chat-burbuja.otro {
            background: var(--c-surface-2);
            color: var(--c-text);
            border-top-left-radius: 4px;
        }
        .chat-burbuja.propio {
            background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
            color: #fff;
            border-top-right-radius: 4px;
        }

    .chat-burbuja-texto { white-space: pre-wrap; word-break: break-word; }

    /* En bloque, el tilde quedaba pegado a la hora —"14:27✓"— y apoyado sobre la línea de
       base del texto. Con flex hay separación y quedan alineados por el centro. */
    .chat-burbuja-meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .3rem;
        font-size: .64rem;
        margin-top: .15rem;
        opacity: .7;
        font-variant-numeric: tabular-nums;
    }
    .chat-burbuja.otro .chat-burbuja-meta { color: var(--c-muted); opacity: 1; }
    .chat-check { margin-left: .2rem; }
        .chat-check.leido { color: #7fd1ff; }

    /* Mensaje eliminado */
    .chat-burbuja.eliminado { opacity: .85; }
    .chat-txt-eliminado { font-style: italic; opacity: .8; }

    /* Botón eliminar (aparece al pasar el mouse sobre un mensaje propio) */
    .chat-borrar {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 24px;
        height: 24px;
        border: none;
        border-radius: 50%;
        background: var(--c-surface);
        color: var(--c-badge);
        box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
        cursor: pointer;
        font-size: .72rem;
        line-height: 1;
        opacity: 0;
        transform: scale(.7);
        transition: opacity .15s ease, transform .15s ease;
    }
    .chat-burbuja:hover .chat-borrar { opacity: 1; transform: scale(1); }

    /* Adjunto: imagen */
    .chat-img-link { display: block; }
    .chat-img {
        max-width: 240px;
        max-height: 240px;
        border-radius: 10px;
        display: block;
        cursor: pointer;
        transition: filter .2s ease;
    }
        .chat-img:hover { filter: brightness(.94); }

    /* Adjunto: tarjeta de archivo */
    .chat-file {
        display: flex;
        align-items: center;
        gap: .6rem;
        text-decoration: none;
        color: inherit;
        padding: .35rem .2rem;
        min-width: 200px;
    }
    .chat-file-ico {
        font-size: 1.6rem;
        width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255, 255, 255, .18);
        border-radius: 10px;
        flex-shrink: 0;
    }
    .chat-burbuja.otro .chat-file-ico { background: rgba(60, 120, 239, .1); }
    .chat-file-info { display: flex; flex-direction: column; min-width: 0; }
    .chat-file-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
    .chat-file-accion { font-size: .68rem; opacity: .75; text-decoration: underline; }

    /* Botón adjuntar en la barra */
    .chat-attach {
        flex: 0 0 auto;
        width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        color: var(--c-muted);
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
        .chat-attach:hover { background: var(--c-hover); color: var(--c-accent); }

    .chat-attach-spinner {
        width: 20px; height: 20px;
        border: 2.5px solid var(--c-border);
        border-top-color: var(--c-accent);
        border-radius: 50%;
        animation: chatSpin .7s linear infinite;
    }
    @keyframes chatSpin { to { transform: rotate(360deg); } }

    /* Indicador "escribiendo" */
    .chat-typing { display: inline-flex; gap: 4px; padding: .7rem .8rem !important; }
        .chat-typing span {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--c-muted);
            animation: chatTyping 1.2s infinite ease-in-out;
        }
        .chat-typing span:nth-child(2) { animation-delay: .2s; }
        .chat-typing span:nth-child(3) { animation-delay: .4s; }

    @keyframes chatTyping {
        0%, 60%, 100% { transform: translateY(0); opacity: .4; }
        30% { transform: translateY(-4px); opacity: 1; }
    }

    @keyframes chatMsgIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- Barra de escribir --- */
    .chat-input-bar {
        flex: 0 0 auto;
        display: flex;
        align-items: flex-end;
        gap: .6rem;
        padding: .75rem .9rem;
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
    }

    .chat-input {
        flex: 1 1 auto;
        resize: none;
        max-height: 120px;
        min-height: 44px;
        padding: .65rem 1.05rem;
        border: 1.5px solid var(--c-border);
        border-radius: 22px;
        background: var(--c-surface-2);
        color: var(--c-text);
        font-family: inherit;
        font-size: .92rem;
        line-height: 1.35;
        outline: none;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--c-border) transparent;
        transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
    }

        /* Sin esto aparece la barra de scroll clásica del sistema, con flechitas, apenas el
           texto pasa de una línea. */
        .chat-input::-webkit-scrollbar { width: 8px; }
        .chat-input::-webkit-scrollbar-track { background: transparent; }
        .chat-input::-webkit-scrollbar-thumb {
            background: var(--c-border);
            border-radius: 999px;
            border: 2px solid transparent;
            background-clip: content-box;
        }
        .chat-input::-webkit-scrollbar-thumb:hover { background: var(--c-muted); background-clip: content-box; }

        .chat-input::placeholder { color: var(--c-muted); }
        .chat-input:hover { background: var(--c-surface); }
        .chat-input:focus {
            background: var(--c-surface);
            border-color: var(--c-accent);
            box-shadow: 0 0 0 4px rgba(60, 120, 239, .16);
        }

    .chat-send {
        flex: 0 0 auto;
        width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        border: none;
        border-radius: 50%;
        color: #fff;
        background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
        box-shadow: 0 6px 16px -6px rgba(60, 120, 239, .85);
        cursor: pointer;
        transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, filter .2s ease, opacity .2s ease;
    }
        .chat-send:hover { transform: scale(1.08); filter: brightness(1.05); box-shadow: 0 8px 20px -6px rgba(60, 120, 239, .95); }
        .chat-send:active { transform: scale(.92); }
        .chat-send.disabled, .chat-send:disabled {
            opacity: .45;
            cursor: default;
            box-shadow: none;
            transform: none;
            filter: grayscale(.3);
        }

    /* ---------- Responsive ---------- */
    /* Divisor "no leídos" */
    .chat-divisor-noleidos {
        text-align: center;
        margin: .6rem 0;
        position: relative;
    }
        .chat-divisor-noleidos span {
            background: var(--c-accent);
            color: #fff;
            font-size: .68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .05em;
            padding: .2rem .8rem;
            border-radius: 999px;
        }

    /* "(editado)" en la meta */
    .chat-editado { font-style: italic; margin-right: .3rem; opacity: .8; }

    /* Acciones del mensaje (editar/eliminar) al pasar el mouse */
    .chat-acciones {
        position: absolute;
        top: -10px;
        right: -6px;
        display: flex;
        gap: .2rem;
        opacity: 0;
        transform: scale(.7);
        transition: opacity .15s ease, transform .15s ease;
    }
    .chat-burbuja:hover .chat-acciones { opacity: 1; transform: scale(1); }
    .chat-accion {
        width: 24px; height: 24px;
        border: none; border-radius: 50%;
        background: var(--c-surface);
        box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
        cursor: pointer; font-size: .7rem; line-height: 1;
        padding: 0;
    }
        .chat-accion:hover { background: var(--c-hover); }

    /* Skeleton de burbuja (carga de historial) */
    .chat-skel-burbuja { height: 34px; border-radius: 14px; }

    /* Panel de archivos / imágenes / enlaces */
    .chat-panel {
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 320px;
        max-width: 88%;
        background: var(--c-surface);
        border-left: 1px solid var(--c-border);
        box-shadow: -12px 0 30px -18px rgba(15, 23, 42, .4);
        display: flex;
        flex-direction: column;
        z-index: 5;
        animation: chatPanelIn .2s ease;
    }
    @keyframes chatPanelIn { from { transform: translateX(20px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
    .chat-panel-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: .9rem 1rem;
        font-weight: 700; color: var(--c-text);
        border-bottom: 1px solid var(--c-border);
        background: var(--c-surface-2);
    }
    .chat-panel-cerrar { border: none; background: transparent; color: var(--c-muted); font-size: 1rem; cursor: pointer; }
        .chat-panel-cerrar:hover { color: var(--c-text); }
    .chat-panel-body { flex: 1; overflow-y: auto; padding: .8rem 1rem 1.2rem; }
    .chat-panel-seccion {
        font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
        color: var(--c-muted); margin: .9rem 0 .5rem;
    }
    .chat-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
        .chat-panel-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
    .chat-panel-file {
        display: flex; align-items: center; gap: .5rem;
        padding: .45rem .3rem; text-decoration: none; color: var(--c-text);
        border-bottom: 1px solid var(--c-border);
    }
        .chat-panel-file:hover { background: var(--c-hover); }
    .chat-panel-file .chat-file-ico { width: 34px; height: 34px; font-size: 1.3rem; background: rgba(60,120,239,.1); }
    .chat-panel-file-nombre { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-panel-link {
        display: block; padding: .4rem .3rem; font-size: .82rem;
        color: var(--c-accent); word-break: break-all; border-bottom: 1px solid var(--c-border);
    }
    .chat-panel-vacio { color: var(--c-muted); font-size: .88rem; text-align: center; margin-top: 2rem; }

    /* Elementos clickeables del chat */
    .chat-file, .chat-img-link, .chat-panel-img, .chat-panel-file { cursor: pointer; }
    .chat-panel-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
    .chat-panel-file-dl { margin-left: auto; color: var(--c-muted); }

    /* ============ Aviso "se conectó" (snackbar moderno, clickeable) ============ */
    /* ============================================================================
   Aviso de "se conectó".

   Vive FUERA de .chat-layout —cuelga del final de la página, junto al visor de imagen— y ahí
   está la trampa: las variables --c-* se definen en .chat-layout, así que acá no resolvían y
   `background: var(--c-surface)` caía a transparente. El cartel se veía como un vidrio sucio
   sobre la lista de contactos. Lleva su propio juego, igual que .chat-modal-card.
   ============================================================================ */
.chat-aviso {
    --a-fondo: #ffffff;
    --a-fondo-2: #f8fafc;
    --a-texto: #1e293b;
    --a-muted: #64748b;
    --a-borde: #e9edf5;
    --a-acento: #3c78ef;
    --a-online: #22c55e;

    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 20000;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .55rem .65rem .7rem;
    min-width: 268px;
    max-width: 340px;
    border: 1px solid var(--a-borde);
    border-radius: 15px;
    background: color-mix(in srgb, var(--a-fondo) 88%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 20px 46px -18px rgba(15, 23, 42, .5), 0 2px 6px -2px rgba(15, 23, 42, .1);
    cursor: pointer;
    animation: avisoIn .34s var(--spring-soft, cubic-bezier(.22, 1.4, .36, 1)) both;
    transition: transform .18s ease, box-shadow .2s ease;
}
    .chat-aviso:hover { transform: translateY(-2px); box-shadow: 0 26px 54px -20px rgba(15, 23, 42, .55); }
    .chat-aviso:active { transform: translateY(0) scale(.99); }

html.theme-dark .chat-aviso {
    --a-fondo: #131c30;
    --a-fondo-2: #0f1729;
    --a-texto: #e5e7eb;
    --a-muted: #94a3b8;
    --a-borde: rgba(255, 255, 255, .1);
    --a-acento: #5b8cff;
    --a-online: #34d399;
    box-shadow: 0 20px 46px -18px rgba(0, 0, 0, .72);
}

/* El avatar iba sin recorte: una foto rectangular se salía de la caja y pisaba el texto. */
.chat-aviso-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: visible;
}
    .chat-aviso-avatar img {
        width: 100%;
        height: 100%;
        /* `contain` y no `cover`: varias fotos son logos apaisados con fondo blanco, y
           recortarlos al cuadrado les come el nombre de la empresa. */
        object-fit: contain;
        border-radius: 50%;
        background: var(--a-fondo-2);
        display: block;
    }
    .chat-aviso-avatar .chat-avatar-iniciales {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--a-acento), #6d5ef0);
        color: #fff;
        font-size: .82rem;
        font-weight: 700;
    }
    /* El punto verde se dibuja acá y no con .chat-presencia, que usa las variables del layout. */
    .chat-aviso-avatar .chat-presencia {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--a-online);
        border: 2.5px solid var(--a-fondo);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-online) 26%, transparent);
    }

.chat-aviso-info { display: flex; flex-direction: column; gap: .05rem; min-width: 0; flex: 1; line-height: 1.3; }

.chat-aviso-titulo {
    font-size: .85rem;
    color: var(--a-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    .chat-aviso-titulo b { font-weight: 700; }

.chat-aviso-sub { font-size: .74rem; color: var(--a-acento); font-weight: 600; }

.chat-aviso-cerrar {
    flex: 0 0 auto;
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--a-muted);
    font-size: .72rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
    .chat-aviso-cerrar:hover { background: rgba(127, 127, 127, .16); color: var(--a-texto); }

@keyframes avisoIn {
    from { opacity: 0; transform: translateX(24px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* En pantallas chicas va abajo del todo, centrado, y no tapa el compositor de una esquina. */
@media (max-width: 640px) {
    .chat-aviso {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        min-width: 0;
    }
    @keyframes avisoIn {
        from { opacity: 0; transform: translateY(18px) scale(.97); }
        to   { opacity: 1; transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-aviso { animation: none; transition: none; }
    .chat-aviso:hover { transform: none; }
}
    .chat-aviso-cerrar {
        margin-left: auto; align-self: flex-start;
        border: none; background: transparent; color: var(--c-muted);
        cursor: pointer; font-size: .8rem; padding: .1rem .25rem; border-radius: 50%;
    }
        .chat-aviso-cerrar:hover { color: var(--c-text); background: var(--c-hover); }

    /* ============ Lightbox de imagen ============ */
    .chat-lightbox {
        position: fixed; inset: 0; z-index: 21000;
        background: rgba(8, 12, 22, .88);
        display: flex; flex-direction: column;
        animation: lbIn .18s ease;
    }
    @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
    .chat-lightbox-barra {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; padding: .75rem 1.1rem; color: #fff;
    }
    .chat-lightbox-nombre { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-lightbox-acciones { display: flex; align-items: center; gap: .35rem; }
        .chat-lightbox-acciones button {
            width: 38px; height: 38px; border: none; border-radius: 50%;
            background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.1rem; cursor: pointer;
            transition: background .15s ease, transform .12s ease;
        }
        .chat-lightbox-acciones button:hover { background: rgba(255, 255, 255, .25); transform: scale(1.08); }
    .chat-lightbox-zoom { color: #fff; font-size: .8rem; min-width: 42px; text-align: center; opacity: .85; }
    .chat-lightbox-visor { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 1rem; }
        .chat-lightbox-visor img {
            max-width: 92%; max-height: 100%;
            border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
            transition: transform .15s ease; transform-origin: center;
            cursor: zoom-in;
        }

    /* ============ Modal moderno (editar mensaje) ============ */
    .chat-modal {
        position: fixed; inset: 0; z-index: 21000;
        display: flex; align-items: center; justify-content: center;
        background: rgba(8, 12, 22, .55);
        backdrop-filter: blur(3px);
        animation: chatModalBg .18s ease;
        padding: 1rem;
    }
    @keyframes chatModalBg { from { opacity: 0; } to { opacity: 1; } }

    .chat-modal-card {
        --m-surface: #ffffff; --m-surface-2: #f8fafc; --m-text: #1e293b;
        --m-muted: #94a3b8; --m-accent: #3c78ef; --m-accent-2: #6d5ef0; --m-border: #e9edf5;
        width: 440px; max-width: 100%;
        background: var(--m-surface);
        border-radius: 18px;
        box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .55);
        overflow: hidden;
        animation: chatModalIn .26s cubic-bezier(.34, 1.56, .64, 1);
        font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    }
    html.theme-dark .chat-modal-card {
        --m-surface: #131c30; --m-surface-2: #0f1729; --m-text: #e5e7eb;
        --m-muted: #64748b; --m-accent: #5b8cff; --m-accent-2: #8b7bff; --m-border: rgba(255, 255, 255, .08);
    }
    @keyframes chatModalIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

    .chat-modal-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 1rem 1.2rem;
        border-bottom: 1px solid var(--m-border);
        background: var(--m-surface-2);
    }
    .chat-modal-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem; color: var(--m-text); }
    .chat-modal-x { border: none; background: transparent; color: var(--m-muted); cursor: pointer; font-size: .9rem; border-radius: 50%; padding: .2rem .35rem; }
        .chat-modal-x:hover { color: var(--m-text); background: rgba(127, 127, 127, .12); }

    .chat-modal-input {
        width: calc(100% - 2.4rem);
        margin: 1.1rem 1.2rem 0;
        resize: vertical;
        min-height: 84px;
        padding: .7rem .9rem;
        border: 1.5px solid var(--m-border);
        border-radius: 12px;
        background: var(--m-surface-2);
        color: var(--m-text);
        font-family: inherit; font-size: .95rem; line-height: 1.4;
        outline: none;
        transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
    }
        .chat-modal-input:focus {
            background: var(--m-surface);
            border-color: var(--m-accent);
            box-shadow: 0 0 0 4px rgba(60, 120, 239, .16);
        }

    .chat-modal-actions { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.2rem 1.2rem; }
    .chat-modal-btn {
        border: none; border-radius: 11px;
        padding: .6rem 1.1rem; font-size: .9rem; font-weight: 600; cursor: pointer;
        transition: transform .14s ease, filter .2s ease, box-shadow .2s ease, background .2s ease;
    }
        .chat-modal-btn:active { transform: scale(.96); }
    .chat-modal-btn.cancel { background: transparent; color: var(--m-muted); }
        .chat-modal-btn.cancel:hover { background: rgba(127, 127, 127, .12); color: var(--m-text); }
    .chat-modal-btn.ok {
        color: #fff;
        background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2));
        box-shadow: 0 10px 22px -10px rgba(60, 120, 239, .8);
    }
        .chat-modal-btn.ok:hover { filter: brightness(1.06); transform: translateY(-1px); }
        .chat-modal-btn.ok:disabled { opacity: .5; cursor: default; box-shadow: none; transform: none; filter: grayscale(.3); }

    /* ---------- Responsive ----------

       El corte estaba en 820px y era demasiado bajo. Entre 820 y 1000, la lista de contactos
       —300px que no se encogen— y el sidebar de la aplicación dejaban a la conversación con
       unos 250px: con la cinta BETA reservando 96 y los botones otros 119, el nombre del grupo
       se quedaba sin lugar. Por debajo de 1000px la conversación se lleva el ancho entero, que
       es el mismo layout de una columna que ya se usaba en el teléfono. */
    @media (max-width: 1000px) {
        .chat-layout { height: calc(100vh - 120px); gap: 0; }
        .chat-contactos { width: 100%; border-radius: 14px; }
        .chat-conversacion { display: none; }

        /* Con un contacto abierto: ocultar la lista y mostrar la conversación a pantalla completa */
        .chat-layout.con-seleccion .chat-contactos { display: none; }
        .chat-layout.con-seleccion .chat-conversacion { display: block; }

        .chat-volver { display: flex; }
        .chat-panel { width: 100%; max-width: 100%; }
    }

    /* Entre 1000 y 1200 entran las dos columnas, pero la lista cede un poco de ancho. */
    @media (min-width: 1001px) and (max-width: 1200px) {
        .chat-contactos { width: 264px; }
    }

    /* ===========================================================
       Cinta "BETA" del chat.
       El degradado va hardcodeado y no con var(--c-accent): el stop claro del acento
       mide 4.10:1 sobre blanco y no llega al 4.5:1. Mismo criterio que ChipBeta.
       =========================================================== */
    /* Con la cinta puesta, el encabezado reserva el lugar que ella ocupa: si no, la cinta
       queda encima de los botones de la derecha (archivos, búsqueda). */
    .chat-layout.con-beta .chat-conv-header { padding-right: 124px; }

    @media (max-width: 1180px) {
        .chat-layout.con-beta .chat-conv-header { padding-right: 96px; }
    }

    @media (max-width: 820px) {
        .chat-layout.con-beta .chat-conv-header { padding-right: 92px; }
    }

    .chat-beta-ribbon-clip {
        position: absolute;
        top: 0;
        right: 0;
        width: 96px;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        z-index: 40;
        border-top-right-radius: 16px;
    }

    .chat-beta-ribbon {
        position: absolute;
        top: 12px;
        right: -34px;
        width: 124px;
        padding: 4px 0;
        transform: rotate(45deg);
        text-align: center;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .12em;
        color: #fff;
        background: linear-gradient(100deg, #2b56c9, #6d5ef0);
        box-shadow: 0 8px 18px -8px rgba(15, 23, 42, .55);
        animation: chatBetaIn .45s cubic-bezier(.2, .9, .25, 1) both;
    }

    html.theme-dark .chat-beta-ribbon {
        background: linear-gradient(100deg, #5b8cff, #8b7bff);
        color: #0b1220;
    }

    @keyframes chatBetaIn {
        from { opacity: 0; transform: rotate(45deg) translateY(-16px); }
        to   { opacity: 1; transform: rotate(45deg) translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .chat-beta-ribbon { animation: none !important; }
    }

    @media (max-width: 820px) {
        .chat-beta-ribbon-clip { width: 80px; }
        .chat-beta-ribbon { top: 10px; right: -38px; width: 112px; font-size: .62rem; }
    }

    /* ---------- Envío no confirmado ---------- */
    .chat-burbuja.no-enviado {
        opacity: .72;
        outline: 1px dashed rgba(239, 68, 68, .65);
        outline-offset: 1px;
    }

    .chat-reintentar {
        border: 0;
        background: rgba(255, 255, 255, .22);
        color: inherit;
        font: inherit;
        font-size: .68rem;
        font-weight: 600;
        padding: .05rem .4rem;
        border-radius: 7px;
        cursor: pointer;
        transition: background .15s ease;
    }
    .chat-reintentar:hover { background: rgba(255, 255, 255, .34); }
    .chat-burbuja.otro .chat-reintentar { background: rgba(239, 68, 68, .12); color: #b91c1c; }
    html.theme-dark .chat-burbuja.otro .chat-reintentar { background: rgba(239, 68, 68, .22); color: #fca5a5; }

    /* ---------- Modal de confirmación propio ---------- */
    /* Ojo: el modal se renderiza FUERA de .chat-layout, asi que no ve las variables --c-*.
       Los tokens del modal son los --m-*, que ya contemplan claro y oscuro. */
    /* El mismo padding lateral que el encabezado y los botones (1.2rem): antes el texto
       quedaba pegado al borde izquierdo mientras el resto del diálogo respiraba. */
    .chat-modal-texto {
        margin: 0;
        padding: 1.25rem 1.2rem .25rem;
        color: var(--m-text);
        font-size: .95rem;
        line-height: 1.55;
    }

    .chat-modal-detalle {
        margin: 0;
        padding: .35rem 1.2rem 0;
        color: var(--m-muted);
        font-size: .84rem;
        line-height: 1.5;
    }

    /* El ícono del título va en una pastilla del color de la acción. */
    .chat-modal-ico {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(239, 68, 68, .14);
        color: #ef4444;
        font-size: .95rem;
    }
    html.theme-dark .chat-modal-ico { background: rgba(248, 113, 113, .18); color: #fca5a5; }

    /* Cancelar como acción secundaria, sin caja. */
    .chat-modal-btn.cancel {
        background: transparent;
        color: var(--m-muted);
    }
    .chat-modal-btn.cancel:hover { background: rgba(127, 127, 127, .12); color: var(--m-text); }

    .chat-modal-btn.danger {
        background: #ef4444;
        color: #fff;
        border: 1px solid transparent;
    }
    .chat-modal-btn.danger:hover { background: #dc2626; }
    html.theme-dark .chat-modal-btn.danger { background: #f87171; color: #1a0b0b; }
    html.theme-dark .chat-modal-btn.danger:hover { background: #ef4444; color: #fff; }

    /* ---------- La lista no pudo cargarse ---------- */
    .chat-contactos-error {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        padding: 1.6rem 1rem;
        text-align: center;
        color: var(--c-text);
        font-size: .85rem;
    }
    .chat-contactos-error-ico { font-size: 1.4rem; }
    .chat-contactos-reintentar {
        border: 1px solid var(--c-border);
        background: var(--c-surface-2);
        color: var(--c-accent);
        font: inherit;
        font-size: .82rem;
        font-weight: 600;
        padding: .35rem .9rem;
        border-radius: 9px;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease;
    }
    .chat-contactos-reintentar:hover { background: var(--c-hover); border-color: var(--c-accent); }

    .chat-contacto-mail {
        font-size: .74rem;
        color: var(--c-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------- Adjuntos subiendo, drop y pegado ---------- */
    .chat-drop-overlay {
        position: absolute;
        inset: 0;
        z-index: 30;
        display: none;
        align-items: center;
        justify-content: center;
        border: 2px dashed var(--c-accent);
        border-radius: 16px;
        background: color-mix(in srgb, var(--c-accent) 10%, transparent);
        color: var(--c-accent);
        font-weight: 600;
        pointer-events: none;
    }
    .chat-conv.chat-drop-activo .chat-drop-overlay { display: flex; }

    .chat-burbuja.chat-subiendo { padding: .5rem .55rem; min-width: 230px; }

    .chat-subiendo-cuerpo { display: flex; align-items: center; gap: .6rem; }

    .chat-subiendo-thumb {
        width: 46px;
        height: 46px;
        object-fit: cover;
        border-radius: 9px;
        flex-shrink: 0;
    }

    /* ---------- aviso de la conversación, con deshacer ----------
       Vidrio como el resto de las superficies que flotan sobre contenido (efecto 10 del banco),
       entrada con resorte, y una línea de tiempo que se consume sola para que el aviso no
       desaparezca de golpe. Nada de esto lo daba el toast general. */
    .chat-snack {
        position: absolute;
        left: 50%;
        bottom: 82px;
        z-index: 12;
        display: flex;
        align-items: center;
        gap: .1rem;
        width: max-content;
        min-width: min(300px, 86%);
        max-width: min(92%, 470px);
        padding: .5rem .4rem .5rem .7rem;
        border: 1px solid var(--c-border);
        border-radius: 14px;
        overflow: hidden;
        background: color-mix(in srgb, var(--c-surface) 86%, transparent);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 20px 46px -18px rgba(15, 23, 42, .5), 0 2px 6px -2px rgba(15, 23, 42, .12);
        animation: chatSnackIn .34s var(--spring-soft, cubic-bezier(.2, .8, .2, 1)) both;
    }
    @keyframes chatSnackIn {
        from { opacity: 0; transform: translate(-50%, 16px) scale(.94); }
        to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
    html.theme-dark .chat-snack {
        background: color-mix(in srgb, var(--c-surface-2) 88%, transparent);
        box-shadow: 0 20px 46px -18px rgba(0, 0, 0, .7);
    }

    .chat-snack-ico {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        margin-right: .3rem;
        border-radius: 8px;
        background: rgba(148, 163, 184, .18);
        color: var(--c-muted);
    }

    .chat-snack-texto {
        flex: 1;
        min-width: 0;
        text-wrap: pretty;
        font-size: .82rem;
        line-height: 1.35;
        color: var(--c-text);
    }

    .chat-snack-accion {
        flex: 0 0 auto;
        margin-left: .35rem;
        border: none;
        border-radius: 9px;
        padding: .34rem .6rem;
        background: transparent;
        color: var(--c-accent, #3c78ef);
        font: inherit;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .01em;
        cursor: pointer;
        transition: background .15s ease, transform .16s ease;
    }
        .chat-snack-accion:hover { background: rgba(60, 120, 239, .13); }
        .chat-snack-accion:active { transform: scale(.94); }

    .chat-snack-x {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border: none;
        border-radius: 7px;
        background: transparent;
        color: var(--c-muted);
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
        .chat-snack-x:hover { background: rgba(127, 127, 127, .14); color: var(--c-text); }

    /* La cuenta regresiva: el aviso dice cuánto le queda en vez de irse de golpe. */
    .chat-snack-tiempo {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        transform-origin: left;
        background: linear-gradient(90deg, var(--c-accent, #3c78ef), var(--c-accent-2, #6d5ef0));
        opacity: .55;
        animation: chatSnackTiempo linear both;
    }
    @keyframes chatSnackTiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

    @media (prefers-reduced-motion: reduce) {
        .chat-snack { animation: none; }
        .chat-snack-tiempo { animation: none; opacity: .25; }
    }

    /* ---------- 15: anillo de progreso sobre la foto que se sube ----------
       El banco de efectos lo pone encima de la imagen y no en una barra al costado: lo que
       está subiendo es la foto, así que el progreso pertenece ahí. Y la foto se muestra del
       mismo tamaño con el que va a quedar en el hilo, para que al terminar no salte de una
       miniatura de 46px a la imagen final. */
    .chat-subiendo-cuerpo.con-foto { flex-direction: column; align-items: stretch; gap: .35rem; }

    .chat-subiendo-foto {
        position: relative;
        width: 232px;
        max-width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 10px;
        overflow: hidden;
        background: rgba(255, 255, 255, .12);
        line-height: 0;
    }
        .chat-subiendo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .chat-subiendo-velo {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: rgba(11, 18, 32, .55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        transition: opacity 320ms var(--ease-exit, cubic-bezier(.4, 0, 1, 1));
    }
        .chat-subiendo-velo.listo { opacity: 0; pointer-events: none; }

    .chat-anillo { grid-area: 1 / 1; width: 54px; height: 54px; transform: rotate(-90deg); }
        .chat-anillo circle { fill: none; stroke-width: 4; stroke-linecap: round; }
        .chat-anillo .fondo { stroke: rgba(255, 255, 255, .25); }
        .chat-anillo .frente {
            stroke: #22d3ee;
            stroke-dasharray: 151;
            transition: stroke-dashoffset .2s linear;
            filter: drop-shadow(0 0 5px rgba(34, 211, 238, .7));
        }

    .chat-anillo-pct {
        grid-area: 1 / 1;
        font-size: .74rem;
        font-weight: 700;
        color: #fff;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    /* Con la foto grande, el nombre y el estado van debajo y en chico. */
    .chat-subiendo-cuerpo.con-foto .chat-subiendo-info { flex-direction: row; align-items: center; gap: .4rem; }
    .chat-subiendo-cuerpo.con-foto .chat-subiendo-nombre { font-size: .74rem; }
    .chat-subiendo-cuerpo.con-foto .chat-subiendo-estado { font-size: .7rem; margin-left: auto; }
    .chat-subiendo-cuerpo.con-foto .chat-subiendo-x { position: absolute; top: .3rem; right: .3rem; }

    @media (prefers-reduced-motion: reduce) {
        .chat-anillo .frente { transition: none; }
    }
    .chat-subiendo-ico { font-size: 1.5rem; width: 46px; text-align: center; flex-shrink: 0; }

    .chat-subiendo-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
    .chat-subiendo-nombre {
        font-size: .82rem;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat-subiendo-estado { font-size: .7rem; opacity: .85; display: flex; gap: .4rem; align-items: center; }
    .chat-subiendo-ahorro { opacity: .75; }
    .chat-subiendo-error { font-size: .7rem; color: #fecaca; font-weight: 600; }

    .chat-subiendo-barra {
        display: block;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .28);
        overflow: hidden;
        margin-top: .1rem;
    }
    .chat-subiendo-barra i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #fff;
        transition: width .18s linear;
    }

    .chat-subiendo-x {
        border: 0;
        background: rgba(255, 255, 255, .2);
        color: inherit;
        width: 22px;
        height: 22px;
        border-radius: 7px;
        cursor: pointer;
        flex-shrink: 0;
        line-height: 1;
    }
    .chat-subiendo-x:hover { background: rgba(255, 255, 255, .34); }

    /* ============================================================
       Movimiento del chat.
       Todo lo de abajo es CSS y API del navegador: sin librerias de animacion.
       ============================================================ */

    @supports (animation-timing-function: linear(0, 1)) {
        .chat-layout {
            --spring-snap: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 82.9%, 1);
            --spring-soft: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077 21%, 1.121 23.4%, 1.149 26%, 1.159 28.8%, 1.154 32.1%, 1.129 36.3%, 1.051 46.3%, 1.017 51.6%, 0.991 58.7%, 0.995 76.4%, 1);
        }
    }

    /* ---------- 8: la burbuja sale del input con un resorte ---------- */
    .chat-burbuja-row.propio .chat-burbuja { transform-origin: bottom right; }
    .chat-burbuja-row.otro .chat-burbuja { transform-origin: bottom left; }

    @keyframes chatBubIn {
        from { opacity: 0; transform: translateY(18px) scale(.72); }
        to   { opacity: 1; transform: none; }
    }

    /* ---------- 5: aparicion por scroll, en el compositor y sin JS ---------- */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .chat-mensajes .chat-burbuja-row {
                animation: chatRowReveal linear both;
                animation-timeline: view(block);
                animation-range: entry 2% entry 26%;
            }
        }
    }

    @keyframes chatRowReveal {
        from { opacity: 0; transform: translateY(14px) scale(.97); }
        to   { opacity: 1; transform: none; }
    }

    /* ---------- 9: borde conico mientras el mensaje esta en vuelo ----------
       @property registra el angulo como tipo, que es lo que permite animarlo. */
    /* El @property --chat-ang vive en wwwroot/css/app.css: el parser de Razor lee el tipo
       de su syntax como una etiqueta HTML y rompe la compilacion. */

    .chat-burbuja.chat-subiendo::after,
    .chat-burbuja.en-vuelo::after {
        content: "";
        position: absolute;
        inset: -1.5px;
        border-radius: inherit;
        padding: 1.5px;
        background: conic-gradient(from var(--chat-ang), transparent 0 58%, #22d3ee 82%, #fff 92%, transparent 100%);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        -webkit-mask-composite: xor;
        animation: chatSpinAng 1.15s linear infinite;
        pointer-events: none;
    }

    @keyframes chatSpinAng { to { --chat-ang: 360deg; } }

    /* ---------- 10: glass en las superficies que flotan sobre contenido ----------
       Glassmorphism y no "liquid glass": la refraccion real necesita WebGL, en el
       navegador no existe. */
    .chat-conv-header,
    .chat-input-bar {
        background: color-mix(in srgb, var(--c-surface) 74%, transparent);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
    }

    .chat-panel {
        -webkit-backdrop-filter: blur(20px) saturate(170%);
        backdrop-filter: blur(20px) saturate(170%);
        background: color-mix(in srgb, var(--c-surface) 82%, transparent);
    }

    /* ---------- 6: el panel entra sin flash ---------- */
    @supports (transition-behavior: allow-discrete) {
        .chat-panel {
            transition: opacity var(--t-morph) var(--ease-soft),
                        translate var(--t-morph) var(--spring-snap),
                        display var(--t-morph) allow-discrete;
            opacity: 1;
            translate: 0 0;
        }

        @starting-style {
            .chat-panel { opacity: 0; translate: 24px 0; }
        }
    }

    /* ---------- 12: anillo de presencia ----------
       Ojo: .chat-presencia ya es position:absolute y mide 12x12 en la esquina del avatar.
       NO se le toca el position — hacerlo lo saca del posicionamiento y el flex lo estira. */
    .chat-presencia.en-linea::before {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        background: conic-gradient(from var(--chat-ang), transparent 0 55%, var(--c-online) 78%, transparent 100%);
        mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
        animation: chatSpinAng 1.05s var(--ease-soft) 2;
        pointer-events: none;
    }

    /* ---------- 13: el divisor de no leidos se disuelve ---------- */
    .chat-divisor-noleidos {
        transition: opacity 420ms var(--ease-exit),
                    transform 420ms var(--ease-exit),
                    margin 420ms var(--ease-exit);
    }
    .chat-divisor-noleidos.se-disuelve {
        opacity: 0;
        transform: scaleY(.4);
        margin-block: 0;
    }

    /* ---------- 14: typing con onda ---------- */
    .chat-typing span {
        animation: chatOnda 1.25s ease-in-out infinite !important;
    }
    .chat-typing span:nth-child(2) { animation-delay: .14s !important; }
    .chat-typing span:nth-child(3) { animation-delay: .28s !important; }

    @keyframes chatOnda {
        0%, 60%, 100% { transform: translateY(0) scale(.88); opacity: .5; }
        30%           { transform: translateY(-5px) scale(1.1); opacity: 1; }
    }

    /* ---------- 16: blur-up de las imagenes ----------
       Una animación y no una transición atada a `onload`.

       Con la transición, el desenfoque salía cuando el JS quitaba `data-cargando`, y ese
       atributo lo quitaba el `onload` de la etiqueta. Si la imagen ya estaba en la caché del
       navegador, `onload` podía no dispararse nunca —la imagen ya estaba completa antes de que
       el manejador existiera— y entonces la foto se quedaba **borrosa para siempre**.

       Como animación con `both`, arranca sola al montarse el elemento y termina nítida pase lo
       que pase. El efecto es de presentación: no tiene por qué depender del estado de carga. */
    .chat-img {
        animation: chatBlurUp 560ms var(--ease-soft) both;
    }
    @keyframes chatBlurUp {
        from { filter: blur(14px) saturate(1.25); transform: scale(1.06); }
        to   { filter: none; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        .chat-img { animation: none; }
    }

    /* ---------- 3: morph de la miniatura al visor ---------- */
    ::view-transition-old(chat-foto),
    ::view-transition-new(chat-foto) {
        animation-duration: var(--t-morph);
        animation-timing-function: var(--spring-snap);
    }

    /* ---------- micro-interacciones ---------- */
    .chat-send:active { transform: scale(.88) rotate(-8deg); }
    .chat-accion:active, .chat-header-btn:active { transform: scale(.9); }

    /* ---------- 2: la salida para quien pide menos movimiento ----------
       El chat no respetaba prefers-reduced-motion en ningun lado (el login si). */
    @media (prefers-reduced-motion: reduce) {
        .chat-layout *,
        .chat-layout *::before,
        .chat-layout *::after,
        .chat-lightbox *,
        .chat-modal * {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* ---------- Checks en tres fases, con el trazo dibujandose ---------- */
    .chat-ck {
        width: 15px;
        height: 11px;
        flex: 0 0 auto;
        overflow: visible;
        color: currentColor;
    }
    .chat-ck path {
        fill: none;
        stroke: currentColor;
        stroke-width: 2.1;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 16;
        stroke-dashoffset: 16;
    }
    .chat-ck .ck1 { animation: chatDraw .34s var(--ease-soft) forwards; }
    .chat-ck .ck2 { stroke-dashoffset: 16; }
    .chat-ck.leido .ck2 { animation: chatDraw .34s .1s var(--ease-soft) forwards; }
    .chat-ck.leido { color: #a5f3fc; }

    @keyframes chatDraw { to { stroke-dashoffset: 0; } }

    @media (prefers-reduced-motion: reduce) {
        .chat-ck path { stroke-dashoffset: 0 !important; animation: none !important; }
        .chat-ck .ck2 { stroke-dashoffset: 16 !important; }
        .chat-ck.leido .ck2 { stroke-dashoffset: 0 !important; }
    }

    /* El boton de accion lleva SVG. El color NO puede heredarse: el boton tiene fondo
       --c-surface (blanco en claro) y vive dentro de una burbuja propia cuyo texto es blanco,
       asi que heredar dejaba el icono blanco sobre blanco. Se fija contra su propio fondo. */
    .chat-accion {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--c-text);
        transition: background .15s ease, color .15s ease, transform .18s var(--spring-snap);
    }

    /* Al pasar el mouse el fondo pasa a ser sólido y el icono blanco. Antes el fondo era
       --c-hover, casi transparente, y sobre la burbuja azul el icono se perdía. */
    .chat-accion:hover {
        background: var(--c-accent);
        color: #fff;
        transform: scale(1.08);
    }
    .chat-accion.peligro:hover { background: #ef4444; color: #fff; }
    .chat-accion:focus-visible {
        outline: 2px solid var(--c-accent);
        outline-offset: 2px;
        background: var(--c-accent);
        color: #fff;
    }
    .chat-accion svg { display: block; }

    .chat-txt-eliminado { display: inline-flex; align-items: center; }

    /* ---------- Carga de páginas anteriores ---------- */
    .chat-cargando-mas {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .6rem;
        color: var(--c-muted-txt, var(--c-muted));
        font-size: .8rem;
    }

    .chat-spinner-mini {
        width: 14px;
        height: 14px;
        border: 2px solid var(--c-border);
        border-top-color: var(--c-accent);
        border-radius: 50%;
        animation: chatSpin .7s linear infinite;
    }

    .chat-mensajes-vacio {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }

    /* ---------- Buscador de mensajes ---------- */
    /* Animar hacia "auto" no se puede con height; con grid-template-rows de 0fr a 1fr sí,
       y así el hilo de mensajes se corre suave en lugar de saltar. */
    .chat-buscar-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .28s var(--ease-soft);
        flex: 0 0 auto;
    }
    .chat-buscar-wrap.abierto { grid-template-rows: 1fr; }

    .chat-buscar-inner {
        overflow: hidden;
        min-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        visibility: hidden;
        transition: opacity .2s var(--ease-soft), transform .28s var(--spring-snap), visibility 0s .28s;
    }
    .chat-buscar-wrap.abierto .chat-buscar-inner {
        opacity: 1;
        transform: none;
        visibility: visible;
        transition: opacity .22s .06s var(--ease-soft), transform .3s var(--spring-snap), visibility 0s;
    }

    .chat-buscar {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .75rem;
        border-bottom: 1px solid var(--c-border);
        background: color-mix(in srgb, var(--c-surface) 82%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        backdrop-filter: blur(14px) saturate(160%);
    }

    @media (prefers-reduced-motion: reduce) {
        .chat-buscar-wrap, .chat-buscar-inner { transition: none !important; }
    }

    .chat-buscar-ico { color: var(--c-muted-txt, var(--c-muted)); display: flex; }

    .chat-buscar-input {
        flex: 1;
        border: 0;
        background: transparent;
        color: var(--c-text);
        font: inherit;
        font-size: .9rem;
        outline: none;
        min-width: 0;
    }
    .chat-buscar-input::placeholder { color: var(--c-muted-txt, var(--c-muted)); }

    .chat-buscar-contador {
        font-size: .78rem;
        color: var(--c-muted-txt, var(--c-muted));
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .chat-buscar-nav, .chat-buscar-cerrar {
        width: 26px;
        height: 26px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--c-text);
        cursor: pointer;
        line-height: 1;
        transition: background .15s ease, color .15s ease;
    }
    .chat-buscar-nav:hover:not(:disabled), .chat-buscar-cerrar:hover { background: var(--c-hover); color: var(--c-accent); }
    .chat-buscar-nav:disabled { opacity: .35; cursor: default; }

    .chat-buscar-aviso {
        padding: .35rem .8rem;
        font-size: .74rem;
        color: var(--c-muted-txt, var(--c-muted));
        border-bottom: 1px solid var(--c-border);
        text-align: center;
    }

    /* La coincidencia dentro del texto */
    .chat-hit {
        background: #fde047;
        color: #1f2937;
        border-radius: 3px;
        padding: 0 .1em;
    }
    html.theme-dark .chat-hit { background: #facc15; color: #111827; }

    /* El mensaje al que saltó la búsqueda */
    .chat-burbuja-row.es-coincidencia .chat-burbuja {
        outline: 2px solid var(--c-accent);
        outline-offset: 2px;
        animation: chatLatido .9s var(--ease-soft);
    }

    @keyframes chatLatido {
        0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 55%, transparent); }
        70%  { box-shadow: 0 0 0 10px transparent; }
        100% { box-shadow: 0 0 0 0 transparent; }
    }

    /* ============================================================
       Modo compacto: la misma pantalla dentro del panel acoplado.
       ============================================================ */
    .chat-layout.compacto {
        height: 100%;
        min-height: 0;
        gap: 0;
    }

    .chat-layout.compacto .chat-contactos,
    .chat-layout.compacto .chat-conversacion {
        width: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* En un panel angosto la lista y la conversación se turnan. */
    .chat-layout.compacto.con-seleccion .chat-contactos { display: none; }
    .chat-layout.compacto:not(.con-seleccion) .chat-conversacion { display: none; }
    .chat-layout.compacto .chat-volver { display: flex; }

    /* La cinta de beta no entra en un panel angosto: alcanza con el chip del menú. */
    .chat-layout.compacto .chat-beta-ribbon-clip { display: none; }
    .chat-layout.compacto.con-beta .chat-conv-header { padding-right: 1rem; }

    /* ---------- Tarjeta de pedido dentro de la burbuja ---------- */
    .chat-pedido {
        display: block;
        margin: .3rem 0 .45rem;
        padding: .55rem .7rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .22);
        cursor: pointer;
        transition: background .16s ease, transform .16s var(--spring-snap);
    }
    .chat-pedido:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }

    .chat-burbuja.otro .chat-pedido {
        background: var(--c-surface);
        border-color: var(--c-border);
    }
    .chat-burbuja.otro .chat-pedido:hover { background: var(--c-hover); }

    .chat-pedido-cab { display: flex; align-items: center; gap: .5rem; }
    .chat-pedido-num { font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums; }

    .chat-pedido-estado {
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: .1rem .45rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .25);
    }
    .chat-burbuja.otro .chat-pedido-estado { background: var(--c-accent); color: #fff; }

    .chat-pedido-cliente {
        font-size: .8rem;
        opacity: .9;
        margin-top: .15rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-pedido-pie {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        align-items: center;
        margin-top: .3rem;
        font-size: .72rem;
        opacity: .85;
    }
    .chat-pedido-ir { margin-left: auto; font-weight: 600; }

    .chat-pedido.vacio { opacity: .7; cursor: default; }
    .chat-pedido-sin { font-size: .74rem; margin-left: .4rem; }

    .chat-pedido-skel {
        height: 46px;
        border-radius: 8px;
        background: linear-gradient(90deg, rgba(255,255,255,.12) 25%, rgba(255,255,255,.22) 37%, rgba(255,255,255,.12) 63%);
        background-size: 400% 100%;
        animation: chatShimmer 1.3s infinite;
    }

    /* ---------- Respuestas rapidas ---------- */
    .chat-rapidas-fondo { position: fixed; inset: 0; z-index: 40; }

    .chat-rapidas {
        position: absolute;
        bottom: 68px;
        left: 14px;
        z-index: 41;
        width: min(340px, calc(100% - 28px));
        max-height: 320px;
        overflow-y: auto;
        padding: .45rem;
        border-radius: 14px;
        background: color-mix(in srgb, var(--c-surface) 92%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(170%);
        backdrop-filter: blur(18px) saturate(170%);
        border: 1px solid var(--c-border);
        box-shadow: 0 22px 48px -20px rgba(15, 23, 42, .5);
        animation: chatRapidasIn .22s var(--spring-snap) both;
    }

    @keyframes chatRapidasIn {
        from { opacity: 0; transform: translateY(10px) scale(.97); }
        to   { opacity: 1; transform: none; }
    }

    .chat-rapidas-titulo {
        padding: .3rem .5rem .45rem;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--c-muted-txt, var(--c-muted));
    }

    .chat-rapida {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        text-align: left;
        border: 0;
        background: transparent;
        color: var(--c-text);
        font: inherit;
        font-size: .86rem;
        padding: .5rem .55rem;
        border-radius: 10px;
        cursor: pointer;
    }
    .chat-rapida:hover { background: var(--c-hover); }
    .chat-rapida span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-rapida-x { opacity: 0; color: var(--c-muted); font-size: .75rem; }
    .chat-rapida:hover .chat-rapida-x { opacity: 1; }
    .chat-rapida-x:hover { color: var(--c-badge); }
    .chat-rapida.guardar { color: var(--c-accent); font-weight: 600; }

    .chat-rapidas-btn.activo { color: var(--c-accent); }

    /* ---------- Fijar conversaciones ---------- */
    .chat-fijar {
        border: 0;
        background: transparent;
        color: var(--c-muted);
        cursor: pointer;
        padding: .2rem;
        border-radius: 6px;
        opacity: 0;
        transition: opacity .15s ease, color .15s ease;
        flex: 0 0 auto;
    }
    .chat-contacto:hover .chat-fijar { opacity: .7; }
    .chat-fijar:hover { opacity: 1 !important; color: var(--c-accent); }
    .chat-fijar.activo { opacity: 1; color: var(--c-accent); }

    .chat-grupo-dot.fijado { background: var(--c-accent); }

    /* ---------- La barra de escribir en anchos chicos ----------
       .chat-attach nacio como etiqueta label y no declaraba border: al pasar a boton, los dos
       botones (rayo y clip) aparecian con el borde gris del sistema. */
    .chat-attach {
        border: 0;
        padding: 0;
        font: inherit;
        color: inherit;
    }

    /* El nombre del contacto se partia letra por letra cuando el header se comprimia:
       el bloque de texto necesita poder encogerse (min-width:0) y no cortar palabras. */
    .chat-conv-header-info { min-width: 0; flex: 1 1 auto; }
    .chat-conv-nombre, .chat-conv-estado {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
    }

    /* En un panel angosto el placeholder no debe partirse en dos renglones. */
    .chat-layout.compacto .chat-input { min-height: 40px; }
    .chat-layout.compacto .chat-input::placeholder { white-space: nowrap; text-overflow: ellipsis; }

    /* ============================================================
       Notas de voz y camara
       ============================================================ */

    /* ---------- nota de voz: reproductor propio ---------- */
    .nota-voz {
        display: flex;
        align-items: center;
        gap: .55rem;
        min-width: 232px;
        max-width: 300px;
        padding: .15rem 0;
    }

    .nota-voz-play {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        border: 0;
        border-radius: 50%;
        display: grid;
        place-items: center;
        cursor: pointer;
        background: rgba(255, 255, 255, .24);
        color: #fff;
        transition: background .15s ease, transform .16s var(--spring-snap);
    }
    .nota-voz-play:hover { background: rgba(255, 255, 255, .34); }
    .nota-voz-play:active { transform: scale(.92); }

    .nota-voz:not(.propio) .nota-voz-play { background: var(--c-accent); color: #fff; }

    .nota-voz-centro { flex: 1 1 auto; min-width: 0; }

    .nota-voz-barra {
        position: relative;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .3);
        cursor: pointer;
    }
    .nota-voz:not(.propio) .nota-voz-barra { background: var(--c-border); }

    .nota-voz-progreso {
        position: absolute;
        inset: 0 auto 0 0;
        border-radius: inherit;
        background: #fff;
        transition: width .12s linear;
    }
    .nota-voz:not(.propio) .nota-voz-progreso { background: var(--c-accent); }

    .nota-voz-pulgar {
        position: absolute;
        top: 50%;
        width: 10px;
        height: 10px;
        margin-left: -5px;
        border-radius: 50%;
        background: #fff;
        transform: translateY(-50%);
        box-shadow: 0 1px 4px rgba(15, 23, 42, .4);
        transition: left .12s linear;
    }
    .nota-voz:not(.propio) .nota-voz-pulgar { background: var(--c-accent); }

    .nota-voz-pie {
        display: flex;
        align-items: center;
        gap: .4rem;
        margin-top: .28rem;
        font-size: .68rem;
        opacity: .9;
    }
    .nota-voz-tiempo { font-variant-numeric: tabular-nums; }

    /* Punto que marca que la nota todavia no se escucho. */
    .nota-voz-nueva {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 0 0 rgba(34, 211, 238, .6);
        animation: chatLatePunto 1.6s ease-in-out infinite;
    }

    .nota-voz-vel {
        flex: 0 0 auto;
        border: 0;
        border-radius: 8px;
        padding: .18rem .4rem;
        font: inherit;
        font-size: .68rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
        background: rgba(255, 255, 255, .22);
        color: inherit;
    }
    .nota-voz-vel:hover { background: rgba(255, 255, 255, .34); }
    .nota-voz:not(.propio) .nota-voz-vel { background: var(--c-surface-2); color: var(--c-text); }

    .nota-voz audio { display: none; }

    /* ---------- video en la burbuja ---------- */
    /* El ancho lo fija el contenedor y no el <video>: con fit-content aca y min(260px,100%)
       adentro, el calculo era circular y la caja terminaba tan ancha como la burbuja, con la
       duracion flotando al costado del video en vez de encima. */
    .chat-video { position: relative; width: min(260px, 100%); }
    .chat-video video {
        display: block;
        width: 100%;
        max-height: 340px;
        border-radius: 12px;
        background: #000;
    }
    .chat-video-dur {
        position: absolute;
        right: .45rem;
        bottom: .5rem;
        padding: .05rem .35rem;
        border-radius: 6px;
        background: rgba(11, 18, 32, .78);
        color: #fff;
        font-size: .68rem;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
    }

    /* ---------- barra en modo grabacion ---------- */
    .chat-grabando {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: .55rem;
        min-height: 44px;
        padding: 0 .9rem;
        border-radius: 22px;
        background: var(--c-surface-2);
        border: 1.5px solid var(--c-badge);
    }

    .chat-grabando-punto {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--c-badge);
        animation: chatLatePunto 1.1s ease-in-out infinite;
        flex: 0 0 auto;
    }

    @keyframes chatLatePunto {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%      { opacity: .35; transform: scale(.8); }
    }

    .chat-grabando-tiempo {
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        font-size: .9rem;
        color: var(--c-text);
    }

    .chat-grabando-texto { font-size: .82rem; color: var(--c-muted-txt, var(--c-muted)); }

    .chat-grabando-x {
        margin-left: auto;
        border: 0;
        background: transparent;
        color: var(--c-muted);
        cursor: pointer;
        font-size: .85rem;
        padding: .2rem .35rem;
        border-radius: 7px;
    }
    .chat-grabando-x:hover { background: var(--c-hover); color: var(--c-badge); }

    /* ---------- visor de la camara ---------- */
    .chat-camara {
        position: absolute;
        inset: 0;
        z-index: 45;
        background: #0b1220;
        display: flex;
        flex-direction: column;
        animation: chatCamaraIn .24s var(--ease-soft) both;
    }

    @keyframes chatCamaraIn { from { opacity: 0; } to { opacity: 1; } }

    .chat-camara-video {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        object-fit: cover;
        background: #000;
    }

    .chat-camara-barra {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .9rem 1.2rem 1.2rem;
        background: #0b1220;
    }

    .chat-camara-cancelar {
        border: 0;
        background: transparent;
        color: #cbd5e1;
        font: inherit;
        font-size: .9rem;
        cursor: pointer;
        padding: .5rem .2rem;
        min-width: 72px;
        text-align: left;
    }
    .chat-camara-cancelar:hover { color: #fff; }

    .chat-camara-sep { min-width: 72px; }

    /* El disparador: aro blanco con el circulo adentro, como la camara del telefono. */
    .chat-camara-disparar {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        border: 3px solid #fff;
        background: transparent;
        cursor: pointer;
        display: grid;
        place-items: center;
        padding: 0;
        transition: transform .16s var(--spring-snap);
    }
    .chat-camara-disparar:active { transform: scale(.9); }
    .chat-camara-disparar span {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #fff;
    }

    .chat-camara-error {
        position: absolute;
        top: 1rem;
        left: 1rem;
        right: 1rem;
        padding: .6rem .8rem;
        border-radius: 10px;
        background: rgba(239, 68, 68, .92);
        color: #fff;
        font-size: .85rem;
        text-align: center;
    }
/* ============================================================================
   Panel de chat fijado.

   Con el panel flotando, el chat se apoyaba encima de lo que estabas mirando
   —el caso concreto: el detalle de un pedido quedaba tapado—. Fijado, la pagina
   se corre y los dos entran.

   La clase la pone JS en <html> y no el layout, para que cualquier pantalla le
   haga lugar sin tener que saber que el chat existe. El ancho llega en la
   variable, asi el tirador lo cambia sin recalcular nada.
   ============================================================================ */

html.chat-dock-fijado .main-content {
    padding-right: var(--chat-dock-ancho, 420px);
    transition: padding-right .34s cubic-bezier(.2, .8, .2, 1);
}

/* La barra superior se corre con padding y no con width: .appbar-inner es hijo flex del
   SfAppBar, y el flex del padre le gana a cualquier width que le pongamos. */
html.chat-dock-abierto .appbar-inner {
    padding-right: calc(1rem + var(--chat-dock-ancho, 420px));
}

/* El titulo esta centrado con left:50%, que se mide sobre el padding box y por lo tanto
   ignora ese padding: sin este corrimiento quedaba encima de los botones de la derecha. */
html.chat-dock-abierto .appbar-title {
    left: calc(50% - var(--chat-dock-ancho, 420px) / 2);
    max-width: calc(100% - var(--chat-dock-ancho, 420px) - 420px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sin el panel fijado la transicion tiene que existir igual, o al soltarlo el
   contenido pega un salto en vez de acompanar la animacion del panel. */
.main-content { transition: padding-right .34s cubic-bezier(.2, .8, .2, 1); }
.appbar-inner { transition: padding-right .34s cubic-bezier(.2, .8, .2, 1); }

/* En pantallas chicas el panel ocupa todo el ancho: correr el contenido no
   dejaria nada visible. */
@media (max-width: 900px) {
    html.chat-dock-fijado .main-content { padding-right: 0; }
    html.chat-dock-abierto .appbar-inner { padding-right: .6rem; }
    html.chat-dock-abierto .appbar-title { left: 50%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .main-content, .appbar-inner { transition: none; }
}

/* Accesos de la tarjeta de pedido: estado del pedido y trazabilidad. */
.chat-pedido-acciones {
    display: flex;
    gap: .35rem;
    margin-top: .45rem;
}

.chat-pedido-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 1 1 auto;
    justify-content: center;
    border: 1px solid var(--c-border, #e8edf5);
    border-radius: 8px;
    padding: .3rem .45rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .14s ease;
}

.chat-pedido-btn:hover {
    background: rgba(255, 255, 255, .18);
    border-color: currentColor;
    transform: translateY(-1px);
}

/* En la burbuja del otro la tarjeta se apoya sobre fondo claro, no sobre el acento. */
.chat-burbuja.otro .chat-pedido-btn:hover { background: rgba(60, 120, 239, .1); }

.chat-pedido-btn:active { transform: translateY(0); }

/* Aviso sobre la lista de contactos ("elegi con quien compartir"). Colores solidos: la lista
   cambia de fondo entre temas y una transparencia dejaria el texto al azar. */
.chat-contactos-aviso {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 .6rem .5rem;
    padding: .45rem .6rem;
    border: 1px solid #c7d9ff;
    border-radius: 9px;
    background: #eef4ff;
    color: #1e3a8a;
    font-size: .78rem;
    font-weight: 500;
    animation: chatAvisoIn .26s cubic-bezier(.2, .9, .25, 1) both;
}

.chat-contactos-aviso .e-icons { font-size: 14px; color: #2b56c9; }

@keyframes chatAvisoIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

html.theme-dark .chat-contactos-aviso {
    border-color: #2f4a86;
    background: #16233c;
    color: #dbe6ff;
}
html.theme-dark .chat-contactos-aviso .e-icons { color: #7ea6ff; }

@media (prefers-reduced-motion: reduce) {
    .chat-contactos-aviso { animation: none; }
}

/* ============================================================================
   Que el chat entre en un panel angosto.

   Un flex item no baja de su contenido minimo salvo que se le diga: sin estos
   min-width:0 la barra de escribir fijaba un piso de 466 px y todo el panel
   desbordaba. Vale para el dock y para la ventana aparte.
   ============================================================================ */

.chat-layout,
.chat-layout .chat-conversacion,
.chat-layout .chat-conv,
.chat-layout .chat-mensajes,
.chat-layout .chat-input-bar {
    min-width: 0;
}

/* El textarea es el que tiene que ceder; los botones son de tamano fijo. */
.chat-input-bar .chat-input {
    min-width: 0;
    /* Una URL larga no tiene donde cortar y estiraba la caja. */
    overflow-wrap: anywhere;
}

.chat-input-bar .chat-attach,
.chat-input-bar .chat-send,
.chat-input-bar .chat-rapidas-btn { flex: 0 0 auto; }

/* La burbuja nunca mas ancha que el hilo. */
.chat-mensajes .chat-burbuja { max-width: 100%; }
.chat-burbuja-row { max-width: 100%; }

/* La tarjeta de pedido: los dos accesos se apilan si no entran de a dos. */
.chat-pedido { max-width: 100%; }
.chat-pedido-acciones { flex-wrap: wrap; }
.chat-pedido-btn { min-width: 0; }
.chat-pedido-cliente,
.chat-pedido-btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================================
   Con el panel abierto, lo que cuelga de la barra superior se aparta.

   El desplegable de mensajes y el menu de usuario son position:fixed contra
   right:18px, asi que se abrian por debajo del panel del chat.
   ============================================================================ */

html.chat-dock-abierto .chat-drop,
html.chat-dock-abierto .user-menu,
html.chat-dock-abierto .appbar-drop {
    right: calc(18px + var(--chat-dock-ancho, 420px));
    transition: right .28s cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 900px) {
    /* Ahi el panel ocupa todo el ancho: no hay lugar al costado. */
    html.chat-dock-abierto .chat-drop,
    html.chat-dock-abierto .user-menu,
    html.chat-dock-abierto .appbar-drop { right: 18px; }
}

/* La caja de escribir no scrollea de costado: el texto se parte y listo. */
.chat-input-bar .chat-input { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
    html.chat-dock-abierto .chat-drop,
    html.chat-dock-abierto .user-menu,
    html.chat-dock-abierto .appbar-drop { transition: none; }
}

/* Tarjeta de calculo del Configurador. Comparte casi todo con la del pedido; lo que cambia es
   el codigo de producto, que es el dato por el que se reconoce un calculo. */
.chat-calculo-codigo {
    margin-left: auto;
    padding: .1rem .4rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .22);
    font-size: .68rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}

.chat-burbuja.otro .chat-calculo-codigo {
    background: var(--c-surface-2);
    color: var(--c-text);
}

/* Empresa en la fila del contacto (solo mientras se busca) y conteo de resultados. */
.chat-contacto-empresa {
    font-size: .74rem;
    color: var(--c-accent);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-buscador-conteo {
    padding: 0 .95rem .35rem;
    font-size: .72rem;
    color: var(--c-muted);
}

/* ============================================================================
   Hilo de pedido
   ============================================================================ */

/* Quien habla, arriba de la burbuja. Solo en hilos: en un privado sobra. */
.chat-burbuja-autor {
    display: block;
    margin-bottom: .15rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--c-accent);
    letter-spacing: .01em;
}

/* Nota interna: tiene que gritar que el cliente no la ve. */
/* La marca de "interna" tenía tres señales apiladas —fondo amarillo fuerte, borde punteado y
   una etiqueta marrón con fondo—: cualquiera de las tres alcanza. Queda el acento lateral, que
   es el que se lee de un vistazo sin gritar, y el fondo apenas teñido. */
.chat-burbuja.interna {
    background: rgba(217, 119, 6, .055);
    border: 1px solid rgba(217, 119, 6, .2);
    border-left: 3px solid #d97706;
    color: var(--c-text);
}

/* La propia, apenas más marcada que la ajena; no un amarillo distinto. */
.chat-burbuja.interna.propio { background: rgba(217, 119, 6, .085); }

.chat-burbuja-interna {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin: 0 .45rem .1rem 0;   /* la etiqueta iba pegada al texto: "INTERNAEste cliente..." */
    background: none;
    color: #b45309;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

html.theme-dark .chat-burbuja.interna {
    background: rgba(245, 158, 11, .085);
    border-color: rgba(245, 158, 11, .22);
    border-left-color: #f59e0b;
    color: var(--c-text);
}
html.theme-dark .chat-burbuja.interna.propio { background: rgba(245, 158, 11, .11); }

/* Interruptor del compositor. */
.chat-interna-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 .9rem;
    padding: .3rem .55rem;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--c-muted);
    cursor: pointer;
    user-select: none;
    transition: background .16s ease, color .16s ease;
}

.chat-interna-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.chat-interna-caja {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border: 1.6px solid var(--c-border);
    border-radius: 4px;
    background: var(--c-surface);
    transition: background .16s ease, border-color .16s ease;
}

.chat-interna-check.activa {
    background: #fff7e6;
    color: #92400e;
}
.chat-interna-check.activa .chat-interna-caja {
    background: #d97706;
    border-color: #d97706;
}

html.theme-dark .chat-interna-check.activa {
    background: #3a2a12;
    color: #fbdca4;
}
html.theme-dark .chat-interna-check.activa .chat-interna-caja {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Encabezado del hilo: el pedido en lugar de una persona. */
/* `min-width` y no 0: con la ventana angosta la cinta BETA reserva 124px y los botones
   otros 119, y el nombre se quedaba sin nada. Recortado con puntos suspensivos es legible;
   colapsado a cero, no. */
.chat-hilo-cab { display: flex; flex-direction: column; min-width: 4.5rem; flex: 1 1 auto; overflow: hidden; }
/* Sin esto, un nombre de grupo largo en una ventana angosta —o con el zoom alto— se
   parte letra por letra y el encabezado se estira en vertical. El subtítulo ya se
   protegía; el título no. */
.chat-hilo-num {
    font-weight: 700; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.chat-hilo-cliente {
    font-size: .78rem;
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Un pedido de cinco dígitos con el numeral delante no entra en 40px a este cuerpo: se salía
   por los dos lados. El numeral se fue —la sección ya dice "Pedidos"— y el número entra justo. */
.chat-hilo-ico {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #3c78ef, #6d5ef0);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: -.02em;
    overflow: hidden;
}

/* Fila de un hilo en la lista lateral. */
.chat-hilo-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 10px; cursor: pointer; transition: background .15s ease, transform .12s ease; }
.chat-hilo-item:hover { background: var(--c-hover); transform: translateX(3px); }
.chat-hilo-item.activo { background: var(--c-hover); }
.chat-hilo-item .chat-hilo-ico { width: 36px; height: 36px; border-radius: 10px; font-size: .66rem; }
/* Sin `line-height` propio, las dos líneas heredaban el interlineado del chat y quedaban
   separadas como si fueran dos cosas distintas en lugar de un título y su bajada. */
.chat-hilo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; gap: .05rem; }
.chat-hilo-titulo { font-size: .88rem; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-hilo-ultimo { font-size: .74rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Seguir / dejar de seguir el hilo. */
.chat-hilo-seguir {
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-muted);
    border-radius: 8px;
    padding: .25rem .5rem;
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chat-hilo-seguir:hover { background: var(--c-hover); color: var(--c-text); }
.chat-hilo-seguir.activo { border-color: var(--c-accent); color: var(--c-accent); }

/* La etiqueta en oscuro: fondo claro y texto oscuro, al reves que en claro. */
html.theme-dark .chat-burbuja-interna { background: none; color: #fbbf24; }

/* ============================================================================
   Menciones
   ============================================================================ */

/* El nombre dentro del texto. */
.chat-mencion {
    font-weight: 700;
    padding: 0 .15rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, .22);
}

.chat-burbuja.otro .chat-mencion {
    background: rgba(60, 120, 239, .14);
    color: var(--c-accent);
}

/* Me mencionaron: la burbuja se distingue de un mensaje cualquiera. */
.chat-burbuja.mencionado {
    box-shadow: inset 3px 0 0 0 var(--c-accent), var(--c-shadow);
}

.chat-burbuja.otro.mencionado {
    background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-2));
}

/* Lista de candidatos sobre el compositor. */
.chat-mencion-menu {
    margin: 0 .9rem .4rem;
    max-height: 210px;
    overflow-y: auto;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-surface);
    box-shadow: 0 -10px 30px -14px rgba(15, 23, 42, .4);
    animation: chatMencionIn .16s cubic-bezier(.2, .9, .25, 1) both;
}

@keyframes chatMencionIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.chat-mencion-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .5rem .8rem;
    cursor: pointer;
    transition: background .12s ease;
}

.chat-mencion-item:hover,
.chat-mencion-item.activo { background: var(--c-hover); }

.chat-mencion-nombre { font-size: .9rem; font-weight: 600; color: var(--c-text); }

.chat-mencion-empresa {
    font-size: .74rem;
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .chat-mencion-menu { animation: none; }
}

/* ============================================================================
   Buscar en todo el historial
   ============================================================================ */

.buscar-chat {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.2rem 1rem 3rem;
    color: var(--c-text, #334155);
}

html.theme-dark .buscar-chat { color: #cbd5e1; }

.buscar-cab { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.buscar-cab h2 { margin: 0; font-size: 1.25rem; }
.buscar-cab p { margin: .1rem 0 0; font-size: .85rem; color: #94a3b8; }

.buscar-volver {
    width: 34px; height: 34px; flex: 0 0 auto;
    border: 1px solid #e9edf5; border-radius: 50%;
    background: transparent; color: inherit;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.buscar-volver:hover { background: #eef2fb; }
html.theme-dark .buscar-volver { border-color: rgba(255,255,255,.1); }
html.theme-dark .buscar-volver:hover { background: rgba(255,255,255,.06); }

.buscar-barra {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1rem;
    border: 1.5px solid #e9edf5; border-radius: 14px;
    background: #f8fafc;
}
html.theme-dark .buscar-barra { background: #131c30; border-color: rgba(255,255,255,.08); }

.buscar-lupa { color: #94a3b8; }
.buscar-input {
    flex: 1; min-width: 0;
    border: 0; background: transparent; color: inherit;
    font: inherit; font-size: 1rem; outline: none;
}
.buscar-limpiar {
    border: 0; background: transparent; color: #94a3b8;
    cursor: pointer; font-size: 1rem; padding: 0 .2rem;
}

.buscar-filtros {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
    margin: .9rem 0 1.2rem;
}
.buscar-filtros label { display: flex; flex-direction: column; gap: .2rem; font-size: .76rem; color: #94a3b8; }
.buscar-filtros input {
    border: 1px solid #e9edf5; border-radius: 9px;
    padding: .35rem .55rem; font: inherit; font-size: .85rem;
    background: #fff; color: var(--c-text, #334155);
}
html.theme-dark .buscar-filtros input { background: #0f1729; border-color: rgba(255,255,255,.1); color: #cbd5e1; }

.buscar-quitar-filtros {
    border: 1px solid #e9edf5; border-radius: 9px;
    padding: .38rem .7rem; background: transparent; color: inherit;
    font: inherit; font-size: .8rem; cursor: pointer;
}
.buscar-quitar-filtros:hover { background: #eef2fb; }
html.theme-dark .buscar-quitar-filtros { border-color: rgba(255,255,255,.1); }
html.theme-dark .buscar-quitar-filtros:hover { background: rgba(255,255,255,.06); }

.buscar-conteo { font-size: .8rem; color: #94a3b8; margin-bottom: .6rem; }

.buscar-estado {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 3rem 1rem; color: #94a3b8; font-size: .9rem;
}
.buscar-vacio { flex-direction: column; gap: .8rem; }
.buscar-vacio .e-icons { font-size: 2rem; opacity: .5; }

.buscar-lista { display: flex; flex-direction: column; gap: .6rem; }

.buscar-item {
    padding: .8rem 1rem;
    border: 1px solid #e9edf5; border-radius: 12px;
    background: #fff; cursor: pointer;
    transition: border-color .15s ease, transform .14s ease, box-shadow .2s ease;
}
.buscar-item:hover {
    border-color: #3c78ef;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -16px rgba(15,23,42,.5);
}
html.theme-dark .buscar-item { background: #131c30; border-color: rgba(255,255,255,.08); }
html.theme-dark .buscar-item:hover { border-color: #5b8cff; }

.buscar-item.interna { border-left: 3px solid #d97706; }

.buscar-item-cab {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .35rem; font-size: .78rem;
}
.buscar-donde { font-weight: 700; color: #3c78ef; }
.buscar-donde.pedido {
    background: #3c78ef; color: #fff;
    padding: .05rem .4rem; border-radius: 6px; font-size: .72rem;
}
.buscar-donde-detalle { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.buscar-fecha { margin-left: auto; color: #94a3b8; font-variant-numeric: tabular-nums; }

.buscar-interna {
    background: #92400e; color: #fff;
    padding: .05rem .35rem; border-radius: 5px;
    font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
html.theme-dark .buscar-interna { background: #f59e0b; color: #2a1c07; }

.buscar-texto { font-size: .92rem; line-height: 1.5; }
.buscar-autor { margin-top: .3rem; font-size: .76rem; color: #94a3b8; }

/* ============================================================================
   Responder citando
   ============================================================================ */

/* La cita dentro de la burbuja. */
.chat-cita {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-bottom: .35rem;
    padding: .35rem .55rem;
    border-left: 3px solid currentColor;
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, .16);
    cursor: pointer;
    transition: background .15s ease;
}

.chat-cita:hover { background: rgba(255, 255, 255, .26); }

.chat-burbuja.otro .chat-cita { background: rgba(60, 120, 239, .1); }
.chat-burbuja.otro .chat-cita:hover { background: rgba(60, 120, 239, .18); }

.chat-cita-autor { font-size: .72rem; font-weight: 700; opacity: .95; }
.chat-cita-texto {
    font-size: .8rem;
    opacity: .85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* La tira sobre el compositor. */
.chat-respondiendo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 .9rem .4rem;
    padding: .5rem .7rem;
    border-left: 3px solid var(--c-accent);
    border-radius: 0 10px 10px 0;
    background: var(--c-surface-2);
    animation: chatRespondiendoIn .18s cubic-bezier(.2, .9, .25, 1) both;
}

@keyframes chatRespondiendoIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.chat-respondiendo-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-respondiendo-titulo { font-size: .74rem; font-weight: 700; color: var(--c-accent); }
.chat-respondiendo-texto {
    font-size: .8rem; color: var(--c-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.chat-respondiendo-cerrar {
    flex: 0 0 auto;
    border: 0; background: transparent; color: var(--c-muted);
    font-size: .95rem; cursor: pointer; padding: .1rem .3rem; border-radius: 6px;
}
.chat-respondiendo-cerrar:hover { background: var(--c-hover); color: var(--c-text); }

@media (prefers-reduced-motion: reduce) {
    .chat-respondiendo { animation: none; }
}

/* ============================================================================
   Grupos
   ============================================================================ */

.chat-grupo-ico { background: linear-gradient(135deg, #0d9488, #14b8a6); }

.chat-nuevo-grupo {
    display: inline-flex; align-items: center; gap: .35rem;
    margin: 0 .95rem .5rem;
    padding: .35rem .6rem;
    border: 1px dashed var(--c-border);
    border-radius: 9px;
    background: transparent; color: var(--c-muted);
    font: inherit; font-size: .78rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chat-nuevo-grupo:hover {
    background: var(--c-hover); color: var(--c-accent); border-color: var(--c-accent);
}

/* Modal de creación. */
/* Los modales de grupo viven dentro de .chat-modal-card, que es quien define las variables
   --m-*. Todo lo de acá abajo se apoya en ellas: así el claro y el oscuro salen del mismo
   CSS y no hay un juego de colores que quede sin escribir. */

.grupo-modal { width: 480px; max-width: 100%; display: flex; flex-direction: column; max-height: min(86vh, 720px); }

.grupo-ico-titulo {
    display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 7px;
    background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff;
}

/* El marco de estos dos modales va más apretado que el del resto: son pantallas de trabajo
   con listas, no un cartel de una línea. Acotado a .grupo-modal para no mover los demás. */
.grupo-modal .chat-modal-header { padding: .65rem .9rem; }
.grupo-modal .chat-modal-titulo { font-size: .92rem; gap: .45rem; }
.grupo-modal .chat-modal-actions { padding: .65rem .9rem .85rem; }
.grupo-modal .chat-modal-btn { padding: .45rem .9rem; font-size: .85rem; border-radius: 9px; }

.grupo-cuerpo { padding: .85rem 1rem .15rem; overflow-y: auto; }

.grupo-campo { display: flex; flex-direction: column; gap: .28rem; margin-bottom: .75rem; }
.grupo-etiqueta { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--m-muted); }

.grupo-input {
    width: 100%;
    border: 1.5px solid var(--m-border);
    border-radius: 9px;
    padding: .42rem .65rem;
    font: inherit; font-size: .86rem;
    background: var(--m-surface-2);
    color: var(--m-text);
    outline: none;
    transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
    .grupo-input::placeholder { color: var(--m-muted); }
    .grupo-input:focus {
        background: var(--m-surface);
        border-color: var(--m-accent);
        box-shadow: 0 0 0 4px rgba(60, 120, 239, .16);
    }

/* Buscador con la lupa adentro: el input reserva el lugar del ícono con el padding. */
.grupo-buscador { position: relative; display: flex; align-items: center; }
    .grupo-buscador > svg { position: absolute; left: .58rem; color: var(--m-muted); pointer-events: none; }
.grupo-input-busca { padding-left: 1.85rem; }

.grupo-lista {
    max-height: 190px; overflow-y: auto;
    border: 1px solid var(--m-border);
    border-radius: 10px;
    background: var(--m-surface-2);
    margin-top: .1rem;
}
.grupo-lista-corta { max-height: 140px; }

/* Con poca altura de ventana —o con el zoom alto que agranda todo— las dos listas juntas no
   entran y "Sumar a alguien" queda debajo del pliegue. Ceden altura antes que el resto. */
@media (max-height: 820px) {
    .grupo-lista { max-height: 148px; }
    .grupo-lista-corta { max-height: 104px; }
}

    /* La barra nativa de Windows corta el redondeo y se ve pegada. */
    .grupo-lista::-webkit-scrollbar { width: 9px; }
    .grupo-lista::-webkit-scrollbar-track { background: transparent; }
    .grupo-lista::-webkit-scrollbar-thumb {
        background: var(--m-border); border-radius: 99px;
        border: 2px solid transparent; background-clip: content-box;
    }
        .grupo-lista::-webkit-scrollbar-thumb:hover { background: var(--m-muted); background-clip: content-box; }

.grupo-opcion {
    display: flex; align-items: center; gap: .5rem;
    padding: .3rem .55rem; cursor: pointer;
    line-height: 1.2;
    transition: background .12s ease;
}
    .grupo-opcion:hover { background: rgba(60, 120, 239, .09); }
    .grupo-opcion.elegida { background: rgba(60, 120, 239, .14); }

.grupo-check {
    width: 15px; height: 15px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1.5px solid var(--m-border); border-radius: 5px;
    background: var(--m-surface);
    color: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.grupo-opcion.elegida .grupo-check { background: var(--m-accent); border-color: var(--m-accent); }

.grupo-mas {
    width: 15px; height: 15px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(13, 148, 136, .14); color: #0d9488;
    font-size: .8rem; font-weight: 800; line-height: 1;
}
html.theme-dark .grupo-mas { background: rgba(20, 184, 166, .18); color: #2dd4bf; }

.grupo-opcion-nombre {
    font-size: .84rem; font-weight: 600; color: var(--m-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grupo-opcion-empresa {
    font-size: .72rem; color: var(--m-muted);
    margin-left: auto; padding-left: .5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}

.grupo-vacio { padding: .85rem; text-align: center; color: var(--m-muted); font-size: .8rem; }

/* El nombre del grupo se edita en el mismo lugar donde se lo lee; el botón de guardar
   aparece sólo cuando hay algo distinto que guardar. */
.grupo-renombrar { display: flex; gap: .45rem; align-items: stretch; }
    .grupo-renombrar .grupo-input { flex: 1; min-width: 0; }

.grupo-guardar {
    flex: 0 0 auto;
    padding: 0 .8rem;
    border: none; border-radius: 9px;
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2));
    color: #fff; font: inherit; font-size: .84rem; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px -9px rgba(60, 120, 239, .85);
    animation: grupoGuardarIn .18s ease;
}
    .grupo-guardar:hover { filter: brightness(1.06); }
    .grupo-guardar:disabled { opacity: .5; cursor: default; }
@keyframes grupoGuardarIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }

/* ---- los elegidos, a la vista ---- */
.grupo-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 .35rem; }

.grupo-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    max-width: 100%;
    padding: .16rem .45rem .16rem .55rem;
    border: none; border-radius: 99px;
    background: rgba(60, 120, 239, .13); color: var(--m-accent);
    font: inherit; font-size: .76rem; font-weight: 600;
    cursor: pointer;
    animation: grupoChipIn .16s ease;
    transition: background .15s ease;
}
    .grupo-chip:hover { background: rgba(239, 68, 68, .14); color: #dc2626; }
    .grupo-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.theme-dark .grupo-chip:hover { color: #fca5a5; }

.grupo-chip-x { font-size: .62rem; opacity: .7; }
@keyframes grupoChipIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* El botón de crear avisa que está trabajando en lugar de quedarse quieto. */
.grupo-creando {
    display: inline-block; width: 11px; height: 11px; margin-right: .4rem;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    border-radius: 50%;
    animation: grupoGira .7s linear infinite;
    vertical-align: -1px;
}
@keyframes grupoGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .grupo-creando { animation-duration: 2s; }
    .grupo-chip { animation: none; }
}

/* ---- una fila de integrante ----
   Todo en una línea. Con el nombre arriba y la empresa abajo, cada integrante medía unos
   55px y entraban dos y medio en la caja. */
.grupo-miembro {
    display: flex; align-items: center; gap: .5rem;
    padding: .2rem .45rem .2rem .55rem;
    border-bottom: 1px solid var(--m-border);
    line-height: 1.2;   /* sin esto la línea heredaba el interlineado del chat y estiraba la fila */
}
    .grupo-miembro:last-child { border-bottom: none; }

.grupo-miembro-avatar {
    width: 22px; height: 22px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2));
    color: #fff; font-size: .64rem; font-weight: 700;
}

.grupo-vos {
    flex: 0 0 auto;
    padding: .02rem .3rem;
    border-radius: 5px;
    background: rgba(60, 120, 239, .14); color: var(--m-accent);
    font-size: .64rem; font-weight: 700;
}

.grupo-quitar {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border: none; border-radius: 8px;
    background: transparent; color: var(--m-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
    .grupo-quitar:hover { background: rgba(239, 68, 68, .12); color: #ef4444; }
    .grupo-quitar:disabled { opacity: .4; cursor: default; }

.grupo-error {
    margin: 0 0 .7rem; padding: .4rem .6rem;
    border-radius: 8px;
    background: rgba(239, 68, 68, .1); color: #dc2626;
    font-size: .82rem;
}
html.theme-dark .grupo-error { color: #fca5a5; }

/* ---- pie ---- */
.grupo-acciones { align-items: center; }
.grupo-espaciador { flex: 1; }
.grupo-confirma { flex: 1; font-size: .82rem; font-weight: 600; color: var(--m-text); line-height: 1.25; }
    /* Cerrar el grupo no es lo mismo que irse: el aviso tiene que leerse distinto. */
    .grupo-confirma.grave { color: #dc2626; }
html.theme-dark .grupo-confirma.grave { color: #fca5a5; }

.chat-modal-btn.salir { background: transparent; color: #dc2626; padding-left: 0; }
    .chat-modal-btn.salir:hover { background: rgba(239, 68, 68, .1); padding-left: 1.1rem; }
html.theme-dark .chat-modal-btn.salir { color: #f87171; }

.chat-modal-btn.peligro {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 10px 22px -10px rgba(220, 38, 38, .8);
}
    .chat-modal-btn.peligro:hover { filter: brightness(1.06); transform: translateY(-1px); }
    .chat-modal-btn.peligro:disabled { opacity: .5; cursor: default; box-shadow: none; transform: none; }

/* El botón que abre la lista desde el encabezado: es texto, pero se toca. */
.chat-hilo-cliente.tocable {
    background: none; border: none; padding: 0; font: inherit;
    max-width: 100%; display: block;
    color: var(--c-muted); cursor: pointer; text-align: left;
    border-bottom: 1px dashed transparent;
    transition: color .15s ease, border-color .15s ease;
}
    .chat-hilo-cliente.tocable:hover { color: var(--c-accent, #3c78ef); border-bottom-color: currentColor; }

/* El chip del grupo en los resultados, distinto del de pedido. */
.buscar-donde.grupo { background: #0d9488; color: #fff; padding: .05rem .4rem; border-radius: 6px; font-size: .72rem; }