/*
 * theme-tokens.css
 * Fuente única de verdad para colores/espaciados de tema (claro + oscuro).
 * Se carga ANTES que styles.css / app-shell.css / chats.css para que
 * todos puedan consumir estas variables.
 */

:root {
    --wa-bg-app: #f0f2f5;
    --wa-bg-panel: #ffffff;
    --wa-bg-panel-hover: #f5f6f6;
    --wa-bg-panel-active: #f0f2f5;
    --wa-bg-conversation: #efeae2;
    --wa-bg-input: #ffffff;
    --wa-bg-input-field: #ffffff;

    --wa-bubble-out: #d9fdd3;
    --wa-bubble-out-hover: #cdf4c8;
    --wa-bubble-in: #ffffff;
    --wa-bubble-in-hover: #f7f7f7;
    --wa-bubble-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);

    --wa-audio-wave-in: var(--wa-text-secondary);
    --wa-audio-wave-out: var(--wa-text-secondary);
    --wa-audio-wave-opacity: 0.55;

    --wa-text-primary: #111b21;
    --wa-text-secondary: #667781;
    --wa-text-on-accent: #ffffff;

    --wa-accent: #00a884;
    --wa-accent-hover: #06cf9c;
    --wa-accent-strong: #008069;
    --wa-brand-green: #25d366;

    --wa-border: #e9edef;
    --wa-border-strong: #d1d7db;

    --wa-unread-badge-bg: #25d366;

    --wa-font-family: "Roboto Variable", Roboto, "Helvetica Neue", Helvetica, sans-serif;
    --wa-font-message: var(--wa-font-family);

    /* Chat message bubbles (text) */
    --chat-message-font-size: 14px;
    --chat-message-line-height: 16px;
    --chat-bubble-max-width: 80%;
    --wa-unread-badge-text: #ffffff;
    --wa-danger: #ea0038;
    --wa-danger-hover: #c40030;

    --wa-scrollbar-thumb: #d1d7db;
    --wa-scrollbar-thumb-hover: #b0b7ba;

    --wa-overlay-scrim: rgba(11, 20, 26, 0.55);
    --wa-media-loading-fg: var(--wa-icon);
    --wa-media-loading-fg-out: #3b4a54;
    --wa-media-loading-fg-in: var(--wa-icon);
    --wa-shadow-menu: 0 4px 12px rgba(11, 20, 26, 0.18), 0 1px 3px rgba(11, 20, 26, 0.12);
    --wa-shadow-panel: 0 1px 2px rgba(11, 20, 26, 0.06);

    --wa-icon: #54656f;
    --wa-icon-hover: #3b4a54;
    --wa-icon-on-accent: #ffffff;

    --wa-bg-elevated: #ffffff;
    --wa-bg-card: #ffffff;
    --wa-text-link: #027eb5;

    --wa-search-mark-bg: #fff3cd;
    --wa-search-result-bg: var(--wa-bg-panel-active);

    --wa-chat-header-bg: var(--wa-accent-strong);
    --wa-chat-header-text: #ffffff;
    --wa-chat-header-subtext: rgba(255, 255, 255, 0.9);
    --wa-chat-header-border: rgba(255, 255, 255, 0.2);
    --wa-chat-header-presence: #7ff0c8;
    --wa-chat-header-btn-bg: rgba(255, 255, 255, 0.2);
    --wa-chat-header-btn-border: rgba(255, 255, 255, 0.5);
    --wa-chat-header-btn-text: #ffffff;

    --wa-chat-chrome-shadow-down: 0 2px 6px rgba(11, 20, 26, 0.08);
    --wa-chat-chrome-shadow-up: 0 -2px 6px rgba(11, 20, 26, 0.08);

    --wa-transition-fast: 120ms ease;
    --wa-transition-base: 200ms ease;

    --app-border: var(--wa-border);
    --app-bg: var(--wa-bg-app);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --wa-bg-app: #111b21;
    --wa-bg-panel: #111b21;
    --wa-bg-panel-hover: #202c33;
    --wa-bg-panel-active: #2a3942;
    --wa-bg-conversation: #0b141a;
    --wa-bg-input: #202c33;
    --wa-bg-input-field: #2a3942;

    --wa-bubble-out: #005c4b;
    --wa-bubble-out-hover: #026a58;
    --wa-bubble-in: #202c33;
    --wa-bubble-in-hover: #253440;
    --wa-bubble-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.3);

    --wa-audio-wave-in: rgb(100, 107, 111);
    --wa-audio-wave-out: rgb(93, 139, 129);
    --wa-audio-wave-opacity: 1;

    --wa-text-primary: #e9edef;
    --wa-text-secondary: #8696a0;
    --wa-text-on-accent: #111b21;

    --wa-accent: #00a884;
    --wa-accent-hover: #06cf9c;
    --wa-accent-strong: #06cf9c;
    --wa-brand-green: #25d366;

    --wa-border: #222d34;
    --wa-border-strong: #2a3942;

    --wa-unread-badge-bg: #00a884;
    --wa-unread-badge-text: #111b21;
    --wa-danger: #f15c6d;
    --wa-danger-hover: #ff7b8a;

    --wa-scrollbar-thumb: #374045;
    --wa-scrollbar-thumb-hover: #4a5458;

    --wa-overlay-scrim: rgba(0, 0, 0, 0.65);
    --wa-media-loading-fg: var(--wa-icon);
    --wa-media-loading-fg-out: #d1e8e2;
    --wa-media-loading-fg-in: var(--wa-icon);
    --wa-shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --wa-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.2);

    --wa-icon: #aebac1;
    --wa-icon-hover: #e9edef;
    --wa-icon-on-accent: #ffffff;

    --wa-bg-elevated: #202c33;
    --wa-bg-card: #1f2c33;
    --wa-text-link: #53bdeb;

    --wa-search-mark-bg: #3d4f2f;
    --wa-search-result-bg: var(--wa-bg-panel-active);

    --wa-chat-header-bg: var(--wa-bg-elevated);
    --wa-chat-header-text: var(--wa-text-primary);
    --wa-chat-header-subtext: var(--wa-text-secondary);
    --wa-chat-header-border: var(--wa-border);
    --wa-chat-header-presence: var(--wa-accent-hover);
    --wa-chat-header-btn-bg: var(--wa-bg-panel-active);
    --wa-chat-header-btn-border: var(--wa-border-strong);
    --wa-chat-header-btn-text: var(--wa-text-primary);

    --wa-chat-chrome-shadow-down: 0 2px 8px rgba(0, 0, 0, 0.28);
    --wa-chat-chrome-shadow-up: 0 -2px 8px rgba(0, 0, 0, 0.28);

    --app-green-light: rgba(0, 168, 132, 0.2);
    --app-green-dark: #06cf9c;

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --wa-bg-app: #111b21;
        --wa-bg-panel: #111b21;
        --wa-bg-panel-hover: #202c33;
        --wa-bg-panel-active: #2a3942;
        --wa-bg-conversation: #0b141a;
        --wa-bg-input: #202c33;
        --wa-bg-input-field: #2a3942;
        --wa-bubble-out: #005c4b;
        --wa-bubble-out-hover: #026a58;
        --wa-bubble-in: #202c33;
        --wa-bubble-in-hover: #253440;
        --wa-text-primary: #e9edef;
        --wa-text-secondary: #8696a0;
        --wa-text-on-accent: #111b21;
        --wa-border: #222d34;
        --wa-border-strong: #2a3942;
        --wa-unread-badge-bg: #00a884;
        --wa-unread-badge-text: #111b21;
        --wa-scrollbar-thumb: #374045;
        --wa-scrollbar-thumb-hover: #4a5458;
        --wa-icon: #aebac1;
        --wa-icon-hover: #e9edef;
        --wa-bg-elevated: #202c33;
        --wa-bg-card: #1f2c33;
        --wa-text-link: #53bdeb;
        --wa-chat-header-bg: var(--wa-bg-elevated);
        --wa-chat-header-text: var(--wa-text-primary);
        --wa-chat-header-subtext: var(--wa-text-secondary);
        --wa-chat-header-border: var(--wa-border);
        --wa-chat-header-presence: var(--wa-accent-hover);
        --wa-chat-header-btn-bg: var(--wa-bg-panel-active);
        --wa-chat-header-btn-border: var(--wa-border-strong);
        --wa-chat-header-btn-text: var(--wa-text-primary);
        --wa-audio-wave-in: rgb(100, 107, 111);
        --wa-audio-wave-out: rgb(93, 139, 129);
        --wa-audio-wave-opacity: 1;
        color-scheme: dark;
    }
}

html, body {
    background: var(--wa-bg-app);
    color: var(--wa-text-primary);
}

* {
    scrollbar-color: var(--wa-scrollbar-thumb) transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-thumb {
    background: var(--wa-scrollbar-thumb);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--wa-scrollbar-thumb-hover);
}
*::-webkit-scrollbar-track {
    background: transparent;
}