@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* Tabelas por quantidade do PDV e pedido: destaque no azul do sistema. */
.quantity-price-heading,
.quantity-price-badge,
.quantity-price-active {
  color: var(--primary-color, #0054c2);
  background-color: color-mix(in srgb, var(--primary-color, #0054c2) 7%, transparent);
}
.quantity-price-bar { background-color: var(--primary-color, #0054c2); }
html.dark .quantity-price-heading,
html.dark .quantity-price-badge,
html.dark .quantity-price-active {
  color: var(--dark-accent, #789aeb);
  background-color: color-mix(in srgb, var(--dark-primary, #2f64e0) 14%, transparent);
}
html.dark .quantity-price-bar { background-color: var(--dark-primary, #2f64e0); }

/* Prevenir flash branco - aplicar tema antes de tudo */
html.dark,
html.dark body {
  background: #172033 !important;
  color: #e4eaf5
}

/* Forçar modo escuro em todos os containers críticos */
html.dark .content,
html.dark .chat-list,
html.dark .chat-panel,
html.dark .chat-messages,
html.dark :where([class~="bg-white"]:not([class*="text-white"])):not(.btn-primary),
html.dark .tabs,
html.dark #chat-panel {
  background-color: #172033 !important
}

html.dark .chat-item {
  background-color: transparent
}

html.dark .chat-item:hover {
  background-color: rgba(255, 255, 255, 0.05)
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  background: #fcfcfc;
  color: #111
}

@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background: rgb(235, 235, 235);
  }

  ::-webkit-scrollbar-thumb {
    background: rgb(177, 177, 177);
    border: 3px solid rgb(235, 235, 235);
    border-radius: 1ex;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgb(161, 161, 161);
  }

  html.dark ::-webkit-scrollbar-track {
    background: rgb(51, 51, 51);
  }

  html.dark ::-webkit-scrollbar-thumb {
    background: rgb(90, 90, 90);
    border-color: rgb(51, 51, 51);
  }

  html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgb(136, 136, 136);
  }

  .wrapper-mensagens .attachments-wrapper::-webkit-scrollbar,
  #ticket-input .content .preview-wrapper::-webkit-scrollbar,
  .canal-ideias .preview-wrapper::-webkit-scrollbar {
    height: 8px;
  }
}

/* Padroniza fundo dos cards/painéis no tema claro: branco puro -> #fcfcfc */
html:not(.dark) .bg-white {
  background-color: #fcfcfc !important;
}

/* Caixas de pesquisa do sistema: fundo #ffffff (tema claro).
   Cobre inputs com type=search, placeholders/ids/classes contendo "search/buscar/pesquisar". */
html:not(.dark) input[type="search"],
html:not(.dark) input[placeholder*="Pesquisar" i],
html:not(.dark) input[placeholder*="Buscar" i],
html:not(.dark) input[placeholder*="Search" i],
html:not(.dark) input[placeholder*="Procurar" i],
html:not(.dark) input.search-input,
html:not(.dark) input.search,
html:not(.dark) input[id*="search" i],
html:not(.dark) input[id*="busca" i],
html:not(.dark) input[id*="pesquisa" i] {
  background-color: #ffffff !important;
  border: 1px solid rgb(235, 235, 235) !important;
  border-radius: 6px !important;
}

/* Padroniza fonte de TODOS os botões do sistema:
   Plus Jakarta Sans, peso 500 (Medium).
   Inclui descendentes (span, i, etc.) para vencer classes Tailwind como font-bold. */
button,
button *,
.btn,
.btn *,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a.btn * {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* Cadastro/edição de contato: caixas de texto com fundo #fcfcfc (tema claro) */
html:not(.dark) #edit-contact-form input,
html:not(.dark) #edit-contact-form select,
html:not(.dark) #edit-contact-form textarea,
html:not(.dark) #new-contact-form input,
html:not(.dark) #new-contact-form select,
html:not(.dark) #new-contact-form textarea {
  background-color: #fcfcfc !important;
}
html:not(.dark) #edit-contact-form input[type="checkbox"],
html:not(.dark) #edit-contact-form input[type="radio"],
html:not(.dark) #edit-contact-form input[type="file"],
html:not(.dark) #edit-contact-form input[type="range"],
html:not(.dark) #new-contact-form input[type="checkbox"],
html:not(.dark) #new-contact-form input[type="radio"],
html:not(.dark) #new-contact-form input[type="file"],
html:not(.dark) #new-contact-form input[type="range"] {
  background-color: initial !important;
}

/* Hover/focus em barras de pesquisa e qualquer caixa de digitação:
   borda 2px translúcida em #4e73e2 (sem shift de layout — usa box-shadow). */
html:not(.dark) input[type="text"]:hover,
html:not(.dark) input[type="text"]:focus,
html:not(.dark) input[type="search"]:hover,
html:not(.dark) input[type="search"]:focus,
html:not(.dark) input[type="email"]:hover,
html:not(.dark) input[type="email"]:focus,
html:not(.dark) input[type="password"]:hover,
html:not(.dark) input[type="password"]:focus,
html:not(.dark) input[type="number"]:hover,
html:not(.dark) input[type="number"]:focus,
html:not(.dark) input[type="tel"]:hover,
html:not(.dark) input[type="tel"]:focus,
html:not(.dark) input[type="url"]:hover,
html:not(.dark) input[type="url"]:focus,
html:not(.dark) input[type="date"]:hover,
html:not(.dark) input[type="date"]:focus,
html:not(.dark) input[type="datetime-local"]:hover,
html:not(.dark) input[type="datetime-local"]:focus,
html:not(.dark) input[type="time"]:hover,
html:not(.dark) input[type="time"]:focus,
html:not(.dark) input[type="month"]:hover,
html:not(.dark) input[type="month"]:focus,
html:not(.dark) input[type="week"]:hover,
html:not(.dark) input[type="week"]:focus,
html:not(.dark) input:not([type]):hover,
html:not(.dark) input:not([type]):focus,
html:not(.dark) textarea:hover,
html:not(.dark) textarea:focus,
html:not(.dark) select:hover,
html:not(.dark) select:focus {
  border-color: #a6b9f0 !important;
  box-shadow: 0 0 0 1px #a6b9f0 !important;
  outline: none !important;
}

/* Legacy public surfaces keep their geometry. The SaaS shell opts into
   the component radii from design-system.css (2026-09-12). */
body:not(.graviti-ui) :is(.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) {
  border-radius: 6px !important;
}

.theme {
  --bg: #fcfcfc;
  --text: #111111;
  --muted: #f5f5f5;
  --border: #eaeaea;
  --brand: #0054c2;
  --sidebar: #0b1220;
  --sidebar-text: #e8eefc
}

.dark.theme {
  --bg: #172033;
  --text: #e4eaf5;
  --muted: #172033;
  --border: #303b50;
  --brand: #0054c2;
  --sidebar: #172033;
  --sidebar-text: #e4eaf5
}

/* Garantir variáveis dark quando o tema vem do html.dark */
html.dark .theme {
  --bg: #172033;
  --text: #e4eaf5;
  --muted: #172033;
  --border: #303b50;
  --brand: #0054c2;
  --sidebar: #172033;
  --sidebar-text: #e4eaf5;
  --text-muted: #9ba9bf
}

.theme {
  background: var(--bg);
  color: var(--text)
}

.theme {
  --text-muted: #6b7280
}

.dark.theme {
  --text-muted: #9ba9bf
}

.theme {
  --fs-hero: 25.2px;
  --fs-h2: 19.8px;
  --fs-h3: 16.2px;
  --fs-body: 12.6px;
  --fs-small: 10.8px;
  --lh: 1.5;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --space-4: 3.6px;
  --space-8: 7.2px;
  --space-12: 10.8px;
  --space-16: 14.4px;
  --space-24: 21.6px;
  --space-32: 28.8px;
  --space-48: 43.2px
}

.content h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin: 0 0 var(--space-12)
}

.content h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: 0 0 var(--space-12)
}

.content h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: var(--space-12) 0
}

.content p,
.content li,
.content label {
  font-size: var(--fs-body);
  line-height: var(--lh)
}

.text-muted {
  color: var(--text-muted)
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10.8px 14.4px;
  border-bottom: 1px solid #eee
}

.topbar.hidden {
  display: none
}

.nav a {
  margin-right: 10.8px;
  text-decoration: none;
  color: #111
}

.nav a:last-child {
  margin-right: 0
}

.content {
  padding: var(--space-16);
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column
}

@media (min-width: 769px) {
  .content { height: 100vh; overflow-y: auto; }
}

/* Página Usuários: área de conteúdo só ocupa o necessário, sem espaço em branco abaixo */
body.page-settings-users .content {
  height: auto;
  min-height: 0;
}

/* Página Produtos/Serviços: conteúdo ocupa 100vh e o card da tabela preenche até embaixo, tabela rola dentro */
body.page-settings-products .content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.page-settings-products .content > div:last-of-type {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Página Etiquetas: barra de rolagem e menos espaço em branco */
body.page-settings-tags .content {
  height: auto;
  min-height: 0;
}

/* Página Origens de Lead: card preenche até embaixo, tabela rola dentro (igual Produtos) */
body.page-settings-lead-sources .content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.page-settings-lead-sources .content > div:last-of-type {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Página Respostas Rápidas: card preenche até embaixo, tabela rola dentro */
body.page-settings-quick-replies .content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.page-settings-quick-replies .content > div:last-of-type {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Página Mensagens Agendadas: card da lista preenche até embaixo, tabela rola dentro */
body.page-scheduled-messages .content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.page-scheduled-messages .content > div:last-of-type {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Página Supervisão: respeita o padding padrão para alinhar o título do Fluxo */
body.page-supervisao .content {
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.app {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

@media (min-width: 769px) {
  .app { overflow: hidden; }
}

html,
body {
  height: 100%;
  margin: 0
}

@media (min-width: 769px) {
  html, body { overflow: hidden; }
}

@media (max-width: 768px) {
  html, body { overflow: auto; overflow-x: hidden; }
}

/* ============================================================
   Sidebar — rail fixo (56px) recolhido, 240px aberto (.pinned).

   Abre e fecha SÓ pelo botão (#sidebar-pin) — não há mais expansão
   por hover (removida em 2026-08-22 a pedido: o painel abrindo
   sozinho ao passar o mouse atrapalhava). Recolhido, o botão de
   abrir mora em cima da marca e aparece ao passar o mouse nela.
   O .sidebar-inner continua absoluto por compatibilidade com o
   layout antigo; com .pinned o rail vai a 240px e empurra o conteúdo.
   ============================================================ */
.sidebar {
  --sb-rail: 56px;
  --sb-open: 240px;
  width: var(--sb-rail);
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  z-index: 45;
  overflow: visible;
  background: transparent;
  border: 0;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.pinned { width: var(--sb-open); }

/* Durante o carregamento nada anima: o estado aberto/recolhido já vem do
   servidor e um eventual ajuste do JS precisa ser instantâneo. A classe é
   removida no primeiro frame (header.php). */
.sidebar.sb-init,
.sidebar.sb-init * { transition: none !important; }

.sidebar-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Explícito: sem isso o padding e a borda somam por fora da largura e o
     painel fecha 17px mais largo que o rail que o .sidebar reservou. */
  box-sizing: border-box;
  width: var(--sb-rail);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 8px 10px;
  background: var(--sidebar-color);
  border-right: 1px solid var(--sb-border);
  overflow: hidden;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sem sombra ao expandir: a separação do conteúdo é só o border-right. */
.sidebar.pinned .sidebar-inner {
  width: var(--sb-open);
}

.sidebar-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0 0 10px 0;
  padding: 0 2px;
  flex-shrink: 0;
}

/* Botão de abrir/recolher. Aberto: fica no canto direito do cabeçalho.
   Recolhido: o rail (40px úteis) não comporta marca + botão lado a lado,
   então ele se sobrepõe à marca e só aparece ao passar o mouse sobre ela
   (a marca some por opacidade no mesmo hover — ver header.php). */
.sidebar-pin-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--sb-label);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sidebar.pinned .sidebar-pin-btn { opacity: 1; pointer-events: auto; }
.sidebar:not(.pinned) .sidebar-pin-btn {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}
.sidebar:not(.pinned) .sidebar-header:hover .sidebar-pin-btn,
.sidebar:not(.pinned) .sidebar-pin-btn:focus-visible { opacity: 1; pointer-events: auto; }
.sidebar-pin-btn:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sidebar-pin-btn:focus-visible { outline: 2px solid var(--sb-active-fg); outline-offset: 1px; }
.sidebar-pin-btn svg { width: 17px; height: 17px; stroke: currentColor; }

.sidebar-brand-text { display: none; }
.sidebar-toggle { display: none; }
.sidebar-toggle-collapse, .sidebar-toggle-expand { display: none; }

/* Navigation - Vertical */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Sangra os 8px de padding do inner e devolve como padding próprio: a
     área de recorte passa a ir até a borda do rail, senão a barra de
     acento do item ativo (left:-8px) seria cortada pelo overflow. */
  margin: 0 -8px;
  padding: 4px 8px;
  /* Barra de rolagem fina e discreta (só existe quando o menu não cabe):
     5px, polegar cinza-claro arredondado, trilho transparente; escurece um
     pouco ao passar o mouse no menu. Sobrepõe o ::-webkit-scrollbar global
     de 12px. Firefox usa as duas propriedades padrão. */
}

/* Chrome/Edge/Safari: pseudo-elementos ::-webkit-scrollbar. ATENÇÃO: no
   Chromium ≥121, se `scrollbar-width`/`scrollbar-color` estiverem setados,
   os ::-webkit-scrollbar são IGNORADOS e aparece a barra nativa "thin" do
   Windows, com setinhas — por isso as propriedades padrão ficam num
   @supports só para quem NÃO entende ::-webkit-scrollbar (Firefox). */
.sidebar-nav::-webkit-scrollbar { width: 5px; height: 5px; display: block; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--sb-scroll);
  border-radius: 999px;
  border: 0;
}
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: var(--sb-scroll-hover); }
.sidebar-nav::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
@supports not selector(::-webkit-scrollbar) {
  .sidebar-nav { scrollbar-width: thin; scrollbar-color: var(--sb-scroll) transparent; }
  .sidebar-nav:hover { scrollbar-color: var(--sb-scroll-hover) transparent; }
}

/* Grupos. Sem título, sem filete e sem respiro extra (removidos em
   2026-08-22): os itens correm todos com o mesmo espaçamento, como se fosse
   uma lista só — o agrupamento sobrevive apenas na ordem e na lógica PHP. */
.sidebar-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* Navigation Link - Vertical.
   Padding fixo em 10px: com o inner de 56px e 8px de padding lateral,
   sobram 40px — o ícone de 20px fica exatamente no centro do rail.
   Por isso o ícone NÃO se move quando o painel abre. */
.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--sidebar-text-color);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  white-space: nowrap;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 20px;
  font-family: inherit;
}

.sidebar-link:hover {
  background: var(--sb-hover);
  color: var(--sb-text-strong);
}

.sidebar-link:focus-visible {
  outline: 2px solid var(--sb-active-fg);
  outline-offset: -2px;
}

/* Item selecionado (redesenho 2026-08-23, padrão Linear/Notion/Vercel):
   pill NEUTRA cinza + texto forte semibold; só o ícone fica na cor da
   marca. Diferente do pill azul antigo (removido em 2026-08-22): aqui a
   cor aparece num ponto só, o resto é tom sobre tom. */
.sidebar-link.active {
  background: var(--sb-selected-bg);
  color: var(--sb-text-strong);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--sb-selected-ring);
}
.sidebar-link.active:hover { background: var(--sb-selected-bg); }
/* Pai com acordeão aberto e filho selecionado: só o filho leva a pill —
   duas pills empilhadas viravam um bloco. O pai continua forte + ícone
   azul, que é o suficiente para marcar a seção. Recolhido (sem acordeão)
   o pai volta a ser o único indicador e fica com a pill. */
.sidebar.pinned .sidebar-link-wrap.open > .sidebar-link.active {
  background: transparent;
  box-shadow: none;
}
.sidebar.pinned .sidebar-link-wrap.open > .sidebar-link.active:hover { background: var(--sb-hover); }
.sidebar-link.active .sidebar-icon { color: var(--sb-active-fg); }
.sidebar-link:hover .sidebar-icon { color: var(--sb-text-strong); }
.sidebar-link.active:hover .sidebar-icon { color: var(--sb-active-fg); }

/* Icon */
.sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
  box-shadow: none;
  filter: none;
  text-shadow: none;
}

.sidebar-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  /* Traço mais fino que o padrão do Lucide (2): ícone "desenhado",
     não "carimbado" — o mesmo peso que Linear/Stripe usam no menu. */
  stroke-width: 1.75;
  color: currentColor;
  box-shadow: none;
  filter: none;
  text-shadow: none;
  transition: color 0.14s ease;
}

/* Legado: ícones que vinham forçados em branco. Agora seguem o estado
   do link (idle / hover / ativo) como todos os outros. */
.sidebar-icon svg.sidebar-solid-icon,
.sidebar-icon svg.sidebar-solid-icon * {
  color: currentColor;
  stroke: currentColor;
  opacity: 1;
  filter: none;
  box-shadow: none;
  text-shadow: none;
  mix-blend-mode: normal;
}

.sidebar-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

/* Badge do rail. O contêiner passa a ser o LINK e não o ícone: sobre um
   ícone de 20px o número tapa o desenho e ainda estoura os 56px do rail
   (era decepado pelo overflow do inner). Aberto ele vai para o fim da
   linha; fechado vira um ponto no canto do ícone. */
.sidebar .sidebar-icon { position: static; }

.sidebar-link .notifications-badge {
  position: absolute;
  top: 50%;
  right: 10px;
  left: auto;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  border: 0;
  box-shadow: none;
}

.sidebar:not(.pinned) .sidebar-link .notifications-badge {
  top: 7px;
  right: 7px;
  transform: none;
  box-sizing: border-box;
  width: 11px;
  min-width: 0;
  height: 11px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  border: 2px solid var(--sidebar-color);
}

/* Rótulo: presente no DOM sempre (o inner recorta), some por opacidade.
   Trocar display:none por opacidade é o que permite a transição. */
.sidebar-text {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.sidebar.pinned .sidebar-text {
  opacity: 1;
  transform: none;
}

/* Footer - Vertical (bottom) */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-left: 0;
  margin-top: auto;
  padding-top: 8px;
  flex-shrink: 0;
  border-top: 1px solid var(--sb-border);
}

/* Teste dentro do sidebar: não acrescenta altura acima do app/perfil. */
.sidebar-trial { display: flex; gap: 8px; align-items: center; padding: 10px; margin-bottom: 6px; border: 1px solid #bfd5ff; border-radius: 10px; background: #edf4ff; color: #17468d; text-decoration: none; flex-shrink: 0; }
.sidebar-trial-icon { display: flex; flex-shrink: 0; width: 18px; height: 18px; }
.sidebar-trial-icon svg { width: 18px; height: 18px; }
.sidebar-trial-details { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.sidebar-trial-heading { font-size: 10px; line-height: 15px; }
.sidebar-trial-details strong { font-size: 12px; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sidebar-trial-action { font-size: 11px; line-height: 16px; font-weight: 600; display: flex; justify-content: space-between; }
.sidebar-trial-track { height: 4px; border-radius: 4px; background: #cfdef8; overflow: hidden; }
.sidebar-trial-track > span { display: block; height: 100%; background: #2f64e0; }
.sidebar:not(.pinned) .sidebar-trial { padding: 10px; }
.sidebar:not(.pinned) .sidebar-trial-details { display: none; }
.sidebar-trial:focus-visible { outline: 2px solid #2f64e0; outline-offset: 2px; }
.dark .sidebar-trial { background: var(--dark-bg); color: var(--dark-text); border-color: var(--dark-border); }
.dark .sidebar-trial-track { background: var(--dark-border); }
@supports (height: 100dvh) {
  .app.theme { height: 100dvh; min-height: 100dvh; }
}

/* Card do usuário no rodapé (padrão Vercel/Linear/Supabase): avatar
   quadrado-arredondado, nome em cima, e-mail embaixo, setinha dupla à
   direita dizendo "abre um menu". Recolhido, sobra só o avatar — centrado
   na mesma coluna dos ícones (28px dentro dos 40px úteis → padding 6px). */
.sidebar-profile {
  margin-top: 4px;
  padding: 6px;
  gap: 10px;
  border-radius: 10px;
}
.sidebar-profile .sidebar-icon {
  width: 28px;
  height: 28px;
}
.sidebar-profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-avatar-bg);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.sidebar-profile-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  text-align: left;
  line-height: 1.25;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.sidebar.pinned .sidebar-profile-meta { opacity: 1; transform: none; }
.sidebar-profile-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-profile-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--sb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-profile-caret {
  display: none;
  margin-left: auto;
  margin-right: 2px;
  color: var(--sb-label);
  flex-shrink: 0;
}
.sidebar-profile-caret svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; }
.sidebar.pinned .sidebar-profile-caret { display: inline-flex; }
.sidebar-profile:hover .sidebar-profile-caret { color: var(--sb-text-strong); }
.sidebar-profile .sidebar-text { display: none; }

/* Submenu (ex.: Produtos → Lista de produtos).
   Aberto (.pinned): acordeão inline, a setinha do item pai abre/fecha
   (.open, persistido em localStorage — ver header.php).
   Recolhido: pop-up à direita no hover do item. Ele é position:fixed
   (top/left calculados no JS do header) porque .sidebar-inner e
   .sidebar-nav têm overflow:hidden/auto — um absolute seria cortado no
   limite do trilho. Fixed escapa do clipping desde que nenhum ancestral
   tenha transform/filter (não tem; não acrescente). */
.sidebar-link-wrap { position: relative; width: 100%; }
.sidebar-submenu-toggle {
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.sidebar-submenu-chevron {
  display: none;
  margin-left: auto;
  margin-right: -2px;
  align-items: center;
  transition: transform 0.2s ease, opacity 0.14s ease;
  opacity: 0.45;
}
.sidebar-submenu-chevron svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; }
.sidebar.pinned .sidebar-submenu-chevron { display: inline-flex; }
.sidebar.pinned .sidebar-link:hover .sidebar-submenu-chevron,
.sidebar.pinned .sidebar-link-wrap.open .sidebar-submenu-chevron { opacity: 0.8; }
.sidebar.pinned .sidebar-link-wrap.open .sidebar-submenu-chevron { transform: rotate(180deg); }

/* Acordeão (aberto): os subitens descem com uma linha-guia vertical à
   esquerda, alinhada ao centro da coluna de ícones (x = 10 + 10 = 20px
   dentro do link; a linha de 1px fica em 19px). É a árvore do Vercel /
   shadcn: mostra que os itens pertencem ao pai sem recuar demais. */
.sidebar-submenu { display: none; }

/* Aberto (.pinned): o acordeão ANIMA a altura (grid 0fr → 1fr) em vez de
   trocar display — sem isso o antigo some e o novo aparece no mesmo frame,
   com salto de layout, o que lê como "piscada". A estrutura interna
   (.sidebar-submenu-clip > .sidebar-submenu-list) vem no markup do
   header.php — ela é quem segura o fechado em altura zero, e por isso não
   pode depender de JS: o clip é quem corta (overflow hidden, sem padding —
   padding num elemento de altura 0 continuaria visível) e a lista carrega
   padding, linha-guia e margens. Recolhido, os dois viram display:contents
   e o balão continua igual. */
.sidebar.pinned .sidebar-submenu {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 0 0 19px;
  transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar.pinned .sidebar-link-wrap.open .sidebar-submenu { grid-template-rows: 1fr; }
.sidebar.pinned .sidebar-submenu-clip {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.22s;
}
.sidebar.pinned .sidebar-link-wrap.open .sidebar-submenu-clip {
  visibility: visible;
  transition-delay: 0s;
}
.sidebar.pinned .sidebar-submenu-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px;
  padding: 2px 0 2px 12px;
  border-left: 1px solid var(--sb-border);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.sidebar.pinned .sidebar-link-wrap.open .sidebar-submenu-list { opacity: 1; transition-delay: 0.05s; }
.sidebar:not(.pinned) .sidebar-submenu-clip,
.sidebar:not(.pinned) .sidebar-submenu-list { display: contents; }
/* Título do pop-up (só no recolhido — ver JS do header, que injeta). */
.sidebar-submenu-title { display: none; }

/* Recolhido: pop-up (balão). :hover no wrap continua valendo com o mouse
   sobre o pop-up (é descendente no DOM, mesmo desenhado fora do trilho). A
   ponte ::before cobre o vão entre o trilho e o pop-up, senão o mouse "cai"
   no vazio no caminho e ele fecha antes de chegar. A setinha é o ::after,
   alinhada ao ícone do item pai via --sb-arrow-top (calculado no JS do
   header, porque o pop-up pode ser puxado para cima perto do rodapé). */
.sidebar:not(.pinned) .sidebar-link-wrap:hover .sidebar-submenu { display: flex; }
.sidebar:not(.pinned) .sidebar-submenu {
  --sb-arrow-top: 22px;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 6px;
  flex-direction: column;
  gap: 1px;
  min-width: 212px;
  background: var(--sidebar-color);
  border: 1px solid var(--sb-border);
  border-left-color: var(--sb-border);
  border-radius: 12px;
  z-index: 9999;
  box-shadow: 0 2px 4px -1px rgba(15, 23, 42, 0.05), 0 14px 32px -10px rgba(15, 23, 42, 0.20);
}
/* Cabeçalho do balão com o nome do item pai (Linear/Notion fazem isso:
   o balão se explica sozinho, sem depender do tooltip do ícone). */
.sidebar:not(.pinned) .sidebar-submenu .sidebar-submenu-title {
  display: block;
  padding: 6px 10px 6px;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sb-label);
  border-bottom: 1px solid var(--sb-border);
  margin-bottom: 4px;
}
/* A ponte precisa cobrir o vão de 6px ATÉ o trilho E o padding lateral de
   8px do .sidebar-inner, que não pertence ao item: sem isso, no caminho do
   ícone ao balão o mouse passa por uma faixa "de ninguém", o wrap perde o
   :hover e o balão fecha antes de dar para clicar (bug de 2026-08-22). */
.sidebar:not(.pinned) .sidebar-submenu::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  right: 100%;
  width: 22px;
}
/* Setinha: quadrado girado, com a mesma borda e fundo do balão; metade
   dele fica atrás do balão e só a ponta (borda esquerda + inferior) aparece. */
.sidebar:not(.pinned) .sidebar-submenu::after {
  content: '';
  position: absolute;
  left: -6px;
  top: var(--sb-arrow-top);
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: var(--sidebar-color);
  border-left: 1px solid var(--sb-border);
  border-bottom: 1px solid var(--sb-border);
  transform: rotate(45deg);
  border-bottom-left-radius: 2px;
  pointer-events: none;
}

.sidebar-submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  color: var(--sidebar-text-color);
  text-decoration: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 450;
  line-height: 20px;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-submenu a:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
/* Subitem selecionado: texto forte + pill neutra, igual ao pai — e a
   linha-guia ganha um "tick" azul na altura dele, que é o que diz
   "você está aqui" dentro do grupo. */
.sidebar-submenu a.active {
  background: var(--sb-selected-bg);
  color: var(--sb-text-strong);
  font-weight: 600;
  position: relative;
}
.sidebar-submenu a.active:hover { background: var(--sb-selected-bg); }
.sidebar.pinned .sidebar-submenu a.active::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: var(--sb-active-fg);
}

/* No balão (recolhido) os itens são um pouco mais altos (área de clique
   maior, já que a mão chegou ali de longe) e o estado segue o mesmo
   vocabulário neutro do acordeão. */
.sidebar:not(.pinned) .sidebar-submenu a {
  padding: 8px 10px;
  font-weight: 500;
  color: var(--sidebar-text-color);
}
.sidebar:not(.pinned) .sidebar-submenu a:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sidebar:not(.pinned) .sidebar-submenu a.active,
.sidebar:not(.pinned) .sidebar-submenu a.active:hover {
  background: var(--sb-selected-bg);
  color: var(--sb-text-strong);
}
.sidebar:not(.pinned) .sidebar-submenu a:focus-visible {
  outline: 2px solid var(--sb-active-fg);
  outline-offset: -2px;
}

/* Logo do canal à esquerda do rótulo (subitens de Marketplace). O <a>
   já é flex com gap 10px, então basta fixar a caixa: sem width/height
   explícitos a imagem entraria no tamanho natural e empurraria o texto
   para fora do balão. flex-shrink:0 impede que ela seja esmagada quando
   o rótulo é longo. */
.sidebar-submenu-logo {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  object-fit: contain;
  border-radius: 3px;
}

/* Pill "Beta"/"Novo" à direita do rótulo, como no hub /apps. */
.sidebar-submenu-pill {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sb-active-fg);
  background: var(--sb-active-bg);
  border: 1px solid rgba(0, 84, 194, 0.25);
}
html.dark .sidebar-submenu-pill { border-color: rgba(139, 166, 242, 0.35); }

.sidebar-version { display: none; }
.sidebar-profile { font-family: inherit; }

/* Active indicator - Left vertical bar (removed) */

/* Adjust content when sidebar is expanded */
.app {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.user {
  color: var(--sidebar-text)
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-12)
}

.card {
  border: 1px solid var(--border);
  border-radius: 10.8px;
  padding: 14.4px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)
}

.card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08)
}

.card-title {
  font-size: 10.8px;
  color: var(--text-muted);
  letter-spacing: .02em
}

.card-value {
  font-size: 23.4px;
  font-weight: 600
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.card-meta {
  font-size: 10.8px;
  color: var(--text-muted)
}

.card-metric {
  display: flex;
  flex-direction: column;
  gap: 5.4px
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10.8px
}

.table th,
.table td {
  border: 1px solid var(--border);
  padding: 10.8px;
  text-align: left
}

.table thead th {
  background: var(--muted);
  font-weight: 600
}

.table tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.02)
}

.table tr:hover {
  background: var(--muted)
}

.filters {
  display: flex;
  gap: 7.2px;
  margin-top: 7.2px
}

.filters input,
.filters select,
.filters button {
  padding: 5.4px
}

.pagination {
  display: flex;
  gap: 7.2px;
  margin-top: 10.8px;
  align-items: center
}

.kanban {
  display: flex;
  gap: var(--space-16);
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  min-height: 0;
  padding-bottom: 16px
}

.kanban-col {
  width: 306px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 10.8px;
  background: var(--muted);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0
}

.kanban-col-head {
  padding: 12.6px 14.4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border-radius: 10.8px 10.8px 0 0;
  flex-shrink: 0
}

.kanban-col-body {
  padding: 10.8px;
  display: flex;
  flex-direction: column;
  gap: 10.8px;
  flex: 1;
  overflow-y: auto;
  min-height: 0
}

.kanban-col-body.drag-over {
  background: rgba(34, 197, 94, 0.1);
  border: 2px dashed var(--brand)
}

.deal {
  border: 1px solid var(--border);
  border-radius: 10.8px;
  padding: 0;
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease
}

.deal:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px)
}

.deal:active {
  cursor: grabbing
}

.deal.dragging {
  opacity: 0.4;
  transform: scale(1.02) rotate(1deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 100
}

.deal-title {
  font-weight: 600;
  margin-bottom: 4px
}

.deal-meta {
  font-size: 10.8px;
  color: var(--text-muted)
}

.empty {
  padding: 28.8px;
  color: var(--text-muted);
  text-align: center;
  font-size: 12.6px
}

/* Line clamp utilities */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.btn-sm {
  padding: 5.4px 10.8px;
  font-size: 11.7px
}

.inline-form {
  display: flex;
  gap: 5.4px;
  align-items: center;
  margin-top: 5.4px
}

.chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 108px);
  overflow: hidden
}

/* Inbox already sizes the available workspace, including horizontal navigation. */
#inbox-grid .chat {
  height: 100%;
  min-height: 0;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10.8px;
  padding: 10.8px;
  border-bottom: 1px solid var(--border);
  background: var(--muted)
}


.chat-header .avatar {
  width: 32.4px;
  height: 32.4px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600
}

.chat-header .info .title {
  font-weight: 600
}

.chat-header .info .subtitle {
  font-size: 10.8px;
  color: var(--text-muted)
}

.chat-messages {
  flex: 1;
  overflow: auto;
  padding: 14.4px;
  display: flex;
  flex-direction: column;
  gap: 7.2px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent)
}

#chat-messages {
  visibility: hidden;
}

#chat-messages.scroll-ready {
  visibility: visible;
}

.bubble {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  gap: 3.6px
}

.bubble.me {
  align-self: flex-end
}

.bubble.them {
  align-self: flex-start
}

.bubble .text {
  border: 1px solid var(--border);
  border-radius: 10.8px;
  padding: 9px;
  background: var(--bg);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word
}

.bubble .text a {
  word-break: break-all;
  overflow-wrap: anywhere;
  hyphens: auto
}

.bubble.me .text {
  background: #dcfce7;
  border-color: #bbf7d0
}

.bubble.them .text {
  background: #fff;
  border-color: var(--border)
}

.bubble .meta {
  font-size: 10.8px;
  color: var(--text-muted);
  padding: 0 5.4px
}

/* Player de áudio: tamanho padrao compacto (evitar desproporção gigante) */
#chat-messages .audio-player,
#chat-panel .audio-player,
.chat-messages .audio-player,
.audio-player {
  max-width: 260px !important;
  min-width: 200px !important;
  width: fit-content !important;
  padding: 6px 8px !important;
  gap: 6px !important;
}
#chat-messages .audio-player .audio-play-btn,
#chat-panel .audio-player .audio-play-btn,
.chat-messages .audio-player .audio-play-btn,
.audio-player .audio-play-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}
#chat-messages .audio-player .audio-play-btn svg,
#chat-messages .audio-player .audio-play-btn [data-lucide],
.audio-player .audio-play-btn svg,
.audio-player .audio-play-btn [data-lucide] {
  width: 14px !important;
  height: 14px !important;
}
#chat-messages .audio-player .audio-progress-container,
#chat-panel .audio-player .audio-progress-container,
.audio-player .audio-progress-container {
  height: 24px !important;
  min-width: 80px !important;
}
#chat-messages .audio-player .audio-wave-bar,
.audio-player .audio-wave-bar {
  min-width: 2px !important;
}
/* Evitar que o player estique para preencher a bolha */
#chat-messages .audio-player,
#chat-panel .audio-player,
.chat-messages .audio-player {
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}
#chat-messages .audio-player .audio-speed-toggle-btn,
#chat-panel .audio-player .audio-speed-toggle-btn,
.audio-player .audio-speed-toggle-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 10px !important;
}

.composer {
  display: flex;
  gap: 7.2px;
  align-items: center;
  padding: 10.8px;
  border-top: 1px solid var(--border);
  background: var(--muted)
}

.composer textarea {
  flex: 1;
  min-height: 39.6px;
  max-height: 108px;
  resize: vertical
}

.form input,
.form select,
.form textarea {
  border: 1px solid var(--border);
  padding: 9px;
  border-radius: 7.2px;
  background: var(--bg);
  color: var(--text)
}

.form button {
  padding: 9px 10.8px;
  border-radius: 7.2px;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--text)
}

.form button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

.form label {
  font-size: 10.8px;
  color: #666;
  margin-bottom: 3.6px
}

.form {
  display: flex;
  flex-direction: column;
  gap: 7.2px;
  max-width: 360px;
  width: 100%;
  margin-top: 7.2px
}

.form input,
.form select,
.form button {
  padding: 7.2px
}

/* Formulário NPS: garantir bordas visíveis em todos os campos */
#survey-form input:not([type="hidden"]):not(:focus),
#survey-form select:not(:focus),
#survey-form textarea:not(:focus) {
  border: 1px solid #94a3b8;
}
html.dark #survey-form input:not([type="hidden"]):not(:focus),
html.dark #survey-form select:not(:focus),
html.dark #survey-form textarea:not(:focus) {
  border-color: #64748b;
}

.auth.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden
}

.auth-left {
  background: #0b1220;
  color: #e8eefc;
  padding: 43.2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start
}

.auth-left .brand {
  font-weight: 700;
  margin-bottom: 21.6px;
  font-size: 18px
}

.auth-left h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-8)
}

.auth-left p {
  color: var(--text-muted);
  margin: 0 0 var(--space-16)
}

.features {
  list-style: none;
  padding: 0;
  margin: var(--space-24) 0 0
}

.features li {
  margin: var(--space-8) 0;
  padding-left: 21.6px;
  position: relative
}

.features li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand)
}

.auth-right {
  padding: var(--space-48);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bg);
  overflow-y: auto
}

.auth-right>div {
  width: 100%;
  max-width: 360px
}

.auth-right h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-16);
  text-align: left
}

.auth-right p {
  margin-top: 14.4px;
  text-align: center;
  color: var(--text-muted)
}

.auth-right p a {
  color: var(--brand);
  text-decoration: none
}

.auth-right p a:hover {
  text-decoration: underline
}

.row {
  display: flex;
  justify-content: flex-end;
  margin: var(--space-8) 0
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 19px;
  border: 2px solid var(--border);
  background: var(--muted);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease
}

.btn:hover {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(103, 145, 234, 0.58);
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transition: none
}

.btn-primary:hover {
  background: var(--brand);
  color: #fff;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(103, 145, 234, 0.58);
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.btn-outline {
  background: transparent;
  border-color: var(--border)
}

.btn-ghost {
  background: transparent;
  border-color: transparent
}

/* Mobile Navigation - cores do sidebar desktop */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--sidebar-color);
  color: var(--sidebar-text-color);
  border-top: 1px solid var(--sb-border);
  box-shadow: none;
  padding: 7.2px 0;
  padding-bottom: calc(7.2px + env(safe-area-inset-bottom, 0px));
  gap: 0;
  border-radius: 0;
  z-index: 50;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

/* Esconder mobile-nav quando sidebar mobile estiver aberta */
body.mobile-sidebar-open .mobile-nav { display: none !important; }

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.6px;
  padding: 7.2px 10.8px;
  margin: 2px 4px;
  border-radius: 10px;
  color: var(--sidebar-text-color);
  opacity: 0.8;
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: opacity 0.2s ease, background 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  position: relative;
  max-width: 90px;
}

.mobile-nav-item:active {
  opacity: 1;
}

.mobile-nav-item:hover:not(.active) {
  opacity: 1;
  background: var(--sb-hover);
  border-radius: 10px;
}

.mobile-nav-item.active {
  opacity: 1;
  background: var(--sb-active-bg);
  color: var(--sb-active-fg);
  border-radius: 10px;
}

.mobile-nav-item.active::before {
  display: none;
}

.mobile-nav-item svg {
  width: 21.6px;
  height: 21.6px;
  stroke-width: 2;
}

.mobile-nav-item.active svg {
  color: var(--sb-active-fg);
}

.mobile-nav-item span {
  transition: opacity 0.2s ease;
}

.mobile-nav-item .mobile-nav-avatar {
  width: 21.6px;
  height: 21.6px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.8px solid transparent;
  transition: all 0.2s ease;
}

.mobile-nav-item:hover .mobile-nav-avatar {
  border-color: rgba(100, 116, 139, 0.3);
}

.mobile-nav-item.active .mobile-nav-avatar {
  border-color: var(--sb-active-fg);
  box-shadow: 0 0 0 2px var(--sb-selected-ring);
}

/* Indicator dot for notifications */
.mobile-nav-item[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: 3.6px;
  right: 7.2px;
  min-width: 16.2px;
  height: 16.2px;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8.1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4.5px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@media (max-width: 1024px) {
  .grid.lg\:grid-cols-\[380px_1fr_320px\] {
    grid-template-columns: 380px 1fr;
  }

  #contact-info-panel {
    display: none !important;
  }

  .sidebar {
    display: none !important;
  }

  /* Allow pages to scroll on mobile (html/body/app/content chain).
     Apenas o eixo Y: o atalho `overflow` define os DOIS eixos, e com
     !important vencia o `overflow-x: hidden` declarado ~55 linhas abaixo
     neste mesmo bloco — deixando a pagina rolar de lado no celular. */
  html, body {
    height: auto !important;
    overflow-y: auto !important;
  }

  .app {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .content {
    padding: 12px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible !important;
    flex: none !important;
  }

  /* Inbox: locked layout (no free scroll) */
  body:has(#inbox-grid) {
    overflow: hidden !important;
  }

  body:has(#inbox-grid) .app {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:has(#inbox-grid) .content {
    height: 100% !important;
    flex: 1 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Supervisão: mobile override */
  body.page-supervisao .content {
    overflow: visible !important;
  }

  .mobile-nav {
    display: flex;
  }

  .app {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* iOS Safari amplia a pagina sozinho ao focar um campo com fonte < 16px.
     Fixar 16px no mobile remove o gatilho sem mudar o tamanho aparente do
     texto no aparelho. Nao vale para checkbox/radio, que nao tem texto. */
  /* O :not([data-keep-font]) nao filtra nada na pratica: existe para levar a
     especificidade a (0,0,1,1) e vencer as utilitarias .text-sm/.text-xs do
     Tailwind (0,0,1,0). Sem ele, `select` e `textarea` — seletores de elemento —
     perdem. Serve tambem de escape: marque o campo para manter a fonte menor. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([data-keep-font]),
  select:not([data-keep-font]),
  textarea:not([data-keep-font]) {
    font-size: 16px;
  }

  /* Area de toque minima de 44px (WCAG 2.5.5). O dedo nao acerta o alvo de
     24x32 que o mouse acerta, e em listas os icones de acao ficam colados.

     min-width vence width, entao um componente que PRECISA continuar pequeno
     por desenho tem que pedir escape. E o caso da bolinha de status da
     listagem de pedidos (12px, tambem clicavel): sem a excecao ela viraria
     um circulo de 44px. Componente novo nessa situacao: adicione a classe
     .keep-touch-size em vez de mexer nesta regra. */
  button:not(.pedido-status-dot):not(.keep-touch-size),
  [role="button"]:not(.keep-touch-size),
  .btn:not(.keep-touch-size),
  a.btn:not(.keep-touch-size) {
    min-height: 44px;
    min-width: 44px;
  }


  /* Garantir que badges não sejam cortados no mobile */
  .chat-item {
    overflow: visible !important;
    padding-bottom: 22px !important;
    min-height: auto !important;
    position: relative;
    margin-bottom: 0 !important;
  }

  .chat-item-body {
    overflow: visible !important;
  }

  .chat-list {
    overflow-x: visible !important;
    overflow-y: auto !important;
    padding-bottom: 16px !important;
  }

  /* Aumentar espaço para badges quando quebram linha */
  .chat-item-body>div:last-child {
    margin-bottom: 0 !important;
  }

  /* Forçar padding extra para cards com badges */
  .chat-item:has(> .chat-item-body > div:last-child .flex-wrap) {
    padding-bottom: 24px !important;
  }

  /* Dashboard mobile fixes */
  .content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .dashboard-greeting-row {
    padding: 14px 16px !important;
  }
  .dashboard-greeting-row h2 {
    font-size: 16px !important;
    line-height: 1.2;
  }
  .dashboard-greeting-row > div:first-child {
    gap: 12px !important;
  }

  .dashboard-quick-actions {
    gap: 8px !important;
  }
  .dashboard-quick-actions > a {
    padding: 10px 8px !important;
    flex-direction: column;
    gap: 6px !important;
    text-align: center;
  }
  .dashboard-quick-actions > a > div {
    width: 36px !important;
    height: 36px !important;
  }
  .dashboard-quick-actions > a > span {
    font-size: 12px !important;
  }
}

/* Desktop: Show sidebar toggle on hover or when expanded */
@media (min-width: 1025px) {
  .sidebar {
    display: flex !important;
  }
}

/* Compact mobile nav for very small screens */
@media (max-width: 380px) {
  .mobile-nav {
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav-item {
    padding: 6px 8px;
    gap: 3px;
  }

  .mobile-nav-item svg {
    width: 20px;
    height: 20px;
  }

  .mobile-nav-item span {
    font-size: 10px;
  }
}

@media (max-width: 800px) {
  .grid.lg\:grid-cols-\[380px_1fr_320px\] {
    grid-template-columns: 1fr
  }

  .auth.split {
    grid-template-columns: 1fr;
    min-height: 100vh
  }

  .auth-left {
    display: none
  }

  .auth-right {
    padding: 32px 24px;
    justify-content: flex-start;
    padding-top: 48px
  }
}

/* Mobile optimizations for titles and content */
@media (max-width: 768px) {

  /* Reduce page titles on mobile */
  .content h1,
  .content h1.text-2xl,
  .content .text-2xl.font-bold {
    font-size: 18px !important;
    line-height: 1.3;
  }

  /* Hide subtitles on mobile to save space */
  .content h1+p.text-sm,
  .content h1+p.text-slate-600,
  .content .text-2xl+p.text-sm {
    display: none;
  }

  /* Reduce padding on mobile */
  .content {
    padding: 12px;
  }

  /* Compact header area */
  .content>div:first-child {
    margin-bottom: 8px !important;
  }

  /* Make tabs more compact */
  .tabs {
    gap: 4px;
  }

  .tabs .tab,
  .tab {
    padding: 6px 8px;
    font-size: 11px;
  }

  .tabs .badge,
  .tab .badge {
    padding: 1px 4px;
    font-size: 9px;
  }

  /* Fix grid height on mobile */
  .h-\[calc\(100vh-140px\)\] {
    height: calc(100vh - 100px) !important;
  }

  /* Reduce chat list padding and optimize space */
  .chat-list {
    max-height: calc(100vh - 200px);
  }

  /* Compact search area */
  .p-4.border-b {
    padding: 10px !important;
  }

  /* Compact tabs area */
  .tabs.grid-cols-3 {
    margin-bottom: 8px !important;
  }

  /* Compact conversation items */
  .chat-item {
    padding: 10px;
    min-height: 70px;
  }

  .chat-item .avatar {
    width: 36px;
    height: 36px;
  }

  .chat-item-head .name {
    font-size: 13px;
  }

  .chat-item-meta .preview {
    font-size: 11px;
    -webkit-line-clamp: 1;
  }

  /* Smaller tags */
  .chat-item .text-\[10px\] {
    font-size: 9px !important;
    padding: 2px 4px;
  }

  /* Smaller icons in tags */
  .chat-item .w-2\.5 {
    width: 8px !important;
    height: 8px !important;
  }

  /* Chat container — fill parent fully on mobile (remove white gap below composer) */
  .chat {
    height: 100% !important;
  }

  /* Chat panel — compact single-line header on mobile */
  .chat-header {
    padding: 6px 8px;
    gap: 6px;
    min-height: auto !important;
  }

  .chat-header .avatar {
    width: 30px;
    height: 30px;
  }

  .chat-header .info .title {
    font-size: 13px;
  }

  /* Hide subtitle (phone number) on mobile — 1 line only */
  .chat-header .info .subtitle {
    display: none !important;
  }

  /* Keep badges in one line, hide overflow */
  .chat-header .info > div:first-child {
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  /* Smaller badges on mobile */
  .chat-header .info .inline-flex {
    font-size: 9px !important;
    padding: 1px 5px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Hide extra badges (wallet/kanban) to keep 1 line */
  .chat-header .info > div:first-child > .inline-flex:nth-child(n+3) {
    display: none;
  }

  /* Push messages to the bottom (no big white gap) */
  #chat-messages::before {
    content: '';
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Composer — flush bottom, no extra padding on mobile */
  .composer {
    padding: 0 !important;
    border-top: none !important;
  }

  /* Pill focus style on mobile */
  #composer-pill:focus-within {
    border-color: var(--brand, #6366f1);
    box-shadow: 0 0 0 1px var(--brand, #6366f1);
  }

  /* Botão de voltar e "mais opções" do cabeçalho: ver o bloco
     "Chat aberto no celular" mais abaixo (as regras antigas aqui usavam
     escape duplo no seletor e nunca casaram com nada). */

  /* Always show close button on mobile (no hover) */
  .btn-close-conv {
    opacity: 1 !important;
  }

  /* Hide mobile nav when conversation is open */
  body.conversation-open .mobile-nav {
    display: none !important;
  }

  /* Adjust content padding when conversation is open (no nav) — flush to edges */
  body.conversation-open .content {
    padding: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body.conversation-open #inbox-grid {
    height: 100% !important;
    max-height: 100% !important;
  }

  body.conversation-open #chat-panel,
  body.conversation-open #chat-sidebar-container {
    height: 100% !important;
    max-height: 100% !important;
  }

  /* ==============================================
     CORREÇÃO MÍDIAS EM BALÕES DE MENSAGEM - MOBILE
     Problema: Imagens e vídeos extrapolam os limites
     dos balões de mensagem no mobile.
     
     Solução: Limitar tamanho máximo e garantir
     que mídias fiquem contidas nos balões.
     ============================================== */

  /* Limitar tamanho das mídias dentro das mensagens */
  .chat-messages img,
  .chat-messages video,
  #chat-messages-container img,
  #chat-messages-container video {
    max-width: 100% !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px;
  }

  /* Balões de mensagem - limitar largura */
  /* CORRIGIDO: Seletor mais específico para evitar afetar divisores de data e outros elementos */
  .bubble.message-bubble {
    max-width: 85% !important;
    overflow: visible;
    /* Permitir que reações e outros elementos sejam visíveis */
  }

  /* Garantir que o conteúdo interno do balão não estoure */
  .bubble .text {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    /* overflow: hidden removido - causava mensagens cortadas */
  }

  /* Permitir scroll horizontal apenas para conteúdo muito largo como código */
  .bubble .text pre,
  .bubble .text code {
    overflow-x: auto;
    max-width: 100%;
  }

  /* Container de mídia dentro do balão */
  .bubble img,
  .bubble video {
    max-width: 100% !important;
    max-height: 180px !important;
    object-fit: contain;
  }

  /* Preview modal de imagens */
  [class*="rounded-lg"] img:not(.avatar),
  [class*="rounded-xl"] img:not(.avatar) {
    max-width: 100%;
  }

  /* Stickers e imagens pequenas */
  .chat-messages img[alt="sticker"],
  .chat-messages img.sticker {
    max-width: 120px !important;
    max-height: 120px !important;
  }

  /* ==============================================
     CORREÇÃO LAYOUT MENSAGENS MOBILE
     Problema: Mensagens "amontoadas" ou não aparecendo
     
     Solução: Garantir flexbox correto e scroll adequado
     ============================================== */

  /* Container de mensagens - garantir scroll e flexbox */
  .chat-messages,
  #chat-messages {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    /* Crítico para flexbox funcionar */
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 8px !important;
    /* Espaçamento entre mensagens */
    padding: 12px !important;
  }

  /* Garantir que os balões de mensagem tenham espaçamento adequado */
  .chat-messages .bubble,
  #chat-messages .bubble {
    margin-bottom: 4px;
    flex-shrink: 0;
    /* Não comprimir as mensagens */
  }

  /* Divisores de data - não devem ter max-width limitado */
  .chat-messages>div:not(.bubble):not(.message-bubble),
  #chat-messages>div:not(.bubble):not(.message-bubble) {
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Container pai das mensagens - deve ocupar espaço disponível */
  .chat,
  .chat.flex.flex-col {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Garantir largura total no mobile */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app,
  .content {
    width: 100%;
    max-width: 100%;
  }

  /* Remover margens e padding do grid de inbox no mobile */
  #inbox-grid {
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remover border e rounded do container de conversas no mobile */
  #inbox-grid>div {
    border-radius: 0 !important;
    border: none !important;
  }

  /* Cards de conversa ocupam toda largura no mobile */
  .chat-item {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 0 !important;
  }

  /* Chat list sem margens no mobile */
  .chat-list {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Chat panel sem border e rounded no mobile */
  #chat-panel {
    border-radius: 0 !important;
    border: none !important;
  }

  /* Garantir que o conteúdo ocupe toda largura na inbox */
  /* O padding do content será removido apenas para a inbox */
  body:has(#inbox-grid) .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Reduzir tamanho do inbox e elementos para 90% */
  @media (min-width: 1024px) {
    body:has(#inbox-grid) .content {
      width: 90% !important;
      max-width: 90% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    #inbox-grid {
      width: 100% !important;
    }

    /* Reduzir tamanho dos elementos internos proporcionalmente */
    #inbox-grid .chat-item {
      padding: 9px !important;
      font-size: 0.9em;
    }

    #inbox-grid .chat-header {
      padding: 9px 9.9px !important;
      font-size: 0.9em;
    }

    #inbox-grid .composer {
      padding: 9.72px 9px !important;
      font-size: 0.9em;
    }

    #inbox-grid .message-bubble {
      font-size: 0.9em;
      padding: 4.5px 9px !important;
    }

    #inbox-grid input,
    #inbox-grid textarea,
    #inbox-grid button {
      font-size: 0.9em;
    }

    #inbox-grid .avatar {
      width: 28.8px !important;
      height: 28.8px !important;
    }

    #inbox-grid .chat-header .avatar {
      width: 28.8px !important;
      height: 28.8px !important;
    }

    /* Reduzir gaps e espaçamentos */
    #inbox-grid {
      gap: 2.7px !important;
    }

    #inbox-grid .gap-2 {
      gap: 0.45rem !important;
    }

    #inbox-grid .gap-3 {
      gap: 0.675rem !important;
    }

    #inbox-grid .p-3 {
      padding: 0.675rem !important;
    }

    #inbox-grid .mb-3 {
      margin-bottom: 0.675rem !important;
    }
  }

  /* Ajustar padding do header da lista de conversas */
  #inbox-grid>div:first-child>div:first-child {
    padding-left: 10.8px;
    padding-right: 10.8px;
  }

  /* Remover borda arredondada da coluna do chat (lista de conversas) */
  #inbox-grid>div:first-child {
    border-radius: 0 !important;
  }

  /* Mobile composer optimizations */
  .composer {
    gap: 0;
    padding: 0 !important;
    border-top: none !important;
  }

  .composer textarea {
    min-height: 32px !important;
    font-size: 16px !important;
    /* Prevent iOS zoom on focus */
  }

  /* Textarea inside pill — no border, transparent bg, thin */
  #composer-pill textarea {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 6px 4px !important;
    min-height: 34px !important;
    line-height: 1.4 !important;
    resize: none !important;
    flex: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Mobile composer menu animation */
  #mobile-composer-menu {
    animation: slideUp 0.15s ease-out;
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.flow-editor {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  margin-top: 16px
}

.flow-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.flow-nodes-list,
.flow-edges-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.flow-node-item,
.flow-edge-item {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.flow-node-item summary {
  cursor: pointer;
  font-weight: 600
}

.flow-node-edit {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.flow-node-edit .form textarea {
  min-height: 80px
}

.flow-canvas {
  position: relative;
  min-height: 480px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg)
}

.flow-node {
  position: absolute;
  width: 160px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04)
}

.flow-node-head {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  font-weight: 600
}

.flow-node-body {
  padding: 8px
}

.chat-list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px
}

.tabs {
  display: flex;
  gap: 8px;
  margin-top: 8px
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border: none;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  background: transparent;
  position: relative
}

.tab .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  margin-left: 4px;
}

.tab.active {
  border: none
}

.tab svg {
  width: 18px;
  height: 18px
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px
}

.chat-item {
  display: flex;
  gap: 10.8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 10.8px;
  background: var(--bg);
  text-decoration: none;
  color: inherit
}

.chat-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  z-index: 10
}

/* Tooltip para ícone de conexão no avatar */
.channel-icon-tooltip {
  position: relative;
  cursor: pointer
}

.channel-icon-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15)
}

.channel-icon-tooltip:hover::after {
  opacity: 1
}

.chat-item .avatar {
  width: 32.4px;
  height: 32.4px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600
}

.chat-item-body {
  display: flex;
  flex-direction: column;
  gap: 3.6px;
  flex: 1
}

.chat-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.chat-item-head .name {
  font-weight: 600
}

.chat-item-head .time {
  font-size: 10.8px;
  color: var(--text-muted)
}

.chat-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.chat-item-meta .preview {
  color: var(--text-muted)
}

.chat-item-meta .status {
  font-size: 10.8px;
  color: var(--text-muted)
}

.chat-item.selected {
  background: rgba(34, 197, 94, 0.05);
  border-left: 3.6px solid var(--brand)
}

.bubble.me .text {
  background: var(--primary-color);
  color: #fff;
  border: none
}

.bubble.me .text a {
  color: #bfdbfe !important;
  text-decoration: underline;
}

.bubble.them .text {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)
}

.composer textarea:focus {
  outline: none;
  ring: 2px;
  ring-color: var(--brand)
}

.tab.active {
  background: transparent;
  font-weight: 600
}

/* Toast Animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

/* Profile Sidebar */
#profile-sidebar-content {
  max-height: 100vh;
  overflow-y: auto;
}

#profile-sidebar-content::-webkit-scrollbar {
  width: 5.4px;
}

#profile-sidebar-content::-webkit-scrollbar-track {
  background: #f1f5f9;
}

#profile-sidebar-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2.7px;
}

#profile-sidebar-content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Composer buttons */
.composer .btn {
  flex-shrink: 0;
  min-width: 39.6px;
  min-height: 39.6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.composer .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.composer .btn svg {
  pointer-events: none;
}

/* Emoji Picker */
#emoji-picker {
  max-height: 270px;
  overflow-y: auto;
  z-index: 1000;
}

#emoji-picker .emoji-item {
  cursor: pointer;
  transition: background-color 0.15s ease;
  user-select: none;
}

#emoji-picker .emoji-item:active {
  transform: scale(0.95);
}

/* Plus menu popup (portal no body) */
#composer-plus-menu-content {
  animation: fadeIn 0.15s ease-out;
}

#composer-plus-btn svg {
  transition: transform 0.2s ease;
}

/* Emoji picker inline */
#emoji-picker-inline {
  animation: fadeIn 0.15s ease-out;
}

/* File preview */
#file-preview {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.15s ease-out;
}

/* Chat item improvements */
.chat-list {
  gap: 4px;
  margin-top: 0;
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
}

.chat-item {
  padding: 10.8px;
  border-radius: 0;
  border: none;
  transition: all 0.15s ease;
  /* Mobile touch optimization - removes 300ms tap delay */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  /* Ensure pointer events work correctly */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Make all child elements pass clicks through to the link */
.chat-item * {
  pointer-events: none;
}

/* Re-enable pointer events only for interactive elements */
.chat-item .btn-close-conv,
.chat-item .btn-preview-conv {
  pointer-events: auto;
}

/* Active state for better mobile feedback */
.chat-item:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark .chat-item:active {
  background-color: rgba(255, 255, 255, 0.05);
}

.chat-item:hover {
  box-shadow: none;
}

.chat-item:hover .btn-close-conv {
  opacity: 1;
}

.btn-close-conv {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Note: .btn-close-conv opacity:1 moved to main mobile media query above */

.chat-item .avatar {
  width: 36px;
  height: 36px;
  font-size: 12.6px;
}

.chat-item-head .name {
  font-size: 12.6px;
}

.chat-item-meta .preview {
  font-size: 10.8px;
  line-height: 1.4;
}

/* Loading states */
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Better scrollbar for chat list */
.chat-list::-webkit-scrollbar {
  width: 5.4px;
}

.chat-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2.7px;
}

.chat-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

.dark .chat-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

.dark .chat-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Error state */
.error-state {
  animation: fadeIn 0.3s ease;
}

/* Chat panel loading */
#chat-panel .animate-spin {
  animation: spin 1s linear infinite;
}

/* Drag & Drop Overlay */
#drop-overlay {
  animation: fadeIn 0.15s ease;
  cursor: copy;
}

#drop-overlay>div {
  animation: bounceIn 0.25s ease;
  transform-origin: center;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* File toast animation */
#file-toast {
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  0% {
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* Message Actions (Edit/Delete) */
.bubble.me {
  position: relative;
}

.bubble.me .message-actions {
  position: absolute;
  right: calc(100% + 7.2px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 3.6px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

/* Mostrar botões quando hover no bubble */
.bubble.me:hover .message-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Manter visível quando hover nos botões (via JavaScript) */
.bubble.me .message-actions.show-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.message-actions button {
  width: 25.2px;
  height: 25.2px;
  border-radius: 50%;
  background: white;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark .message-actions button {
  background: #303b50;
  border-color: #475569;
}

.message-actions button:hover {
  transform: scale(1.1);
}

.msg-edit-btn:hover {
  background: #f0fdf4;
  border-color: #86efac;
}

.dark .msg-edit-btn:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: #0054c2;
}

.msg-delete-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

.msg-delete-btn:hover i {
  color: #ef4444 !important;
}

.dark .msg-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

/* Deleted message style */
.bubble .deleted-message {
  font-style: italic;
  opacity: 0.6;
}

/* Toast for message actions */
#msg-action-toast {
  animation: slideUp 0.3s ease;
}

/* Kanban - modo escuro */
html.dark .kanban-col,
.dark .kanban-col,
.dark.theme .kanban-col {
  background-color: #172033 !important;
  border-color: #303b50 !important;
}

html.dark .kanban-col-head,
.dark .kanban-col-head,
.dark.theme .kanban-col-head {
  background-color: #111a2b !important;
  border-color: #303b50 !important;
}

html.dark .kanban-col-body,
.dark .kanban-col-body,
.dark.theme .kanban-col-body {
  background-color: #172033 !important;
}

html.dark .deal,
.dark .deal,
.dark.theme .deal {
  background-color: #1d2940 !important;
  border-color: #303b50 !important;
}

@keyframes wave {

  0%,
  100% {
    transform: scaleY(0.5);
  }

  50% {
    transform: scaleY(1.2);
  }
}

/* Notificações */
.notifications-btn {
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
}

.notifications-btn {
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
}

.notifications-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #ffffff;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 5px;
  border: none;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.notifications-badge.hidden {
  display: none;
}

/* Modal de Notificações */
.notifications-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.notifications-modal.hidden {
  display: none;
}

.notifications-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease;
}

.notifications-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: var(--bg);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.dark .notifications-modal-content {
  background: #172033;
  border: 1px solid #303b50;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.notifications-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.notifications-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notifications-title-icon {
  width: 24px;
  height: 24px;
  color: var(--brand);
  flex-shrink: 0;
}

.notifications-modal-title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.notifications-count-text {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

.notifications-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.notifications-modal-close:hover {
  background: var(--muted);
  color: var(--text);
}

.notifications-modal-close:active {
  transform: scale(0.95);
}

.notifications-modal-close i {
  width: 20px;
  height: 20px;
}

.notifications-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(85vh - 180px);
  padding: 8px;
}

.notifications-list::-webkit-scrollbar {
  width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
  background: transparent;
}

.notifications-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.notifications-list::-webkit-scrollbar {
  width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
  background: transparent;
}

.notifications-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.dark .notifications-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

/* Cards de Notificações */
.notification-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
  display: flex;
  gap: 14px;
  transition: all 0.2s ease;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.dark .notification-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.notification-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.notification-card:hover .notification-card-icon {
  transform: scale(1.05);
}

.notification-card-icon i {
  width: 22px;
  height: 22px;
}

.notification-card-body {
  flex: 1;
  min-width: 0;
}

.notification-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.notification-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
}

.notification-card-dismiss {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-top: -2px;
  position: relative;
  z-index: 10;
}

.notification-card:hover .notification-card-dismiss {
  opacity: 1;
}

.notification-card-dismiss:hover {
  background: var(--muted);
  color: var(--text);
}

.notification-card-dismiss i {
  width: 14px;
  height: 14px;
}

.notification-card-message {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.notification-card-type {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.notification-card-time {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.notification-card-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  text-decoration: none;
}

.notification-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}

.notification-icon i {
  width: 18px;
  height: 18px;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
}

.notification-message {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-time {
  font-size: 11px;
  color: var(--text-muted);
}

.notifications-loading {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.notifications-loading i {
  width: 32px;
  height: 32px;
  color: var(--brand);
}

.notifications-empty {
  padding: 60px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.notifications-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.notifications-empty-icon i {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  opacity: 0.6;
}

.notifications-empty h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.notifications-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 280px;
}

.notifications-error {
  padding: 48px 24px;
  text-align: center;
  color: #ef4444;
  font-size: 14px;
}

.notifications-modal-footer {
  padding: 20px 28px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.notifications-dismiss-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ef4444;
  background: transparent;
  border: 1px solid #ef4444;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  padding: 10px 16px;
  border-radius: 10px;
  width: 100%;
  cursor: pointer;
}

.notifications-dismiss-all:hover {
  background: #ef4444;
  color: white;
}

.notifications-dismiss-all:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.notifications-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--brand);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  padding: 10px 16px;
  border-radius: 10px;
  width: 100%;
}

.notifications-view-all:hover {
  background: var(--muted);
  color: var(--brand);
  gap: 12px;
}

.notifications-view-all i {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.notifications-view-all:hover i {
  transform: translateX(2px);
}

/* ==============================================
   CORREÇÃO VIEWPORT MOBILE - INPUT CORTADO
   Problema: No navegador mobile, a barra de endereços/navegação
   ocupa espaço e 100vh não reflete a altura visível real,
   fazendo o input de mensagem ficar cortado.
   
   Solução: Usar dvh (dynamic viewport height) que considera
   a altura real disponível. Esta correção NÃO afeta o PWA
   pois ele roda em modo standalone (tela cheia).
   ============================================== */

/* Suporte para navegadores que suportam dvh */
@supports (height: 100dvh) {
  /* Aplicar apenas em mobile (não desktop) */
  @media (max-width: 1023px) {
    /* Não aplicar em PWA (standalone mode) */
    @media not all and (display-mode: standalone) {

      /* Container principal do inbox */
      #inbox-grid {
        height: calc(100dvh - 60px) !important;
        max-height: calc(100dvh - 60px) !important;
      }

      /* Container do chat + sidebar */
      #chat-sidebar-container {
        height: 100% !important;
        max-height: calc(100dvh - 60px) !important;
      }

      /* Painel do chat */
      #chat-panel {
        height: 100% !important;
        max-height: calc(100dvh - 60px) !important;
      }

      /* Área de mensagens - ajustar para deixar espaço para input */
      .chat-messages,
      #chat-messages {
        max-height: calc(100dvh - 180px) !important;
        min-height: 0 !important;
        /* Importante para flexbox shrink funcionar */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Scroll suave no iOS */
      }

      /* App/Content — only lock height for inbox (other pages need free scroll) */
      body:has(#inbox-grid) .app {
        height: 100dvh !important;
        max-height: 100dvh !important;
      }

      body:has(#inbox-grid) .content {
        height: 100dvh !important;
        max-height: 100dvh !important;
      }

      /* Conversa aberta: nav escondida, usar 100% da tela sem descontar nav */
      body.conversation-open .content {
        padding: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
      }

      body.conversation-open #inbox-grid {
        height: 100dvh !important;
        max-height: 100dvh !important;
      }

      body.conversation-open #chat-sidebar-container,
      body.conversation-open #chat-panel {
        height: 100% !important;
        max-height: 100dvh !important;
      }

      body.conversation-open .chat-messages,
      body.conversation-open #chat-messages {
        max-height: calc(100dvh - 100px) !important;
      }
    }
  }
}

/* Fallback para navegadores que não suportam dvh */
/* Usar -webkit-fill-available como alternativa */
@supports not (height: 100dvh) {
  @media (max-width: 1023px) {
    #inbox-grid {
      height: calc(-webkit-fill-available - 60px);
      height: calc(100vh - 60px - env(safe-area-inset-bottom, 0px));
    }

    /* Área de mensagens - fallback */
    .chat-messages,
    #chat-messages {
      max-height: calc(100vh - 180px - env(safe-area-inset-bottom, 0px)) !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    /* Conversa aberta: usar tela toda */
    body.conversation-open .content {
      padding: 0 !important;
    }

    body.conversation-open #inbox-grid {
      height: 100vh !important;
      height: calc(100vh - env(safe-area-inset-bottom, 0px)) !important;
      max-height: 100vh !important;
    }

    body.conversation-open .chat-messages,
    body.conversation-open #chat-messages {
      max-height: calc(100vh - 100px - env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}

/* A navegação inferior é fixa e não participa do fluxo. A antiga reserva de
   60px era menor que a barra renderizada (76px) e nem era aplicada
   no PWA standalone, deixando o último atendimento visível por baixo dela. */
@media (max-width: 1024px) {
  body:has(#inbox-grid) {
    --inbox-mobile-nav-height: 76px;
  }

  body:not(.conversation-open):has(#inbox-grid) #inbox-grid {
    height: calc(100vh - var(--inbox-mobile-nav-height) - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100dvh - var(--inbox-mobile-nav-height) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - var(--inbox-mobile-nav-height) - env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
  }
}

@media (max-width: 380px) {
  body:has(#inbox-grid) {
    --inbox-mobile-nav-height: 68px;
  }
}

/* Mobile: ajustar modal */
@media (max-width: 768px) {
  .notifications-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .notifications-modal-content {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 20px;
  }

  .notifications-modal-header {
    padding: 16px 20px;
  }

  .notifications-modal-title h2 {
    font-size: 18px;
  }

  .notification-card {
    padding: 14px;
  }
}

/* ===== GRAVAÇÃO DE ÁUDIO - Interface Moderna (WhatsApp Style) ===== */
@keyframes waveform-1 {

  0%,
  100% {
    height: 8px;
  }

  50% {
    height: 24px;
  }
}

@keyframes waveform-2 {

  0%,
  100% {
    height: 16px;
  }

  50% {
    height: 8px;
  }
}

@keyframes waveform-3 {

  0%,
  100% {
    height: 12px;
  }

  50% {
    height: 28px;
  }
}

.animate-waveform-1 {
  animation: waveform-1 0.8s ease-in-out infinite;
}

.animate-waveform-2 {
  animation: waveform-2 0.6s ease-in-out infinite;
}

.animate-waveform-3 {
  animation: waveform-3 0.7s ease-in-out infinite;
}

.waveform-bar {
  min-height: 4px;
  transition: height 0.1s ease;
}

/* Parar animação quando pausado */
#recorder-state-paused .waveform-bar,
.waveform-paused .waveform-bar {
  animation: none !important;
  height: 12px !important;
}

/* Estilos para o gravador moderno */
#audio-recorder-modern {
  transition: all 0.2s ease;
}

#recorder-state-recording,
#recorder-state-paused {
  transition: opacity 0.2s ease;
}

/* Preview progress bar hover effect */
#preview-progress-container:hover {
  height: 6px;
}

#preview-progress-container:hover #preview-progress-bar {
  height: 100%;
}

/* === Reply-to-original scroll highlight === */
@keyframes messageHighlightFlash {
  0% {
    background-color: rgba(250, 204, 21, 0.4);
  }
  70% {
    background-color: rgba(250, 204, 21, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.message-highlight {
  animation: messageHighlightFlash 1.8s ease-out forwards;
  border-radius: inherit;
}

html.dark .message-highlight {
  animation-name: messageHighlightFlashDark;
}

@keyframes messageHighlightFlashDark {
  0% {
    background-color: rgba(250, 204, 21, 0.25);
  }
  70% {
    background-color: rgba(250, 204, 21, 0.1);
  }
  100% {
    background-color: transparent;
  }
}

/* Setinha minimalista ao lado da busca */
.inbox-toolbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.15s;
  border-radius: 50%;
}
.inbox-toolbar-toggle:hover {
  color: #475569;
  background: rgba(0, 0, 0, 0.05);
}
.dark .inbox-toolbar-toggle:hover {
  color: #c6d1e3;
  background: rgba(255, 255, 255, 0.06);
}
.inbox-toolbar-toggle svg {
  transition: transform 0.2s;
}
.inbox-toolbar-toggle.rotated svg {
  transform: rotate(180deg);
}

/* Botões colapsáveis via clique */
.inbox-toolbar-collapsible {
  max-height: 92px;
  overflow: hidden;
  opacity: 1;
  /* folga p/ o anel de hover/foco dos botões (box-shadow 2px) não ser cortado
     pelo overflow:hidden; a margem negativa mantém o alinhamento original */
  padding: 3px 3px 0;
  margin-left: -3px;
  margin-right: -3px;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding-top 0.3s ease;
}
.inbox-toolbar-collapsible.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
}

/* Listas personalizadas no inbox — Container (WhatsApp Business style) */
.lista-filter-box {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 0;
  margin-bottom: 4px;
}
.lista-filter-row-fixed {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
/* Botão expandir + painel dropdown */
.lista-expand-wrapper {
  position: relative;
  flex-shrink: 0;
}
.lista-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s;
  padding: 0;
}
.lista-expand-btn:hover {
  background: #e2e8f0;
  color: #475569;
}
.dark .lista-expand-btn {
  border-color: #303b50;
  background: #243149;
  color: #9ba9bf;
}
.dark .lista-expand-btn:hover {
  background: #303b50;
  color: #c6d1e3;
}
.lista-expand-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 50;
  padding: 4px;
}
.dark .lista-expand-panel {
  background: #1d2940;
  border-color: #303b50;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.lista-expand-wrapper.open .lista-expand-panel {
  display: flex;
  flex-direction: column;
}
.lista-expand-wrapper.open .lista-expand-btn {
  background: #e2e8f0;
  color: #475569;
}
.dark .lista-expand-wrapper.open .lista-expand-btn {
  background: #303b50;
  color: #c6d1e3;
}
.lista-expand-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border: none;
  background: none;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
  text-align: left;
  white-space: nowrap;
}
.lista-expand-item:hover {
  background: #f1f5f9;
}
.dark .lista-expand-item {
  color: #e4eaf5;
}
.dark .lista-expand-item:hover {
  background: #243149;
}
.lista-expand-count {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 9999px;
}
.dark .lista-expand-count {
  background: #333;
  color: #9ba9bf;
}

/* Divisórias por lista (aparecem só no filtro "Tudo" do atendimento) */
.lista-group-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 16px 4px;
  user-select: none;
  pointer-events: none;
}
.lista-group-divider:first-child {
  margin-top: 4px;
}
.lista-group-divider .lgd-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lista-group-divider .lgd-line {
  flex: 1;
  height: 1px;
  background: #e9edf2;
}
.lista-group-divider .lgd-count {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
}
.dark .lista-group-divider .lgd-name {
  color: #6b7280;
}
.dark .lista-group-divider .lgd-line {
  background: #243149;
}
.dark .lista-group-divider .lgd-count {
  color: #4b5563;
}

/* Pill-style filter buttons */
.lista-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.lista-pill:hover {
  background: #e2e8f0;
  color: #334155;
}
.lista-pill.active {
  background: var(--primary-color, #0054c2);
  border-color: var(--primary-color, #0054c2);
  color: white;
}
.lista-pill:has(.lista-pill-label) {
  flex-shrink: 1;
  min-width: 0;
}
.lista-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  display: inline-block;
  min-width: 0;
}
.lista-pill-count {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* Dark mode pills */
.dark .lista-pill {
  background: #243149;
  border-color: #303b50;
  color: #9ba9bf;
}
.dark .lista-pill:hover {
  background: #333333;
  color: #c6d1e3;
}
.dark .lista-pill.active {
  background: var(--primary-color, #0054c2);
  border-color: var(--primary-color, #0054c2);
  color: white;
}

/* Pill dinâmica (lista selecionada do dropdown) */
.lista-pill-dynamic {
  flex-shrink: 1;
  min-width: 0;
  background: color-mix(in srgb, var(--primary-color, #0054c2) 15%, white) !important;
  border-color: var(--primary-color, #0054c2) !important;
  color: var(--primary-color, #0054c2) !important;
  gap: 4px;
  max-width: 130px;
  overflow: hidden;
}
.lista-pill-dynamic span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lista-pill-dynamic[hidden],
.lista-pill-dynamic.hidden {
  display: none !important;
}
.lista-pill-dynamic.active {
  background: var(--primary-color, #0054c2) !important;
  border-color: var(--primary-color, #0054c2) !important;
  color: white !important;
}
.dark .lista-pill-dynamic.active {
  background: var(--primary-color, #0054c2) !important;
  border-color: var(--primary-color, #0054c2) !important;
  color: white !important;
}

/* More button & dropdown */
.lista-more-wrapper {
  position: relative;
  flex-shrink: 0;
}
.lista-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.lista-more-btn:hover {
  background: #e2e8f0;
  color: #334155;
}
.dark .lista-more-btn {
  background: #243149;
  border-color: #303b50;
  color: #9ba9bf;
}
.dark .lista-more-btn:hover {
  background: #333333;
  color: #c6d1e3;
}

/* Dropdown */
.lista-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 8px;
}
.dark .lista-dropdown {
  background: #1d2940;
  border-color: #303b50;
}
.lista-dropdown-items {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.lista-dropdown-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.lista-dropdown-item:hover {
  background: #e2e8f0;
  color: #334155;
}
.lista-dropdown-item.active {
  background: var(--primary-color, #0054c2);
  border-color: var(--primary-color, #0054c2);
  color: white;
  font-weight: 600;
}
.dark .lista-dropdown-item {
  background: #243149;
  border-color: #303b50;
  color: #c6d1e3;
}
.dark .lista-dropdown-item:hover {
  background: #333;
  color: #e4eaf5;
}
.dark .lista-dropdown-item.active {
  background: var(--primary-color, #0054c2);
  border-color: var(--primary-color, #0054c2);
  color: white;
}
.lista-dropdown-divider {
  width: 100%;
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}
.dark .lista-dropdown-divider {
  background: #303b50;
}
.lista-dropdown-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: none;
  border: 1px dashed #d1d5db;
  border-radius: 18px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--primary-color, #0054c2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.lista-dropdown-add:hover {
  background: #f0fdf4;
  border-color: var(--primary-color, #0054c2);
}
.dark .lista-dropdown-add {
  border-color: #303b50;
}
.dark .lista-dropdown-add:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--primary-color, #0054c2);
}

/* Legacy .status-tab kept for other uses */
.custom-status-bar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.custom-status-bar::-webkit-scrollbar {
  display: none;
}
.status-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.status-tab:hover {
  background: #f1f5f9;
}
.status-tab.active {
  background: var(--primary-color, #0054c2);
  color: white;
  border-color: var(--primary-color, #0054c2);
}
.status-tab .badge {
  font-size: 9px;
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 5px;
  border-radius: 9999px;
}
.status-tab.active .badge {
  background: rgba(255, 255, 255, 0.25);
}
.dark .status-tab {
  border-color: #2a2a2a;
  color: #9ba9bf;
}
.dark .status-tab:hover {
  background: #1d2940;
}
.dark .status-tab.active {
  border-color: var(--primary-color, #0054c2);
}

/* Botão status no hover do chat-item */
.btn-status-conv {
  opacity: 0;
  transition: opacity 0.15s;
}
.chat-item:hover .btn-status-conv {
  opacity: 1;
}
.btn-status-conv:hover {
  color: #10b981 !important;
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

/* ===== Mobile sidebar menu (tema igual sidebar desktop) ===== */
.mobile-sidebar-themed {
  background-color: var(--sidebar-color) !important;
  color: var(--sidebar-text-color) !important;
}

.mobile-sidebar-header {
}

.mobile-sidebar-close {
  color: var(--sidebar-text-color);
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s;
}
.mobile-sidebar-close:hover {
  opacity: 1;
  background: var(--sb-hover);
}

/* Mesma arte do desktop: azul no claro, invertida para branco no escuro. */
html.dark .mobile-brand-logo {
  filter: brightness(0) invert(1);
}

.mobile-sidebar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  margin: 2px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidebar-text-color);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  width: calc(100% - 20px) !important;
  box-sizing: border-box;
}

.mobile-sidebar-item:hover,
.mobile-sidebar-item:active {
  background: var(--sb-hover);
  color: var(--sb-text-strong);
}

.mobile-sidebar-item.active {
  background: var(--sb-active-bg);
  color: var(--sb-active-fg);
  font-weight: 600;
}

.mobile-sidebar-item i,
.mobile-sidebar-item svg {
  flex-shrink: 0;
  color: currentColor;
  stroke: currentColor;
  box-shadow: none;
  filter: none;
  text-shadow: none;
}

.mobile-sidebar-footer {
  border-top: 1px solid var(--sb-border);
  padding: 6px 0;
}

/* Menu mobile: reaproveita o markup do sidebar desktop (mesmos grupos e
   submenus — ver $sbNavHtml em header.php). As regras do desktop são
   escopadas em `.sidebar.pinned`, e o container aqui NÃO é `.sidebar` (a
   regra base fixa largura de rail), então o estado "aberto" é replicado
   sob #mobile-sidebar-menu, com toques maiores para o dedo. */
#mobile-sidebar-menu .mobile-sidebar-nav { padding: 6px 10px; }
#mobile-sidebar-menu .sidebar-nav {
  margin: 0;
  padding: 0;
  overflow: visible;
  gap: 2px;
}
#mobile-sidebar-menu .sidebar-group { gap: 2px; }
#mobile-sidebar-menu .sidebar-link {
  padding: 12px 12px;
  gap: 14px;
  font-size: 14px;
  border-radius: 10px;
}
#mobile-sidebar-menu .sidebar-link.active {
  background: var(--sb-active-bg);
  color: var(--sb-active-fg);
  font-weight: 600;
}
#mobile-sidebar-menu .sidebar-link-wrap.open > .sidebar-link.active {
  background: transparent;
  color: var(--sb-text-strong);
}
#mobile-sidebar-menu .sidebar-text { opacity: 1; transform: none; }
#mobile-sidebar-menu .sidebar-icon svg { width: 20px; height: 20px; }
#mobile-sidebar-menu .sidebar-submenu-chevron { display: inline-flex; opacity: 0.6; }
#mobile-sidebar-menu .sidebar-link-wrap.open .sidebar-submenu-chevron { transform: rotate(180deg); opacity: 0.9; }
#mobile-sidebar-menu .sidebar-submenu {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 0 0 21px;
  transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-sidebar-menu .sidebar-link-wrap.open .sidebar-submenu { grid-template-rows: 1fr; }
#mobile-sidebar-menu .sidebar-submenu-clip {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.22s;
}
#mobile-sidebar-menu .sidebar-link-wrap.open .sidebar-submenu-clip { visibility: visible; transition-delay: 0s; }
#mobile-sidebar-menu .sidebar-submenu-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px;
  padding: 2px 0 2px 12px;
  border-left: 1px solid var(--sb-border);
  opacity: 0;
  transition: opacity 0.16s ease;
}
#mobile-sidebar-menu .sidebar-link-wrap.open .sidebar-submenu-list { opacity: 1; transition-delay: 0.05s; }
#mobile-sidebar-menu .sidebar-submenu a {
  padding: 10px 12px;
  font-size: 14px;
  white-space: normal;
}
#mobile-sidebar-menu .sidebar-submenu a.active::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: var(--sb-active-fg);
}

.mobile-sidebar-profile {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.mobile-sidebar-profile i,
.mobile-sidebar-profile svg {
  color: currentColor;
}

/* ===== Right sidebar as fullscreen overlay on mobile (<1024px) ===== */
@media (max-width: 1023px) {
  #right-sidebar.mobile-open {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 60 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    border: none !important;
    animation: slideInRight 0.2s ease-out;
  }

  #right-sidebar.mobile-open .mobile-back-btn {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin-left: -6px;
    border-radius: 9999px;
    -webkit-tap-highlight-color: transparent;
  }

  #right-sidebar.mobile-open .mobile-back-btn i,
  #right-sidebar.mobile-open .mobile-back-btn svg {
    width: 24px !important;
    height: 24px !important;
  }

  #right-sidebar.mobile-open .right-sidebar-header {
    padding: 8px 12px 8px 10px;
    min-height: 56px;
  }

  @keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
}

/* ===== Chat aberto no celular/tablet (<1024px): cabeçalho da conversa =====
   O botão de "mais opções" usa o padrão redondo dos apps de mensagem. */
@media (max-width: 1023px) {
  .chat-header {
    padding: 8px 10px 8px 6px !important;
    gap: 8px !important;
    min-height: 56px !important;
  }

  .chat-header .chat-header-icon-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: var(--text) !important;
    box-shadow: none !important;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .chat-header .chat-header-icon-btn:active {
    background: var(--muted) !important;
  }

  .chat-header .chat-header-icon-btn i,
  .chat-header .chat-header-icon-btn svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.25;
  }

  .chat-header .avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  /* O nome encolhe só quando falta espaço; o limite fixo de 120px cortava
     o nome mesmo com metade da barra vazia. */
  .chat-header .info .title {
    font-size: 15px;
    min-width: 0;
    max-width: none !important;
  }
}

/* Arbitrary color rules for tab styling */
.border-\[#0054c2\] {
  border-color: #0054c2 !important;
}

.text-\[#0054c2\] {
  color: #0054c2 !important;
}

.dark\:text-\[#7d92d0\] {
  color: #7d92d0 !important;
}

html.dark .dark\:text-\[#7d92d0\] {
  color: #7d92d0 !important;
}

/* Global neutral hover background override (light mode, excludes sidebar) */
html:not(.dark) .hover\:bg-slate-50:not(.sidebar):not(.sidebar *):hover,
html:not(.dark) .hover\:bg-slate-100:not(.sidebar):not(.sidebar *):hover,
html:not(.dark) .hover\:bg-gray-50:not(.sidebar):not(.sidebar *):hover,
html:not(.dark) .hover\:bg-gray-100:not(.sidebar):not(.sidebar *):hover,
html:not(.dark) .hover\:bg-neutral-50:not(.sidebar):not(.sidebar *):hover,
html:not(.dark) .hover\:bg-neutral-100:not(.sidebar):not(.sidebar *):hover,
html:not(.dark) .hover\:bg-zinc-50:not(.sidebar):not(.sidebar *):hover,
html:not(.dark) .hover\:bg-zinc-100:not(.sidebar):not(.sidebar *):hover {
  background-color: #f3f3f3 !important;
}

/* Global primary-button hover: keep fill/text stable and show only the standard outline. */
.bg-\[\#0054c2\]:hover,
.dark\:bg-\[\#0054c2\]:hover,
.hover\:bg-\[\#4e67b1\]:hover,
.dark\:hover\:bg-\[\#4e67b1\]:hover,
.hover\:opacity-90.bg-\[\#0054c2\]:hover {
  background-color: #0054c2 !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(103, 145, 234, 0.58) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.bg-\[var\(--primary-color\)\]:hover {
  background-color: var(--primary-color, #0054c2) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(103, 145, 234, 0.58) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.hover\:opacity-90.bg-brand:hover,
.btn-brand:hover {
  background-color: var(--brand, #0054c2) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(103, 145, 234, 0.58) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ===== Mobile: sem "setinha de voltar" no cabeçalho das páginas =====
   No celular a navegação é pelo menu inferior / botão do sistema; o link
   de voltar que existe no desktop só ocupa espaço. Ficam de fora os
   botões que só existem no mobile (lg:hidden / sm:hidden / .mobile-back-btn),
   porque esses são a única forma de sair da tela (inbox, chat interno). */
@media (max-width: 768px) {
  a:has(> i[data-lucide="arrow-left"]):not(.lg\:hidden):not(.sm\:hidden):not(.mobile-back-btn),
  a:has(> svg.lucide-arrow-left):not(.lg\:hidden):not(.sm\:hidden):not(.mobile-back-btn),
  a.product-form-back,
  a[href="/configuracoes"]:has(> i[data-lucide="chevron-left"]),
  a[href="/configuracoes"]:has(> svg.lucide-chevron-left) {
    display: none !important;
  }
  /* Wrapper que só continha o link de voltar não deixa margem sobrando */
  div.flex.items-center.mb-4:has(> a.product-form-back:only-child) { display: none !important; }
}

/* ===== Mobile: Loja virtual (Personalize a loja, Preferências e subpáginas) =====
   Todas as telas do grupo saem do SettingsController com
   $bodyClass = 'page-settings-storefront' e compartilham o mesmo esqueleto
   (cabeçalho com seta + h1 + botão à direita, cards p-6, linha de ações
   alinhada à direita). Um bloco só cobre as ~20 páginas. */
@media (max-width: 640px) {
  /* Cabeçalho: sem seta, título menor, botão da direita em largura total */
  body.page-settings-storefront button[onclick="history.back()"] { display: none !important; }
  body.page-settings-storefront .justify-between.mb-6:has(> div > button[onclick="history.back()"]),
  body.page-settings-storefront .justify-between.mb-6:has(> div > h1) {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px !important;
  }
  body.page-settings-storefront .justify-between.mb-6 > div:first-child h1 { font-size: 1.5rem !important; line-height: 1.25; }
  body.page-settings-storefront .justify-between.mb-6 > a,
  body.page-settings-storefront .justify-between.mb-6 > button,
  body.page-settings-storefront .justify-between.mb-6 > div:not(:first-child) > a,
  body.page-settings-storefront .justify-between.mb-6 > div:not(:first-child) > button {
    width: 100%;
    justify-content: center;
  }
  body.page-settings-storefront .justify-between.mb-6 > div:not(:first-child) {
    display: flex; flex-direction: column; gap: 8px;
  }

  /* Cards: padding menor */
  body.page-settings-storefront main .p-6 { padding: 1rem !important; }
  body.page-settings-storefront main .p-5 { padding: 0.875rem !important; }
  body.page-settings-storefront main .mt-8 { margin-top: 1.25rem !important; }

  /* Linha de ações (Salvar / Cancelar): empilhada, ação principal em cima */
  body.page-settings-storefront main .flex.justify-end:not(.items-center),
  body.page-settings-storefront main .flex.items-center.justify-end {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  body.page-settings-storefront main .flex.justify-end > a,
  body.page-settings-storefront main .flex.justify-end > button,
  body.page-settings-storefront main .flex.justify-end > form,
  body.page-settings-storefront main .flex.items-center.justify-end > a,
  body.page-settings-storefront main .flex.items-center.justify-end > button,
  body.page-settings-storefront main .flex.items-center.justify-end > form {
    width: 100%;
    justify-content: center;
  }
  body.page-settings-storefront main .flex.justify-end > form > button,
  body.page-settings-storefront main .flex.items-center.justify-end > form > button { width: 100%; justify-content: center; }

  /* Tabelas (Acesso restrito, Modo da loja): rolam dentro do card */
  body.page-settings-storefront main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.page-settings-storefront main table th,
  body.page-settings-storefront main table td { white-space: nowrap; padding-left: 10px !important; padding-right: 10px !important; }

  /* Hub (Personalize a loja / Preferências): cards em 2 colunas fluidas */
  body.page-settings-storefront main .flex.flex-wrap.gap-4:has(> .settings-card) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }
  body.page-settings-storefront main .settings-card.w-48 {
    width: auto !important;
    height: auto !important;
    min-height: 148px;
    padding: 12px !important;
  }
  body.page-settings-storefront main .settings-card .text-base { font-size: 0.875rem; }
  body.page-settings-storefront main .settings-card .w-12 { width: 2.5rem; height: 2.5rem; }
}

/* Global dark palette (2026-09-06).
   Keep semantic status colors; new components should use these tokens. */
html.dark {
  --dark-bg: #172033;
  --dark-sidebar: #111a2b;
  --dark-surface: #1d2940;
  --dark-raised: #243149;
  --dark-border: #303b50;
  --dark-text: #e4eaf5;
  --dark-muted: #9ba9bf;
  --dark-accent: color-mix(in srgb, #2f64e0 65%, white);
  --dark-primary: #2f64e0;
  --primary-color: var(--dark-primary);
  --primary-color-light: var(--dark-accent);
  --secondary-color: var(--dark-accent);
  color-scheme: dark;
}
html.dark .theme, .dark.theme {
  --bg: var(--dark-bg);
  --text: var(--dark-text);
  --muted: var(--dark-surface);
  --border: var(--dark-border);
  --brand: var(--dark-primary);
  --sidebar: var(--dark-sidebar);
  --sidebar-text: var(--dark-text);
  --text-muted: var(--dark-muted);
}
html.dark .sidebar { border-right-color: var(--dark-border); }
html.dark .sidebar-link.active,
html.dark .sidebar-submenu a.active { color: var(--dark-accent); }
html.dark :is(.chat-list, .chat-panel, #chat-panel, .tabs, .content, .app) {
  background-color: var(--dark-bg) !important;
}
html.dark :is(input, textarea, select)::placeholder { color: var(--dark-muted); opacity: 1; }
html.dark :is(input, textarea, select):focus-visible {
  outline-color: var(--dark-accent);
  border-color: var(--dark-accent) !important;
}
html.dark :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--dark-accent);
  outline-offset: 2px;
}
html.dark input { accent-color: var(--dark-primary); }
html.dark ::selection { background: #2f64e04d; color: var(--dark-text); }
html.dark * { scrollbar-color: #45536d var(--dark-sidebar); }
html.dark ::-webkit-scrollbar-track { background: var(--dark-sidebar); }
html.dark ::-webkit-scrollbar-thumb { background: #45536d; border-color: var(--dark-sidebar); }
html.dark ::-webkit-scrollbar-thumb:hover { background: #647493; }
html.dark :is(.btn-primary, .btn-brand, .bg-brand) {
  background-color: var(--dark-primary) !important;
  color: #fff !important;
}
html.dark :is(.btn-primary, .btn-brand, .bg-brand):hover {
  background-color: var(--dark-primary) !important;
  box-shadow: 0 0 0 2px #2f64e080 !important;
}

/* Compatibility for existing Tailwind utilities, including dynamically inserted UI. */
html.dark .dark\:hover\:text-slate-400:hover,
html.dark .dark\:text-gray-400,
html.dark .dark\:text-slate-400,
html.dark .dark\:text-slate-600,
html.dark .dark\:text-slate-900 {
  color: var(--dark-muted) !important;
}
html.dark .dark\:hover\:text-slate-100:hover,
html.dark .dark\:hover\:text-slate-200:hover,
html.dark .dark\:hover\:text-slate-300:hover,
html.dark .dark\:text-gray-100,
html.dark .dark\:text-gray-300,
html.dark .dark\:text-gray-50,
html.dark .dark\:text-slate-100,
html.dark .dark\:text-slate-200,
html.dark .dark\:text-slate-300,
html.dark .dark\:text-slate-50 {
  color: var(--dark-text) !important;
}
html.dark .dark\:bg-\[\#1a1a1a\],
html.dark .dark\:bg-\[\#1f1f1f\],
html.dark .dark\:bg-\[\#242424\],
html.dark .dark\:bg-\[\#262626\],
html.dark .dark\:bg-\[\#404040\],
html.dark .dark\:bg-\[\#525252\],
html.dark .dark\:bg-gray-600,
html.dark .dark\:bg-gray-700,
html.dark .dark\:bg-gray-800,
html.dark .dark\:bg-slate-200,
html.dark .dark\:bg-slate-50,
html.dark .dark\:bg-slate-600,
html.dark .dark\:bg-slate-700,
html.dark .dark\:bg-slate-800,
html.dark .dark\:focus\:bg-\[\#404040\]:focus {
  background-color: var(--dark-surface) !important;
}
html.dark .dark\:border-\[\#171717\],
html.dark .dark\:border-\[\#262626\],
html.dark .dark\:border-\[\#2a2a2a\],
html.dark .dark\:border-\[\#333333\],
html.dark .dark\:border-\[\#3a3a3a\],
html.dark .dark\:border-\[\#404040\],
html.dark .dark\:border-\[\#525252\],
html.dark .dark\:border-gray-600,
html.dark .dark\:border-slate-50,
html.dark .dark\:border-slate-600,
html.dark .dark\:border-slate-700,
html.dark .dark\:border-slate-800,
html.dark .dark\:border-slate-900,
html.dark .dark\:divide-slate-600 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-slate-700 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:focus\:border-\[\#3a3a3a\]:focus,
html.dark .dark\:hover\:border-\[\#3a3a3a\]:hover,
html.dark .dark\:hover\:border-\[\#505050\]:hover,
html.dark .dark\:hover\:border-slate-50:hover,
html.dark .dark\:hover\:border-slate-600:hover,
html.dark .dark\:hover\:border-slate-700:hover {
  border-color: var(--dark-border) !important;
}
html.dark .dark\:bg-\[\#0a0a0a\],
html.dark .dark\:bg-\[\#111111\],
html.dark .dark\:bg-\[\#171717\],
html.dark .dark\:bg-gray-900,
html.dark .dark\:bg-slate-900,
html.dark .dark\:bg-slate-950 {
  background-color: var(--dark-bg) !important;
}
html.dark .dark\:hover\:bg-\[\#1a1a1a\]:hover,
html.dark .dark\:hover\:bg-\[\#262626\]:hover,
html.dark .dark\:hover\:bg-\[\#404040\]:hover,
html.dark .dark\:hover\:bg-slate-50:hover,
html.dark .dark\:hover\:bg-slate-600:hover,
html.dark .dark\:hover\:bg-slate-700:hover,
html.dark .dark\:hover\:bg-slate-800:hover {
  background-color: var(--dark-raised) !important;
}
html.dark .dark\:bg-slate-900\/50 {
  background-color: color-mix(in srgb, var(--dark-bg) 50%, transparent) !important;
}
html.dark .dark\:hover\:bg-\[\#262626\]\/50:hover,
html.dark .dark\:hover\:bg-slate-700\/50:hover,
html.dark .dark\:hover\:bg-slate-800\/50:hover {
  background-color: color-mix(in srgb, var(--dark-raised) 50%, transparent) !important;
}
html.dark .bg-\[\#0054c2\],
html.dark .dark\:bg-\[\#0054c2\],
html.dark .dark\:hover\:bg-\[\#4e67b1\]:hover,
html.dark .hover\:bg-\[\#0054c2\]:hover,
html.dark .hover\:bg-\[\#4e67b1\]:hover {
  background-color: var(--dark-primary) !important;
}
html.dark .bg-\[\#0054c2\]\/15,
html.dark .dark\:hover\:bg-\[\#0054c2\]\/15:hover,
html.dark .hover\:bg-\[\#0054c2\]\/15:hover {
  background-color: color-mix(in srgb, var(--dark-primary) 15%, transparent) !important;
}
html.dark .dark\:text-\[\#0054c2\],
html.dark .dark\:text-\[\#7d92d0\],
html.dark .hover\:text-\[\#0054c2\]:hover,
html.dark .text-\[\#0054c2\] {
  color: var(--dark-accent) !important;
}
html.dark .bg-\[\#0054c2\]\/10,
html.dark .dark\:bg-\[\#0054c2\]\/10,
html.dark .hover\:bg-\[\#0054c2\]\/10:hover {
  background-color: color-mix(in srgb, var(--dark-primary) 10%, transparent) !important;
}
html.dark .bg-\[\#0054c2\]\/20,
html.dark .dark\:bg-\[\#0054c2\]\/20,
html.dark .dark\:hover\:bg-\[\#0054c2\]\/20:hover,
html.dark .hover\:bg-\[\#0054c2\]\/20:hover {
  background-color: color-mix(in srgb, var(--dark-primary) 20%, transparent) !important;
}
html.dark .dark\:bg-\[\#262626\]\/50,
html.dark .dark\:bg-slate-700\/50,
html.dark .dark\:bg-slate-800\/50 {
  background-color: color-mix(in srgb, var(--dark-surface) 50%, transparent) !important;
}
html.dark .border-\[\#0054c2\],
html.dark .focus\:border-\[\#0054c2\]:focus,
html.dark .hover\:border-\[\#0054c2\]:hover {
  border-color: var(--dark-accent) !important;
}
html.dark .bg-\[\#0054c2\]\/5,
html.dark .hover\:bg-\[\#0054c2\]\/5:hover {
  background-color: color-mix(in srgb, var(--dark-primary) 5%, transparent) !important;
}
html.dark .border-\[\#0054c2\]\/20,
html.dark .hover\:border-\[\#0054c2\]\/20:hover {
  border-color: color-mix(in srgb, var(--dark-accent) 20%, transparent) !important;
}
html.dark .dark\:border-slate-700\/50,
html.dark .dark\:divide-slate-700\/50 > :not([hidden]) ~ :not([hidden]) {
  border-color: color-mix(in srgb, var(--dark-border) 50%, transparent) !important;
}
html.dark .dark\:bg-slate-900\/30 {
  background-color: color-mix(in srgb, var(--dark-bg) 30%, transparent) !important;
}
html.dark .dark\:bg-slate-700\/30,
html.dark .dark\:bg-slate-800\/30 {
  background-color: color-mix(in srgb, var(--dark-surface) 30%, transparent) !important;
}
html.dark .dark\:bg-slate-600\/40,
html.dark .dark\:bg-slate-700\/40,
html.dark .dark\:bg-slate-800\/40 {
  background-color: color-mix(in srgb, var(--dark-surface) 40%, transparent) !important;
}
html.dark .dark\:hover\:bg-slate-700\/30:hover {
  background-color: color-mix(in srgb, var(--dark-raised) 30%, transparent) !important;
}
html.dark .dark\:bg-\[\#0054c2\]\/25 {
  background-color: color-mix(in srgb, var(--dark-primary) 25%, transparent) !important;
}
html.dark .hover\:border-\[\#0054c2\]\/60:hover {
  border-color: color-mix(in srgb, var(--dark-accent) 60%, transparent) !important;
}
html.dark .dark\:bg-slate-800\/20 {
  background-color: color-mix(in srgb, var(--dark-surface) 20%, transparent) !important;
}
html.dark .dark\:hover\:bg-slate-700\/40:hover,
html.dark .dark\:hover\:bg-slate-900\/40:hover {
  background-color: color-mix(in srgb, var(--dark-raised) 40%, transparent) !important;
}
html.dark .dark\:bg-\[\#0054c2\]\/30,
html.dark .hover\:bg-\[\#0054c2\]\/30:hover {
  background-color: color-mix(in srgb, var(--dark-primary) 30%, transparent) !important;
}
html.dark .dark\:border-\[\#404040\]\/60,
html.dark .dark\:border-slate-700\/60 {
  border-color: color-mix(in srgb, var(--dark-border) 60%, transparent) !important;
}
html.dark .dark\:bg-slate-900\/40 {
  background-color: color-mix(in srgb, var(--dark-bg) 40%, transparent) !important;
}
html.dark .dark\:bg-\[\#262626\]\/80,
html.dark .dark\:bg-slate-800\/80 {
  background-color: color-mix(in srgb, var(--dark-surface) 80%, transparent) !important;
}
html.dark .border-\[\#0054c2\]\/30,
html.dark .dark\:border-\[\#0054c2\]\/30 {
  border-color: color-mix(in srgb, var(--dark-accent) 30%, transparent) !important;
}
html.dark .dark\:border-slate-700\/70 {
  border-color: color-mix(in srgb, var(--dark-border) 70%, transparent) !important;
}
html.dark .border-\[\#0054c2\]\/15 {
  border-color: color-mix(in srgb, var(--dark-accent) 15%, transparent) !important;
}
html.dark .dark\:bg-slate-800\/60 {
  background-color: color-mix(in srgb, var(--dark-surface) 60%, transparent) !important;
}
html.dark .dark\:hover\:bg-slate-800\/60:hover {
  background-color: color-mix(in srgb, var(--dark-raised) 60%, transparent) !important;
}
html.dark .dark\:bg-slate-900\/60 {
  background-color: color-mix(in srgb, var(--dark-bg) 60%, transparent) !important;
}
html.dark .dark\:bg-slate-900\/70 {
  background-color: color-mix(in srgb, var(--dark-bg) 70%, transparent) !important;
}
html.dark .border-\[\#0054c2\]\/50,
html.dark .dark\:border-\[\#0054c2\]\/50 {
  border-color: color-mix(in srgb, var(--dark-accent) 50%, transparent) !important;
}
html.dark .text-\[\#0054c2\]\/70 {
  color: color-mix(in srgb, var(--dark-accent) 70%, transparent) !important;
}
html.dark .bg-\[\#0054c2\]\/40 {
  background-color: color-mix(in srgb, var(--dark-primary) 40%, transparent) !important;
}
html.dark .hover\:border-\[\#0054c2\]\/40:hover {
  border-color: color-mix(in srgb, var(--dark-accent) 40%, transparent) !important;
}

/* Shared navigation tokens also cover the standalone superadmin shell. */
html.dark {
  --sidebar-color: var(--dark-sidebar);
  --sidebar-text-color: var(--dark-muted);
  --sb-text-strong: var(--dark-text);
  --sb-hover: #ffffff0d;
  --sb-selected-bg: #2f64e01a;
  --sb-selected-ring: transparent;
  --sb-active-bg: #2f64e01a;
  --sb-active-fg: var(--dark-accent);
  --sb-border: var(--dark-border);
  --sb-label: var(--dark-muted);
  --sb-muted: var(--dark-muted);
}

/* Perfil compartilhado: painel pela esquerda, com a paleta do aplicativo. */
#profile-sidebar {
  --profile-bg: #fff;
  --profile-surface: #f8fafc;
  --profile-border: #e2e8f0;
  --profile-text: #1e293b;
  --profile-muted: #64748b;
  --profile-accent: var(--primary-color, #2f64e0);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  height: 100dvh;
  color: var(--profile-text);
  background: var(--profile-bg);
  border-right: 1px solid var(--profile-border);
  border-radius: 0 20px 20px 0;
  box-shadow: 16px 0 64px #0f172a24;
  transform: translateX(0);
  visibility: visible;
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), visibility 360ms;
  overflow: hidden;
}
html.dark #profile-sidebar {
  --profile-bg: var(--dark-bg);
  --profile-surface: var(--dark-surface);
  --profile-border: var(--dark-border);
  --profile-text: var(--dark-text);
  --profile-muted: var(--dark-muted);
  --profile-accent: var(--dark-primary);
}
#profile-sidebar.is-closed { transform: translateX(-100%); visibility: hidden; pointer-events: none; }
#profile-sidebar-overlay { background: #0f172a66; backdrop-filter: blur(3px); transition: opacity 280ms ease; }
#profile-sidebar .profile-drawer-header { padding: 20px 24px; border-bottom: 1px solid var(--profile-border); flex-shrink: 0; }
#profile-sidebar .profile-drawer-header h2 { font-size: 16px; letter-spacing: -.3px; }
#profile-sidebar-content { min-height: 0; padding: 24px; overscroll-behavior: contain; scrollbar-width: thin; }
#profile-sidebar .profile-identity { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--profile-border); align-items: center; }
#profile-sidebar .profile-avatar { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 64px; border: 1px solid var(--profile-border); }
#profile-sidebar .profile-avatar button { font-size: 10px; text-align: center; }
#profile-sidebar .profile-name { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; font-size: 17px; margin: 0 0 6px; }
#profile-sidebar .profile-identity-meta { grid-column: 2; grid-row: 2; display: flex; align-items: flex-start; flex-direction: column; gap: 6px; min-width: 0; }
#profile-sidebar .profile-role { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--profile-accent); background: color-mix(in srgb, var(--profile-accent) 10%, transparent); }
html.dark #profile-sidebar .profile-role { color: var(--dark-accent); }
#profile-sidebar .profile-remove-avatar { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
#profile-sidebar .profile-edit-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 20px; }
#profile-sidebar .profile-edit-form > div { flex: 1 1 190px; min-width: 0; }
#profile-sidebar .profile-edit-form > .btn { width: auto; flex-shrink: 0; padding: 0 14px; color: white !important; background: var(--profile-accent) !important; border-color: transparent; }
#profile-sidebar :is(input:not([type=hidden]):not([type=checkbox]):not([type=file]), select) { height: 42px; font-size: 13px; border-radius: 9px; background: var(--profile-surface); border-color: var(--profile-border); color: var(--profile-text); }
#profile-sidebar :is(input, select):focus { border-color: var(--profile-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--profile-accent) 14%, transparent); }
#profile-sidebar .btn { min-height: 40px; border-radius: 9px; font-size: 12px; box-shadow: none; }
#profile-sidebar .profile-edit-form > .btn:hover { filter: brightness(1.08); }
#profile-sidebar-content > .mb-6 { margin-bottom: 20px; }
#profile-sidebar-content > div.border-t { border-color: var(--profile-border); }
#profile-sidebar #theme-toggle { padding: 12px; border-radius: 10px; }
#profile-sidebar #theme-toggle .text-sm { font-size: 11px; }
#profile-sidebar #theme-toggle-text { font-size: 13px; }
#profile-sidebar .notification-toggle { display: flex; align-items: center; gap: 10px; padding: 12px; width: 100%; min-height: 44px; border: 1px solid var(--profile-border); background: var(--profile-surface); color: var(--profile-text); font-size: 13px; text-align: left; border-radius: 10px; }
#profile-sidebar .notification-icon { display: flex; flex-shrink: 0; color: var(--profile-muted); }
#profile-sidebar .profile-drawer-footer { flex-shrink: 0; padding: 12px 24px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--profile-border); }
#profile-sidebar .profile-drawer-footer a { justify-content: flex-start; padding-left: 12px; font-size: 13px; }
#profile-sidebar :is(button, a, select, input):focus-visible { outline: 2px solid var(--profile-accent); outline-offset: 3px; }
#profile-sidebar .profile-avatar:focus-within button { opacity: 1; }
@media (max-width: 480px) {
  #profile-sidebar { border-radius: 0; }
  #profile-sidebar-content { padding: 20px; }
  #profile-sidebar .profile-drawer-header { padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #profile-sidebar, #profile-sidebar-overlay { transition: none; }
}

/* Seções recolhidas deixam o perfil inteiro visível no desktop. */
#profile-sidebar .profile-identity { margin-bottom: 16px; padding-bottom: 16px; }
#profile-sidebar .profile-section { border-bottom: 1px solid var(--profile-border); }
#profile-sidebar .profile-section > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 2px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--profile-text); }
#profile-sidebar .profile-section > summary::-webkit-details-marker { display: none; }
#profile-sidebar .profile-section > summary > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--profile-muted); }
#profile-sidebar .profile-section > summary .profile-section-chevron { width: 15px; height: 15px; margin-left: auto; transition: transform .2s; }
#profile-sidebar .profile-section[open] > summary .profile-section-chevron { transform: rotate(180deg); }
#profile-sidebar .profile-section > summary:hover { color: var(--profile-accent); }
#profile-sidebar .profile-section > summary:focus-visible { outline: 2px solid var(--profile-accent); outline-offset: -2px; border-radius: 8px; }
#profile-sidebar .profile-section-body { padding: 12px 0 20px; }
#profile-sidebar .profile-section-body > :last-child { margin-bottom: 0; }
#profile-sidebar .profile-push-settings { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--profile-border); }
#profile-sidebar .profile-preferences { padding-top: 16px; }
#profile-sidebar .profile-preference { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 2px; font-size: 12px; color: var(--profile-text); cursor: pointer; }
#profile-sidebar .profile-preference > svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--profile-muted); }
#profile-sidebar #theme-toggle { padding: 8px 2px; border: 0; border-radius: 0; background: transparent; text-align: left; }
#profile-sidebar #theme-toggle-text { font-size: 12px; }
#profile-sidebar .profile-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#profile-sidebar .profile-switch { position: relative; flex-shrink: 0; margin-left: auto; width: 34px; height: 20px; border-radius: 20px; background: var(--profile-border); transition: background .15s; }
#profile-sidebar .profile-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; transition: transform .15s; }
#profile-sidebar .profile-switch-input:checked + .profile-switch,
#profile-sidebar [aria-checked="true"] .profile-switch { background: var(--profile-accent); }
#profile-sidebar .profile-switch-input:checked + .profile-switch::after,
#profile-sidebar [aria-checked="true"] .profile-switch::after { transform: translateX(14px); }
#profile-sidebar .profile-switch-input:focus-visible + .profile-switch { outline: 2px solid var(--profile-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #profile-sidebar .profile-switch, #profile-sidebar .profile-switch::after, #profile-sidebar .profile-section-chevron { transition: none; }
}
@media (max-height: 700px) {
  #profile-sidebar-content { padding: 16px 24px; }
  #profile-sidebar .profile-drawer-header { padding: 14px 24px; }
  #profile-sidebar .profile-identity { margin-bottom: 8px; padding-bottom: 12px; }
  #profile-sidebar .profile-avatar { width: 56px; height: 56px; }
  #profile-sidebar .profile-remove-avatar { margin-top: 8px; }
  #profile-sidebar .profile-section > summary { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
  #profile-sidebar .profile-preferences { padding-top: 12px; }
  #profile-sidebar .profile-preference { min-height: 40px; }
}