/* ============================================================================
   12. TOAST (.toast / .saas-toast)
   Protótipo: caixa void, borda smoke, raio 6, texto mist, sombra xl.
   O tipo vira um ponto sólido à esquerda (a base injeta só texto no elemento).
   ========================================================================== */
:root[data-theme] .toast{
  display:flex;
  align-items:center;
  gap:9px;
  right:20px;
  bottom:20px;
  max-width:380px;
  padding:9px 12px;
  border:1px solid var(--lx-smoke);
  border-radius:var(--lx-r-md);
  background:var(--lx-void);
  color:var(--lx-mist);
  font-family:var(--lx-font-ui);
  font-size:13px;
  font-weight:var(--lx-w-reg);
  letter-spacing:-.011em;
  box-shadow:var(--lx-sh-xl);
  backdrop-filter:none;
  animation:toastIn .16s ease;
}
:root[data-theme] .toast::before{
  content:"";
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:var(--lx-r-pill);
  background:var(--lx-fog);
}
:root[data-theme] .toast-success{
  background:var(--lx-void);
  color:var(--lx-mist);
}
:root[data-theme] .toast-success::before{ background:var(--lx-green-text); }
:root[data-theme] .toast-error{
  background:var(--lx-void);
  color:var(--lx-mist);
}
:root[data-theme] .toast-error::before{ background:var(--lx-coral-text); }
/* .toast-info nasce em runtime: toast(msg,'info') monta className `toast-info`. */
:root[data-theme] .toast-info::before{ background:var(--lx-teal-text); }

:root[data-theme] .saas-toast{
  right:20px;
  bottom:20px;
  padding:9px 12px;
  border:1px solid var(--lx-smoke);
  border-radius:var(--lx-r-md);
  background:var(--lx-void);
  color:var(--lx-mist);
  font-family:var(--lx-font-ui);
  font-size:13px;
  box-shadow:var(--lx-sh-xl);
}
:root[data-theme] .saas-toast.is-error{
  background:var(--lx-void);
  color:var(--lx-mist);
  border-color:rgba(var(--lx-coral-rgb),.45);
}


/* ============================================================================
   13. MENU DE TEMA (.theme-mode-menu) — chrome global injetado pelo
   theme-crm-clean.js. Alinhado ao popover do ctx-switcher.
   ========================================================================== */
:root[data-theme] .theme-mode-menu{
  background:var(--lx-obsidian) !important;
  border:1px solid var(--lx-graphite) !important;
  border-radius:var(--lx-r-md);
  box-shadow:var(--lx-sh-xl) !important;
}
:root[data-theme] .theme-mode-option{
  border-radius:var(--lx-r-md);
  color:var(--lx-mist) !important;
}
:root[data-theme] .theme-mode-option:hover{
  background:var(--lx-wash-hover) !important;
  border-color:transparent !important;
}
:root[data-theme] .theme-mode-option[aria-checked="true"]{
  background:var(--lx-graphite) !important;
  border-color:transparent !important;
}
:root[data-theme] .theme-mode-option__label{
  font-size:13px;
  font-weight:var(--lx-w-510);
}
:root[data-theme] .theme-mode-option__label small{
  color:var(--lx-ash);
  font-size:11px;
  font-weight:var(--lx-w-reg);
}
:root[data-theme] .theme-mode-option__check{
  color:var(--lx-lime-ink);
  font-weight:var(--lx-w-590);
}


/* ============================================================================
   14. MOBILE · toggle, scrim e alvos de toque
   Abaixo de 1024px os controles voltam a 40px para não quebrar acessibilidade.
   ========================================================================== */
@media (max-width:1023px){
  :root[data-theme] .mobile-toggle{
    width:40px;
    height:40px;
    background:var(--lx-obsidian) !important;
    border:1px solid var(--lx-graphite) !important;
    border-radius:var(--lx-r-md);
    color:var(--lx-mist) !important;
    box-shadow:none !important;
  }
  :root[data-theme] body:has(.sidebar.open) .mobile-nav-scrim{
    background:rgba(8,9,10,.72);
  }
  :root[data-theme] .btn{ min-height:40px; }
  :root[data-theme] :where(.form-input,.ag-input,.ctxm-inp){ min-height:40px; }
  :root[data-theme] .login-field input{ height:40px; }
  :root[data-theme] .login-submit{ height:44px; }
  :root[data-theme] .sidebar .nav-item{ min-height:40px; padding:0 12px; }
  :root[data-theme] .theme-toggle{ width:40px; height:40px; }
  :root[data-theme] .login-tagline .lt-title{ font-size:26px; }
  :root[data-theme] .login-tagline .lt-sub{ font-size:15px; }
}


/* ============================================================================
   15. MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  :root[data-theme] .toast,
  :root[data-theme] .login-card,
  :root[data-theme] .sidebar,
  :root[data-theme] .nav-item{
    animation:none !important;
    transition:none !important;
  }
}


/* ============================================================================
   16. PILHA DE NOTIFICAÇÃO EM TEMPO REAL (#ntf-stack / .ntf-card)
   Componente LEGADO: o estilo nasce inline no app.js (ntfEnsureStyle), com fundo
   escuro fixo rgba(22,24,30,.96) e z-index absurdo 2147483600 em QUALQUER tema,
   e por isso cobria opaco o painel do editor de Automações e o drawer de Contatos
   no tema claro. Aqui, na camada Linear, remapeamos:
     (a) TEMA: superfície, borda, texto e barra viram tokens theme-aware. No
         escuro caem em obsidian/graphite/mist (a MESMA aparência de card do
         resto da UI escura); no claro/híbrido os --color-* remapeados invertem.
     (b) Z-INDEX: entra na escala da aplicação em 1400, o degrau de toast
         (idêntico ao #ct-toast), acima de modal (200/1200) e drawer (300) e
         abaixo dos globais legados (flow-ov 9000+), sem o valor 2147483600.
     (c) PONTEIRO: o CONTAINER continua pointer-events:none (não bloqueia clique
         no que está embaixo, fora dos cards) e cada .ntf-card volta a auto, então
         clique-para-abrir e o "x" de dispensar seguem funcionando (app.js).
   Posição na tela e auto-dismiss de 6s (legado) ficam intactos.
   Especificidade (id + [data-theme]) vence o <style> injetado sem !important.
   ========================================================================== */
:root[data-theme] #ntf-stack{
  z-index:1400;
  pointer-events:none;
}
:root[data-theme] #ntf-stack .ntf-card{
  pointer-events:auto;
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  color:var(--lx-mist);
  box-shadow:var(--lx-sh-xl);
}
:root[data-theme] #ntf-stack .ntf-av{
  background:var(--lx-graphite);
  color:var(--lx-bone);
}
:root[data-theme] #ntf-stack .ntf-name{ color:var(--lx-bone); }
:root[data-theme] #ntf-stack .ntf-chan{ color:var(--lx-ash); }
:root[data-theme] #ntf-stack .ntf-msg{ color:var(--lx-mist); }
:root[data-theme] #ntf-stack .ntf-x{
  background:var(--lx-graphite);
  color:var(--lx-fog);
}
:root[data-theme] #ntf-stack .ntf-x:hover{
  background:var(--lx-smoke);
  color:var(--lx-bone);
}
:root[data-theme] #ntf-stack .ntf-bar{ background:var(--lx-smoke); }
:root[data-theme] #ntf-mute-btn{ color:var(--lx-fog); }
:root[data-theme] #ntf-mute-btn:hover{
  background:var(--lx-graphite);
  color:var(--lx-bone);
}


/* ============================================================================
   15. CUSTOM-SELECT · menu aberto (.cs-panel) dimensionado por CONTEÚDO (global)
   custom-select.js força panel.style.width/minWidth/maxWidth = largura do TRIGGER
   inline, estrangulando o menu (opções clipadas do tipo "Prospecçã..." no seletor
   compacto de pipeline do Kanban e em qualquer select estreito). O app.css já
   declara width:max-content, mas o inline do JS derrota. Não há módulo-fonte
   rehashável do custom-select nem posso tocar agent-manager.py, então o
   dimensionamento por conteúdo volta via !important: largura pelo CONTEÚDO, teto
   340px, e o minWidth inline (largura do trigger) segue como piso. O JS relê o
   rect real do painel ao posicionar, então realinha sozinho junto à borda direita
   sem estourar a viewport. Regra GLOBAL do componente, vale nos dois temas, e NÃO
   toca o gatilho (o trigger 26px do chip 28px do Kanban continua de pé). O title
   no que exceder 340px depende do JS (custom-select.js) — handoff. */
:root[data-theme] .cs-panel{
  width:max-content !important;
  max-width:min(340px, calc(100vw - 16px)) !important;
}
:root[data-theme] .cs-panel .cs-opt-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}