/* ============================================================================
   palette-calm.css — Paleta "calm" do painel (cliente, atendente e admin).
   Liga com UI_COLOR_PALETTE=calm no .env (UiPalette). Só é carregado no calm,
   como ÚLTIMO CSS do <head>; o <html> ganha data-palette="calm".

   Só sobrescreve VARIÁVEIS (os CSS de página já usam tokens). Os seletores
   :root[data-palette="calm"] têm especificidade maior que os :root e
   :root[data-theme="dark"] do style.css/ui-kit/client-shell/dashboard/chats,
   então vencem mesmo quando um CSS de página carrega depois, no <body>.

   White-label: com cor de branding PERSONALIZADA o <html> traz
   data-brand="custom" e a primária NÃO é trocada aqui (fica a do cliente no
   claro; no escuro o UiPalette injeta a versão suavizada). Com a cor padrão
   (#FF7E01) a primária vira a terracota/pêssego abaixo.

   HEX: proposta do P-R (scratchpad/palette/PROPOSTA.md), contraste AA conferido.
   Valores marcados "derivado" não estão na proposta: são os equivalentes
   quentes dos tokens atuais, na mesma luminância.
   ============================================================================ */

/* ── CLARO ─────────────────────────────────────────────────────────────── */
:root[data-palette="calm"] {
    /* Tokens da proposta (P-R), para quem quiser usar direto */
    --pal-primary: #A35628;
    --pal-primary-rgb: 163, 86, 40;
    --pal-primary-hover: #8F4B23;
    --pal-primary-active: #7D411E;
    --pal-primary-soft: #FCF3EC;
    --pal-on-primary: #FFFFFF;
    --pal-danger: #AC3F3A;
    --pal-danger-rgb: 172, 63, 58;
    --pal-danger-soft: #FBEDEC;
    --pal-warning: #8A5A12;
    --pal-warning-rgb: 138, 90, 18;
    --pal-warning-soft: #FBF2E0;
    --pal-success: #36724F;
    --pal-success-rgb: 54, 114, 79;
    --pal-success-soft: #EAF4EE;
    --pal-info: #3C6A8E;
    --pal-info-rgb: 60, 106, 142;
    --pal-info-soft: #E9F0F7;

    /* Semânticas do ui-kit (nomes reais: --ui-ok / --ui-warn) */
    --ui-danger: #AC3F3A;
    --ui-danger-rgb: 172, 63, 58;
    --ui-danger-soft: #FBEDEC;
    --ui-warn: #8A5A12;
    --ui-warn-rgb: 138, 90, 18;
    --ui-warn-soft: #FBF2E0;
    --ui-ok: #36724F;
    --ui-ok-rgb: 54, 114, 79;
    --ui-ok-soft: #EAF4EE;
    --ui-info: #3C6A8E;
    --ui-info-rgb: 60, 106, 142;
    --ui-info-soft: #E9F0F7;

    /* Texto sobre botão colorido (P-I2 usa var(--ui-on-*, #fff)) */
    --ui-on-primary: #FFFFFF;
    --ui-on-danger: #FFFFFF;
    --ui-on-success: #FFFFFF;
    --ui-on-warn: #FFFFFF;
    --ui-on-warning: #FFFFFF; /* nome usado nos CSS de página (P-I2) */
    --ui-on-info: #FFFFFF;

    /* Vermelhos e laranja de texto que eram HEX fixo (P-I2, TOKENS.md v2) */
    --ui-danger-dark: #AC3F3A;
    --ui-danger-dark-rgb: 172, 63, 58;
    --ui-error: #AC3F3A;
    --ui-error-rgb: 172, 63, 58;
    --ui-error-ink: #8F332F;
    --ui-primary-ink: #8F4B23;

    /* Setas de variação do dashboard */
    --dsh-up: #36724F;
    --dsh-down: #AC3F3A;
}

/* Primária: só quando a marca é a padrão (cor personalizada fica a do cliente) */
:root[data-palette="calm"]:not([data-brand="custom"]) {
    --primary: #A35628;
    --primary-rgb: 163, 86, 40;
    --primary-hover: #8F4B23;
    --primary-subtle: #FCF3EC;
    --ui-primary-hover: #8F4B23;
    --ui-primary-active: #7D411E;
    --ui-primary-soft: #FCF3EC;
}

/* ── ESCURO: grafite quente, cores dessaturadas ────────────────────────── */
:root[data-palette="calm"][data-theme="dark"] {
    --pal-bg: #161412;
    --pal-bg-rgb: 22, 20, 18;
    --pal-card: #1E1B18;
    --pal-card-elevated: #26231F;
    --pal-border: #3A342E;
    --pal-text: #E7DFD5;
    --pal-text-secondary: #A69C91;
    --pal-primary: #E4A57A;
    --pal-primary-rgb: 228, 165, 122;
    --pal-primary-hover: #EDB78F;
    --pal-primary-active: #D8966A;
    --pal-primary-soft: #33271E;
    --pal-on-primary: #231912;
    --pal-danger: #E8958C;
    --pal-danger-rgb: 232, 149, 140;
    --pal-danger-soft: #3A2220;
    --pal-warning: #E3BD72;
    --pal-warning-rgb: 227, 189, 114;
    --pal-warning-soft: #352B19;
    --pal-success: #8DC4A0;
    --pal-success-rgb: 141, 196, 160;
    --pal-success-soft: #1F2E25;
    --pal-info: #93B8D6;
    --pal-info-rgb: 147, 184, 214;
    --pal-info-soft: #1E2933;

    /* Semânticas */
    --ui-danger: #E8958C;
    --ui-danger-rgb: 232, 149, 140;
    --ui-danger-soft: #3A2220;
    --ui-warn: #E3BD72;
    --ui-warn-rgb: 227, 189, 114;
    --ui-warn-soft: #352B19;
    --ui-ok: #8DC4A0;
    --ui-ok-rgb: 141, 196, 160;
    --ui-ok-soft: #1F2E25;
    --ui-info: #93B8D6;
    --ui-info-rgb: 147, 184, 214;
    --ui-info-soft: #1E2933;

    /* Botões coloridos claros no escuro pedem texto ESCURO (P-R) */
    --ui-on-danger: #231912;
    --ui-on-success: #231912;
    --ui-on-warn: #231912;
    --ui-on-warning: #231912;
    --ui-on-info: #231912;

    /* Vermelhos e laranja de texto no escuro: coral e pêssego (P-R) */
    --ui-danger-dark: #E8958C;
    --ui-danger-dark-rgb: 232, 149, 140;
    --ui-error: #E8958C;
    --ui-error-rgb: 232, 149, 140;
    --ui-error-ink: #E8958C;
    --ui-primary-ink: #E4A57A;

    --dsh-up: #8DC4A0;
    --dsh-down: #E8958C;

    /* Fundos: página < trilho < shell < card < elevado */
    --body-bg: #161412;
    --dsh-page-bg: #161412;
    /* Fundo de conteúdo de cada página (no default todos valem #0A0C10) */
    --apd-page-bg: #161412;
    --apt-page-bg: #161412;
    --cag-page-bg: #161412;
    --dev-page-bg: #161412;
    --ig-page-bg: #161412;
    --iga-page-bg: #161412;
    --igb-page-bg: #161412;
    --igbc-page-bg: #161412;
    --igbr-page-bg: #161412;
    --igc-page-bg: #161412;
    --igw-page-bg: #161412;
    --igx-page-bg: #161412;
    --inb-page-bg: #161412;
    --int-page-bg: #161412;
    --sc-page-bg: #161412;
    --wm-page-bg: #161412;
    --cls-rail-bg: #181613;          /* derivado */
    --cls-bg: #1B1916;               /* derivado */
    --cls-panel-bg: #1B1916;         /* derivado */
    --cls-header-bg: #1B1916;        /* derivado */
    --ui-card-bg: #1E1B18;
    --dsh-card-bg: #1E1B18;
    --ui-surface: #26231F;
    --dsh-surface-2: #26231F;
    --ui-field-bg: #191714;          /* derivado */
    --ui-toast-bg: rgba(30, 27, 24, 0.72);

    /* Conversas (chats.css) */
    --wa-app-bg: #161412;
    --wa-mobile-pane-bg: #161412;
    --wa-panel-bg-2: #26231F;
    --wa-foot-bg: #1B1916;           /* derivado */
    --wa-menu-bg: #26231F;

    /* Texto: off-white quente em vez de branco puro */
    --ui-ink: #E7DFD5;
    --cls-ink: #E7DFD5;
    --dsh-ink: #E7DFD5;
    --ui-ink-2: #CBC2B7;             /* derivado */
    --cls-ink-2: #B3A99E;            /* derivado */
    --dsh-ink-2: #CBC2B7;            /* derivado */
    --ui-muted: #A69C91;
    --dsh-muted: #A69C91;
    --cls-muted: #8C8278;            /* derivado */
    --ui-muted-2: #7A7067;           /* derivado */

    /* Bordas: divisória decorativa; contorno de campo precisa de 3:1 */
    --ui-border: #3A342E;
    --ui-input-border: #6B6157;
    --ui-field-line: #6B6157;
}

:root[data-palette="calm"][data-theme="dark"]:not([data-brand="custom"]) {
    --primary: #E4A57A;
    --primary-rgb: 228, 165, 122;
    --primary-hover: #EDB78F;
    --primary-subtle: #33271E;
    --ui-primary-hover: #EDB78F;
    --ui-primary-active: #D8966A;
    --ui-primary-soft: #33271E;
    --ui-on-primary: #231912;
    --cls-on-accent: #231912;
}

/* Rede de segurança: página que ainda pinta o fundo do conteúdo com HEX fixo
   no escuro (ex.: telegram.css) também fica no grafite quente. */
:root[data-palette="calm"][data-theme="dark"] .cls-shell .cl-main,
:root[data-palette="calm"][data-theme="dark"] .cls-shell .cl-main-inner {
    background: var(--body-bg);
}

/* Avatar com inicial (Avatar::render, SVG com gradiente da marca): segue a
   primária calm e, no escuro, a inicial usa o texto escuro sobre o pêssego. */
:root[data-palette="calm"]:not([data-brand="custom"]) .av-s0 { stop-color: var(--primary); }
:root[data-palette="calm"]:not([data-brand="custom"]) .av-s1 { stop-color: var(--primary-hover); }
:root[data-palette="calm"] .av-ini { fill: var(--ui-on-primary, #fff); }

/* Avatares com inicial (listas de conversas, cabeçalho e painel do contato):
   tons terrosos e ardósia, todos com contraste >= 4.5:1 para a inicial branca
   e >= 3:1 contra o fundo escuro. Tira o roxo, o rosa e o carmim saturados. */
:root[data-palette="calm"] {
    --ui-av-0: #3F7A72;  --ui-av-1: #9C6243;  --ui-av-2: #557694;  --ui-av-3: #A0584F;
    --ui-av-4: #6E6A8F;  --ui-av-5: #8E5E6B;  --ui-av-6: #4F7A5F;  --ui-av-7: #8A6A2E;
    --ui-av-8: #5E6A92;  --ui-av-9: #4F7A5F;  --ui-av-10: #A0584F; --ui-av-11: #557694;
}

/* Conversas no ESCURO (revisão do P-R sobre a captura do dono): a bolha enviada
   deixa de ser um bloco claro de pêssego e vira terracota escuro com texto
   claro (como o verde escuro do WhatsApp); o pêssego fica só nos detalhes.
   Superfícies que ainda eram azuladas passam para o grafite quente. */
:root[data-palette="calm"][data-theme="dark"] {
    --wa-sent-bg: #4A3426;
    --wa-sent-ink: #F1E6DA;      /* 9.43:1 */
    --wa-recv-bg: #26231F;
    --wa-recv-ink: #E7DFD5;      /* 11.85:1 */
    --wa-soft: #26231F;
    --wa-ink-strong: #EFE8DF;
    --wa-track: #3A342E;
    --wa-indigo: #93B8D6;
    --wa-indigo-2: #7FA3C2;
}
:root[data-palette="calm"][data-theme="dark"] .wa-msg-sent { border: 1px solid rgba(228, 165, 122, .28); }
:root[data-palette="calm"][data-theme="dark"] .wa-msg-sent .wa-msg-time { color: #C9B3A1; } /* 5.77:1 */
:root[data-palette="calm"][data-theme="dark"] .wa-msg-received .wa-msg-time { color: #A69C91; } /* 5.80:1 */

/* ── Construtor de fluxo (C2): cores por categoria de bloco ────────────────
   chatbot-builder.css usa verde, azul, âmbar e violeta saturados (tile do nó,
   dica do painel, saídas Sim/Não). No calm viram os tons da paleta; o violeta
   da categoria Ação é derivado (mesma luminância do info). Encerrar já segue
   --ui-danger / --ui-danger-dark. */
:root[data-palette="calm"] {
    --fb-cat-trigger: #3A342E;  --fb-cat-trigger-rgb: 58, 52, 46;     /* derivado */
    --fb-cat-message: #36724F;  --fb-cat-message-rgb: 54, 114, 79;
    --fb-cat-ask:     #3C6A8E;  --fb-cat-ask-rgb:     60, 106, 142;
    --fb-cat-logic:   #8A5A12;  --fb-cat-logic-rgb:   138, 90, 18;
    --fb-cat-action:  #685C8E;  --fb-cat-action-rgb:  104, 92, 142;   /* derivado */
}
:root[data-palette="calm"][data-theme="dark"] {
    --fb-cat-trigger: #E7DFD5;  --fb-cat-trigger-rgb: 231, 223, 213;
    --fb-cat-message: #8DC4A0;  --fb-cat-message-rgb: 141, 196, 160;
    --fb-cat-ask:     #93B8D6;  --fb-cat-ask-rgb:     147, 184, 214;
    --fb-cat-logic:   #E3BD72;  --fb-cat-logic-rgb:   227, 189, 114;
    --fb-cat-action:  #B3A6D3;  --fb-cat-action-rgb:  179, 166, 211;  /* derivado */
}

/* ── Conversas: legado com cor fixa (C1, captura do dono no escuro) ──────── */
/* Botões com fundo da primária e texto #fff no style= inline: no escuro calm a
   primária é pêssego claro e pede o texto escuro (--ui-on-primary). */
:root[data-palette="calm"] [style*="background:var(--wa-accent)"][style*="color:#fff"],
:root[data-palette="calm"] [style*="background: var(--wa-accent)"][style*="color: #fff"],
:root[data-palette="calm"] [style*="background:var(--primary)"][style*="color:#fff"],
:root[data-palette="calm"] [style*="background:var(--wa-accent)"][style*="color:#fff"] [style*="color:#fff"] {
    color: var(--ui-on-primary, #fff) !important;
}

/* Card de reunião (painel do contato) e o menu "..." dele: tokens, não o
   azul-petróleo fixo nem o menu branco do style.css. */
:root[data-palette="calm"] .wa-cp-meeting-card { background: var(--wa-panel-bg-2); color: var(--wa-ink); }
:root[data-palette="calm"] .wa-cp-meeting-card:hover { background: var(--wa-hover-2); }
:root[data-palette="calm"] .wa-cp-meeting-card .dropdown-menu {
    background: var(--wa-menu-bg) !important;
    border: 1px solid var(--wa-line) !important;
    box-shadow: none !important;
}
:root[data-palette="calm"] .wa-cp-meeting-card .dropdown-item {
    color: var(--wa-ink) !important;
    background: transparent !important;
}
:root[data-palette="calm"] .wa-cp-meeting-card .dropdown-item:hover,
:root[data-palette="calm"] .wa-cp-meeting-card .dropdown-item:focus {
    background: var(--wa-hover-2) !important;
    color: var(--wa-ink) !important;
}
:root[data-palette="calm"] .wa-cp-meeting-card .dropdown-item[onclick^="cpCancelMeeting"] { color: var(--ui-danger) !important; }
:root[data-palette="calm"] .wa-cp-meeting-card .dropdown-item[onclick^="cpCancelMeeting"]:hover,
:root[data-palette="calm"] .wa-cp-meeting-card .dropdown-item[onclick^="cpCancelMeeting"]:focus {
    background: var(--ui-danger-soft) !important;
    color: var(--ui-danger) !important;
}

/* Menus "Ferramentas" e "Ações do atendimento": quadradinhos dos ícones nos
   tons da paleta (soft + ícone). Agendar não é perigo: âmbar, não vermelho. */
:root[data-palette="calm"] .wa-mobile-sheet-icon[style*="--primary-rgb"] {
    background: rgba(var(--primary-rgb), .14) !important;
    color: var(--primary) !important;
}
:root[data-palette="calm"] .wa-mobile-sheet-icon[style*="#6366F1"],
:root[data-palette="calm"] .wa-mobile-sheet-icon[style*="#8b5cf6"] {
    background: var(--pal-info-soft) !important;
    color: var(--pal-info) !important;
}
:root[data-palette="calm"] .wa-mobile-sheet-icon[style*="#14b8a6"],
:root[data-palette="calm"] .wa-mobile-sheet-icon[style*="#5DA399"] {
    background: var(--pal-success-soft) !important;
    color: var(--pal-success) !important;
}
:root[data-palette="calm"] .wa-mobile-sheet-icon[style*="#ef4444"] {
    background: var(--pal-warning-soft) !important;
    color: var(--pal-warning) !important;
}