/* =============================================
   WhatsApp CRM - Estilos Principais
   ============================================= */

:root {
    --sidebar-width: 220px;
    --sidebar-bg: #FFFFFF;
    --sidebar-hover: rgba(var(--primary-rgb),0.07);
    --sidebar-active: rgba(var(--primary-rgb),0.12);
    --primary: #FF7E01;
    --primary-hover: #E56F00;
    --primary-subtle: rgba(255,126,1,0.10);
    --secondary: #5DA399;
    --secondary-subtle: rgba(93,163,153,0.12);
    --dark: #2A2D34;
    --surface: #FFFFFF;
    --surface-2: #F9F5F0;
    --surface-3: #F2EDE6;
    --body-bg: #FFF8F0;
    --text: #2A2D34;
    --text-muted: #6B7280;
    --border-color: rgba(42,45,52,0.12);
    --glass-bg: #FFFFFF;
    --glass-border: rgba(42,45,52,0.10);
    --cl-border: rgba(42,45,52,0.12);
    --purple: #a78bfa;
    --radius: 12px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Bootstrap 5.3.3 dark theme overrides */
    --bs-body-bg: #FFF8F0;
    --bs-body-color: #2A2D34;
    --bs-border-color: rgba(42,45,52,0.12);
    --bs-card-bg: #FFFFFF;
    --bs-modal-bg: #FFFFFF;
    --bs-dropdown-bg: #FFFFFF;
    --bs-tertiary-bg: #F9F5F0;
    --bs-secondary-bg: #F2EDE6;
}

* { box-sizing: border-box; }

body {
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--body-bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Ícone nativo de data/hora (calendário/relógio). O <html> traz SEMPRE
   data-bs-theme="dark", então o Bootstrap deixa a página em color-scheme dark
   (ícone claro) e o invert abaixo o devolve PRETO: certo no claro, errado no
   escuro (e no escuro os campos .form-control do chat já são color-scheme dark).
   No escuro o campo fica explicitamente em color-scheme dark e o ícone SEM
   filtro: claro, com opacidade de texto secundário, e o seletor nativo escuro. */
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] input[type="month"],
:root[data-theme="dark"] input[type="week"] {
    color-scheme: dark;
}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: .75;
    cursor: pointer;
}
html[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
    cursor: pointer;
}

/* =============================================
   Login Page
   ============================================= */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFF8F0 0%, #F9F5F0 50%, #FFF8F0 100%);
    position: relative;
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(var(--primary-rgb),0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(var(--primary-rgb),0.05) 0%, transparent 40%);
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.login-card {
    background: #FFFFFF;
    border: 1px solid rgba(42,45,52,0.10);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px rgba(42,45,52,0.12);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 8px 30px rgba(var(--primary-rgb),0.25);
}

.login-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.login-header p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.9rem;
}

.login-form .form-control {
    background: #FFFFFF;
    border: 1px solid rgba(42,45,52,0.20);
    color: #2A2D34;
    border-radius: 10px;
    height: 54px;
}

.login-form .form-control:focus {
    background: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.12);
    color: #2A2D34;
}

.login-form .form-floating label {
    color: var(--text-muted);
}

.btn-login {
    height: 50px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    background: var(--primary);
    border: none;
    color: #fff;
    transition: var(--transition);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb),0.30);
    background: var(--primary-hover);
    color: #fff;
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(42,45,52,0.10);
}

/* =============================================
   App Layout
   ============================================= */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 1050;
    transition: transform 0.3s ease;
}

.sidebar-header {
    padding: 1.2rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}

.sidebar-brand i {
    font-size: 1.6rem;
}

.sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
    overflow-y: auto;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition);
    border-left: 3px solid transparent;
}

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

.sidebar-link.active {
    background: var(--sidebar-active);
    color: var(--primary);
    border-left-color: var(--primary);
}

.sidebar-link.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.sidebar-link i {
    font-size: 1.15rem;
    width: 22px;
    text-align: center;
}

.sidebar-section-label {
    padding: 0.85rem 1.25rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.6;
}

.sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.5rem;
}

.user-avatar i {
    font-size: 1.8rem;
    color: var(--text-muted);
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.user-role {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.logout-link {
    padding: 0.5rem 0.5rem;
    border-radius: 8px;
    margin-top: 0.25rem;
    border-left: none !important;
}

.logout-link:hover {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
}

.top-navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.page-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.connection-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.status-connected,
.status-connected .status-dot {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
}

.status-dot.status-connecting,
.status-connecting .status-dot {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245,158,11,0.5);
    animation: pulse 1.5s infinite;
}

.status-dot.status-disconnected,
.status-disconnected .status-dot {
    background: #6b7280;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
}

.page-content {
    padding: 1.5rem;
}

/* =============================================
   Cards
   ============================================= */
.glass-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(12px);
    transition: var(--transition);
}

.glass-card:hover {
    border-color: rgba(255,255,255,0.1) !important;
}

.glass-card .card-header {
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.glass-card .card-footer {
    background: rgba(255,255,255,0.02);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

/* Stat Cards */
.stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.stat-info h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.stat-info p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

/* Instance Cards */
.instance-card {
    transition: var(--transition);
}

.instance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #128c7e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}

.instance-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.instance-status-dot.status-connected { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.instance-status-dot.status-connecting { background: #f59e0b; animation: pulse 1.5s infinite; }
.instance-status-dot.status-disconnected { background: #6b7280; }

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.status-connected {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
}

.status-badge.status-connecting {
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
}

.status-badge.status-disconnected {
    background: rgba(107,114,128,0.12);
    color: #9ca3af;
}

.status-badge.status-banned {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}

/* =============================================
   Buttons
   ============================================= */
.btn-primary {
    background: var(--primary) !important;
    border: none !important;
    color: var(--ui-on-primary, #FFFFFF) !important;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb),0.25);
    color: var(--ui-on-primary, #FFFFFF) !important;
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.30);
    outline: none;
}

.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(var(--primary-rgb),0.15) !important;
    transition-duration: 100ms;
}

.btn-primary.btn-loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary {
    background: #5DA399 !important;
    border: none !important;
    color: #FFFFFF !important;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover {
    background: #4C8F86 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(93,163,153,0.25);
    color: #FFFFFF !important;
}

.btn-secondary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(93,163,153,0.15) !important;
    transition-duration: 100ms;
}

.btn-danger {
    background: var(--ui-error, #EF4444) !important;
    border: none !important;
    color: var(--ui-on-danger, #FFFFFF) !important;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-danger:hover {
    background: var(--ui-error-ink, #DC2626) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(239,68,68,0.25);
    color: var(--ui-on-danger, #FFFFFF) !important;
}

.btn-danger:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(239,68,68,0.15) !important;
    transition-duration: 100ms;
}

.btn-ghost {
    background: transparent;
    border: none;
    color: #6B7280;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ghost:hover {
    color: #2A2D34;
    background: rgba(42,45,52,0.06);
}

/* =============================================
   Form Controls
   ============================================= */
.form-control, .form-select {
    background: #FFFFFF;
    border: 1px solid rgba(42,45,52,0.20);
    color: #2A2D34;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:hover, .form-select:hover {
    border-color: rgba(42,45,52,0.35);
}

.form-control:focus, .form-select:focus {
    background: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.12);
    color: #2A2D34;
}

.form-control::placeholder {
    color: #9CA3AF;
}

.form-control:disabled, .form-select:disabled {
    background: #F9F5F0;
    color: #9CA3AF;
    border-color: rgba(42,45,52,0.10);
}

.form-label {
    font-weight: 400;
    font-size: 0.8125rem;
    color: #2A2D34;
    margin-bottom: 8px;
}

/* =============================================
   List Groups
   ============================================= */
.list-group-item {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text);
}

.list-group-item-action:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}

/* =============================================
   Alerts
   ============================================= */
.alert {
    border-radius: 10px;
    border: none;
    font-size: 0.875rem;
}

/* =============================================
   Dropdown
   ============================================= */
.dropdown-menu {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.dropdown-item {
    color: var(--text);
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

.dropdown-item:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}

.dropdown-divider {
    border-color: var(--border-color);
}

/* =============================================
   Responsivo
   ============================================= */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .page-content {
        padding: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-info h3 {
        font-size: 1.5rem;
    }

    .login-card {
        padding: 1.5rem;
    }
}

/* =============================================
   Scrollbar
   ============================================= */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

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

/* =============================================
   Purple color helper
   ============================================= */
.bg-purple-subtle {
    background-color: rgba(167,139,250,0.12) !important;
}

.text-purple {
    color: var(--purple) !important;
}

/* =============================================
   Animations
   ============================================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-card,
.glass-card,
.instance-card {
    animation: fadeIn 0.4s ease forwards;
}

.row .col-12:nth-child(2) .stat-card,
.row .col-12:nth-child(2) .instance-card { animation-delay: 0.05s; }
.row .col-12:nth-child(3) .stat-card,
.row .col-12:nth-child(3) .instance-card { animation-delay: 0.1s; }
.row .col-12:nth-child(4) .stat-card { animation-delay: 0.15s; }
.row .col-12:nth-child(5) .stat-card { animation-delay: 0.2s; }

/* =============================================
   Inbox / Chat
   ============================================= */
.inbox-container {
    height: calc(100vh - 60px);
    overflow: hidden;
}

.inbox-container .row {
    height: 100%;
}

/* Sidebar do inbox */
.inbox-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    height: 100%;
    overflow: hidden;
}

.inbox-header {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.inbox-filters {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.inbox-list {
    flex: 1;
    overflow-y: auto;
}

.inbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}

.inbox-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}

.inbox-item.active {
    background: var(--primary-subtle);
}

.inbox-item-avatar {
    flex-shrink: 0;
}

.avatar-placeholder-sm {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #128c7e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}

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

.inbox-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;
}

.inbox-item-name {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-item-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.inbox-item-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.inbox-item-preview .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.badge-unread {
    font-size: 0.45rem;
    min-width: 18px;
    height: 18px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Área principal do chat */
.inbox-main {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.inbox-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--body-bg);
}

/* Chat header */
.chat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.chat-header-info {
    flex: 1;
    min-width: 0;
}

.chat-header-info h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-actions {
    flex-shrink: 0;
}

/* Mensagens */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--body-bg);
    background-image:
        radial-gradient(circle at 15% 85%, rgba(37,211,102,0.03) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(37,211,102,0.02) 0%, transparent 40%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.message-bubble {
    max-width: 70%;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    animation: fadeIn 0.2s ease;
}

.message-sent {
    align-self: flex-end;
    background: #005c4b;
    border-bottom-right-radius: 4px;
}

.message-received {
    align-self: flex-start;
    background: var(--surface-2);
    border-bottom-left-radius: 4px;
}

.message-sender {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.2rem;
}

.message-text {
    white-space: pre-wrap;
}

.message-caption {
    font-size: 0.82rem;
    margin-top: 0.3rem;
    white-space: pre-wrap;
}

.message-media {
    margin-bottom: 0.3rem;
    border-radius: 8px;
    overflow: hidden;
}

.message-media img {
    max-width: 100%;
    max-height: 300px;
    display: block;
}

.sticker-img {
    max-width: 150px !important;
    max-height: 150px !important;
}

.message-document {
    padding: 0.5rem;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
}

.message-document a {
    color: var(--text);
    text-decoration: none;
}

.message-document a:hover {
    color: var(--primary);
}

.message-location {
    padding: 0.5rem;
    background: rgba(37,211,102,0.08);
    border-radius: 8px;
    font-size: 0.82rem;
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.message-time {
    font-size: 0.66rem;
    color: rgba(255,255,255,0.5);
}

.message-status-icon {
    font-size: 0.75rem;
}

.message-status-icon .bi-check-all.text-info {
    color: #53bdeb !important;
}

/* Campo de input */
.chat-input {
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.chat-input .input-group {
    gap: 0.5rem;
}

.chat-input .form-control {
    border-radius: 20px;
    padding: 0.6rem 1rem;
    height: 44px;
}

.chat-input .btn {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Attach / Location panel */
.chat-attach-panel {
    background: var(--surface-2);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    max-height: 260px;
    overflow-y: auto;
}

.attach-type-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
}

.attach-type-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--primary);
}

.cursor-pointer {
    cursor: pointer;
}

/* Chat input with ghost buttons */
.chat-input .input-group {
    align-items: flex-end;
}

.chat-input .btn-ghost {
    width: 40px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
}

.chat-input textarea.form-control {
    resize: none;
    border-radius: 20px;
    padding: 0.6rem 1rem;
    min-height: 44px;
    max-height: 120px;
    line-height: 1.5;
}

/* Responsivo para inbox */
@media (max-width: 767.98px) {
    .inbox-container {
        height: calc(100vh - 56px);
    }

    .message-bubble {
        max-width: 85%;
    }
}

/* =============================================
   WhatsApp Web Theme — 3-column chat interface
   ============================================= */

/* Layout container — negates page-content padding to fill edge-to-edge */
.wa-layout {
    display: flex;
    /* margin: -1.5rem; */
    height: calc(100vh - 57px);
    overflow: hidden;
    font-family: 'Instrument Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ── Sidebar ──────────────────────────────── */
.wa-sidebar {
    width: 360px;
    min-width: 360px;
    background: #111b21;
    border-right: 1px solid rgba(134,150,160,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wa-sidebar-top {
    background: #202c33;
    padding: 13px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.wa-sidebar-top select {
    flex: 1;
    background: #2a3942;
    border: none;
    border-radius: 8px;
    color: #e9edef;
    padding: 6px 10px;
    font-size: 0.82rem;
    cursor: pointer;
    outline: none;
}

.wa-sidebar-top-btns {
    display: flex;
    gap: 2px;
}

.wa-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #aebac1;
    padding: 8px;
    border-radius: 50%;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    line-height: 1;
}
.wa-icon-btn:hover { background: rgba(134,150,160,0.12); }

.wa-search-bar {
    padding: 8px 12px;
    background: #111b21;
    flex-shrink: 0;
}

.wa-search-wrap {
    position: relative;
}

.wa-search-wrap i,
.wa-search-wrap svg.wa-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8696a0;
    font-size: 0.88rem;
    pointer-events: none;
}

.wa-search-wrap input {
    width: 100%;
    background: #202c33;
    border: none;
    outline: none;
    border-radius: 8px;
    padding: 8px 12px 8px 34px;
    color: #e9edef;
    font-size: 0.85rem;
}
.wa-search-wrap input::placeholder { color: #8696a0; }

.wa-filters {
    display: flex;
    gap: 8px;
    padding: 0 12px 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.wa-filters::-webkit-scrollbar { display: none; }

.wa-filter-btn {
    background: #202c33;
    border: none;
    cursor: pointer;
    color: #aebac1;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    transition: all 0.15s;
    white-space: nowrap;
}
.wa-filter-btn.active {
    background: #00a884;
    color: #111b21;
    font-weight: 600;
}
.wa-filter-btn:hover:not(.active) { background: #2a3942; }

/* Chat list */
.wa-chat-list {
    flex: 1;
    overflow-y: auto;
}
.wa-chat-list::-webkit-scrollbar { width: 5px; }
.wa-chat-list::-webkit-scrollbar-track { background: transparent; }
.wa-chat-list::-webkit-scrollbar-thumb { background: rgba(134,150,160,0.2); border-radius: 3px; }

.wa-chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(134,150,160,0.06);
    transition: background 0.12s;
}
.wa-chat-item:hover { background: #202c33; color: inherit; }
.wa-chat-item.active { background: #2a3942; color: inherit; }

.wa-chat-avatar {
    flex-shrink: 0;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: #3b4a54;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aebac1;
    font-size: 1.3rem;
    overflow: hidden;
}
.wa-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.wa-chat-info { flex: 1; min-width: 0; }

.wa-chat-row1, .wa-chat-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wa-chat-name {
    font-size: 0.9rem;
    font-weight: 400;
    color: #e9edef;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.wa-chat-time {
    font-size: 0.71rem;
    color: #8696a0;
    flex-shrink: 0;
    margin-left: 6px;
}
.wa-chat-item.has-unread .wa-chat-time { color: #00a884; }

.wa-chat-preview {
    font-size: 0.82rem;
    color: #8696a0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    margin-top: 2px;
}

.wa-unread-badge {
    background: #00a884;
    color: #111b21;
    border-radius: 50%;
    min-width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0 4px;
    flex-shrink: 0;
    margin-left: 6px;
}

/* ── Chat list item actions (dropdown + mute icon) ───────────────── */
.wa-chat-wrap { position: relative; }

.wa-chevron-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8696a0;
    font-size: 0.75rem;
    cursor: pointer;
    z-index: 2;
}
.wa-chevron-btn:hover { color: #000 !important; }

/* Reserve space on the right for the always-visible chevron */
.wa-chat-wrap .wa-chat-item { padding-right: 32px; }

/* ── Chat dropdown — light card matching site theme ──── */
.wa-chat-dropdown {
    position: fixed;
    z-index: 9999;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 230px;
    padding: 6px 0;
    display: none;
    border: 1px solid rgba(42,45,52,0.1);
    overflow: hidden;
    animation: dropFadeIn 0.12s ease;
}
.wa-chat-dropdown.open { display: block; }

@keyframes dropFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Base item */
.wa-drop-item {
    padding: 11px 18px;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    transition: background 0.1s;
    user-select: none;
}
.wa-drop-item > i { font-size: 1rem; color: #6b7280; flex-shrink: 0; }
.wa-drop-item > span { flex: 1; }
.wa-drop-item:hover { background: rgba(42,45,52,0.05); color: #111827; }
.wa-drop-item:hover > i { color: #374151; }

/* Warn (clear) */
.wa-drop-item.wa-drop-warn { color: #d97706; }
.wa-drop-item.wa-drop-warn > i { color: #d97706; }
.wa-drop-item.wa-drop-warn:hover { background: rgba(217,119,6,0.07); }

/* Danger (delete) */
.wa-drop-item.wa-drop-danger { color: #dc2626; }
.wa-drop-item.wa-drop-danger > i { color: #dc2626; }
.wa-drop-item.wa-drop-danger:hover { background: rgba(220,38,38,0.07); }

/* Chevron suffix on expandable items */
.wa-drop-chevron { font-size: 0.7rem !important; color: #9ca3af !important; margin-left: auto; }
.wa-drop-item:hover .wa-drop-chevron { color: #6b7280 !important; }

/* Divider */
.wa-drop-divider { height: 1px; background: rgba(42,45,52,0.08); margin: 5px 0; }

/* Mute submenu */
.wa-mute-submenu { background: #f9fafb; border-top: 1px solid rgba(42,45,52,0.06); }
.wa-mute-submenu .wa-drop-item { padding-left: 44px; font-size: 0.82rem; color: #6b7280; }
.wa-mute-submenu .wa-drop-item:hover { color: #374151; }

/* Label submenu */
.wa-label-submenu { background: #f9fafb; border-top: 1px solid rgba(42,45,52,0.06); }
.wa-label-submenu .wa-drop-item { padding-left: 18px; }
.wa-drop-label-dot {
    /* CRITICAL: flex: none prevents the parent ".wa-drop-item > span" rule from stretching this */
    flex: none !important;
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 50%;
    display: block;
}
.wa-drop-label-item { gap: 12px; }

.wa-muted-icon {
    color: #8696a0;
    font-size: 0.78rem;
    margin-left: 4px;
    flex-shrink: 0;
}

/* ── Main chat area ───────────────────────── */
.wa-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0b141a;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.wa-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    color: #8696a0;
    background: #0b141a;
    padding: 2rem;
    text-align: center;
}

.wa-empty-icon {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #182229;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    color: #3b4a54;
}

/* ── Contact panel ────────────────────────── */
.wa-contact-panel {
    width: 350px;
    min-width: 350px;
    background: #111b21;
    border-left: 1px solid rgba(134,150,160,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wa-cp-header {
    background: #202c33;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    color: #e9edef;
    font-size: 0.95rem;
    font-weight: 500;
}

.wa-cp-body {
    flex: 1;
    overflow-y: auto;
}
.wa-cp-body::-webkit-scrollbar { width: 5px; }
.wa-cp-body::-webkit-scrollbar-thumb { background: rgba(134,150,160,0.2); border-radius: 3px; }

.wa-cp-avatar-section {
    background: #202c33;
    padding: 24px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.wa-cp-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
}

.wa-cp-avatar-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #3b4a54;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aebac1;
    font-size: 2.5rem;
}

.wa-cp-name {
    font-size: 1rem;
    font-weight: 500;
    color: #e9edef;
    margin: 0;
    text-align: center;
}

.wa-cp-phone {
    font-size: 0.82rem;
    color: #8696a0;
    margin: 0;
}

.wa-cp-section {
    margin-top: 8px;
    background: #202c33;
}

.wa-cp-section-label {
    padding: 12px 20px 4px;
    font-size: 0.78rem;
    color: #00a884;
    font-weight: 500;
}

.wa-cp-section-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(134,150,160,0.06);
    font-size: 0.87rem;
    color: #e9edef;
}
.wa-cp-section-item:last-child { border-bottom: none; }

.wa-cp-notes {
    width: 100%;
    background: #2a3942;
    border: 1px solid rgba(134,150,160,0.15);
    border-radius: 8px;
    color: #e9edef;
    padding: 10px 12px;
    font-size: 0.85rem;
    resize: none;
    min-height: 80px;
    font-family: inherit;
    box-sizing: border-box;
}
.wa-cp-notes:focus { outline: none; border-color: #00a884; }

/* ── Meeting cards in contact panel ─── */
.wa-cp-meeting-card {
    background: #1a2730;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 5px;
    transition: background .15s;
    color: #e9edef;
}
.wa-cp-meeting-card:hover {
    background: #223038;
}
.wa-cp-meeting-card .text-muted {
    color: #8696a0 !important;
}
.wa-cp-meeting-card .small, .wa-cp-meeting-card small {
    color: #aebac1;
}
.wa-cp-meeting-card.past {
    opacity: 0.6;
}
.wa-cp-meeting-card.cancelled {
    opacity: 0.5;
}
.wa-cp-meeting-card .dropdown-menu {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    min-width: 120px;
    z-index: 1050;
    position: fixed !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.wa-cp-meeting-card .dropdown-item {
    color: #333;
    font-size: .82rem;
    padding: 6px 14px;
}
.wa-cp-meeting-card .dropdown-item:hover {
    background: #f0f0f0;
    color: #111;
}

/* ── Group panel member list ───────────────────────────────────────── */
.wa-gp-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(134,150,160,0.06);
    cursor: default;
    transition: background .15s;
}
.wa-gp-member:last-child { border-bottom: none; }
.wa-gp-member:hover { background: rgba(134,150,160,0.05); }

.wa-gp-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #3b4a54;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aebac1;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wa-gp-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wa-gp-name {
    font-size: .875rem;
    color: #e9edef;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-gp-phone {
    font-size: .78rem;
    color: #8696a0;
}

.wa-gp-badge {
    font-size: .7rem;
    color: #00a884;
    background: rgba(0,168,132,.12);
    border: 1px solid rgba(0,168,132,.25);
    border-radius: 12px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.wa-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wa-tag {
    background: #2a3942;
    border: 1px solid rgba(134,150,160,0.2);
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 0.78rem;
    color: #e9edef;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Chat header (inside show.php) ───────── */
.wa-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    background: #202c33;
    border-bottom: 1px solid rgba(134,150,160,0.08);
    flex-shrink: 0;
}

.wa-chat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.wa-chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3b4a54;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aebac1;
    overflow: hidden;
    flex-shrink: 0;
}
.wa-chat-header-avatar img { width: 40px; height: 40px; object-fit: cover; }

.wa-chat-header-info { min-width: 0; }

.wa-chat-header-name {
    font-size: 0.92rem;
    font-weight: 500;
    color: #e9edef;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-chat-header-sub {
    font-size: 0.73rem;
    color: #8696a0;
}

.wa-chat-header-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

/* ── Messages ─────────────────────────────── */
.wa-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px;
    background: #0b141a;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wa-messages::-webkit-scrollbar { width: 6px; }
.wa-messages::-webkit-scrollbar-track { background: transparent; }
.wa-messages::-webkit-scrollbar-thumb { background: rgba(134,150,160,0.2); border-radius: 3px; }

/* Date separator */
.wa-date-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 6px;
    pointer-events: none;
}
.wa-date-sep span {
    background: #182229;
    color: #8696a0;
    font-size: 0.74rem;
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* Edited message label */
.wa-msg-edited {
    font-size: .68rem;
    opacity: .55;
    font-style: italic;
    margin-left: 4px;
}

/* System messages (group notifications: rename, description, lock) */
.wa-system-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 6px;
    pointer-events: none;
}

.wa-system-msg span {
    background: #F2EDE6;
    color: #6B7280;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 11px;
    box-shadow: none;
}

/* Bubbles */
.wa-msg {
    max-width: 65%;
    padding: 6px 9px;
    border-radius: 7.5px;
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    word-break: break-word;
    animation: fadeIn 0.15s ease;
}

.wa-msg-received {
    align-self: flex-start;
    background: #202c33;
    border-top-left-radius: 0;
    color: #e9edef;
}
.wa-msg-received::before {
    content: '';
    position: absolute;
    top: 0; left: -8px;
    width: 0; height: 0;
    border-top: 8px solid #202c33;
    border-left: 8px solid transparent;
}

.wa-msg-sent {
    align-self: flex-end;
    background: #005c4b;
    border-top-right-radius: 0;
    color: #e9edef;
}
/*
.wa-msg-sent::before {
    content: '';
    position: absolute;
    top: 0; right: -8px;
    width: 0; height: 0;
    border-top: 8px solid #005c4b;
    border-right: 8px solid transparent;
}
*/

.wa-msg-sender {
    font-size: 0.77rem;
    font-weight: 600;
    color: #06cf9c;
    margin-bottom: 3px;
}

.wa-msg-caption {
    font-size: 0.83rem;
    margin-top: 3px;
    white-space: pre-wrap;
}

.wa-msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 2px;
    float: right;
    margin-left: 8px;
    margin-bottom: -2px;
}

.wa-msg-time {
    font-size: 0.68rem;
    color: rgba(134,150,160,0.85);
    white-space: nowrap;
}

.wa-msg-status { font-size: 0.82rem; }
.wa-msg-status.read { color: #53bdeb; }
.wa-msg-status.delivered,
.wa-msg-status.sent { color: rgba(134,150,160,0.85); }

/* Media */
.wa-msg-media {
    margin-bottom: 4px;
    border-radius: 6px;
    overflow: hidden;
    max-width: 300px;
}
.wa-msg-media img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border-radius: 14px;
    padding-top: 5px;
}
.wa-msg-media video {
    width: 100%;
    max-height: 260px;
    border-radius: 6px;
}

/* Document card */
.wa-doc-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(134,150,160,0.08);
    border-radius: 6px;
    min-width: 200px;
    text-decoration: none;
    color: #e9edef;
}
.wa-doc-card:hover { background: rgba(134,150,160,0.14); color: #e9edef; }
.wa-doc-icon { font-size: 1rem; color: #00a884; }

/* Location */
.wa-location-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0,168,132,0.1);
    border-radius: 6px;
    text-decoration: none;
    color: #e9edef;
    font-size: 0.85rem;
}
.wa-location-card:hover { color: #e9edef; }

/* Link preview card (ExtendedTextMessage) */
.wa-link-preview {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    background: rgba(0, 0, 0, .18);
    transition: background .15s;
    margin: 10px 0px 0px 0px;
}
.wa-link-preview:hover { background: rgba(0,0,0,.28); }
.wa-link-preview > img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}
.wa-link-preview-info {
    padding: 6px 10px 8px;
}
.wa-link-preview-domain {
    font-size: .68rem;
    color: #aebac1;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.wa-link-preview-domain svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.wa-link-preview-title {
    font-size: .82rem;
    font-weight: 600;
    color: #e9edef;
    line-height: 1.3;
    margin-bottom: 2px;
}
.wa-link-preview-desc {
    font-size: .75rem;
    color: #8696a0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom audio player */
.wa-audio-player {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
    max-width: 300px;
    padding: 2px 0;
}

.wa-audio-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(134,150,160,0.15);
    border: none;
    cursor: pointer;
    color: #e9edef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.15s;
}
.wa-audio-btn:hover { background: rgba(134,150,160,0.25); }

.wa-audio-body { flex: 1; }

.wa-audio-track {
    height: 3px;
    background: rgba(134,150,160,0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    margin-bottom: 4px;
}
.wa-audio-fill {
    height: 100%;
    background: #00a884;
    border-radius: 2px;
    width: 0%;
    pointer-events: none;
    transition: width 0.1s linear;
}
.wa-audio-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.wa-audio-time {
    font-size: 0.68rem;
    color: rgba(134,150,160,0.85);
}
.wa-speed-btn {
    background: rgba(134,150,160,0.15);
    border: none;
    border-radius: 10px;
    color: #8696a0;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 7px;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    transition: .12s;
}
.wa-speed-btn:hover { background: rgba(134,150,160,0.25); }
.wa-msg-sent .wa-speed-btn { color: #667781; background: rgba(0,0,0,0.06); }
.wa-msg-sent .wa-speed-btn:hover { background: rgba(0,0,0,0.1); }

/* ── Input bar ─────────────────────────────── */
.wa-input-area {
    padding: 8px 16px;
    background: #202c33;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.wa-input-wrap {
    flex: 1;
    background: #2a3942;
    border-radius: 10px;
    display: flex;
    align-items: flex-end;
    min-height: 42px;
}

.wa-input-text {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #e9edef;
    font-size: 0.9rem;
    padding: 11px 12px;
    resize: none;
    max-height: 120px;
    min-height: 42px;
    line-height: 1.5;
    font-family: inherit;
    overflow-y: auto;
}
.wa-input-text::placeholder { color: #8696a0; }

.wa-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #00a884;
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background 0.15s;
}
.wa-send-btn:hover { background: #06cf9c; }
.wa-send-btn:disabled { background: #3b4a54; cursor: not-allowed; }

/* Lazy-load button inside bubble */
.wa-load-btn {
    background: #FFF8F0;
    border: 1px solid rgba(var(--primary-rgb), .35);
    border-radius: 8px;
    color: var(--primary-hover);
    padding: 8px 14px;
    font-size: 0.83rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}

.wa-load-btn:hover {
    background: rgba(var(--primary-rgb), .12);
    border-color: rgba(var(--primary-rgb), .5);
}

.wa-load-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Attach / Location panels (inside chat) */
.wa-attach-panel {
    background: #1d2b34;
    border-top: 1px solid rgba(134,150,160,0.1);
    flex-shrink: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 12px 16px;
}

/* Status badge (instance) */
.wa-status-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #8696a0;
}
.wa-status-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8696a0;
}
.wa-status-badge.connected .dot { background: #00a884; }
.wa-status-badge.connected { color: #00a884; }

/* Sticker */
.wa-msg-sticker { max-width: 120px; max-height: 120px; }

/* Responsive */
@media (max-width: 900px) {
    .wa-sidebar { width: 280px; min-width: 280px; }
}
/* Tablet only (768-900px): hide right contact panel — there's no room for
   the 3-column layout. Mobile (<=767px) gets its own fullscreen-overlay
   treatment further below in the MOBILE block. */
@media (min-width: 768px) and (max-width: 900px) {
    .wa-contact-panel { display: none !important; }
}
@media (max-width: 600px) {
    .wa-messages { padding: 8px 16px; }
    .wa-msg { max-width: 85%; }
}

/* =====================================================
   CLIENT PORTAL — SIDEBAR LAYOUT
   ===================================================== */
.cl-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: #0b141a;
}

.cl-sidebar {
    width: 220px;
    min-width: 220px;
    background: #111b21;
    border-right: 1px solid #2a3942;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
}

.cl-sidebar-logo {
    padding: 1.1rem 1rem;
    border-bottom: 1px solid #2a3942;
    white-space: nowrap;
}

.cl-sidebar-nav {
    flex: 1;
    padding: .5rem 0;
    display: flex;
    flex-direction: column;
}

.cl-nav-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem 1.2rem;
    color: #aebac1;
    text-decoration: none;
    font-size: .88rem;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}
.cl-nav-item i { font-size: 1rem; flex-shrink: 0; }
.cl-nav-item:hover { background: rgba(0,168,132,.08); color: #e9edef; }
.cl-nav-item.active {
    background: rgba(0,168,132,.13);
    color: #e9edef;
    border-left-color: #00a884;
}
.cl-nav-sub {
    padding-left: 2.4rem;
    font-size: .82rem;
}
.cl-nav-sub i { font-size: .85rem; }

.cl-sidebar-footer {
    padding: .75rem 0 .5rem;
    border-top: 1px solid #2a3942;
}

.cl-sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 1.2rem .75rem;
}
.cl-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #2a3942;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; color: #aebac1; flex-shrink: 0;
}
.cl-user-info { min-width: 0; }
.cl-user-name  { font-size: .82rem; font-weight: 600; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-user-email { font-size: .72rem; color: #8696a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cl-sidebar-action {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 1.2rem;
    color: #aebac1;
    text-decoration: none;
    font-size: .85rem;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}
.cl-sidebar-action i { font-size: .95rem; flex-shrink: 0; }
.cl-sidebar-action:hover { background: rgba(0,168,132,.08); color: #e9edef; }
.cl-sidebar-action.active { color: #e9edef; border-left-color: #00a884; background: rgba(0,168,132,.1); }
.cl-nav-logout { color: #ef4444 !important; }
.cl-nav-logout:hover { background: rgba(239,68,68,.08) !important; }

/* Main content area */
.cl-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.cl-main-inner {
    padding: 1.5rem;
    flex: 1;
}

/* Wide variant (chat page — no padding, full height) */
.cl-main.cl-main-wide {
    overflow: hidden;
}
/* Override wa-layout height inside cl-main (no top navbar anymore) */
.cl-main-wide .wa-layout {
    height: 100vh;
}

/* WhatsApp message formatting */
.wa-msg-text strong { font-weight: 700; }
.wa-msg-text em { font-style: italic; }
.wa-msg-text del { text-decoration: line-through; }
.wa-msg-text code, .wa-code {
    font-family: 'Courier New', monospace;
    background: rgba(134,150,160,.15);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .88em;
}
.wa-msg-text blockquote, .wa-blockquote {
    border-left: 3px solid #8696a0;
    margin: 4px 0;
    padding: 2px 10px;
    color: #aebac1;
    font-style: italic;
}
.wa-msg-text ol, .wa-msg-text ul {
    margin: 4px 0 4px 1.2rem;
    padding: 0;
}
.wa-msg-text li { margin: 2px 0; }

/* Reaction bubble */
.wa-msg-reaction {
    font-size: 1.1rem;
    line-height: 1;
    margin-top: 3px;
    display: inline-block;
    background: rgba(134,150,160,.12);
    border-radius: 12px;
    padding: 2px 6px;
    cursor: pointer;
}

/* Message action menu */
.wa-msg-actions {
    position: absolute;
    top: 4px; right: 4px;
    display: none;
    gap: 4px;
    z-index: 10;
}
.wa-msg:hover .wa-msg-actions { display: flex; }
.wa-msg-action-btn {
    background: rgba(30,42,50,.9);
    border: none;
    color: #aebac1;
    border-radius: 50%;
    width: 26px; height: 26px;
    font-size: .75rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.wa-msg-action-btn:hover { background: #2a3942; color: #e9edef; }

/* Edit indicator */
.wa-msg-edited {
    font-size: .68rem;
    color: #8696a0;
    margin-left: 4px;
}

/* Emoji picker */
.wa-emoji-picker {
    position: static;
    bottom: 30px; right: 0;
    background: #1d2b34;
    border: 1px solid #2a3942;
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    gap: 4px;
    z-index: 20;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.wa-emoji-picker span {
    font-size: 1.3rem;
    cursor: pointer;
    transition: transform .1s;
    padding: 2px;
    border-radius: 6px;
}
.wa-emoji-picker span:hover { transform: scale(1.3); background: rgba(255,255,255,.08); }

@media (max-width: 768px) {
    .cl-sidebar { width: 60px; min-width: 60px; }
    .cl-sidebar-logo span, .cl-nav-item span, .cl-sidebar-action span,
    .cl-user-info { display: none; }
    .cl-nav-item, .cl-sidebar-action { justify-content: center; padding: .65rem; }
    .cl-nav-item i, .cl-sidebar-action i { font-size: 1.2rem; }
    .cl-user-avatar { margin: 0 auto; }
    .cl-sidebar-user { justify-content: center; padding: .4rem; }
}

.wa-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    padding-bottom: 8px;
}

.wa-filter-btn {
    flex: 0 0 auto;
}

.wa-filters::-webkit-scrollbar {
    height: 6px;
}

.wa-filters::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}

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

/* =============================================
   PHASE 7 — LIGHT THEME OVERRIDES
   ============================================= */

/* DS-04: Cards and surfaces */
.glass-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(42,45,52,0.10) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(42,45,52,0.06);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    border-color: rgba(42,45,52,0.18) !important;
    box-shadow: 0 4px 16px rgba(42,45,52,0.10);
    transform: translateY(-2px);
}

.glass-card .card-header {
    background: rgba(42,45,52,0.03);
    border-bottom: 1px solid rgba(42,45,52,0.08);
    padding: 16px 24px;
    font-weight: 600;
    color: #2A2D34;
}

.glass-card .card-footer {
    background: rgba(42,45,52,0.03);
    border-top: 1px solid rgba(42,45,52,0.08);
    padding: 8px 16px;
}

.stat-card {
    background: #FFFFFF;
    border: 1px solid rgba(42,45,52,0.10);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(42,45,52,0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(42,45,52,0.12);
    border-color: rgba(42,45,52,0.15);
}

.stat-info h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #2A2D34;
    line-height: 1;
}

.stat-info p {
    font-size: 0.8125rem;
    color: #6B7280;
    margin-top: 4px;
}

/* Avatar gradients — replace green endpoint with orange */
.avatar-placeholder,
.avatar-placeholder-sm {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
}

/* Attach panel buttons — light surface */
.attach-type-btn {
    background: rgba(42,45,52,0.04);
    border: 1px solid rgba(42,45,52,0.12);
    color: #2A2D34;
}

.attach-type-btn:hover {
    background: rgba(42,45,52,0.08);
    border-color: var(--primary);
}

/* List group light overrides */
.list-group-item {
    background: transparent;
    border-color: rgba(42,45,52,0.10);
    color: #2A2D34;
}

.list-group-item-action:hover {
    background: rgba(var(--primary-rgb),0.05);
    color: #2A2D34;
}

/* Alerts */
.alert {
    border-radius: 10px;
    font-size: 0.875rem;
}

.alert-success {
    background-color: rgba(93,163,153,0.15);
    color: #3D7C76;
    border-color: rgba(93,163,153,0.30);
}

/* Scrollbar — light theme */
::-webkit-scrollbar-thumb {
    background: rgba(42,45,52,0.18);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(42,45,52,0.30);
}

/* DS-05: Status dots */
.status-dot.status-connected,
.status-connected .status-dot {
    background: #5DA399;
    box-shadow: 0 0 6px rgba(93,163,153,0.5);
}

.status-dot.status-disconnected,
.status-disconnected .status-dot {
    background: #9CA3AF;
    box-shadow: none;
}

.instance-status-dot.status-connected {
    background: #5DA399;
    box-shadow: 0 0 6px rgba(93,163,153,0.5);
}

.instance-status-dot.status-disconnected {
    background: #9CA3AF;
}

/* DS-05: Status badges */
.status-badge.status-connected {
    background: rgba(93,163,153,0.12);
    color: #5DA399;
}

.status-badge.status-disconnected {
    background: rgba(107,114,128,0.10);
    color: #9CA3AF;
}

.status-badge.status-banned {
    background: rgba(239,68,68,0.10);
    color: #EF4444;
}

/* DS-05: Unread badge and sidebar badges */
.badge-unread {
    background: #5DA399;
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
}

/* Client portal layout — light theme */
.cl-layout {
    background: #FFF8F0;
}

.cl-sidebar {
    background: #FFFFFF;
    border-right: 1px solid rgba(42,45,52,0.12);
}

.cl-sidebar-logo {
    border-bottom: 1px solid rgba(42,45,52,0.10);
}

.cl-sidebar-logo a span {
    color: #2A2D34;
}

.cl-nav-item {
    color: #6B7280;
}

.cl-nav-item:hover {
    background: rgba(var(--primary-rgb),0.07);
    color: #2A2D34;
}

.cl-nav-item.active {
    background: rgba(var(--primary-rgb),0.12);
    color: var(--primary);
    border-left-color: var(--primary);
}

.cl-sidebar-footer {
    border-top: 1px solid rgba(42,45,52,0.10);
}

.cl-user-avatar {
    background: rgba(42,45,52,0.08);
    color: #6B7280;
}

.cl-user-name {
    color: #2A2D34;
}

.cl-user-email {
    color: #6B7280;
}

.cl-sidebar-action {
    color: #6B7280;
}

.cl-sidebar-action:hover {
    background: rgba(var(--primary-rgb),0.07);
    color: #2A2D34;
}

.cl-sidebar-action.active {
    color: var(--primary);
    border-left-color: var(--primary);
    background: rgba(var(--primary-rgb),0.10);
}

.cl-nav-logout {
    color: #EF4444 !important;
}

.cl-nav-logout:hover {
    background: rgba(239,68,68,0.08) !important;
}

.cl-main {
    background: #FFF8F0;
}

/* Dropdown — light theme */
.dropdown-menu {
    background: #FFFFFF;
    border: 1px solid rgba(42,45,52,0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(42,45,52,0.12);
}

.dropdown-item {
    color: #2A2D34;
    font-size: 0.875rem;
    padding: 8px 16px;
}

.dropdown-item:hover {
    background: rgba(var(--primary-rgb),0.06);
    color: #2A2D34;
}

.dropdown-divider {
    border-color: rgba(42,45,52,0.10);
}

/* Agent portal — light theme overrides (inline styles in header.php have low specificity) */
.ag-sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid rgba(42,45,52,0.12) !important;
}

.ag-logo {
    border-bottom: 1px solid rgba(42,45,52,0.10) !important;
}

.ag-logo a {
    color: #2A2D34 !important;
}

.ag-nav-item {
    color: #6B7280 !important;
}

.ag-nav-item:hover,
.ag-nav-item.ag-active {
    background: rgba(var(--primary-rgb),0.08) !important;
    color: var(--primary) !important;
}

.ag-main {
    background: #FFF8F0 !important;
}

.ag-footer {
    border-top: 1px solid rgba(42,45,52,0.10) !important;
}

.ag-avatar {
    background: rgba(42,45,52,0.08) !important;
}

.ag-agent-name {
    color: #2A2D34 !important;
}

.ag-badge {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}

.ag-status-online {
    background: #5DA399 !important;
}

.ag-status-offline {
    background: #9CA3AF !important;
}

.ag-status-busy {
    background: #F59E0B !important;
}

/* =============================================
   Phase 8 — LAY-01: Client sidebar precision
   ============================================= */

/* Sidebar logo — uniform padding, icon color correction handled in sidebar.php */
.cl-sidebar-logo {
    padding: 16px;
}

.cl-sidebar-logo a span {
    font-size: 1rem;       /* 16px */
    font-weight: 600;
    color: #2A2D34 !important;
}

/* Nav container */
.cl-sidebar-nav {
    padding: 8px 0;
    overflow-y: auto;
}

/* Nav item — spacing, border-radius, typography, transition */
.cl-nav-item {
    gap: 10px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;   /* 14px */
    font-weight: 400;
    color: #6B7280;
    border-left: 3px solid transparent;
    transition: background 0.2s cubic-bezier(0.4,0,0.2,1),
                color 0.2s cubic-bezier(0.4,0,0.2,1),
                border-color 0.2s cubic-bezier(0.4,0,0.2,1);
    min-height: 44px;
}

/* Nav item icon */
.cl-nav-item i {
    font-size: 1rem;
    flex-shrink: 0;
    color: inherit;
}

/* Nav item hover — no translateY */
.cl-nav-item:hover {
    background: rgba(var(--primary-rgb),0.08);
    color: #2A2D34;
}

/* Nav item active */
.cl-nav-item.active {
    background: rgba(var(--primary-rgb),0.10);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 400;
}

.cl-nav-item.active i {
    color: var(--primary);
}

/* Sidebar footer */
.cl-sidebar-footer {
    padding: 8px 0;
    border-top: 1px solid rgba(42,45,52,0.10);
}

/* Sidebar user area */
.cl-sidebar-user {
    padding: 8px 16px 12px;
}

/* User avatar */
.cl-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(42,45,52,0.08);
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* User name and email */
.cl-user-name {
    font-size: 0.8125rem;  /* 13px */
    font-weight: 600;
    color: #2A2D34;
}

.cl-user-email {
    font-size: 0.8125rem;  /* 13px */
    font-weight: 400;
    color: #6B7280;
}

/* Sidebar actions (Minha Conta, Sair) */
.cl-sidebar-action {
    gap: 10px;
    padding: 8px 16px;
    font-size: 0.875rem;   /* 14px */
    color: #6B7280;
    border-left: 3px solid transparent;
    transition: background 0.2s cubic-bezier(0.4,0,0.2,1),
                color 0.2s cubic-bezier(0.4,0,0.2,1),
                border-color 0.2s cubic-bezier(0.4,0,0.2,1);
    min-height: 44px;
}

.cl-sidebar-action i {
    font-size: 1rem;
    flex-shrink: 0;
    color: inherit;
}

.cl-sidebar-action:hover {
    background: rgba(var(--primary-rgb),0.08);
    color: #2A2D34;
}

.cl-sidebar-action.active {
    background: rgba(var(--primary-rgb),0.10);
    color: var(--primary);
    border-left-color: var(--primary);
}

/* Logout remains red */
.cl-nav-logout {
    color: #EF4444 !important;
}

.cl-nav-logout:hover {
    background: rgba(239,68,68,0.08) !important;
    color: #EF4444 !important;
}

/* Responsive — sidebar collapse at <768px */
@media (max-width: 768px) {
    .cl-sidebar {
        width: 60px;
        min-width: 60px;
    }

    .cl-sidebar-logo span,
    .cl-nav-item span,
    .cl-sidebar-action span,
    .cl-user-info {
        display: none;
    }

    .cl-nav-item,
    .cl-sidebar-action {
        justify-content: center;
        padding: 8px;
        border-left-color: transparent !important;
    }

    .cl-nav-item.active {
        border-left-color: transparent !important;
        border-bottom: 2px solid var(--primary);
    }

    .cl-nav-item i,
    .cl-sidebar-action i {
        font-size: 1.2rem;
    }

    .cl-user-avatar {
        margin: 0 auto;
    }

    .cl-sidebar-user {
        justify-content: center;
        padding: 8px;
    }
}

/* Reduced motion — suppress transitions for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .cl-nav-item,
    .cl-sidebar-action {
        transition: none !important;
    }
}

/* =============================================
   Phase 8 — LAY-02: Agent portal sidebar precision
   ============================================= */

/* Agent nav item — spacing, border-radius, transition (overrides inline style) */
.ag-nav-item {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;  /* 14px */
    font-weight: 400 !important;
    border-left: 3px solid transparent !important;
    transition: background 0.2s cubic-bezier(0.4,0,0.2,1),
                color 0.2s cubic-bezier(0.4,0,0.2,1),
                border-color 0.2s cubic-bezier(0.4,0,0.2,1) !important;
    min-height: 44px !important;
    margin-bottom: 2px !important;
}

/* Agent nav hover — background only, no border-left on hover */
.ag-nav-item:hover {
    background: rgba(var(--primary-rgb),0.08) !important;
    color: #2A2D34 !important;
    border-left-color: transparent !important;
}

/* Agent nav active — orange left border (the critical Phase 8 addition) */
.ag-nav-item.ag-active {
    background: rgba(var(--primary-rgb),0.10) !important;
    color: var(--primary) !important;
    border-left-color: var(--primary) !important;
}

/* Agent sidebar logo icon */
.ag-logo a i {
    color: var(--primary) !important;
}

/* Agent logo link text */
.ag-logo a {
    color: #2A2D34 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Agent identity block */
.ag-agent-name {
    font-size: 0.8125rem !important;  /* 13px */
    font-weight: 600 !important;
    color: #2A2D34 !important;
}

.ag-agent-email {
    font-size: 0.8125rem !important;  /* 13px */
    font-weight: 400 !important;
    color: #6B7280 !important;
}

/* Agent inbox badge — override inline style dimensions */
.ag-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    margin-left: auto !important;
}

/* Agent reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ag-nav-item {
        transition: none !important;
    }
}

/* =============================================
   Phase 8 — LAY-03: Layout containers
   ============================================= */

/* Page title — upgrade from 1.15rem to 20px with proper hierarchy */
.page-title {
    font-size: 1.25rem;   /* 20px */
    font-weight: 600;
    color: #2A2D34;
    margin-bottom: 24px;
    line-height: 1.2;
    margin-top: 0;
}

/* Client main content — confirm 24px padding (1.5rem already set; this makes it explicit) */
.cl-main-inner {
    padding: 24px;
}

/* ============================================================
   Phase 9 — Chat Interface — Light Theme Override
   CHT-01 (bubbles), CHT-02 (sidebar), CHT-03 (input), UX-02 (animation)
   2026-03-18
   ============================================================ */

/* ── Layout font ─────────────────────────────────────────── */
.wa-layout {
    font-family: 'Instrument Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ── CHT-02: Conversation sidebar ────────────────────────── */
.wa-sidebar {
    background: #FFFFFF;
    border-right: 1px solid rgba(42,45,52,0.10);
}

.wa-sidebar-top {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(42,45,52,0.08);
}

.wa-sidebar-top select,
#instanceSelect {
    background: #FFF8F0;
    border: 1px solid rgba(42,45,52,0.15);
    color: #2A2D34;
    border-radius: 8px;
    font-size: 13px;
}

.wa-search-bar {
    background: #FFFFFF;
}

.wa-search-wrap input {
    background: #FFF8F0;
    border: 1px solid rgba(42,45,52,0.12);
    border-radius: 20px;
    color: #2A2D34;
    font-size: 14px;
    padding: 8px 12px 8px 36px;
}
.wa-search-wrap input::placeholder { color: #9CA3AF; }

.wa-search-wrap i,
.wa-search-wrap svg.wa-ico {
    color: #6B7280;
}

/* Filter buttons */
.wa-filter-btn {
    background: #F2EDE6;
    color: #6B7280;
    border-radius: 16px;
    font-size: 13px;
    padding: 4px 12px;
}
.wa-filter-btn.active {
    background: var(--primary);
    color: #FFFFFF;
    font-weight: 600;
}
.wa-filter-btn:hover:not(.active) {
    background: rgba(42,45,52,0.08);
}

/* Chat list scrollbar */
.wa-chat-list::-webkit-scrollbar-thumb {
    background: rgba(42,45,52,0.18);
}
.wa-chat-list::-webkit-scrollbar-thumb:hover {
    background: rgba(42,45,52,0.30);
}

/* Chat item */
.wa-chat-item {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(42,45,52,0.06);
    padding: 8px 16px;
    transition: background 0.12s;
    color: inherit;
}
.wa-chat-item:hover {
    background: rgba(var(--primary-rgb),0.06);
    color: inherit;
}
.wa-chat-item.active {
    background: rgba(var(--primary-rgb),0.10);
    border-left: 4px solid var(--primary);
    padding-left: 12px;
    color: inherit;
}

/* Avatar */
.wa-chat-avatar {
    width: 44px;
    height: 44px;
    background: #5DA399;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

/* Contact name */
.wa-chat-name {
    font-size: 14px;
    font-weight: 600;
    color: #2A2D34;
}

/* Message preview */
.wa-chat-preview {
    font-size: 13px;
    color: #6B7280;
}

/* Timestamp */
.wa-chat-time {
    font-size: 11px;
    color: #6B7280;
}
.wa-chat-item.has-unread .wa-chat-time {
    color: var(--primary);
}

/* Unread badge */
.wa-unread-badge {
    background: var(--primary);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    padding: 4px 8px;
    min-width: 18px;
    text-align: center;
}

/* ── CHT-01: Message area & bubbles ──────────────────────── */
.wa-main {
    background: #FFF8F0;
}

.wa-messages {
    background: #FFF8F0;
}
.wa-messages::-webkit-scrollbar-thumb {
    background: rgba(42,45,52,0.18);
}
.wa-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(42,45,52,0.30);
}

/* Date separator */
.wa-date-sep span {
    background: #F2EDE6;
    color: #6B7280;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 11px;
    box-shadow: none;
}

/* Base bubble */
.wa-msg {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
}

/* Received bubble */
.wa-msg-received {
    background: #FFFFFF;
    color: #2A2D34;
    border: 1px solid rgba(42,45,52,0.10);
    border-radius: 18px 18px 18px 4px;
    border-top-left-radius: 18px;
}
.wa-msg-received::before {
    border-top-color: #FFFFFF;
}

/* Sent bubble */
.wa-msg-sent {
    background: var(--primary);
    color: #FFFFFF;
    border-radius: 18px 18px 4px 18px;
    border-top-right-radius: 18px;
}
/*
.wa-msg-sent::before {
    border-top-color: var(--primary);
}
*/

/* Timestamps */
.wa-msg-time {
    font-size: 11px;
    color: #6B7280;
    text-align: right;
    margin-top: 4px;
}

/* Delivery ticks — on orange bubble */
.wa-msg-status.sent,
.wa-msg-status.delivered {
    color: rgba(255,255,255,0.70);
}
.wa-msg-status.read {
    color: rgba(255,255,255,0.95);
}

/* Group sender name */
.wa-msg-sender {
    color: var(--primary);
}

/* Document card */
.wa-doc-card {
    background: rgba(42,45,52,0.05);
    color: #2A2D34;
    border: 1px solid rgba(42,45,52,0.08);
}
.wa-doc-card:hover {
    background: rgba(42,45,52,0.09);
    color: #2A2D34;
}
.wa-doc-icon { color: #5DA399; }

/* Location card */
.wa-location-card {
    background: rgba(93,163,153,0.10);
    color: #2A2D34;
}
.wa-location-card:hover { color: #2A2D34; }

/* Link preview */
.wa-link-preview {
    background: rgba(42,45,52,0.05);
    border: 1px solid rgba(42,45,52,0.08);
}
.wa-link-preview:hover { background: rgba(42,45,52,0.09); }
.wa-link-preview-domain { color: #6B7280; }
.wa-link-preview-title  { color: #2A2D34; }
.wa-link-preview-desc   { color: #6B7280; }

/* Audio player */
.wa-audio-btn {
    background: rgba(42,45,52,0.08);
    color: #2A2D34;
}
.wa-audio-btn:hover { background: rgba(42,45,52,0.14); }
.wa-audio-fill { background: var(--primary); }
.wa-audio-time { color: #6B7280; }

/* Message action menu */
.wa-msg-action-btn {
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(42,45,52,0.10);
    color: #2A2D34;
    border-radius: 6px;
}
.wa-msg-action-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* Emoji picker — quick reaction row (floating, attached to <body>)
   NOTE: explicitly cancel bottom/right from the legacy rule at line ~2417
   (dark-theme default), otherwise `position: fixed` + inline top/left +
   inherited bottom/right stretches the popup corner-to-corner. */
.wa-emoji-picker {
    position: fixed;
    bottom: auto;
    right: auto;
    width: auto;
    height: auto;
    background: #FFFFFF;
    border: 1px solid rgba(42,45,52,0.12);
    border-radius: 22px;
    box-shadow: 0 8px 28px rgba(15,23,42,0.18);
    padding: 6px 8px;
    display: flex;
    gap: 4px;
    align-items: center;
    z-index: 10000;
    animation: waEmojiFade .12s ease-out;
}
.wa-emoji-picker span {
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .08s, background .1s;
}
.wa-emoji-picker span:hover {
    background: rgba(var(--primary-rgb),0.10);
    transform: scale(1.12);
}
.wa-emoji-picker span.wa-emoji-plus {
    color: #6B7280;
    font-size: 1.15rem;
    background: rgba(42,45,52,0.05);
}
.wa-emoji-picker span.wa-emoji-plus:hover {
    background: rgba(var(--primary-rgb),0.14);
    color: var(--primary);
}
.wa-emoji-picker span.wa-emoji-remove {
    color: #9CA3AF;
    font-size: 1rem;
}

/* External react button — sits next to the bubble (not inside wa-msg-actions)
   so short messages like "BR" don't clip the popup or the trigger. */
.wa-msg-react-btn {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(42,45,52,0.08);
    background: #FFFFFF;
    color: #6B7280;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(15,23,42,0.08);
    transform: translateY(-50%);
    transition: background .12s, color .12s, transform .12s;
    z-index: 6;
}
.wa-msg-react-btn:hover {
    background: rgba(var(--primary-rgb),0.10);
    color: var(--primary);
    transform: translateY(-50%) scale(1.08);
}
.wa-msg-received .wa-msg-react-btn { right: -40px; }
.wa-msg-sent     .wa-msg-react-btn { left:  -40px; }
.wa-msg:hover .wa-msg-react-btn { display: inline-flex; }

/* Invisible hover-extension: covers the gap between the bubble and the react
   button so the mouse never leaves the hover zone while moving onto the btn.
   Without this, `.wa-msg:hover` turns false the moment the cursor enters the
   gap, the button hides, and the user can't click it. */
.wa-msg::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: auto;
}
.wa-msg-received::after { right: -44px; }
.wa-msg-sent::after     { left:  -44px; }
/* Keep the button clickable while the popup is open, even if the cursor left the bubble */
.wa-msg-react-btn.is-active { display: inline-flex; }

/* Chat header (inside show.php iframe) */
.wa-chat-header {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(42,45,52,0.08);
}
.wa-chat-header-avatar {
    background: #5DA399;
    color: #FFFFFF;
}
.wa-chat-header-name {
    color: #2A2D34;
    font-weight: 600;
}
.wa-chat-header-sub { color: #6B7280; }

/* ── CHT-03: Input bar ───────────────────────────────────── */
.wa-input-area {
    background: #FFFFFF;
    border-top: 1px solid rgba(42,45,52,0.10);
}

.wa-input-wrap {
    background: #FFF8F0;
    border: 1px solid rgba(42,45,52,0.12);
    border-radius: 24px;
    min-height: 44px;
    align-items: center;
}

.wa-input-text {
    color: #2A2D34;
    font-size: 14px;
    min-height: 44px;
    padding: 10px 16px 10px 6px;
}

/* ── Emoji picker ─────────────────────────────────────────── */
.wa-emoji-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 4px 0 4px 6px;
    border: none;
    background: transparent;
    color: #6B7280;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.wa-emoji-btn:hover { background: rgba(var(--primary-rgb),0.10); color: var(--primary); }
.wa-emoji-btn.is-open { background: rgba(var(--primary-rgb),0.14); color: var(--primary); }

.wa-input-emoji-picker {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 380px;
    max-width: calc(100vw - 24px);
    height: 420px;
    background: #FFFFFF;
    border: 1px solid rgba(42,45,52,0.10);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15,23,42,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1200;
    animation: waEmojiFade .14s ease-out;
}
@keyframes waEmojiFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wa-emoji-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 0;
    border-bottom: 1px solid rgba(42,45,52,0.06);
    gap: 2px;
}
.wa-emoji-tab {
    flex: 1;
    height: 36px;
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 1.05rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wa-emoji-tab:hover { color: #2A2D34; }
.wa-emoji-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.wa-emoji-search {
    position: relative;
    padding: 10px 12px 6px;
}
.wa-emoji-search i {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-25%);
    color: #9CA3AF;
    font-size: .85rem;
    pointer-events: none;
}
.wa-emoji-search input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid rgba(42,45,52,0.12);
    border-radius: 20px;
    background: #FFF8F0;
    color: #2A2D34;
    font-size: .86rem;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.wa-emoji-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.12);
    background: #FFFFFF;
}

.wa-emoji-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(42,45,52,0.25) transparent;
}
.wa-emoji-content::-webkit-scrollbar { width: 6px; }
.wa-emoji-content::-webkit-scrollbar-thumb { background: rgba(42,45,52,0.25); border-radius: 3px; }

.wa-emoji-section-title {
    font-size: .76rem;
    font-weight: 600;
    color: #6B7280;
    padding: 10px 8px 6px;
    text-transform: none;
}
.wa-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.wa-emoji-item {
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Android Emoji",sans-serif;
    transition: background .1s;
}
.wa-emoji-item:hover { background: rgba(var(--primary-rgb),0.10); }
.wa-emoji-item img.wa-emoji-twemoji {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;
}

.wa-emoji-empty {
    text-align: center;
    color: #9CA3AF;
    font-size: .85rem;
    padding: 40px 16px;
}
.wa-input-text::placeholder { color: #9CA3AF; }

.wa-send-btn {
    background: var(--primary);
    color: #FFFFFF;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.wa-send-btn:hover { background: var(--primary-hover); }
.wa-send-btn:disabled {
    background: rgba(42,45,52,0.12);
    cursor: not-allowed;
}

/* Icon buttons (attach, emoji) */
.wa-icon-btn {
    color: #6B7280;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}
.wa-icon-btn:hover {
    background: rgba(var(--primary-rgb),0.08);
    color: var(--primary);
}

/* Attach panel */
.wa-attach-panel {
    background: #FFFFFF;
    border-top: 1px solid rgba(42,45,52,0.08);
}

/* ── Empty state ─────────────────────────────────────────── */
.wa-empty {
    background: #FFF8F0;
    color: #6B7280;
}
.wa-empty-icon {
    background: rgba(var(--primary-rgb),0.06);
    border: 2px solid rgba(42,45,52,0.10);
    color: var(--primary);
}

/* ── Contact panel ───────────────────────────────────────── */
.wa-contact-panel {
    background: #FFFFFF;
    border-left: 1px solid rgba(42,45,52,0.10);
}
.wa-cp-header {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(42,45,52,0.08);
    color: #2A2D34;
}
.wa-cp-avatar-section {
    background: #FFF8F0;
}
.wa-cp-avatar-placeholder {
    background: #5DA399;
    color: #FFFFFF;
}
.wa-cp-name {
    color: #2A2D34;
    font-weight: 600;
}
.wa-cp-phone { color: #6B7280; }
.wa-cp-section {
    background: #FFFFFF;
    border-top: 1px solid rgba(42,45,52,0.06);
    margin-top: 0;
}
.wa-cp-section-label {
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.wa-cp-section-item {
    color: #2A2D34;
    border-bottom: 1px solid rgba(42,45,52,0.06);
    font-size: 14px;
}
.wa-cp-notes {
    background: #FFF8F0;
    border: 1px solid rgba(42,45,52,0.12);
    color: #2A2D34;
}
.wa-cp-notes:focus {
    outline: none;
    border-color: #5DA399;
}
.wa-cp-body::-webkit-scrollbar-thumb {
    background: rgba(42,45,52,0.18);
}

/* Group panel members */
.wa-gp-avatar {
    background: #5DA399;
    color: #FFFFFF;
}
.wa-gp-name {
    color: #2A2D34;
    font-weight: 500;
}
.wa-gp-phone { color: #6B7280; }
.wa-gp-badge {
    color: #5DA399;
    background: rgba(93,163,153,0.10);
    border: 1px solid rgba(93,163,153,0.20);
}
.wa-gp-member:hover {
    background: rgba(42,45,52,0.03);
}

/* Tags */
.wa-tag {
    background: rgba(93,163,153,0.10);
    border: 1px solid rgba(93,163,153,0.20);
    color: #3D7C76;
}

/* ── UX-02: Message entry animation ──────────────────────── */
@keyframes waFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    .wa-msg {
        animation: waFadeIn 0.15s ease-out;
    }
}

/* ============================================================
   Phase 10 — DSH block (Agent Dashboard light override)
   Defeats inline <style> in app/views/agent/dashboard.php
   ============================================================ */

/* Dashboard container */
.ag-dash-title { color: var(--text) !important; }

/* Stat cards */
.ag-stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
}
.ag-stat-val { color: var(--text) !important; }
.ag-stat-lbl { color: var(--text-muted) !important; }

/* Stat icon color — keep tinted bg, update icon color for green variant */
.ag-stat-icon.green { color: #5DA399 !important; }
/* blue, yellow, purple: keep their existing colors — only bg/icon semantics unchanged */

/* Chart panel */
.ag-chart-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
}
.ag-chart-head { color: var(--text) !important; }

/* Recent table panel */
.ag-recent-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
}
.ag-recent-head { color: var(--text) !important; }

.ag-recent-table th {
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.ag-recent-table td {
  color: var(--text) !important;
  border-bottom: 1px solid rgba(42,45,52,0.06) !important;
}
.ag-recent-table tr:last-child td { border-bottom: none !important; }
.ag-recent-table tr:hover td { background: var(--sidebar-hover) !important; }
.ag-empty-row { color: var(--text-muted) !important; }

/* ============================================================
   Phase 10 (KBN block) saiu em 18/09/2026, com o redesign do Kanban.
   Eram ~50 regras !important cujo unico trabalho era vencer o <style> inline
   antigo de app/views/kanban/index.php. Aquele <style> nao existe mais: o
   quadro vive em public/assets/css/kanban.css, tokenizado e dark-aware, e os
   seletores daqui (todos .kb-*) eram usados so por aquela view.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   Phase 11 — AUTH: Login pages light theme
   Targets: admin login (.login-icon gradient fix already done in Phase 7),
            agent login (#agentLoginWrap / #agentLoginCard — inline style override),
            client login + register (.cl-login-icon — inline style override)
═══════════════════════════════════════════════════════════════ */

/* ── Client login / register icon container ─────────────────── */
.cl-login-icon {
  background: var(--primary) !important;
  box-shadow: 0 8px 24px rgba(var(--primary-rgb),0.25) !important;
}

/* ── Agent login — card ──────────────────────────────────────── */
#agentLoginCard {
  background: var(--surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
}

/* ── Agent login — icon container (inside card) ──────────────── */
#agentLoginCard .text-center > div:first-child {
  background: var(--primary-subtle) !important;
  border-radius: 14px !important;
}
#agentLoginCard .text-center > div:first-child .bi-headset {
  color: var(--primary) !important;
}

/* ── Agent login — headings ──────────────────────────────────── */
#agentLoginCard h5 {
  color: var(--text) !important;
}
#agentLoginCard p {
  color: var(--text-muted) !important;
}

/* ── Agent login — labels ────────────────────────────────────── */
#agentLoginCard label {
  color: var(--text-muted) !important;
}

/* ── Agent login — inputs ────────────────────────────────────── */
#agentLoginCard input[type="email"],
#agentLoginCard input[type="password"] {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
}
#agentLoginCard input[type="email"]:focus,
#agentLoginCard input[type="password"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-subtle) !important;
  outline: none !important;
}

/* ── Agent login — submit button ─────────────────────────────── */
#agentLoginCard button[type="submit"] {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  transition: var(--transition) !important;
}
#agentLoginCard button[type="submit"]:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px) !important;
}

/* ── Agent login — body background ──────────────────────────── */
/* The <body> itself has inline style="background:#0b1320;..." */
/* Target via the unique ID on its child wrapper */
/* We cannot override body inline style without a body class, so instead we
   set the page background via the html element which is not inline-styled */
html:has(#agentLoginWrap) {
  background: var(--body-bg) !important;
}
html:has(#agentLoginWrap) body {
  background: var(--body-bg) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 11 — CB: Chatbot flow list light theme
   Target: app/views/client/chatbot/index.php (inline <style> .cb-* block)
   Strategy: !important overrides — same pattern as Phase 9-02, 10-02
═══════════════════════════════════════════════════════════════ */

.cb-wrap        { background: var(--body-bg) !important; }
.cb-title       { color: var(--text) !important; }
.cb-select      { background: var(--surface-2) !important; border: 1px solid var(--border-color) !important; color: var(--text) !important; }

/* Status banner */
.cb-status-on   { background: rgba(93,163,153,0.12) !important; border: 1px solid rgba(93,163,153,0.25) !important; color: #5DA399 !important; }
.cb-status-off  { background: rgba(240,180,41,0.10) !important; border: 1px solid rgba(240,180,41,0.25) !important; color: #B87D00 !important; }

/* Flow cards */
.cb-card        { background: var(--surface) !important; border: 1px solid var(--border-color) !important; }
.cb-card:hover  { border-color: rgba(42,45,52,0.20) !important; box-shadow: 0 4px 16px rgba(42,45,52,0.10) !important; transform: translateY(-1px); }
.cb-card-name   { color: var(--text) !important; }
.cb-card-desc   { color: var(--text-muted) !important; }

/* Badges */
.cb-badge-active { background: rgba(93,163,153,0.15) !important; color: #5DA399 !important; }
.cb-badge-draft  { background: var(--surface-2) !important; color: var(--text-muted) !important; }

/* Meta tags */
.cb-meta-tag    { background: var(--surface-2) !important; color: var(--text-muted) !important; }

/* Empty state */
.cb-empty       { color: var(--text-muted) !important; }

/* Buttons */
.cb-btn-green             { background: var(--primary) !important; color: #FFFFFF !important; }
.cb-btn-green:hover       { background: var(--primary-hover) !important; color: #FFFFFF !important; transform: translateY(-1px); }
.cb-btn-outline           { border: 1px solid var(--border-color) !important; color: var(--text-muted) !important; background: transparent !important; }
.cb-btn-outline:hover     { border-color: var(--primary) !important; color: var(--primary) !important; transform: translateY(-1px); }
.cb-btn-danger            { border: 1px solid rgba(220,53,69,0.3) !important; color: #DC3545 !important; background: transparent !important; }
.cb-btn-danger:hover      { background: rgba(220,53,69,0.08) !important; }


/* ═══════════════════════════════════════════════════════════════
   Phase 11 — CS: Chatbot settings light theme
   Target: app/views/client/chatbot/settings.php (inline <style> .cs-* block)
═══════════════════════════════════════════════════════════════ */

.cs-card                  { background: var(--surface) !important; border: 1px solid var(--border-color) !important; }
.cs-card-title            { color: var(--text) !important; }
.cs-label                 { color: var(--text-muted) !important; }

/* Inputs / select / textarea */
.cs-input                 { background: var(--surface-2) !important; border: 1px solid var(--border-color) !important; color: var(--text) !important; }
.cs-input:focus           { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-subtle) !important; }

/* Toggle row */
.cs-toggle                { background: var(--surface-2) !important; }
.cs-toggle-label          { color: var(--text) !important; }
.cs-toggle-desc           { color: var(--text-muted) !important; }

/* Checked toggle (Bootstrap form-check-input) */
.form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; }

/* Keyword tags — keep red (human handoff semantic signal) */
.cs-kw-tag                { background: rgba(220,53,69,0.10) !important; color: #DC3545 !important; }

/* Settings heading (h4.text-white.fw-bold — override text-white) */
.cs-wrap h4               { color: var(--text) !important; }

/* Buttons */
.cs-btn-green             { background: var(--primary) !important; color: #FFFFFF !important; }
.cs-btn-green:hover       { background: var(--primary-hover) !important; color: #FFFFFF !important; transform: translateY(-1px); }
.cs-btn-outline           { border: 1px solid var(--border-color) !important; color: var(--text-muted) !important; background: transparent !important; }
.cs-btn-outline:hover     { border-color: var(--primary) !important; color: var(--primary) !important; transform: translateY(-1px); }

/* [removido] Phase 11 FB flow-builder light theme → migrado para public/assets/css/chatbot-builder.css (tokens ui-kit, dark-aware). Etapa 2/4 do redesign. */
/* ═══════════════════════════════════════════════════════════════
   Phase 11 — AG-MGMT: Agents management light theme
   Target: app/views/client/agents/index.php (inline <style> .ag-mgmt-* .ag-btn-* .ag-table-* block)
   Strategy: !important overrides — same pattern as Phase 9-02, 10-02, 11-01/02
═══════════════════════════════════════════════════════════════ */

/* ── Page title ──────────────────────────────────────────────── */
.ag-mgmt-title        { color: var(--text) !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
.ag-btn-green         { background: var(--primary) !important; color: #FFFFFF !important; }
.ag-btn-green:hover   { background: var(--primary-hover) !important; color: #FFFFFF !important; transform: translateY(-1px); }
.ag-btn-outline       { background: transparent !important; border: 1px solid var(--border-color) !important; color: var(--text-muted) !important; }
.ag-btn-outline:hover { border-color: var(--primary) !important; color: var(--primary) !important; transform: translateY(-1px); }
.ag-btn-danger        { background: transparent !important; border: 1px solid rgba(220,53,69,0.3) !important; color: #DC3545 !important; }
.ag-btn-danger:hover  { background: rgba(220,53,69,0.08) !important; }

/* ── Tabs ────────────────────────────────────────────────────── */
.ag-tabs              { background: var(--surface-2) !important; }
.ag-tab               { color: var(--text-muted) !important; }
.ag-tab.active        { background: var(--surface) !important; color: var(--text) !important; }

/* ── Table wrapper ───────────────────────────────────────────── */
.ag-table-wrap        { background: var(--surface) !important; border: 1px solid var(--border-color) !important; }

/* ── Table headers ───────────────────────────────────────────── */
.ag-table th          { color: var(--text-muted) !important; border-bottom: 1px solid var(--border-color) !important; }

/* ── Table cells ─────────────────────────────────────────────── */
.ag-table td          { color: var(--text) !important; border-bottom: 1px solid rgba(42,45,52,0.06) !important; }

/* ── Table row hover ─────────────────────────────────────────── */
.ag-table tr:hover td { background: var(--primary-subtle) !important; }

/* ── Status dots ─────────────────────────────────────────────── */
.ag-online            { background: #5DA399 !important; }
.ag-offline           { background: var(--text-muted) !important; }
.ag-busy              { background: #F0B429 !important; }

/* ── Empty row ───────────────────────────────────────────────── */
.ag-empty-row         { color: var(--text-muted) !important; }

/* ── Portal notice ───────────────────────────────────────────── */
.ag-portal-notice     {
  background: rgba(93,163,153,0.07) !important;
  border: 1px solid rgba(93,163,153,0.15) !important;
  color: var(--text-muted) !important;
}
.ag-portal-notice a   { color: var(--primary) !important; }

/* ═══════════════════════════════════════════════════════════════
   Phase 11 — MODALS: Global modal standardization (FRM-02)
   Applies to: all .modal-content site-wide
   Strategy: Standard specificity overrides — no !important needed
             (Bootstrap modal styles use low specificity)
═══════════════════════════════════════════════════════════════ */

/* ── Modal content box ───────────────────────────────────────── */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(42,45,52,0.15);
}

/* ── Modal header ────────────────────────────────────────────── */
.modal-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-color);
  padding: 16px 20px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* ── Modal title ─────────────────────────────────────────────── */
.modal-title {
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
}

/* ── Modal body ──────────────────────────────────────────────── */
.modal-body {
  padding: 20px;
  color: var(--text);
}

/* ── Modal footer ────────────────────────────────────────────── */
.modal-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border-color);
  padding: 12px 20px;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}

/* ── Backdrop — lighter scrim for light theme ────────────────── */
.modal-backdrop.show {
  opacity: 0.4;
}

/* ── Close button — default works on light, no filter needed ─── */
/* .btn-close filter: none — Bootstrap default is correct for light theme */

/* ── Modal form labels inside modal body ─────────────────────── */
.modal-body .form-label {
  color: var(--text);
}

/* ── Small text / muted inside modal ─────────────────────────── */
.modal-body .text-muted,
.modal-body small {
  color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════
   Phase 12 — Sidebar Premium (2-level)
   ═══════════════════════════════════════════════ */

/* 1. New CSS custom properties */
.cl-layout {
    --rail-width: 64px;
    --sidebar-width-expanded: 280px;
    --sidebar-collapse-duration: 240ms;
    --sidebar-collapse-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Layout update — 3-column flex */
.cl-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--body-bg);
}

/* 3. Icon Rail */
.cl-rail {
    width: var(--rail-width);
    min-width: var(--rail-width);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid rgba(42,45,52,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    padding: 16px 0;
    z-index: 10;
}

.cl-rail-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    overflow-y: auto;
    width: 100%;
    padding: 0 10px;
}

/* 4. Rail Items */
.cl-rail-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}

.cl-rail-item i {
    font-size: 1.15rem;
}

.cl-rail-item:hover {
    background: rgba(var(--primary-rgb),0.08);
    color: var(--text);
    text-decoration: none;
}

.cl-rail-item.active {
    background: rgba(var(--primary-rgb),0.12);
    color: var(--primary);
}

/* 5. Rail Tooltips (CSS-only via data-tooltip attribute) */
.cl-rail-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(42,45,52,0.10);
    box-shadow: 0 4px 16px rgba(42,45,52,0.12);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.cl-rail-item[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* 6. Rail Badge Dots */
.cl-rail-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--surface);
}

/* 7. Rail Footer */
.cl-rail-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border-top: 1px solid rgba(42,45,52,0.10);
    padding-top: 8px;
    margin-top: 8px;
}

.cl-rail-logout {
    color: #DC3545 !important;
}

.cl-rail-logout:hover {
    background: rgba(220,53,69,0.08) !important;
    color: #DC3545 !important;
}

/* 8. Collapse Toggle Button */
.cl-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    margin: 8px 0;
    transition: background 180ms ease, color 180ms ease;
}

.cl-sidebar-toggle:hover {
    background: rgba(42,45,52,0.06);
    color: var(--text);
}

/* 9. Updated .cl-sidebar (280px, flex-shrink, transition-ready) */
.cl-sidebar {
    width: var(--sidebar-width-expanded);
    min-width: var(--sidebar-width-expanded);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid rgba(42,45,52,0.12);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: width var(--sidebar-collapse-duration) var(--sidebar-collapse-easing),
                min-width var(--sidebar-collapse-duration) var(--sidebar-collapse-easing);
    will-change: width;
}

/* 10. Sidebar Logo update */
.cl-sidebar .cl-sidebar-logo {
    padding: 16px;
    border-bottom: 1px solid rgba(42,45,52,0.10);
    flex-shrink: 0;
}

.cl-sidebar .cl-sidebar-logo a span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text) !important;
}

/* 11. Section Titles (.cl-nav-section) */
.cl-nav-section {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 24px 16px 8px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
}

/* 12. Sidebar Nav — custom scrollbar */
.cl-sidebar .cl-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(42,45,52,0.15) transparent;
}

.cl-sidebar .cl-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.cl-sidebar .cl-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.cl-sidebar .cl-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(42,45,52,0.15);
    border-radius: 4px;
}

.cl-sidebar .cl-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(42,45,52,0.25);
}

/* 13. Nav Items — updated to 12px gap, 44px min-height, new colors per spec */
.cl-sidebar .cl-nav-item {
    gap: 12px;
    padding: 8px 16px;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-muted);
    border-left: 3px solid transparent;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    min-height: 44px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.cl-sidebar .cl-nav-item i {
    font-size: 1rem;
    flex-shrink: 0;
    color: inherit;
}

.cl-sidebar .cl-nav-item:hover {
    background: rgba(var(--primary-rgb),0.07);
    color: var(--text);
    text-decoration: none;
}

.cl-sidebar .cl-nav-item.active {
    background: rgba(var(--primary-rgb),0.10);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 400;
}

.cl-sidebar .cl-nav-item.active i {
    color: var(--primary);
}

/* 14. Sidebar Footer — updated with section title support */
.cl-sidebar .cl-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(42,45,52,0.10);
    padding: 0 0 8px;
}

.cl-sidebar .cl-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 12px;
}

.cl-sidebar .cl-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(42,45,52,0.08);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.cl-sidebar .cl-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-sidebar .cl-user-email {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-sidebar .cl-sidebar-action {
    gap: 12px;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--text-muted);
    border-left: 3px solid transparent;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.cl-sidebar .cl-sidebar-action i {
    font-size: 1rem;
    flex-shrink: 0;
    color: inherit;
}

.cl-sidebar .cl-sidebar-action:hover {
    background: rgba(var(--primary-rgb),0.07);
    color: var(--text);
    text-decoration: none;
}

.cl-sidebar .cl-sidebar-action.active {
    background: rgba(var(--primary-rgb),0.10);
    color: var(--primary);
    border-left-color: var(--primary);
}

.cl-sidebar .cl-nav-logout {
    color: #DC3545 !important;
}

.cl-sidebar .cl-nav-logout:hover {
    background: rgba(220,53,69,0.08) !important;
    color: #DC3545 !important;
}

/* 15. Sidebar badges — Phase 12 cascade */
.cl-sidebar #fuSidebarBadge {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    margin-left: 4px !important;
}

.cl-sidebar #inboxSidebarBadge {
    background: #F0B429 !important;
    color: #2A2D34 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    margin-left: 4px !important;
}

/* 16. Focus-visible accessibility states */
.cl-rail-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.cl-sidebar .cl-nav-item:focus-visible,
.cl-sidebar .cl-sidebar-action:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.cl-sidebar-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Phase 12 — Collapse/Expand Animation */
body.sidebar-collapsed .cl-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
}

body.sidebar-collapsed .cl-sidebar .cl-nav-item span,
body.sidebar-collapsed .cl-sidebar .cl-sidebar-action span,
body.sidebar-collapsed .cl-sidebar .cl-sidebar-logo,
body.sidebar-collapsed .cl-sidebar .cl-user-info,
body.sidebar-collapsed .cl-sidebar .cl-nav-section {
    opacity: 0;
    transition: opacity 160ms ease;
}

body:not(.sidebar-collapsed) .cl-sidebar .cl-nav-item span,
body:not(.sidebar-collapsed) .cl-sidebar .cl-sidebar-action span,
body:not(.sidebar-collapsed) .cl-sidebar .cl-sidebar-logo,
body:not(.sidebar-collapsed) .cl-sidebar .cl-user-info,
body:not(.sidebar-collapsed) .cl-sidebar .cl-nav-section {
    opacity: 1;
    transition: opacity 160ms ease 80ms;
}

body.sidebar-collapsed .cl-sidebar-toggle i {
    transform: rotate(180deg);
    transition: transform 240ms var(--sidebar-collapse-easing);
}

.cl-sidebar-toggle i {
    transition: transform 240ms var(--sidebar-collapse-easing);
}

body:not(.sidebar-collapsed) .cl-rail-item[data-tooltip]::after {
    display: none;
}

body.sidebar-collapsed .cl-sidebar-toggle {
    color: var(--primary);
}

/* Phase 12 — Responsive */

/* Tablet: 768px-1023px — sidebar collapsed by default */
@media (min-width: 768px) and (max-width: 1023px) {
    .cl-sidebar {
        width: 0;
        min-width: 0;
        overflow: hidden;
    }

    .cl-sidebar .cl-nav-item span,
    .cl-sidebar .cl-sidebar-action span,
    .cl-sidebar .cl-sidebar-logo,
    .cl-sidebar .cl-user-info,
    .cl-sidebar .cl-nav-section {
        opacity: 0;
    }

    body.sidebar-expanded .cl-sidebar {
        width: var(--sidebar-width-expanded);
        min-width: var(--sidebar-width-expanded);
    }

    body.sidebar-expanded .cl-sidebar .cl-nav-item span,
    body.sidebar-expanded .cl-sidebar .cl-sidebar-action span,
    body.sidebar-expanded .cl-sidebar .cl-sidebar-logo,
    body.sidebar-expanded .cl-sidebar .cl-user-info,
    body.sidebar-expanded .cl-sidebar .cl-nav-section {
        opacity: 1;
    }
}

/* Mobile: <=767px — sidebar always hidden, rail only */
@media (max-width: 767px) {
    .cl-sidebar {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-right: none !important;
    }

    .cl-sidebar-toggle {
        display: none !important;
    }

    .cl-rail {
        width: 56px;
        min-width: 56px;
        padding: 12px 0;
    }

    .cl-rail-nav {
        padding: 0 6px;
    }

    .cl-rail-item {
        width: 40px;
        height: 40px;
    }

    .cl-rail-item[data-tooltip]::after {
        display: none !important;
    }

    .cl-rail-footer {
        padding: 0 6px;
    }
}

/* Phase 12 — Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .cl-sidebar {
        transition: none !important;
    }

    .cl-rail-item,
    .cl-sidebar-toggle,
    .cl-sidebar-toggle i,
    .cl-rail-item[data-tooltip]::after {
        transition: none !important;
    }

    .cl-sidebar .cl-nav-item span,
    .cl-sidebar .cl-sidebar-action span,
    .cl-sidebar .cl-sidebar-logo,
    .cl-sidebar .cl-user-info,
    .cl-sidebar .cl-nav-section {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 12 REVISED — Single Sidebar Toggle (VS Code / Linear style)
   Replaces the two-panel rail+sidebar approach with ONE sidebar
   that switches between compact (72px icons-only) and expanded (280px).
   All rules use !important to override the Phase 12 original block above.
   ═══════════════════════════════════════════════════════════════ */

/* --- Remove old rail element if it somehow persists --- */
.cl-rail { display: none !important; }

/* --- Layout: sidebar is the ONLY left column --- */
.cl-layout {
    --cl-sidebar-compact-width: 72px;
    --cl-sidebar-full-width: 280px;
    --cl-transition-width: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --cl-transition-label: 160ms ease;
    display: flex !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* --- Base sidebar --- */
.cl-sidebar {
    width: var(--cl-sidebar-full-width) !important;
    min-width: var(--cl-sidebar-full-width) !important;
    flex-shrink: 0 !important;
    background: var(--surface) !important;
    border-right: 1px solid rgba(42,45,52,0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
    transition:
        width var(--cl-transition-width),
        min-width var(--cl-transition-width) !important;
    will-change: width !important;
    position: relative !important;
}

/* --- Sidebar header (logo row + toggle button) --- */
.cl-sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px 0 16px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(42,45,52,0.10) !important;
    overflow: hidden !important;
}

/* --- Logo link inside header --- */
.cl-sidebar-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    overflow: hidden !important;
    min-width: 0 !important;
    flex: 1 !important;
    padding: 0 !important;
    border-bottom: none !important;
}

.cl-logo-icon {
    font-size: 1.2rem !important;
    color: var(--primary) !important;
    flex-shrink: 0 !important;
}

.cl-logo-text {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 1 !important;
    transition: opacity var(--cl-transition-label), width var(--cl-transition-label) !important;
}

/* --- Toggle button (chevron on header edge) --- */
.cl-sidebar-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(42,45,52,0.12) !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cl-sidebar-toggle:hover {
    background: rgba(42,45,52,0.06) !important;
    color: var(--text) !important;
    border-color: rgba(42,45,52,0.20) !important;
}

.cl-sidebar-toggle i {
    font-size: 0.875rem !important;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cl-sidebar-toggle:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* --- Nav scrollable area --- */
.cl-sidebar .cl-sidebar-nav {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(42,45,52,0.15) transparent !important;
}

.cl-sidebar .cl-sidebar-nav::-webkit-scrollbar { width: 4px !important; }
.cl-sidebar .cl-sidebar-nav::-webkit-scrollbar-track { background: transparent !important; }
.cl-sidebar .cl-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(42,45,52,0.15) !important; border-radius: 4px !important; }
.cl-sidebar .cl-sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(42,45,52,0.25) !important; }

/* --- Section titles --- */
.cl-sidebar .cl-nav-section {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 12px 16px 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transition: opacity var(--cl-transition-label) !important;
}

/* First section label needs less top breathing room */
.cl-sidebar .cl-sidebar-nav > .cl-nav-section:first-child {
    padding-top: 8px !important;
}

/* --- Nav items (unified — used for both nav and footer actions) --- */
.cl-sidebar .cl-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    border-left: 3px solid transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    position: relative !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease !important;
}

.cl-sidebar .cl-nav-item i {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    color: inherit !important;
    width: 20px !important;
    text-align: center !important;
}

.cl-sidebar .cl-nav-item:hover {
    background: rgba(var(--primary-rgb),0.07) !important;
    color: var(--text) !important;
    text-decoration: none !important;
}

.cl-sidebar .cl-nav-item.active {
    background: rgba(var(--primary-rgb),0.10) !important;
    color: var(--primary) !important;
    border-left-color: var(--primary) !important;
}

.cl-sidebar .cl-nav-item.active i { color: var(--primary) !important; }

.cl-sidebar .cl-nav-item:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: -2px !important;
}

/* --- Nav label (the text part) --- */
.cl-sidebar .cl-nav-label {
    opacity: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
    transition: opacity var(--cl-transition-label) !important;
}

/* --- Logout item --- */
.cl-sidebar .cl-nav-logout {
    color: #DC3545 !important;
}

.cl-sidebar .cl-nav-logout:hover {
    background: rgba(220,53,69,0.08) !important;
    color: #DC3545 !important;
}

/* --- Sidebar footer block --- */
.cl-sidebar .cl-sidebar-footer {
    flex-shrink: 0 !important;
    border-top: 1px solid rgba(42,45,52,0.10) !important;
    padding: 0 0 8px !important;
    overflow: hidden !important;
}

/* --- User info row --- */
.cl-sidebar .cl-sidebar-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    overflow: hidden !important;
}

.cl-sidebar .cl-user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(42,45,52,0.08) !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 0.9rem !important;
}

.cl-sidebar .cl-user-info {
    overflow: hidden !important;
    min-width: 0 !important;
    opacity: 1 !important;
    transition: opacity var(--cl-transition-label) !important;
}

.cl-sidebar .cl-user-name {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cl-sidebar .cl-user-email {
    font-size: 0.6875rem !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --- Badges inside nav labels --- */
.cl-sidebar #fuSidebarBadge {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
}

.cl-sidebar #inboxSidebarBadge {
    background: #F0B429 !important;
    color: #2A2D34 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
}

/* ═══ COMPACT STATE — .cl-sidebar.collapsed ═══ */

/* Sidebar shrinks to icon-only strip */
.cl-sidebar.collapsed {
    width: var(--cl-sidebar-compact-width) !important;
    min-width: var(--cl-sidebar-compact-width) !important;
}

/* Header: hide logo text in compact, center avatar */
.cl-sidebar.collapsed .cl-logo-text {
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Toggle chevron rotates 180deg when collapsed */
.cl-sidebar.collapsed .cl-sidebar-toggle i {
    transform: rotate(180deg) !important;
}

/* Toggle moves to center in compact header */
.cl-sidebar.collapsed .cl-sidebar-header {
    justify-content: center !important;
    padding: 0 !important;
}

/* Hide toggle's left flex space when collapsed */
.cl-sidebar.collapsed .cl-sidebar-logo {
    display: none !important;
}

/* Toggle button: show only, centered */
.cl-sidebar.collapsed .cl-sidebar-toggle {
    margin: 0 auto !important;
}

/* Section titles fade out */
.cl-sidebar.collapsed .cl-nav-section {
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Nav items: center icon, hide label */
.cl-sidebar.collapsed .cl-nav-item {
    justify-content: center !important;
    padding: 0 !important;
    gap: 0 !important;
    border-left-color: transparent !important;
}

/* Active item keeps the left border indicator — use a box-shadow trick since padding:0 */
.cl-sidebar.collapsed .cl-nav-item.active {
    box-shadow: inset 3px 0 0 var(--primary) !important;
}

/* Labels fade and collapse in compact mode */
.cl-sidebar.collapsed .cl-nav-label {
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    flex: 0 !important;
}

/* User info row: avatar centered, hide text */
.cl-sidebar.collapsed .cl-sidebar-user {
    justify-content: center !important;
    padding: 10px 0 !important;
    gap: 0 !important;
}

.cl-sidebar.collapsed .cl-user-info {
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* ═══ TOOLTIPS — handled by JS in app.js (see bottom of file) ═══ */

/* ═══ RESPONSIVE ═══ */

/* Tablet (768–1023px): start compact */
@media (min-width: 768px) and (max-width: 1023px) {
    .cl-sidebar:not(.expanded) {
        width: var(--cl-sidebar-compact-width) !important;
        min-width: var(--cl-sidebar-compact-width) !important;
    }
}

/* Mobile (<768px): compact always, no toggle visible */
@media (max-width: 767px) {
    .cl-sidebar {
        width: var(--cl-sidebar-compact-width) !important;
        min-width: var(--cl-sidebar-compact-width) !important;
    }

    .cl-sidebar-toggle {
        display: none !important;
    }

    .cl-sidebar .cl-logo-text,
    .cl-sidebar .cl-nav-label,
    .cl-sidebar .cl-user-info,
    .cl-sidebar .cl-nav-section {
        display: none !important;
    }

    .cl-sidebar .cl-nav-item {
        justify-content: center !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .cl-sidebar .cl-sidebar-user {
        justify-content: center !important;
        padding: 10px 0 !important;
        gap: 0 !important;
    }

    .cl-sidebar-header {
        justify-content: center !important;
        padding: 0 !important;
    }

    .cl-sidebar-logo {
        display: none !important;
    }

    .cl-sidebar .cl-nav-item[data-tooltip]::after {
        display: none !important;
    }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
    .cl-sidebar,
    .cl-sidebar-toggle i,
    .cl-sidebar .cl-nav-label,
    .cl-sidebar .cl-logo-text,
    .cl-sidebar .cl-user-info,
    .cl-sidebar .cl-nav-section,
    .cl-sidebar .cl-nav-item[data-tooltip]::after {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 13 — Foundation Components
   Upgrades: .glass-card, .stat-card, .info-card, .table,
             .form-control, .form-select, .btn-* variants
   Strategy: !important where needed to override Phase 7 rules.
   ═══════════════════════════════════════════════════════════════ */

/* --- CMP-01: Cards --- */

/* glass-card upgrade — border-radius 12px → 14px (Phase 7 used !important) */
.glass-card {
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(42,45,52,0.06), 0 0 0 1px rgba(42,45,52,0.04);
    transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1),
                transform 200ms cubic-bezier(0.4,0,0.2,1),
                border-color 200ms ease;
}

.glass-card:hover {
    box-shadow: 0 8px 24px rgba(42,45,52,0.10), 0 2px 8px rgba(42,45,52,0.06);
    transform: translateY(-2px);
    border-color: rgba(42,45,52,0.16) !important;
}

/* card-header: upgrade background transparent (Phase 7 had rgba(42,45,52,0.03)) */
.glass-card .card-header {
    padding: 16px 24px;
    font-weight: 600;
    font-size: 1rem;
    color: #2A2D34;
    border-bottom: 1px solid rgba(42,45,52,0.08);
    background: transparent !important;
}

.glass-card .card-body {
    padding: 20px 24px;
}

/* card-footer: upgrade background transparent (Phase 7 had rgba(42,45,52,0.03)) */
.glass-card .card-footer {
    padding: 12px 24px;
    background: transparent !important;
    border-top: 1px solid rgba(42,45,52,0.08);
}

/* stat-card upgrade */
.stat-card {
    border: 1px solid rgba(42,45,52,0.08);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(42,45,52,0.06);
    transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1),
                transform 200ms cubic-bezier(0.4,0,0.2,1),
                border-color 200ms ease;
}

/* stat-card hover: translateY(-2px) reduced from Phase 7's -3px — more refined */
.stat-card:hover {
    box-shadow: 0 6px 20px rgba(42,45,52,0.10);
    transform: translateY(-2px);
}

/* stat-icon: 48px × 48px, border-radius 12px (tighter than current 14px) */
.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.stat-info h3 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.0;
    color: #2A2D34;
}

/* stat-info p: upgrade from Phase 7's 0.8125rem to 0.875rem per typography contract */
.stat-info p {
    font-size: 0.875rem;
    font-weight: 400;
    color: #6B7280;
    margin-top: 4px;
}

/* info-card — new lightweight static card variant */
.info-card {
    background: rgba(42,45,52,0.02);
    border: 1px solid rgba(42,45,52,0.08);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 200ms ease;
}

/* info-card: no transform — static informational card */
.info-card:hover {
    border-color: rgba(42,45,52,0.14);
}

/* Reduced motion for cards */
@media (prefers-reduced-motion: reduce) {
    .glass-card, .stat-card { transition: none !important; }
    .glass-card:hover, .stat-card:hover { transform: none !important; }
}

/* --- CMP-02: Tables + Badges --- */

/* Table thead — 12px uppercase, 0.06em letter-spacing */
.glass-card .table thead th {
    background: transparent;
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(42,45,52,0.08);
    white-space: nowrap;
}

/* Table tbody */
.glass-card .table tbody td {
    padding: 12px 16px;
    font-size: 0.875rem;
    color: #2A2D34;
    border-bottom: 1px solid rgba(42,45,52,0.06);
    vertical-align: middle;
}

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

/* Warm orange hover tint for table rows */
.glass-card .table-hover tbody tr:hover td {
    background: rgba(var(--primary-rgb),0.04);
}

.glass-card .table-hover tbody tr {
    transition: background 150ms ease;
}

/* Table action buttons */
.glass-card .table .btn-sm {
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    line-height: 32px;
}

/* Icon-only button variant */
.glass-card .table .btn-sm.btn-icon {
    width: 32px;
    padding: 0;
    text-align: center;
}

/* Badge overrides — light bg-opacity approach for light theme */
.badge {
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.bg-success {
    background: rgba(93,163,153,0.15) !important;
    color: #5DA399 !important;
}

.badge.bg-danger {
    background: rgba(220,53,69,0.12) !important;
    color: #DC3545 !important;
}

.badge.bg-warning {
    background: rgba(240,180,41,0.15) !important;
    color: #9A7200 !important;
}

.badge.bg-info {
    background: rgba(14,165,233,0.12) !important;
    color: #0284C7 !important;
}

.badge.bg-secondary {
    background: rgba(42,45,52,0.08) !important;
    color: #6B7280 !important;
}

.badge.bg-primary {
    background: rgba(var(--primary-rgb),0.12) !important;
    color: var(--primary-hover) !important;
}

/* Override agents/index.php inline dark theme to light */
.ag-mgmt-wrap { color: #2A2D34 !important; }
.ag-mgmt-title { color: #2A2D34 !important; }
.ag-table-wrap { background: #FFFFFF !important; border-color: rgba(42,45,52,0.10) !important; border-radius: 14px !important; }
.ag-table th { color: #6B7280 !important; border-bottom-color: rgba(42,45,52,0.08) !important; }
.ag-table td { color: #2A2D34 !important; border-bottom-color: rgba(42,45,52,0.06) !important; }
.ag-table tr:hover td { background: rgba(var(--primary-rgb),0.04) !important; }
.ag-tabs { background: rgba(42,45,52,0.04) !important; }
.ag-tab { color: #6B7280 !important; }
.ag-tab.active { background: #FFFFFF !important; color: #2A2D34 !important; box-shadow: 0 1px 3px rgba(42,45,52,0.08) !important; }
.ag-btn-green { background: var(--primary) !important; color: #FFFFFF !important; }
.ag-btn-green:hover { background: var(--primary-hover) !important; }
.ag-btn-outline { border-color: rgba(42,45,52,0.18) !important; color: #6B7280 !important; }
.ag-btn-outline:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
.ag-btn-danger { border-color: rgba(220,53,69,0.3) !important; color: #DC3545 !important; }
.ag-portal-notice { background: rgba(var(--primary-rgb),0.05) !important; border-color: rgba(var(--primary-rgb),0.15) !important; color: #6B7280 !important; }
.ag-portal-notice a { color: var(--primary) !important; }
.ag-empty-row { color: #6B7280 !important; }

/* Override agent page modal dark backgrounds to light theme */
#addAgentModal .modal-content,
#editAgentModal .modal-content,
#addGroupModal .modal-content,
#editGroupModal .modal-content { background: #FFFFFF !important; border-color: rgba(42,45,52,0.10) !important; }
#addAgentModal .modal-title,
#editAgentModal .modal-title,
#addGroupModal .modal-title,
#editGroupModal .modal-title { color: #2A2D34 !important; }
#addAgentModal .form-control,
#editAgentModal .form-control,
#addGroupModal .form-control,
#editGroupModal .form-control,
#addGroupModal .form-select,
#editGroupModal .form-select { background: #FFFFFF !important; border-color: rgba(42,45,52,0.18) !important; color: #2A2D34 !important; }
#addAgentModal .form-label,
#editAgentModal .form-label,
#addGroupModal .form-label,
#editGroupModal .form-label { color: #2A2D34 !important; font-size: 0.875rem !important; }
#addAgentModal .form-check-label,
#editAgentModal .form-check-label,
#addGroupModal .form-check-label,
#editGroupModal .form-check-label { color: #2A2D34 !important; }

/* --- CMP-03: Forms --- */

/* form-control and form-select base */
.form-control,
.form-select {
    background: #FFFFFF;
    border: 1px solid rgba(42,45,52,0.18);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: #2A2D34;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Orange focus ring — Phase 13 premium standard */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.15);
    outline: none;
}

/* Placeholder */
.form-control::placeholder {
    color: #9CA3AF;
}

/* Disabled / readonly states */
.form-control[disabled],
.form-control[readonly],
.form-select[disabled] {
    background: rgba(42,45,52,0.04);
    color: #9CA3AF;
    cursor: not-allowed;
}

/* form-label */
.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2A2D34;
    margin-bottom: 8px;
    display: block;
}

/* form-check — orange checkboxes/radios */
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.15);
    border-color: var(--primary);
}

.form-check-label {
    font-size: 0.875rem;
    color: #2A2D34;
}

/* Validation states */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #DC3545;
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220,53,69,0.15);
}

.invalid-feedback {
    font-size: 0.75rem;
    color: #DC3545;
    margin-top: 4px;
}

/* --- CMP-04: Buttons --- */

/* Shared transition and base for all buttons */
.btn {
    transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* btn-primary */
.btn-primary {
    background: var(--primary);
    color: #FFFFFF;
    border: none;
    padding: 8px 20px;
    box-shadow: 0 1px 3px rgba(var(--primary-rgb),0.20);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb),0.30);
    color: #FFFFFF;
}

/* Press state — 1px depress micro-interaction (overrides earlier translateY(0) rule) */
.btn-primary:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 3px rgba(var(--primary-rgb),0.15) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* btn-secondary (teal) */
.btn-secondary {
    background: #5DA399;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: #4C8E85;
    box-shadow: 0 4px 12px rgba(93,163,153,0.30);
    color: #FFFFFF;
}

.btn-secondary:active {
    transform: translateY(1px);
}

/* btn-outline-secondary */
.btn-outline-secondary {
    background: transparent;
    border: 1px solid rgba(42,45,52,0.18);
    color: #6B7280;
}

.btn-outline-secondary:hover {
    border-color: rgba(42,45,52,0.30);
    color: #2A2D34;
    background: rgba(42,45,52,0.04);
}

.btn-outline-secondary:active {
    transform: translateY(1px);
    background: rgba(42,45,52,0.08);
}

/* btn-outline-light — card header actions (e.g. "Gerenciar") */
.btn-outline-light {
    background: transparent;
    border: 1px solid rgba(42,45,52,0.14);
    color: #6B7280;
}

.btn-outline-light:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb),0.04);
}

.btn-outline-light:active {
    transform: translateY(1px);
}

/* btn-danger */
.btn-danger {
    background: #DC3545;
    color: #FFFFFF;
    border: none;
}

.btn-danger:hover {
    background: #B02A37;
    box-shadow: 0 4px 12px rgba(220,53,69,0.25);
    color: #FFFFFF;
}

.btn-danger:active {
    transform: translateY(1px);
}

/* Button sizes */
.btn-sm {
    padding: 8px 12px;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 12px 24px;
}

/* Focus-visible — 2px orange outline for keyboard navigation */
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Reduced motion — disable all transforms and transitions for accessibility */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control,
    .form-select,
    .form-check-input {
        transition: none !important;
    }
    .btn:active {
        transform: none !important;
    }
}

/* ===================================================================
   Phase 14 — Dashboard + Devices + Plans
   Page-specific overrides. Foundation: Phase 13 components.
   Strategy: !important only where needed to beat inline styles.
   =================================================================== */

/* --- PGS-01: Dashboard Page Overrides --- */

/* Stat-card icon background tint overrides — palette-aligned */
.stat-card .stat-icon.bg-primary-subtle {
    background: rgba(var(--primary-rgb),0.10) !important;
}
.stat-card .stat-icon.bg-success-subtle {
    background: rgba(93,163,153,0.12) !important;
}
.stat-card .stat-icon.bg-warning-subtle {
    background: rgba(240,180,41,0.12) !important;
}
.stat-card .stat-icon.bg-secondary-subtle {
    background: rgba(107,114,128,0.10) !important;
}

/* glass-card list-group-item — clean padding, subtle divider, transparent bg */
.glass-card .list-group-item {
    padding: 12px 24px;
    border-bottom: 1px solid rgba(42,45,52,0.06);
    border-left: none;
    border-right: none;
    border-top: none;
    background: transparent;
    transition: background 150ms ease;
}
.glass-card .list-group-item:last-child {
    border-bottom: none;
}
.glass-card .list-group-item:hover {
    background: rgba(var(--primary-rgb),0.03);
}

/* Alert overrides — border-radius 12px + left accent border */
.alert {
    border-radius: 12px;
    border: none;
    border-left: 3px solid currentColor;
}
.alert.alert-warning {
    border-left-color: #F0B429;
    background: rgba(240,180,41,0.08);
}
.alert.alert-info {
    border-left-color: #0284C7;
    background: rgba(14,165,233,0.08);
}
.alert.alert-danger {
    border-left-color: #DC3545;
    background: rgba(220,53,69,0.08);
}
.alert.alert-success {
    border-left-color: #5DA399;
    background: rgba(93,163,153,0.08);
}

/* --- PGS-02: Devices Page Overrides --- */

/* Progress bar — thin 8px Stripe-style */
.progress {
    height: 8px !important;
    border-radius: 4px;
    background: rgba(42,45,52,0.08);
    overflow: hidden;
}
.progress-bar {
    border-radius: 4px;
    transition: width 600ms cubic-bezier(0.4,0,0.2,1);
}
/* Progress color states — palette-aligned */
.progress-bar.bg-success {
    background: #5DA399 !important;
}
.progress-bar.bg-warning {
    background: #F0B429 !important;
}
.progress-bar.bg-danger {
    background: #DC3545 !important;
}

/* Device list items — 16px 24px padding, transparent bg */
.glass-card .list-group-item[data-instance-id] {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(42,45,52,0.06);
    background: transparent;
}

/* Device avatar circles — palette-aligned status colors */
.glass-card .list-group-item .bg-success.bg-opacity-25 {
    background: rgba(93,163,153,0.15) !important;
}
.glass-card .list-group-item .bg-warning.bg-opacity-25 {
    background: rgba(240,180,41,0.15) !important;
}
.glass-card .list-group-item .bg-secondary.bg-opacity-25 {
    background: rgba(107,114,128,0.10) !important;
}

/* Device action buttons — btn-success to teal palette */
.glass-card .list-group-item .btn-success,
.glass-card .btn-success {
    background: #5DA399 !important;
    border: none !important;
    color: #FFFFFF !important;
}
.glass-card .list-group-item .btn-success:hover,
.glass-card .btn-success:hover {
    background: #4C8E85 !important;
}

/* Device disconnect — btn-outline-warning palette-aligned */
.glass-card .list-group-item .btn-outline-warning {
    border-color: rgba(240,180,41,0.40) !important;
    color: #9A7200 !important;
    background: transparent;
}
.glass-card .list-group-item .btn-outline-warning:hover {
    background: rgba(240,180,41,0.08) !important;
}

/* Action button sizing inside list items — match table btn-sm from Phase 13 */
.glass-card .list-group-item .btn-sm {
    height: 32px;
    border-radius: 8px;
}

/* --- PGS-03: Plans / Pricing Page Overrides --- */

/* Pricing card base — centered text, custom padding */
.glass-card.h-100 .card-body {
    text-align: center;
    padding: 28px 24px;
}

/* Current plan card — orange border + elevated shadow */
.glass-card.h-100.border.border-primary {
    border: 2px solid var(--primary) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb),0.12), 0 0 0 1px rgba(var(--primary-rgb),0.08);
}
.glass-card.h-100.border.border-primary .card-header {
    background: rgba(var(--primary-rgb),0.08) !important;
    border-bottom: 1px solid rgba(var(--primary-rgb),0.15) !important;
}

/* Upgrade card — teal border + teal header (beats inline style="border-color:rgba(0,168,132,.4)!important") */
.glass-card.h-100[style*="border-color"] {
    border: 2px solid rgba(93,163,153,0.50) !important;
}
.glass-card.h-100[style*="border-color"] > .card-header {
    background: rgba(93,163,153,0.08) !important;
    border-bottom: 1px solid rgba(93,163,153,0.15) !important;
}
.glass-card.h-100[style*="border-color"] > .card-header small {
    color: #5DA399 !important;
}

/* Downgrade card — muted header */
.glass-card.h-100 > .card-header[style*="background:rgba(107"] {
    background: rgba(42,45,52,0.04) !important;
    border-bottom: 1px solid rgba(42,45,52,0.08) !important;
}

/* Current plan header override (beats inline style="background:rgba(37,211,102,.15)") */
.glass-card.h-100.border.border-primary > .card-header[style] {
    background: rgba(var(--primary-rgb),0.08) !important;
    border-bottom: 1px solid rgba(var(--primary-rgb),0.15) !important;
    border-color: rgba(var(--primary-rgb),0.15) !important;
}
.glass-card.h-100.border.border-primary > .card-header .fw-bold {
    color: var(--primary) !important;
}

/* Disable hover-lift on current and upgrade cards (already elevated) */
.glass-card.h-100.border.border-primary:hover,
.glass-card.h-100[style*="border-color"]:hover {
    transform: none;
}

/* Pricing display — plan price in primary orange */
.glass-card.h-100 .fs-3.fw-bold {
    color: var(--primary);
}

/* Device limit row — icon in teal */
.glass-card.h-100 .bi-phone {
    color: #5DA399 !important;
}

/* Upgrade difference alert — teal tint */
.glass-card.h-100 .alert[style*="background:rgba(0,168,132"] {
    background: rgba(93,163,153,0.08) !important;
    border: 1px solid rgba(93,163,153,0.20) !important;
    border-radius: 10px;
    border-left-width: 1px;
}
.glass-card.h-100 .alert[style*="background:rgba(0,168,132"] .text-success {
    color: #5DA399 !important;
}

/* Downgrade info alert — muted tint */
.glass-card.h-100 .alert[style*="background:rgba(107"] {
    background: rgba(42,45,52,0.04) !important;
    border: 1px solid rgba(42,45,52,0.10) !important;
    border-radius: 10px;
    border-left-width: 1px;
}

/* Upgrade CTA button — solid teal (beats inline style="background:#00a884") */
.glass-card.h-100 .btn[style*="background:#00a884"],
.glass-card.h-100 .btn.btn-lg[style*="background:#00a884"] {
    background: #5DA399 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px;
}
.glass-card.h-100 .btn[style*="background:#00a884"]:hover,
.glass-card.h-100 .btn.btn-lg[style*="background:#00a884"]:hover {
    background: #4C8E85 !important;
}

/* btn-outline-primary — orange palette */
.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: transparent;
}
.btn-outline-primary:hover {
    background: rgba(var(--primary-rgb),0.08) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-outline-primary:active {
    transform: translateY(1px);
}

/* btn-outline-success — teal palette */
.btn-outline-success {
    border-color: #5DA399 !important;
    color: #5DA399 !important;
    background: transparent;
}
.btn-outline-success:hover {
    background: rgba(93,163,153,0.08) !important;
    color: #5DA399 !important;
    border-color: #5DA399 !important;
}
.btn-outline-success:active {
    transform: translateY(1px);
}

/* ═══ Phase 14 REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none !important;
    }
    .glass-card .list-group-item {
        transition: none !important;
    }
}

/* ===================================================================
   Phase 14 VISUAL POLISH — Premium Dashboard & Global Overhaul
   Date: 2026-03-18
   Fixes: stat-card vertical layout, glass-card btn-outline-light,
          list-group custom styling, empty states, modals, dropdowns,
          global card consistency, scrollbar, typography hierarchy.
   Strategy: append-only, !important beats Phase 7-14 cascade.
   =================================================================== */

/* STAT CARD: VERTICAL LAYOUT
   Flip from horizontal (icon left, info right) to vertical column.
   Icon top -> value (h3) -> label (p) = SaaS premium reference layout. */
.stat-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 24px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(42,45,52,0.07) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(42,45,52,0.04), 0 2px 12px rgba(42,45,52,0.04) !important;
    min-height: 140px;
}

/* Icon: compact 40px soft square at top */
.stat-card .stat-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* stat-info: full-width stacked */
.stat-card .stat-info {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Value: maximum visual emphasis */
.stat-card .stat-info h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #2A2D34 !important;
    line-height: 1.2 !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.01em !important;
}

/* Label: soft, small, muted */
.stat-card .stat-info p {
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;
    margin: 0 !important;
    letter-spacing: 0.005em !important;
}

/* Hover: crisp lift, warmer shadow */
.stat-card:hover {
    box-shadow: 0 4px 20px rgba(42,45,52,0.08), 0 1px 3px rgba(42,45,52,0.04) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(42,45,52,0.10) !important;
}

/* GLASS-CARD: REFINED BASE */
.glass-card {
    border-radius: 16px !important;
    border: 1px solid rgba(42,45,52,0.07) !important;
    box-shadow: 0 1px 3px rgba(42,45,52,0.04), 0 2px 12px rgba(42,45,52,0.04) !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
}

.glass-card:hover {
    box-shadow: 0 4px 20px rgba(42,45,52,0.08) !important;
}

/* card-header: white bg, stronger title, refined padding */
.glass-card .card-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(42,45,52,0.07) !important;
    padding: 18px 24px !important;
}

.glass-card .card-header h5,
.glass-card .card-header h4 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #2A2D34 !important;
    letter-spacing: -0.01em !important;
}

.glass-card .card-header h5 .bi,
.glass-card .card-header h4 .bi {
    color: rgba(42,45,52,0.35) !important;
    font-size: 0.9375rem !important;
}

/* FIX: btn-outline-light invisible on white card-header background */
.glass-card .card-header .btn-outline-light,
.card-header .btn-outline-light {
    border: 1px solid rgba(42,45,52,0.15) !important;
    color: #6B7280 !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    padding: 5px 14px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.glass-card .card-header .btn-outline-light:hover,
.card-header .btn-outline-light:hover {
    background: rgba(42,45,52,0.05) !important;
    border-color: rgba(42,45,52,0.22) !important;
    color: #2A2D34 !important;
}

/* Small primary btn in card-header (Renovar) */
.glass-card .card-header .btn-sm.btn-primary {
    border-radius: 8px !important;
    padding: 5px 14px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* LIST-GROUP ITEMS: REMOVE BOOTSTRAP LOOK */
.glass-card .list-group {
    border: none !important;
    border-radius: 0 !important;
}

.glass-card .list-group-item {
    border: none !important;
    border-bottom: 1px solid rgba(42,45,52,0.06) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    padding: 16px 24px !important;
    background: transparent !important;
    transition: background 130ms ease !important;
}

.glass-card .list-group-item:last-child {
    border-bottom: none !important;
}

.glass-card .list-group-item:hover {
    background: rgba(var(--primary-rgb),0.025) !important;
}

/* Device name: prominent */
.glass-card .list-group-item strong {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #2A2D34 !important;
    display: block !important;
    margin-bottom: 2px !important;
}

/* Device system ID: discrete */
.glass-card .list-group-item small.text-muted code {
    font-size: 0.75rem !important;
    color: #B0B7C3 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Date (right side): very subtle */
.glass-card .list-group-item > small.text-muted {
    font-size: 0.75rem !important;
    color: #C4C9D4 !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
}

/* Device icon prefix */
.glass-card .list-group-item .bi-device-hdd.text-primary {
    color: rgba(var(--primary-rgb),0.45) !important;
    font-size: 0.9rem !important;
}

/* EMPTY STATES */
.glass-card .card-body .text-center.py-4 {
    padding: 40px 32px !important;
}

.glass-card .card-body .text-center .bi.fs-2 {
    font-size: 2.25rem !important;
    color: rgba(42,45,52,0.15) !important;
    display: block !important;
    margin-bottom: 12px !important;
}

.glass-card .card-body .text-center.text-muted {
    font-size: 0.875rem !important;
    color: #B0B7C3 !important;
    line-height: 1.7 !important;
}

.glass-card .card-body .text-center a {
    color: var(--primary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.glass-card .card-body .text-center a:hover {
    text-decoration: underline !important;
}

/* DASHBOARD PAGE HEADER */
.d-flex > h2.mb-0 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #2A2D34 !important;
    letter-spacing: -0.02em !important;
}

/* Upgrade button: rounded, shadow, premium */
.d-flex.justify-content-between > a.btn.btn-primary {
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 1px 4px rgba(var(--primary-rgb),0.20) !important;
    padding: 8px 18px !important;
}

/* GLOBAL: MODAL POLISH */
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 8px 40px rgba(42,45,52,0.14), 0 2px 8px rgba(42,45,52,0.06) !important;
}

.modal-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid rgba(42,45,52,0.07) !important;
    background: #FFFFFF !important;
}

.modal-header .modal-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #2A2D34 !important;
    letter-spacing: -0.01em !important;
}

.modal-body {
    padding: 20px 24px !important;
}

.modal-footer {
    padding: 16px 24px !important;
    border-top: 1px solid rgba(42,45,52,0.07) !important;
    gap: 8px !important;
    background: #FFFFFF !important;
}

.modal-backdrop.show {
    opacity: 0.45 !important;
    background: #2A2D34 !important;
}

/* GLOBAL: DROPDOWN POLISH */
.dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid rgba(42,45,52,0.08) !important;
    box-shadow: 0 4px 24px rgba(42,45,52,0.10) !important;
    padding: 6px !important;
}

.dropdown-item {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    color: #2A2D34 !important;
    transition: background 130ms ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--primary-rgb),0.06) !important;
    color: var(--primary) !important;
}

.dropdown-divider {
    margin: 4px 0 !important;
    border-color: rgba(42,45,52,0.07) !important;
}

/* GLOBAL: ALL NON-SPECIAL CARDS */
.card:not(.stat-card):not(.glass-card):not(.info-card) {
    border-radius: 14px !important;
    border: 1px solid rgba(42,45,52,0.07) !important;
    box-shadow: 0 1px 3px rgba(42,45,52,0.04) !important;
}

/* GLOBAL: SCROLLBAR REFINEMENT */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(42,45,52,0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(42,45,52,0.25);
}

/* GLOBAL: LETTER-SPACING ON HEADINGS */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

/* REDUCED MOTION (Phase 14 POLISH) */
@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .glass-card {
        transition: none !important;
    }
    .stat-card:hover,
    .glass-card:hover {
        transform: none !important;
    }
}
/* ── Dashboard stat-card refinements (4-per-row compact) ── */
/* stat-total: secondary value appended to h3 (e.g., "/ 5" or "online") */
.stat-card .stat-info h3 .stat-total {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: #B0B7C3 !important;
    letter-spacing: 0 !important;
}
.stat-card .stat-info h3 .stat-online {
    font-size: 0.75rem !important;
    color: #5DA399 !important;
    font-weight: 500 !important;
}
/* Compact padding when 4 cards per row fit smaller screens */
@media (max-width: 575px) {
    .stat-card {
        padding: 18px !important;
        min-height: 120px !important;
    }
    .stat-card .stat-icon {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 14px !important;
        font-size: 0.95rem !important;
    }
    .stat-card .stat-info h3 {
        font-size: 0.9rem !important;
    }
}

/* ── Dashboard: delta badges + range selector ── */
/* stat-card needs relative to anchor the badge */
.stat-card { position: relative !important; }

/* Percentage-change badge — top-right corner */
.stat-delta-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.stat-delta-badge.stat-badge-up {
    background: rgba(93,163,153,0.14);
    color: #1E7A6E;
}
.stat-delta-badge.stat-badge-down {
    background: rgba(220,53,69,0.10);
    color: #B91C1C;
}

/* Range selector (Hoje / 7 dias / 30 dias) */
.dash-range-group {
    display: flex;
    gap: 2px;
    background: rgba(42,45,52,0.06);
    border-radius: 8px;
    padding: 3px;
}
.dash-range-btn {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
    white-space: nowrap;
}
.dash-range-btn:hover {
    background: rgba(255,255,255,0.7);
    color: #2A2D34;
}
.dash-range-btn.active {
    background: #ffffff;
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(42,45,52,0.08);
}

/* ═══ PGS-15: .text-muted → body colour for legibility ═══ */
.text-muted {
    color: var(--bs-body-color) !important;
    opacity: 0.65;
}

/* ═══ PGS-16: chat view — system palette migration ═══ */
/* CRIT-1 (01/10/2026): as regras deste bloco que so existiam para a conversa
   (cabecalho, modais, barra de selecao, painel do atendente, bolha) sairam:
   a conversa desenha tudo com o design system (ui-kit.css, chat-shell.css e
   chat-msg.css). Ficam as tres que valem fora dela: o fundo dos documentos
   com data-bs-theme e os seletores da lista antiga do admin (chats/index.php). */

/* Slim-mode body background */
html[data-bs-theme="dark"], html[data-bs-theme="dark"] body { background: #FFF8F0 !important; }

/* Instance selector in sidebar (lista do admin) */
.wa-sidebar-top select {
    background: #fff !important;
    color: #2A2D34 !important;
    border: 1px solid rgba(42,45,52,.15) !important;
}

/* Label filter select (lista do admin) */
#labelFilterWrap select {
    background: #fff !important;
    color: #2A2D34 !important;
    border: 1px solid rgba(42,45,52,.15) !important;
}

/* ═══ PGS-16b: modern toggle switch ═══ */
.cs-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.cs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.cs-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 11px;
    background: rgba(42,45,52,.15);
    transition: background .2s ease;
}
.cs-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s ease;
}
.cs-switch input:checked + .cs-switch-track {
    background: #5DA399;
}
.cs-switch input:checked + .cs-switch-track::after {
    transform: translateX(16px);
}

/* ── Top navbar vertical centering fix ── */
.top-navbar {
    align-items: center !important;
    min-height: 57px;
}
.top-navbar .page-title {
    line-height: 1;
    margin: 0;
    padding: 0;
    align-self: center;
}
.navbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: .75rem;
    margin-left: auto;
    align-self: center;
}
.connection-indicator {
    display: flex !important;
    align-items: center !important;
    gap: .45rem;
    line-height: 1;
}

/* ── Sidebar unificada: admin main-content dentro de cl-layout ── */
/* Remove margin-left da sidebar antiga (era position:fixed); agora é flex item */
.cl-layout .main-content {
    margin-left: 0 !important;
    overflow-y: auto !important;
    height: 100vh !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   Phase 18 — Logo nas Sidebars (expanded/collapsed swap)
   ═══════════════════════════════════════════════════════ */

/* --- Full logo (logo-dark.png): visible when expanded --- */
.cl-sidebar .cl-logo-full {
    height: 22px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* --- Icon logo (logo.png): hidden when expanded --- */
.cl-sidebar .cl-logo-icon-img {
    height: 28px !important;
    width: 28px !important;
    object-fit: contain !important;
    display: none !important;
    flex-shrink: 0 !important;
}

/* --- Collapsed: hide full logo, show icon --- */
.cl-sidebar.collapsed .cl-logo-full {
    display: none !important;
}

.cl-sidebar.collapsed .cl-logo-icon-img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
}

/* --- Override Phase 12 rule that hides entire .cl-sidebar-logo when collapsed --- */
.cl-sidebar.collapsed .cl-sidebar-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: none !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 12px 0 !important;
    min-height: 52px !important;
}

/* --- Collapsed header: logo + toggle share space --- */
.cl-sidebar.collapsed .cl-sidebar-header {
    justify-content: center !important;
    padding: 0 4px !important;
    gap: 0 !important;
}

/* --- Collapsed toggle: remove auto-margin so it does not push logo --- */
.cl-sidebar.collapsed .cl-sidebar-toggle {
    margin: 0 !important;
    display: none !important;
}

/* --- Responsive: tablet compact mirrors collapsed logo behavior --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .cl-sidebar:not(.expanded) .cl-logo-full {
        display: none !important;
    }
    .cl-sidebar:not(.expanded) .cl-logo-icon-img {
        display: block !important;
    }
    .cl-sidebar:not(.expanded) .cl-sidebar-logo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex: 0 !important;
    }
}

/* --- Reduced motion: no transition on logo swap --- */
@media (prefers-reduced-motion: reduce) {
    .cl-sidebar .cl-logo-full,
    .cl-sidebar .cl-logo-icon-img {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════
   Dashboard + Plans fixes — trial UX + alert contrast
   ═══════════════════════════════════════════════════════ */

/* Alert contrast fix — ensure warning/info banners are readable */
.alert-warning {
    background-color: #fff8ec !important;
    border-color: #ffc107 !important;
    color: #664d03 !important;
}
.alert-warning .alert-link,
.alert-warning a {
    color: #4d3900 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}
.alert-info {
    background-color: #e8f4f8 !important;
    border-color: #5DA399 !important;
    color: #1a4a45 !important;
}
.alert-info .alert-link,
.alert-info a {
    color: #0e3330 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════
   Sidebar collapsed — tooltips via JS (see app.js)
   CSS ::after approach replaced: overflow:hidden on sidebar
   clips pseudo-elements. JS appends tooltip to <body>.
   Suppress all ::after/::before tooltip attempts here.
   ═══════════════════════════════════════════════════════ */

.cl-sidebar .cl-nav-item[data-tooltip]::after,
.cl-sidebar .cl-nav-item[data-tooltip]::before {
    display: none !important;
    content: none !important;
}

/* ═══════════════════════════════════════════════════════
   Phase 24 — ADMIN UI DESIGN
   Admin settings + clients visual alignment to system palette.
   All rules !important to override data-bs-theme="dark".
   ═══════════════════════════════════════════════════════ */

/* ── ag-chip (global — extracted from client/agents inline) ── */
.ag-chip { font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; display: inline-block; white-space: nowrap; }
.ag-chip-teal { background: rgba(93,163,153,.12) !important; color: #5DA399 !important; }
.ag-chip-orange { background: rgba(var(--primary-rgb),.1) !important; color: var(--primary) !important; }
.ag-chip-gray { background: rgba(42,45,52,.07) !important; color: #9CA3AF !important; }
.ag-chip-amber { background: rgba(251,191,36,.12) !important; color: #D97706 !important; }

/* ── ag-icon-btn (global — extracted from client/agents inline) ── */
.ag-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(42,45,52,.12); background: transparent; color: #9CA3AF; cursor: pointer; transition: .15s; font-size: .85rem; text-decoration: none; }
.ag-icon-btn:hover { background: rgba(42,45,52,.06); color: #2A2D34; border-color: rgba(42,45,52,.2); }
.ag-icon-btn-danger:hover { background: rgba(239,68,68,.06); color: #ef4444; border-color: rgba(239,68,68,.2); }

/* ── Admin form controls (defeat dark theme) ── */
.form-control, .form-select {
    background: #FFFFFF !important;
    color: #2A2D34 !important;
    border-color: rgba(42,45,52,.15) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15) !important;
    background: #FFFFFF !important;
}
.form-label, .form-check-label {
    color: #2A2D34 !important;
}
.form-text {
    color: #6B7280 !important;
}

/* ── Admin form-switch and form-check (orange toggle) ── */
.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.form-check-input {
    background-color: #D1D5DB !important;
    border-color: #D1D5DB !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.25) !important;
    border-color: var(--primary) !important;
}

/* ── Admin nav-tabs override (for settings page) ── */
.ag-tabs {
    display: flex; gap: 2px; margin-bottom: 20px;
    background: rgba(42,45,52,.06); border-radius: 10px;
    padding: 4px; width: fit-content;
}
.ag-tab {
    padding: 7px 20px; border-radius: 7px; font-size: .83rem;
    font-weight: 600; color: #9CA3AF !important; cursor: pointer;
    border: none; background: transparent; transition: .15s;
    white-space: nowrap; text-decoration: none !important;
    display: inline-block;
}
.ag-tab.active {
    background: #fff !important; color: #2A2D34 !important;
    box-shadow: 0 1px 4px rgba(42,45,52,.1);
}
.ag-tab:hover:not(.active) { color: #2A2D34 !important; }

/* ── Page heading text color (defeat dark theme) ──
   Fora dos cards do carrossel (.cd): o título do slide é um <h2> com a cor do
   modelo, e este !important pintava todos de #2A2D34 na prévia e no PNG baixado.
   :where() zera o peso do :not(), então a especificidade continua a de "h2". */
h2:not(:where(.cd *)), h5, h6 {
    color: #2A2D34 !important;
}
.text-muted {
    color: #6B7280 !important;
}

/* ================================================================
   GROUPS — Device pill selector (shared with campaigns)
   ================================================================ */
.camp-inst-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(42,45,52,.12);
    font-size: .8rem; font-weight: 500; cursor: pointer; background: #fff;
    color: #6B7280; transition: .15s;
}
.camp-inst-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb),.25); }
.camp-inst-btn:not(.active):hover { border-color: var(--primary); color: var(--primary); }

/* ================================================================
   GROUPS — Phase 27 (Group Listing + Member Export)
   ================================================================ */
.grp-label { font-size: .78rem; font-weight: 600; color: #6B7280; margin-bottom: 5px; display: block; }

/* 4-column group card grid */
.grp-group-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.grp-group-card {
    background: #fff; border: 1px solid rgba(42,45,52,.08); border-radius: 14px;
    padding: 20px 16px 16px; display: flex; flex-direction: column; align-items: center;
    text-align: center; transition: .15s; gap: 0;
}
.grp-group-card:hover { box-shadow: 0 4px 16px rgba(42,45,52,.09); border-color: rgba(42,45,52,.14); }
.grp-group-avatar {
    width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
    background: rgba(var(--primary-rgb),.10); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0; margin-bottom: 12px;
}
.grp-group-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grp-group-info { width: 100%; margin-bottom: 14px; }
.grp-group-name {
    font-weight: 700; font-size: .88rem; color: #2A2D34;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.grp-group-members { font-size: .75rem; color: #9CA3AF; }
.grp-group-members i { font-size: .7rem; }
.grp-group-btns { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: auto; }
.grp-group-btn {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 10px; border-radius: 8px; font-size: .76rem; font-weight: 600;
    cursor: pointer; border: none; transition: .15s; text-decoration: none; width: 100%;
}
.grp-group-btn-auto {
    background: rgba(var(--primary-rgb),.10); color: var(--primary); border: 1px solid rgba(var(--primary-rgb),.25);
}
.grp-group-btn-auto:hover { background: rgba(var(--primary-rgb),.20); color: var(--primary); }
.grp-group-btn-export {
    background: rgba(93,163,153,.10); color: #5DA399; border: 1px solid rgba(93,163,153,.25);
}
.grp-group-btn-export:hover { background: rgba(93,163,153,.20); }

/* Empty states */
.grp-empty {
    text-align: center; padding: 60px 20px; background: #fff;
    border: 1px solid rgba(42,45,52,.08); border-radius: 14px;
}
.grp-empty h5 { color: #2A2D34; font-weight: 700; font-size: 1rem; margin: 14px 0 6px; }
.grp-empty p { color: #9CA3AF; font-size: .85rem; max-width: 400px; margin: 0 auto; }

/* Responsive */
@media (max-width: 1200px) { .grp-group-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .grp-group-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .grp-group-grid { grid-template-columns: 1fr; } }

/* ================================================================
   GROUP AUTOMATION — Phase 28
   ================================================================ */
.ga-card {
    background: var(--cl-card-bg, #fff);
    border: 1px solid var(--cl-border, #E5E7EB);
    border-radius: .75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.ga-card h5 {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--cl-text-primary, #111827);
}
.ga-card .form-check-input:checked {
    background-color: var(--cl-primary, #6366F1);
    border-color: var(--cl-primary, #6366F1);
}
.ga-list {
    max-height: 200px;
    overflow-y: auto;
    border-radius: .5rem;
}
.ga-list .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .45rem .75rem;
    font-size: .85rem;
}
.ga-add-row {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}
.ga-add-row input {
    flex: 1;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0) brightness(0);
    opacity: 1;
    cursor: pointer;
}

.wa-msg-sent .wa-audio-btn i,
.wa-msg-sent .wa-audio-btn svg.wa-ico {
    color: #fff !important;
}

.wa-msg-sent .wa-audio-track {
    background: rgba(255,255,255,0.3);
}

.wa-msg-sent .wa-audio-fill {
    background: #fff;
}

.wa-msg-sent .wa-audio-time {
    color: #fff;
}

.wa-msg-sent .wa-transcribe-btn {
    color: #fff !important;
}

.wa-msg-sent .wa-transcribe-btn i {
    color: #fff !important;
}

/* (02/10) Saiu a regra antiga "link da bolha enviada em #fff !important": era da bolha
   enviada ESCURA de antes. A conversa nova (chat-msg.css) pinta a bolha enviada clara no tema
   claro e o link com --cm-link; o #fff com !important deixava o link branco sobre a bolha
   clara, quase invisível. Nenhuma outra tela usa .wa-msg-sent. */

/* ── Phase 37: Meta Provider ──────────────────────────────── */

/* Provider badges */
.dv-badge-drope { background:rgba(99,102,241,.10);color:#6366F1; }
.dv-badge-meta   { background:rgba(37,211,102,.12);color:#128C7E;border:1px solid rgba(37,211,102,.25); }

/* Meta device status button */
.dv-btn-meta-status { background:rgba(37,211,102,.08);color:#128C7E;border:1px solid rgba(37,211,102,.2); }
.dv-btn-meta-status:hover { background:rgba(37,211,102,.16); }

/* Modal tabs (device add modal) */
.dv-modal-tabs .nav-link { font-size:.82rem;font-weight:600;color:#6B7280;padding:8px 14px;border:none;border-bottom:2px solid transparent; }
.dv-modal-tabs .nav-link.active { color:#5DA399;border-bottom-color:#5DA399;background:transparent; }
.dv-modal-tabs .nav-link:hover:not(.active) { color:#2A2D34;border-bottom-color:rgba(42,45,52,.15); }
.dv-modal-tabs { border-bottom:1px solid rgba(42,45,52,.08); }

/* ===== Templates HSM (Phase 40) ===== */
.tmpl-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.tmpl-actions { display: flex; align-items: center; gap: .5rem; }
.tmpl-inst-select { background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: .5rem; padding: .375rem .75rem; color: var(--cl-text); font-size: .875rem; cursor: pointer; }
.tmpl-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tmpl-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cl-text-muted); font-weight: 600; padding: .625rem .75rem; border-bottom: 1px solid var(--cl-border); }
.tmpl-table td { padding: .625rem .75rem; border-bottom: 1px solid var(--cl-border); font-size: .875rem; color: var(--cl-text); vertical-align: middle; }
.tmpl-table tr:hover td { background: rgba(93,163,153,.04); }
.tmpl-badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.tmpl-badge-approved { background: rgba(93,163,153,.12); color: #5DA399; }
.tmpl-badge-pending { background: rgba(240,180,41,.12); color: #F0B429; }
.tmpl-badge-rejected { background: rgba(239,68,68,.10); color: #EF4444; }
.tmpl-badge-paused, .tmpl-badge-disabled { background: rgba(42,45,52,.08); color: #6B7280; }
.tmpl-btn-delete { background: none; border: none; color: var(--cl-text-muted); cursor: pointer; padding: .25rem; border-radius: .375rem; transition: color .15s, background .15s; }
.tmpl-btn-delete:hover { color: #EF4444; background: rgba(239,68,68,.08); }
.tmpl-btn-sync { display: inline-flex; align-items: center; gap: .375rem; }
.tmpl-btn-sync .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }
.tmpl-empty { text-align: center; padding: 3rem 1rem; color: var(--cl-text-muted); }
.tmpl-name { font-weight: 500; font-family: 'SFMono-Regular', Consolas, monospace; font-size: .8125rem; }
/* Templates HSM — Create form (Phase 40) */
.tmpl-form-section { background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: .75rem; padding: 1.25rem; margin-bottom: 1rem; }
.tmpl-form-section h6 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cl-text-muted); font-weight: 600; margin-bottom: .75rem; }
.tmpl-name-warning { font-size: .75rem; color: var(--cl-text-muted); margin-top: .25rem; }
.tmpl-name-error { font-size: .75rem; color: #EF4444; margin-top: .25rem; display: none; }
.tmpl-header-fields { margin-top: .75rem; }
.tmpl-var-row { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.tmpl-button-group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; padding: .75rem; background: var(--cl-bg); border: 1px solid var(--cl-border); border-radius: .5rem; margin-bottom: .5rem; position: relative; }
.tmpl-button-group .tmpl-btn-remove { position: absolute; top: .5rem; right: .5rem; background: none; border: none; color: var(--cl-text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .125rem .375rem; border-radius: .25rem; }
.tmpl-button-group .tmpl-btn-remove:hover { color: #EF4444; background: rgba(239,68,68,.08); }
.tmpl-submit-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }

/* ── Campaign Create: Meta HSM Block (Phase 41) ── */
.cc-meta-preview-box   { border:1px solid rgba(42,45,52,.12); border-radius:10px; padding:14px 16px;
                          background:rgba(42,45,52,.02); font-size:.88rem; line-height:1.6; color:#2A2D34; min-height:60px; }
.cc-meta-var-row       { padding:8px 12px; background:rgba(42,45,52,.02); border-radius:8px; }
.cc-meta-var-label     { font-weight:600; font-size:.82rem; color:#6366F1; min-width:40px; }
.cc-meta-var-toggle.active { background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; }
.cc-meta-var-input     { max-width:320px; margin-top:4px; }

/* ── Device Webhook Popover ───────────────────────────────── */
.dv-webhook-pop        { position:absolute;z-index:9999;background:#fff;border:1px solid rgba(42,45,52,.12);border-radius:10px;box-shadow:0 4px 20px rgba(42,45,52,.14);padding:14px 16px;min-width:320px; }
.dv-webhook-pop-title  { font-size:.82rem;font-weight:600;color:#2A2D34;margin-bottom:10px; }
.dv-webhook-pop-label  { display:block;font-size:.75rem;color:#6B7280;font-weight:500;margin-bottom:4px; }
.dv-webhook-pop-row    { display:flex;gap:6px;align-items:center; }
.dv-webhook-pop-input  { flex:1;font-size:.78rem;border:1px solid rgba(42,45,52,.12);border-radius:6px;padding:5px 8px;background:#F9FAFB;color:#2A2D34;outline:none; }
.dv-webhook-pop-copy   { flex-shrink:0;padding:5px 10px;font-size:.75rem;border:none;border-radius:6px;background:#2A2D34;color:#fff;cursor:pointer;font-weight:500; }
.dv-webhook-pop-copy:hover { background:#1a1c22; }

/* ── Profile Edit Modal (Phase 51-02) ─────────────────────── */
.pe-photo-preview { display:inline-block; }
#modalProfileEdit .modal-body { max-height:70vh;overflow-y:auto; }

/* ── Header Hero ─────────────────────────────────────────── */
.header-hero { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px; }
.header-hero-left h1 { font-size:1.35rem;font-weight:800;color:#2A2D34;margin:0;letter-spacing:-.02em;display:flex;align-items:center;gap:10px; }
.header-hero-left h1 i { color:var(--primary);font-size:1.15rem; }
.header-hero-left p { font-size:.84rem;color:#9CA3AF;margin:4px 0 0; }
.header-hero-btn {
    display:inline-flex;align-items:center;gap:6px;padding:9px 20px;
    border-radius:10px;font-size:.84rem;font-weight:700;cursor:pointer;border:none;
    background:var(--primary);color:#fff;transition:.15s;box-shadow:0 2px 8px rgba(var(--primary-rgb),.25);
    text-decoration:none;
}
.header-hero-btn:hover { background:var(--primary-hover);box-shadow:0 4px 14px rgba(var(--primary-rgb),.35);color:#fff; }

/* ── Responsive ──────────────────────────────────────── */
@media(max-width:768px){
    .header-hero { flex-direction:column;align-items:stretch;gap:12px; }
    .header-hero-left { align-self:flex-start; }
    /* Any direct child after .header-hero-left becomes a full-width action area —
       covers single-button hero (a/button.header-hero-btn) AND wrapper divs
       (any div, regardless of inline style or class) */
    .header-hero > a.header-hero-btn,
    .header-hero > button.header-hero-btn,
    .header-hero > .header-hero-btn { width:100%;justify-content:center;padding:11px 16px; }
    .header-hero > div:not(.header-hero-left) {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
    }
    .header-hero > div:not(.header-hero-left) > .btn,
    .header-hero > div:not(.header-hero-left) > .header-hero-btn,
    .header-hero > div:not(.header-hero-left) > .kb-btn,
    .header-hero > div:not(.header-hero-left) > a.header-hero-btn,
    .header-hero > div:not(.header-hero-left) > button.header-hero-btn,
    .header-hero > div:not(.header-hero-left) > a:not(.header-hero-btn),
    .header-hero > div:not(.header-hero-left) > button:not(.header-hero-btn) {
        flex:1 1 auto;justify-content:center;text-align:center;
    }
    .header-hero > .ag-header-actions {
        width:100%;flex-wrap:wrap;gap:8px !important;
    }
    .header-table th:nth-child(4),.header-table td:nth-child(4),
    .header-table th:nth-child(5),.header-table td:nth-child(5) { display:none; }
}

.wa-msg.wa-msg-sent .wa-speed-btn {
    background: #ffffff;
    border: none;
    border-radius: 10px;
    color: var(--primary);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 7px;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    transition: .12s;
}

#mtgDate, #mtgTime {
        color-scheme: light;
}

/* ── LGPD Consent Banner ── */
.lgpd-consent-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: #1e2128 !important;
    border-top: 2px solid var(--primary, var(--primary));
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    padding: 18px 24px;
    animation: lgpdSlideUp 0.3s ease-out;
    color: #fff !important;
    transform: none !important;
}
@keyframes lgpdSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.lgpd-consent-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.lgpd-consent-text {
    flex: 1;
    min-width: 280px;
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.9) !important;
    line-height: 1.5;
}
.lgpd-consent-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.lgpd-btn-reject {
    border-radius: 8px !important;
    font-weight: 500;
    padding: 8px 20px;
    background: transparent !important;
    color: rgba(255,255,255,0.8) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}
.lgpd-btn-reject:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.5) !important;
}
.lgpd-btn-accept {
    border-radius: 8px !important;
    font-weight: 600;
    padding: 8px 24px;
    background: var(--primary, var(--primary)) !important;
    border: 1px solid var(--primary, var(--primary)) !important;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}
.lgpd-btn-accept:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
}
@media (max-width: 576px) {
    .lgpd-consent-inner { flex-direction: column; text-align: center; }
    .lgpd-consent-actions { width: 100%; justify-content: center; }
}

.wa-msg.wa-msg-sent .wa-msg-media .wa-doc-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.wa-msg.wa-msg-sent .wa-doc-card i, .wa-msg.wa-msg-sent .wa-doc-card span {
    color: #ffffff !important;
}

/* ── Instagram Analytics ─────────────────────────────────────── */
.ig-analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.ig-analytics-kpi-card { background: #fff; border-radius: 12px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-align: center; }
.ig-analytics-kpi-card .kpi-value { font-size: 1.75rem; font-weight: 700; color: #2A2D34; }
.ig-analytics-kpi-card .kpi-label { font-size: 0.85rem; color: #6B7280; margin-top: 0.25rem; }
.ig-analytics-kpi-card .kpi-icon { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--primary); }
.ig-analytics-kpi-card.ig-kpi-secondary { padding: 0.85rem; }
.ig-analytics-kpi-card.ig-kpi-secondary .kpi-value { font-size: 1.25rem; }
.ig-analytics-kpi-card.ig-kpi-secondary .kpi-label { font-size: 0.78rem; }
.ig-analytics-kpi-card.ig-kpi-secondary .kpi-icon { font-size: 1.15rem; color: #6B7280; }

.ig-analytics-section { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 1.5rem; }
.ig-analytics-section h3 { font-size: 1.1rem; font-weight: 600; color: #2A2D34; margin-bottom: 1rem; }

.ig-analytics-table { width: 100%; border-collapse: collapse; }
.ig-analytics-table th { text-align: left; padding: 0.75rem; border-bottom: 2px solid #E5E7EB; font-size: 0.8rem; text-transform: uppercase; color: #6B7280; cursor: pointer; user-select: none; }
.ig-analytics-table th:hover { color: var(--primary); }
.ig-analytics-table td { padding: 0.75rem; border-bottom: 1px solid #F3F4F6; font-size: 0.9rem; }
.ig-analytics-table tr:hover { background: #FFF8F0; }

.ig-analytics-date-range { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ig-analytics-date-range input[type="date"] { padding: 0.5rem 0.75rem; border: 1px solid #D1D5DB; border-radius: 8px; font-size: 0.9rem; }
.ig-analytics-date-range .btn-apply { background: var(--primary); color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 8px; cursor: pointer; font-weight: 600; }
.ig-analytics-date-range .btn-apply:hover { background: var(--primary-hover); }

.ig-insight-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 0.75rem; }
.ig-insight-card .insight-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 0.1rem; }
.ig-insight-card .insight-text { font-size: 0.9rem; line-height: 1.4; }
.ig-insight-positive { background: #ECFDF5; border-left: 4px solid #10B981; }
.ig-insight-positive .insight-icon { color: #10B981; }
.ig-insight-warning { background: #FFFBEB; border-left: 4px solid #F59E0B; }
.ig-insight-warning .insight-icon { color: #F59E0B; }
.ig-insight-suggestion { background: #EFF6FF; border-left: 4px solid #3B82F6; }
.ig-insight-suggestion .insight-icon { color: #3B82F6; }

.ig-analytics-empty { text-align: center; padding: 2rem; color: #9CA3AF; font-size: 0.95rem; }

.ig-automation-card { background: #fff; border-radius: 12px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: box-shadow 0.2s; }
.ig-automation-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.ig-automation-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }

/* =============================================
   Phase 95 — Grouped Sidebar (sb-* namespace)
   ============================================= */

/* 1. Sidebar container */
.sb-sidebar {
    width: var(--sidebar-width-expanded);
    min-width: var(--sidebar-width-expanded);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: width var(--sidebar-collapse-duration) var(--sidebar-collapse-easing),
                min-width var(--sidebar-collapse-duration) var(--sidebar-collapse-easing);
    will-change: width;
    position: relative;
    z-index: 20;
}

/* 2. Header */
.sb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(42,45,52,0.10);
    flex-shrink: 0;
}
.sb-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.sb-logo-full {
    height: 28px;
    width: auto;
}
.sb-logo-icon {
    height: 28px;
    width: auto;
    display: none;
}

/* 3. Toggle button */
.sb-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
    flex-shrink: 0;
}
.sb-toggle:hover {
    background: rgba(42,45,52,0.06);
    color: var(--text);
}
.sb-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.sb-toggle i {
    transition: transform 240ms var(--sidebar-collapse-easing);
    font-size: 0.875rem;
}

/* 4. Nav container */
.sb-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(42,45,52,0.15) transparent;
}
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(42,45,52,0.15); border-radius: 4px; }
.sb-nav::-webkit-scrollbar-thumb:hover { background: rgba(42,45,52,0.25); }

/* 5. Direct item — Dashboard */
.sb-item-direct {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 8px 4px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease;
    min-height: 40px;
    border-left: 3px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sb-item-direct i {
    font-size: 1.125rem;
    flex-shrink: 0;
}
.sb-item-direct:hover {
    background: var(--sidebar-hover);
    color: var(--text);
    text-decoration: none;
}
.sb-item-direct.active {
    background: var(--sidebar-active);
    color: var(--primary);
    border-left-color: var(--primary);
}
.sb-item-direct.active i {
    color: var(--primary);
}

/* 6. Category group */
.sb-group {
    margin: 2px 0;
}

/* 7. Group header */
.sb-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 16px);
    padding: 10px 16px;
    margin: 0 8px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
    min-height: 40px;
    text-align: left;
    border-left: 3px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sb-group-header > i:first-child {
    font-size: 1.125rem;
    flex-shrink: 0;
}
.sb-group-header:hover {
    background: rgba(42,45,52,0.04);
    color: var(--text);
}
.sb-group-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* 8. Chevron rotation */
.sb-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 250ms ease;
    color: var(--text-muted);
    flex-shrink: 0;
}
.sb-group.open > .sb-group-header .sb-chevron {
    transform: rotate(180deg);
}

/* 9. Group items container */
.sb-group-items {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 250ms ease, opacity 200ms ease;
}
.sb-group.open > .sb-group-items {
    max-height: 500px;
    opacity: 1;
}

/* 10. Sub-items */
.sb-group-items .sb-item {
    display: flex;
    align-items: center;
    padding: 8px 16px 8px 48px;
    margin: 0 8px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
    min-height: 36px;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-group-items .sb-item:hover {
    background: var(--sidebar-hover);
    color: var(--text);
    text-decoration: none;
}
.sb-group-items .sb-item.active {
    background: var(--sidebar-active);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 500;
}

/* 11. Active category header highlight */
.sb-group.open > .sb-group-header {
    color: var(--text);
}
.sb-group.has-active > .sb-group-header {
    color: var(--primary);
    border-left-color: var(--primary);
}
.sb-group.has-active > .sb-group-header > i:first-child {
    color: var(--primary);
}

/* 12. Footer */
.sb-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(42,45,52,0.10);
    padding: 8px 0;
}
.sb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
}
.sb-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(42,45,52,0.08);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.sb-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-user-email {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-user-info {
    overflow: hidden;
}

/* 13. Footer nav items */
.sb-footer .sb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    margin: 0 8px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease;
    min-height: 36px;
}
.sb-footer .sb-item i {
    font-size: 1rem;
    flex-shrink: 0;
}
.sb-footer .sb-item:hover {
    background: var(--sidebar-hover);
    color: var(--text);
    text-decoration: none;
}
.sb-footer .sb-item.active {
    background: var(--sidebar-active);
    color: var(--primary);
}
.sb-logout {
    color: #DC3545 !important;
}
.sb-logout:hover {
    background: rgba(220,53,69,0.08) !important;
    color: #DC3545 !important;
}

/* 14. Sidebar badge overrides */
.sb-sidebar #fuSidebarBadge {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    margin-left: 4px !important;
}
.sb-sidebar #inboxSidebarBadge {
    background: #F0B429 !important;
    color: #2A2D34 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    margin-left: 4px !important;
}

/* 15. Collapsed mode */
body.sidebar-collapsed .sb-sidebar {
    width: 72px;
    min-width: 72px;
}
body.sidebar-collapsed .sb-logo-full {
    display: none;
}
body.sidebar-collapsed .sb-logo-icon {
    display: block;
}
body.sidebar-collapsed .sb-header {
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    gap: 4px;
}
body.sidebar-collapsed .sb-toggle {
    width: 36px;
    height: 36px;
    margin: 4px auto 0;
    border-radius: 8px;
    background: rgba(var(--primary-rgb),0.08);
    color: var(--primary);
}
body.sidebar-collapsed .sb-toggle i {
    transform: rotate(180deg);
}
body.sidebar-collapsed .sb-toggle:hover {
    background: rgba(var(--primary-rgb),0.15);
}
body.sidebar-collapsed .sb-label {
    display: none;
}
body.sidebar-collapsed .sb-chevron {
    display: none;
}
body.sidebar-collapsed .sb-group-header {
    justify-content: center;
    padding: 10px 0;
    margin: 0 8px;
    text-transform: none;
    letter-spacing: 0;
}
body.sidebar-collapsed .sb-item-direct {
    justify-content: center;
    padding: 10px 0;
    margin: 0 8px;
    border-left: none;
}
body.sidebar-collapsed .sb-group-items {
    display: none;
}
body.sidebar-collapsed .sb-user-info {
    display: none;
}
body.sidebar-collapsed .sb-user {
    justify-content: center;
    padding: 8px;
}
body.sidebar-collapsed .sb-footer .sb-item {
    justify-content: center;
    padding: 8px 0;
    margin: 0 8px;
    gap: 0;
}
body.sidebar-collapsed .sb-footer .sb-item .sb-label {
    display: none;
}

/* 16. Expanded mode label transitions */
body:not(.sidebar-collapsed) .sb-label {
    opacity: 1;
    transition: opacity 160ms ease 80ms;
}
body.sidebar-collapsed .sb-sidebar .sb-label {
    opacity: 0;
    transition: opacity 100ms ease;
}

/* 17. Focus-visible accessibility states */
.sb-item:focus-visible,
.sb-item-direct:focus-visible,
.sb-footer .sb-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* 18. Responsive — Tablet (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .sb-sidebar {
        width: 72px;
        min-width: 72px;
    }
    .sb-logo-full { display: none; }
    .sb-logo-icon { display: block; }
    .sb-label { display: none; }
    .sb-chevron { display: none; }
    .sb-group-header {
        justify-content: center;
        padding: 10px 0;
        margin: 0 8px;
    }
    .sb-item-direct {
        justify-content: center;
        padding: 10px 0;
        margin: 0 8px;
        border-left: none;
    }
    .sb-group-items { display: none; }
    .sb-user-info { display: none; }
    .sb-user { justify-content: center; }
    .sb-footer .sb-item {
        justify-content: center;
        padding: 8px 0;
        margin: 0 8px;
    }
    .sb-toggle { display: none; }
    body.sidebar-expanded .sb-sidebar {
        width: var(--sidebar-width-expanded);
        min-width: var(--sidebar-width-expanded);
    }
    body.sidebar-expanded .sb-logo-full { display: block; }
    body.sidebar-expanded .sb-logo-icon { display: none; }
    body.sidebar-expanded .sb-label { display: inline; }
    body.sidebar-expanded .sb-chevron { display: inline; }
    body.sidebar-expanded .sb-group-header {
        justify-content: flex-start;
        padding: 10px 16px;
    }
    body.sidebar-expanded .sb-item-direct {
        justify-content: flex-start;
        padding: 10px 16px;
        border-left: 3px solid transparent;
    }
    body.sidebar-expanded .sb-group-items { display: block; }
    body.sidebar-expanded .sb-user-info { display: block; }
    body.sidebar-expanded .sb-user { justify-content: flex-start; }
    body.sidebar-expanded .sb-footer .sb-item {
        justify-content: flex-start;
        padding: 8px 16px;
    }
    body.sidebar-expanded .sb-toggle { display: flex; }
}

/* 19. Responsive — Mobile (<=767px) */
@media (max-width: 767px) {
    .sb-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--sidebar-width-expanded);
        min-width: var(--sidebar-width-expanded);
        /* iOS Safari: 100vh inclui a barra dinamica de URL/footer,
           empurrando o sb-footer pra abaixo da area visivel.
           100dvh responde ao viewport real. Fallback pra 100vh. */
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 300ms ease;
        z-index: 1050;
        box-shadow: none;
        /* Notch/home-indicator do iOS */
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.sb-drawer-open .sb-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(42,45,52,0.15);
    }
    .sb-toggle { display: none; }
    .sb-label { display: inline !important; }
    .sb-chevron { display: inline !important; }
    .sb-group-items { display: block; }

    /* Override persisted body.sidebar-collapsed when mobile drawer is open.
       sidebar-collapsed comes from desktop localStorage and would otherwise
       hide labels (opacity:0) and center icons inside the drawer. */
    body.sidebar-collapsed.sb-drawer-open .sb-sidebar .sb-label,
    body.sidebar-collapsed.sb-drawer-open .sb-sidebar .sb-chevron {
        opacity: 1 !important;
        display: inline !important;
    }
    body.sidebar-collapsed.sb-drawer-open .sb-sidebar .sb-group-header,
    body.sidebar-collapsed.sb-drawer-open .sb-sidebar .sb-item-direct,
    body.sidebar-collapsed.sb-drawer-open .sb-sidebar .sb-footer .sb-item,
    body.sidebar-collapsed.sb-drawer-open .sb-sidebar .sb-user {
        justify-content: flex-start !important;
        padding: 10px 16px !important;
        gap: 12px !important;
    }
    body.sidebar-collapsed.sb-drawer-open .sb-sidebar .sb-group-items {
        display: block !important;
    }
    body.sidebar-collapsed.sb-drawer-open .sb-sidebar .sb-user-info {
        display: block !important;
    }
    body.sidebar-collapsed.sb-drawer-open .sb-logo-full { display: block !important; }
    body.sidebar-collapsed.sb-drawer-open .sb-logo-icon { display: none !important; }
}
/* 20. Sidebar overlay (mobile drawer) */
.sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
    transition: opacity 300ms ease;
}
body.sb-drawer-open .sb-overlay {
    display: block;
}
/* 21. Mobile topbar + hamburger */
.sb-mobile-topbar {
    display: none;
}
.sb-mobile-logo img {
    height: 24px;
    width: auto;
}
@media (max-width: 767px) {
    .sb-mobile-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: var(--surface, #fff);
        border-bottom: 1px solid rgba(42,45,52,0.10);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        height: 56px;
    }
    .cl-layout {
        margin-top: 56px;
        height: calc(100vh - 56px) !important;
        /* On Safari mobile the dynamic toolbar overlaps 100vh — use dvh
           when supported so the input area stays visible above the toolbar. */
        height: calc(100dvh - 56px) !important;
    }
    .sb-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        color: var(--text, #2A2D34);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0;
        border-radius: 8px;
        transition: background 150ms ease;
        flex-shrink: 0;
    }
    .sb-hamburger:hover {
        background: rgba(42,45,52,0.06);
    }
}
.ig-automation-card .card-stats { display: flex; gap: 1rem; font-size: 0.85rem; color: #6B7280; margin-bottom: 1rem; }

/* ── Custom checkbox (light theme, brand-orange accent) ───────────────────
   Usage: wrap a native <input type="checkbox" class="gc-chk-input"> in a
   <label class="gc-chk-row"> (row layout) or just add .gc-chk-input to any
   native checkbox — pairs with a ::before/::after box drawn on the input
   itself using appearance:none. Keeps accessibility (real checkbox focus,
   keyboard toggle, form submission) without any JS. */
.gc-chk-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1.5px solid rgba(42,45,52,0.22);
    border-radius: 5px;
    background: #FFFFFF;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.gc-chk-input:hover { border-color: var(--primary); }
.gc-chk-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.18);
    border-color: var(--primary);
}
.gc-chk-input:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.gc-chk-input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.gc-chk-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    border-color: rgba(42,45,52,0.15);
}

/* Row wrapper — renders a full-width, hoverable selectable row */
.gc-chk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(42,45,52,0.08);
    border-radius: 10px;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 0.86rem;
    color: #2A2D34;
    transition: background .12s, border-color .12s;
    user-select: none;
}
.gc-chk-row:hover {
    background: rgba(var(--primary-rgb),0.04);
    border-color: rgba(var(--primary-rgb),0.35);
}
.gc-chk-row:has(.gc-chk-input:checked) {
    background: rgba(var(--primary-rgb),0.07);
    border-color: rgba(var(--primary-rgb),0.45);
}
.gc-chk-row .gc-chk-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.gc-chk-row .gc-chk-label {
    flex: 1;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gc-chk-row .gc-chk-count {
    font-size: 0.74rem;
    color: #9CA3AF;
    font-weight: 500;
    background: rgba(42,45,52,0.05);
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.gc-chk-row:has(.gc-chk-input:checked) .gc-chk-count {
    background: rgba(var(--primary-rgb),0.15);
    color: var(--primary);
}

/* =====================================================================
   MOBILE — /client/chats single-pane layout (WhatsApp-style)
   ─────────────────────────────────────────────────────────────────────
   On viewports <=767px the wa-layout collapses to a single visible
   pane. By default the chat list (.wa-sidebar) is visible full-width.
   When a chat is selected, body.wa-chat-open slides the conversation
   pane (.wa-main / iframe) over it. A back button inside the iframe
   posts {type:'chatBackRequest'} to parent to slide back.
   ===================================================================== */
@media (max-width: 767px) {
    /* The wa-layout container sits inside cl-main-wide. cl-layout already
       has margin-top:56px from the existing sb-mobile-topbar rule.
       Use dvh so Safari's dynamic toolbar doesn't push the composer offscreen. */
    .cl-main-wide .wa-layout {
        height: calc(100vh - 56px) !important;
        height: calc(100dvh - 56px) !important;
        position: relative;
        overflow: hidden;
    }

    /* Sidebar = chat list, full width when no chat is open */
    .cl-main-wide .wa-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto;
    }

    /* Main pane = conversation. Sits on top, off-screen by default. */
    .cl-main-wide .wa-main {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        z-index: 5;
        background: #efeae2;
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.2,.8,.2,1);
        will-change: transform;
    }
    body.wa-chat-open .cl-main-wide .wa-main {
        transform: translateX(0);
    }

    /* Right contact/group panel — full-screen overlay if opened on mobile.
       The inline style="display:none" is flipped to display:flex by JS
       (openContactPanel/openGroupPanel); when that happens, this rule
       lifts the panel out of flex flow and lays it over the chat.
       Background is white to match the existing light-theme override
       further up in the stylesheet (see line ~3746). */
    .cl-main-wide .wa-contact-panel {
        position: fixed !important;
        inset: 56px 0 0 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        z-index: 60 !important;
        background: #FFFFFF !important;
        border-left: none !important;
    }

    /* Tap-friendly chat list items */
    .wa-chat-item {
        padding: 12px 14px !important;
    }
    .wa-chat-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: .95rem !important;
    }
    .wa-chat-name { font-size: .96rem !important; }
    .wa-chat-preview { font-size: .82rem !important; }

    /* Filter chips — horizontal scroll instead of wrap */
    .wa-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .wa-filters::-webkit-scrollbar { display: none; }
    .wa-filter-btn { flex-shrink: 0 !important; }

    /* Slimmer search/header in sidebar */
    .wa-sidebar-top { padding: 10px 12px !important; }

    /* When chat is open, fix iOS input zoom by setting min font-size */
    .wa-input-text { font-size: 16px !important; }
}

/* =====================================================================
   MOBILE — Inside the chat iframe (show.php in slim mode)
   ─────────────────────────────────────────────────────────────────────
   These rules live in the parent CSS but only apply when the iframe
   document also loads style.css. The back button is rendered by show.php
   with .wa-mobile-back; visible only on viewports <=767px.
   ===================================================================== */
.wa-mobile-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #aebac1;
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: 50%;
    margin-right: 4px;
    flex-shrink: 0;
    padding: 0;
    transition: background .15s;
}

/* Mobile-only buttons (e.g. "more tools" in input area) — hidden by default,
   the @media (max-width:767px) block below flips them on. */
.wa-mobile-only-btn { display: none !important; }

/* ── Mobile tools bottom sheet ──────────────────────────────────────
   Slides up from the bottom of the iframe when user taps the ⋮ button
   in the input area. Hidden by default on all viewports; .is-open
   class makes it slide up. Only relevant on mobile (the trigger
   button #mobileMoreBtn is hidden on desktop). */
.wa-mobile-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1190;
    animation: waSheetFade .2s ease;
}
.wa-mobile-sheet-backdrop.is-open { display: block; }
@keyframes waSheetFade { from { opacity: 0; } to { opacity: 1; } }

.wa-mobile-sheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -8px 30px rgba(0,0,0,.25);
    z-index: 1200;
    padding: 8px 0 max(16px, env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.2,.8,.2,1);
    max-height: 70vh;
    overflow-y: auto;
}
.wa-mobile-sheet.is-open {
    display: flex;
    transform: translateY(0);
}
.wa-mobile-sheet-handle {
    width: 38px;
    height: 4px;
    background: rgba(42,45,52,.18);
    border-radius: 2px;
    margin: 6px auto 12px;
    flex-shrink: 0;
}
.wa-mobile-sheet-title {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9CA3AF;
    padding: 0 22px 8px;
    flex-shrink: 0;
}
.wa-mobile-sheet-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: none;
    border: none;
    padding: 12px 22px;
    color: #2A2D34;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}
.wa-mobile-sheet-item:active,
.wa-mobile-sheet-item:hover {
    background: rgba(42,45,52,.05);
}
.wa-mobile-sheet-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.wa-mobile-back:hover, .wa-mobile-back:active {
    background: rgba(134,150,160,0.12);
}
@media (max-width: 767px) {
    .wa-mobile-back { display: inline-flex; }

    /* CRIT-1 (01/10/2026): cabecalho, composer, seletor de emoji e bolhas da
       conversa sairam daqui; o iframe da conversa tem ~700 px no computador e
       estas regras de celular (com !important) valiam la. Quem desenha agora e
       o design system (chat-shell.css e chat-msg.css), com os proprios pontos
       de quebra. */
}

/* =====================================================================
   iOS Safari — prevent input zoom on focus
   ─────────────────────────────────────────────────────────────────────
   When an input/textarea/select has font-size < 16px on iOS Safari,
   tapping it auto-zooms the viewport. Force >= 16px globally on mobile
   for all interactive form elements. Applies to client AND admin panels.
   Excludes checkbox/radio/range/color/file (no text rendering) and date/
   time pickers (would look oversized).
   ===================================================================== */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* =====================================================================
   Notificações fixas (sticky top/bottom) — admin → portal do cliente.
   O "x" oculta a barra por 7 dias (localStorage, por navegador).
   As barras vivem DENTRO do .cl-main (container de scroll do portal — o
   layout é 100vh com overflow hidden): position:sticky empurra o conteúdo
   naturalmente e respeita o sidebar sem cálculo de offset.
   ===================================================================== */
.notif-sticky { position: sticky; z-index: 60; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
.notif-sticky-top { top: 0; }
.notif-sticky-bottom { bottom: 0; box-shadow: 0 -2px 12px rgba(0,0,0,.15); }
.notif-sticky-inner { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: .85rem; line-height: 1.45; }
.notif-sticky-inner > i { font-size: 1rem; flex-shrink: 0; }
.notif-sticky-text { flex: 1; min-width: 0; }
.notif-sticky-text strong { margin-right: 6px; }
.notif-sticky-close { background: transparent; border: none; color: inherit; opacity: .7; padding: 4px 8px; border-radius: 6px; flex-shrink: 0; cursor: pointer; transition: opacity .15s, background .15s; }
.notif-sticky-close:hover { opacity: 1; background: rgba(255,255,255,.15); }
/* Botao do link da notificacao ("Saiba mais"): contorno claro sobre o fundo forte */
.notif-sticky-link { flex-shrink: 0; display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 8px; color: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.notif-sticky-link:hover, .notif-sticky-link:focus-visible { background: rgba(255,255,255,.16); border-color: #fff; color: inherit; }
/* Cores por tipo — fundo forte + texto claro pra chamar atenção */
.notif-sticky-info        { background: #2A2D34;        color: #fff; }
.notif-sticky-maintenance { background: #B45309;        color: #fff; }
.notif-sticky-feature     { background: var(--primary); color: #fff; }
.notif-sticky-promo       { background: #0D9488;        color: #fff; }
@media (max-width: 767px) {
    .notif-sticky-inner { padding: 9px 12px; font-size: .78rem; }
    .notif-sticky-link { padding: 4px 10px; font-size: .74rem; }
}

/* =====================================================================
   Badge de destaque em item do sidebar (ex.: Indique e Ganhe).
   Desktop: pill "Novidade" · Mobile (drawer): ícone de fogo.
   ===================================================================== */
.sb-badge-new { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 8px; background: var(--primary); color: #fff; font-size: .56rem; font-weight: 800; letter-spacing: .05em; vertical-align: middle; text-transform: uppercase; }
.sb-badge-hot { display: none; margin-left: 6px; color: #E74C3C; vertical-align: middle; }
.sb-item-direct .sb-badge-hot { font-size: .85rem; }
@media (max-width: 767px) {
    .sb-badge-new { display: none; }
    .sb-badge-hot { display: inline-block; }
}

/* Stat-card: tint faltante do bg-info-subtle (padrão dos demais ícones) */
.stat-card .stat-icon.bg-info-subtle {
    background: rgba(52,131,250,0.10) !important;
}

/* Formulários de plano / trial / cliente (partial admin/partials/plan-feature-fields.php) */
.settings-num { max-width: 120px; }
.fov-select.fov-overridden { border-color: var(--primary, #FF7E01); }

/* =====================================================================
   Selo de CANAL nas telas de dispositivo do admin (/admin/devices).
   A conta de Instagram aparece aqui por decisao do dono (D1.1): o admin e
   o escritorio dele. O selo existe para ninguem confundir a conta com um
   aparelho de WhatsApp. Ver I43 / I45 de PLANO-INSTAGRAM-UNIFICADO.md.
   ===================================================================== */
.badge.channel-whatsapp  { color: #fff; background: #1FA855; }
.badge.channel-instagram { color: #fff; background: #C13584; }
.channel-avatar-instagram { background: rgba(193, 53, 132, .14) !important; color: #C13584 !important; }
/* O mesmo selo dentro de um titulo: acompanha o texto sem competir com ele. */
.badge.channel-badge-title { font-size: .5em; vertical-align: middle; }