/* ---------------------------------------------------------------------------
 * A COR DA MARCA NAO SERVE PARA ESCREVER.
 *
 * --brand e' um tom MEDIO: bonito como preenchimento de faixa, gradiente e balao
 * de chat, e reprovado nos dois usos que envolvem TEXTO:
 *
 *   - como FUNDO de texto branco  -> contraste 3.0 a 3.6 (minimo 4.5)
 *   - como TINTA sobre fundo claro -> contraste 2.6 a 3.6 (minimo 4.5)
 *
 * Sao os dois lados do mesmo problema, e a varredura das telas encontrou os dois
 * espalhados por 9 telas do profissional, escritos de jeitos diferentes em cada
 * arquivo (ora var(--brand), ora var(--primary), ora o hex na mao).
 *
 * A saida NAO e' mudar --brand: a identidade esta' certa, e ela e' usada em lugar
 * nenhum onde o contraste importa (faixa, gradiente, sombra). A saida e' dar NOME
 * aos dois usos que precisam de um degrau mais fechado, e usar esses nomes onde
 * ha' texto. Assim o proximo componente ja' nasce legivel, sem depender de alguem
 * lembrar de medir.
 *
 *   --brand-ink   : a marca quando ela e' TINTA (rotulo, link, chip, borda de foco)
 *   --brand-solid : a marca quando ela e' FUNDO de texto branco (botao, filtro ativo)
 *
 * Os numeros ao lado de cada valor sao o contraste medido contra o fundo em que
 * aquele token e' usado. Ao trocar um valor, meça de novo -- e' o unico jeito de
 * saber. -------------------------------------------------------------------- */
/* ============================================================
   AGINCE — DESIGN SYSTEM GLOBAL
   Identidade visual: Azul (confiança) + Laranja (energia)
   Tipografia: Poppins (títulos) + Inter (texto)
   Suporta tema claro e escuro.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

/* =========================
   TOKENS — TEMA CLARO
========================= */
:root {
  color-scheme: light;

  /* Fundo e superfícies */
  --bg: #eef3fb;
  --bg-soft: #f6f9fe;
  --surface: #ffffff;
  --surface-2: #f3f7fd;
  --surface-3: #e7eefb;

  /* Texto */
  --text: #1f2a3d;
  --text-soft: #5b6b85;
  /* --text-light veste os rotulos pequenos em maiuscula ("CLIENTE", "VALOR PAGO") em
     varias telas. #8a98b4 sobre branco dava 2.9 -- num texto de .68rem, o pior lugar
     possivel para economizar contraste. #5f6d87 sobe para 5.07 e segue sendo apoio.
     O valor do tema escuro (#7f8eb0) ja' estava certo: la' a tinta CLAREIA. */
  --text-light: #5f6d87;
  --heading: #14213a;
  --muted: var(--text-soft);

  /* MARCA — Azul */
  --brand: #1f86e6;
  --brand-2: #1769d6;
  --brand-3: #1356b8;
  --brand-ink: #1356b8;    /* padrao (paleta azul) */
  --brand-solid: #1356b8;
  --brand-soft: #e8f3ff;

  /* MARCA — Laranja */
  --accent: #ff6a2b;
  --accent-2: #ff8a3d;
  --accent-soft: #fff0e8;

  /* Compatibilidade com telas existentes */
  --primary: var(--brand);
  --primary-2: var(--brand-2);
  --primary-3: var(--brand-3);
  --secondary: #14213a;
  --line: rgba(20, 40, 80, 0.10);

  /* Estados */
  --success: #16a34a;
  --success-soft: #e7f7ed;
  --danger: #e5484d;
  --danger-2: #dc2626;
  --danger-3: #b91c1c;
  --warning: #f59e0b;
  --info: #1f86e6;
  /* --info-ink: o azul quando ele e' TINTA. #1f86e6 sobre o bloco claro dava 3.48. */
  --info-ink: #1e40af;

  /* Sombras */
  --shadow-sm: 0 6px 18px rgba(20, 40, 80, 0.06);
  --shadow-md: 0 14px 34px rgba(20, 40, 80, 0.10);
  --shadow-lg: 0 26px 60px rgba(20, 40, 80, 0.16);
  --shadow-brand: 0 12px 28px rgba(31, 134, 230, 0.30);

  /* Raios e espaçamentos */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Componentes */
  --topbar-bg: rgba(255, 255, 255, 0.86);
  --sidebar-grad-start: #15233f;
  --sidebar-grad-end: #1d3a66;
  --footer-grad-start: #15233f;
  --footer-grad-end: #1d3a66;

  --input-bg: #ffffff;
  --input-text: #1f2a3d;
  --input-placeholder: #93a1bd;
  --card-grad-start: #ffffff;
  --card-grad-end: #fbfdff;

  /* Hero: azul -> laranja (identidade) */
  --hero-grad-start: #1769d6;
  --hero-grad-mid: #1f86e6;
  --hero-grad-end: #ff6a2b;

  --chat-bg: #f3f7fd;
  --chat-msg-other-bg: #ffffff;
  --chat-msg-me-bg: #1f86e6;
  --chat-msg-me-text: #ffffff;
  --chat-status-bg: rgba(255, 255, 255, 0.75);

  --toggle-bg: rgba(31, 134, 230, 0.10);
  --toggle-text: var(--text);
  --toggle-border: rgba(20, 40, 80, 0.12);

  --body-gradient:
    radial-gradient(circle at top left, rgba(31, 134, 230, 0.10), transparent 22%),
    radial-gradient(circle at top right, rgba(255, 106, 43, 0.10), transparent 20%),
    linear-gradient(180deg, #f6f9fe 0%, #eef3fb 100%);

  --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Alias usado por algumas telas; aponta para a fonte de títulos para não cair
     na fonte padrão do navegador (mantém o padrão Poppins/Inter em todo o site). */
  --font-display: var(--font-heading);
}

/* =========================
   TOKENS — TEMA ESCURO
========================= */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a1120;
  --bg-soft: #0f1830;
  --surface: #141d33;
  --surface-2: #18233d;
  --surface-3: #20304f;

  --text: #e9eefb;
  --text-soft: #a6b3cf;
  --text-light: #7f8eb0;
  --heading: #ffffff;

  --brand: #4a9fef;
  --brand-2: #2f86e6;
  --brand-ink: #4a9fef;    /* 5.91 sobre o fundo escuro do app */
  --brand-solid: #1769d6;  /* 5.07 com texto branco */
  --brand-3: #1f6fd0;
  --brand-soft: rgba(74, 159, 239, 0.14);

  --accent: #ff7a3d;
  --accent-2: #ff945c;
  --accent-soft: rgba(255, 122, 61, 0.14);

  --primary: var(--brand);
  --primary-2: var(--brand-2);
  --primary-3: var(--brand-3);
  --secondary: #e9eefb;
  --line: rgba(150, 170, 210, 0.16);

  --success: #2ecc71;
  --success-soft: rgba(46, 204, 113, 0.14);
  --danger: #ff6b6b;
  --danger-2: #ef4444;
  --danger-3: #dc2626;
  --warning: #fbbf24;
  --info: #4a9fef;
  /* No escuro a tinta CLAREIA. Cravar o azul escuro aqui derrubou o contraste para 1.79. */
  --info-ink: #7fb6f5;

  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.46);
  --shadow-brand: 0 12px 28px rgba(31, 111, 208, 0.40);

  --topbar-bg: rgba(10, 17, 32, 0.86);
  --sidebar-grad-start: #070d1a;
  --sidebar-grad-end: #102145;
  --footer-grad-start: #070d1a;
  --footer-grad-end: #102145;

  --input-bg: #0f1830;
  --input-text: #e9eefb;
  --input-placeholder: #8092b3;
  --card-grad-start: #141d33;
  --card-grad-end: #18233d;

  --hero-grad-start: #0c1c3c;
  --hero-grad-mid: #143a72;
  --hero-grad-end: #b8431a;

  --chat-bg: #0f1830;
  --chat-msg-other-bg: #18233d;
  --chat-msg-me-bg: #2f86e6;
  --chat-msg-me-text: #ffffff;
  --chat-status-bg: rgba(20, 29, 51, 0.85);

  --toggle-bg: rgba(255, 255, 255, 0.08);
  --toggle-text: var(--text);
  --toggle-border: rgba(255, 255, 255, 0.12);

  --body-gradient:
    radial-gradient(circle at top left, rgba(74, 159, 239, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(255, 122, 61, 0.10), transparent 20%),
    linear-gradient(180deg, #0a1120 0%, #070d1a 100%);
}

/* =========================
   BASE
========================= */
html, body {
  background: var(--bg);
  color: var(--text);
}

body {
  background: var(--body-gradient) fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .25s ease, color .25s ease;
}

/* Modo noturno: telas que CRAVAM um fundo claro em html/body são forçadas ao
   fundo do tema (alta especificidade + !important vencem o override da tela).
   Resolve de uma vez o "página clara no escuro" em todas as telas. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--body-gradient) fixed !important;
  color: var(--text) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.register-hero h1, .coresbranca { color: #ffffff !important; }
.textobranco { color: #ffffff !important; }

p, span, small, label, li, td, th, strong, a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* =========================
   TRANSIÇÕES SUAVES
========================= */
.header, .topbar, .footer, footer, .auth-hero, .login-container,
.verification-card, .form-card, .highlight-card, .hero-card, .summary-card,
.welcome-card, .stat-box, .chat-bar, .chat-popup, .service-item,
.modal-content, .card, .panel, .box, .container-card, button, input, textarea, select {
  transition: background .25s ease, color .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .18s ease;
}

/* =========================
   CAMPOS
========================= */
input, textarea, select {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

input::placeholder, textarea::placeholder { color: var(--input-placeholder) !important; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--input-text);
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Textos auxiliares */
.text-muted, .helper-text, .summary-profile-info p, .topbar-left p,
.welcome-card p, #user-info p, .stat-box p { color: var(--text-soft) !important; }

/* =========================
   CARDS / SUPERFÍCIES
========================= */
.summary-card, #client-summary, .login-container, .verification-card,
.form-card, .highlight-card, .hero-card, .stat-box, .card, .panel {
  background: linear-gradient(180deg, var(--card-grad-start) 0%, var(--card-grad-end) 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

.card:hover, .summary-card:hover, .stat-box:hover { box-shadow: var(--shadow-md); }

/* Hero / welcome */
.welcome-card, #user-info {
  background: linear-gradient(135deg, var(--hero-grad-start) 0%, var(--hero-grad-mid) 55%, var(--hero-grad-end) 130%) !important;
  border-radius: var(--radius-lg);
  border: none !important;
  box-shadow: var(--shadow-md);
}

.welcome-card h2, #user-info h2, #user-info h1,
.welcome-card p, #user-info p { color: #ffffff !important; }

.auth-hero {
  background: linear-gradient(135deg, var(--hero-grad-start) 0%, var(--hero-grad-mid) 55%, var(--hero-grad-end) 130%) !important;
  color: #fff !important;
}
.auth-hero h1, .auth-hero h3, .auth-hero strong, .auth-hero .auth-badge { color: #fff !important; }
.auth-hero p, .highlight-card p { color: rgba(255,255,255,.88) !important; }

/* =========================
   SIDEBAR / TOPBAR / FOOTER / HEADER
========================= */
#sidebar.sidebar, .sidebar {
  background: linear-gradient(180deg, var(--sidebar-grad-start) 0%, var(--sidebar-grad-end) 100%) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}

.topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--line) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.header {
  background: linear-gradient(135deg, var(--sidebar-grad-start), var(--sidebar-grad-end)) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.header .logo, .header .logo a { color: #fff !important; font-weight: 700; }

/* Rodapé (barrinha inferior) — só cores do tema, bem formatado e responsivo em todas as telas */
.footer, footer, .site-footer {
  background: linear-gradient(135deg, #15233f 0%, #1d3a66 100%) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-align: center;
  /* box-sizing explícito: com width:100% e padding lateral, o padrão content-box faz o rodapé
     medir 100% + 40px. Numa tela de 390px isso vira 430 e a PÁGINA INTEIRA passa a rolar para o
     lado — em toda tela que recebe o rodapé injetado, não só nesta. */
  box-sizing: border-box !important;
  max-width: 100%;
  padding: 16px 20px !important;
  font-size: .85rem;
  line-height: 1.5;
  border: none !important;
  margin-top: auto !important;   /* empurra pro FINAL da página (layouts flex-column) */
}
.footer p, footer p, .site-footer p { margin: 0; }
.footer a, footer a, .site-footer a { color: #fff !important; text-decoration: none; }
.footer a:hover, footer a:hover, .site-footer a:hover { text-decoration: underline; }
html[data-theme="dark"] :is(.footer, footer, .site-footer) {
  background: linear-gradient(135deg, #0b1322 0%, #142540 100%) !important;
}
/* O rodapé tem fundo ESCURO em qualquer tema; o texto (e seus filhos) deve ser
   SEMPRE branco — inclusive no MODO CLARO. Escopado só ao footer, com alta
   especificidade + !important para vencer qualquer regra de texto do modo claro. */
html[data-theme="light"] :is(.footer, footer, .site-footer),
html[data-theme="light"] :is(.footer, footer, .site-footer) :is(p, span, small, a, li, strong, .ag-footer-cnpj),
:is(.footer, footer, .site-footer),
:is(.footer, footer, .site-footer) :is(p, span, small, a, li, strong, .ag-footer-cnpj) {
  color: #fff !important;
}
@media (max-width: 560px) {
  .footer, footer, .site-footer { padding: 14px 14px !important; font-size: .8rem; }
}

/* Sticky footer: as telas internas (com a navbar do tema) ocupam a altura toda
   e o rodapé vai para a BORDA DE BAIXO mesmo com pouco conteúdo (o .footer já
   usa margin-top:auto). A navbar é sticky e entra no fluxo, então basta o body
   virar uma coluna flex de altura mínima 100vh. */
body.ag-has-navbar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0; /* zera margens de body legadas (ex.: body{margin:20px}) */
}
/* Cabeçalho legado (título + voltar próprios da tela): centraliza junto do
   conteúdo (mesma faixa), não estica de ponta a ponta. Os .topbar etc. já são
   escondidos pela navbar logo abaixo. */
body.ag-has-navbar > header {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: clamp(16px, 4vw, 28px);
  padding-right: clamp(16px, 4vw, 28px);
  flex-shrink: 0;
}

/* Espaçamento padrão (respiro) entre o conteúdo e o rodapé nas telas internas,
   proporcional ao tamanho da tela (responsivo). */
body.ag-has-navbar > main,
body.ag-has-navbar > .page,
body.ag-has-navbar > .page-content,
body.ag-has-navbar > .main-content,
body.ag-has-navbar > .dashboard-content {
  width: 100%;
  max-width: 1180px;          /* não estica de ponta a ponta — conteúdo centralizado */
  margin-left: auto;
  margin-right: auto;
  flex: 1 0 auto;             /* cresce e empurra o footer pro fim (sem vão branco abaixo) */
  box-sizing: border-box;
  padding-left: clamp(16px, 4vw, 28px);
  padding-right: clamp(16px, 4vw, 28px);
  padding-bottom: clamp(24px, 5vw, 56px);
}
/* Navbar e Footer das telas standalone: SEMPRE 100% de largura (a centralização
   é só do conteúdo entre eles). */
body.ag-has-navbar > .ag-navbar {
  width: 100%;
  max-width: none;
}
body.ag-has-navbar > footer,
body.ag-has-navbar > .footer,
body.ag-has-navbar > .ag-injected-footer {
  flex-shrink: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Dashboards com SIDEBAR (app-shell) + footer injetado: o body vira coluna flex,
   o app-shell ocupa o espaço disponível (sem forçar 100vh deixando buraco), a
   sidebar ESTICA junto (some o vazio na coluna lateral) e o footer fica full-width
   colado no rodapé. */
body.ag-dash-has-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.ag-dash-has-footer > .app-shell {
  flex: 1 0 auto;
  min-height: 0 !important;
}
body.ag-dash-has-footer .app-shell > .sidebar,
body.ag-dash-has-footer .app-shell > aside.sidebar {
  height: auto !important;     /* estica com o app-shell (align-items:stretch) */
  align-self: stretch;
}
body.ag-dash-has-footer > footer.ag-injected-footer {
  flex-shrink: 0;
  width: 100%;
  margin-top: 0;
}

/* =========================
   BOTÕES
========================= */
button, .btn, .btn-submit, .btn-primary, .btn-secondary-action, .dark-mode-btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-submit, .btn-primary, button[type="submit"] {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--shadow-brand);
}
.btn-submit:hover, .btn-primary:hover, button[type="submit"]:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Botão de destaque (laranja) */
.btn-accent, .btn-orange {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  color: #fff !important;
  border: none !important;
}

/* =========================
   LINKS
========================= */
/* TODO link do sistema passa por aqui. Com var(--brand) o contraste sobre o branco
   ficava em 3.68 no papel do profissional e 3.6 no do cliente -- abaixo do minimo de 4.5.
   Era o achado de maior alcance da varredura: nao e' uma tela, sao todos os links de
   todas elas. --brand-ink e' a MESMA cor, um degrau mais fechado. */
a { color: var(--brand-ink, var(--brand)); text-decoration: none; }
a:hover { color: var(--accent); }
.texto a { color: var(--brand-ink, var(--brand)) !important; }
.texto a:hover { color: var(--accent) !important; }

/* =========================
   CHAT
========================= */
.chat-bar, .chat-popup, .chat-bar .chat-body, .chat-popup .chat-body, #chatServiceContainer {
  background: var(--chat-bg) !important;
  border-color: var(--line) !important;
}
.chat-msg.other {
  background: var(--chat-msg-other-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
.chat-msg.me {
  background: var(--chat-msg-me-bg) !important;
  color: var(--chat-msg-me-text) !important;
}
.chat-status-row {
  background: var(--chat-status-bg) !important;
  border-color: var(--line) !important;
  color: var(--text-soft) !important;
}
.service-item { background: var(--surface) !important; border: 1px solid var(--line) !important; }
.service-item:hover { background: var(--surface-2) !important; }
.service-name, .chat-popup .chat-input input,
.chat-popup .chat-input input::placeholder { color: var(--input-text) !important; }

/* =========================
   REGRAS DE SENHA
========================= */
.password-rules { list-style: none; margin-top: 10px; padding-left: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.password-rules li { display: flex; align-items: center; gap: 8px; color: var(--text-soft); }
.password-rules li.valid { color: var(--success); font-weight: 600; }

/* =========================
   BOTÃO DE TEMA
========================= */
.btn-theme-toggle, .theme-toggle, .dark-mode-btn {
  appearance: none;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--toggle-text);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-theme-toggle:hover, .theme-toggle:hover, .dark-mode-btn:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
}
.theme-toggle-fixed { position: fixed; right: 18px; top: 18px; z-index: 12000; }

/* Header escuro: botão de tema com texto branco */
.header .dark-mode-btn {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
.header .dark-mode-btn:hover { background: var(--accent) !important; }

/* =========================
   SCROLLBAR
========================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* =========================
   RESPONSIVIDADE GLOBAL
========================= */
img { max-width: 100%; height: auto; }

@media (max-width: 980px) {
  .filters-grid, .filter-grid, .cards-grid, .services-grid { grid-template-columns: 1fr !important; }
  .service-header, .service-top, .card-header, .section-head {
    flex-direction: column !important; align-items: flex-start !important; gap: 10px !important;
  }
}

@media (max-width: 768px) {
  body { font-size: 14px; }
  .theme-toggle-fixed { right: 12px; top: 12px; padding: 9px 12px; font-size: 13px; }
  .container, .main-content, .dashboard-content { padding-left: 14px !important; padding-right: 14px !important; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .actions, .service-actions, .card-actions, .btn-group { display: grid !important; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .actions > *, .service-actions > *, .card-actions > *, .btn-group > * { width: 100%; }
}

/* No mobile/tablet o chat (lista e conversa) NUNCA pode ser mais largo que a
   tela — fica colado nas duas bordas e não estoura pra direita. E deixa folga no
   topo para o cabeçalho do chat não ficar tampando nada/encostar na navbar. */
@media (max-width: 768px) {
  .chat-popup, .chat-bar {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }
  .chat-popup { max-height: calc(100dvh - 78px) !important; }
}

/* Topbar do dashboard FIXO no topo de tudo (full-width), a sidebar e o conteúdo
   ficam ABAIXO dele (logo da sidebar aparece abaixo da navbar). A altura real do
   topbar é medida em --ag-topbar-h. Vale no desktop e no mobile. */
body.ag-fixed-topbar .app-shell .topbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1300 !important;
}
/* DESKTOP: empurra a app-shell inteira (sidebar in-flow + conteúdo) abaixo da
   topbar; a sidebar estica (sem gap) com altura mínima de tela menos topbar. */
@media (min-width: 981px) {
  body.ag-fixed-topbar .app-shell { padding-top: var(--ag-topbar-h, 64px); }
  body.ag-fixed-topbar .app-shell > aside.sidebar,
  body.ag-fixed-topbar .app-shell > .sidebar {
    height: auto !important;
    min-height: calc(100vh - var(--ag-topbar-h, 64px));
  }
}
/* MOBILE: a sidebar off-canvas (position:fixed) abre ABAIXO da topbar. */
@media (max-width: 980px) {
  body.ag-fixed-topbar .app-shell .main-area { padding-top: var(--ag-topbar-h, 60px); }
  body.ag-fixed-topbar .app-shell > aside.sidebar,
  body.ag-fixed-topbar .app-shell > .sidebar,
  body.ag-fixed-topbar .app-shell #sidebar.sidebar {
    top: var(--ag-topbar-h, 60px) !important;
    height: calc(100dvh - var(--ag-topbar-h, 60px)) !important;
  }
}

/* Botões do topo (SINO + TEMA): fundo sólido da identidade com gradiente sutil,
   borda fina e sombra (drop + highlight interno) = aparência profissional e com
   profundidade, em claro e escuro. Cobre navbar injetada e topbar do dashboard. */
.ag-navbar .dark-mode-btn, .ag-navbar [data-theme-toggle],
.ag-navbar .notif-bell-btn, .ag-navbar #notifBellBtn,
/* O RESPIRO da barra superior.
   Cada tela redefine .topbar-right por conta propria; algumas declaram gap, a maioria nao.
   Nas que nao declaram, "Tirar duvidas" e "+ Cliente" ficavam encostados, sem 1px entre as
   duas pilulas. Declarado aqui, no tema, o respiro passa a existir por padrao -- e a tela
   que quiser um valor proprio continua podendo declarar o seu. */
.topbar-right { gap: 10px; }

.topbar-right .dark-mode-btn, .topbar-right [data-theme-toggle],
.topbar-right .notif-bell-btn, .topbar-right #notifBellBtn {
  background: linear-gradient(180deg, var(--brand, #1f86e6) 0%, var(--brand-2, var(--brand, #1f86e6)) 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.ag-navbar .dark-mode-btn:hover, .ag-navbar [data-theme-toggle]:hover,
.ag-navbar .notif-bell-btn:hover, .ag-navbar #notifBellBtn:hover,
.topbar-right .dark-mode-btn:hover, .topbar-right [data-theme-toggle]:hover,
.topbar-right .notif-bell-btn:hover, .topbar-right #notifBellBtn:hover {
  background: linear-gradient(180deg, var(--brand-2, var(--brand, #1f86e6)) 0%, var(--brand-3, var(--brand-2, #1f86e6)) 100%) !important;
  box-shadow: 0 9px 22px -6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}
.ag-navbar .dark-mode-btn i, .ag-navbar .dark-mode-btn span,
.ag-navbar [data-theme-toggle] i, .ag-navbar [data-theme-toggle] span,
.ag-navbar .notif-bell-btn i, .ag-navbar #notifBellBtn i, .ag-navbar .bell-icon,
.topbar-right .dark-mode-btn i, .topbar-right .dark-mode-btn span,
.topbar-right [data-theme-toggle] i, .topbar-right [data-theme-toggle] span,
.topbar-right .notif-bell-btn i, .topbar-right #notifBellBtn i, .topbar-right .bell-icon {
  color: #fff !important;
}
span.n{
  color: var(--agl-primary) !important;
}
@media (max-width: 560px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  .card, .summary-card, .form-card, .login-container, .stat-box { border-radius: var(--radius); }
  .chat-popup, .chat-bar { inset: auto 8px 8px 8px !important; }
  /* Navbar: botões (Tema/Voltar/sino) menores pra não estourarem da tela. */
  body.ag-has-navbar > .ag-navbar { padding: 8px 10px; gap: 6px; }
  .ag-navbar-left, .ag-navbar-right { gap: 6px; }
  .ag-nav-back, .ag-theme-toggle { padding: 8px 11px; font-size: 0.85rem; gap: 4px; min-height: 38px; }
  .ag-navbar #notifBellBtn, .ag-navbar .notif-bell-btn { width: 38px; height: 38px; }
}
/* Muito estreito: Tema/Voltar viram só ícone (esconde o texto) pra caber. */
@media (max-width: 400px) {
  .ag-nav-back span, .ag-theme-toggle span { display: none; }
  .ag-nav-back, .ag-theme-toggle { padding: 9px 10px; gap: 0; }
}

/* Acessibilidade: respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================
   FOCO (anel de destaque) — padrão azul, sobrescrito por papel
========================= */
:root { --focus-ring: rgba(31, 134, 230, 0.22); }

/* =========================
   ACESSIBILIDADE — fácil para idosos e leigos
   Botões e campos maiores, texto legível, alvos de toque grandes.
========================= */
button, .btn, .btn-submit, .btn-primary, .btn-secondary-action,
input[type="submit"], input[type="button"], .dark-mode-btn {
  min-height: 48px;
  padding: 12px 20px;
  font-size: 1rem;
}

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
}
textarea { min-height: 110px; }

label { font-weight: 600; font-size: 0.98rem; }

/* Menus do dashboard mais legíveis e com alvo de toque maior */
.sidebar-nav a, .menu-group-content a, .menu-group-toggle {
  font-size: 1rem;
  padding-top: 11px;
  padding-bottom: 11px;
}

/* Foco visível também ao navegar por teclado */
a:focus-visible, button:focus-visible,
.menu-group-toggle:focus-visible, .sidebar-nav a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* =========================
   LOGO AGINCE
========================= */
.agince-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px 10px;
}
.agince-sidebar-logo img {
  width: auto;
  max-width: 150px;
  max-height: 46px;
  height: auto;
  border-radius: 10px;
}
.agince-logo {
  height: 40px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.agince-auth-logo {
  display: block;
  height: 54px;
  width: auto;
  margin: 0 auto 6px;
}

/* =========================
   STATUS ONLINE / ÚLTIMO ACESSO (chat)
========================= */
.chat-peer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--text-soft);
  margin: 2px 0 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  width: fit-content;
  max-width: 100%;
}
.chat-peer-status strong { color: var(--text); }
.presence-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  background: #9aa6bd;
}
.presence-dot.online {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
  animation: presencePulse 2s infinite;
}
.presence-dot.offline { background: #9aa6bd; }

/* Texto de "último acesso" nos orçamentos */
.ag-last-seen { color: var(--text-soft); }
.ag-last-seen.is-online { color: var(--success); font-weight: 700; }

/* =========================
   RECIBOS DE LEITURA (estilo WhatsApp) — só nas mensagens próprias
========================= */
.msg-receipt {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: -2px;
  vertical-align: middle;
  font-weight: 700;
}
.msg-receipt.sent { color: #9ca3af; }      /* enviada: 1 tracinho cinza */
.msg-receipt.delivered { color: #9ca3af; } /* entregue: 2 tracinhos cinza */
.msg-receipt.read { color: #34b7f1; }      /* lida: 2 tracinhos azul WhatsApp */
.chat-msg.me .time { display: inline-flex; align-items: center; gap: 2px; }
@keyframes presencePulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ============================================================
   FASE 1 — Consistência de tema (claro / escuro)
   Trabalha junto com tema.js, que sincroniza as classes
   legadas (body.dark / body.dark-mode) com o data-theme.
   ============================================================ */

/* MODO CLARO: rede de segurança de contraste.
   Garante texto escuro no corpo, revertendo telas que fixaram
   texto branco (causa do "texto branco em fundo branco"). */
html:not([data-theme="dark"]) body {
  color: var(--text);
}
/* Força texto legível no claro — SÓ em telas SEM design próprio (.ag-own-theme opta por sair).
   Telas com design próprio (--clr-*) cuidam das próprias cores, evitando bug no hero. */
html:not([data-theme="dark"]) body:not(.ag-own-theme) :is(.card, .panel, .summary-card, .form-card, .dashboard-content, .main-content, .container) {
  color: var(--text);
}

/* MODO ESCURO: base escura garantida; wrappers transparentes (só telas sem design próprio). */
html[data-theme="dark"] body {
  background-color: var(--bg);
}
html[data-theme="dark"] body:not(.ag-own-theme) :is(.container, .main-content, .main-area, .page, .page-wrapper, .dashboard-content, .content-area, .register-section, .auth-section, .auth-layout) {
  background-color: transparent !important;
}

/* ============================================================
   FASE 2 — Polimento visual global (eleva TODAS as telas)
   Aditivo e seguro: usa os tokens do tema, sem mexer no layout.
   ============================================================ */

/* Cartões com leve elevação no hover (sensação moderna) */
.card, .summary-card, .stat-box, .form-card, .highlight-card, .service-item, .panel {
  transition: transform .18s ease, box-shadow .25s ease,
              background .25s ease, border-color .25s ease;
}
.card:hover, .summary-card:hover, .stat-box:hover, .panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Títulos de seção com detalhe da marca (azul -> laranja) */
.section-title, .card-title, .panel-title, .block-title {
  position: relative;
  padding-left: 14px;
}
.section-title::before, .card-title::before,
.panel-title::before, .block-title::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 1.05em; border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}

/* Badges / pills de status — consistentes em todo o sistema */
.badge, .status-badge, .tag, .chip, .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 700; line-height: 1.4;
  background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--line);
}
.badge.success, .status-badge.success, .pill.success, .tag.success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge.warning, .status-badge.warning, .pill.warning, .tag.warning { background: rgba(245,158,11,.14); color: var(--warning); border-color: transparent; }
.badge.danger,  .status-badge.danger,  .pill.danger,  .tag.danger  { background: rgba(229,72,77,.14); color: var(--danger); border-color: transparent; }
.badge.brand,   .status-badge.brand,   .pill.brand,   .tag.brand   { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

/* Tabelas — cabeçalho e linhas mais limpos (sem forçar largura) */
table thead th {
  background: var(--surface-2);
  color: var(--text-soft);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
table tbody tr { transition: background .15s ease; }
table tbody tr:hover { background: var(--surface-2); }

/* Modais — fundo desfocado e card mais elegante */
.modal, .modal-overlay, .modal-backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal-content {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Botões de contorno (secundários) consistentes */
.btn-outline, .btn-ghost {
  background: transparent !important;
  /* Mesma historia dos links: era este !important global que pintava o "Cancelar" do
     Editar Perfil com o laranja da marca (3.62), vencendo o var(--text) da propria tela. */
  color: var(--brand-ink, var(--brand)) !important;
  border: 1.5px solid var(--brand) !important;
}
.btn-outline:hover, .btn-ghost:hover { background: var(--brand-soft) !important; }

/* Item de menu ativo destacado */
.sidebar-nav a.active, .menu-group-content a.active {
  background: rgba(255,255,255,.10);
  border-radius: 10px;
}

/* Estado vazio (listas sem itens) mais amigável */
.empty-state, .conversation-empty, .no-data {
  text-align: center;
  color: var(--text-soft);
  padding: 28px 16px;
}

/* ============================================================
   FASE 3 — NAVBAR do tema (só cores do tema) + dark fallback
   ============================================================ */

/* ---- NAVBAR: somente cores do TEMA, igual em todas as telas, NUNCA branca ---- */
.ag-navbar {
  position: sticky; top: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 18px;
  background: linear-gradient(135deg, #15233f 0%, #1d3a66 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-md);
}
html[data-theme="dark"] .ag-navbar { background: linear-gradient(135deg, #0b1322 0%, #142540 100%); }
.ag-navbar-left, .ag-navbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ag-nav-logo { display: inline-flex; align-items: center; }
.ag-nav-logo img { height: 60px; width: auto; display: block; }
.ag-nav-back, .ag-theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-pill); padding: 9px 16px;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  cursor: pointer; min-height: 42px;
}
.ag-nav-back { font-weight: 600; }
.ag-nav-back:hover, .ag-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.40);
  color: #fff; transform: translateY(-1px);
}
.ag-nav-notif { display: inline-flex; align-items: center; }
/* O slot do sino reaproveita a classe .topbar-right (que no topo original do
   admin estica). No navbar ele deve ocupar SÓ o tamanho do sino — senão empurra
   o Tema e o Voltar para fora da tela no mobile. */
.ag-navbar .ag-nav-notif {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ag-navbar .ag-navbar-right { flex: 0 0 auto; justify-content: flex-end; }
.ag-navbar #notifBellBtn, .ag-navbar .notif-bell-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #fff !important; box-shadow: none !important;
}
.ag-navbar #notifBellBtn i, .ag-navbar #notifBellBtn svg { color: #fff !important; fill: #fff !important; }
.theme-toggle-fixed { position: static !important; }

/* Hamburger (só telas com menu lateral) */
.ag-nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 46px; height: 42px; padding: 0 12px;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 12px; cursor: pointer;
}
.ag-nav-burger span { display: block; height: 2.5px; width: 20px; background: #fff; border-radius: 2px; transition: .2s; }
.ag-nav-burger:hover { background: rgba(255, 255, 255, 0.22); }
.ag-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 7999; }

/* A navbar do tema SUBSTITUI as barras de topo próprias das telas internas */
body.ag-has-navbar :is(.topbar, .finance-header, .top-header, .page-header) { display: none !important; }
/* Menu lateral: fica fixo logo ABAIXO da navbar, sem vão branco em cima */
body.ag-has-navbar :is(.sidebar, #sidebar, aside.sidebar) {
  position: sticky !important;
  top: 62px !important;
  align-self: flex-start;
  height: calc(100vh - 62px) !important;
  overflow-y: auto;
}
/* layout ocupa a altura restante abaixo da navbar (rodapé encosta no fim, sem sobra) */
body.ag-has-navbar :is(.app-shell, .dashboard-layout) { min-height: calc(100vh - 62px); }
body.ag-has-navbar :is(.main-area, .main-wrapper) { min-height: calc(100vh - 62px); }

/* MOBILE: menu lateral vira off-canvas, aberto pelo hamburger */
@media (max-width: 980px) {
  .ag-nav-burger { display: inline-flex; }
  body.ag-has-navbar :is(.sidebar, #sidebar, aside.sidebar) {
    position: fixed !important; top: 60px !important; left: 0 !important; bottom: 0 !important;
    width: 270px !important; max-width: 82vw !important;
    transform: translateX(-105%); transition: transform .25s ease;
    z-index: 8000 !important; overflow-y: auto;
  }
  /* Aberta: fica ACIMA do chat (.chat-bar z-index:9999) — senão o popup cobre o menu. */
  body.ag-sidebar-open :is(.sidebar, #sidebar, aside.sidebar) { transform: none; box-shadow: var(--shadow-lg); z-index: 10001 !important; }
  body.ag-sidebar-open .ag-sidebar-overlay { display: block; z-index: 10000; }
  /* topo próprio do menu (marca + botão deles) é redundante com o hamburger -> oculta no mobile */
  body.ag-has-navbar :is(.sidebar-top, .sidebar-toggle, #sidebarToggle) { display: none !important; }
}

@media (max-width: 560px) {
  .ag-navbar { padding: 8px 12px; }
  .ag-nav-back span, .ag-theme-toggle span { display: none; }
  .ag-nav-back, .ag-theme-toggle { padding: 9px 13px; }
  .ag-nav-logo img { height: 48px; }
}

/* ---- DARK MODE legível: fallback SÓ para telas SEM design próprio ---- */
html[data-theme="dark"] body:not(.ag-own-theme) :is(
  p, span, li, dt, dd, label, small, strong, b, em, td, th, caption,
  h1, h2, h3, h4, h5, h6, summary
):not(.badge):not(.pill):not(.tag):not(.status):not(.status-badge):not([class*="btn"]):not(button):not(a) {
  color: var(--text);
}
html[data-theme="dark"] body:not(.ag-own-theme) :is(
  .card, .panel, .box, .summary-card, .stat-box, .hero-side-card,
  .modal-content, .modal-card, .day-group, .withdraw-item, .earning-item,
  [class*="-card"], [class*="card-"]
):not(.card-header) {
  /* .card-header fica DE FORA: é o cabeçalho DENTRO de um card, não um card
     próprio. Ganhava fundo "surface" + borda e virava um box destoando do
     gradiente/superfície do card (ex.: Cadastro, Login, avaliar...). */
  background-color: var(--surface) !important;
  color: var(--text);
  border-color: var(--line) !important;
}
/* Telas financeiras (sem design próprio): contraste no escuro */
html[data-theme="dark"] body:not(.ag-own-theme) :is(
  .panel, section.panel, .hero-mini-card, .withdraw-info, .withdraw-box, .confirm-box,
  .week-btn, .brand-chip, .day-group
) {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--line) !important;
}
html[data-theme="dark"] body:not(.ag-own-theme) :is(.empty-state, #weeklyDaysList) {
  background: transparent !important; color: var(--text-soft) !important;
}

/* ============================================================
   FASE 4 — Menus laterais UNIFICADOS e profissionais (3 papéis)
   Cobre Cliente/Profissional (.menu-group-toggle-left) e Admin
   (.sidebar-label, ul/li, .menu-group-main). Sem quebrar o JS.
   ============================================================ */
.sidebar, #sidebar.sidebar { display: flex !important; flex-direction: column; padding: 0 !important; }

/* Logo compacta no topo + separador (some o espaço grande) */
.agince-sidebar-logo {
  padding: 16px 18px !important; margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.agince-sidebar-logo img { max-height: 52px !important; max-width: 180px; width: auto; padding: 0 !important; }

/* Marca "Área do X" */
.sidebar .sidebar-top { padding: 16px 16px 12px !important; display: flex; align-items: center; gap: 10px; border: none !important; }
.sidebar .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.sidebar .brand-icon {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); border-radius: 12px; color: #fff; font-size: 1.05rem;
}
.sidebar .brand-text strong { display: block; color: #fff; font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.sidebar .brand-text span { color: rgba(255, 255, 255, 0.68); font-size: .8rem; }

/* Navegação */
.sidebar .sidebar-nav { padding: 10px 12px 14px !important; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sidebar .sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar .sidebar-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255, 255, 255, 0.5); font-weight: 700; padding: 12px 14px 4px; margin: 0;
}

/* Itens e botões de grupo — visual IGUAL nos 3 papéis */
.sidebar .sidebar-nav a,
.sidebar .menu-group-toggle {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 13px; border-radius: 11px;
  color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: .93rem;
  background: transparent !important; border: none; width: 100%;
  cursor: pointer; text-decoration: none; box-shadow: none !important;
  transition: background .15s ease, color .15s ease;
}
.sidebar .menu-group-toggle { justify-content: space-between; }
.sidebar .menu-group-toggle-left, .sidebar .menu-group-main { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.sidebar .sidebar-nav a:hover,
.sidebar .menu-group-toggle:hover { background: rgba(255, 255, 255, 0.13) !important; color: #fff; }
.sidebar .sidebar-nav a > i:first-child,
.sidebar .menu-group-toggle i:first-child { width: 20px; text-align: center; font-size: 1rem; opacity: .92; flex: none; }
.sidebar .menu-group-arrow { font-size: .78rem; opacity: .7; transition: transform .25s ease; }
.sidebar .menu-group-toggle[aria-expanded="true"] .menu-group-arrow { transform: rotate(180deg); }

/* Submenu recolhível */
.sidebar .menu-group-content { display: none; flex-direction: column; gap: 2px; padding: 3px 0 4px 14px; margin: 2px 0 0 6px; border-left: 1px solid rgba(255, 255, 255, 0.10); }
.sidebar .menu-group-content.open { display: flex; }
.sidebar .menu-group-content a { min-height: 40px; font-weight: 500; font-size: .89rem; color: rgba(255, 255, 255, 0.82); }
.sidebar .menu-group-content a:hover { background: rgba(255, 255, 255, 0.10) !important; color: #fff; }

/* Rodapé / logout consistente */
.sidebar .sidebar-footer { padding: 14px 16px !important; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: auto; }
.sidebar .sidebar-footer button,
.sidebar #logout, .sidebar .btn-logout {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; border-radius: 12px; font-weight: 700; cursor: pointer; font-size: .92rem;
  background: rgba(255, 255, 255, 0.15) !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.sidebar .sidebar-footer button:hover,
.sidebar #logout:hover, .sidebar .btn-logout:hover { background: rgba(255, 255, 255, 0.26) !important; }

/* Páginas sem modo noturno (data-ag-no-dark): esconde qualquer botão de tema. */
html[data-ag-no-dark] .ag-theme-toggle,
html[data-ag-no-dark] .dark-mode-btn,
html[data-ag-no-dark] [data-theme-toggle] { display: none !important; }

/* ============================================================
   Botão "Trocar de perfil" (#agTrocaPerfilBtn / .ag-troca-perfil)
   Vem como PÍLULA por CSS inline do shared/troca-perfil.js. Aqui
   forçamos o MESMO quadrado dos outros ícones (sino/tema): 40x40,
   canto 12px, só ícone. !important vence o inline (que não tem).
   ============================================================ */
.ag-navbar .ag-troca-perfil, .topbar-right .ag-troca-perfil {
  width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important;
  padding: 0 !important; gap: 0 !important; justify-content: center !important;
  border-radius: 12px !important; margin-right: 8px !important; white-space: nowrap !important;
}
.ag-navbar .ag-troca-perfil-txt, .topbar-right .ag-troca-perfil-txt { display: none !important; }
/* Mesma pele dos demais ícones da barra */
.topbar-right .ag-troca-perfil {
  background: linear-gradient(180deg, var(--brand, #1f86e6) 0%, var(--brand-2, var(--brand, #1f86e6)) 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important; color: #fff !important;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.ag-navbar .ag-troca-perfil {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important; color: #fff !important; box-shadow: none !important;
}
.ag-navbar .ag-troca-perfil:hover, .topbar-right .ag-troca-perfil:hover { filter: brightness(1.08); }

/* ============================================================
   Navbar responsiva das AÇÕES (assistente / tour / trocar perfil):
   - DESKTOP (>=561px): cada opção EXPANDIDA = ícone + rótulo (pílula).
   - MOBILE  (<=560px): quadradinho só com ícone (como o sino).
   Esses botões nascem quadrados em seus arquivos (assistente-chat.js,
   agince-tour.css e o override de troca-perfil acima); aqui só os
   reabrimos no desktop. !important vence os estilos de origem.
   ============================================================ */
@media (min-width: 561px) {
  .topbar-right #ai-nav-dash, .ag-navbar #ai-nav-dash,
  .topbar-right .agtour-help-pill, .ag-navbar .agtour-help-pill,
  .topbar-right .ag-troca-perfil, .ag-navbar .ag-troca-perfil {
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: 40px !important; padding: 0 15px !important; gap: 8px !important;
    border-radius: 999px !important; justify-content: center !important; white-space: nowrap !important;
  }
  #ai-nav-dash .ai-bot-txt,
  .agtour-help-pill .agtour-help-label,
  .ag-troca-perfil .ag-troca-perfil-txt { display: inline !important; }
}

/* ============================================================
   CHAT MINIMIZADO — recolher de verdade, em TODAS as telas.

   O botão "_" trocava a classe e o ícone, e o chat continuava do mesmo
   tamanho: a altura é fixada com !important em pelo menos três lugares
   (shared/chat-servico.css, shared/pro-enhancements.css e o CSS de cada
   dashboard), e o `max-height: 52px` das telas nunca ganhava dessas regras.
   Resultado: quem minimizava continuava com o chat tapando a tela, sem saída.

   Mora aqui porque tema.css é o único arquivo presente nas 74 telas — e vale
   para os dois chats (#chatPopup e #chatServicePopup), que têm o mesmo botão e
   devem se comportar igual no cliente, no profissional e no suporte.

   A especificidade (id + duas classes) já vence as regras de altura acima;
   o !important é para os casos em que elas também o usam.
   ============================================================ */
#chatPopup.chat-popup.minimized,
#chatServicePopup.chat-popup.minimized,
.chat-popup.minimized {
  height: auto !important;
  max-height: 60px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* display:none em vez de só opacity/pointer-events: um corpo apenas invisível
   continuava ocupando a altura sempre que o max-height era ignorado. */
#chatPopup.chat-popup.minimized .chat-body,
#chatServicePopup.chat-popup.minimized .chat-body,
.chat-popup.minimized .chat-body,
.chat-popup.minimized .chat-actionbar,
.chat-popup.minimized .ag-chat-acao-bar,
.chat-popup.minimized .chat-status-row,
/* A tela do profissional envolve tudo num .chat-card e não usa .chat-body: sem estes
   seletores o corpo continuava ocupando espaço só ali. */
.chat-popup.minimized .chat-card > .chat-messages,
.chat-popup.minimized .chat-card > .chat-input-container,
.chat-popup.minimized #chatMessagesContainer,
.chat-popup.minimized .chat-input-container,
.chat-popup.minimized .chat-input {
  display: none !important;
}

/* O .chat-card é o container interno: ele também não pode manter a altura cheia. */
.chat-popup.minimized .chat-card {
  height: auto !important;
  max-height: 60px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* O cabeçalho é o que sobra: não pode encolher nem esconder o botão de voltar. */
.chat-popup.minimized .chat-header {
  min-height: 0 !important;
  height: auto !important;
}

@media (max-width: 720px) {
  /* No celular o chat aberto ocupa ~72vh: minimizado tem de encolher junto, ou
     o usuário fica sem acesso ao resto da tela. */
  #chatPopup.chat-popup.minimized,
  #chatServicePopup.chat-popup.minimized,
  .chat-popup.minimized {
    height: auto !important;
    max-height: 58px !important;
    inset: auto 10px 10px 10px !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Os containers de mensagem têm altura forçada por vw no pro-enhancements. */
  .chat-popup.minimized #chatContainer,
  .chat-popup.minimized #chatServiceContainer,
  .chat-popup.minimized #chatMessagesContainer,
  .chat-popup.minimized .chat-popup__messages {
    display: none !important;
    height: 0 !important;
  }
}

/* ==========================================================================
   MIDIA NO CELULAR
   Muitos <img> e <video> sao montados por JavaScript com largura fixa em
   pixels no atributo style ("max-width:520px", "max-width:320px"). Em tela
   larga isso e' so' um limite; em tela estreita o elemento fica MAIOR que o
   container e vaza — foi assim que o QR do Pix e as fotos apareciam cortados.
   Regra so' no celular, e com !important porque estilo em linha ganha da
   folha de estilo. No computador os limites originais continuam valendo.
   ========================================================================== */
@media (max-width: 640px) {
  img,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
    height: auto;
  }
  video {
    width: 100%;
    background: #000;
    border-radius: 10px;
  }
  /* Galeria/miniaturas: em vez de vazar, rola de lado dentro da propria caixa. */
  .ag-galeria,
  .galeria-fotos,
  .fotos-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Miniatura quadrada continua quadrada (a regra acima solta a altura). */
  img[width][height],
  .thumb img,
  .ag-thumb {
    height: auto;
  }
}

/* ==========================================================================
   MODAL LONGO PRECISA ROLAR — rede de protecao para o celular
   Terceira vez que o mesmo defeito aparece (modal de termos, barra lateral e
   checkout): um cartao "display:flex; flex-direction:column; overflow:hidden"
   cujo corpo tem "flex:1; overflow-y:auto" mas SEM min-height:0. Um filho flex
   nao encolhe abaixo do proprio conteudo, entao a rolagem nunca entra em acao
   e o que passa do limite fica inalcancavel. Em tela grande sobra folga e
   ninguem ve; no celular trava a pessoa no meio de um pagamento.
   Aqui a garantia e por CIMA: a propria sobreposicao passa a rolar. Se o
   cartao ainda estourar, o conteudo continua alcancavel — pior caso, rola a
   tela inteira em vez de nao rolar nada.
   ========================================================================== */
@media (max-width: 640px) {
  [class*="-overlay"],
  [class*="-ov"],
  [class*="-back"],
  [class*="modal-back"],
  [class$="modal"],
  [id*="Modal"],
  [style*="position:fixed"][style*="inset:0"],
  [style*="position: fixed"][style*="inset: 0"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* O CORPO de um cartao em coluna: e aqui que falta o min-height:0.
     Aplicado so no celular para nao mexer no desenho do computador. */
  [class*="-ov"] > * > [style*="overflow-y:auto"],
  [class*="-overlay"] > * > [style*="overflow-y:auto"],
  [style*="position:fixed"] > * > [style*="overflow-y:auto"] {
    min-height: 0;
  }
}

/* ==========================================================================
   A BARRA SUPERIOR E UMA LINHA — em TODO painel
   O Dashboard-Cliente nunca declarou "display:flex" na .topbar dela: ficava
   em "display:block", e todo controle empilhava um embaixo do outro. Medido
   no navegador: 221px de altura, cinco botoes em coluna colados na esquerda.
   O painel do profissional tinha uma SEGUNDA regra .topbar, mais abaixo no
   arquivo dele, que consertava — e por isso so' ele parecia certo. A regra
   passa a viver aqui, valendo para todos, inclusive para o painel que alguem
   criar depois.
   Sem !important de proposito: o tema.css carrega DEPOIS das folhas de cada
   painel, entao a especificidade igual ja basta.
   ========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.topbar-left {
  min-width: 0;
}

/* ==========================================================================
   BARRA SUPERIOR NO CELULAR — cabe em UMA linha
   Os controles da direita nao sao da pagina: sao INJETADOS por varios modulos
   (assistente, troca de perfil, tour, sino, tema). Cada um chegou depois do
   outro, e ninguem somou a largura total. Com rotulo, dao ~486px — numa tela
   de 400px a barra quebra em duas linhas, com o hamburguer sozinho em cima e
   os botoes embaixo. E a barra e sticky, entao rouba 143px de altura em toda
   rolagem.
   Aqui os ROTULOS somem no celular e ficam so os icones (~250px no total). O
   !important e necessario porque os proprios modulos escrevem estilo com id.
   ========================================================================== */
@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap !important; }

  .topbar-right {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .topbar-right .ai-bot-txt,
  .topbar-right .ag-troca-perfil-txt,
  .topbar-right .agtour-help-label,
  .topbar-right .dark-mode-btn > span,
  .ag-navbar-right .ai-bot-txt,
  .ag-navbar-right .ag-troca-perfil-txt,
  .ag-navbar-right .agtour-help-label {
    display: none !important;
  }

  .topbar-right > button,
  .topbar-right #ai-nav-dash,
  .ag-navbar-right > button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: auto !important;
    min-width: 40px !important;
    flex: 0 0 auto !important;
  }
}

/* ==========================================================================
   "VISTO POR ULTIMO" NO CHAT — mesmo formato em todas as telas
   O formato aprovado ja existia no meusServicos (profissional) e no
   lista-servicos (cliente): foto a esquerda, nome, e ABAIXO do nome a bolinha
   com o horario. Nos tres dashboards nao havia nada — o cabecalho mostrava so
   foto e nome, e quem conversava nao sabia se o outro estava ali ou tinha
   sumido ha dois dias.
   As regras que ja existiam sao ancoradas em "#chatPopup", entao continuam
   valendo onde estao (especificidade maior). Estas aqui pegam o resto.
   A cor usa opacidade em vez de branco fixo: assim serve tanto no cabecalho
   escuro quanto num claro, sem precisar saber qual e.
   ========================================================================== */
.chat-popup .ag-chat-ident {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.chat-popup .ag-chat-ident > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-popup .chat-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  opacity: .85;
  margin: 2px 0 0;
  line-height: 1.2;
}
.chat-popup .chat-presence__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ca3af;
  flex: 0 0 auto;
}
.chat-popup .chat-presence.online .chat-presence__dot {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, .8);
}

/* --------------------------------------------------------------------------
   ...e o LADO ESQUERDO da barra tambem precisa caber.
   Cliente e Admin colocam um titulo de 28px MAIS um paragrafo de descricao
   dentro da barra superior. Com os cinco controles da direita, numa tela de
   400px isso quebra por definicao — nao ha largura que sirva. (O painel do
   profissional nao tem texto ali: por isso so ele parecia certo.)
   No celular a descricao sai e o titulo encolhe com reticencias. Ela e' sticky:
   cada linha extra e' altura roubada de TODA rolagem, e a descricao repete o
   que a propria tela ja diz logo abaixo.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .topbar-left {
    min-width: 0;
    flex: 1 1 auto;
  }
  .topbar-left p,
  .topbar-left .page-subtitle {
    display: none !important;
  }
  .topbar-left h1,
  .topbar-left .page-title {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   NOME LONGO NO CHAT: anda em vez de sumir em reticencias.
   "Chat - <nome do servico>" e' texto livre, e as reticencias escondem
   justamente a parte que identifica a conversa. So' entra em movimento quando
   nao cabe (o JS mede e poe a classe). Respeita quem pediu menos animacao.
   -------------------------------------------------------------------------- */
.chat-popup .ag-marquee-caixa {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}
.chat-popup .ag-marquee-caixa .ag-marquee-txt {
  display: inline-block;
  will-change: transform;
}
.chat-popup .ag-marquee-caixa.ag-marquee-anda .ag-marquee-txt {
  animation: agMarqueeChat var(--ag-marquee-tempo, 10s) ease-in-out infinite alternate;
}
@keyframes agMarqueeChat {
  0%, 12%   { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--ag-marquee-dist, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-popup .ag-marquee-caixa.ag-marquee-anda .ag-marquee-txt { animation: none; }
  .chat-popup .ag-marquee-caixa { text-overflow: ellipsis; }
}

/* O "Denunciar" e o "digitando..." vivem na coluna de identidade do cabecalho,
   ABAIXO da presenca — nao espremidos ao lado do nome. */
.chat-popup .ag-chat-ident {
  gap: 2px;
}
/* O Denunciar mora na fileira de botoes do cabecalho, a esquerda do minimizar.
   Ele NAO pode encolher nem quebrar linha: e' o unico ali com texto, e num
   cabecalho apertado seria o primeiro a ser espremido. No celular sobra so' o
   simbolo — a acao continua obvia e o cabecalho segue com uma linha so'. */
.chat-popup .chat-header-actions > #btnDenunciaServico {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 0 !important;
  align-self: center;
}
@media (max-width: 640px) {
  .chat-popup .chat-header-actions > #btnDenunciaServico {
    font-size: 0 !important;
    padding: 6px 9px !important;
  }
  .chat-popup .chat-header-actions > #btnDenunciaServico::before {
    content: "A0";
    font-size: .95rem;
  }
}
.chat-popup .ag-chat-ident > .typing-indicator {
  font-size: 11px;
  opacity: .8;
}