/* Temas WeAds Whats — B Gradiente sutil (claro) e C Noite WeAds (escuro).
   Só variáveis --t-*. O layout liga em tema-base.css + tema-foguete.css.
   Visto de lida: --tick-lida em app.css (#53BDEB), temas não sobrescrevem. */

:root,
html[data-tema="claro"] {
  --t-name: "Gradiente sutil";
  --t-primary: #1F5DA2;
  --t-primary2: #163A70;
  --t-accent: #1F5DA2;
  --t-header-bg: #1F5DA2;
  /* Mockup B: diagonal navy→azul; --t-header-edge = canto superior esquerdo (overscroll). */
  --t-header-edge: #050445;
  --t-header-gradient: linear-gradient(135deg, #050445 0%, #1F5DA2 55%, #2A7BC4 100%);
  --t-header-fg: #FFFFFF;
  --t-header-icon: #FFFFFF;
  --t-header-sub: rgba(255, 255, 255, .78);
  --t-header-border: transparent;
  --t-avatar-ring: rgba(255, 255, 255, .28);
  --t-status-bg: #1F5DA2;
  --t-status-fg: #FFFFFF;
  --t-list-bg: #FFFFFF;
  --t-panel: #F7F9FC;
  --t-search-bg: #EEF2F7;
  --t-border: #E2E8F0;
  --t-text: #152033;
  --t-muted: #5C6B7A;
  --t-avatar-bg: #1F5DA2;
  --t-avatar-fg: #fff;
  --t-unread: #1F5DA2;
  --t-badge-bg: #1F5DA2;
  --t-badge-fg: #fff;
  --t-chip-bg: #EEF2F7;
  --t-chip-fg: #163A70;
  --t-chat-bg: #F2F5F9;
  --t-wallpaper: radial-gradient(900px 480px at 16% -10%, rgba(31, 93, 162, .05), transparent 60%);
  --t-day-bg: #FFFFFF;
  --t-day-fg: #5C6B7A;
  --t-in: #FFFFFF;
  --t-in-fg: #152033;
  --t-in-meta: #5C6B7A;
  --t-out: #E4EDF8;
  --t-out-bg: #E4EDF8;
  --t-out-fg: #152033;
  --t-out-meta: #5C6B7A;
  --t-bubble-r: 18px;
  --t-tail-r: 6px;
  --t-shadow: 0 1px 1px rgba(5, 4, 69, .06);
  --t-quote-bg: #EEF2F7;
  --t-quote-bar: #1F5DA2;
  --t-quote-autor: #163A70;
  --t-quote-out-bg: #D7E3F2;
  --t-quote-out-bar: #1F5DA2;
  --t-quote-out-autor: #163A70;
  --t-react-bg: #FFFFFF;
  --t-react-border: #E2E8F0;
  --t-wave-on: #1F5DA2;
  --t-wave-off: #E2E8F0;
  --t-wave-out-on: #1F5DA2;
  --t-wave-out-off: #C9D7E8;
  --t-vel-bg: #EEF2F7;
  --t-vel-fg: #163A70;
  --t-vel-out-bg: #D7E3F2;
  --t-vel-out-fg: #152033;
  --t-composer-bg: #F7F9FC;
  --t-input-bg: #FFFFFF;
  --t-input-border: #E2E8F0;
  --t-mic-bg: #1F5DA2;
  --t-mic-fg: #fff;
  --t-mic-shadow: 0 2px 8px rgba(31, 93, 162, .18);
  --t-link: #1F5DA2;
  --t-out-link: #1F5DA2;
  --t-av1: #1F5DA2;
  --t-av2: #3D5A80;
  --t-av3: #5B7C9D;
  --t-av4: #082B53;
  --t-item-active: #E8EEF6;
  --t-desktop-bg: #E4EAF2;
  --t-bar: #FFFFFF;
  --t-bar-style: light;
  --t-theme-color: #1F5DA2;
  --t-card-bg: #FFFFFF;
  --t-toast-bg: #152033;
  --t-mono-bg: rgba(21, 32, 51, .07);
  --t-fmt-quote-bar: var(--t-quote-bar);
  /* tarefas: badge/alerta distintos da não lida (azul) e do perigo (vermelho) */
  --t-warn: #D97706;
  --t-warn-bg: #FEF3C7;
  --t-warn-fg: #92400E;
}

html[data-tema="escuro"] {
  --t-name: "Noite WeAds";
  --t-primary: #1F5DA2;
  --t-primary2: #7EB6E8;
  --t-accent: #38B6FF;
  --t-header-bg: #101A3C;
  --t-header-edge: #050445;
  --t-header-gradient: linear-gradient(135deg, #050445 0%, #101A3C 45%, #1A3A6E 100%);
  --t-header-fg: #F2F5FA;
  --t-header-icon: #F2F5FA;
  --t-header-sub: #9AA8C2;
  --t-header-border: #1E2A4A;
  --t-avatar-ring: #1E2A4A;
  --t-status-bg: #101A3C;
  --t-status-fg: #F2F5FA;
  --t-list-bg: #0C1433;
  --t-panel: #0B1230;
  --t-search-bg: #151E40;
  --t-border: #1E2A4A;
  --t-text: #E8EDF5;
  --t-muted: #8B9BB3;
  --t-avatar-bg: #1F5DA2;
  --t-avatar-fg: #fff;
  --t-unread: #38B6FF;
  --t-badge-bg: #1F5DA2;
  --t-badge-fg: #fff;
  --t-chip-bg: #151E40;
  --t-chip-fg: #9AA8C2;
  --t-chat-bg: #0B1230;
  --t-wallpaper: radial-gradient(900px 500px at 80% -10%, rgba(56, 182, 255, .06), transparent 55%);
  --t-day-bg: #151E40;
  --t-day-fg: #9AA8C2;
  --t-in: #161F3F;
  --t-in-fg: #E8EDF5;
  --t-in-meta: #8B9BB3;
  --t-out: #1C4A82;
  --t-out-bg: #1C4A82;
  --t-out-fg: #F3F6FB;
  --t-out-meta: #B7C8E0;
  --t-bubble-r: 18px;
  --t-tail-r: 6px;
  --t-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  --t-quote-bg: #1A2448;
  --t-quote-bar: #38B6FF;
  --t-quote-autor: #7EB6E8;
  --t-quote-out-bg: #163A68;
  --t-quote-out-bar: #7EB6E8;
  --t-quote-out-autor: #C5D8F0;
  --t-react-bg: #1A2448;
  --t-react-border: #1E2A4A;
  --t-wave-on: #38B6FF;
  --t-wave-off: #2A3658;
  --t-wave-out-on: #C5D8F0;
  --t-wave-out-off: #163A68;
  --t-vel-bg: #1A2448;
  --t-vel-fg: #C5D8F0;
  --t-vel-out-bg: #163A68;
  --t-vel-out-fg: #F3F6FB;
  --t-composer-bg: #101A3C;
  --t-input-bg: #151E40;
  --t-input-border: #243056;
  --t-mic-bg: #1F5DA2;
  --t-mic-fg: #fff;
  --t-mic-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  --t-link: #38B6FF;
  --t-out-link: #C5D8F0;
  --t-av1: #1F5DA2;
  --t-av2: #2A4A73;
  --t-av3: #3D5F8A;
  --t-av4: #163A62;
  --t-item-active: #182348;
  --t-desktop-bg: #070B1C;
  --t-bar: #F2F5FA;
  --t-bar-style: light;
  --t-theme-color: #101A3C;
  --t-card-bg: #0C1433;
  --t-toast-bg: #070B1C;
  --t-mono-bg: rgba(255, 255, 255, .1);
  --t-fmt-quote-bar: var(--t-quote-bar);
  --t-warn: #FBBF24;
  --t-warn-bg: #3A2A05;
  --t-warn-fg: #FDE68A;
}

/* Sem JS: segue o sistema se data-tema ainda não foi aplicado */
@media (prefers-color-scheme: dark) {
  html:not([data-tema]) {
    --t-name: "Noite WeAds";
    --t-primary: #1F5DA2;
    --t-primary2: #7EB6E8;
    --t-accent: #38B6FF;
    --t-header-bg: #101A3C;
    --t-header-edge: #050445;
    --t-header-gradient: linear-gradient(135deg, #050445 0%, #101A3C 45%, #1A3A6E 100%);
    --t-header-fg: #F2F5FA;
    --t-header-icon: #F2F5FA;
    --t-header-sub: #9AA8C2;
    --t-header-border: #1E2A4A;
    --t-avatar-ring: #1E2A4A;
    --t-status-bg: #101A3C;
    --t-status-fg: #F2F5FA;
    --t-list-bg: #0C1433;
    --t-panel: #0B1230;
    --t-search-bg: #151E40;
    --t-border: #1E2A4A;
    --t-text: #E8EDF5;
    --t-muted: #8B9BB3;
    --t-avatar-bg: #1F5DA2;
    --t-avatar-fg: #fff;
    --t-unread: #38B6FF;
    --t-badge-bg: #1F5DA2;
    --t-badge-fg: #fff;
    --t-chip-bg: #151E40;
    --t-chip-fg: #9AA8C2;
    --t-chat-bg: #0B1230;
    --t-wallpaper: radial-gradient(900px 500px at 80% -10%, rgba(56, 182, 255, .06), transparent 55%);
    --t-day-bg: #151E40;
    --t-day-fg: #9AA8C2;
    --t-in: #161F3F;
    --t-in-fg: #E8EDF5;
    --t-in-meta: #8B9BB3;
    --t-out: #1C4A82;
    --t-out-bg: #1C4A82;
    --t-out-fg: #F3F6FB;
    --t-out-meta: #B7C8E0;
    --t-bubble-r: 18px;
    --t-tail-r: 6px;
    --t-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    --t-quote-bg: #1A2448;
    --t-quote-bar: #38B6FF;
    --t-quote-autor: #7EB6E8;
    --t-quote-out-bg: #163A68;
    --t-quote-out-bar: #7EB6E8;
    --t-quote-out-autor: #C5D8F0;
    --t-react-bg: #1A2448;
    --t-react-border: #1E2A4A;
    --t-wave-on: #38B6FF;
    --t-wave-off: #2A3658;
    --t-wave-out-on: #C5D8F0;
    --t-wave-out-off: #163A68;
    --t-vel-bg: #1A2448;
    --t-vel-fg: #C5D8F0;
    --t-vel-out-bg: #163A68;
    --t-vel-out-fg: #F3F6FB;
    --t-composer-bg: #101A3C;
    --t-input-bg: #151E40;
    --t-input-border: #243056;
    --t-mic-bg: #1F5DA2;
    --t-mic-fg: #fff;
    --t-mic-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    --t-link: #38B6FF;
    --t-out-link: #C5D8F0;
    --t-av1: #1F5DA2;
    --t-av2: #2A4A73;
    --t-av3: #3D5F8A;
    --t-av4: #163A62;
    --t-item-active: #182348;
    --t-desktop-bg: #070B1C;
    --t-bar: #F2F5FA;
    --t-bar-style: light;
    --t-theme-color: #101A3C;
    --t-card-bg: #0C1433;
    --t-toast-bg: #070B1C;
    --t-mono-bg: rgba(255, 255, 255, .1);
    --t-fmt-quote-bar: var(--t-quote-bar);
    --t-warn: #FBBF24;
    --t-warn-bg: #3A2A05;
    --t-warn-fg: #FDE68A;
  }
}

/* Mockup B — Gradiente sutil: degradê diagonal full-bleed (inclui status bar).
   background-color = --t-header-edge (navy do canto superior esquerdo), NÃO o
   azul médio nem o painel claro: evita faixa esbranquiçada no topo / bounce.
   Sem faixa sólida nem overlay claro por cima do degradê. */
.side-header,
.chat-header,
.adm-header,
.fwd-header,
.galeria-header {
  background-color: var(--t-header-edge, #050445);
  background-image: var(--t-header-gradient);
  background-repeat: no-repeat;
  border-bottom-color: var(--t-header-border);
}

html[data-tema="claro"] .inst-dot,
html[data-tema="claro"] .inst-outras,
:root:not([data-tema="escuro"]) .inst-dot,
:root:not([data-tema="escuro"]) .inst-outras {
  border-color: #1A4A8C;
}

html[data-tema="escuro"] .inst-dot,
html[data-tema="escuro"] .inst-outras {
  border-color: #0B1230;
}

@media (min-width: 768px) {
  .side-header,
  .chat-header,
  .adm-header,
  .fwd-header,
  .galeria-header {
    background-image: var(--t-header-gradient);
    background-color: var(--t-header-edge, #050445);
    background-attachment: fixed;
    background-size: 100vw 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
  }
}