/* ==========================================================================
   Tema escuro (Preferências pessoais → Tema). Ativado com <html class="dark">.
   ========================================================================== */
html.dark {
  color-scheme: dark;
  --navy: #0A1626;
  --navy-2: #12243A;
  --cyan-soft: #133A55;
  --canvas: #0E1A28;
  --panel: #15243A;
  --panel-2: #1A2C44;
  --ink: #E6EEF7;
  --ink-2: #C4D2E1;
  --muted: #8FA3B9;
  --line: #2A3F58;
  --line-soft: #213550;
  --hover: #1D3149;
  --select: #173E5E;
  --bubble-out: #13456A;
  --bubble-bot: #2D2856;
  --note: #3A3119;
  --note-line: #8D6F22;
  --ok: #4ADE80;
  --ok-soft: #14382A;
  --wait: #F5B04C;
  --wait-soft: #3D2C12;
  --bot: #A894FF;
  --bot-soft: #2D2856;
  --danger: #F87171;
  --danger-soft: #3F1D22;
  --warn: #F5B04C;
  --accent-soft: var(--cyan-soft);
}
html.dark body { background: var(--canvas); color: var(--ink); }
/* Fundos da conversa no escuro */
html.dark .chat-pane.bg-liso, html.dark .bg-sw.bg-liso, html.dark .chat-pane.bg-foto { background-color: #0F1C2B; }
html.dark .chat-pane.bg-gotas, html.dark .bg-sw.bg-gotas,
html.dark .chat-pane.bg-ondas, html.dark .bg-sw.bg-ondas,
html.dark .chat-pane.bg-bolhas, html.dark .bg-sw.bg-bolhas,
html.dark .chat-pane.bg-ceu, html.dark .bg-sw.bg-ceu { background-color: #0F1E30; background-blend-mode: soft-light; }
html.dark .bubble.out { background: var(--bubble-out); }
html.dark .bubble.note { background: var(--note); border-color: var(--note-line); }
html.dark .bubble.robot { background: var(--bubble-bot); }
html.dark .rail-logo img { background: #fff; }
html.dark ::placeholder { color: #6F849B; }
html.dark .modal, html.dark .modal-box, html.dark .card { background: var(--panel); color: var(--ink); }
html.dark mark { background: #6b5a10; color: #fff; }
/* A tela de login fica sempre clara */
html.dark #login { color-scheme: light; --panel: #FFFFFF; --panel-2: #F7FAFD; --ink: #12263D; --ink-2: #33475E; --muted: #61748A; --line: #DCE4EE; --line-soft: #EDF2F7; --hover: #F4F8FC; --navy: #0E2A47; background: #fff; color: var(--ink); }
/* --- ajustes automáticos das cores fixas do tema claro --- */
html.dark input { background: var(--panel); }
html.dark select { background-color: var(--panel); }
html.dark textarea { background: var(--panel); }
html.dark h1 { color: var(--ink); }
html.dark h2 { color: var(--ink); }
html.dark h3 { color: var(--ink); }
html.dark .btn { background: var(--panel); }
html.dark .btn:hover { border-color: var(--line); }
html.dark .btn.danger:hover { border-color: var(--line); }
html.dark .me-menu { background: var(--panel); }
html.dark .search-box input:focus { background: var(--panel); }
html.dark .tabs button.active { background: var(--panel); color: var(--ink); }
html.dark .tabs b.hot { color: var(--ink); }
html.dark .filters select { background-color: var(--panel); }
html.dark .unread { color: var(--ink); }
html.dark .list-empty b { color: var(--ink); }
html.dark .tag { background: color-mix(in srgb, var(--c) 23%, var(--panel)); color: color-mix(in srgb, var(--c) 48%, white); }
html.dark .chat-pane { background-color: var(--panel-2); }
html.dark .empty-card { background: var(--panel-2); }
html.dark .chat-title strong { color: var(--ink); }
html.dark .chat-tags { background: var(--panel-2); }
html.dark .day-sep { background: var(--panel-2); }
html.dark .sys { background: var(--panel-2); }
html.dark .bubble { background: var(--panel); }
html.dark .banner { background: var(--panel); }
html.dark .composer-box:focus-within { background: var(--panel); }
html.dark .qr-popup { background: var(--panel); }
html.dark .attach-preview { background: var(--panel); }
html.dark .det-head strong { color: var(--ink); }
html.dark .tag-pick { background: var(--panel); }
html.dark .tag-pick.on { background: color-mix(in srgb, var(--c) 26%, var(--panel)); color: color-mix(in srgb, var(--c) 48%, white); }
html.dark .section-title { color: var(--ink); }
html.dark .card { border: 1px solid var(--line); border-color: var(--line); }
html.dark .table th { background: var(--panel-2); }
html.dark .table tbody tr:hover td { background: var(--panel-2); }
html.dark .table tr:hover td { background: var(--panel-2); }
html.dark .toolbar .search-box input { background: var(--panel); }
html.dark .wa-card img { background: var(--panel); }
html.dark .wa-big { color: var(--ink); }
html.dark .dropzone { border: 1.5px dashed var(--line) !important; background: var(--panel); }
html.dark .dropzone:hover { background: var(--panel-2); }
html.dark .switch span { background: var(--panel-2); }
html.dark .switch span::after { background: var(--panel); }
html.dark .modal-box { background: var(--panel); }
html.dark .composer-card { background: var(--panel); }
html.dark .emoji-pop { background: var(--panel); }
html.dark .drawer { background: var(--panel); }
html.dark .drawer-who b { color: var(--ink); }
html.dark .opt-card:hover { border-color: var(--line); }
html.dark .opt-card.on .oc-ico { background: var(--panel); }
html.dark .opt-card b { color: var(--ink); }
html.dark .lib-card { background: var(--panel); }
html.dark .lib-thumb .ftype::after { border-color: var(--canvas) var(--line); }
html.dark .lib-empty { background: var(--panel); border: 1.5px dashed var(--line); }
html.dark .seg button.on { background: var(--panel); color: var(--ink); }
html.dark .kpi { background: var(--panel); }
html.dark .kpi .k-val { color: var(--ink); }
html.dark .chart-card { background: var(--panel); }
html.dark .hbar b { color: var(--ink); }
html.dark .tiles button { background: var(--panel); }
html.dark .pw-eye:hover { color: var(--ink); }
html.dark .bg-pick.on { color: var(--ink); }
html.dark .welcome-head h2 { color: var(--ink); }
html.dark .kpi-card { border: 1px solid var(--line); background: var(--panel-2); }
html.dark .kpi-ico { background: color-mix(in srgb, var(--k) 26%, var(--panel)); }
html.dark .kpi-card b { color: var(--ink); }
html.dark .w-card { background: var(--panel-2); }
html.dark .wa-card-mini b { color: var(--ink); }
html.dark .shortcuts button:hover { color: var(--ink); }
html.dark .conv.has-unread { background: var(--panel-2); }
html.dark .page { background: var(--panel-2); }
html.dark .form-grid[data-title]::before { color: var(--ink); }
html.dark .role.admin { background: var(--panel-2); }
html.dark .shortcut { background: var(--panel-2); border: 1px solid var(--line); }
html.dark .panel-head .count { background: var(--panel-2); }
html.dark .row-list li:hover { background: var(--panel-2); }
html.dark .row-ico { background: var(--panel-2); }
html.dark .swatch-in::-webkit-color-swatch { border: 3px solid var(--line); }
html.dark .swatch-in::-moz-color-swatch { border: 3px solid var(--line); }
html.dark .cfg-nav { background: var(--panel); }
html.dark .cfg-search input { border: 1.5px solid var(--line); }
html.dark .cfg-item:hover { color: var(--ink); }
html.dark .cfg-item.active { background: var(--panel-2); color: var(--ink); }
html.dark .search-pill input { border: 1.5px solid var(--line); }
html.dark .tbl-card .table th { background: var(--panel); border-bottom: 1px solid var(--line); }
html.dark .tbl-card .table td { border-bottom: 1px solid var(--line); }
html.dark .icon-btn.act:hover { background: var(--panel-2); }
html.dark .you { border: 1px solid var(--line); background: var(--panel-2); }
html.dark .avatar .dot { border: 2px solid var(--line); }
html.dark .pill-select { border: 1.5px solid var(--line); }
html.dark .type-chip { background: var(--panel-2); }
html.dark .chan-ico { background: var(--panel-2); }
html.dark .qr-card img { background: var(--panel); }
html.dark .cfg-card input:not([type=checkbox]):not([type=radio]):not([type=color]) { border: 1.5px solid var(--line); }
html.dark .cfg-card select { border: 1.5px solid var(--line); }
html.dark .cfg-card textarea { border: 1.5px solid var(--line); }
html.dark .wide-card .set-block h3 { color: var(--ink); }
html.dark .info-box { background: var(--panel-2); color: var(--ink); }
html.dark .prof-cam { background: var(--panel); border: 1.5px solid var(--line); }
html.dark .prof-id b { color: var(--ink); }
html.dark .opt-list button { border: 1.5px solid var(--line); background: var(--panel); }
html.dark .opt-list button.on { background: var(--panel-2); }
html.dark .wa-prev { background: var(--panel-2); }
html.dark .day-row { border-bottom: 1px solid var(--line); }
html.dark .wa-down .btn { background: var(--panel); color: var(--ink); border-color: var(--line); }
html.dark .wa-lock { background: var(--panel-2); color: var(--ink); }
html.dark .composer.locked textarea { background: var(--panel-2); }
html.dark .api-strip { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); }
html.dark .chan-choice { border: 1.5px solid var(--line); }
html.dark .chan-choice.main { border-color: var(--line); background: var(--panel-2); }
html.dark .cc-head b { color: var(--ink); }
html.dark .vcard { background: var(--panel-2); }
html.dark .vc-txt b { color: var(--ink); }
html.dark .msg-acts { background: var(--panel); border: 1px solid var(--line); }
html.dark .msg-acts button:hover { background: var(--panel-2); }
html.dark .reacts { background: var(--panel); border: 1px solid var(--line); }
html.dark .reply-bar { background: var(--panel); border: 1px solid var(--line); }
html.dark .react-bar { background: var(--panel); border: 1px solid var(--line); }
html.dark .react-bar button:hover { background: var(--panel-2); }
html.dark .react-bar .more { background: var(--panel-2); }
html.dark .emoji-picker { background: var(--panel); border: 1px solid var(--line); }
html.dark .ep-head b { color: var(--ink); }
html.dark .ep-search input { border: 1.5px solid var(--line); }
html.dark .ep-tabs { border: 1px solid var(--line); }
html.dark .ep-tabs button { background: var(--panel); }
html.dark .ep-tabs button + button { border-left: 1px solid var(--line); }
html.dark .ep-tabs button:hover { background: var(--panel-2); }
html.dark .ep-grid button:hover { background: var(--panel-2); }
html.dark .sign-pop { background: var(--panel); border: 1px solid var(--line); }
html.dark .sign-pop b { color: var(--ink); }
html.dark .sign-pop input { border: 1.5px solid var(--line); }
html.dark .txt .sig { color: var(--ink); }
html.dark .tr-tabs { border-bottom: 1px solid var(--line); }
html.dark .tr-search input { border: 1.5px solid var(--line); }
html.dark .tr-item { border-bottom: 1px solid var(--line); }
html.dark .tr-item:hover { background: var(--panel-2); }
html.dark .tr-item.on { background: var(--panel-2); }
html.dark .tr-ico .dot { border: 2px solid var(--line); }
html.dark .tr-foot textarea { border: 1.5px solid var(--line); }
html.dark .tr-foot .btn:disabled { background: var(--panel-2); border-color: var(--line); }
html.dark .flt-btn.on { background: var(--panel-2); }
html.dark .flt-summary { background: var(--panel-2); border: 1px solid var(--line); }
html.dark .flt-summary b { color: var(--ink); }
html.dark .flt-panel { background: var(--panel); }
html.dark .f-chip { border: 1.5px solid var(--line); background: var(--panel); }
html.dark .f-chip[style] { border-color: color-mix(in srgb, var(--c) 40%, var(--panel)); background: color-mix(in srgb, var(--c) 22%, var(--panel)); color: color-mix(in srgb, var(--c) 45%, white); }
html.dark .f-chip.on { background: var(--panel-2); }
html.dark .f-chip[style].on { background: color-mix(in srgb, var(--c) 30%, var(--panel)); }
html.dark .f-person.none .avatar { background: var(--panel); }
html.dark .bot-ico { background: var(--panel-2); }
html.dark .bot-ico.on { background: var(--panel-2); }
html.dark .type-chip.start { background: var(--panel-2); }
html.dark .type-chip.manual { background: var(--panel-2); }
html.dark .qe-box { border: 1.5px solid var(--line); background: var(--panel); }
html.dark .qe-x { border: 1px solid var(--line); background: var(--panel); }
html.dark .qatt img { border: 1px solid var(--line); }
html.dark .att-chip { background: var(--panel-2); }
html.dark .me-org div { background: var(--panel-2); }
html.dark .me-org img { background: var(--panel); }
html.dark .me-menu .menu-item.logout:hover { background: var(--panel-2); }
html.dark .h-tag { background: color-mix(in srgb, var(--c) 28%, var(--panel)); color: color-mix(in srgb, var(--c) 50%, white); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--panel)); }
html.dark .h-more { background: var(--panel-2); border: 1px solid var(--line); }
html.dark .h-sector { background: var(--panel); }
html.dark .lnk-btn.danger { color: var(--ink); }
html.dark .danger-zone { border: 1px solid var(--line); }
html.dark .danger-zone .btn.danger { border: 1px solid var(--line); }
html.dark .sr-snip mark { background: var(--panel-2); }
html.dark .bubble mark { background: var(--panel-2); }