/* ============================================================================
   FONTES — self-hosted. Arquivos .woff2 em vendor/fonts/ (ver vendor/fonts/README.md).
   Subset "latin" cobre pt-BR. Nenhuma requisição a fonts.googleapis.com/gstatic.
   ============================================================================ */
/* Schibsted Grotesk — corpo e textos (OFL). */
@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/schibsted-grotesk-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendor/fonts/schibsted-grotesk-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('vendor/fonts/schibsted-grotesk-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('vendor/fonts/schibsted-grotesk-700.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendor/fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('vendor/fonts/jetbrains-mono-600.woff2') format('woff2');
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@keyframes funnel-fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes funnel-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes hotLeadPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes funnel-zoom-in {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

:root {
    color-scheme: dark;
    --background: 230 12% 10%;
    --foreground: 230 15% 93%;
    --card: 230 12% 10%;
    --card-foreground: 230 15% 93%;
    --popover: 230 12% 10%;
    --popover-foreground: 230 10% 65%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 1%;
    --secondary: 230 10% 14%;
    --secondary-foreground: 0 0% 98%;
    --muted: 230 10% 14%;
    --muted-foreground: 230 10% 70%;
    --accent: 230 9% 26%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 72% 58%;
    --destructive-foreground: 0 0% 98%;
    --border: 230 9% 18%;
    --input: 230 9% 18%;
    --ring: 230 60% 75%;
    --radius: 0.5rem;

    --bg-dark: hsl(230, 12%, 9%);
    --dash-funnel-sep: var(--bg-dark);
    --bg-agenda: hsl(var(--background));
    --agenda-header-bg: hsl(var(--muted));
    --bg-card: hsl(var(--card));
    --bg-column: hsl(var(--muted));
    --text-main: hsl(var(--foreground));
    --text-muted: hsl(var(--muted-foreground));
    --header-bg: hsl(230, 12%, 12%);
    --header-text: hsl(var(--foreground));
    --header-btn-bg: transparent;
    --header-btn-hover: hsl(var(--accent));
    --header-btn-border: hsl(var(--border));
    --nav-active-bg: hsl(var(--accent));
    --nav-active-border: hsl(var(--border));
    --nav-arrow: hsl(var(--muted-foreground));
    --sb-card-bg: hsl(230, 12%, 6%);
    --sb-danger: hsl(var(--destructive));
    
    --accent-primary: #38bdf8;
    --accent-success: #10b981;
    --accent-warning: #fbbf24;
    --accent-danger: #f87171;
    --accent-info: #38bdf8;
    --accent-purple: #a78bfa;
    --accent-success-tint: rgba(16, 185, 129, 0.12);
    --accent-warning-tint: rgba(251, 191, 36, 0.12);
    --accent-danger-tint: rgba(248, 113, 113, 0.12);
    --accent-info-tint: rgba(56, 189, 248, 0.12);
    --accent-purple-tint: rgba(167, 139, 250, 0.12);
    --bg-main: hsl(230, 12%, 10%);
    --bg-hover: hsl(230, 9%, 16%);
    --border-color: hsl(var(--border));
    --btn-secondary-bg: hsl(var(--secondary));
    --btn-secondary-hover: hsl(var(--muted));
    --btn-secondary-text: hsl(var(--secondary-foreground));

    /* Agenda Colors — Dark Mode. A borda usa a mesma cor do card, só que
       um sobretom acima (mesmo matiz, um passo mais claro). */
    --agenda-c1-bg: #4c1d95;
    --agenda-c1-border: #6d28d9;
    --agenda-c1-border-strong: #6d28d9;
    --agenda-c1-text: #f5f3ff;
    --agenda-c2-bg: #065f46;
    --agenda-c2-border: #0a8a66;
    --agenda-c2-border-strong: #0a8a66;
    --agenda-c2-text: #ecfdf5;
    --agenda-c3-bg: #78350f;
    --agenda-c3-border: #9a4a16;
    --agenda-c3-border-strong: #9a4a16;
    --agenda-c3-text: #fffbeb;
    --agenda-c4-bg: #831843;
    --agenda-c4-border: #a81f57;
    --agenda-c4-border-strong: #a81f57;
    --agenda-c4-text: #fdf2f8;
    --agenda-c5-bg: #1e3a5f;
    --agenda-c5-border: #2f5688;
    --agenda-c5-border-strong: #2f5688;
    --agenda-c5-text: #eff6ff;
    --agenda-c6-bg: #134e4a;
    --agenda-c6-border: #1c6f69;
    --agenda-c6-border-strong: #1c6f69;
    --agenda-c6-text: #f0fdfa;
    --agenda-c7-bg: #881337;
    --agenda-c7-border: #a81a45;
    --agenda-c7-border-strong: #a81a45;
    --agenda-c7-text: #fff1f2;
    --agenda-block-bg: hsl(var(--muted));
    --agenda-block-border: hsl(var(--border));
    --agenda-block-border-strong: hsl(var(--muted-foreground));
    --agenda-block-text: hsl(var(--foreground));
}

[data-theme="light"] {
    color-scheme: light;
    --background: 210 40% 98%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 78%;
    --input: 214.3 31.8% 78%;
    --ring: 222.2 84% 4.9%;

    --bg-dark: #e8edf2;
    --dash-funnel-sep: var(--bg-card);
    --bg-agenda: #e8edf2;
    --agenda-header-bg: hsl(var(--background));
    --bg-card: hsl(var(--card));
    --bg-column: hsl(var(--muted));
    --text-main: hsl(var(--foreground));
    --text-muted: hsl(var(--muted-foreground));
    --header-bg: hsl(var(--background));
    --header-text: hsl(var(--foreground));
    --header-btn-bg: transparent;
    --header-btn-hover: hsl(var(--accent));
    --header-btn-border: hsl(var(--border));
    --nav-active-bg: hsl(var(--accent));
    --nav-active-border: hsl(var(--border));
    --nav-arrow: hsl(var(--muted-foreground));
    --sb-card-bg: hsl(var(--card));
    --sb-danger: hsl(var(--destructive));
    
    --accent-primary: #0284c7;
    --accent-success: #059669;
    --accent-warning: #d97706;
    --accent-danger: #dc2626;
    --accent-info: #0284c7;
    --accent-purple: #7c3aed;
    --accent-success-tint: rgba(5, 150, 105, 0.12);
    --accent-warning-tint: rgba(217, 119, 6, 0.12);
    --accent-danger-tint: rgba(220, 38, 38, 0.12);
    --accent-info-tint: rgba(2, 132, 199, 0.12);
    --accent-purple-tint: rgba(124, 58, 237, 0.12);
    --border-color: hsl(var(--border));
    --btn-secondary-bg: hsl(var(--secondary));
    --btn-secondary-hover: hsl(var(--muted));
    --btn-secondary-text: hsl(var(--secondary-foreground));
    --bg-main: #e8edf2;
    --bg-hover: #dde3ea;

    /* Agenda Colors - Light Mode. A borda usa a mesma cor da fonte interna
       do card (sobretom escuro sobre o fundo pastel). */
    --agenda-c1-bg: #e9d5ff;
    --agenda-c1-border: #581c87;
    --agenda-c1-border-strong: #581c87;
    --agenda-c1-text: #581c87;
    --agenda-c2-bg: #bbf7d0;
    --agenda-c2-border: #14532d;
    --agenda-c2-border-strong: #14532d;
    --agenda-c2-text: #14532d;
    --agenda-c3-bg: #fef08a;
    --agenda-c3-border: #713f12;
    --agenda-c3-border-strong: #713f12;
    --agenda-c3-text: #713f12;
    --agenda-c4-bg: #fbcfe8;
    --agenda-c4-border: #831843;
    --agenda-c4-border-strong: #831843;
    --agenda-c4-text: #831843;
    --agenda-c5-bg: #bae6fd;
    --agenda-c5-border: #0c4a6e;
    --agenda-c5-border-strong: #0c4a6e;
    --agenda-c5-text: #0c4a6e;
    --agenda-c6-bg: #99f6e4;
    --agenda-c6-border: #134e4a;
    --agenda-c6-border-strong: #134e4a;
    --agenda-c6-text: #134e4a;
    --agenda-c7-bg: #fecdd3;
    --agenda-c7-border: #881337;
    --agenda-c7-border-strong: #881337;
    --agenda-c7-text: #881337;
    --agenda-block-bg: hsl(var(--muted));
    --agenda-block-border: hsl(var(--border));
    --agenda-block-border-strong: hsl(var(--muted-foreground));
    --agenda-block-text: hsl(var(--foreground));
}

[data-theme="light"] .kanban-filters {
    background: hsl(var(--background));
}

/* ============================================================================
   TEMA ESCURO FIXO — menu lateral e tela de login
   O restante do app acompanha o tema escolhido; estes dois blocos ficam
   sempre escuros. Reaplicamos todos os tokens do :root (valores dark) no
   escopo do <header> e do #login-overlay, então tudo que usa var(--…)
   nesses subtrees recalcula no escuro, mesmo com [data-theme="light"] no body.
   ============================================================================ */
[data-theme="light"] header,
[data-theme="light"] #login-overlay,
[data-theme="light"] .sb-flyout,
.sb-flyout {
    color-scheme: dark;
    --background: 230 12% 10%;
    --foreground: 230 15% 93%;
    --card: 230 12% 10%;
    --card-foreground: 230 15% 93%;
    --popover: 230 12% 10%;
    --popover-foreground: 230 10% 65%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 1%;
    --secondary: 230 10% 14%;
    --secondary-foreground: 0 0% 98%;
    --muted: 230 10% 14%;
    --muted-foreground: 230 10% 70%;
    --accent: 230 9% 26%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 72% 58%;
    --destructive-foreground: 0 0% 98%;
    --border: 230 9% 18%;
    --input: 230 9% 18%;
    --ring: 230 60% 75%;

    --bg-dark: hsl(230, 12%, 9%);
    --dash-funnel-sep: var(--bg-dark);
    --bg-agenda: hsl(var(--background));
    --agenda-header-bg: hsl(var(--muted));
    --bg-card: hsl(var(--card));
    --bg-column: hsl(var(--muted));
    --text-main: hsl(var(--foreground));
    --text-muted: hsl(var(--muted-foreground));
    --header-bg: hsl(230, 12%, 12%);
    --header-text: hsl(var(--foreground));
    --header-btn-bg: transparent;
    --header-btn-hover: hsl(var(--accent));
    --header-btn-border: hsl(var(--border));
    --nav-active-bg: hsl(var(--accent));
    --nav-active-border: hsl(var(--border));
    --nav-arrow: hsl(var(--muted-foreground));
    --sb-card-bg: hsl(230, 12%, 6%);
    --sb-danger: hsl(var(--destructive));

    --accent-primary: #38bdf8;
    --accent-success: #10b981;
    --accent-warning: #fbbf24;
    --accent-danger: #f87171;
    --accent-info: #38bdf8;
    --accent-purple: #a78bfa;
    --accent-success-tint: rgba(16, 185, 129, 0.12);
    --accent-warning-tint: rgba(251, 191, 36, 0.12);
    --accent-danger-tint: rgba(248, 113, 113, 0.12);
    --accent-info-tint: rgba(56, 189, 248, 0.12);
    --accent-purple-tint: rgba(167, 139, 250, 0.12);
    --bg-main: hsl(230, 12%, 10%);
    --bg-hover: hsl(230, 9%, 16%);
    --border-color: hsl(var(--border));
    --btn-secondary-bg: hsl(var(--secondary));
    --btn-secondary-hover: hsl(var(--muted));
    --btn-secondary-text: hsl(var(--secondary-foreground));
}

.skip-to-main {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 99999;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 2px solid hsl(var(--ring));
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-to-main:focus {
    top: 1rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html {
    font-size: 13px;
    /* Aumenta a "DPI", deixando tudo proporcionalmente menor */
}

/* ==========================================
   ESCALA TIPOGRÁFICA — Dossiê de Design System
   Classes utilitárias opcionais; nada abaixo é aplicado
   automaticamente aos elementos existentes.
   ========================================== */
.text-display {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.text-heading {
    font-size: 1.1rem;
    font-weight: 700;
}

.text-subheading {
    font-size: 0.95rem;
    font-weight: 600;
}

.text-body {
    font-size: 0.85rem;
    font-weight: 400;
}

.text-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.text-caption {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Fonte utilitária para dados: valores em R$, telefones, datas, IDs, hex.
   Números tabulares para colunas de valor alinharem certinho. */
.font-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    height: 100vh;
    display: flex;
    flex-direction: row;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Qualquer conteúdo de página (fora da barra lateral) ocupa o espaço restante.
   Elementos com position:fixed (modais) ignoram isso normalmente. */
body>*:not(header) {
    flex: 1 1 auto;
    min-width: 0;
}

.header,
.column,
.card,
.agenda-block,
.grid-col-header,
.time-slot,
.modal-content {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}



/* Header — agora é a barra lateral esquerda, não mais uma barra horizontal no topo */
header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    border-bottom: none;
    border-right: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    width: 232px;
    flex-shrink: 0;
    overflow-y: auto;
    z-index: 10000;
}

header .actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

header .btn-primary,
header .btn-secondary,
header .btn-danger {
    width: 100%;
    justify-content: flex-start;
}

/* Ações do rodapé da barra lateral — visual neutro, sem as cores fortes originais,
   pra combinar com o resto do menu (referência de UI clean/dark). */
header .actions button {
    background: var(--header-btn-bg) !important;
    color: var(--header-text) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    background-image: none !important;
}

header .actions button:hover {
    background: var(--header-btn-hover) !important;
}

header .actions button i {
    color: var(--text-muted) !important;
}

header .actions .btn-primary {
    background: var(--nav-active-bg) !important;
    border: 1px solid var(--accent-primary) !important;
    color: var(--text-main) !important;
}

header .actions .btn-primary i {
    color: var(--accent-primary) !important;
}

header .actions .btn-danger {
    color: var(--accent-danger) !important;
}

header .actions .btn-danger i {
    color: var(--accent-danger) !important;
}

header .actions .btn-danger:hover {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: var(--accent-danger) !important;
}

/* ==========================================
   SIDEBAR PREMIUM — index.html
   Sistema de espaçamento em base 4px.
   ========================================== */
header {
    padding: 16px 14px;
    gap: 0;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sb-logo {
    display: flex;
    align-items: center;
    height: 48px;
    margin-bottom: 20px;
    padding-left: 2px;
    flex-shrink: 0;
}

.sb-logo i {
    font-size: 22px;
    color: var(--accent-primary);
}

.sb-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--sb-card-bg);
    border: 1px solid var(--header-btn-border);
    border-radius: 11px;
    padding: 6px;
    flex-shrink: 0;
}

.sb-nav>.tab-btn,
.sb-nav>.dropdown>.tab-btn {
    height: 40px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    border-radius: 8px;
}

.sb-nav>.tab-btn i,
.sb-nav>.dropdown>.tab-btn i {
    font-size: 17px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.sb-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nav-arrow);
    padding: 0 8px;
    margin: 20px 0 8px;
    flex-shrink: 0;
}

.sb-tools {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}

.sb-tool-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 10px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-align: left;
    width: 100%;
    text-decoration: none;
}

.sb-tool-btn i {
    font-size: 15px;
    width: 16px;
    text-align: center;
    color: var(--nav-arrow);
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.sb-tool-btn:hover {
    background: var(--header-btn-hover);
    color: var(--header-text);
}

.sb-tool-btn:hover i {
    color: var(--header-text);
}

.sb-bottom {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--header-btn-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.sb-bottom-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.sb-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.sb-icon-btn:hover {
    background: var(--header-btn-hover);
    color: var(--header-text);
}

.sb-icon-btn i {
    font-size: 16px;
}

/* ================================ */
/* SIDEBAR — rail fixo que expande ao passar o mouse */
/* ================================ */

header.sb-collapsed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 54px;
    overflow-x: hidden;
    z-index: 10000;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s ease;
}

/* Reserva a faixa do rail para o conteúdo não pular quando o header vira fixed */
header.sb-collapsed ~ .app-content {
    margin-left: 54px;
    transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Estado recolhido: vale só enquanto o mouse NÃO está sobre a barra --- */
header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) {
    padding: 16px 8px;
}
header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-logo {
    justify-content: center;
    padding-left: 0;
}
header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-logo span {
    display: none;
}

header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-nav {
    padding: 6px 3px;
}

header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-nav > .tab-btn,
header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-nav > .dropdown > .tab-btn {
    font-size: 0;
    justify-content: center;
    padding: 0;
    width: 36px;
    margin: 0 auto;
    gap: 0;
}
header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-nav > .tab-btn > i:first-child,
header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-nav > .dropdown > .tab-btn > i:first-child {
    font-size: 17px;
    width: auto;
}
header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .tab-btn .fa-chevron-right {
    display: none;
}
header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) [id$="-badge"] {
    display: none !important;
}

header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-section-label {
    display: none;
}

header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-tool-btn {
    font-size: 0;
    justify-content: center;
    padding: 0;
    width: 34px;
    margin: 0 auto;
    gap: 0;
}
header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-tool-btn i {
    font-size: 15px;
    width: auto;
}

header.sb-collapsed:not(:hover):not(.sb-flyout-open):not(.sb-mobile-open) .sb-bottom-row {
    justify-content: center;
}

/* --- Expandido: no hover, ou enquanto um flyout de submenu está aberto --- */
header.sb-collapsed:hover,
header.sb-collapsed.sb-flyout-open,
header.sb-collapsed.sb-mobile-open {
    width: 232px;
    padding: 16px 14px;
    box-shadow: 8px 0 32px -10px rgba(0, 0, 0, 0.5);
}

.sb-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--sb-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--header-bg);
}

.sb-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--header-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sb-cta:hover {
    background: rgba(56, 189, 248, 0.12);
}

.sb-cta i {
    color: var(--accent-primary);
    font-size: 13px;
}

.sb-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--header-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background-color 0.15s ease;
}

.sb-profile:hover {
    background: var(--header-btn-hover);
}

.sb-profile img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sb-profile .fallback {
    font-size: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sb-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--sb-danger);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sb-logout:hover {
    background: rgba(229, 131, 122, 0.1);
    border-color: rgba(229, 131, 122, 0.25);
}

.sb-logout i {
    font-size: 15px;
    color: var(--sb-danger);
    flex-shrink: 0;
}

/* ==========================================
   PAINEL "INFORMAÇÕES DO LEAD" (chat) — mesmo visual flat/clean da sidebar
   ========================================== */

/* ==========================================
   SIDEBAR — Professional navigation
   Removes card-within-card double-boxing,
   adds left-bar active indicator, harmonizes
   icon treatment. Reference: Linear / Vercel.
   ========================================== */

/* Strip the card wrapper — nav items live directly in the sidebar */
nav.tabs-container.sb-nav {
    background: transparent;
    border: none;
    padding: 0;
    gap: 2px;
}

/* Nav item base: use muted color, never opacity trick */
.sb-nav > .tab-btn,
.sb-nav > .dropdown > .tab-btn {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    gap: 10px;
    border-radius: 7px;
    color: var(--text-muted);
    opacity: 1;
    border: 1px solid transparent;
}

/* Icon: slightly muted by default */
.sb-nav > .tab-btn > i:first-child,
.sb-nav > .dropdown > .tab-btn > i:first-child {
    font-size: 15px;
    width: 16px;
    text-align: center;
    color: hsl(230, 8%, 40%);
    flex-shrink: 0;
    transition: color 0.12s ease;
}

/* Hover */
.sb-nav > .tab-btn:hover,
.sb-nav > .dropdown > .tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    opacity: 1;
}

.sb-nav > .tab-btn:hover > i:first-child,
.sb-nav > .dropdown > .tab-btn:hover > i:first-child {
    color: var(--text-main);
}

/* Remove the slide-in arrow — a generated-UI pattern */
.sb-nav > .tab-btn::after {
    display: none !important;
}

/* Active: blue left bar + tinted surface */
.sb-nav .tab-btn.active {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important;
    border-color: transparent !important;
    color: var(--accent-primary) !important;
    box-shadow: inset 2px 0 0 var(--accent-primary) !important;
    font-weight: 600;
    opacity: 1;
}

.sb-nav .tab-btn.active i {
    color: var(--accent-primary) !important;
}

/* Logo area — tighter, more refined */
.sb-logo {
    gap: 9px;
    padding: 0 4px;
    margin-bottom: 22px;
}

.sb-logo i {
    font-size: 19px;
}

/* Section label — quieter */
.sb-section-label {
    font-size: 10.5px;
    letter-spacing: 0.07em;
    color: hsl(230, 8%, 36%);
    padding: 0 10px;
    margin: 20px 0 4px;
}

/* Tool buttons — harmonized with nav items */
.sb-tool-btn {
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 7px;
    border: 1px solid transparent;
}

.sb-tool-btn i {
    font-size: 14px;
    width: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.12s ease;
}

.sb-tool-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    border-color: transparent;
}

.sb-tool-btn:hover i {
    color: var(--text-main);
}

/* Bottom divider — uses the new tinted neutral */
.sb-bottom {
    border-top-color: hsl(230, 9%, 14%);
}

/* Flyout polish — better shadow and color alignment */
.sb-flyout {
    background: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
}

.sb-flyout-item:hover {
    background: var(--bg-hover) !important;
}

.sb-flyout-item-icon {
    background: var(--bg-main) !important;
    border-color: hsl(var(--border)) !important;
    color: var(--accent-primary) !important;
}

.sb-flyout-item-icon i {
    color: var(--accent-primary) !important;
}

/* Painel de informações do lead (chat) — tokens locais p/ manter a mesma
   linguagem visual dos modais refinados. */
#chat-lead-panel {
    --lp-line: color-mix(in srgb, var(--text-main) 12%, transparent);
    --lp-line-soft: color-mix(in srgb, var(--text-main) 7%, transparent);
    --lp-surface: color-mix(in srgb, var(--text-main) 4%, transparent);
    --lp-raise: color-mix(in srgb, var(--text-main) 7%, transparent);
    --lp-accent: var(--accent-primary);
    transition: width 0.18s ease;
}

/* Botão de ocultar o painel de informações do lead (só desktop) */
.chat-lead-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.72rem;
    transition: background 0.15s, color 0.15s;
}
.chat-lead-collapse:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    color: var(--text-main);
}

/* Desktop: painel some por completo até o atendente pedir pra abrir
   (botão "Ferramentas > Mostrar ficha" ou o chevron do próprio painel). */
@media (min-width: 769px) {
    #chat-lead-panel.lp-hidden {
        display: none !important;
    }
}

.lead-panel-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nav-arrow);
    margin-bottom: 9px;
}

.lead-panel-label i {
    font-size: 11px;
    color: var(--lp-accent, var(--accent-primary));
}

.lead-panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid var(--lp-line, var(--border-color));
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lead-panel-btn:hover {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-primary) 42%, transparent);
}

.lead-panel-btn i:first-child {
    color: var(--nav-arrow);
    font-size: 13px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* Ações de "criar algo" (Agendar / Orçamento): mesmo peso das outras, só o
   ícone em accent como sinal de que abrem um fluxo. Sem preenchimento. */
.lead-panel-btn--accent i:first-child { color: var(--accent-primary); }
.lead-panel-btn--accent:hover {
    background: color-mix(in srgb, var(--accent-primary) 9%, transparent);
    border-color: color-mix(in srgb, var(--accent-primary) 38%, transparent);
}

/* Bloco de ações separado do bloco de informações — lista alinhada à esquerda */
.lp-actions-group {
    border-top: 1px solid var(--lp-line-soft, var(--border-color));
    padding-top: 1.15rem;
    margin-top: 0.1rem;
}

/* Divisória entre "capítulos" da ficha (Contato -> Aquisição -> Notas/Interno)
   — mesma pausa visual do .lp-actions-group, só que no meio do painel em vez
   do fim, pra a ficha não virar uma lista contínua sem hierarquia. */
.lp-group-divider {
    border-top: 1px solid var(--lp-line-soft, var(--border-color));
    padding-top: 1.15rem;
    margin-top: 0.1rem;
}
.lp-actions-group .lead-panel-btn {
    justify-content: flex-start;
    padding-left: 12px;
    font-weight: 500;
}

/* Linha de status + ação das campanhas de marketing */
.lp-campaign-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--lp-surface, var(--sb-card-bg));
    border: 1px solid var(--lp-line-soft, var(--border-color));
    color: var(--text-main);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lp-campaign-btn:hover { border-color: var(--lp-line, var(--border-color)); }
.lp-campaign-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-campaign-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lp-campaign-btn[data-state="on"] .lp-campaign-dot {
    background: var(--accent-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-success) 22%, transparent);
}
.lp-campaign-btn[data-state="off"] {
    border-color: color-mix(in srgb, var(--accent-danger) 30%, transparent);
    background: color-mix(in srgb, var(--accent-danger) 8%, transparent);
}
.lp-campaign-btn[data-state="off"] .lp-campaign-dot {
    background: var(--accent-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-danger) 22%, transparent);
}
.lp-campaign-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nav-arrow);
    transition: color 0.15s ease;
}
.lp-campaign-btn:hover .lp-campaign-action { color: var(--text-main); }
.lp-campaign-btn[data-state="off"] .lp-campaign-action { color: var(--accent-danger); }
.lp-campaign-action i { font-size: 9px; }

.lead-panel-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--lp-raise, var(--sb-card-bg));
    border: 1px solid var(--lp-line, var(--header-btn-border));
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 600;
}

.lead-panel-card {
    background: var(--lp-surface, var(--sb-card-bg));
    border: 1px solid var(--lp-line-soft, var(--header-btn-border));
    border-radius: 10px;
    padding: 10px 12px;
}

/* Card de valor com dinheiro recebido — leve tom de sucesso */
.lead-panel-card--money {
    background: color-mix(in srgb, var(--accent-success) 9%, transparent);
    border-color: color-mix(in srgb, var(--accent-success) 24%, transparent);
}

.lead-panel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 7px;
    background: var(--lp-raise, var(--sb-card-bg));
    border: 1px solid var(--lp-line, var(--header-btn-border));
    color: var(--text-main);
}

.lead-panel-empty {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 9px 11px;
    border: 1px dashed var(--lp-line, var(--border-color));
    border-radius: 9px;
}
.lead-panel-empty i { opacity: 0.8; }

.lead-panel-textarea {
    width: 100%;
    background: var(--bg-main);
    border: 1px solid var(--lp-line, var(--header-btn-border));
    color: var(--text-main);
    padding: 9px 11px;
    border-radius: 9px;
    outline: none;
    resize: vertical;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lead-panel-textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

/* ==========================================
   TOPBAR — badge de usuário no canto superior direito
   ========================================== */
/* Envolve a topbar + a view ativa numa coluna só, ao lado da sidebar.
   Sem isso a topbar (fixed) sobrepunha o conteúdo em vez de empurrá-lo. */
.app-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.app-content>*:not(.topbar-user) {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.topbar-user {
    flex-shrink: 0;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    z-index: 90;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-btn-border);
    position: relative;
}

.user-menu {
    position: relative;
    pointer-events: auto;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 39px;
    /* padding-right = (height - avatar) / 2 = 4px, pra o fim da pílula ficar
       concêntrico com o círculo do avatar */
    padding: 4px 4px 4px 14px;
    border-radius: 999px;
    background: var(--sb-card-bg);
    border: 1px solid var(--header-btn-border);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.user-chip:hover {
    background: var(--header-btn-hover);
    border-color: var(--accent-primary);
}

.user-chip-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--header-text);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--header-btn-bg);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.user-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-badge .fallback {
    font-size: 13px;
    color: var(--text-muted);
}

.user-flyout {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--header-btn-border);
    border-radius: 10px;
    box-shadow: none;
    padding: 6px;
    z-index: 200;
}

.user-flyout.open {
    display: block;
}

.user-flyout-header {
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--header-btn-border);
}

.user-flyout-header span {
    font-size: 13px;
    font-weight: 600;
    color: var(--header-text);
}

.user-flyout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border-radius: 7px;
    background: transparent;
    border: none;
    color: var(--header-text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.user-flyout-item i {
    font-size: 14px;
    width: 15px;
    text-align: center;
    color: var(--nav-arrow);
    flex-shrink: 0;
}

.user-flyout-item:hover {
    background: var(--header-btn-hover);
}

.user-flyout-item.danger {
    color: var(--sb-danger);
}

.user-flyout-item.danger i {
    color: var(--sb-danger);
}

.user-flyout-item.danger:hover {
    background: rgba(229, 131, 122, 0.1);
}

.user-flyout-divider {
    height: 1px;
    background: var(--header-btn-border);
    margin: 6px 4px;
}

header h1,
header .logo-text {
    color: var(--header-text);
}

header .btn-secondary {
    color: var(--header-text);
    border-color: var(--header-btn-border);
    background: var(--header-btn-bg);
}

header .btn-secondary:hover {
    background: var(--header-btn-hover);
}

/* Diminuir os botões dentro do header */
header .btn-primary,
header .btn-secondary {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 6px;
}

.table-container {
    overflow-x: auto;
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    background-color: var(--secondary-color);
    font-weight: 500;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-hoje {
    background-color: color-mix(in srgb, var(--accent-warning) 15%, transparent);
    color: var(--accent-warning);
}

.status-mes {
    background-color: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    color: var(--accent-primary);
}

/* Custom Dropdown Items */
.ag-dropdown-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.1s;
    font-size: 0.9rem;
    color: var(--text-main);
}

.ag-dropdown-item:hover {
    background-color: var(--bg-column);
}

.ag-dropdown-item:last-child {
    border-bottom: none;
}

.tabs-container {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 0.35rem;
    border: 1px solid var(--border-color);
    gap: 0.15rem;
}

.tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Abas na barra principal */
.tabs-container>.tab-btn,
.tabs-container>.dropdown>.tab-btn {
    color: var(--header-text);
    opacity: 0.85;
    width: 100%;
    justify-content: flex-start;
}

.tabs-container>.tab-btn:hover,
.tabs-container>.dropdown>.tab-btn:hover {
    opacity: 1;
    background: var(--header-btn-hover);
}

.dropdown-content .tab-btn:hover {
    color: var(--text-main);
    background: var(--header-btn-hover);
}

/* Seta à direita — só nos itens simples de primeiro nível. O trigger do
   dropdown (Relacionamento) já tem seu próprio chevron de "expansível". */
.tabs-container>.tab-btn::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--nav-arrow);
    margin-left: auto;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.tabs-container>.tab-btn:hover::after,
.tabs-container>.tab-btn.active::after {
    opacity: 1;
    transform: translateX(0);
}

.tab-btn.active {
    background: var(--nav-active-bg);
    border: 1px solid var(--nav-active-border);
    color: var(--text-main) !important;
    opacity: 1;
    box-shadow: none;
}

.tab-btn.active i {
    color: var(--text-main) !important;
}

.logo h1 {
    font-size: 1.2rem;
    /* Fonte reduzida (antes 1.5rem) */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Gap reduzido */
}

.logo h1 i {
    color: var(--accent-primary);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), #0284c7);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: none;
}

.btn-primary:hover {
    box-shadow: none;
}

#cm-confirm-btn {
    box-shadow: none;
}

#cm-confirm-btn:hover {
    box-shadow: none;
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-secondary:hover {
    background: var(--btn-secondary-hover);
}

/* Barra de personalização do dashboard (Concluir/Cancelar/Restaurar/Definir como
   Padrão) — antes todos os 4 botões saíam com a mesma cor cinza do .btn-secondary,
   sem nenhuma pista visual de qual ação é "positiva" x "destrutiva" x "neutra". */
#dash-customize-btn.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-success);
    border-color: rgba(16, 185, 129, 0.35);
}

#dash-customize-btn.active:hover {
    background: rgba(16, 185, 129, 0.25);
}

#dash-layout-cancel-btn {
    background: rgba(248, 113, 113, 0.15);
    color: var(--accent-danger);
    border-color: rgba(248, 113, 113, 0.35);
}

#dash-layout-cancel-btn:hover {
    background: rgba(248, 113, 113, 0.25);
}

#dash-layout-reset-btn {
    background: rgba(251, 191, 36, 0.15);
    color: var(--accent-warning);
    border-color: rgba(251, 191, 36, 0.35);
}

#dash-layout-reset-btn:hover {
    background: rgba(251, 191, 36, 0.25);
}

#dash-layout-set-default-btn {
    background: rgba(56, 189, 248, 0.15);
    color: var(--accent-primary);
    border-color: rgba(56, 189, 248, 0.35);
}

#dash-layout-set-default-btn:hover {
    background: rgba(56, 189, 248, 0.25);
}

/* Kanban Board */
.board {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    flex-grow: 1;
    overflow-x: auto;
    align-items: flex-start;
}

.column {
    background: transparent;
    border: none;
    width: 310px;
    min-width: 310px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    box-shadow: none;
}

.column-header {
    padding: 0 0.2rem 0.65rem 0.2rem;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
}

.column-title {
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.col-leads .card-list {
    border-top: 3px solid var(--accent-primary);
}

.col-atendimento .card-list {
    border-top: 3px solid var(--accent-warning);
}

.col-agendado .card-list {
    border-top: 3px solid var(--accent-success);
}

/* col-perdido = coluna "Follow Up" (renomeada) */
.col-perdido .card-list {
    border-top: 3px solid #fb923c;
}

.card-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.card-list {
    padding: 1rem;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Scrollbar styles */
.card-list::-webkit-scrollbar {
    width: 6px;
}

.card-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

/* Cards - Metallic Titanium Style */
.card {
    background: linear-gradient(145deg, hsl(230, 9%, 22%), hsl(230, 13%, 10%)) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    padding: 0.85rem !important;
    cursor: default;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    box-shadow: none !important;
    color: #ffffff !important;
}

.card:active {
    cursor: default;
}

.card:hover {
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-2px);
    box-shadow: none !important;
}

.card.dragging {
    visibility: hidden !important;
    pointer-events: none;
}

@keyframes card-landing {
    0% { transform: translateY(-18px); opacity: 0.4; }
    70% { transform: translateY(3px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

.card-landing {
    animation: card-landing 0.3s ease-out;
}

/* Camada de arraste: cobre a viewport, recorta tudo que sair dela e é um
   containing block (transform), então o fantasma nunca alarga o documento. */
.kanban-drag-layer {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    pointer-events: none;
    transform: translateZ(0);
}

.kanban-drag-ghost {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    pointer-events: none;
    transform-origin: top left;
    box-shadow: 0 24px 48px rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.25);
    opacity: 1;
    will-change: transform;
    border: 2px solid var(--accent-primary) !important;
    /* o .card base tem transition em transform — sem isso o fantasma
       persegue o cursor com atraso em vez de colar nele */
    transition: none !important;
}

body.kanban-dragging-body,
body.kanban-dragging-body * {
    cursor: grabbing !important;
    user-select: none !important;
}

.card-list.kanban-drop-hover {
    background: rgba(16, 185, 129, 0.08);
    outline: 2px dashed var(--accent-success, #10b981);
    outline-offset: -4px;
    border-radius: 8px;
}

.card-title {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    margin-bottom: 0.2rem;
    color: #ffffff !important;
}

.card-info {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    opacity: 0.95;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted) !important;
    margin-top: 0.35rem;
}

.card .tag {
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 6px !important;
    color: var(--text-muted) !important;
    /* CINZA CLARO! */
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.delete-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.notes-btn {
    opacity: 0;
    transition: opacity 0.2s;
}

.card:hover .delete-btn,
.card:hover .notes-btn {
    opacity: 1;
}

.notes-btn.has-notes {
    opacity: 1;
}

.delete-btn:hover {
    color: var(--accent-danger);
}

/* Modal Base */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 520px;
    padding: 2rem 2.25rem;
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0;
    box-shadow: 0 24px 48px rgba(0,0,0,0.35);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay.active .modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Modal header — title + subtitle like FormLayout01 */
.modal h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.modal-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

/* ============================================================================
   MODAL "aix" (ícone + título + corpo em seções + rodapé fixo) — genérico,
   pra qualquer modal que precise desse layout mais rico. #modalWhatsappAiSettings
   tem sua própria versão mais elaborada (com --agx-* tokens) que continua valendo
   só lá; esta aqui é a base pra todo o resto (ex.: Empresas/Emitentes).
   ============================================================================ */
.aix-modal { width: min(560px, 94vw); max-width: 560px; padding: 0; display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; }
.aix-head {
    flex: none;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem 1.15rem;
    border-bottom: 1px solid var(--border-color);
}
.aix-head-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    color: var(--accent-primary);
    font-size: 0.95rem;
}
.aix-head h2 { margin: 0 0 0.25rem; font-size: 1.15rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-main); }
.aix-sub { margin: 0; max-width: 62ch; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); }
.aix-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.4rem 1.75rem 1.7rem; display: flex; flex-direction: column; gap: 1.1rem; }
.aix-block { display: flex; flex-direction: column; gap: 0.5rem; }
.aix-block-label { font-size: 0.82rem; font-weight: 650; color: var(--text-main); }
.aix-hint { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }
.modal-actions.aix-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--border-color);
}

/* Gerenciador de Empresas/Emitentes — lista de cards + editor (usa o "aix" acima) */
.emp-list { display: flex; flex-direction: column; gap: 0.55rem; }
.emp-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-main);
    transition: border-color 0.15s;
}
.emp-card:hover { border-color: var(--text-muted); }
.emp-card-logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-muted);
    padding: 4px;
    box-sizing: border-box;
}
.emp-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.emp-card-info { flex: 1; min-width: 0; }
.emp-card-name {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.emp-card-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.15rem; }
.emp-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-success);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
}
.emp-card-actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.emp-card-actions button {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78rem;
    transition: color 0.15s, border-color 0.15s;
}
.emp-card-actions button:hover { color: var(--text-main); border-color: var(--text-muted); }
.emp-card-actions button.danger:hover { color: var(--accent-danger); border-color: var(--accent-danger); }
.emp-novo-btn { width: 100%; justify-content: center; }
.emp-empty { font-size: 0.83rem; color: var(--text-muted); text-align: center; padding: 1.5rem 0; }
.emp-default-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.83rem; color: var(--text-main); cursor: pointer; }
#emp-editor-view { max-height: none; }

.emp-logo-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.emp-logo-preview {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.4rem;
    overflow: hidden;
}
.emp-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.emp-logo-actions { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }

/* FormLayout01-style form grid */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

.form-grid .form-group.full {
    grid-column: 1 / -1;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0;
}

/* Fallback for non-grid modals */
.modal > form > .form-group,
.modal .form-group + .form-group {
    margin-top: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-main);
    letter-spacing: 0.01em;
}

.form-group label .required {
    color: var(--accent-danger);
    margin-left: 2px;
}

.form-group input,
.form-group select,
.form-group textarea,
.form-control {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Evita corte vertical do texto em selects (ex.: "Meta Ads (Facebook/Insta)") */
.form-group select,
select.form-control {
    line-height: 1.4;
    min-height: 2.5rem;
    height: auto;
    text-overflow: ellipsis;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent);
    outline: none;
}

/* Fix para as opções do select no tema escuro */
select.form-control option,
.form-group select option {
    background-color: var(--bg-dark);
    color: var(--text-main);
}

/* Separator before actions — mirrors FormLayout01 <Separator /> */
.modal-separator {
    height: 1px;
    background: var(--border-color);
    margin: 1.5rem 0 1.25rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

.btn-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 0.55rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-cancel:hover {
    background: color-mix(in srgb, var(--text-main) 8%, transparent);
    color: var(--text-main);
    border-color: var(--text-muted);
}

.btn-save {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 0.55rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.1s;
}

.btn-save:hover {
    opacity: 0.88;
}

.btn-save:active {
    transform: scale(0.97);
}

/* ===== Gestão de Acessos ===== */
.access-card {
    background: var(--bg-column);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.15rem 1.25rem;
}

.access-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.access-card-title i {
    color: var(--accent-primary);
    font-size: 0.85rem;
}

.access-create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
    align-items: end;
}

.access-create-grid .btn-save {
    height: 40px;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.access-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.access-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.access-table thead tr {
    background: color-mix(in srgb, var(--text-main) 5%, transparent);
    border-bottom: 1px solid var(--border-color);
}

.access-table th {
    padding: 0.7rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.access-table td {
    padding: 0.7rem 1rem;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.access-table tbody tr:last-child td {
    border-bottom: none;
}

.access-table tbody tr:hover {
    background: color-mix(in srgb, var(--text-main) 3%, transparent);
}

.access-role-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.access-role-badge.is-admin {
    background: var(--accent-warning);
    color: #1a1a1a;
}

.access-role-badge.is-user {
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    color: var(--accent-primary);
}

.access-row-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

.access-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.access-icon-btn:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
}

.access-icon-btn.is-danger:hover {
    color: #fff;
    background: var(--accent-danger, #ef4444);
    border-color: var(--accent-danger, #ef4444);
}

.access-muted {
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 560px) {
    .access-create-grid {
        grid-template-columns: 1fr;
    }
    .access-create-grid .btn-save {
        justify-self: stretch;
        justify-content: center;
    }
}

.integration-loader {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-primary);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.integration-loader.active {
    display: flex;
}

/* Loader padrão do app — "morphing infinity".
   O markup nos vários lugares continua <span class="amicro-loader">…</span>;
   um shim em app.js troca o conteúdo pelo SVG do infinito. As regras abaixo
   valem tanto pro SVG injetado quanto (fallback) escondem os pontos legados. */
.amicro-loader {
    display: inline-block;
    width: 2em;
    height: 1.2em;
    line-height: 0;
    vertical-align: middle;
    color: currentColor;
}
.amicro-loader > span { display: none; }

.amicro-loader .mi-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.amicro-loader .mi-track,
.amicro-loader .mi-head {
    fill: none;
    stroke: currentColor;
    stroke-width: 7;
    stroke-linecap: round;
}
/* Sem trilho de fundo esmaecido: só o segmento animado, na cor de texto
   (branco no tema escuro, escuro no claro) em vez do cinza. Vale pra todos os
   <span class="amicro-loader"> do sistema. */
.amicro-loader .mi-track { display: none; }
.amicro-loader .mi-head { stroke: var(--text-main); }
/* Um segmento que percorre o contorno do infinito (mesmo efeito do InfinityLoop).
   O !important aqui vence o clamp global de prefers-reduced-motion (seletor `*`),
   senão o loader ficava congelado como qualquer animação CSS do app. */
.amicro-loader .mi-head {
    stroke-dasharray: 26 74;      /* pathLength=100 → 1 traço + 1 vão fecham a volta */
    animation: mi-draw var(--mi-duration, 1.4s) linear infinite !important;
}
@keyframes mi-draw { to { stroke-dashoffset: -100; } }

/* Agenda Grid Completa (Nova) */
.agenda-grid-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
    background: var(--bg-agenda);
}

.agenda-grid-header {
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg);
}

.agenda-filters,
.agenda-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Filtro de profissionais da agenda */
.agenda-prof-filter {
    position: relative;
}
.agenda-prof-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    background: transparent;
    color: var(--text-main);
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.agenda-prof-btn:hover {
    border-color: var(--text-muted);
}
.agenda-prof-count {
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
}
.agenda-prof-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    width: 260px;
    max-height: 340px;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.45);
    padding: 0.5rem;
}
.agenda-prof-panel-actions {
    display: flex;
    gap: 0.4rem;
    padding: 0.2rem 0.2rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.4rem;
}
.agenda-prof-panel-actions button {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
}
.agenda-prof-panel-actions button:hover {
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
}
.agenda-prof-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.agenda-prof-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.4rem;
    border-radius: 6px;
    font-size: 0.83rem;
    color: var(--text-main);
    cursor: pointer;
}
.agenda-prof-item:hover {
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
}
.agenda-prof-item input {
    accent-color: var(--accent-primary);
    cursor: pointer;
}
.agenda-prof-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.5rem 0.4rem;
}
.agenda-empty-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    z-index: 5;
}

.agenda-grid-wrapper {
    flex-grow: 1;
    overflow: auto;
    padding: 1rem;
    background: var(--bg-agenda);
}

.agenda-grid-layout {
    display: grid;
    grid-template-columns: 80px repeat(var(--col-count, 5), 1fr);
    width: 100%;
    min-width: max(1200px, calc(80px + (200px * var(--col-count, 5))));
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.grid-body {
    display: contents;
}

.grid-col-header {
    background: var(--agenda-header-bg);
    padding: 1rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.time-col-header {
    background: var(--agenda-header-bg);
    color: var(--text-muted);
}

.grid-body {
    display: contents;
    /* Permite que os filhos participem do grid principal */
}

/* Células de tempo (Eixo Y) */
.time-slot {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--agenda-header-bg);
    /* Vai ocupar a coluna 1 e a linha específica definida no HTML/JS */
}

/* Espaços vazios na grade para manter as bordas visíveis */
.grid-cell {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

/* Blocos de Agendamento (Eventos) */
.agenda-block {
    margin: 2px;
    border-radius: 4px;
    padding: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.2;
    overflow: hidden;
    color: var(--text-main);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
    border-left: 4px solid rgba(0, 0, 0, 0.2);
}

.agenda-block:hover {
    z-index: 999 !important;
    transform: scale(1.02);
    opacity: 1 !important;
}

.agenda-block strong {
    display: block;
    margin-bottom: 0.2rem;
}

/* As cores dos blocos agora são geradas dinamicamente via JavaScript em app.js */

.relacionamento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: start;
    width: 100%;
}

.table-container {
    overflow-x: auto;
    width: 100%;
}

.crm-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: none;
    font-size: 0.95rem;
}

.crm-table thead {
    background: var(--btn-secondary-bg);
}

.crm-table th {
    text-align: left;
    padding: 1.2rem 1rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
}

.crm-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    vertical-align: middle;
}

.crm-table tbody tr {
    transition: background-color 0.2s;
}

/* Switch genérico (liga/desliga) — usado no toggle de IA por conversa e
   reaproveitável em qualquer outro liga/desliga do sistema. */
.ui-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.ui-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ui-switch-track {
    position: absolute;
    inset: 0;
    background: var(--header-btn-bg, rgba(255,255,255,0.12));
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ui-switch-track::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.ui-switch input:checked + .ui-switch-track {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
}

.ui-switch input:checked + .ui-switch-track::before {
    transform: translateX(16px);
    background: #fff;
}

.ui-switch input:disabled + .ui-switch-track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Coluna de checkbox fica escondida até o atendente clicar em "Selecionar
   para Disparo" — evita poluir a lista quando o objetivo é só consultar. */
.crm-table .rel-select-col {
    display: none;
}

.crm-table.rel-selecting .rel-select-col {
    display: table-cell;
}

.rel-select-toggle-btn.active {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: var(--accent-danger) !important;
}

.crm-table tbody tr:hover {
    background-color: var(--btn-secondary-hover);
}

.crm-table tr:last-child td {
    border-bottom: none;
}

/* Barra de disparo em massa nas telas de relacionamento (Pós-venda, Faltantes,
   Sumidos, Aniversariantes) — some/aparece conforme checkboxes são marcados */
.rel-bulk-bar {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--accent-primary);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.rel-bulk-bar .rel-bulk-count {
    color: var(--text-main);
}

/* Dropdown Menu para Relacionamento */
.dropdown {
    position: relative;
    display: flex;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 200px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: none;
    z-index: 100;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.dropdown:hover .dropdown-content {
    display: flex;
    flex-direction: column;
}

/* Flyout que expande na horizontal (ex.: "Relacionamento" na sidebar) — a
   posição real é calculada via JS e o elemento é reparentado pro body, porque
   o "overflow-y:auto" da sidebar clipa (corta) qualquer filho que ultrapasse
   sua borda direita. Aqui só definimos a aparência; display/posição ficam com o JS. */
.sb-flyout {
    display: none;
    position: fixed;
    top: auto;
    left: auto;
    width: 300px;
    border-radius: 14px !important;
    padding: 0.5rem !important;
}

.sb-flyout-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.6rem;
    border-radius: 10px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.sb-flyout-item:hover {
    background: var(--header-btn-hover, rgba(255, 255, 255, 0.06));
}

.sb-flyout-item-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--header-btn-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--header-btn-border, rgba(255, 255, 255, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--text-main);
}

.sb-flyout-item-text {
    min-width: 0;
}

.sb-flyout-item-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

.sb-flyout-item-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.1rem;
}

/* Abertura suave do flyout (fade + leve deslize), só efeito visual —
   não muda posição, itens ou comportamento do menu. */
.sb-flyout.sb-flyout-visible {
    animation: sbFlyoutIn 0.16s ease-out;
}

@keyframes sbFlyoutIn {
    from {
        opacity: 0;
        transform: translateX(-6px) scale(0.97);
    }

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

.dropdown-content .tab-btn {
    margin: 0;
    border-radius: 0;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    width: 100%;
    justify-content: flex-start;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-content .tab-btn:last-child {
    border-bottom: none;
}

.dropdown-content .tab-btn.active {
    background: var(--accent-primary);
    color: #ffffff;
}

.dropdown-content .tab-btn.active i {
    color: #ffffff !important;
}

/* ============================================================================
   NOTIFICAÇÕES — painel do sino (hierarquia: hora discreta, mensagem em destaque,
   ícone tipado à esquerda; sem barras laterais).
   ============================================================================ */
.notif-panel {
    width: 340px;
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem;
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.5);
    z-index: 99999;
}

.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.55rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--border-color);
}
.notif-panel-head > span {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-main);
}
.notif-panel-actions {
    display: flex;
    gap: 0.25rem;
}
.notif-panel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}
.notif-panel-btn:hover {
    background: color-mix(in srgb, var(--text-main) 9%, transparent);
    color: var(--text-main);
}
.notif-panel-btn--danger:hover {
    background: color-mix(in srgb, var(--accent-danger) 15%, transparent);
    color: var(--accent-danger);
}

.notif-list {
    display: flex;
    flex-direction: column;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.55rem;
    border-radius: 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-main) 7%, transparent);
    transition: background 0.14s;
}
.notif-item:last-child {
    border-bottom: 0;
}
.notif-item:hover {
    background: color-mix(in srgb, var(--text-main) 5%, transparent);
}
.notif-item--click {
    cursor: pointer;
}
.notif-item--priority {
    background: color-mix(in srgb, var(--accent-success) 10%, transparent);
}
.notif-item--priority:hover {
    background: color-mix(in srgb, var(--accent-success) 16%, transparent);
}
.notif-item--priority .notif-text {
    font-weight: 600;
}
.notif-cta {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-success);
}

.notif-icon,
.notif-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    margin-top: 1px;
}
.notif-avatar {
    border-radius: 50%;
    object-fit: cover;
}
.notif-icon {
    display: grid;
    place-items: center;
    font-size: 0.78rem;
}
.notif-icon--success {
    background: color-mix(in srgb, var(--accent-success) 16%, transparent);
    color: var(--accent-success);
}
.notif-icon--ai {
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
    color: var(--accent-primary);
}
.notif-icon--lead {
    background: color-mix(in srgb, var(--accent-info, #38bdf8) 18%, transparent);
    color: var(--accent-info, #38bdf8);
}
.notif-icon--user {
    background: color-mix(in srgb, var(--text-main) 10%, transparent);
    color: var(--text-muted);
}
.notif-icon--opp {
    background: color-mix(in srgb, #eab308 20%, transparent);
    color: #eab308;
}

.notif-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.notif-time {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.notif-text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-main);
    word-break: break-word;
}

.notif-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.83rem;
}

/* Sugestões de Agendamento */
.suggestion-chip {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.suggestion-chip:hover {
    background: var(--btn-secondary-hover);
    border-color: var(--accent-primary);
}

.suggestion-chip.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

/* ==========================================
   CHAT WHATSAPP STYLES
   ========================================== */

.chat-contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-contact-item:hover {
    background: var(--bg-hover);
}

.chat-contact-item.active {
    background: var(--bg-column);
    box-shadow: inset 3px 0 0 var(--accent-success);
}

.chat-contact-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 60%, #ffffff));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
}

.chat-contact-info {
    flex: 1;
    overflow: hidden;
}

.chat-contact-name {
    font-weight: 600;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-contact-preview {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-bubble {
    max-width: 75%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    position: relative;
    line-height: 1.4;
    word-break: break-word;
}

.chat-bubble-out {
    background: var(--accent-success);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chat-bubble-in {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.chat-bubble-time {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-top: 0.3rem;
    text-align: right;
    display: block;
}

.chat-bubble-out .chat-bubble-time {
    color: rgba(255, 255, 255, 0.8);
}

.chat-bubble-in .chat-bubble-time {
    color: var(--text-muted);
}


/* ============================================ */
/* MODAIS CUSTOMIZADOS (ALERTS E CONFIRMS) E TOOLTIPS */
/* ============================================ */

/* Tooltip Customizado para a Agenda (Hover) */
.agenda-block[data-tooltip] {
    position: relative;
}

.agenda-block[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(23, 23, 23, 0.95);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: pre-wrap;
    z-index: 999999;
    font-size: 0.85rem;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    margin-bottom: 6px;
    min-width: 200px;
    text-align: center;
}

/* Overlay do Modal Customizado */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(6, 8, 12, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    opacity: 0;
    animation: fadeIn 0.2s forwards;
}

/* Caixa do Modal */
.custom-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    width: 90%;
    max-width: 400px;
    box-shadow: none;
    transform: scale(0.95);
    animation: popIn 0.2s forwards;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.custom-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-modal-message {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
    white-space: pre-line;   /* respeita os \n das mensagens de confirmação */
}

.custom-modal-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.custom-modal-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.custom-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Botões do custom alert/confirm — mesma linguagem dos modais refinados.
   Precisam de !important pra vencer o .btn-primary/.btn-secondary global,
   que também é !important (senão o "Confirmar" fica um bloco branco). */
.custom-modal-actions .btn-primary,
.custom-modal-actions .btn-secondary {
    height: auto;
    padding: 0.6rem 1.2rem !important;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    box-shadow: none;
}
.custom-modal-actions .btn-secondary {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    border-color: color-mix(in srgb, var(--text-main) 15%, transparent) !important;
}
.custom-modal-actions .btn-secondary:hover {
    background-color: color-mix(in srgb, var(--text-main) 8%, transparent) !important;
    color: var(--text-main) !important;
    border-color: var(--text-muted) !important;
}
.custom-modal-actions .btn-primary {
    background-color: var(--accent-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent-primary) 60%, transparent);
}
.custom-modal-actions .btn-primary:hover {
    background-color: var(--accent-primary) !important;
    filter: brightness(1.08);
}
/* O "Confirmar" costuma ser ação de risco (excluir, disparar) — vermelho */
.custom-modal-actions #cm-confirm-btn {
    background-color: var(--accent-danger) !important;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent-danger) 55%, transparent);
}
.custom-modal-actions #cm-confirm-btn:hover {
    background-color: var(--accent-danger) !important;
    filter: brightness(1.06);
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes popIn {
    to {
        transform: scale(1);
    }
}


/* ============================================ */
/* AIR DATEPICKER CUSTOMIZATION (CALENDÁRIO)   */
/* ============================================ */

.air-datepicker {
    --adp-font-family: inherit;
    --adp-font-size: 13px;
    --adp-width: 300px;
    --adp-background-color: var(--bg-dark);
    --adp-background-color-hover: var(--bg-card);
    --adp-background-color-active: var(--bg-card);
    --adp-background-color-in-range: rgba(16, 185, 129, 0.12);
    --adp-background-color-in-range-focused: rgba(16, 185, 129, 0.2);
    --adp-color: var(--text-main);
    --adp-color-secondary: var(--text-muted);
    --adp-accent-color: var(--accent-success);
    --adp-color-current-date: var(--accent-success);
    --adp-color-disabled: var(--text-muted);
    --adp-color-other-month: var(--text-muted);
    --adp-border-color: var(--border-color);
    --adp-border-color-inner: var(--border-color);
    --adp-border-radius: 16px;
    --adp-border-radius-inner: 8px;
    --adp-day-name-color: var(--text-muted);
    --adp-nav-arrow-color: var(--text-muted);
    --adp-color-selected: #fff;
    --adp-pointer-bg-color: hsl(230, 12%, 9%);
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
    font-family: inherit;
}

.air-datepicker-global-container {
    z-index: 9999;
}

.air-datepicker--nav-title {
    font-weight: 600;
    border-radius: 8px;
    color: var(--text-main);
}

.air-datepicker--nav-title:hover {
    background: var(--bg-card);
    color: var(--text-main);
}

.air-datepicker--nav-action svg path {
    stroke: var(--text-muted);
}

.air-datepicker--nav-action:hover svg path {
    stroke: var(--text-main);
}

.air-datepicker--day-name {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.air-datepicker-cell {
    border-radius: 8px !important;
    font-weight: 500;
}

.air-datepicker-cell.-current-:not(.-selected-):not(.-range-from-):not(.-range-to-) {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--accent-success) !important;
    font-weight: 700;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current- {
    background: var(--accent-success) !important;
    color: #fff !important;
    border-color: var(--accent-success) !important;
}

.air-datepicker-cell.-range-from-,
.air-datepicker-cell.-range-to- {
    background: var(--accent-success) !important;
    color: #fff !important;
    border-color: var(--accent-success) !important;
}

.air-datepicker-cell.-range-from- {
    border-radius: 8px 0 0 8px !important;
}

.air-datepicker-cell.-range-to- {
    border-radius: 0 8px 8px 0 !important;
}

.air-datepicker-cell.-in-range- {
    background: rgba(16, 185, 129, 0.12) !important;
    color: var(--text-main) !important;
    border-radius: 0 !important;
}

.air-datepicker-cell.-disabled- {
    color: var(--text-muted) !important;
    opacity: 0.5;
}

[data-theme="light"] .air-datepicker {
    --adp-background-color: hsl(0, 0%, 100%);
    --adp-background-color-hover: hsl(210, 40%, 96.1%);
    --adp-background-color-in-range: rgba(5, 150, 105, 0.1);
    --adp-pointer-bg-color: hsl(0, 0%, 100%);
}

.air-datepicker--pointer::after {
    background: hsl(230, 12%, 9%) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .air-datepicker--pointer::after {
    background: hsl(0, 0%, 100%) !important;
}

/* Botão de mudar tema: escondido onde fica solto (ao lado do título das
   telas internas), visível só na barra superior, ao lado do sino. */
#theme-toggle {
    display: none !important;
}
.topbar-user #theme-toggle {
    display: inline-flex !important;
}

/* ==========================================
   AVATAR COMPONENT DESIGN SYSTEM (Radix UI Structure)
   ========================================== */
.avatar {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.avatar-image {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.avatar-image img {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.avatar-fallback {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 60%, #ffffff));
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.avatar-indicator {
    position: absolute;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.avatar-status {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--bg-card, #1e1e1e);
    box-sizing: content-box;
}

.avatar-status.online {
    background-color: var(--accent-success);
}

.avatar-status.offline {
    background-color: hsl(var(--muted-foreground));
}

.avatar-status.busy {
    background-color: var(--accent-warning);
}

.avatar-status.away {
    background-color: var(--accent-primary);
}

/* ==========================================
   WAVEFORM AUDIO PLAYER VISUALIZATION (ElevenLabs Style)
   ========================================== */
.waveform-player {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    min-width: 240px;
    max-width: 290px;
    user-select: none;
    margin-top: 0.35rem;
    margin-bottom: 0.2rem;
}

.waveform-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #52525b, #27272a);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, opacity 0.15s ease;
    box-shadow: none;
}

.waveform-play-btn:hover {
    background: linear-gradient(135deg, #71717a, #3f3f46);
    opacity: 0.95;
}

.waveform-play-btn i {
    font-size: 0.95rem;
    margin-left: 2px;
}

.waveform-play-btn.playing i {
    margin-left: 0;
}

.waveform-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.waveform-bars-container {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
    cursor: pointer;
    padding: 2px 0;
}

.waveform-bar {
    flex: 1;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    transition: background 0.12s ease, transform 0.12s ease;
}

.waveform-bar.active {
    background: var(--accent-success, #10b981);
    box-shadow: none;
}

/* Column & Card styles defined in Kanban section */

.column-header {
    padding: 0 0.2rem 0.85rem 0.2rem;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: transparent;
    gap: 0.2rem;
    width: 100%;
}

.column-title {
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-main);
}

.card-count {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.column-stats {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.35rem;
    width: 100%;
}

.column-stats-patients {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.column-stats-value {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.85;
}

.card-list {
    background: var(--bg-column);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.85rem;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Scrollbar styles */
.card-list::-webkit-scrollbar {
    width: 5px;
}

.card-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.column-add-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.column:hover .column-add-card-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.column-add-card-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-main);
    border-color: var(--accent-primary, #38bdf8);
}

/* Cards - Premium Clean Theme */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
    box-shadow: none !important;
    color: var(--text-main) !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Column Top Border Accents */
.col-entrada .card {
    border-top: 3px solid #64748b !important;
}

.col-contatado .card {
    border-top: 3px solid #fbbf24 !important;
}

.col-orcado .card {
    border-top: 3px solid #38bdf8 !important;
}

.col-agendado .card {
    border-top: 3px solid #2dd4bf !important;
}

.col-ganho .card {
    border-top: 3px solid #10b981 !important;
}

.col-perdido .card {
    border-top: 3px solid #fb923c !important;
}

/* Dentro de "Follow Up" (col-perdido) o mesmo visual serve tanto pra quem ainda
   está recebendo a cadência automática (ativo, laranja normal) quanto pra quem
   foi descartado de vez em "Finalizar atendimento" (morto) — sem diferença
   visual, dava pra confundir os dois só olhando o board. */
.col-perdido .card.card--discarded {
    border-top-color: var(--text-muted) !important;
    opacity: 0.55;
}
.col-perdido .card.card--discarded:hover {
    opacity: 0.85;
}

.card:active {
    cursor: default;
}

.card:hover {
    border-color: var(--border-color) !important;
    transform: translateY(-2px);
    background: var(--bg-card) !important;
    /* Cards destacados */
    box-shadow: none !important;
}

.card.dragging {
    opacity: 0.4;
    background: var(--bg-column) !important;
    border-style: dashed !important;
}

.card-title {
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    margin-bottom: 0;
    color: var(--text-main) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-info {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    opacity: 0.95;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}

.card .tag {
    background: rgba(255, 255, 255, 0.04) !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 6px !important;
    color: var(--text-muted) !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.delete-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    font-size: 0.85rem;
}

.notes-btn,
.orc-btn {
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.card:hover .delete-btn,
.card:hover .notes-btn,
.card:hover .orc-btn {
    opacity: 0.85;
}

.card:hover .delete-btn:hover,
.card:hover .notes-btn:hover,
.card:hover .orc-btn:hover {
    opacity: 1;
}

.notes-btn.has-notes {
    opacity: 1;
}

.delete-btn:hover {
    color: var(--accent-danger);
}

.waveform-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

.waveform-speed-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.waveform-speed-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}


/* === DASHBOARD PREMIUM CARDS === */
/* Radius fixo e igual em todo card do dashboard (KPI, gráfico, ranking, meta),
   não importa o quanto ele seja redimensionado — sem !important aqui, o card
   maior (ou o "goal card") mantinha o border-radius original de 14/16px vindo
   do HTML enquanto os KPIs ficavam com 6px, um inconsistente com o outro. */
.dash-layout-canvas .dash-kpi-card,
.dash-layout-canvas .dash-layout-card {
    border-radius: 6px !important;
}

/* Dark mode: cards flush with system background */
:root .dash-kpi-card,
:root .dash-layout-card {
    background: var(--bg-dark) !important;
}

[data-theme="light"] .dash-kpi-card,
[data-theme="light"] .dash-layout-card {
    background: var(--bg-card) !important;
}

.dash-kpi-card {
    cursor: default;
    padding: 1rem !important;
}

.dash-card-tools {
    display: none;
    align-items: center;
    gap: 0.2rem;
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
}

/* Enquanto o editor inline de "Meta de Receita" está aberto, o card fica temporariamente
   mais alto que o span de grid já calculado (masonry) — isso garante que ele pinte por
   cima do próximo card do grid até o repack (packDashboardMasonry) recalcular o span. */
.dash-card-elevated {
    position: relative;
    z-index: 5;
}

.dash-layout-editing .dash-kpi-card,
.dash-layout-editing .dash-layout-card {
    cursor: grab;
    outline: 1px dashed rgba(56, 189, 248, 0.75);
    outline-offset: -4px;
}

.dash-layout-editing .dash-kpi-card:active,
.dash-kpi-card.dash-card-dragging,
.dash-layout-card.dash-card-dragging {
    cursor: grabbing;
}

.dash-card-dragging {
    opacity: 0.96;
    outline-color: var(--accent-primary) !important;
    box-shadow: none;
    transform: scale(1.02);
    transition: none !important;
}

/* Marca onde o card vai cair se soltar agora — o card arrastado troca de
   lugar com este ao vivo, então é só uma pista visual extra de destino. */
.dash-card-drop-target {
    outline: 2px solid var(--accent-success, #10b981) !important;
    outline-offset: -4px;
    background: rgba(16, 185, 129, 0.08);
}

.dash-layout-editing .dash-card-tools {
    display: flex;
}

.dash-card-drag {
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 0.18rem;
    cursor: grab;
    touch-action: none;
}

.dash-layout-editing .dash-card-hidden {
    opacity: 0.35;
    outline-style: dashed !important;
    outline-color: var(--accent-danger, #ef4444) !important;
}

.dash-card-tools button {
    width: 22px;
    height: 22px;
    border: 1px solid var(--header-btn-border);
    border-radius: 4px;
    background: var(--header-btn-bg);
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.dash-card-tools button:hover {
    background: var(--accent-primary);
    color: #fff;
}

.dash-card-resize-handle {
    display: none;
    position: absolute;
    z-index: 3;
}

.dash-card-resize-right {
    top: 0;
    right: -3px;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
}

.dash-card-resize-bottom {
    right: 0;
    bottom: -3px;
    left: 0;
    height: 8px;
    cursor: ns-resize;
}

.dash-card-resize-corner {
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
}

.dash-card-resize-right::after,
.dash-card-resize-bottom::after,
.dash-card-resize-corner::after {
    content: '';
    position: absolute;
    background: var(--accent-primary);
    opacity: 0.8;
}

.dash-card-resize-right::after {
    top: 50%;
    right: 1px;
    width: 3px;
    height: 32px;
    transform: translateY(-50%);
}

.dash-card-resize-bottom::after {
    bottom: 1px;
    left: 50%;
    width: 32px;
    height: 3px;
    transform: translateX(-50%);
}

.dash-card-resize-corner::after {
    right: 2px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.dash-layout-editing .dash-card-resize-handle {
    display: block;
}

.dash-is-resizing,
.dash-is-resizing * {
    user-select: none !important;
}

.dash-kpi-grid.dash-layout-editing {
    outline: 1px solid rgba(56, 189, 248, 0.25);
    outline-offset: -1px;
}

.dash-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
}

.dash-layout-canvas {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* Trilha bem fina (mesmo valor de DASHBOARD_LAYOUT_ROW_HEIGHT no app.js) — cada
       card recebe um grid-row: span N calculado em JS pela sua altura real
       (packDashboardMasonry). Isso cria um "masonry" de verdade: cards baixos ao
       lado de um card alto não deixam vão vazio embaixo, porque cada linha física
       da grade é fina o bastante pra não sobrar espaço não ocupado. */
    grid-auto-rows: 2px;
    grid-auto-flow: dense;
    align-content: start;
    row-gap: 0.4rem;
    column-gap: 0.4rem;
    padding: 1.5rem 2rem 2rem;
}

.dash-layout-editing {
    background-image:
        linear-gradient(to right, rgba(56, 189, 248, 0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(56, 189, 248, 0.14) 1px, transparent 1px);
    background-size: calc((100% - 2.6rem) / 6) 80px;
    background-position: 2rem 1.5rem;
}

.dash-layout-region {
    display: contents !important;
}

.dash-layout-canvas .dash-layout-card {
    grid-column: span 1;
    min-width: 0;
    position: relative;
    min-height: 80px;
    align-self: start;
    box-sizing: border-box;
    /* Cabeçalho fixo + conteúdo (gráfico/lista) flexível: antes o gráfico tinha
       altura fixa em px (independente do quanto o card fosse encolhido no resize),
       então encolher o card só cortava/estourava o conteúdo em vez de ajustá-lo. */
    display: flex;
    flex-direction: column;
}

.dash-layout-canvas .dash-layout-card[data-layout-height] {
    min-height: 0 !important;
}

.dash-layout-card>.dash-card-header {
    flex-shrink: 0;
}

/* overflow:hidden fica só no conteúdo interno (gráfico/lista), não no card
   inteiro — quando estava no card, os controles de arrastar/esconder (que são
   filhos posicionados no canto superior) somiam em alguns casos junto com
   qualquer excesso de conteúdo cortado. */
.dash-chart-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 40px;
    overflow: hidden;
}

.dash-scroll-fill {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.dash-layout-canvas .dash-kpi-card {
    align-self: start;
}

.dash-layout-canvas .dash-layout-card[data-dash-key="goal"] {
    grid-column: span 4;
}

.dash-layout-canvas .dash-layout-card[data-dash-key="leads-chart"],
.dash-layout-canvas .dash-layout-card[data-dash-key="ranking"] {
    grid-column: span 3;
}

.dash-layout-canvas .dash-layout-card[data-dash-key="funnel-chart"],
.dash-layout-canvas .dash-layout-card[data-dash-key="origin-chart"] {
    grid-column: span 1;
}

.dash-kpi-grid .dash-kpi-card:nth-child(5),
.dash-kpi-grid .dash-kpi-card:nth-child(6) {
    grid-column: span 2;
    min-height: 132px;
}

.dash-kpi-grid .dash-kpi-card:nth-child(1) {
    order: 1;
}

.dash-kpi-grid .dash-kpi-card:nth-child(2) {
    order: 2;
}

.dash-kpi-grid .dash-kpi-card:nth-child(3) {
    order: 3;
}

.dash-kpi-grid .dash-kpi-card:nth-child(4) {
    order: 4;
}

.dash-kpi-grid .dash-kpi-card:nth-child(5) {
    order: 5;
}

.dash-kpi-grid .dash-kpi-card:nth-child(6) {
    order: 6;
}

.dash-kpi-grid .dash-kpi-card:nth-child(9) {
    order: 7;
}

.dash-kpi-grid .dash-kpi-card:nth-child(7) {
    order: 8;
}

.dash-kpi-grid .dash-kpi-card:nth-child(10) {
    order: 9;
}

.dash-kpi-grid .dash-kpi-card:nth-child(8) {
    order: 10;
}

.dash-kpi-grid .dash-kpi-card:nth-child(11) {
    order: 11;
}

.dash-kpi-grid .dash-kpi-card:nth-child(11) {
    grid-column: 2 / span 2;
}

.dash-kpi-card [id^="dash-"] {
    font-size: clamp(1.35rem, calc(2rem * var(--dash-number-scale, 1)), 3.6rem) !important;
    line-height: 1.05;
    letter-spacing: 0 !important;
}

.dash-kpi-card>div:last-child {
    font-size: 0.72rem !important;
    line-height: 1.35;
}

@media (max-width: 600px) {
    .dash-layout-canvas {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .dash-layout-editing {
        background-size: calc(100% - 2rem) 80px;
        background-position: 1rem 1rem;
    }

    .dash-layout-canvas .dash-layout-card[data-dash-key="goal"],
    .dash-layout-canvas .dash-layout-card[data-dash-key="leads-chart"],
    .dash-layout-canvas .dash-layout-card[data-dash-key="ranking"] {
        grid-column: span 1;
    }

    .dash-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .dash-kpi-grid .dash-kpi-card:nth-child(5),
    .dash-kpi-grid .dash-kpi-card:nth-child(6) {
        grid-column: span 1;
        min-height: 0;
    }

    .dash-kpi-grid .dash-kpi-card:nth-child(11) {
        grid-column: span 1;
    }

    .dash-kpi-card [id^="dash-"] {
        font-size: clamp(1.25rem, calc(1.8rem * var(--dash-number-scale, 1)), 2.8rem) !important;
    }
}

@media (min-width: 601px) and (max-width: 950px) {
    .dash-layout-canvas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 1.25rem;
    }

    .dash-layout-editing {
        background-size: calc((100% - 2.5rem) / 2) 80px;
        background-position: 1.25rem 1.25rem;
    }

    .dash-layout-canvas .dash-layout-card[data-dash-key="goal"],
    .dash-layout-canvas .dash-layout-card[data-dash-key="leads-chart"],
    .dash-layout-canvas .dash-layout-card[data-dash-key="ranking"] {
        grid-column: span 2;
    }

    .dash-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dash-kpi-grid .dash-kpi-card:nth-child(5),
    .dash-kpi-grid .dash-kpi-card:nth-child(6) {
        grid-column: span 2;
        min-height: 110px;
    }

    .dash-kpi-grid .dash-kpi-card:nth-child(11) {
        grid-column: span 2;
    }
}

/* === DASHBOARD PRESET BUTTONS === */
.dash-preset-btn.active {
    background: var(--bg-hover) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-main) !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--accent-primary);
}

.dash-preset-btn:hover:not(.active) {
    border-color: var(--accent-primary) !important;
    color: var(--text-main) !important;
}

.msg-bubble-container:hover .msg-dropdown-trigger {
    display: flex !important;
}

.card-options-btn {
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.card:hover .card-options-btn {
    opacity: 0.85;
}

.card:hover .card-options-btn:hover {
    opacity: 1;
    color: var(--accent-primary) !important;
}

/* ===== Menu de contexto do card (⋮ / botão direito) — tema claro e escuro ===== */
.card-ctx {
    display: none;
    position: fixed;
    z-index: 10050;
    min-width: 210px;
    padding: 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.18);
    font-family: inherit;
    color: var(--text-main);
}
.card-ctx-main { display: flex; flex-direction: column; }
.card-ctx-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: none;
    border: 0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.card-ctx-item > i:first-child { width: 16px; text-align: center; flex-shrink: 0; }
.card-ctx-item:hover { background: color-mix(in srgb, var(--text-main) 8%, transparent); }
.card-ctx-item--danger { color: var(--accent-danger); }
.card-ctx-item--danger:hover { background: color-mix(in srgb, var(--accent-danger) 12%, transparent); }
.card-ctx-item:disabled { opacity: 0.4; cursor: not-allowed; }
.card-ctx-caret { margin-left: auto; font-size: 0.65rem; color: var(--text-muted); }
.card-ctx-sep { height: 1px; margin: 0.3rem 0.35rem; background: var(--border-color); }

.card-ctx-tags { padding: 0.35rem; max-height: 280px; overflow-y: auto; }
.card-ctx-tags-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}
.card-ctx-tags-head button {
    background: none; border: 0; color: var(--text-muted); cursor: pointer;
    font-size: 0.9rem; padding: 0.1rem 0.3rem; border-radius: 6px;
}
.card-ctx-tags-head button:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 8%, transparent); }
.card-ctx-tag {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.55rem;
    background: none;
    border: 0;
    border-radius: 8px;
    font-size: 0.83rem;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}
.card-ctx-tag:hover { background: color-mix(in srgb, var(--text-main) 8%, transparent); }
.card-ctx-tag .card-ctx-tag-check {
    width: 16px; text-align: center; flex-shrink: 0; color: var(--accent-success);
}
.card-ctx-tag[aria-checked="false"] .card-ctx-tag-check { visibility: hidden; }
.card-ctx-tag-badge {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

/* Destaque temporário ao chegar num card via "Ver no Kanban" */
@keyframes cardHighlightPulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(96, 165, 250, 0);
    }

    20% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(96, 165, 250, 0.55);
    }

    60% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(96, 165, 250, 0.35);
    }
}

.card-highlight-pulse {
    animation: cardHighlightPulse 1.1s ease-in-out 2;
    border-color: rgba(96, 165, 250, 0.7) !important;
}

/* Bolinha vermelha pulsante na barra de gravação de áudio do chat */
@keyframes chatRecPulse {

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

    50% {
        opacity: 0.35;
        transform: scale(0.8);
    }
}

/* ============================================ */
/* PAINEL "ORIGEM DE LEADS" (UTMs / Campanhas)   */
/* ============================================ */
.utm-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem;
}

/* ===== UTMs — cabeçalho ===== */
.utm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.utm-header-titles h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.utm-header-titles h2 i {
    color: var(--accent-info);
}

.utm-header-titles p {
    margin: 0.3rem 0 0;
    font-size: 0.83rem;
    color: var(--text-muted);
}

.utm-header-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    white-space: nowrap;
}

/* ===== UTMs — navegação por etapas ===== */
.utm-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.utm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.utm-tab i {
    font-size: 0.88rem;
}

.utm-tab:hover {
    color: var(--text-main);
}

.utm-tab.active {
    background: var(--accent-primary);
    color: #fff;
}

.utm-tabpanel {
    display: none;
}

.utm-tabpanel.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: utmFade 0.18s ease;
}

@keyframes utmFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.utm-panel-title {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== UTMs — formulário Nova campanha ===== */
.utm-form-panel {
    max-width: 620px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.utm-form-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.utm-btn-create {
    flex: 1;
    background: var(--accent-success);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.7rem 1.1rem;
    border-radius: 9px;
    cursor: pointer;
    transition: filter 0.15s;
}

.utm-btn-create:hover {
    filter: brightness(1.06);
}

/* ===== UTMs — lista de campanhas ===== */
.utm-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.utm-list-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.utm-list-filters input,
.utm-list-filters select {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    outline: none;
    font-size: 0.82rem;
    font-family: inherit;
    transition: border-color 0.15s;
}

.utm-list-filters input {
    width: 170px;
}

.utm-list-filters select {
    cursor: pointer;
}

.utm-list-filters input:focus,
.utm-list-filters select:focus {
    border-color: var(--accent-primary);
}

/* ===== Campanhas de Disparo — etapa "Novo disparo" ===== */
.dispatch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.dispatch-grid > .utm-panel {
    height: 100%;
}

@media (max-width: 960px) {
    .dispatch-grid {
        grid-template-columns: 1fr;
    }
}

.utm-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
}

.utm-kpi-chip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.utm-kpi-chip .utm-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-main);
}

.utm-kpi-chip .utm-kpi-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.utm-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.3rem;
}

.utm-field input:not([type="checkbox"]):not([type="range"]),
.utm-field select {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.55rem 0.75rem;
    border-radius: 7px;
    outline: none;
    font-size: 0.86rem;
    font-family: inherit;
    transition: border-color 0.15s;
}

.utm-field input:not([type="checkbox"]):not([type="range"]):focus,
.utm-field select:focus {
    border-color: var(--accent-primary);
}

/* Toggle switch (substitui checkbox nativo esticado).
   O 2º seletor, mais específico, vence o "display:block" de ".utm-field label"
   quando o switch está dentro de um .utm-field. */
.utm-switch,
.utm-field label.utm-switch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-main);
    margin-bottom: 0;
}

.utm-switch > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.utm-switch-track {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    position: relative;
    transition: background-color 0.15s, border-color 0.15s;
}

.utm-switch-thumb {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transform: translateY(-50%);
    transition: transform 0.15s, background-color 0.15s;
}

.utm-switch > input:checked + .utm-switch-track {
    background: var(--accent-success);
    border-color: var(--accent-success);
}

.utm-switch > input:checked + .utm-switch-track .utm-switch-thumb {
    background: #fff;
    transform: translate(18px, -50%);
}

.utm-switch > input:focus-visible + .utm-switch-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

.utm-switch-text {
    line-height: 1.3;
}

/* Fix para as opções do select no tema escuro */
.utm-field select option {
    background-color: var(--bg-dark);
    color: var(--text-main);
}

.utm-field .utm-hint {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    line-height: 1.35;
}

.utm-channel-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}

.utm-channel-btn {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0.55rem 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.utm-channel-btn i {
    font-size: 0.95rem;
}

.utm-channel-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-main);
}

.utm-channel-btn.active {
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-main));
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.utm-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.utm-empty-state i {
    font-size: 1.8rem;
    opacity: 0.4;
}

.utm-empty-state span {
    font-size: 0.85rem;
}

/* Barra de input do chat — ícones lisos, sem fundo/borda/sombra ("círculo metálico"),
   pra ficar minimalista como WhatsApp/Telegram. */
.chat-input-icon-btn {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.chat-input-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}

.chat-input-send-btn {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--accent-success);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}

.chat-input-send-btn:hover {
    background: rgba(16, 185, 129, 0.12);
    transform: scale(1.08);
}

/* Lista de conversas do WhatsApp — seta de opções só aparece no hover da linha */
.chat-row-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    /* Colapsado por padrão: não ocupa espaço e a hora fica encostada à direita */
    width: 0;
    height: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.72rem;
    opacity: 0;
    transition: opacity 0.15s ease, width 0.15s ease, margin-left 0.15s ease, color 0.15s, background-color 0.15s;
}

/* No hover da linha a setinha aparece e empurra a hora para a esquerda */
.chat-row:hover .chat-row-menu-btn {
    opacity: 1;
    width: 20px;
    margin-left: 4px;
}

.chat-row-menu-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.1);
}

/* Presença: avatar(es) de quem está com a conversa aberta agora, no card do chat */
.chat-viewers {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 6px;
}
.chat-viewer-avatar {
    display: inline-flex;
    border: 2px solid var(--bg-card, #111);
    border-radius: 50%;
    background: var(--bg-card, #111);
    overflow: hidden;
}
.chat-viewer-avatar.is-me {
    border-color: var(--accent-success, #10b981);
}
.chat-viewer-avatar .avatar-fallback {
    font-size: 0.55rem;
    border: none;
}
.chat-viewer-more {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--header-btn-bg, rgba(255, 255, 255, 0.08));
    border-radius: 999px;
    padding: 0 0.3rem;
    margin-left: 3px;
    line-height: 1.4;
}

.chat-filter-toggle-btn-active {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: var(--accent-success) !important;
    color: var(--accent-success) !important;
}

.chat-filter-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-main);
    font-weight: 500;
    transition: background-color 0.15s;
}

.chat-filter-menu-item i {
    font-size: 0.85rem;
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.chat-filter-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.chat-filter-menu-item.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-success);
    font-weight: 600;
}

.chat-filter-menu-item.active i {
    color: var(--accent-success);
}

/* Chips de acesso rápido aos filtros, embaixo da barra de busca do chat. */
.chat-filter-chip {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chat-filter-chip:hover { color: var(--text-main); border-color: var(--text-muted); }
.chat-filter-chip.active {
    background: var(--accent-success);
    border-color: var(--accent-success);
    color: #fff;
    font-weight: 700;
}

.dash-card-compact {
    padding: 0.55rem !important;
    overflow: hidden;
}


.dash-card-compact>div:not(.dash-card-tools) {
    margin-bottom: 0.3rem !important;
}

.dash-card-compact>div:not(.dash-card-tools)>div:first-child {
    padding: 0.3rem !important;
    font-size: 0.85rem !important;
}

.dash-card-compact>div:not(.dash-card-tools)>span {
    font-size: 0.58rem !important;
    padding: 0.12rem 0.3rem !important;
}

.dash-card-compact [id^="dash-"] {
    font-size: 1.35rem !important;
    line-height: 1 !important;
}

.dash-card-compact [id^="dash-"]+div {
    margin-top: 0.1rem !important;
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
}

/* Shadcn UI Overrides */
.btn-primary, .btn-secondary, .btn-danger, .tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    height: 2.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: none;
    cursor: pointer;
}
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.tab-btn:focus-visible, .sb-tool-btn:focus-visible, .sb-icon-btn:focus-visible, .sb-flyout-item:focus-visible, button:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled {
    pointer-events: none;
    opacity: 0.5;
}
.btn-primary {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    box-shadow: none;
}
.btn-primary:hover {
    background-color: hsl(var(--primary) / 0.9) !important;
}
.btn-secondary {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
}
.btn-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8) !important;
}
.btn-danger {
    background-color: hsl(var(--destructive)) !important;
    color: hsl(var(--destructive-foreground)) !important;
}
.btn-danger:hover {
    background-color: hsl(var(--destructive) / 0.9) !important;
}

/* Inputs Shadcn style */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select {
    display: flex;
    height: 2.25rem;
    width: 100%;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--border));
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder {
    color: hsl(var(--muted-foreground));
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 1px hsl(var(--ring));
}

/* Modal / Card Overrides to look like Shadcn */
.modal, .card, .kanban-card {
    border-radius: var(--radius) !important;
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--card-foreground)) !important;
    box-shadow: none !important;
    padding: 1rem !important;
}

.card-list {
    background-color: transparent !important;
    border-color: transparent !important;
}



/* Agenda blocks specific overrides */
.agenda-block {
    border-radius: calc(var(--radius) - 2px) !important;
    box-shadow: none;
}

/* ===== TELA DE LOGIN — FlowBio ===== */
/* .modal-overlay já é position:fixed — só clipamos o brilho de fundo aqui. */
#login-overlay { overflow: hidden; }

/* Enquanto o login está aberto, esconde a sidebar (ela tem z-index maior que o
   overlay e apareceria por cima). */
body:has(#login-overlay.active) header { display: none; }
#login-overlay::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 70%;
    background:
        radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--accent-primary) 26%, transparent), transparent 70%),
        radial-gradient(40% 50% at 15% 20%, color-mix(in srgb, var(--accent-primary) 14%, transparent), transparent 75%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.auth-card-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* Marca */
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.auth-logo {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 11px;
    background: linear-gradient(150deg, var(--accent-primary), #0284c7);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent-primary) 65%, transparent);
}
.auth-wordmark {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

.auth-card-outer {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.5rem;
}

.auth-card-inner {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 24px 48px -24px rgba(0,0,0,0.5);
}

.auth-header { text-align: center; margin-bottom: 1.5rem; }
.auth-title {
    font-size: 1.4rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
    color: var(--text-main);
}
.auth-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 auto;
    max-width: 30ch;
}

#login-fields, #force-change-fields { flex-direction: column; gap: 0.8rem; }
#login-fields { display: flex; }

.auth-note {
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 0.3rem;
}

.auth-error {
    align-items: center;
    gap: 0.55rem;
    background: color-mix(in srgb, var(--accent-danger) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-danger) 28%, transparent);
    color: var(--accent-danger);
    padding: 0.7rem 0.85rem;
    border-radius: 9px;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.auth-input-group { position: relative; display: flex; align-items: center; }
.auth-input-icon {
    position: absolute;
    left: 0.95rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color 0.15s;
}
.auth-input-group:focus-within .auth-input-icon { color: var(--accent-primary); }

.auth-input {
    width: 100%;
    height: 2.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding-left: 2.7rem !important;
    padding-right: 2.7rem !important;
    box-sizing: border-box !important;
    color: var(--text-main);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input::placeholder { color: var(--text-muted); opacity: 0.7; }
/* Edge/IE mostram um "olho" nativo no campo de senha — some com ele, já temos o nosso. */
.auth-input::-ms-reveal,
.auth-input::-ms-clear { display: none; width: 0; height: 0; }
.auth-input:focus,
.auth-input:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

.auth-toggle-password {
    position: absolute;
    right: 0.6rem;
    width: 1.9rem;
    height: 1.9rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    padding: 0;
    transition: color 0.15s, background 0.15s;
}
.auth-toggle-password:hover { color: var(--text-main); background: color-mix(in srgb, var(--text-main) 8%, transparent); }
.auth-toggle-password:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.auth-btn-submit {
    position: relative;
    margin-top: 0.35rem;
    background: linear-gradient(180deg, var(--accent-primary), #0284c7);
    color: #fff;
    height: 2.85rem;
    width: 100%;
    border-radius: 9px;
    border: none;
    font-size: 0.9rem;
    font-weight: 650;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent-primary) 60%, transparent);
    transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.auth-btn-submit:hover { filter: brightness(1.07); transform: translateY(-1px); }
.auth-btn-submit:active { transform: translateY(0); }
.auth-btn-submit:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.auth-btn-label { display: inline-flex; align-items: center; gap: 0.45rem; }
.auth-btn-label i { font-size: 0.8em; }
.auth-btn-submit .amicro-loader { display: none; }
.auth-btn-submit.is-loading { pointer-events: none; filter: saturate(0.9) brightness(0.95); }
.auth-btn-submit.is-loading .auth-btn-label { display: none; }
.auth-btn-submit.is-loading .amicro-loader { display: inline-block; }

.auth-foot {
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-muted);
    opacity: 0.8;
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .auth-card-container { animation: auth-rise 0.42s ease both; }
    @keyframes auth-rise {
        from { opacity: 0; transform: translateY(10px) scale(0.99); }
        to   { opacity: 1; transform: none; }
    }
}

/* ===== LEAD PROFILE PANEL ===== */
/* Ficha do paciente — página dedicada (ocupa a tela toda, com botão Voltar). */
.lead-profile-panel {
    /* Ocupa a área de conteúdo abaixo da topbar (52px), deixando o rail da
       sidebar (54px) e a barra superior visíveis. */
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    left: 54px;
    width: auto;
    max-width: none;
    height: auto;
    background: var(--bg-card);
    z-index: 80; /* abaixo da topbar (90) e do rail da sidebar (10000) */
    display: none;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}
@media (max-width: 900px) {
    .lead-profile-panel { left: 0; }
}

.lead-profile-panel.active {
    display: flex;
    animation: lpp-page-in 0.2s ease both;
}
@keyframes lpp-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.lead-profile-panel .lpp-header,
.lead-profile-panel .lpp-body {
    width: 100%;
    max-width: 1060px;
}
.lead-profile-panel .lpp-header {
    padding: 2rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    position: relative;
}
/* Botão "Fechar" fixo no canto superior direito da ficha */
.lead-profile-panel .lpp-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    left: auto;
    height: 34px;
    padding: 0 1rem;
}
.lead-profile-panel .lpp-close-btn::after { content: none; }
.lpp-identity-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.lead-profile-panel .lpp-avatar-wrap { margin: 0; }
/* Botões "Editar" / "Abrir Chat" abaixo das infos de telefone e e-mail */
.lead-profile-panel .lpp-quick-actions {
    margin: 0;
    justify-content: flex-start;
}

.lead-profile-panel .lpp-body {
    padding: 0 clamp(1rem, 4vw, 2rem) 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* O scroll é do painel inteiro (barra na borda da tela), não de uma área interna. */
    flex: none;
    overflow: visible;
}

.lead-profile-panel .lpp-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Origem + Informações lado a lado quando há largura — a ficha deixa de ser
   uma coluna estreita com metros de espaço vazio dos lados. */
@media (min-width: 880px) {
    .lead-profile-panel .lpp-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 3rem;
    }
    .lead-profile-panel .lpp-grid > .lpp-card { align-self: start; }
}

/* Sem "caixas" em volta das informações — cada bloco é separado só por uma
   linha divisória, com o MESMO respiro acima e abaixo dela (1.75rem). */
.lead-profile-panel .lpp-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
}
.lead-profile-panel .lpp-grid > .lpp-card:first-child,
.lead-profile-panel .lpp-body > .lpp-grid:first-child > .lpp-card:first-child {
    padding-top: 1.25rem;
}
/* Reforça padding + separador mesmo quando o card também é .lpp-section (Origem/Informações/Notas) */
.lead-profile-panel .lpp-grid > .lpp-card,
.lead-profile-panel .lpp-body > .lpp-card {
    padding: 1.25rem 0;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
}
.lead-profile-panel .lpp-section-title { margin-bottom: 0.7rem; }

/* Em 2 colunas, o separador vai sob o grid inteiro — não sob cada card, senão
   as duas bordas ficam em alturas diferentes (Origem é mais curta). */
@media (min-width: 880px) {
    .lead-profile-panel .lpp-grid > .lpp-card,
    .lead-profile-panel .lpp-body > .lpp-grid > .lpp-card {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .lead-profile-panel .lpp-body > .lpp-grid {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 1.25rem;
    }
}

/* Notas: volta pra dentro de um card, com prévia resumida (visualização compacta) */
.lead-profile-panel .lpp-body > .lpp-notas-card {
    border-bottom: 0;
    padding: 1.5rem 0 0;
}
.lead-profile-panel .lpp-notas-card > .lpp-notas-text {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
}
.lead-profile-panel .lpp-notas-text.is-clamped {
    max-height: 7.4em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
            mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.lpp-notas-toggle {
    margin-top: 0.6rem;
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.lpp-notas-toggle:hover { text-decoration: underline; }

.lead-profile-panel .lpp-orc-item,
.lead-profile-panel .lpp-hist-item {
    background: var(--bg-card);
}

/* ── Abas (Orçamentos / Histórico) — variante "underline" do shadcn ── */
.lpp-tabs {
    display: flex;
    gap: 0.15rem;
    border-bottom: 1px solid var(--border-color);
    margin: 0 0 1rem;
    padding: 0;
}
.lpp-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.lpp-tab:first-child { padding-left: 0; }
.lpp-tab i { font-size: 0.8em; opacity: 0.8; }
.lpp-tab:hover { color: var(--text-main); }
.lpp-tab.is-active {
    color: var(--text-main);
    border-bottom-color: #2563eb; /* barra fina azul embaixo da aba ativa */
}
.lpp-tab:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: -2px;
    border-radius: 4px;
}
:root:not([data-theme="light"]) .lpp-tab.is-active { border-bottom-color: #3b82f6; }

.lpp-tabpanel[hidden] { display: none; }
.lpp-tabpanel { animation: lpp-page-in 0.16s ease both; }

.lpp-header {
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    position: relative;
    flex-shrink: 0;
}

/* Botão Voltar (canto superior esquerdo da página) */
.lpp-close-btn {
    position: absolute;
    top: 1rem;
    left: 0;
    background: var(--header-btn-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    height: 34px;
    padding: 0 0.9rem 0 0.75rem;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lpp-close-btn::after { content: 'Voltar'; }

.lpp-close-btn:hover {
    background: var(--header-btn-hover);
    color: var(--text-main);
    border-color: var(--text-muted);
}

.lpp-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.lpp-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), #0ea5e9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -0.5px;
}

.lpp-identity {
    flex: 1;
    min-width: 0;
}

.lpp-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpp-contact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.lpp-contact a {
    color: var(--accent-primary);
    text-decoration: none;
}

.lpp-contact span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lpp-copy-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.72rem;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}

.lpp-copy-phone:hover {
    opacity: 1;
    color: var(--accent-primary);
}

.lpp-copy-phone--copied {
    opacity: 1;
    color: var(--accent-success) !important;
}

.lpp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.lpp-tag {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid currentColor;
}

.lpp-column-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    width: fit-content;
}

.lpp-quick-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}

.lpp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.lpp-action-btn:active {
    transform: scale(0.97);
}

.lpp-action-btn--chat {
    background: #25d366;
    color: #fff;
}

.lpp-action-btn--ghost {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}
.lpp-action-btn--ghost:hover {
    background: hsl(var(--muted));
}

.lpp-action-btn--chat:hover {
    opacity: 0.88;
}

.lpp-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.lpp-body::-webkit-scrollbar {
    width: 4px;
}

.lpp-body::-webkit-scrollbar-track {
    background: transparent;
}

.lpp-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.lpp-section {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.lpp-section:last-child {
    border-bottom: none;
}

.lpp-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lpp-section-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lpp-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-main);
}

.lpp-row i {
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    margin-top: 2px;
    flex-shrink: 0;
}

.lpp-row-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    min-width: 90px;
    flex-shrink: 0;
}

.lpp-row-value {
    color: var(--text-main);
    font-weight: 500;
}

.lpp-birthday-alert {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    background: rgba(251, 191, 36, 0.15);
    color: var(--accent-warning);
    border-radius: 999px;
    font-weight: 600;
    margin-top: 0.25rem;
}

.lpp-notas-text {
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.6;
    white-space: pre-wrap;
    background: var(--bg-main);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.lpp-orc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: var(--bg-main);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.83rem;
}

.lpp-orc-proc {
    color: var(--text-main);
    font-weight: 500;
}

.lpp-orc-valor {
    color: var(--accent-success);
    font-weight: 700;
    font-size: 0.88rem;
}

.lpp-orc-total {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.85rem 0;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--text-main);
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
}

.lpp-hist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-main);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.82rem;
}

.lpp-hist-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-success);
}

.lpp-hist-info {
    flex: 1;
}

.lpp-hist-proc {
    font-weight: 600;
    color: var(--text-main);
}

.lpp-hist-meta {
    color: var(--text-muted);
    font-size: 0.76rem;
    margin-top: 0.15rem;
}

.lpp-hist-valor {
    font-weight: 700;
    color: var(--accent-success);
    font-size: 0.85rem;
    white-space: nowrap;
}

.lpp-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

.lpp-origem-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    width: fit-content;
}

.lpp-origem-meta {
    background: rgba(24, 119, 242, 0.12);
    color: #1877f2;
    border: 1px solid rgba(24, 119, 242, 0.3);
}

.lpp-origem-organic {
    background: color-mix(in srgb, var(--accent-success) 10%, transparent);
    color: var(--accent-success);
    border: 1px solid color-mix(in srgb, var(--accent-success) 25%, transparent);
}

.lpp-ad-id-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
}
.lpp-ad-id {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg-main);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.lpp-ad-id-copy {
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 0.72rem;
    transition: color 0.15s, border-color 0.15s;
}
.lpp-ad-id-copy:hover { color: var(--text-main); border-color: var(--text-muted); }

/* ============================================================================
   INTEGRAÇÃO DE AGENDAMENTO — redesign premium (#modalAgendamento)
   Estrutura injetada por app.js. Tema claro/escuro via tokens existentes.
   ============================================================================ */
#modalAgendamento .modal.agx-modal {
    --agx-line: color-mix(in srgb, var(--text-main) 13%, transparent);
    --agx-line-soft: color-mix(in srgb, var(--text-main) 7%, transparent);
    --agx-surface: color-mix(in srgb, var(--text-main) 3.5%, transparent);
    --agx-raise: color-mix(in srgb, var(--text-main) 6%, transparent);
    --agx-accent: var(--accent-primary);
    --agx-accent-soft: color-mix(in srgb, var(--accent-primary) 15%, transparent);

    width: min(1080px, 95vw);
    max-width: 1080px;
    max-height: min(92vh, 900px);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#modalAgendamento .agx-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ---- Header ---- */
#modalAgendamento .agx-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem 1.15rem;
    border-bottom: 1px solid var(--agx-line-soft);
    background: var(--agx-surface);
}
#modalAgendamento .agx-head-main { display: flex; gap: 0.9rem; align-items: center; }
#modalAgendamento .agx-head-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--agx-accent-soft);
    color: var(--agx-accent);
    font-size: 0.95rem;
}
#modalAgendamento .agx-head h2 {
    display: block;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-main);
}
#modalAgendamento .agx-head h2 i { display: none; }
#modalAgendamento .agx-sub {
    margin: 0;
    max-width: 46ch;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}
#modalAgendamento .agx-head-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}
#modalAgendamento .agx-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem 0.3rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--accent-success);
    background: color-mix(in srgb, var(--accent-success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-success) 30%, transparent);
}
#modalAgendamento .agx-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-success) 22%, transparent);
}
#modalAgendamento .agx-origin {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ---- Body ---- */
#modalAgendamento .agx-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.4rem 1.75rem 1.7rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 1.5rem 1.9rem;
}

/* ---- Colunas ---- */
#modalAgendamento .agx-col {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    min-width: 0;
}

/* ---- Section ---- */
#modalAgendamento .agx-section { display: flex; flex-direction: column; gap: 0.95rem; }
#modalAgendamento .agx-section-head { display: flex; gap: 0.6rem; align-items: flex-start; }
#modalAgendamento .agx-section-head > i {
    flex: none;
    width: 1rem;
    margin-top: 0.15rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--agx-accent);
}
#modalAgendamento .agx-section-head h3 {
    margin: 0 0 0.12rem;
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--text-main);
}
#modalAgendamento .agx-section-head p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* ---- Fields ---- */
#modalAgendamento .agx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; }
#modalAgendamento .agx-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
#modalAgendamento .agx-field.full { grid-column: 1 / -1; }
#modalAgendamento .agx-field > label {
    font-size: 0.76rem;
    font-weight: 550;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}
#modalAgendamento .agx-field input,
#modalAgendamento .agx-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.62rem 0.8rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-main);
    background: var(--bg-main);
    border: 1px solid var(--agx-line);
    border-radius: 9px;
    outline: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
#modalAgendamento .agx-field input::placeholder { color: var(--text-muted); opacity: 0.62; }
#modalAgendamento .agx-field input:hover,
#modalAgendamento .agx-field select:hover {
    border-color: color-mix(in srgb, var(--text-main) 22%, transparent);
}
#modalAgendamento .agx-field input:focus,
#modalAgendamento .agx-field select:focus {
    border-color: var(--agx-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agx-accent) 22%, transparent);
}
#modalAgendamento .agx-field select option { background: var(--bg-dark); color: var(--text-main); }

#modalAgendamento .agx-field.agx-sel { position: relative; }
#modalAgendamento .agx-field.agx-sel::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    bottom: 1rem;
    width: 0.48rem;
    height: 0.48rem;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    pointer-events: none;
}
#modalAgendamento .agx-field.agx-sel select { padding-right: 2rem; }

#modalAgendamento .agx-hasicon { position: relative; }
#modalAgendamento .agx-hasicon > i {
    position: absolute;
    left: 0.8rem;
    top: calc(50% + 0.55rem);
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--text-muted);
    pointer-events: none;
}
#modalAgendamento .agx-hasicon > input { padding-left: 2.1rem; }

#modalAgendamento .agx-field.is-invalid input,
#modalAgendamento .agx-field.is-invalid select {
    border-color: var(--accent-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-danger) 16%, transparent);
}
#modalAgendamento .agx-err {
    display: none;
    margin-top: 0.05rem;
    font-size: 0.72rem;
    color: var(--accent-danger);
}
#modalAgendamento .agx-field.is-invalid > .agx-err,
#modalAgendamento .agx-field.is-invalid .agx-err { display: block; }

/* ---- Autocomplete dropdowns ---- */
#modalAgendamento #ag-patient-dropdown,
#modalAgendamento #ag-event-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 232px;
    overflow-y: auto;
    padding: 0.3rem;
    background: var(--bg-dark);
    border: 1px solid var(--agx-line);
    border-radius: 10px;
    box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.55);
}
#modalAgendamento .ag-dropdown-item {
    padding: 0.5rem 0.6rem;
    font-size: 0.83rem;
    color: var(--text-main);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
}
#modalAgendamento .ag-dropdown-item:hover,
#modalAgendamento .ag-dropdown-item:last-child { background: var(--agx-raise); }
#modalAgendamento .agx-pac-item + .agx-pac-item { margin-top: 1px; }
#modalAgendamento .agx-pac-new {
    margin-top: 0.25rem;
    padding: 0.55rem 0.7rem;
    border-top: 1px solid var(--agx-line-soft);
    color: var(--agx-accent);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    border-radius: 0 0 7px 7px;
}
#modalAgendamento .agx-pac-new:hover { background: var(--agx-accent-soft); }

/* ---- Connected date + time ---- */
#modalAgendamento .agx-datetime {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--agx-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-main);
    transition: border-color 0.15s, box-shadow 0.15s;
}
#modalAgendamento .agx-datetime:focus-within {
    border-color: var(--agx-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agx-accent) 20%, transparent);
}
#modalAgendamento .agx-datetime .agx-field { gap: 0.3rem; padding: 0.55rem 0.8rem; }
#modalAgendamento .agx-datetime .agx-field + .agx-field { border-left: 1px solid var(--agx-line); }
#modalAgendamento .agx-datetime input {
    border: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
}
#modalAgendamento .agx-datetime input:focus { box-shadow: none; }

/* ---- Procedure hint ---- */
#modalAgendamento .agx-proc-hint {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    color: var(--text-muted);
}
#modalAgendamento .agx-proc-hint.show { display: flex; }
#modalAgendamento .agx-proc-hint b { color: var(--text-main); font-weight: 600; }

/* ---- Smart scheduler ---- */
#modalAgendamento .agx-sched {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--agx-line-soft);
    border-radius: 12px;
    background: var(--agx-surface);
}
#modalAgendamento .agx-sched-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
#modalAgendamento .agx-sched-row h4 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
}
#modalAgendamento #sugestoes-dias {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
}
#modalAgendamento #sugestoes-dias::-webkit-scrollbar { display: none; }
#modalAgendamento .agx-slots-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
#modalAgendamento #sugestoes-horas { flex-wrap: wrap; gap: 0.4rem; }
#modalAgendamento #sugestoes-horas .suggestion-chip {
    flex: 1 1 66px;
    max-width: 92px;
    padding: 0.46rem 0.2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
#modalAgendamento .suggestion-chip {
    background: var(--agx-raise);
    border: 1px solid var(--agx-line);
    color: var(--text-main);
    padding: 0.42rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.08s;
}
#modalAgendamento .suggestion-chip:hover {
    border-color: var(--agx-accent);
    background: color-mix(in srgb, var(--agx-accent) 12%, var(--agx-raise));
}
#modalAgendamento .suggestion-chip:active { transform: scale(0.96); }
#modalAgendamento .suggestion-chip.active {
    background: var(--agx-accent);
    border-color: var(--agx-accent);
    color: #fff;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--agx-accent) 55%, transparent);
}
#modalAgendamento .suggestion-chip.agx-slot-off {
    opacity: 0.34;
    cursor: not-allowed;
    background: transparent;
    border-color: var(--agx-line-soft);
    border-style: dashed;
    font-weight: 400;
    box-shadow: none;
}
#modalAgendamento .suggestion-chip.agx-slot-off:hover {
    border-color: var(--agx-line-soft);
    background: transparent;
}
#modalAgendamento #sugestao-loader { color: var(--agx-accent); }

/* ---- Resumo ---- */
#modalAgendamento .agx-resumo {
    padding: 1rem 1.1rem;
    border: 1px solid var(--agx-line-soft);
    border-radius: 12px;
    background: var(--agx-raise);
}
#modalAgendamento .agx-resumo h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--text-main);
}
#modalAgendamento .agx-resumo h3 i { color: var(--agx-accent); font-size: 0.75rem; }
#modalAgendamento .agx-resumo dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.42rem 1rem;
}
#modalAgendamento .agx-resumo dt { font-size: 0.78rem; color: var(--text-muted); }
#modalAgendamento .agx-resumo dd {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 550;
    color: var(--text-main);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.18s;
}
#modalAgendamento .agx-resumo dd.is-empty { font-weight: 400; color: var(--text-muted); }
#modalAgendamento .agx-resumo dd.agx-flash { color: var(--agx-accent); }
#modalAgendamento .agx-resumo dd.agx-valor { font-family: 'JetBrains Mono', monospace; }

/* ---- Kanban patient note ---- */
#modalAgendamento .agx-kanban-note {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
    background: var(--agx-surface);
    border: 1px solid var(--agx-line-soft);
    border-radius: 10px;
}
#modalAgendamento .agx-kanban-note i { margin-top: 0.15rem; color: var(--agx-accent); }

/* ---- Footer ---- */
#modalAgendamento .modal-actions.agx-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--agx-line-soft);
    background: var(--agx-surface);
}
#modalAgendamento #integrationLoader {
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--agx-accent);
}
#modalAgendamento #integrationLoader.active { display: flex; margin-right: auto; }
#modalAgendamento .agx-footer .btn-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--agx-line);
    padding: 0.6rem 1.1rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 550;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}
#modalAgendamento .agx-footer .btn-cancel:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
    background: var(--agx-raise);
}
#modalAgendamento .agx-footer .btn-save {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--agx-accent);
    color: #fff;
    border: 0;
    padding: 0.6rem 1.35rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--agx-accent) 60%, transparent);
    transition: filter 0.14s, transform 0.08s, box-shadow 0.14s, background 0.14s;
}
#modalAgendamento .agx-footer .btn-save:hover { filter: brightness(1.08); }
#modalAgendamento .agx-footer .btn-save:active { transform: scale(0.98); }
#modalAgendamento .agx-footer .btn-save:disabled { opacity: 0.72; cursor: progress; box-shadow: none; }
#modalAgendamento .agx-footer .btn-save.agx-ok {
    background: var(--accent-success);
    box-shadow: none;
    filter: none;
}

/* ---- Responsivo ---- */
@media (max-width: 900px) {
    #modalAgendamento .agx-body {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
}
@media (max-width: 640px) {
    #modalAgendamento .modal.agx-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border: 0;
        border-radius: 0;
    }
    #modalAgendamento .agx-head { flex-direction: column; gap: 0.85rem; }
    #modalAgendamento .agx-head-side { flex-direction: row; align-items: center; gap: 0.75rem; }
    #modalAgendamento .agx-row,
    #modalAgendamento .agx-resumo dl { grid-template-columns: 1fr; }
    #modalAgendamento .agx-resumo dd { text-align: left; }
    #modalAgendamento .agx-body { padding: 1.2rem 1.15rem 1.5rem; gap: 1.5rem; }
    #modalAgendamento .agx-head,
    #modalAgendamento .modal-actions.agx-footer { padding-left: 1.15rem; padding-right: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
    #modalAgendamento .agx-modal *,
    #modalAgendamento .agx-modal *::after { transition: none !important; }
}

/* ============================================================================
   ORÇAMENTO DO PACIENTE — refinamento (#modalOrcamento)
   Mesma linguagem visual do modal de agendamento.
   ============================================================================ */
#modalOrcamento .modal.orcx-modal {
    --agx-line: color-mix(in srgb, var(--text-main) 13%, transparent);
    --agx-line-soft: color-mix(in srgb, var(--text-main) 7%, transparent);
    --agx-surface: color-mix(in srgb, var(--text-main) 3.5%, transparent);
    --agx-raise: color-mix(in srgb, var(--text-main) 6%, transparent);
    --agx-accent: var(--accent-primary);
    --agx-accent-soft: color-mix(in srgb, var(--accent-primary) 15%, transparent);

    width: min(560px, 94vw);
    max-width: 560px;
    max-height: min(90vh, 820px);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#modalOrcamento .orcx-head {
    flex: none;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem 1.15rem;
    border-bottom: 1px solid var(--agx-line-soft);
    background: var(--agx-surface);
}
#modalOrcamento .orcx-head-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--agx-accent-soft);
    color: var(--agx-accent);
    font-size: 0.95rem;
}
#modalOrcamento .orcx-head h2 {
    display: block;
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-main);
}
#modalOrcamento .orcx-head h2 i { display: none; }
#modalOrcamento .orcx-sub {
    margin: 0;
    max-width: 46ch;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}

#modalOrcamento .orcx-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.35rem 1.75rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Lista de procedimentos orçados */
#modalOrcamento .orcx-list-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
#modalOrcamento #orc-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#modalOrcamento .orcx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.6rem 1rem;
    border: 1px dashed var(--agx-line);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.5;
    text-align: center;
}
#modalOrcamento .orcx-empty i { font-size: 1.15rem; opacity: 0.65; }
#modalOrcamento .orcx-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--agx-line-soft);
    border-radius: 10px;
    background: var(--agx-surface);
}
#modalOrcamento .orcx-item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}
#modalOrcamento .orcx-item-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
#modalOrcamento .orcx-item-meta .orcx-disc {
    color: var(--accent-success);
    font-weight: 600;
}
#modalOrcamento .orcx-item-cond {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
#modalOrcamento .orcx-item-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.15rem;
}
#modalOrcamento .orcx-item-actions button {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    color: var(--text-muted);
    transition: background 0.14s, color 0.14s;
}
#modalOrcamento .orcx-item-actions button:hover { background: var(--agx-raise); color: var(--text-main); }
#modalOrcamento .orcx-item-actions button.orcx-del:hover { color: var(--accent-danger); }

/* Painel "Adicionar procedimento" */
#modalOrcamento .orcx-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem;
    border: 1px solid var(--agx-line-soft);
    border-radius: 12px;
    background: var(--agx-raise);
}
#modalOrcamento .orcx-form-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--text-main);
}
#modalOrcamento .orcx-form-title i { color: var(--agx-accent); font-size: 0.78rem; }
#modalOrcamento .orcx-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
}
#modalOrcamento .orcx-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
#modalOrcamento .orcx-field > label {
    font-size: 0.76rem;
    font-weight: 550;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}
#modalOrcamento .orcx-field .form-control,
#modalOrcamento .orcx-field input,
#modalOrcamento .orcx-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.62rem 0.8rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-main);
    background: var(--bg-main);
    border: 1px solid var(--agx-line);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#modalOrcamento .orcx-field textarea {
    min-height: 76px;
    resize: vertical;
    line-height: 1.5;
}
#modalOrcamento .orcx-field select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}
#modalOrcamento .orcx-field select.form-control:focus {
    border-color: var(--agx-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agx-accent) 22%, transparent);
}
#modalOrcamento .orcx-field input::placeholder,
#modalOrcamento .orcx-field textarea::placeholder { color: var(--text-muted); opacity: 0.62; }
#modalOrcamento .orcx-field input:focus,
#modalOrcamento .orcx-field textarea:focus {
    border-color: var(--agx-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agx-accent) 22%, transparent);
}
#modalOrcamento #orc-desconto {
    -moz-appearance: textfield;
    appearance: textfield;
}
#modalOrcamento #orc-desconto::-webkit-outer-spin-button,
#modalOrcamento #orc-desconto::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#modalOrcamento #orc-procedimento-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.3rem;
    background: var(--bg-dark);
    border: 1px solid var(--agx-line);
    border-radius: 10px;
    box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.55);
}
#modalOrcamento #orc-procedimento-dropdown .ag-dropdown-item {
    padding: 0.5rem 0.6rem;
    font-size: 0.83rem;
    color: var(--text-main);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
}
#modalOrcamento #orc-procedimento-dropdown .ag-dropdown-item:hover { background: var(--agx-raise); }

/* Prévia do valor com desconto */
#modalOrcamento .orcx-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-success) 26%, transparent);
    font-size: 0.8rem;
    color: var(--text-muted);
}
#modalOrcamento .orcx-preview strong {
    font-size: 0.95rem;
    color: var(--accent-success);
    font-family: 'JetBrains Mono', monospace;
}
#modalOrcamento .orcx-preview[hidden] { display: none; }

/* Rodapé */
#modalOrcamento .modal-actions.orcx-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--agx-line-soft);
    background: var(--agx-surface);
}
#modalOrcamento .orcx-footer .btn-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--agx-line);
    padding: 0.6rem 1.1rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 550;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}
#modalOrcamento .orcx-footer .btn-cancel:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
    background: var(--agx-raise);
}
#modalOrcamento .orcx-footer .btn-save {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--agx-accent);
    color: #fff;
    border: 0;
    padding: 0.6rem 1.35rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--agx-accent) 60%, transparent);
    transition: filter 0.14s, transform 0.08s;
}
#modalOrcamento .orcx-footer .btn-save:hover { filter: brightness(1.08); }
#modalOrcamento .orcx-footer .btn-save:active { transform: scale(0.98); }

@media (max-width: 560px) {
    #modalOrcamento .modal.orcx-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
    }
    #modalOrcamento .orcx-row { grid-template-columns: 1fr; }
    #modalOrcamento .orcx-head,
    #modalOrcamento .orcx-body,
    #modalOrcamento .modal-actions.orcx-footer {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    #modalOrcamento .orcx-modal * { transition: none !important; }
}

/* ============================================================================
   EDITAR LEAD — refinamento (#modalLeadNotes)
   Mesma linguagem visual dos modais de agendamento / orçamento.
   ============================================================================ */
#modalLeadNotes .modal.lnx-modal {
    --agx-line: color-mix(in srgb, var(--text-main) 13%, transparent);
    --agx-line-soft: color-mix(in srgb, var(--text-main) 7%, transparent);
    --agx-surface: color-mix(in srgb, var(--text-main) 3.5%, transparent);
    --agx-raise: color-mix(in srgb, var(--text-main) 6%, transparent);
    --agx-accent: var(--accent-primary);

    width: min(560px, 94vw);
    max-width: 560px;
    max-height: min(90vh, 860px);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ---- Header ---- */
#modalLeadNotes .lnx-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.4rem 1.6rem 1.15rem;
    border-bottom: 1px solid var(--agx-line-soft);
    background: var(--agx-surface);
}
#modalLeadNotes .lnx-head-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent-warning) 16%, transparent);
    color: var(--accent-warning);
    font-size: 0.95rem;
}
#modalLeadNotes .lnx-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-main);
}
#modalLeadNotes .lnx-sub {
    margin: 0.12rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* ---- Body ---- */
#modalLeadNotes .lnx-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.35rem 1.6rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* ---- Section ---- */
#modalLeadNotes .lnx-section {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
#modalLeadNotes .lnx-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--agx-line-soft);
}
#modalLeadNotes .lnx-section-head > i {
    width: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--agx-accent);
}
#modalLeadNotes .lnx-section-head h3 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: var(--text-main);
}

/* ---- Fields ---- */
#modalLeadNotes .lnx-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 0.9rem;
}
#modalLeadNotes .lnx-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
#modalLeadNotes .lnx-field > label {
    font-size: 0.75rem;
    font-weight: 550;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}
#modalLeadNotes .lnx-field .form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text-main);
    background: var(--bg-main);
    border: 1px solid var(--agx-line);
    border-radius: 9px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#modalLeadNotes .lnx-field .form-control::placeholder { color: var(--text-muted); opacity: 0.6; }
#modalLeadNotes .lnx-field .form-control:focus {
    border-color: var(--agx-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agx-accent) 22%, transparent);
}
#modalLeadNotes .lnx-field textarea.form-control {
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
}
#modalLeadNotes .lnx-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.8;
}

/* select com caret custom */
#modalLeadNotes .lnx-sel { position: relative; }
#modalLeadNotes .lnx-sel select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    cursor: pointer;
}
#modalLeadNotes .lnx-sel::after {
    content: '';
    position: absolute;
    right: 0.8rem;
    bottom: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    pointer-events: none;
}

/* ---- Footer ---- */
#modalLeadNotes .modal-actions.lnx-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.6rem;
    border-top: 1px solid var(--agx-line-soft);
    background: var(--agx-surface);
}
#modalLeadNotes .lnx-footer-actions {
    display: flex;
    gap: 0.6rem;
}
#modalLeadNotes .lnx-chat {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: color-mix(in srgb, var(--accent-success) 13%, transparent);
    color: var(--accent-success);
    border: 1px solid color-mix(in srgb, var(--accent-success) 32%, transparent);
    padding: 0.55rem 1rem;
    border-radius: 9px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s, filter 0.14s;
}
#modalLeadNotes .lnx-chat:hover { filter: brightness(1.1); }
#modalLeadNotes .lnx-footer .btn-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--agx-line);
    padding: 0.6rem 1.1rem;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 550;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}
#modalLeadNotes .lnx-footer .btn-cancel:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
    background: var(--agx-raise);
}
#modalLeadNotes .lnx-footer .btn-save {
    background: var(--agx-accent);
    color: #fff;
    border: 0;
    padding: 0.6rem 1.4rem;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--agx-accent) 60%, transparent);
    transition: filter 0.14s, transform 0.08s;
}
#modalLeadNotes .lnx-footer .btn-save:hover { filter: brightness(1.08); }
#modalLeadNotes .lnx-footer .btn-save:active { transform: scale(0.98); }

@media (max-width: 560px) {
    #modalLeadNotes .modal.lnx-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
    }
    #modalLeadNotes .lnx-row { grid-template-columns: 1fr; }
    #modalLeadNotes .lnx-sel::after { bottom: auto; top: 2.15rem; }
    #modalLeadNotes .modal-actions.lnx-footer {
        flex-wrap: wrap;
    }
    #modalLeadNotes .lnx-chat { order: 2; width: 100%; justify-content: center; }
    #modalLeadNotes .lnx-footer-actions { order: 1; width: 100%; }
    #modalLeadNotes .lnx-footer-actions .btn-cancel,
    #modalLeadNotes .lnx-footer-actions .btn-save { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #modalLeadNotes .lnx-modal * { transition: none !important; }
}

/* ============================================================================
   AGENTE DE IA — refinamento (#modalWhatsappAiSettings)
   Interruptor geral + tempo de resposta + contexto editável.
   ============================================================================ */
#modalWhatsappAiSettings .modal {
    --agx-line: color-mix(in srgb, var(--text-main) 13%, transparent);
    --agx-line-soft: color-mix(in srgb, var(--text-main) 7%, transparent);
    --agx-surface: color-mix(in srgb, var(--text-main) 3.5%, transparent);
    --agx-raise: color-mix(in srgb, var(--text-main) 6%, transparent);
    --agx-accent: var(--accent-primary);
    --agx-accent-soft: color-mix(in srgb, var(--accent-primary) 15%, transparent);

    width: min(680px, 94vw);
    max-width: 680px;
    max-height: min(90vh, 880px);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#modalWhatsappAiSettings .aix-head {
    flex: none;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem 1.15rem;
    border-bottom: 1px solid var(--agx-line-soft);
    background: var(--agx-surface);
}
#modalWhatsappAiSettings .aix-head-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--agx-accent-soft);
    color: var(--agx-accent);
    font-size: 0.95rem;
}
#modalWhatsappAiSettings .aix-head h2 {
    display: block;
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-main);
}
#modalWhatsappAiSettings .aix-head h2 i { display: none; }
#modalWhatsappAiSettings .aix-sub {
    margin: 0;
    max-width: 62ch;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}

#modalWhatsappAiSettings .aix-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.4rem 1.75rem 1.7rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#modalWhatsappAiSettings .aix-block { display: flex; flex-direction: column; gap: 0.7rem; }
#modalWhatsappAiSettings .aix-block-label {
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--text-main);
}
#modalWhatsappAiSettings .aix-block-help {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Interruptor geral */
#modalWhatsappAiSettings .aix-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--agx-line-soft);
    border-radius: 10px;
    background: var(--agx-surface);
    cursor: pointer;
}
#modalWhatsappAiSettings .aix-toggle-row > span:last-child { display: flex; flex-direction: column; }
#modalWhatsappAiSettings .aix-toggle-text {
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--text-main);
}
#modalWhatsappAiSettings .aix-toggle-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Chips de tempo de resposta */
#modalWhatsappAiSettings .aix-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
#modalWhatsappAiSettings .aix-chip {
    padding: 0.46rem 0.95rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-main);
    background: var(--agx-raise);
    border: 1px solid var(--agx-line);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.08s;
}
#modalWhatsappAiSettings .aix-chip:hover {
    border-color: var(--agx-accent);
    background: color-mix(in srgb, var(--agx-accent) 12%, var(--agx-raise));
}
#modalWhatsappAiSettings .aix-chip:active { transform: scale(0.96); }
#modalWhatsappAiSettings .aix-chip.active {
    background: var(--agx-accent);
    border-color: var(--agx-accent);
    color: #fff;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--agx-accent) 55%, transparent);
}

/* Editor de contexto */
#modalWhatsappAiSettings #whatsapp-ai-context-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 300px;
    resize: vertical;
    padding: 0.9rem 1rem;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.65;
    tab-size: 2;
    color: var(--text-main);
    background: var(--bg-main);
    border: 1px solid var(--agx-line);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#modalWhatsappAiSettings #whatsapp-ai-context-textarea:focus {
    border-color: var(--agx-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agx-accent) 22%, transparent);
}

#modalWhatsappAiSettings .aix-note {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    border-radius: 9px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--accent-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-warning) 24%, transparent);
}
#modalWhatsappAiSettings .aix-note i { color: var(--accent-warning); margin-top: 0.12rem; }

/* Rodapé */
#modalWhatsappAiSettings .modal-actions.aix-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--agx-line-soft);
    background: var(--agx-surface);
}
#modalWhatsappAiSettings .aix-footer .btn-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--agx-line);
    padding: 0.6rem 1.1rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 550;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}
#modalWhatsappAiSettings .aix-footer .btn-cancel:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
    background: var(--agx-raise);
}
#modalWhatsappAiSettings .aix-footer .btn-save {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--agx-accent);
    color: #fff;
    border: 0;
    padding: 0.6rem 1.35rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--agx-accent) 60%, transparent);
    transition: filter 0.14s, transform 0.08s;
}
#modalWhatsappAiSettings .aix-footer .btn-save:hover { filter: brightness(1.08); }
#modalWhatsappAiSettings .aix-footer .btn-save:active { transform: scale(0.98); }

@media (max-width: 600px) {
    #modalWhatsappAiSettings .modal {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
    }
    #modalWhatsappAiSettings .aix-head,
    #modalWhatsappAiSettings .aix-body,
    #modalWhatsappAiSettings .modal-actions.aix-footer {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    #modalWhatsappAiSettings .modal * { transition: none !important; }
}

/* ============================================================================
   RESPONSIVE ADAPT — mobile / tablet breakpoints
   ============================================================================ */

/* Mobile sidebar overlay backdrop */
.sb-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    backdrop-filter: blur(2px);
}
.sb-mobile-backdrop.active {
    display: block;
}

/* Hamburger toggle — hidden on desktop, shown at ≤768px */
.sb-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    order: -1;
}
.sb-mobile-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}
.sb-mobile-toggle i { font-size: 15px; }

/* Topbar search — hidden at ≤768px to make room for hamburger */
.topbar-search-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    max-width: calc(100% - 220px);
}

/* ≤768px — sidebar becomes a slide-in overlay */
@media (max-width: 768px) {
    .sb-mobile-toggle { display: flex; }
    .topbar-search-wrap { display: none; }

    /* iOS Safari: inputs below 16px trigger forced zoom on focus — prevent it */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select {
        font-size: max(16px, 1rem) !important;
    }

    header,
    header.sb-collapsed {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px !important;
        transform: translateX(-260px);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.25s ease;
        z-index: 10001;
        overflow-x: visible;
    }

    header.sb-mobile-open {
        transform: translateX(0);
        box-shadow: 8px 0 40px -8px rgba(0, 0, 0, 0.55);
    }

    /* App content spans full width when sidebar is an overlay */
    header.sb-collapsed ~ .app-content,
    header ~ .app-content {
        margin-left: 0 !important;
    }

    /* Topbar: hambúrguer encostado à esquerda, resto agrupado à direita
       (sem a busca — que some no mobile — a barra ficava com um vão à esquerda). */
    .topbar-user {
        padding-left: 0.5rem;
    }
    .topbar-user .sb-mobile-toggle {
        margin-right: auto;
    }
}

/* Garante que a coluna da conversa tenha altura definida, senão o estado vazio
   encolhe no conteúdo e o justify-content:center não tem espaço pra centralizar. */
#view-chat.chat-container { height: 100%; }
#view-chat .chat-main { height: 100%; min-height: 0; }

#chat-empty-state {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
}

/* Ilustração do estado vazio do chat — só no desktop */
.chat-empty-illustration {
    display: none;
}

.chat-empty-fallback-icon {
    font-size: 4rem;
    opacity: 0.16;
    margin-bottom: 1.2rem;
    color: var(--accent-success);
}

.chat-empty-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.5rem;
}

.chat-empty-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 380px;
    line-height: 1.55;
    margin: 0;
}

.chat-empty-footer {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 3rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.8;
}

.chat-empty-footer i {
    color: var(--accent-success);
}

@media (min-width: 769px) {
    .chat-empty-illustration {
        display: block;
        width: min(280px, 32vw);
        max-width: 280px;
        height: auto;
        margin-bottom: 1.75rem;
        opacity: 0.92;
    }
    /* Com a ilustração presente, o ícone do WhatsApp vira redundante.
       Se o SVG falhar ao carregar (onerror="this.remove()"), a adjacência
       quebra e o ícone volta a aparecer. */
    .chat-empty-illustration + .chat-empty-fallback-icon {
        display: none;
    }
}

/* ≤768px — Atendimento: uma tela por vez (lista OU conversa OU ficha) */
@media (max-width: 768px) {
    #view-chat.chat-container { flex-direction: column !important; }

    #view-chat .chat-sidebar {
        width: 100% !important;
        height: 100% !important;
        border-right: none !important;
        border-bottom: none !important;
        flex-shrink: 1;
    }
    /* Conversa: escondida até abrir um chat */
    #view-chat .chat-main { display: none !important; }
    #view-chat.chat-open .chat-sidebar { display: none !important; }
    #view-chat.chat-open .chat-main { display: flex !important; }

    /* Ficha do lead vira painel deslizante sobre a conversa */
    #view-chat .chat-lead-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        z-index: 2000;
        transform: translateX(100%);
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #view-chat.lead-open .chat-lead-panel { transform: none; }

    /* Botões que só existem no mobile */
    .chat-mobile-back,
    .chat-mobile-ficha,
    .chat-lead-close { display: inline-flex !important; }

    /* No mobile a ficha é um drawer de tela cheia — abre pelo botão "Ficha do lead" */
    .chat-lead-collapse { display: none !important; }
    /* No mobile quem abre a ficha é o ícone .chat-mobile-ficha, não o badge do topo. */
    #btn-chat-ficha { display: none !important; }

    #chat-active-header { padding: 0.8rem 1rem !important; }
    #chat-active-input { padding: 0.7rem 0.9rem !important; }
    #chat-active-messages { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }

    /* Conversa aberta = tela cheia: a topbar global (hambúrguer/tema/sino/conta)
       fica redundante sobre o header do chat. O ← volta pra lista, onde ela
       reaparece. Padrão de app de mensagem. */
    #main-content:has(#view-chat.chat-open) .topbar-user { display: none !important; }
}

@media (max-width: 640px) {
    /* Menos respiro nas telas de conteúdo */
    .view-section,
    main.relacionamento,
    #view-posvenda, #view-faltantes, #view-sumidos, #view-aniversariantes {
        padding: 1rem !important;
    }
    .table-container { padding: 0 !important; }

    /* Tabelas largas rolam dentro do próprio container */
    .table-container,
    .rel-table-wrap,
    #view-historico .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Kanban: paginação coluna a coluna com scroll-snap */
    .board {
        padding: 0.75rem;
        gap: 0.75rem;
        scroll-snap-type: x mandatory;
        scroll-padding: 0.75rem;
    }
    .column {
        width: 86vw;
        min-width: 86vw;
        scroll-snap-align: start;
    }

    .kanban-filters {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap;
    }
}

/* Telas estreitas: no topo, só o avatar (sem o nome) */
@media (max-width: 500px) {
    .user-chip .user-chip-name { display: none; }
    .user-chip { padding: 4px; }
    .topbar-user { gap: 8px; padding: 0 0.6rem; }
}

/* Atendimento em telas de celular: header e composer mais enxutos */
@media (max-width: 480px) {
    #chat-active-header { padding: 0.7rem 0.85rem !important; gap: 0.5rem !important; }
    #chat-active-header > div:first-child { gap: 0.55rem !important; }
    /* avatar do contato no header é redundante logo depois da lista — some */
    #chat-header-avatar-slot { display: none !important; }
    #chat-active-name { font-size: 1rem !important; }
    #chat-active-phone { font-size: 0.78rem !important; }
    #chat-active-header .copilot-btn { padding: 0.4rem 0.5rem !important; }
    #chat-active-header .chat-mobile-back { width: 34px; height: 34px; }

    #chat-active-input { padding: 0.55rem 0.6rem !important; gap: 0.25rem !important; }
    #chat-active-input > div:last-child { gap: 0.15rem !important; }
    #chat-active-input .chat-input-icon-btn,
    #chat-active-input .chat-input-send-btn { width: 34px; height: 34px; font-size: 1rem; }
    #chat-input-text { padding: 0.6rem 0.9rem !important; }
    #chat-active-messages { padding-left: 0.7rem !important; padding-right: 0.7rem !important; }
    /* balões usam a largura da tela (o padrão 75% desperdiça no celular) */
    #chat-active-messages .msg-bubble-container > div[id^="msg-bubble-"] { max-width: 86% !important; }
}

/* Botões voltar / ficha / fechar do Atendimento — só aparecem no mobile
   (regra de exibição fica no @media ≤768px acima). */
.chat-mobile-back,
.chat-mobile-ficha,
.chat-lead-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.95rem;
}
.chat-mobile-back:hover,
.chat-mobile-ficha:hover,
.chat-lead-close:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

/* Touch input — enlarge interactive targets */
@media (pointer: coarse) {
    .sb-nav > .tab-btn,
    .sb-nav > .dropdown > .tab-btn {
        min-height: 44px;
    }
    .sb-tool-btn {
        min-height: 44px;
    }
    .chat-contact-item {
        padding: 0.9rem 1rem;
    }
    .kanban-card {
        padding: 0.9rem;
    }
}

/* ============================================================================
   TOAST NOTIFICATION SYSTEM
   ============================================================================ */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: 340px;
}

.toast {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-main);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.2s ease, transform 0.2s ease;
    word-break: break-word;
}
.toast--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.toast--success { border-color: color-mix(in srgb, var(--accent-success) 45%, hsl(var(--border))); }
.toast--danger,
.toast--error   { border-color: color-mix(in srgb, var(--accent-danger)  45%, hsl(var(--border))); }
.toast--warning { border-color: color-mix(in srgb, var(--accent-warning) 45%, hsl(var(--border))); }

@media (max-width: 480px) {
    #toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: 100%;
    }
}

/* ============================================================================
   .lqa — avatar "liquid gradient" (porte vanilla do <Liquid> / uilayouts).
   O frame é este círculo; as 7 camadas de SVG animadas são injetadas por
   liquid-gradient.js (initLiquid). Sem React / motion.
   Uso: <span class="lqa" data-liquid aria-hidden="true"></span>
   ============================================================================ */
.lqa {
    --lqa-size: 40px;
    position: relative;
    width: var(--lqa-size);
    height: var(--lqa-size);
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;            /* contém os mix-blend-mode das camadas */
    background: #010128;           /* base azul-escura (igual ao exemplo oficial) */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #4743ef 45%, transparent);
}
.lqa > div {
    pointer-events: none;
}

/* No cabeçalho do modal "Agente de IA": o tile de ícone vira esse avatar líquido */
#modalWhatsappAiSettings .aix-head-icon.lqa {
    --lqa-size: 38px;
    border-radius: 50%;
    background: #010128;
}

/* No item "Agente de IA" da navbar lateral: no lugar do ícone de robô */
.sb-tool-btn .lqa {
    --lqa-size: 18px;
}

/* No botão da topbar (ao lado do modo noturno) */
#ai-agent-toggle-btn .lqa {
    --lqa-size: 22px;
}

/* ============================================================================
   FOCO, SELEÇÃO, SCROLLBAR E MICRO-ANIMAÇÕES (merge do commit "Polish UI")
   ============================================================================ */
.sb-nav > .tab-btn:focus-visible,
.sb-nav > .dropdown > .tab-btn:focus-visible,
.sb-tool-btn:focus-visible,
.sb-icon-btn:focus-visible,
.tab-btn:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.btn-primary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

::selection {
    background: color-mix(in srgb, var(--accent-primary) 35%, transparent);
    color: var(--text-main);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled) {
    transform: scale(0.97);
}

/* Entrada de view ao trocar de aba */
.view-section.is-entering {
    animation: view-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes view-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pop no badge de notificações */
@keyframes badge-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.6); }
    65%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}
.badge-popping {
    animation: badge-pop 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ============================================================================
   TÍTULOS — mesma sem serifa do corpo (Schibsted Grotesk). A hierarquia vem
   do tamanho e do peso (650), não de uma fonte de display à parte.
   No fim do arquivo de propósito, pra vencer o font-weight/letter-spacing
   afinados nos blocos anteriores.
   ============================================================================ */
h1, h2,
.auth-title, .auth-wordmark,
.modal h2,
.agx-head h2, .orcx-head h2, .lnx-head h2,
.column-title {
    font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 650;
    letter-spacing: -0.01em;
}

/* ============================================================================
   BIBLIOTECA DE MÍDIA — gerenciador de arquivos (#view-midias)
   ============================================================================ */
#view-midias { background: var(--bg-main); flex-direction: column; min-height: 0; overflow-y: auto; }
#view-midias { flex-direction: column; }
.midx-wrap { padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: 1.1rem; max-width: 1200px; width: 100%; margin-inline: auto; flex: 1; min-height: 0; box-sizing: border-box; }
.midx-head h2 {
    margin: 0; font-size: 1.3rem; color: var(--text-main);
    display: flex; align-items: center; gap: 0.55rem;
}
.midx-sub { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--text-muted); }

.midx-bar {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.7rem 0.85rem; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 10px;
}
.midx-bar-spacer { flex: 1; min-width: 0.5rem; }
.midx-crumb { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.midx-crumb a { color: var(--accent-primary); text-decoration: none; font-weight: 600; }
.midx-crumb a:hover { text-decoration: underline; }
.midx-crumb b { color: var(--text-main); }
.midx-search {
    background: var(--bg-main); border: 1px solid var(--border-color); color: var(--text-main);
    padding: 0.4rem 0.7rem; border-radius: 7px; outline: none; font-size: 0.82rem; width: 160px;
}

.midx-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
    gap: 0.9rem; padding: 1rem; border-radius: 12px;
    border: 1px solid var(--border-color); background: var(--bg-main);
    align-content: start; min-height: 340px;
    flex: 1; overflow-y: auto;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.midx-grid.is-drop {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}
.midx-grid--modal { border: 0; min-height: 0; background: none; padding: 0.25rem; flex: none; }
.midx-grid--modal { max-height: 52vh; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.midx-tile {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 0.5rem; padding: 0.9rem 0.7rem 0.7rem;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 11px;
    cursor: pointer; transition: border-color 0.15s, transform 0.08s;
    user-select: none;
}
.midx-tile:hover { border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent); }
.midx-tile:active { transform: scale(0.98); }
.midx-tile--folder { background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-card)); padding-block: 1.5rem; }
.midx-tile--folder .midx-tile-name { font-size: 0.82rem; font-weight: 600; }
.midx-tile.is-dragover { border-color: var(--accent-primary); box-shadow: inset 0 0 0 2px var(--accent-primary); }
.midx-tile-ic { font-size: 2.1rem; color: var(--text-muted); margin-top: 0.4rem; }
.midx-tile--folder .midx-tile-ic { color: var(--accent-primary); }
.midx-tile-thumb {
    width: 100%; height: 84px; object-fit: cover; border-radius: 8px;
    background: var(--bg-main); border: 1px solid var(--border-color);
}
.midx-tile-name {
    font-size: 0.78rem; color: var(--text-main); text-align: center; line-height: 1.3;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
.midx-tile-actions {
    position: absolute; top: 0.4rem; right: 0.4rem; display: flex; gap: 0.2rem;
    opacity: 0; transition: opacity 0.15s;
}
.midx-tile:hover .midx-tile-actions { opacity: 1; }
.midx-tile-actions button {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border-color);
    background: var(--bg-main); color: var(--text-muted); cursor: pointer; font-size: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.midx-tile-actions button:hover { color: var(--text-main); }
.midx-tile-actions button.is-danger:hover { color: var(--accent-danger); border-color: var(--accent-danger); }
.midx-tile-send {
    width: 100%; margin-top: 0.15rem; padding: 0.35rem; border-radius: 7px; border: 0; cursor: pointer;
    background: color-mix(in srgb, var(--accent-success) 15%, transparent);
    color: var(--accent-success); font-size: 0.75rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.midx-tile-send:hover { filter: brightness(1.08); }

.midx-empty {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    padding: 3rem 1rem; color: var(--text-muted); font-size: 0.88rem; text-align: center;
}
.midx-empty i { font-size: 1.8rem; opacity: 0.6; }

#midx-send-leads .midx-lead-row {
    padding: 0.55rem 0.75rem; font-size: 0.85rem; color: var(--text-main); cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
#midx-send-leads .midx-lead-row:last-child { border-bottom: 0; }
#midx-send-leads .midx-lead-row:hover { background: color-mix(in srgb, var(--text-main) 6%, transparent); }
#midx-send-leads .midx-lead-row small { color: var(--text-muted); }

/* --- Kanban Owner Tabs --- */
.kanban-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.kanban-tab-btn:hover {
    color: var(--text-main);
}
.kanban-tab-btn.active {
    color: var(--text-main);
    border-bottom: 2px solid var(--accent-primary);
    font-weight: 600;
}

/* --- Copilot de IA (assistente do atendente no chat) --- */
/* Badges-botão do cabeçalho do chat: fundo preenchido, cantos pouco arredondados. */
/* Botões do cabeçalho do chat: estilo "ghost" (contorno + ícone colorido) pra
   ações de rotina — Resumir/Ferramentas/Ficha. Só a ação de conclusão
   (Finalizar atendimento) é preenchida sólida, porque é a única que deveria
   puxar o olho; com os 4 em cor cheia, nenhuma se destacava de verdade. */
.copilot-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    color: var(--text-main);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, filter 0.15s, opacity 0.15s;
}
.copilot-btn i:first-child { color: var(--accent-primary); }
.copilot-btn:hover { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); }
.copilot-btn:disabled { opacity: 0.55; cursor: default; }
.copilot-btn.is-on { box-shadow: inset 0 0 0 2px var(--accent-primary); }

.copilot-btn--purple { border-color: color-mix(in srgb, var(--accent-purple) 45%, var(--border-color)); }
.copilot-btn--purple i:first-child { color: var(--accent-purple); }
.copilot-btn--purple:hover { background: color-mix(in srgb, var(--accent-purple) 10%, transparent); }

.copilot-btn--warning { border-color: color-mix(in srgb, var(--accent-warning) 45%, var(--border-color)); }
.copilot-btn--warning i:first-child { color: var(--accent-warning); }
.copilot-btn--warning:hover { background: color-mix(in srgb, var(--accent-warning) 10%, transparent); }

.copilot-btn--danger { border-color: color-mix(in srgb, var(--accent-danger) 45%, var(--border-color)); }
.copilot-btn--danger i:first-child { color: var(--accent-danger); }
.copilot-btn--danger:hover { background: color-mix(in srgb, var(--accent-danger) 10%, transparent); }

/* A única ação preenchida sólida — é o fim do fluxo, faz sentido pesar mais. */
.copilot-btn--success {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
    color: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.copilot-btn--success i:first-child { color: #fff; }
.copilot-btn--success:hover { filter: brightness(1.08); background: var(--accent-success, #10b981); }
/* Brilho "hard" (faixa nítida, sem blur) varrendo o botão em loop constante. */
.copilot-btn--success > * { position: relative; z-index: 2; }
.copilot-btn--success::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 0;
    width: 60%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 0,
        transparent 43%,
        rgba(255, 255, 255, 0.9) 44%,
        rgba(255, 255, 255, 0.9) 49%,
        transparent 50%,
        transparent 100%
    );
    transform: translateX(-170%);
    animation: copilotBtnShine 2.2s linear infinite;
}
@keyframes copilotBtnShine {
    0%   { transform: translateX(-170%); }
    100% { transform: translateX(370%); }
}
@media (prefers-reduced-motion: reduce) {
    .copilot-btn--success::before { animation: none; opacity: 0; }
}

/* --- Painel "Agente de IA" (topbar) --- */
#ai-agent-panel.open { transform: translateX(0) !important; }

.ai-agent-chip {
    text-align: left;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.ai-agent-chip:hover {
    border-color: var(--accent-purple);
    background: var(--accent-purple-tint);
}

.ai-agent-msg {
    max-width: 88%;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    font-size: 0.84rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-agent-msg--user {
    align-self: flex-end;
    background: var(--accent-purple);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.ai-agent-msg--assistant {
    align-self: flex-start;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-bottom-left-radius: 3px;
}
.ai-agent-msg--loading {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 0.7rem 0.9rem;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    border-bottom-left-radius: 3px;
}
.ai-agent-msg--loading span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-purple);
    opacity: 0.5;
    animation: aiAgentDotBounce 1.1s infinite ease-in-out;
}
.ai-agent-msg--loading span:nth-child(2) { animation-delay: 0.15s; }
.ai-agent-msg--loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiAgentDotBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}
.copilot-icon-btn { color: var(--accent-primary) !important; }
.copilot-icon-btn.is-loading { opacity: 0.5; pointer-events: none; }
@media (max-width: 720px) { .copilot-btn-label { display: none; } }

/* ============================================================================
   PAPEL DE PAREDE DO CHAT (estilo WhatsApp) — camada isolada num ::before pra
   poder inverter as cores no tema escuro sem filtrar as mensagens junto (um
   filter direto no container afetaria o texto/balões também).
   ============================================================================ */
#chat-active-messages { position: relative; }
#chat-active-messages::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('whatsapp-bg.png');
    background-repeat: repeat;
    background-size: 320px auto;
    pointer-events: none;
    z-index: 0;
}
[data-theme="light"] #chat-active-messages::before {
    background-color: #efeae2;
}
:root:not([data-theme="light"]) #chat-active-messages::before {
    background-color: var(--bg-main);
    filter: invert(0.92) hue-rotate(180deg);
    opacity: 0.55;
}
#chat-active-messages > * { position: relative; z-index: 1; }