/* ─── Self-hosted Inter (variable) ───
   Replaces the Google Fonts <link>. Same-origin + <link rel="preload"> in each page head
   means the font is available at first paint, killing the FOUT swap that showed the title
   in a system fallback before Inter arrived from gstatic. One variable file covers 100-900. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
}

/* ─── Cross-document View Transitions ─── */
@view-transition { navigation: auto; }

::view-transition-group(sidebar) {
    animation-duration: 0s;
}
::view-transition-old(page-content) {
    animation: vt-fade-out 120ms ease both;
}
::view-transition-new(page-content) {
    animation: vt-fade-in 200ms ease 60ms both;
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

/* Design tokens now live in shared/css/tokens.css and arrive via nl-shared.css
   (vendored by shared/sync.mjs). This file keeps only what is specific to this app. */


html.sidebar-collapsed { --sidebar-w: 68px; }

/* RGPD consent banner sits in the content column (right of the sidebar), aligned
   with the notice stack — never over the sidebar. Follows the collapse via --sidebar-w. */
#rgpd-banner { left: calc(var(--sidebar-w) + 16px); transition: left .3s cubic-bezier(.16,1,.3,1); }
@media (max-width: 768px) { #rgpd-banner { left: 16px; } }

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

@keyframes kpi-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kpi-animate > * {
    animation: kpi-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.kpi-animate > *:nth-child(2) { animation-delay: 0.06s; }
.kpi-animate > *:nth-child(3) { animation-delay: 0.12s; }
.kpi-animate > *:nth-child(4) { animation-delay: 0.18s; }
.kpi-animate > *:nth-child(5) { animation-delay: 0.24s; }

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Skip to content link */
.skip-link {
    position: fixed; top: -100%; left: 1rem; z-index: 9999;
    padding: 0.75rem 1.5rem; border-radius: 0 0 0.75rem 0.75rem;
    background: var(--accent-blue); color: #fff;
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.15em; text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

.main-content {
    transition: margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 769px) {
    #main.main-content { margin-left: var(--sidebar-w); }
}

/* ── Page entrance animations (staggered) ─── */
.main-content > .ladder-breadcrumb { animation: nl-fade-in .3s ease both; }
.main-content > header              { animation: nl-slide-up .35s ease both; }
.main-content > *:nth-child(n+3)    { animation: nl-fade-in .35s ease both; }
.main-content > *:nth-child(3)      { animation-delay: .08s; }
.main-content > *:nth-child(4)      { animation-delay: .14s; }
.main-content > *:nth-child(5)      { animation-delay: .18s; }
.main-content > *:nth-child(6)      { animation-delay: .22s; }

.liquid-glass {
    background: var(--w02);
    /* backdrop-filter removed (USR-05): bg is translucent over solid black — the blur was invisible but still cost GPU on every card/scroll */
    border: none;
    border-radius: 2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.liquid-glass-bordered {
    background: var(--glass-bg);
    /* backdrop-filter removed (USR-05): see .liquid-glass */
    border: 1px solid var(--glass-border);
    border-radius: 2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.liquid-glass-bordered:hover {
    border-color: rgba(59, 130, 246, 0.3);
    background: var(--w05);
}

.text-glow { text-shadow: 0 0 40px rgba(59, 130, 246, 0.4); }

/* Pre-render sidebar shell (before JS adds .sidebar class) */
#nl-sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--bg-dark);
    border-right: 1px solid var(--w05);
    z-index: var(--z-sidebar);
    view-transition-name: sidebar;
}

/* Clean Modern Sidebar */
.sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 0;
    background: var(--bg-dark);
    border-right: 1px solid var(--w05);
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-header {
    padding: 2.5rem 1.5rem 1rem;
    flex-shrink: 0;
    transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--w05);
}
.sidebar-header-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.625rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dim-3);
    transition: all 0.2s;
}
.sidebar-header-btn:hover {
    color: var(--text-primary);
    background: var(--w05);
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1.5rem;
    scrollbar-gutter: stable;
    transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-footer {
    padding: 0.75rem 1.5rem 1.5rem;
    flex-shrink: 0;
    transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Timer mini-card: single row [dot | elapsed/project | stop] (expanded + collapsed popover) */
.nl-timer-detail { display: flex; align-items: center; gap: 0.5rem; }

/* Canonical list row — NL.components.listRow. One row style shared across the app. */
.nl-row { transition: background 0.15s, transform 0.1s; }
.nl-row:hover { background: rgba(var(--chrome-rgb), 0.02); }
.nl-row.cursor-pointer:active { transform: scale(0.995); transition-duration: 0.05s; }
.nl-row-card:hover { background: rgba(255, 255, 255, 0.03); }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 16px; /* Espaço fixo entre ícone e texto */
    padding: 0.85rem 1.25rem;
    margin-bottom: 0.25rem;
    border-radius: 0.75rem;
    color: var(--dim-4);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    transition: all 0.2s ease;
}

.sidebar-link i, .sidebar-link svg {
    width: 18px;
    height: 18px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Chat Specific Styles */
.chat-layout {
    display: flex;
    height: calc(100vh - 8rem); /* Descontando breadcrumbs e padding */
    gap: 2rem;
}

.chat-channels {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--w03);
    padding-right: 2rem;
}

.channel-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    color: var(--dim-3);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    transition: all 0.2s;
}

.channel-link:hover, .channel-link.active {
    color: var(--text-primary);
    background: var(--w03);
}

/* Email Viewer Styles */
.email-list {
    width: 350px;
    border-right: 1px solid var(--w05);
    overflow-y: auto;
}

.email-item {
    padding: 1.5rem;
    border-bottom: 1px solid var(--w03);
    cursor: pointer;
    transition: all 0.2s;
}

.email-item:hover {
    background: var(--w02);
}

.email-item.active {
    background: rgba(59, 130, 246, 0.05);
    border-right: 2px solid var(--accent-blue);
}

/* Resource Grid */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

.resource-card {
    padding: 1.5rem;
    text-align: center;
    border-radius: 1.5rem;
    background: var(--w02);
    transition: all 0.3s;
    cursor: pointer;
}

.resource-card:hover {
    background: var(--w05);
    transform: translateY(-5px);
}

/* Calendar Styles */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--w05);
    border: 1px solid var(--w05);
    border-radius: 1.5rem;
    overflow: hidden;
}

.calendar-day {
    aspect-ratio: 1;
    padding: 1.5rem;
    background: var(--bg-dark);
    transition: all 0.2s;
}

.calendar-day:hover {
    background: var(--w02);
}

.calendar-day.today {
    background: rgba(59, 130, 246, 0.03);
}

.calendar-day.today .day-number {
    color: var(--accent-blue);
}

.day-number {
    font-size: 10px;
    font-weight: 900;
    color: var(--dim-2);
    margin-bottom: 1rem;
    display: block;
}

.event-tag {
    font-size: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kanban Board */
.kanban-board {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding-bottom: 2rem;
}

.kanban-column {
    flex: 1;
    min-width: 300px;
}

.kanban-header {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.kanban-card {
    background: var(--w02);
    border: 1px solid var(--w05);
    padding: 1.5rem;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
    cursor: grab;
    transition: all 0.3s;
}

.kanban-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-3px);
}
.kanban-card:focus-visible,
.lead-card:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
    border-color: rgba(59, 130, 246, 0.4);
}

/* Foco de teclado global — anel visível para quem navega por teclado (sidebar, botões,
   tabs, toggles, links). Só em :focus-visible (clique de rato não mostra anel). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="switch"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: 6px;
}
.kanban-card.kb-moving,
.lead-card.kb-moving {
    animation: kb-flash 0.3s ease;
}
@keyframes kb-flash {
    0%   { box-shadow: 0 0 0 3px rgba(59,130,246,0.4); }
    100% { box-shadow: none; }
}

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

.sidebar-link { position: relative; }
.sidebar-link.active {
    color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.1);
}
/* Active indicator: flush-left bar, curved on the left, straight on the right. */
.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 55%;
    background: var(--accent-blue);
    border-radius: 3px 0 0 3px;
}

.sidebar-link.active i,
.sidebar-link.active svg {
    color: var(--accent-blue);
    opacity: 1;
}

/* Sidebar sections — label + items (no collapse, always visible) */
.sidebar-section-label {
    font-size: 9px;
    font-weight: 900;
    color: var(--dim-2);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    padding: 0.5rem 1.25rem;
    margin-top: 1.25rem;
    transition: all 0.2s;
}
.sidebar-section:first-child .sidebar-section-label { margin-top: 0.25rem; }

/* ── Sidebar Toggle (collapsed / expanded) ────────────────────────── */
.sidebar-logo { font-size: 1.5rem; line-height: 1; white-space: nowrap; }
.sidebar-logo .logo-slide {
    display: inline-block;
    overflow: hidden;
    max-width: 80px;
    opacity: 1;
    transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease 0.05s;
    vertical-align: top;
    line-height: inherit;
}
.sidebar-toggle { display: none; }

@media (min-width: 769px) {
    /* Toggle button (inherits .sidebar-header-btn styles) */
    .sidebar-toggle { display: flex; }
    .sidebar-toggle .toggle-expand { display: none; }
    html.sidebar-collapsed .sidebar-toggle .toggle-expand { display: block; }
    html.sidebar-collapsed .sidebar-toggle .toggle-collapse { display: none; }

    /* ── Collapsed state ───────────────────────────────────────────── */
    html.sidebar-collapsed .sidebar { overflow: visible; }

    html.sidebar-collapsed .sidebar-header { padding: 1.25rem 0.625rem 0.5rem; text-align: center; }
    html.sidebar-collapsed .sidebar-logo .logo-slide {
        max-width: 0;
        opacity: 0;
        transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
    }
    html.sidebar-collapsed .sidebar-header-row {
        flex-direction: column;
        align-items: center;
        margin-top: 0.5rem;
        gap: 0.25rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--w05);
    }

    html.sidebar-collapsed .sidebar-nav {
        padding: 0 0.625rem;
        scrollbar-gutter: auto;
        scrollbar-width: none;
    }
    html.sidebar-collapsed .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    /* Collapsed timer: the rail shows a compact dot chip; hovering expands the card into a
       flyout panel to the right (same idea as the sidebar tooltips / notification popover) with
       the live time, project and stop button. Reserve the rail height so nothing jumps. */
    html.sidebar-collapsed #nl-timer-indicator { padding: 0 !important; position: relative; height: 2rem; margin: 1rem 0 0.25rem; }
    /* Static round chip — never morphs. Ring (::before) + centre dot (::after). */
    html.sidebar-collapsed #nl-timer-indicator > .liquid-glass {
        position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 2rem; height: 2rem; aspect-ratio: 1;
        border-radius: 50% !important;
        display: flex; align-items: center; justify-content: center;
        padding: 0 !important; overflow: visible;
    }
    /* Rotating sweep ring (radar): a comet arc spins 360° continuously */
    html.sidebar-collapsed #nl-timer-indicator > .liquid-glass::before {
        content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
        background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.06) 40deg, var(--accent-blue) 340deg, var(--accent-blue) 360deg);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
                mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
        animation: nl-timer-spin 10s linear infinite;
    }
    /* Centre dot */
    html.sidebar-collapsed #nl-timer-indicator > .liquid-glass::after {
        content: ''; width: 7px; height: 7px; border-radius: 50%;
        background: var(--accent-blue); pointer-events: none;
    }
    /* The inline detail becomes a right-side popover when collapsed — styled to
       match #nl-notif-panel (bg-surface / w06 border / 16px / deep shadow / scale-in) */
    html.sidebar-collapsed #nl-timer-indicator .nl-timer-detail {
        position: absolute; left: calc(100% + 29px); top: 50%;
        transform: translateY(-50%) scale(0.96);
        transform-origin: left center;
        opacity: 0; visibility: hidden; pointer-events: none;
        width: 200px;
        background: var(--bg-surface); border: 1px solid var(--w06);
        border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.7);
        padding: 0.6rem 0.85rem; gap: 0.75rem;
        z-index: calc(var(--z-sidebar) + 30);
        /* delayed hide → grace window to travel toward the popover */
        transition: opacity 0.16s ease 0.28s, transform 0.18s cubic-bezier(0.16,1,0.3,1) 0.28s, visibility 0s linear 0.46s;
    }
    html.sidebar-collapsed #nl-timer-indicator > .liquid-glass:hover .nl-timer-detail {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateY(-50%) scale(1);
        transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.16,1,0.3,1), visibility 0s;
    }
    /* Mouse bridge — tall + wide catch area so leaving the chip (even a bit above)
       still lands the cursor on the popover before it hides */
    html.sidebar-collapsed #nl-timer-indicator .nl-timer-detail::before {
        content: ''; position: absolute; top: -18px; bottom: -18px; left: -24px; width: 28px;
    }

    /* ── Collapsed profile popover (name + role + logout), same notif styling ── */
    html.sidebar-collapsed .sidebar-footer-card { position: relative; }
    html.sidebar-collapsed .sidebar-footer-pop {
        position: absolute; left: calc(100% + 10px); bottom: 0;
        transform: scale(0.96);
        transform-origin: left bottom;
        opacity: 0; visibility: hidden; pointer-events: none;
        display: flex; align-items: center; gap: 0.75rem;
        width: 200px;
        background: var(--bg-surface); border: 1px solid var(--w06);
        border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.7);
        padding: 0.6rem 0.85rem;
        z-index: calc(var(--z-sidebar) + 30);
        /* delayed hide → grace window to travel toward the popover */
        transition: opacity 0.16s ease 0.28s, transform 0.18s cubic-bezier(0.16,1,0.3,1) 0.28s, visibility 0s linear 0.46s;
    }
    html.sidebar-collapsed .sidebar-footer-card:hover .sidebar-footer-pop {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: scale(1);
        transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.16,1,0.3,1), visibility 0s;
    }
    /* Tall bridge so going a touch above the avatar doesn't kill the popover */
    html.sidebar-collapsed .sidebar-footer-pop::before {
        content: ''; position: absolute; top: -24px; bottom: -12px; left: -24px; width: 28px;
    }
    /* Popover only exists collapsed */
    .sidebar-footer-pop { display: none; }
    html.sidebar-collapsed .sidebar-footer-pop { display: flex; }

    html.sidebar-collapsed .sidebar-section-label {
        overflow: hidden;
        color: transparent;
        font-size: 0;
        padding: 0;
        margin: 0.625rem 0;
        height: 1px;
        background: var(--w05);
    }
    html.sidebar-collapsed .sidebar-section:first-child .sidebar-section-label { display: none; }

    html.sidebar-collapsed .sidebar-link {
        justify-content: center;
        padding: 0.7rem;
        gap: 0;
        border-radius: 0.625rem;
        position: relative;
    }
    html.sidebar-collapsed .sidebar-link-label { display: none; }

    /* Tooltips on collapsed icons */
    html.sidebar-collapsed .sidebar-link:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--bg-panel);
        border: 1px solid var(--w08);
        color: var(--text-primary);
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        z-index: calc(var(--z-sidebar) + 10);
        pointer-events: none;
        letter-spacing: 0.05em;
    }

    html.sidebar-collapsed .sidebar-badge {
        position: absolute;
        top: 4px; right: 4px;
        margin-left: 0;
        min-width: 8px; height: 8px;
        padding: 0; font-size: 0;
    }

    html.sidebar-collapsed .sidebar-footer { padding: 0.25rem 0.625rem 1rem; }
    html.sidebar-collapsed .sidebar-footer-card {
        padding: 0 !important;
        justify-content: center;
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    html.sidebar-collapsed .sidebar-footer-link { justify-content: center; }
    html.sidebar-collapsed .sidebar-footer-info { display: none; }
    html.sidebar-collapsed .sidebar-footer-logout { display: none; }
    /* Lock the collapsed avatar to a perfect circle — pin both dims hard so
       neither flex-shrink nor the img preflight (max-width/height:auto) can flatten it */
    html.sidebar-collapsed .sidebar-footer-link > img,
    html.sidebar-collapsed .sidebar-footer-link > :first-child {
        width: 2.5rem !important; height: 2.5rem !important;
        min-width: 2.5rem !important; max-width: 2.5rem !important;
        aspect-ratio: 1 !important; border-radius: 50% !important;
        object-fit: cover; flex: 0 0 auto !important;
    }
}

/* Registered angle prop so the timer sweep can animate the conic stop smoothly */
@property --nl-timer-deg {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes nl-timer-sweep {
    from { --nl-timer-deg: 0deg; }
    to   { --nl-timer-deg: 360deg; }
}
@keyframes nl-timer-spin {
    to { transform: rotate(360deg); }
}

/* Breadcrumbs (Ladder path) */
.ladder-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--dim-2);
    margin-bottom: 3rem;
}

.ladder-breadcrumb span.active {
    color: var(--accent-blue);
}

.role-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 99px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
}

.btn-pill {
    border-radius: 9999px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.2em;
    font-size: 9px;
    gap: 8px;
    cursor: pointer;
    border: none;
}
.btn-pill:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
    padding: 0.75rem 2rem;
    background: var(--accent-blue);
    color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-blue-hover); transform: translateY(-1px); }

.btn-primary-full {
    width: 100%;
    padding: 1rem;
    background: var(--accent-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}
.btn-primary-full:hover:not(:disabled) { background: var(--accent-blue-hover); transform: translateY(-1px); }

.btn-secondary {
    padding: 0.75rem 2rem;
    background: var(--w03);
    border: 1px solid var(--w08) !important;
    color: var(--text-secondary);
}
.btn-secondary:hover:not(:disabled) { background: var(--w06); color: var(--text-primary); }

.btn-success {
    padding: 0.75rem 2rem;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: var(--color-success);
}
.btn-success:hover:not(:disabled) { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.5) !important; }

.btn-danger {
    padding: 0.75rem 2rem;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: rgba(239, 68, 68, 0.7);
}
.btn-danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.06); color: var(--color-error); border-color: rgba(239, 68, 68, 0.5) !important; }

.btn-ghost {
    padding: 0.75rem 2rem;
    background: var(--w03);
    border: 1px solid var(--w06) !important;
    color: var(--text-muted);
}
.btn-ghost:hover { background: var(--w05); color: var(--text-primary); }

/* ── Tabs: standard (bordered, white active) ───────────────── */
.nl-tab {
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
}
.nl-tab:hover { color: var(--text-primary); }
.nl-tab.active { color: var(--text-primary); background: var(--w04); border-color: var(--w08); }

/* ── Tabs: pill (contained, blue active) ───────────────────── */
.nl-tab-pills { display: flex; gap: 0.25rem; padding: 0.25rem; background: rgba(var(--chrome-rgb),0.02); border: 1px solid rgba(var(--chrome-rgb),0.04); border-radius: 0.75rem; }
.nl-tab-pill {
    padding: 0.4rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: transparent;
}
.nl-tab-pill:hover { color: var(--text-tertiary); }
.nl-tab-pill.active { background: rgba(59,130,246,0.15); color: var(--accent-blue); }

/* ── Underline tabs (canonical): project/event/client/member/lead forms + funnel ───── */
.np-tab {
    padding: 0.5rem 1rem; font-size: 9px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--text-muted); background: none; border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer; transition: all .15s;
}
.np-tab:hover { color: var(--text-primary); }
.np-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
.np-tab-panel { display: none; }
.np-tab-panel.active { display: block; }

/* ── Tab panel visibility ──────────────────────────────────── */
.nl-panel { display: none; }
.nl-panel.active { display: block; }

/* ── Static modal overlay ──────────────────────────────────── */
.nl-modal-overlay {
    display: flex;
    position: fixed; inset: 0;
    z-index: var(--z-modal);
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.75);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.nl-modal-overlay > * {
    transform: scale(0.97) translateY(6px); transition: transform .2s ease;
}
.nl-modal-overlay.open {
    opacity: 1; visibility: visible; pointer-events: auto;
}
.nl-modal-overlay.open > * { transform: scale(1) translateY(0); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--bg-tooltip); border-radius: 20px; }

/* ── Communication panel sub-tabs ────────────────────────────────────────── */
.comm-sub {
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    background: rgba(var(--chrome-rgb),0.02);
    border: 1px solid rgba(var(--chrome-rgb),0.06);
    color: var(--text-muted);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
}
.comm-sub:hover { background: rgba(var(--chrome-rgb),0.04); color: var(--text-tertiary); }
.comm-sub.active { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); color: var(--accent-blue); }

/* ── Portal message styling ─────────────────────────────────────────────── */
.portal-msg-list { overflow-y: auto; padding: 0.5rem 0; }
.portal-msg { display: flex; gap: 0.625rem; padding: 0.375rem 0; }
.portal-msg-meta { font-size: 8px; font-weight: 700; color: var(--text-disabled); text-transform: uppercase; letter-spacing: 0.1em; }
.portal-msg-text { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; word-break: break-word; white-space: pre-line; }

/* ── Checkbox / radio — consistent sizing ──────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
    min-width: 18px; min-height: 18px; cursor: pointer;
}

/* ── Form fields — force theme across all pages ──────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
    background-color: var(--w03) !important;
    color: var(--text-primary) !important;
    border-color: var(--w08);
    -webkit-text-fill-color: var(--text-primary);
    color-scheme: dark;
}

.empty-state {
    font-size: 9px;
    color: var(--text-disabled);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 2rem 0;
}

.empty-state-rich {
    text-align: center;
    padding: 3rem 1rem;
}
.empty-state-rich .empty-icon {
    width: 48px; height: 48px;
    border-radius: 16px;
    background: rgba(var(--chrome-rgb),0.02);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.empty-state-rich .empty-icon i,
.empty-state-rich .empty-icon svg { color: var(--text-disabled); width: 22px; height: 22px; }
.empty-state-rich .empty-title {
    font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px;
}
.empty-state-rich .empty-sub {
    font-size: 10px; color: var(--text-disabled); margin-bottom: 16px;
}
.empty-state-rich .empty-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 20px; border-radius: 999px;
    background: rgba(var(--chrome-rgb),0.04); border: 1px solid rgba(var(--chrome-rgb),0.06);
    color: var(--text-tertiary); font-size: 9px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.15em;
    cursor: pointer; transition: all 0.15s;
}
.empty-state-rich .empty-cta:hover {
    background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: var(--accent-blue);
}

/* ── Forms: unified input / select / label ──────────────────── */
/* Base metrics for every control equal the md token (min-height 40 / .625 .875 /
   .8125 / radius .75) so an un-tokened input matches a default (md) dropdown next to
   it. sm / lg come from the ctl-* tokens below. */
.nl-input,
.form-input {
    width: 100%;
    background: rgba(var(--chrome-rgb),0.03);
    border: 1px solid rgba(var(--chrome-rgb),0.06);
    border-radius: 0.75rem;
    min-height: 40px;
    padding: 0.625rem 0.875rem;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
    /* appearance:none kills the native GTK/Firefox text-field focus glow on Linux
       (outline:none alone doesn't). No glow anywhere — focus = border-colour only. */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s;
}
.nl-input:focus,
.form-input:focus { border-color: rgba(59, 130, 246, 0.4); box-shadow: none; }
.nl-input::placeholder,
.form-input::placeholder { color: var(--text-primary); opacity: 0.4; }

.nl-select {
    width: 100%;
    background: rgba(var(--chrome-rgb),0.03);
    border: 1px solid rgba(var(--chrome-rgb),0.06);
    border-radius: 0.75rem;
    min-height: 40px;
    padding: 0.625rem 0.875rem;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
    appearance: none;
    transition: border-color 0.2s;
}
.nl-select:focus { border-color: rgba(59, 130, 246, 0.4); }

/* Searchable single-select (NL.components.searchSelect). Trigger mirrors nl-select;
   popover floats below, styled like the picker rows. Focus = border only (no glow). */
.nl-ss { position: relative; }
.nl-ss-trigger {
    background: rgba(var(--chrome-rgb),0.03);
    border: 1px solid rgba(var(--chrome-rgb),0.06);
    border-radius: 0.75rem;
    min-height: 40px;
    padding: 0.625rem 0.875rem;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s;
    cursor: pointer;
}
.nl-ss-trigger:hover,
.nl-ss-trigger:focus,
.nl-ss.is-open .nl-ss-trigger { border-color: rgba(59, 130, 246, 0.4); }
.nl-ss-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
/* Toolbar standard: every dropdown/pill control highlights its BORDER on hover (matches the
   nl-ss open/focus state + the batch trigger). No text-colour flip — one coherent hover. */
.nl-toolbtn { transition: border-color .15s ease, background .15s ease; }
.nl-toolbtn:hover { border-color: rgba(59, 130, 246, 0.4); }
/* Fixed positioning (coordinates set from the trigger rect in JS) so the popover
   escapes every ancestor stacking context / overflow:hidden — backdrop-filter cards,
   toolbars, scroll containers. */
.nl-ss-pop {
    position: fixed;
    z-index: var(--z-popover);
    background: var(--bg-panel);
    border: 1px solid rgba(var(--chrome-rgb),0.08);
    border-radius: 0.875rem;
    padding: 0.5rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    transform-origin: top left;
    /* Smooth open AND close (matches the More Filters popover): transition on
       opacity/transform/visibility instead of a display toggle. */
    opacity: 0; transform: translateY(-6px) scale(0.98);
    visibility: hidden; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nl-ss-pop.hidden { display: block; }   /* neutralize Tailwind's display:none so it can transition both ways */
.nl-ss-pop:not(.hidden) { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
/* Trigger chevron flips while the dropdown is open. Explicit rotate(0deg) baseline so the
   transition interpolates on open too (transform:none → rotate can snap in some engines). */
.nl-ss-chev { transition: transform .18s ease; transform: rotate(0deg); }
.nl-ss.is-open .nl-ss-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .nl-ss-pop { transition: none; } .nl-ss-chev { transition: none; } }
.nl-ss-list { max-height: 13rem; overflow-y: auto; }
.nl-ss-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}
.nl-ss-item:hover,
.nl-ss-item.is-active { background: rgba(var(--chrome-rgb),0.05); }
.nl-ss-item.is-selected { background: rgba(59, 130, 246, 0.08); }
.nl-ss-empty { padding: 0.75rem 0.5rem; text-align: center; font-size: 0.625rem; color: var(--text-secondary); font-style: italic; }
/* enhanceSelect wrapper: compact by default (fits flex toolbars). Form controls that
   should fill their column pass width:'100%' (or data-width) to enhanceSelect. */
.nl-ss-mount { width: auto; min-width: 11rem; }

/* Month-grid primitive (NL.components.monthCalendar) — shared by the calendar mini-cal
   and the datePicker popover. */
.nl-cal { user-select: none; }
.nl-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.nl-cal-title { font-size: 12px; font-weight: 800; color: var(--text-secondary); }
.nl-cal-nav { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: none; background: none; color: var(--text-muted); cursor: pointer; transition: background 0.1s; }
.nl-cal-nav:hover { background: rgba(var(--chrome-rgb),.06); }
.nl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; text-align: center; }
.nl-cal-dow { font-size: 8px; font-weight: 800; color: var(--text-disabled); text-transform: uppercase; padding: 2px 0 4px; }
.nl-cal-day { position: relative; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto; border-radius: 50%; border: none; background: none; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: background 0.1s, color 0.1s; }
.nl-cal-day:hover { background: rgba(var(--chrome-rgb),.06); }
.nl-cal-day.is-other { color: var(--text-disabled); opacity: 0.4; }
.nl-cal-day.is-today { color: var(--accent-blue); background: rgba(59,130,246,.15); font-weight: 900; }
.nl-cal-day.is-selected { background: var(--accent-blue); color: #fff; font-weight: 900; }
.nl-cal-day.is-disabled { opacity: 0.25; cursor: not-allowed; }
.nl-cal-day.has-event::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--accent-blue); }

/* datePicker popover (reuses .nl-ss-pop chrome + fixed positioning). */
.nl-cal-pop { min-width: 15rem; }
.nl-cal-clear { width: 100%; margin-top: 0.4rem; padding: 0.35rem; border: none; background: none; color: var(--text-muted); font-size: 11px; font-weight: 700; border-radius: 0.5rem; cursor: pointer; transition: background 0.1s; }
.nl-cal-clear:hover { background: rgba(var(--chrome-rgb),.05); }

/* timePicker / dateTimePicker popovers (hour + minute columns; datetime adds the grid). */
.nl-time-pop { min-width: 8rem; }
.nl-time-wrap { display: flex; gap: 0.25rem; }
.nl-time-col { max-height: 12rem; overflow-y: auto; flex: 1; min-width: 3rem; }
.nl-time-opt { display: block; width: 100%; text-align: center; padding: 0.3rem 0.5rem; border: none; background: none; color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 600; border-radius: 0.4rem; cursor: pointer; transition: background 0.1s, color 0.1s; }
.nl-time-opt:hover { background: rgba(var(--chrome-rgb),.06); }
.nl-time-opt.is-selected { background: var(--accent-blue); color: #fff; font-weight: 800; }
.nl-dt-pop { min-width: 21rem; }
.nl-dt-wrap { display: flex; gap: 0.5rem; }
.nl-dt-time { border-left: 1px solid rgba(var(--chrome-rgb),.06); padding-left: 0.5rem; }

/* tagPicker / pillarPicker chips (shared: project form, member form, chat groups). */
.pillar-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; border: 1px solid; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(var(--chrome-rgb),0.02); }
.pillar-tag-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; margin-left: 2px; opacity: 0.6; }
.pillar-tag-x:hover { opacity: 1; }
.pillar-tag-star { background: none; border: none; cursor: pointer; font-size: 11px; line-height: 1; padding: 0; transition: opacity 0.15s, color 0.15s; }
.pillar-add-sel { max-width: 150px; font-size: 10px; }

/* ── Control size tokens: sm | md | lg ──────────────────────────────
   Shared height/padding/font scale for every control (nl-input, nl-select,
   nl-filter, nl-ss-trigger). Declared after the control rules so the token
   wins on padding/font. Base nl-input/nl-select without a token behave as md. */
.ctl-sm { min-height: 32px; padding: 0.375rem 0.625rem; font-size: 0.75rem; border-radius: 0.625rem; }
.ctl-md { min-height: 40px; padding: 0.625rem 0.875rem; font-size: 0.8125rem; border-radius: 0.75rem; }
.ctl-lg { min-height: 46px; padding: 0.8125rem 1rem; font-size: 0.875rem; border-radius: 0.875rem; }

.nl-label {
    display: block;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* Toolbar search box: matches an sm dropdown (ctl-sm metrics), normal case, with
   built-in left room for the search icon (absolute-positioned at left-3 in markup).
   Replaces the old `.nl-filter pl-9` search treatment. */
.nl-search {
    background: rgba(var(--chrome-rgb),0.03);
    border: 1px solid rgba(var(--chrome-rgb),0.06);
    border-radius: 0.625rem;
    min-height: 32px;
    padding: 0.375rem 0.625rem 0.375rem 2rem;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s;
}
.nl-search:focus { border-color: rgba(59, 130, 246, 0.4); box-shadow: none; }
.nl-search::placeholder { color: var(--text-primary); opacity: 0.4; text-transform: none; }

.nl-filter {
    background: rgba(var(--chrome-rgb),0.03);
    border: 1px solid rgba(var(--chrome-rgb),0.06);
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    outline: none;
    appearance: none;
    transition: border-color 0.2s;
    /* Don't shrink in the flex filter bar (base option text must always show in full).
       A long SELECTED value (e.g. a client name) gets ellipsised at max-width. */
    flex-shrink: 0;
    max-width: 13rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.nl-filter:focus { border-color: rgba(59, 130, 246, 0.4); }

/* Placeholders = typed-text colour at low opacity, so they're always clearly dimmer
   than typed text regardless of theme/background. `body`-prefixed to outrank Tailwind
   preflight's input::placeholder (gray-400). */
body input::placeholder, body textarea::placeholder { color: var(--text-primary); opacity: 0.4; }

/* Color picker swatches */
.color-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all .15s; }
.color-swatch.selected { border-color: var(--text-primary); transform: scale(1.15); }

/* Viewer overlay (iframe documents/generators) */
#nl-viewer { position: fixed; top: 0; left: 280px; right: 0; bottom: 0; z-index: 200; display: none; flex-direction: column; background: var(--bg-dark); transition: left 0.35s ease, opacity 160ms ease; opacity: 1; }
#nl-viewer.open { display: flex; }
#nl-viewer.fading-in { opacity: 0; }
#nl-viewer-topbar { height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; border-bottom: 1px solid var(--w06); background: var(--w02); backdrop-filter: blur(12px); }
#nl-viewer-frame { flex: 1; border: none; background: var(--bg-dark); }
body.fs-mode .sidebar { display: none !important; }
body.fs-mode .main-content { margin-left: 0; }
body.fs-mode #nl-viewer { left: 0; }
body.fs-mode #nl-viewer-topbar { padding: 0 1rem; }
.vw-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem; border-radius: 0.5rem; background: var(--w04); border: 1px solid var(--w06); color: rgba(var(--chrome-rgb),0.5); font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.vw-btn:hover { background: var(--w08); color: var(--text-primary); }
.vw-title { font-size: 0.75rem; font-weight: 900; color: var(--text-primary); letter-spacing: -0.02em; }
.vw-sub { font-size: 0.55rem; font-weight: 700; color: rgba(var(--chrome-rgb),0.3); letter-spacing: 0.08em; text-transform: uppercase; }

.form-otp {
    width: 100%;
    background: var(--w03);
    border: 1px solid var(--w07);
    border-radius: 0.875rem;
    padding: 1rem;
    color: var(--text-primary);
    font-size: 24px;
    font-family: monospace;
    font-weight: 900;
    letter-spacing: 0.4em;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}
.form-otp:focus { border-color: rgba(59, 130, 246, 0.5); }
.form-otp::placeholder { color: var(--dim-1); }

/* Browser autocomplete override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-panel) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary);
}

select option {
    background-color: var(--bg-panel) !important;
    color: var(--text-primary) !important;
}
select optgroup {
    background-color: var(--bg-panel);
    color: var(--text-primary);
}

/* Panel form fields — ensures dark inputs inside modals, drawers, popups */
#nl-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
#nl-modal select, #nl-modal textarea,
#nl-drawer input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
#nl-drawer select, #nl-drawer textarea,
[id$="-modal"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[id$="-modal"] select, [id$="-modal"] textarea {
    background-color: var(--w03) !important;
    color: var(--text-primary) !important;
    border-color: var(--w08) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
/* No focus glow on modal/drawer form controls — focus = border-colour only. */
#nl-modal input:focus, #nl-modal select:focus, #nl-modal textarea:focus,
#nl-drawer input:focus, #nl-drawer select:focus, #nl-drawer textarea:focus,
[id$="-modal"] input:focus, [id$="-modal"] select:focus, [id$="-modal"] textarea:focus {
    outline: none;
    box-shadow: none;
}

/* Role-gated financial values — blurred for non-admin */
.restricted-value { transition: filter .2s; }
body:not(.is-admin) .restricted-value { filter: blur(8px); pointer-events: none; user-select: none; }

/* Dashboard Titles */
.page-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* ── Notification popover ───────────────────────────────────────────────── */
/* Anchored to the bell button via inline top/left set in JS (_positionPanel).
   Mobile turns it into a bottom sheet (see mobile media query). */
#nl-notif-panel {
    position: fixed; top: 0; left: 0;
    width: 360px; max-height: min(560px, calc(100vh - 32px));
    background: var(--bg-surface); border: 1px solid var(--w06); border-radius: 16px;
    z-index: var(--z-notif); display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.7);
    opacity: 0; transform: scale(.96); transform-origin: top left;
    pointer-events: none;
    transition: opacity .16s ease, transform .18s cubic-bezier(0.16,1,0.3,1);
}
#nl-notif-panel.open { opacity: 1; transform: scale(1); pointer-events: auto; }

#nl-notif-overlay {
    display: none; position: fixed; inset: 0;
    background: transparent; z-index: var(--z-notif-overlay);
}
#nl-notif-overlay.visible { display: block; }

.nl-bell-badge {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: -5px; right: -5px;
    min-width: 16px; height: 16px; border-radius: 99px;
    background: var(--color-error); color: #fff;
    font-size: 7px; font-weight: 900; letter-spacing: 0; line-height: 1;
    padding: 0 3px; border: 2px solid var(--bg-dark); box-sizing: border-box;
}
.nl-bell-badge.hidden { display: none; }

.notif-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    transition: background .12s; cursor: pointer;
    text-decoration: none; border: 1px solid transparent;
    color: inherit;
}
.notif-item:hover  { background: var(--w03); }
.notif-item.n-warn { border-color: rgba(249,115,22,.15); }
.notif-item.n-err  { border-color: rgba(239,68,68,.15);  }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.notif-row { position: relative; }
.notif-row .notif-item { flex: 1; min-width: 0; }
.notif-dismiss {
    position: absolute; right: 6px; top: 6px;
    width: 20px; height: 20px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    color: rgba(var(--chrome-rgb),0.2); opacity: 0; transition: all 0.15s;
}
.notif-row:hover .notif-dismiss { opacity: 1; }
.notif-dismiss:hover { background: rgba(var(--chrome-rgb),0.06); color: rgba(var(--chrome-rgb),0.5); }

/* ── Notification prompt ────────────────────────────────────────────────── */
.notif-prompt {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 1.5rem; border-radius: 1rem;
    background: rgba(59,130,246,.05); border: 1px solid rgba(59,130,246,.12);
}

/* ── Offline read-only state ────────────────────────────────────────────── */
/* The offline notice itself is a top banner via NLShared.notice; these rules
   only enforce the read-only lockdown while body.is-offline is set. */
body.is-offline button:not(#nl-logout-btn):not(#nl-bell-btn):not(#nl-search-btn):not(.nl-mobile-menu-btn):not([data-offline-ok]) {
    opacity: 0.4; pointer-events: none;
}
body.is-offline a.sidebar-link { opacity: 1; pointer-events: auto; }
body.is-offline input, body.is-offline textarea, body.is-offline select { opacity: 0.5; pointer-events: none; }

/* ── Mobile: sidebar off-canvas (hambúrguer) ────────────────────────────── */
/* A sidebar é position:fixed 260px. Em mobile sem margin no #main, tapava o
   conteúdo (páginas inalcançáveis). Aqui desliza para fora e entra com o botão. */
.nl-mobile-menu-btn { display: none; }
.nl-sidebar-backdrop { display: none; }

@media (max-width: 768px) {
    #nl-sidebar, .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 0 40px rgba(0,0,0,0.5);
    }
    /* No mobile a sidebar é sempre largura cheia (ignora o collapse de desktop) */
    html.sidebar-collapsed { --sidebar-w: 260px; }
    html.sidebar-collapsed #nl-sidebar, html.sidebar-collapsed .sidebar { width: 260px; }
    html.sidebar-mobile-open #nl-sidebar,
    html.sidebar-mobile-open .sidebar { transform: translateX(0); }

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

    /* Botão hambúrguer flutuante */
    .nl-mobile-menu-btn {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 12px; left: 12px; z-index: calc(var(--z-sidebar) + 2);
        width: 42px; height: 42px; border-radius: 12px;
        background: var(--bg-surface); border: 1px solid var(--w08);
        color: var(--text-primary); cursor: pointer;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    html.sidebar-mobile-open .nl-mobile-menu-btn { left: 272px; }

    /* Backdrop por baixo da sidebar, por cima do conteúdo */
    .nl-sidebar-backdrop {
        position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1);
        background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
    }
    html.sidebar-mobile-open .nl-sidebar-backdrop { display: block; }

    /* Folga no topo p/ não ficar sob o hambúrguer (top:12 + 42px) + padding lateral mobile */
    #main.main-content { padding: 64px 1.5rem 2rem; width: 100%; }
}

/* ── Search palette (Ctrl+K) ────────────────────────────────────────────── */
.search-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: min(20vh, 160px);
    /* Smooth open/close (JS toggles .open before insert / before remove) */
    opacity: 0; transition: opacity 0.16s ease;
}
.search-overlay.open { opacity: 1; }
.search-palette {
    width: min(580px, 92vw);
    background: var(--bg-surface); border: 1px solid var(--w08);
    border-radius: 1.25rem; overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--chrome-rgb),.03);
    opacity: 0; transform: scale(0.97) translateY(-8px);
    transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-overlay.open .search-palette { opacity: 1; transform: scale(1) translateY(0); }
.search-input-row {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--w05);
}
.search-input-row input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text-primary); font-size: 15px; font-weight: 500;
    font-family: 'Inter', sans-serif;
}
.search-input-row input::placeholder { color: var(--dim-3); }
.search-kbd {
    padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700;
    color: var(--dim-4); background: var(--w05); border: 1px solid var(--w08);
    font-family: 'Inter', sans-serif; line-height: 1.6;
}
.search-results {
    max-height: 380px; overflow-y: auto; padding: 8px;
}
.search-hint {
    text-align: center; padding: 2rem 1rem;
    color: var(--dim-3); font-size: 12px; font-weight: 600;
}
.search-group { margin-bottom: 4px; }
.search-group-label {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; font-size: 9px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.3em; color: var(--dim-4);
}
.search-result {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px;
    transition: background .1s; text-decoration: none; color: inherit;
}
.search-result:hover { background: var(--w05); }
.search-result-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Audit Trail Diff ──────────────────────────────────────────────────── */
.diff-view {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 12px; margin-top: 6px;
    background: rgba(var(--chrome-rgb),0.02); border-radius: 8px;
    border: 1px solid rgba(var(--chrome-rgb),0.05);
}
.diff-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-family: monospace;
}
.diff-field {
    color: rgba(var(--chrome-rgb),0.4); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    min-width: 90px; flex-shrink: 0;
}
.diff-before { color: #f87171; }
.diff-arrow  { color: rgba(var(--chrome-rgb),0.2); }
.diff-after  { color: #4ade80; }
.log-expand-btn {
    cursor: pointer; opacity: 0.3; transition: opacity 0.2s;
    width: 14px; height: 14px; flex-shrink: 0;
}
.log-expand-btn:hover { opacity: 0.7; }
.log-expand-btn.active { opacity: 0.8; transform: rotate(90deg); }
.log-diff-row { display: none; }
.log-diff-row.open { display: table-row; }

/* ── Bulk Selection ────────────────────────────────────────────────────── */
.bulk-bar {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
    display: none; align-items: center; gap: 16px;
    padding: 12px 20px; border-radius: 9999px;
    background: var(--bg-elevated); border: 1px solid rgba(var(--chrome-rgb),0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    z-index: var(--z-modal); opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}
.bulk-bar.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.bulk-bar-count {
    font-size: 11px; font-weight: 800; color: var(--text-primary);
    white-space: nowrap; letter-spacing: 0.05em;
}
.bulk-bar-actions { display: flex; gap: 8px; }
.bulk-bar-clear {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(var(--chrome-rgb),0.05); border: none; color: rgba(var(--chrome-rgb),0.4);
    cursor: pointer; transition: background 0.2s;
}
.bulk-bar-clear:hover { background: rgba(var(--chrome-rgb),0.1); color: var(--text-primary); }
.bulk-cb {
    appearance: none; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(107,114,128,0.45); background: transparent;
    cursor: pointer; transition: all 0.2s; flex-shrink: 0;
    position: relative;
}
.bulk-cb:hover { border-color: rgba(59,130,246,0.5); background: rgba(59,130,246,0.1); }
.bulk-cb:checked {
    background: var(--accent-blue); border-color: var(--accent-blue);
}
.bulk-cb:checked::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 8px; height: 8px; border-radius: 50%;
    background: white;
}

/* Square sibling of .bulk-cb, for checkboxes inside forms and modals. It was used by
   three modules (member form, document form, invoice issue) and defined nowhere, so those
   rendered as raw OS checkboxes inside otherwise fully styled panels. appearance:none is
   what makes GTK/Firefox on Linux stop drawing its own. */
.nl-checkbox {
    appearance: none; width: 18px; height: 18px; border-radius: 5px;
    border: 2px solid rgba(107,114,128,0.45); background: transparent;
    cursor: pointer; transition: all 0.2s; flex-shrink: 0;
    position: relative;
}
.nl-checkbox:hover { border-color: rgba(59,130,246,0.5); background: rgba(59,130,246,0.1); }
.nl-checkbox:focus { outline: none; border-color: var(--accent-blue); }
.nl-checkbox:checked { background: var(--accent-blue); border-color: var(--accent-blue); }
.nl-checkbox:checked::after {
    content: ''; position: absolute; top: 1px; left: 4.5px;
    width: 5px; height: 9px; border: solid white;
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.nl-checkbox:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Mobile responsive ────────────────────────────────────────────────────────── */
/* A sidebar off-canvas mobile (botão + backdrop) vive no bloco "Mobile: sidebar
   off-canvas" acima (.nl-mobile-menu-btn / html.sidebar-mobile-open). O antigo sistema
   #nl-mobile-toggle / .sidebar.mobile-open foi removido (era duplicado). */
@media (max-width: 768px) {
    /* Bottom sheet — !important beats the inline top/left from _positionPanel */
    #nl-notif-panel {
        left: 8px !important; right: 8px !important; width: auto !important;
        top: auto !important; bottom: 8px !important;
        max-height: 80vh; border-radius: 20px; transform-origin: bottom center;
    }
}

/* ─── Density: Small ────────────────────────────────────────────── */
body.density-small .liquid-glass,
body.density-small .liquid-glass-bordered { padding: 1rem 1.25rem !important; border-radius: 1rem; }
body.density-small .main-content { padding: 2rem 3rem !important; }
body.density-small .text-3xl { font-size: 1.25rem !important; }
body.density-small .text-xl { font-size: 1rem !important; }
body.density-small .mb-12 { margin-bottom: 1.5rem !important; }
body.density-small .mb-10 { margin-bottom: 1.25rem !important; }
body.density-small .mb-16 { margin-bottom: 2rem !important; }
body.density-small .gap-8 { gap: 1rem !important; }
body.density-small .gap-6 { gap: 0.75rem !important; }
body.density-small .p-10 { padding: 1.25rem !important; }
body.density-small .p-8 { padding: 1rem !important; }
body.density-small .p-6 { padding: 0.75rem !important; }
body.density-small .py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
body.density-small .py-12 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
body.density-small .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
body.density-small .py-4 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
body.density-small .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
body.density-small .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
body.density-small .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
body.density-small .px-5 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
body.density-small .px-4 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
body.density-small .p-5 { padding: 0.875rem !important; }
body.density-small .p-4 { padding: 0.625rem !important; }
body.density-small .gap-4 { gap: 0.625rem !important; }
body.density-small .gap-3 { gap: 0.5rem !important; }
body.density-small .mb-8 { margin-bottom: 1.25rem !important; }
body.density-small .mb-6 { margin-bottom: 0.875rem !important; }
body.density-small .mb-4 { margin-bottom: 0.625rem !important; }
body.density-small .text-5xl { font-size: 2rem !important; }
body.density-small .text-4xl { font-size: 1.75rem !important; }
body.density-small .text-2xl { font-size: 1.125rem !important; }
body.density-small .ladder-breadcrumb { margin-bottom: 1.5rem; }
body.density-small .nl-tab { padding: 0.4rem 0.875rem; }
body.density-small .nl-tab-pill { padding: 0.3rem 0.625rem; }
body.density-small .comm-sub { padding: 0.375rem 0.75rem; font-size: 8px; }
body.density-small .btn-primary,
body.density-small .btn-ghost,
body.density-small .btn-secondary,
body.density-small .btn-success,
body.density-small .btn-danger { padding: 0.5rem 1.25rem; }
body.density-small .btn-primary-full { padding: 0.75rem; }
body.density-small .nl-input,
body.density-small .form-input,
body.density-small .nl-select { padding: 0.5rem 0.75rem; font-size: 0.8rem; border-radius: 0.625rem; }
body.density-small .page-error { padding: 2rem 1rem; }
body.density-small .empty-state-rich { padding: 2rem 1rem; }

/* ─── Density: Large ────────────────────────────────────────────── */
body.density-large .liquid-glass,
body.density-large .liquid-glass-bordered { padding: 2.5rem 2.75rem !important; border-radius: 1.75rem; }
body.density-large .main-content { padding: 4rem 5rem !important; }
body.density-large .text-5xl { font-size: 3.5rem !important; }
body.density-large .text-4xl { font-size: 2.75rem !important; }
body.density-large .text-3xl { font-size: 2.25rem !important; }
body.density-large .text-2xl { font-size: 1.75rem !important; }
body.density-large .text-xl { font-size: 1.5rem !important; }
body.density-large .mb-16 { margin-bottom: 5rem !important; }
body.density-large .mb-12 { margin-bottom: 4rem !important; }
body.density-large .mb-10 { margin-bottom: 3.5rem !important; }
body.density-large .mb-8 { margin-bottom: 2.75rem !important; }
body.density-large .mb-6 { margin-bottom: 2rem !important; }
body.density-large .mb-4 { margin-bottom: 1.25rem !important; }
body.density-large .gap-8 { gap: 2.5rem !important; }
body.density-large .gap-6 { gap: 2rem !important; }
body.density-large .gap-4 { gap: 1.25rem !important; }
body.density-large .gap-3 { gap: 1rem !important; }
body.density-large .p-10 { padding: 3.5rem !important; }
body.density-large .p-8 { padding: 2.75rem !important; }
body.density-large .p-6 { padding: 2rem !important; }
body.density-large .p-5 { padding: 1.75rem !important; }
body.density-large .p-4 { padding: 1.25rem !important; }
body.density-large .py-16 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
body.density-large .py-12 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
body.density-large .py-8 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
body.density-large .py-4 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
body.density-large .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
body.density-large .px-8 { padding-left: 2.75rem !important; padding-right: 2.75rem !important; }
body.density-large .px-6 { padding-left: 2rem !important; padding-right: 2rem !important; }
body.density-large .px-5 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
body.density-large .px-4 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
body.density-large .ladder-breadcrumb { margin-bottom: 3rem; }
body.density-large .nl-tab { padding: 0.75rem 1.5rem; font-size: 12px; }
body.density-large .nl-tab-pill { padding: 0.5rem 1rem; }
body.density-large .comm-sub { padding: 0.5rem 1rem; font-size: 10px; }
body.density-large .btn-primary,
body.density-large .btn-ghost,
body.density-large .btn-secondary,
body.density-large .btn-success,
body.density-large .btn-danger { padding: 0.875rem 2rem; font-size: 13px; }
body.density-large .btn-primary-full { padding: 1.125rem; font-size: 13px; }
body.density-large .nl-input,
body.density-large .form-input,
body.density-large .nl-select { padding: 0.875rem 1.125rem; font-size: 0.95rem; border-radius: 0.875rem; }
body.density-large .page-error { padding: 4rem 2.5rem; }
body.density-large .empty-state-rich { padding: 4rem 2.5rem; }

/* ═══ Light Mode ═══════════════════════════════════════════════════ */
body.light-mode {
    --bg-dark: #f5f5f7;
    --bg-panel: #ffffff;
    --bg-surface: #f0f0f2;
    --bg-elevated: #ffffff;
    --bg-tooltip: #1e293b;
    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --text-muted: #6b7280;
    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-error: #dc2626;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    --text-disabled: #d1d5db;
    --dim-1: #9ca3af;
    --dim-2: #6b7280;
    --dim-3: #4b5563;
    --dim-4: #374151;
    --dim-5: #1f2937;
    --dim-6: #111827;
    --dim-7: #030712;
    --chrome-rgb: 0, 0, 0;
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(0, 0, 0, 0.08);
    color-scheme: light;
}

body.light-mode { background-color: var(--bg-dark); color: var(--text-primary); }

/* Tailwind color class overrides */
body.light-mode .text-white { color: var(--text-primary) !important; }
body.light-mode .text-gray-400 { color: #6b7280 !important; }
body.light-mode .text-gray-500 { color: #4b5563 !important; }
body.light-mode .text-gray-600 { color: #6b7280 !important; }
body.light-mode .text-gray-700 { color: #9ca3af !important; }

/* Keep white text on colored backgrounds */
body.light-mode .btn-primary,
body.light-mode .btn-primary-full,
body.light-mode .btn-primary:hover,
body.light-mode .btn-primary-full:hover { color: #fff !important; }
body.light-mode .nl-bell-badge { color: #fff !important; }
body.light-mode .sidebar:hover { box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12); }

/* White-opacity backgrounds → black-opacity via attribute selectors */
body.light-mode [class*="bg-white\\/[0.0"],
body.light-mode [class*="bg-white/[0.0"] { background-color: rgba(0,0,0,0.04) !important; }
body.light-mode [class*="border-white\\/[0.0"],
body.light-mode [class*="border-white/[0.0"] { border-color: rgba(0,0,0,0.08) !important; }
body.light-mode [class*="divide-white\\/[0.0"] > * + *,
body.light-mode [class*="divide-white/[0.0"] > * + * { border-color: rgba(0,0,0,0.06) !important; }

/* Hover states with white-opacity */
body.light-mode [class*="hover\\:bg-white"]:hover { background-color: rgba(0,0,0,0.04) !important; }

/* Form fields */
body.light-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.light-mode select,
body.light-mode textarea {
    color-scheme: light !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
body.light-mode input:-webkit-autofill,
body.light-mode input:-webkit-autofill:hover,
body.light-mode input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-panel) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
body.light-mode select option {
    background-color: var(--bg-panel);
    color: var(--text-primary);
}

/* Scrollbar */
body.light-mode ::-webkit-scrollbar-track { background: var(--bg-dark); }
body.light-mode ::-webkit-scrollbar-thumb { background: #d1d5db; }

/* Sidebar */
body.light-mode .sidebar { border-right-color: rgba(0,0,0,0.08); }

/* Notification panel shadow */
body.light-mode #nl-notif-panel { box-shadow: 0 24px 60px rgba(0,0,0,.16); }
body.light-mode #nl-timer-indicator .nl-timer-detail,
body.light-mode .sidebar-footer-pop { box-shadow: 0 24px 60px rgba(0,0,0,.16); }

/* Search palette shadow */
body.light-mode .search-palette { box-shadow: 0 25px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05); }

/* Bulk bar */
body.light-mode .bulk-bar { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }


/* Modal overlay stays dark */
body.light-mode .nl-modal-overlay { background: rgba(0,0,0,0.5); }

/* Liquid glass light variant */
body.light-mode .liquid-glass { backdrop-filter: blur(20px); }
body.light-mode .liquid-glass-bordered { backdrop-filter: blur(20px); }
body.light-mode .liquid-glass-bordered:hover { border-color: rgba(37, 99, 235, 0.3); }

/* ═══ Chat Engine (ce-) — shared message rendering ═══════════════ */

/* Message row */
.msg-row {
    position: relative;
    padding: 3px 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.5rem;
}
.msg-row:hover { background: rgba(var(--chrome-rgb),0.015); }

.ce-msg-group {
    display: flex;
    gap: 1rem;
}
.ce-avatar-col {
    width: 36px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.msg-continuation .ce-avatar-col {
    visibility: hidden;
}
.ce-time-inline {
    visibility: visible;
    display: none;
    font-size: 8px;
    color: var(--dim-2);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 20px;
}
.msg-continuation:hover .ce-avatar-col .ce-time-inline { display: block; }

.ce-msg-body { flex: 1; min-width: 0; }
.ce-msg-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 3px; }
.ce-msg-name { font-size: 13px; font-weight: 700; }
.ce-msg-time { font-size: 9px; color: var(--dim-2); font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; }
.ce-msg-text { font-size: 13px; color: var(--dim-7); line-height: 1.55; word-break: break-word; }
.ce-msg-text.mine { color: var(--text-primary); }
.ce-msg-edited {
    font-size: 8px; color: var(--dim-3); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.15em;
    margin-left: 6px;
}

/* Entity badge */
.ce-entity-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--text-muted); background: rgba(var(--chrome-rgb),0.03); border: 1px solid rgba(var(--chrome-rgb),0.06);
    border-radius: 99px; padding: 1px 7px; margin-left: 6px; vertical-align: middle;
    cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.ce-entity-badge:hover { background: rgba(59,130,246,0.08); color: var(--accent-blue); border-color: rgba(59,130,246,0.15); }

/* System message */
.ce-system {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; margin: 2px 0;
}
.ce-system::before, .ce-system::after {
    content: ''; flex: 1; height: 1px; background: rgba(var(--chrome-rgb),0.03);
}
.ce-system-text {
    font-size: 10px; color: var(--dim-3); font-weight: 600; white-space: nowrap;
    display: flex; align-items: center; gap: 5px;
}
.ce-system-text i { opacity: 0.5; }
.ce-action-inline {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
    padding: 2px 8px; border-radius: 4px;
    cursor: pointer; border: 1px solid; transition: all 0.15s; margin-left: 4px;
}
.ce-action-inline.primary { color: var(--color-success); border-color: rgba(34,197,94,0.2); background: rgba(34,197,94,0.06); }
.ce-action-inline.primary:hover { background: rgba(34,197,94,0.15); }
.ce-action-inline.secondary { color: var(--color-error); border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.06); }
.ce-action-inline.secondary:hover { background: rgba(239,68,68,0.15); }
.ce-action-inline.done { opacity: 0.3; pointer-events: none; text-decoration: line-through; }

/* Hover actions toolbar */
.ce-actions {
    position: absolute; top: -12px; right: 12px;
    display: none; align-items: center; gap: 1px;
    background: var(--bg-elevated); border: 1px solid rgba(var(--chrome-rgb),0.06);
    border-radius: 6px; padding: 2px; z-index: 5;
}
.msg-row:hover .ce-actions { display: flex; }
.ce-action-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; cursor: pointer; color: var(--dim-4);
    transition: all 0.1s; background: none; border: none;
}
.ce-action-btn:hover { background: rgba(var(--chrome-rgb),0.06); color: var(--dim-7); }
.ce-action-btn.ce-danger:hover { color: var(--color-error); background: rgba(239,68,68,0.08); }

/* Reply reference (inline above message) */
.ce-reply-ref {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px; padding-left: 52px;
    font-size: 11px; color: var(--dim-3); cursor: pointer;
}
.ce-reply-ref:hover { color: var(--dim-5); }
.ce-reply-bar { width: 2px; height: 12px; border-radius: 1px; background: var(--dim-2); flex-shrink: 0; }
.ce-reply-author { font-weight: 700; color: var(--dim-4); }
.ce-reply-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; }

/* Reply/Edit banners (composing) */
.ce-reply-banner, .ce-edit-banner {
    display: none; align-items: center; gap: 0.75rem;
    padding: 0.6rem 1rem; border-radius: 0 0.5rem 0.5rem 0;
    margin-bottom: 0.5rem; font-size: 12px; color: var(--dim-5);
}
.ce-reply-banner { background: rgba(59,130,246,0.06); border-left: 3px solid var(--accent-blue); }
.ce-edit-banner  { background: rgba(234,179,8,0.06);  border-left: 3px solid var(--color-warning); }
.ce-reply-banner.active, .ce-edit-banner.active { display: flex; }
.ce-banner-close {
    margin-left: auto; cursor: pointer; color: var(--dim-4);
    transition: color 0.1s; background: none; border: none;
    display: flex; align-items: center;
}
.ce-banner-close:hover { color: var(--text-primary); }

/* Pinned bar (Discord-style) */
.ce-pinned-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(234,179,8,0.04);
    border-bottom: 1px solid rgba(var(--chrome-rgb),0.04);
    font-size: 11px; font-weight: 600; color: var(--color-warning);
    cursor: pointer; user-select: none;
    transition: background 0.15s;
}
.ce-pinned-bar:hover { background: rgba(234,179,8,0.08); }
.ce-pinned-chevron { transition: transform 0.15s; }
.has-pins { position: relative; }

/* Pinned popover */
.ce-pinned-popover {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    max-height: 320px; overflow-y: auto;
    background: var(--bg-panel, #1a1a2e);
    border: 1px solid rgba(var(--chrome-rgb),0.08);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.ce-pinned-popover.hidden { display: none; }
.ce-pinned-popover-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-warning);
    border-bottom: 1px solid rgba(var(--chrome-rgb),0.04);
    position: sticky; top: 0; background: var(--bg-panel, #1a1a2e);
}
.ce-pinned-close {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 2px; border-radius: 4px; display: flex;
}
.ce-pinned-close:hover { color: var(--text-primary); background: rgba(var(--chrome-rgb),0.06); }
.ce-pinned-popover-list { padding: 4px; }
.ce-pinned-msg {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 6px; cursor: pointer;
    font-size: 12px; color: var(--dim-5); margin-bottom: 2px;
    transition: background 0.1s;
}
.ce-pinned-msg:hover { background: rgba(var(--chrome-rgb),0.04); }
.ce-pin-author { font-weight: 700; color: var(--dim-6); font-size: 11px; }
.ce-pin-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim-5); }
.ce-pin-date { font-size: 10px; color: var(--dim-4); }

/* Date separator */
.ce-date-sep {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.5rem 0 0.5rem;
}
.ce-date-sep::before, .ce-date-sep::after {
    content: ''; flex: 1; height: 1px; background: rgba(var(--chrome-rgb),0.05);
}
.ce-date-sep span {
    font-size: 9px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.2em; color: var(--dim-1);
}

/* @Mention */
.mention-hl { color: #60a5fa; font-weight: 600; }
.ce-mention-popup {
    position: absolute; bottom: 100%; left: 0; right: 0;
    max-height: 200px; overflow-y: auto;
    background: var(--bg-elevated); border: 1px solid rgba(var(--chrome-rgb),0.08);
    border-radius: 10px; padding: 4px;
    display: none; z-index: 10; margin-bottom: 6px;
}
.ce-mention-popup.open { display: block; }
.ce-mention-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 6px; cursor: pointer;
    font-size: 12px; color: var(--dim-7); transition: background 0.1s;
}
.ce-mention-opt:hover, .ce-mention-opt.active { background: rgba(59,130,246,0.12); color: var(--text-primary); }
.ce-mo-name { font-weight: 700; }
.ce-mo-cargo { font-size: 9px; color: var(--dim-4); margin-left: auto; }

/* Empty state */
.ce-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 80px;
    font-size: 9px; color: var(--dim-2); font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.2em;
}

/* ─── Compact mode (drawers, popovers) ──────────────────────────── */
.chat-compact .msg-row { padding: 2px 0.25rem; margin: 0 -0.25rem; }
.chat-compact .ce-msg-group { gap: 0.5rem; }
.chat-compact .ce-avatar-col { width: 24px; }
.chat-compact .ce-msg-name { font-size: 11px; }
.chat-compact .ce-msg-text { font-size: 12px; }
.chat-compact .ce-msg-time { font-size: 8px; }
.chat-compact .ce-actions { top: -8px; right: 4px; }
.chat-compact .ce-action-btn { width: 20px; height: 20px; }
.chat-compact .ce-date-sep { display: none; }
.chat-compact .ce-reply-ref { padding-left: 30px; font-size: 10px; }
.chat-compact .ce-pinned-bar { padding: 4px 8px; font-size: 10px; }
.chat-compact .ce-pinned-msg { padding: 5px 8px; font-size: 11px; }

/* ─── CSV Import Modal + Batch Selector ───────────────────────────────────── */
.import-card {
    background: rgba(var(--chrome-rgb),0.02);
    border: 1px solid rgba(var(--chrome-rgb),0.06);
    border-radius: 1.5rem; padding: 2rem;
}
.import-card-header {
    font-size: 8px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 1.25rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.drop-zone {
    border: 2px dashed rgba(var(--chrome-rgb),0.08); border-radius: 1.25rem;
    padding: 3.5rem 2rem; text-align: center; cursor: pointer;
    transition: all 0.2s; background: rgba(var(--chrome-rgb),0.01);
}
.drop-zone:hover, .drop-zone.drag-over {
    border-color: rgba(59,130,246,0.5); background: rgba(59,130,246,0.04);
}
.preview-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.preview-table th {
    text-align: left; padding: 0.625rem 0.875rem;
    font-size: 8px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.2em; color: var(--text-muted);
    border-bottom: 1px solid rgba(var(--chrome-rgb),0.05); white-space: nowrap;
}
.preview-table td {
    padding: 0.625rem 0.875rem; color: var(--text-tertiary);
    border-bottom: 1px solid rgba(var(--chrome-rgb),0.03);
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-table tr:last-child td { border-bottom: none; }
.preview-table tr:hover td { background: rgba(var(--chrome-rgb),0.02); }
.import-col-tag {
    font-size: 9px; font-family: 'Inter', monospace; color: var(--text-muted);
    background: rgba(var(--chrome-rgb),0.02); border: 1px solid rgba(var(--chrome-rgb),0.05);
    padding: 0.375rem 0.75rem; border-radius: 0.5rem; display: inline-block;
}
.import-col-tag.required { border-color: rgba(59,130,246,0.2); color: var(--accent-blue); }
/* Batch selector — aligned to the .nl-ss-* combobox tokens (sm size / .ctl-sm)
   so it matches the other filter dropdowns; keeps its extra structure (search,
   sections, per-batch archive/restore). */
.batch-selector { position: relative; }
.batch-trigger {
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 32px; padding: 0.375rem 0.625rem;
    background: rgba(var(--chrome-rgb),0.03); border: 1px solid rgba(var(--chrome-rgb),0.06);
    border-radius: 0.625rem; cursor: pointer;
    font-size: 0.75rem; font-weight: 400; color: #6b7280; /* gray-500 — matches nl-ss placeholder */
    font-family: inherit; -webkit-appearance: none; appearance: none;
    outline: none; transition: border-color 0.2s;
}
.batch-trigger:hover { border-color: rgba(59,130,246,0.4); }
/* A batch is selected → label brightens like an nl-ss trigger with a value. */
.batch-trigger.active { border-color: rgba(59,130,246,0.4); color: var(--text-primary); }
/* Trigger chevron flips while the dropdown is open (matches nl-ss + More Filters). */
.batch-chev { transition: transform .18s ease; transform: rotate(0deg); }
.batch-selector:has(.batch-dropdown.open) .batch-chev { transform: rotate(180deg); }
.batch-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-popover);
    min-width: 320px; max-height: 400px;
    background: var(--bg-panel); border: 1px solid rgba(var(--chrome-rgb),0.08);
    border-radius: 0.875rem; overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    /* Smooth open AND close (matches the More Filters popover). */
    transform-origin: top left;
    opacity: 0; transform: translateY(-6px) scale(0.98);
    visibility: hidden; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.batch-dropdown.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .batch-dropdown, .batch-chev { transition: none; } }
.batch-dropdown-search {
    width: 100%; padding: 0.5rem 0.75rem;
    background: transparent; border: none; border-bottom: 1px solid rgba(var(--chrome-rgb),0.06);
    color: var(--text-primary); font-size: 0.75rem; font-family: inherit; outline: none;
}
.batch-dropdown-search::placeholder { color: var(--text-disabled); }
.batch-list { max-height: 280px; overflow-y: auto; padding: 0.5rem; }
.batch-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.4rem 0.5rem; border-radius: 0.5rem;
    cursor: pointer; transition: background 0.15s;
}
.batch-item:hover { background: rgba(var(--chrome-rgb),0.05); }
.batch-item.selected { background: rgba(59,130,246,0.08); }
.batch-item-name { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); }
.batch-item-meta { font-size: 8px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.batch-section-label {
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: 8px; font-weight: 900; color: var(--text-disabled);
    text-transform: uppercase; letter-spacing: 0.15em;
}
.batch-item-archive {
    padding: 0.25rem; border-radius: 0.375rem;
    color: var(--text-muted); cursor: pointer; transition: all 0.1s;
    background: transparent; border: none;
}
.batch-item-archive:hover { color: var(--text-tertiary); background: rgba(var(--chrome-rgb),0.05); }

/* ─── Loading skeletons ───────────────────────────────────────────────────────
   The generic shimmer primitive (.nl-skel / .nl-skel-line / .nl-skel-count) now lives
   in the shared module NLShared.skeleton (shared/js/skeleton.js), which injects its own
   CSS. Only the funnel-specific overrides stay here. */
/* Skeleton placeholders must NOT run the panel entrance animations — otherwise the
   real render replays them and the load looks like it happens twice. The skeleton is an
   instant wireframe; only the real content animates in (once). */
.nl-skel-col, .nl-skel-col *:not(.nl-skel), .nl-skel-sumcard { animation: none !important; }
/* Skeleton cards mimic .lead-card but never react to hover/click. */
.lead-card.nl-skel-card { pointer-events: none; cursor: default; }
.lead-card.nl-skel-card:hover { transform: none; border-color: rgba(var(--chrome-rgb),0.05); background: rgba(var(--chrome-rgb),0.02); }

/* ═══ Button Loading State ═════════════════════════════════════════ */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}
.btn-loading .btn-text { opacity: 0; }
.btn-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px; height: 16px;
    border: 2px solid rgba(var(--chrome-rgb), 0.15);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: nl-spin 0.6s linear infinite;
}
@keyframes nl-spin { to { transform: rotate(360deg); } }

/* ═══ Page Error State ════════════════════════════════════════════ */
.page-error {
    text-align: center;
    padding: 4rem 2rem;
}
.page-error .error-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.08);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--color-error);
}
.page-error .error-icon i,
.page-error .error-icon svg { width: 24px; height: 24px; }
.page-error .error-title {
    font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px;
}
.page-error .error-sub {
    font-size: 10px; color: var(--text-muted); margin-bottom: 20px;
}
.page-error .error-retry {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 20px; border-radius: 999px;
    background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--color-error); font-size: 9px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.15em;
    cursor: pointer; transition: all 0.15s;
}
.page-error .error-retry:hover {
    background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4);
}

/* ═══ Inline Field Error ══════════════════════════════════════════ */
.field-error {
    font-size: 10px; color: var(--color-error); margin-top: 4px;
    display: flex; align-items: center; gap: 4px;
}
.nl-input.has-error,
.form-input.has-error,
.nl-select.has-error {
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* ═══ Reduced Motion ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══ High Contrast ════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
    :root {
        --dim-1: #888;
        --dim-2: #999;
        --dim-3: #aaa;
        --dim-4: #bbb;
        --dim-5: #ccc;
        --dim-6: #ddd;
        --dim-7: #eee;
        --text-muted: #999;
        --text-tertiary: #bbb;
        --text-disabled: #777;
    }
    body.light-mode {
        --dim-1: #555;
        --dim-2: #444;
        --dim-3: #333;
        --dim-4: #222;
        --dim-5: #111;
        --dim-6: #000;
        --dim-7: #000;
        --text-muted: #444;
        --text-tertiary: #333;
        --text-disabled: #666;
    }
}

/* ── Shared entrance animations ─────────────────────────────── */
@keyframes nl-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes nl-item-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes nl-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.nl-anim-panel { animation: nl-panel-in 0.4s cubic-bezier(0.16,1,0.3,1) backwards; }
.nl-anim-item  { animation: nl-item-in 0.3s cubic-bezier(0.16,1,0.3,1) backwards; }
.nl-anim-fade  { animation: nl-fade-in 0.3s ease backwards; }

/* ── Participant picker (NL.eventForm; shared so it works on every page) ───── */
.part-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 2px;
    border-radius:9999px; background:rgba(var(--chrome-rgb),.06); border:1px solid rgba(var(--chrome-rgb),.08);
    font-size:10px; font-weight:600; color:var(--dim-7); cursor:default; }
.part-chip button { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:0; line-height:1; }
.part-chip button:hover { color:#f87171; }
.part-dropdown { position:absolute; top:100%; left:0; right:0; max-height:160px; overflow-y:auto;
    background:var(--bg-elevated); border:1px solid rgba(var(--chrome-rgb),.1); border-radius:12px; z-index:10;
    box-shadow:0 8px 32px rgba(0,0,0,.6); }
.part-dropdown-item { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer;
    font-size:11px; color:var(--dim-6); transition:background .1s; }
.part-dropdown-item:hover { background:rgba(var(--chrome-rgb),.06); color:var(--text-primary); }