/*
 * Pantalla de conversaciones de WhatsApp (LkDocs/29 F4.3), portada del prototipo LkChat.
 * - Todo vive dentro de .wa-chat: las variables (--wa-*) no tocan las de LkWeb (--lk-*).
 * - Tema: claro por defecto y oscuro con el de LkWeb (<html data-tema="oscuro">, lk-ui.js).
 * - Puntos de corte: container queries sobre el ancho del CHAT (no de la ventana), porque en LkWeb el chat convive con el menú lateral.
 *   Los valores de cada tramo son los de LkChat (breakpoints.css); las medidas que dependían de vw usan cqw.
 * - Tipografía: la de LkWeb.
 * Generado a partir de tokens.css y breakpoints.css de LkChat; los estilos de cada componente están en su .razor.css.
 */

.wa-chat {
    container: wa-chat / inline-size;
    /* Alto: la ventana menos la barra superior y los márgenes del contenido de LkWeb (.lk-content). */
    height: calc(100dvh - var(--lk-topbar-altura) - 76px);
    min-height: 460px;
    border: 1px solid var(--wa-color-border);
    border-radius: var(--wa-radius-md);
    overflow: hidden;
    font-family: var(--wa-font-body);
    font-size: var(--wa-font-size-sm);
    line-height: 1.45;
    color: var(--wa-color-text);
    background: var(--wa-color-bg);
    -webkit-font-smoothing: antialiased;
}

.wa-chat__vista {
    position: relative;
    height: 100%;
}

.wa-chat *,
.wa-chat *::before,
.wa-chat *::after {
    box-sizing: border-box;
}

.wa-chat h1,
.wa-chat h2,
.wa-chat h3 {
    font-family: var(--wa-font-heading);
    margin: 0;
}

.wa-chat p {
    margin: 0;
}

.wa-chat button,
.wa-chat input,
.wa-chat textarea {
    font: inherit;
    color: inherit;
}

.wa-chat :focus-visible {
    outline: none;
    box-shadow: var(--wa-focus-ring);
}

.wa-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .wa-chat *,
    .wa-chat *::before,
    .wa-chat *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Tokens (tokens.css de LkChat) ---------- */

.wa-chat {
    color-scheme: light;

    /* Superficies */
    --wa-color-bg: #eef4f8;
    --wa-color-surface: #ffffff;
    --wa-color-surface-muted: #f5f8fb;
    --wa-color-surface-hover: #f6fbfd;
    --wa-color-surface-selected: #e3f1f8;
    --wa-color-border: #dce6ed;
    --wa-color-border-soft: #eef3f6;

    /* Texto */
    --wa-color-text: #18273a;
    --wa-color-text-muted: #56697d;
    --wa-color-accent: #1588ba;
    --wa-color-accent-strong: #106a91;
    --wa-color-on-accent: #ffffff;
    --wa-color-danger: #b04652; /* LkStock usa #b84f59; algo más oscuro para AA sobre el fondo del chat (4,92:1) */

    /* Chat */
    --wa-color-chat-bg: #eef4f8;
    --wa-color-chat-dot: #cfdde7;
    --wa-color-bubble-in: #ffffff;
    --wa-color-bubble-out: #d5f2fc;
    --wa-color-bubble-text: #233649;
    --wa-color-bubble-meta: #4f6274;
    /* Avisos sobre una respuesta propia (sin confirmar o sin guardar) */
    --wa-color-warning-text: #7a4b00;
    --wa-color-warning-border: #d99a1e;
    --wa-shadow-bubble: 0 2px 8px #26445a13;

    /* Estados del caso (colores del panel LkStock) */
    --wa-color-status-bot: #45b984;
    --wa-color-status-manual: #f3b63f;
    --wa-color-status-closed: #94a3b1;

    /* Avatar con inicial (como LkStock: círculo celeste y letra azul) y distintivos */
    --wa-color-avatar-bg: #d4e8fa;
    --wa-color-avatar-text: #0f5f83;
    --wa-color-badge-bg: #eef3f6;

    /* Esqueletos provisionales de U2 */
    --wa-color-skeleton: #dce6ed;

    /* Capas: menús y diálogos de confirmación */
    --wa-color-backdrop: #18273a66;
    --wa-shadow-overlay: 0 12px 32px #18273a2e;

    --wa-focus-ring: 0 0 0 3px #1588ba66;
}

:root[data-tema="oscuro"] .wa-chat {
    color-scheme: dark;

    --wa-color-bg: #0d1722;
    --wa-color-surface: #132130;
    --wa-color-surface-muted: #182a3b;
    --wa-color-surface-hover: #1a2e41;
    --wa-color-surface-selected: #1b3a52;
    --wa-color-border: #24384b;
    --wa-color-border-soft: #1c2f41;

    --wa-color-text: #e4ecf3;
    --wa-color-text-muted: #9cb0c3;
    --wa-color-accent: #39b9e7;
    --wa-color-accent-strong: #5cc8f0;
    --wa-color-on-accent: #0d1722;
    --wa-color-danger: #ec8c95;

    --wa-color-chat-bg: #0f1c29;
    --wa-color-chat-dot: #1b2d3e;
    --wa-color-bubble-in: #172a3b;
    --wa-color-bubble-out: #12435a;
    --wa-color-bubble-text: #e4ecf3;
    --wa-color-bubble-meta: #a7bfd1;
    --wa-color-warning-text: #f5c25a;
    --wa-color-warning-border: #d9a441;
    --wa-shadow-bubble: 0 1px 2px #00000040;

    --wa-color-status-bot: #4fc792;
    --wa-color-status-manual: #f5c25a;
    --wa-color-status-closed: #8494a3;

    --wa-color-avatar-bg: #1d4560;
    --wa-color-avatar-text: #bfe7f8;
    --wa-color-badge-bg: #1c2f41;

    --wa-color-skeleton: #24384b;

    --wa-color-backdrop: #000000a6;
    --wa-shadow-overlay: 0 12px 32px #00000080;

    --wa-focus-ring: 0 0 0 3px #39b9e780;
}

.wa-chat {
    /* Tipografía: DM Sans (texto) y Manrope (títulos), como LkStock Soporte */
    --wa-font-body: inherit;
    --wa-font-heading: inherit;
    --wa-font-size-xs: 0.75rem;   /* 12 px */
    --wa-font-size-sm: 0.875rem;  /* 14 px */
    --wa-font-size-md: 1rem;      /* 16 px */
    --wa-font-size-lg: 1.125rem;  /* 18 px */
    --wa-font-size-xl: clamp(1.125rem, 0.9rem + 1vw, 1.375rem);  /* 18–22 px provisional */
    --wa-font-size-eyebrow: 0.69rem;

    /* Espaciado */
    --wa-space-1: 0.25rem;
    --wa-space-2: 0.5rem;
    --wa-space-3: 0.75rem;
    --wa-space-4: 1rem;
    --wa-space-5: 1.25rem;
    --wa-space-6: 1.5rem;

    /* Radios (burbujas como LkStock: esquina de la cola menos redondeada) */
    --wa-radius-sm: 6px;
    --wa-radius-md: 12px;
    --wa-radius-pill: 999px;
    --wa-radius-bubble: 16px;
    --wa-radius-bubble-tail: 6px;

    /* Medidas de la distribución */
    --wa-list-width: clamp(340px, 30cqw, 400px);   /* provisional (pedido: 340–400 px) */
    --wa-header-height: 64px;                     /* provisional (referencia ~64 px) */
    --wa-list-row-min-height: 72px;               /* provisional (referencia ~76 px) */
    --wa-avatar-size: 44px;                       /* provisional (referencia 48 px) */
    --wa-composer-min-height: 52px;               /* provisional */
    --wa-avatar-size-sm: 40px;                    /* cabecera del chat */
    --wa-avatar-size-lg: 72px;                    /* provisional: ficha del cliente */
    --wa-control-height: 36px;                    /* botones e IconButton */
    --wa-icon-size: 20px;
    --wa-icon-stroke: 2;
    --wa-bubble-max-width: min(620px, 82%);       /* LkStock: min(620px, 82%) */
    --wa-chat-padding-inline: clamp(var(--wa-space-3), 4cqw, var(--wa-space-6));
}

/* ---------- Puntos de corte (breakpoints.css de LkChat, como container queries) ---------- */

.wa-chat__vista {
    --wa-shell-columns: var(--wa-list-width) minmax(0, 1fr);
    --wa-list-display-when-chat: flex;
    --wa-chat-display-when-empty: flex;
    --wa-back-display: none;
    --wa-actions-full-display: flex;
    --wa-actions-compact-display: none;
    --wa-header-status-full-display: inline-flex;
    --wa-header-status-compact-display: none;
    --wa-header-waid-display: inline;
    --wa-profile-position: relative;
    --wa-profile-width: 360px;
    --wa-profile-shadow: none;
    --wa-profile-border-left: 1px solid var(--wa-color-border);
    --wa-profile-back-display: none;
    --wa-profile-close-display: inline-flex;
    --wa-chat-view-visibility-with-profile: visible;
}

@container wa-chat (min-width: 760px) and (max-width: 1439.98px) {   /* provisional */
    .wa-chat__vista {
        --wa-header-waid-display: none;
    }
}

@container wa-chat (max-width: 1179.98px) {   /* provisional */
    .wa-chat__vista {
        --wa-actions-full-display: none;
        --wa-actions-compact-display: inline-flex;
        --wa-profile-position: absolute;
        --wa-profile-width: min(380px, 100%);
        --wa-profile-shadow: var(--wa-shadow-overlay);
    }
}

@container wa-chat (max-width: 759.98px) {   /* provisional */
    .wa-chat__vista {
        --wa-shell-columns: minmax(0, 1fr);
        --wa-list-display-when-chat: none;
        --wa-chat-display-when-empty: none;
        --wa-back-display: inline-flex;
        --wa-actions-full-display: none;
        --wa-actions-compact-display: inline-flex;
        --wa-header-status-full-display: none;
        --wa-header-status-compact-display: inline-flex;
        --wa-header-waid-display: none;
        --wa-header-height: 56px;              /* provisional (referencia móvil) */
        --wa-bubble-max-width: 86%;            /* pedido: 85–88 % */
        --wa-chat-padding-inline: var(--wa-space-3);
        --wa-profile-width: 100%;
        --wa-profile-shadow: none;
        --wa-profile-border-left: 0;
        --wa-profile-back-display: inline-flex;
        --wa-profile-close-display: none;
        --wa-chat-view-visibility-with-profile: hidden;
    }
}