/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* neaMetrics brand: charcoal + crimson + grey (sampled from the logo) */
    --primary: #9E274A; /* crimson — primary action / brand accent */
    --primary-hv: #85203E; /* crimson dark (hover) */
    --accent2: #9E274A; /* crimson — attention badges */
    --accent2-ink: #FFFFFF;
    --brand-grey: #A3A3A3; /* grey — the logo's second loop */
    --danger: #9E274A; /* breach / danger = brand crimson */
    --danger-bg: #F6E7EC;
    --danger-hv: #85203E;
    --warning: #B47908;
    --warning-bg: #F6ECD6;
    --success: #1F7A4D;
    --success-bg: #E9F1EC;
    --info: #174A8B; /* blue — awaiting client */
    --info-bg: #EAF0F7;
    --bg: #F4F4F5; /* page (neutral grey) */
    --bg-sub: #F7F7F8;
    --card: #FFFFFF;
    --card-head: #F7F7F8;
    --border: #E5E5E7;
    --border-2: #EDEDEF;
    --inv-green: #00A95C; /* quotation/invoice rules */
    --line-in: #DBDBDE; /* input border */
    --line-hov: #BFBFC4;
    --text: #221F1F; /* charcoal ink (brand) */
    --ink2: #3A3A3E;
    --ink3: #55555A;
    --muted: #6B6B70;
    --muted2: #8A8A90;
    --radius: 10px;
    /* Sidebar (charcoal) */
    --sidebar: #221F1F;
    --sidebar-active: rgba(255, 255, 255, 0.08);
    --sidebar-ink: #A0A0A0;
    --glow: rgba(158, 39, 74, 0.30);
}

body {
    margin: 0;
    font-family: 'Figtree', system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--sidebar);
    color: var(--sidebar-ink);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.content-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.content-body {
    flex: 1;
    padding: 28px;
}

.page-footer {
    padding: 16px 28px 20px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

/* ── Top bar ─────────────────────────────────────────────────────────────────── */
.topbar {
    height: 66px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 28px;
    border-bottom: 1px solid var(--border);
    background: rgba(244, 246, 250, 0.85);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-titles {
    min-width: 0;
    flex: 0 1 auto;
}

.topbar-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-sub {
    font-size: 12.5px;
    color: var(--muted);
}

.topbar-spacer {
    flex: 1;
}

.topbar-lastsync {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
}

.btn-topbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--line-in);
    background: #fff;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink2);
    cursor: pointer;
    transition: border-color 0.12s;
    white-space: nowrap;
}

    .btn-topbar:hover:not(:disabled) {
        border-color: var(--line-hov);
    }

    .btn-topbar:disabled {
        opacity: 0.7;
        cursor: default;
    }

.sync-ic.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sync-ic.spin {
        animation: none;
    }
}

@media (max-width: 720px) {
    .sidebar {
        width: 64px;
    }

        .sidebar .nav-label, .sidebar .sidebar-brand,
        .sidebar .sidebar-tag, .sidebar .nav-group,
        .sidebar .sidebar-userinfo,
        .sidebar .nav-group-toggle {
            display: none;
        }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.dash-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-icon {
    font-size: 1.6rem;
}

.dash-title h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.client-assign-bar {
    display: contents;
}

.client-assign-row {
    display: contents;
}

@media (max-width: 600px) {
    .client-assign-bar {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .client-assign-row {
        display: flex;
        gap: 8px;
    }

    .client-assign-row .triage-select,
    .client-assign-row .triage-newname {
        flex: 1;
        max-width: none;
        width: auto;
    }
}

.last-sync {
    color: var(--muted);
    font-size: 0.8rem;
}

.btn-sync {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-sync:hover:not(:disabled) {
        background: var(--primary-hv);
    }

    .btn-sync:disabled, .btn-sync.syncing {
        opacity: 0.65;
        cursor: not-allowed;
    }

.form-hint {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--muted);
}

.board-owner-select {
    width: auto;
    min-width: 160px;
    padding: 6px 10px;
    font-size: 0.85rem;
}

.owner-pick {
    position: relative;
    display: inline-block;
}

.owner-pick-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 160px;
    justify-content: space-between;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

.owner-pick-caret {
    color: var(--muted);
    font-size: 0.75rem;
}

.owner-pick-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    width: 260px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 6px;
}

.owner-pick-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.owner-pick-grouphead {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 6px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    cursor: pointer;
}

.owner-pick-count {
    margin-left: auto;
    font-weight: 600;
    color: var(--muted);
}

.owner-pick-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 7px 10px 7px 22px;
    font-size: 0.85rem;
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
}

    .owner-pick-item:hover {
        background: var(--bg);
    }

    .owner-pick-item.sel {
        background: var(--primary);
        color: #fff;
    }

.composer {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    width: min(1400px, calc(100vw - 32px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.composer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 10px;
}

.composer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.8rem;
}

    .composer-chip button {
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1;
    }

.composer-chip-empty {
    font-size: 0.8rem;
    color: var(--muted);
}

.composer-pick-label,
.composer-group-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    margin-top: 8px;
}

.composer-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 0;
}

.composer-pick {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
}

    .composer-pick:hover {
        background: var(--bg);
    }

    .composer-pick.on {
        background: var(--primary);
        color: #fff;
    }

.closed-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.closed-page-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.closed-page-header h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.65rem, 2.4vw, 2.15rem);
    letter-spacing: -0.03em;
}

.closed-page-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.closed-total-badge {
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
    box-shadow: 0 2px 7px rgba(20, 30, 55, 0.04);
}

.closed-filter-card {
    overflow: visible;
    padding: 17px 18px 18px;
}

.closed-filter-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.closed-filter-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
}

.closed-filter-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.closed-quick-ranges {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg-sub);
}

.closed-range-button {
    min-height: 31px;
    padding: 6px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s,
        box-shadow 0.15s;
}

.closed-range-button:hover:not(.active) {
    background: #FFFFFF;
    color: var(--text);
}

.closed-range-button.active {
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 3px 8px rgba(158, 39, 74, 0.2);
}

.closed-filters {
    display: grid;
    grid-template-columns: minmax(145px, 0.65fr)
        minmax(145px, 0.65fr) minmax(250px, 1.7fr) auto;
    align-items: end;
    gap: 12px;
}

.closed-filter-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.closed-filter-field > span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 750;
}

.closed-filter-field .form-input {
    max-width: none;
    min-height: 39px;
    margin: 0;
    border-radius: 9px;
}

.closed-search-input {
    position: relative;
}

.closed-search-input > span {
    position: absolute;
    top: 50%;
    left: 11px;
    color: var(--muted2);
    font-size: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.closed-search-input .form-input {
    padding-left: 32px;
}

.closed-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.closed-apply-button,
.closed-filter-actions .clients-action-button {
    min-height: 39px;
    white-space: nowrap;
}

.closed-filter-error {
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid #EAC7C7;
    border-radius: 9px;
    background: #FFF2F2;
    color: #A72C2C;
    font-size: 0.76rem;
    font-weight: 650;
}

.closed-results-card {
    box-shadow: 0 6px 22px rgba(20, 30, 55, 0.04);
}

.closed-results-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    background: #FFFFFF;
}

.closed-results-header > div:first-child {
    display: grid;
    gap: 2px;
}

.closed-results-header > div:first-child > span {
    color: var(--muted2);
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.closed-results-header > div:first-child > strong {
    font-size: 0.85rem;
}

.closed-result-stats {
    display: flex;
    align-items: center;
    gap: 7px;
}

.closed-result-stats > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--bg-sub);
    color: var(--muted);
    font-size: 0.68rem;
}

.closed-result-stats strong {
    color: var(--text);
}

.closed-stat-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--bg-sub);
    color: var(--muted);
    font-size: 0.68rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .closed-stat-filter:hover {
        border-color: var(--border);
    }

    .closed-stat-filter.active {
        background: var(--primary-soft, rgba(158, 39, 74, 0.1));
        border-color: var(--primary);
        color: var(--primary);
    }

        .closed-stat-filter.active strong {
            color: var(--primary);
        }

.closed-stat-clear {
    border: none;
    background: none;
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 4px;
}

    .closed-stat-clear:hover {
        text-decoration: underline;
    }

.closed-cap-note {
    margin-left: auto;
    color: var(--warning);
    font-size: 0.7rem;
    font-weight: 700;
}

.closed-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 2fr) minmax(130px, 1.1fr)
        minmax(130px, 1.1fr) minmax(120px, 0.9fr)
        minmax(160px, 1.3fr) minmax(150px, 1fr);
    gap: 12px;
    align-items: center;
}

.closed-row {
    position: relative;
    padding-right: 42px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.closed-row:hover {
    background: #FBF8F9;
    box-shadow: inset 3px 0 var(--primary);
}

.closed-subject {
    overflow: hidden;
    color: var(--text);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.closed-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--border);
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

.closed-badge-replied {
    background: #EAF7F0;
    color: #24784D;
}

.closed-row-arrow {
    position: absolute;
    top: 50%;
    right: 17px;
    color: var(--primary);
    font-size: 0.9rem;
    transform: translateY(-50%);
    transition: transform 0.15s;
}

.closed-row:hover .closed-row-arrow {
    transform: translate(3px, -50%);
}

.closed-empty-state {
    display: grid;
    justify-items: center;
    padding: 48px 20px;
    text-align: center;
}

.closed-empty-state > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 13px;
    background: #EAF7F0;
    color: #24784D;
    font-size: 1.1rem;
    font-weight: 800;
}

.closed-empty-state p {
    margin: 5px 0 15px;
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 980px) {
    .closed-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .closed-search-field {
        grid-column: 1 / -1;
    }

    .closed-filter-actions {
        grid-column: 1 / -1;
    }

    .list-head.closed-grid {
        display: none;
    }

    .closed-row.closed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 18px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .closed-row [data-label]::before {
        display: block;
        margin-bottom: 3px;
        color: var(--muted2);
        content: attr(data-label);
        font-size: 0.61rem;
        font-weight: 750;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .closed-subject {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .closed-page-header,
    .closed-filter-heading,
    .closed-results-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .closed-quick-ranges {
        width: 100%;
        overflow-x: auto;
    }

    .closed-range-button {
        flex: 1;
        white-space: nowrap;
    }

    .closed-filters,
    .closed-row.closed-grid {
        grid-template-columns: 1fr;
    }

    .closed-filter-actions > button {
        flex: 1;
        justify-content: center;
    }

    .closed-result-stats {
        flex-wrap: wrap;
    }

    .closed-subject {
        grid-column: auto;
        white-space: normal;
    }
}

.composer-add {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

    .composer-add .form-input {
        flex: 1;
    }

.composer-fields {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 6px 10px;
    align-items: center;
    margin-top: 10px;
}

    .composer-fields .form-label {
        margin: 0;
    }

.composer-signature {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-top: 6px;
    background: #fff;
    color: #222;
    overflow-x: auto;
}

.composer-body {
    min-height: 220px;
    resize: vertical;
    font-family: inherit;
}

.composer-error {
    margin-top: 10px;
    color: var(--danger);
    font-size: 0.82rem;
}

.msg-origin-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Error banner ──────────────────────────────────────────────────────────── */
.error-banner {
    background: var(--danger-bg);
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 0.875rem;
}

.notify-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #1e40af;
    padding: 10px 16px;
    border-radius: var(--radius);
    margin: 0 24px 12px;
    font-size: 0.85rem;
}

    .notify-banner span {
        flex: 1;
    }

.btn-notify-enable {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

    .btn-notify-enable:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

/* ── Stats row ─────────────────────────────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 800px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    border-top: 3px solid transparent;
}

.stat-danger {
    border-top-color: var(--danger);
}

.stat-warn {
    border-top-color: var(--warning);
}

.stat-ok {
    border-top-color: var(--success);
}

.stat-neutral {
    border-top-color: var(--primary);
}

.stat-num {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-danger .stat-num {
    color: var(--danger);
}

.stat-warn .stat-num {
    color: var(--warning);
}

.stat-ok .stat-num {
    color: var(--success);
}

.stat-neutral .stat-num {
    color: var(--primary);
}

.stat-label {
    color: var(--muted);
    font-size: 0.8rem;
}

/* ── Section cards ─────────────────────────────────────────────────────────── */
.section-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
    overflow: hidden;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--card-head);
}

.section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 13px;
    font-size: 0.75rem;
    font-weight: 700;
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.badge-ok {
    background: var(--success-bg);
    color: var(--success);
}

/* ── Email table ───────────────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
}

.email-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .email-table th {
        text-align: left;
        padding: 10px 16px;
        color: var(--muted);
        font-weight: 500;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
        background: var(--card-head);
    }

    .email-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
    }

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

    .email-table tbody tr:hover td {
        background: var(--card-head);
    }

/* Row severity indicators */
.row-high td:first-child {
    border-left: 3px solid var(--danger);
}

.row-med td:first-child {
    border-left: 3px solid var(--warning);
}

/* ── Cell content ──────────────────────────────────────────────────────────── */
.subject {
    font-weight: 500;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview {
    color: var(--muted);
    font-size: 0.78rem;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
}

.addr {
    color: var(--muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mono {
    font-family: 'JetBrains Mono', Consolas, monospace;
    color: var(--muted);
}

.mailbox-pill {
    display: inline-block;
    background: var(--card-head);
    color: var(--primary);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.age-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.age-high {
    background: var(--danger-bg);
    color: var(--danger);
}

.age-med {
    background: var(--warning-bg);
    color: var(--warning);
}

.overdue {
    color: var(--danger);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.no-breaches {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
}

.no-breaches-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    color: var(--success);
}

/* ── Expandable full-mail view ──────────────────────────────────────────────── */
.subject-link {
    cursor: pointer;
    user-select: none;
}

    .subject-link:hover {
        color: var(--primary);
    }

.expand-caret {
    display: inline-block;
    width: 1em;
    color: var(--muted);
}

.detail-row td {
    background: var(--bg);
    padding: 0;
}

.mail-full {
    padding: 16px 20px;
}

.mail-meta {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 10px;
    line-height: 1.5;
}

    .mail-meta strong {
        color: var(--text);
        font-size: 0.9rem;
    }

.mail-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 0;
    max-height: 480px;
    overflow: auto;
}

.mail-body-html {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 0;
    max-height: 480px;
    overflow: auto;
    word-break: break-word;
}

    .mail-body-html img {
        max-width: 100%;
        height: auto;
    }

    .mail-body-html table {
        border-collapse: collapse;
        max-width: 100%;
    }

    .mail-body-html a {
        color: var(--info);
        text-decoration: underline;
    }

/* ── Sidebar nav ─────────────────────────────────────────────────────────────── */
.sidebar-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 6px 18px;
}

.sidebar-logo {
    background: #fff;
    border-radius: 10px;
    padding: 11px 13px;
    display: flex;
}

    .sidebar-logo img {
        width: 100%;
        height: auto;
        display: block;
    }

.sidebar-tag {
    font-size: 11px;
    color: var(--sidebar-ink);
    letter-spacing: .02em;
    padding-left: 2px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sidebar-version {
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: .01em;
}

.nav-group {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sidebar-ink);
    padding: 14px 10px 6px;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--sidebar-ink);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.nav-ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nav-label {
    flex: 1;
    min-width: 0;
}

.app-nav-link:hover {
    color: #fff;
    background: var(--sidebar-active);
}

.app-nav-link.active {
    color: #fff;
    background: var(--sidebar-active);
}

.nav-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

.nav-badge-breach {
    background: var(--accent2);
    color: var(--accent2-ink);
}

.nav-badge-atrisk {
    background: #E7A619;
    color: #3A2B00;
}

.nav-badge-mine {
    background: var(--info);
    color: #fff;
    margin-left: 2px;
}

.nav-badge-triage {
    background: #E7A619;
    color: #3A2B00;
}

/* ── Collapsible nav groups ─────────────────────────────────────────────────── */
.nav-group-panel {
    --group-accent: #d6577b;
    --group-rgb: 214, 87, 123;
    display: block;
}

.nav-group-crm {
    --group-accent: #58a6ff;
    --group-rgb: 88, 166, 255;
}

.nav-group-sales {
    --group-accent: #46d39a;
    --group-rgb: 70, 211, 154;
}

.nav-group-mail {
    --group-accent: #f3b64b;
    --group-rgb: 243, 182, 75;
}

.nav-group-ai {
    --group-accent: #b58cff;
    --group-rgb: 181, 140, 255;
}

.nav-group-admin {
    --group-accent: #ff718d;
    --group-rgb: 255, 113, 141;
}

.nav-group-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 4px);
    min-height: 40px;
    margin: 7px 2px 3px;
    padding: 9px 11px 9px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: rgba(var(--group-rgb),.07);
    cursor: pointer;
    color: var(--group-accent);
    font: inherit;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .nav-group-toggle::before {
        content: "";
        position: absolute;
        left: 7px;
        width: 3px;
        height: 14px;
        border-radius: 999px;
        background: var(--group-accent);
        opacity: .55;
        transition: background .18s ease, box-shadow .18s ease;
    }

    .nav-group-toggle:hover {
        color: #fff;
        background: rgba(var(--group-rgb),.14);
        border-color: rgba(var(--group-rgb),.25);
    }

    .nav-group-toggle.open {
        color: #fff;
        background: linear-gradient(135deg, rgba(var(--group-rgb),.22), rgba(255,255,255,.055));
        border-color: rgba(var(--group-rgb),.38);
        box-shadow: 0 7px 18px rgba(0,0,0,.16);
    }

        .nav-group-toggle.open::before {
            background: var(--group-accent);
            opacity: 1;
            box-shadow: 0 0 10px rgba(var(--group-rgb),.68);
        }

    .nav-group-toggle:focus-visible {
        outline: 2px solid var(--group-accent);
        outline-offset: 2px;
    }

.nav-group-label {
    font-size: 11.5px;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
    flex: 1;
    text-align: left;
}

.nav-group-chevron {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform .2s ease, opacity .2s ease;
    transform: rotate(-90deg);
    opacity: .55;
}

.nav-group-toggle.open .nav-group-chevron {
    transform: rotate(0deg);
    opacity: .95;
}

.nav-group-toggle:hover .nav-group-chevron {
    opacity: 1;
}

.nav-group-content {
    margin: 2px 2px 7px;
    padding: 4px;
    border: 1px solid rgba(var(--group-rgb),.1);
    border-radius: 11px;
    background: rgba(0,0,0,.11);
    animation: nav-group-reveal .18s ease-out;
}

    .nav-group-content .app-nav-link {
        min-height: 37px;
        margin: 1px 0;
        padding: 8px 9px;
        border-radius: 8px;
        font-size: .83rem;
    }

        .nav-group-content .app-nav-link.active {
            position: relative;
            background: rgba(var(--group-rgb),.18);
            box-shadow: inset 0 0 0 1px rgba(var(--group-rgb),.2);
        }

            .nav-group-content .app-nav-link.active::before {
                content: "";
                position: absolute;
                left: -5px;
                top: 9px;
                bottom: 9px;
                width: 3px;
                border-radius: 999px;
                background: var(--group-accent);
                box-shadow: 0 0 8px rgba(var(--group-rgb),.55);
            }

@keyframes nav-group-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .nav-group-content {
        animation: none;
    }

    .nav-group-toggle,
    .nav-group-chevron {
        transition: none;
    }
}

/* ── Topbar icon buttons ────────────────────────────────────────────────────── */
.btn-topbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line-in);
    background: #fff;
    border-radius: 8px;
    color: var(--ink2);
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s;
    flex-shrink: 0;
}

.btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    border: 1px solid var(--line-in);
    background: #fff;
    border-radius: 8px;
    color: var(--ink2);
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s;
    flex-shrink: 0;
}

.btn-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

    .btn-topbar-icon:hover {
        border-color: var(--line-hov);
        color: var(--text);
    }

    .btn-topbar-icon.active {
        background: var(--brand);
        border-color: var(--brand);
        color: #fff;
    }

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-label {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    margin: 10px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-input {
    width: 100%;
    max-width: 420px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

    .form-input:focus {
        outline: none;
        border-color: var(--primary);
    }

.local-filter {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(100%, 520px);
    margin-bottom: 16px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--line-in);
    border-radius: 9px;
    color: var(--muted2);
}

    .local-filter:focus-within {
        border-color: var(--primary);
    }

.local-filter-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.local-filter input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}

.local-filter-count {
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.local-filter-compact {
    width: min(38vw, 380px);
    margin: 0 0 0 auto;
}

.spam-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.spam-filters .local-filter {
    margin-bottom: 0;
}

.spam-date-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spam-date-label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.spam-date-input {
    width: auto;
    padding: 7px 10px;
}

.conversation-actions {
    display: flex;
    align-items: end;
    gap: 10px;
}

    .conversation-actions label {
        display: grid;
        gap: 3px;
        color: var(--muted);
        font-size: 0.72rem;
    }

    .conversation-actions select {
        min-width: 150px;
        padding: 7px 9px;
        border: 1px solid var(--line-in);
        border-radius: 7px;
        background: #fff;
        color: var(--text);
    }

.conv-owner {
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.72rem;
}

.ownership-history {
    padding: 14px 18px;
}

    .ownership-history summary {
        cursor: pointer;
        font-weight: 700;
    }

.ownership-history-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.ownership-history-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
}

.ownership-history-meta {
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .board-toolbar {
        flex-wrap: wrap;
    }

    .local-filter-compact {
        order: 3;
        width: 100%;
        margin: 8px 0 0;
    }
}

.btn-link-danger {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

    .btn-link-danger:hover {
        background: var(--danger-bg);
    }

/* ── Login (split-screen) ────────────────────────────────────────────────────── */
.login-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
}

/* Left hero panel */
.login-hero {
    background: var(--sidebar);
    color: #fff;
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.login-hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient( 680px 480px at 78% 8%, var(--glow), transparent 60%);
}

.login-hero > *:not(.login-hero-glow) {
    position: relative;
    z-index: 1;
}

.login-mark {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-mark-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent2);
    color: var(--accent2-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 6px 18px rgba(245, 130, 32, 0.4);
}

.login-mark-name {
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.01em;
}

.login-hero-copy {
    max-width: 440px;
}

.login-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sidebar-ink);
    margin-bottom: 24px;
}

.login-headline {
    font-size: 40px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 18px;
}

.login-lede {
    font-size: 16px;
    line-height: 1.6;
    color: var(--sidebar-ink);
    margin: 0;
}

.login-features {
    display: flex;
    gap: 28px;
    font-size: 13px;
    color: var(--sidebar-ink);
    flex-wrap: wrap;
}

.login-feature strong {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: block;
    margin-bottom: 2px;
}

/* Right form panel */
.login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--bg);
}

.login-form {
    width: 100%;
    max-width: 380px;
}

.login-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 6px;
}

.login-subtitle {
    font-size: 14.5px;
    color: var(--muted);
    margin: 0 0 28px;
}

.login-field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink3);
    margin-bottom: 7px;
}

.login-field {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14.5px;
    background: #fff;
    margin-bottom: 16px;
    color: var(--text);
}

    .login-field:focus {
        outline: none;
        border-color: var(--primary);
    }

.login-submit {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(158, 39, 74, 0.28);
    margin-top: 6px;
    transition: background 0.15s;
}

    .login-submit:hover {
        background: var(--primary-hv);
    }

.login-logo {
    width: 190px;
    max-width: 60%;
    height: auto;
    display: block;
    margin-bottom: 26px;
}

.login-footnote {
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
    margin: 22px 0 0;
}

@media (max-width: 820px) {
    .login-split {
        grid-template-columns: 1fr;
    }

    .login-hero {
        display: none;
    }
}

/* ── Sidebar user footer ─────────────────────────────────────────────────────── */
.sidebar-user {
    margin-top: auto;
    padding: 12px 10px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-userlink {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 4px;
    margin: -4px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s ease;
}

    .sidebar-userlink:hover {
        background: var(--sidebar-active);
    }

.sidebar-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-grey);
    color: #221F1F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.sidebar-userinfo {
    flex: 1;
    min-width: 0;
}

.sidebar-who {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-role {
    font-size: 11px;
    color: var(--sidebar-ink);
}

.sidebar-logout-form {
    display: flex;
}

.sidebar-logout {
    background: none;
    border: none;
    color: var(--sidebar-ink);
    cursor: pointer;
    padding: 4px;
    display: flex;
    border-radius: 6px;
}

    .sidebar-logout:hover {
        color: #fff;
    }

/* ── Attachments ─────────────────────────────────────────────────────────────── */
.mail-attachments {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.attach-chip {
    display: inline-block;
    background: var(--card-head);
    border: 1px solid var(--border);
    color: var(--primary);
    text-decoration: none;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.8rem;
}

    .attach-chip:hover {
        background: var(--danger-bg);
    }

/* ── Dashboard KPI tiles ─────────────────────────────────────────────────────── */
.dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 12px;
}

.dashboard-eyebrow,
.dashboard-workspace-title > span {
    display: block;
    margin-bottom: 2px;
    color: var(--primary);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.dashboard-hero h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    letter-spacing: -0.03em;
}

.dashboard-hero p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.dashboard-live-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #D8E7DE;
    border-radius: 999px;
    background: #F4FAF6;
    color: #287A50;
    font-size: 0.74rem;
    font-weight: 750;
    white-space: nowrap;
}

.dashboard-live-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #31A66A;
    box-shadow: 0 0 0 4px rgba(49, 166, 106, 0.12);
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.kpi-tile {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 5px 18px rgba(20, 30, 55, 0.045);
    transition: box-shadow 0.18s, transform 0.18s;
}

.kpi-tile::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--kpi-accent);
    content: "";
}

.kpi-tile:hover {
    box-shadow: 0 9px 23px rgba(20, 30, 55, 0.075);
    transform: translateY(-2px);
}

.kpi-tile-clickable {
    cursor: pointer;
}

.kpi-tile-clickable:focus-visible {
    outline: 2px solid var(--kpi-accent);
    outline-offset: 2px;
}

.kpi-tile-urgent {
    --kpi-accent: var(--danger);
    --kpi-soft: #FFF1F3;
}

.kpi-tile-client {
    --kpi-accent: var(--info);
    --kpi-soft: #EEF5FC;
}

.kpi-tile-triage {
    --kpi-accent: var(--warning);
    --kpi-soft: #FFF8E8;
}

.kpi-tile-performance {
    --kpi-accent: var(--success);
    --kpi-soft: #EFF8F3;
}

.kpi-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kpi-label {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.kpi-tile-head .kpi-label {
    margin-bottom: 0;
}

.kpi-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--kpi-soft);
    color: var(--kpi-accent);
    font-size: 0.9rem;
    font-weight: 800;
}

.kpi-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}

.kpi-num {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.kpi-red {
    color: var(--danger);
}

.kpi-blue {
    color: var(--info);
}

.kpi-amber {
    color: var(--warning);
}

.kpi-green {
    color: var(--success);
}

.kpi-sub {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
}

.kpi-sub-red {
    color: var(--danger);
}

.kpi-sub-amber {
    color: #E7A619;
    font-weight: 600;
}

/* ── AI Insights panel ──────────────────────────── */
.insights-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.insights-head {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.insights-count {
    background: var(--badge-bg, #333);
    color: #fff;
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 10px;
}

.insight-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #eee);
    border-radius: 11px;
    padding: 12px 14px;
    margin-bottom: 0;
    border-left: 3px solid #888;
    box-shadow: 0 2px 8px rgba(20, 30, 55, 0.035);
}

.insight-info {
    border-left-color: #3B82F6;
}

.insight-warning {
    border-left-color: #E7A619;
}

.insight-critical {
    border-left-color: #E53E3E;
}

.insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    margin-bottom: 4px;
}

.insight-badge {
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
}

.insight-badge-info {
    background: #DBEAFE;
    color: #1D4ED8;
}

.insight-badge-warning {
    background: #FEF3C7;
    color: #92400E;
}

.insight-badge-critical {
    background: #FEE2E2;
    color: #991B1B;
}

.insight-cat {
    color: #999;
    font-style: italic;
}

.insight-time {
    color: #aaa;
    margin-left: auto;
}

.insight-dismiss {
    font-size: 1rem;
    color: #aaa;
    cursor: pointer;
    padding: 0 2px;
}

    .insight-dismiss:hover {
        color: #E53E3E;
    }

.insight-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.insight-body {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
}

.insight-client {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.7rem;
    background: #F3F4F6;
    padding: 1px 6px;
    border-radius: 3px;
    color: #555;
}

/* ── Dashboard board ─────────────────────────────────────────────────────────── */
.dashboard-workspace {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 7px 24px rgba(20, 30, 55, 0.045);
}

.dashboard-workspace-title {
    min-width: max-content;
}

.dashboard-workspace-title > span {
    margin-bottom: 2px;
}

.board-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 800;
}

.board-head strong {
    display: inline-grid;
    place-items: center;
    min-width: 25px;
    height: 21px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(158, 39, 74, 0.09);
    color: var(--primary);
    font-size: 0.68rem;
}

.board-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 15px 16px;
    border-bottom: 1px solid var(--border);
    background: #FFFFFF;
}

.dashboard-workspace .local-filter-compact {
    min-width: 220px;
    margin-left: auto;
}

.dashboard-workspace .view-toggle {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--bg-sub);
}

.dashboard-workspace .view-toggle button {
    min-height: 31px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.dashboard-workspace .view-toggle button:hover:not(.active) {
    color: var(--text);
}

.dashboard-workspace .view-toggle button.active {
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 3px 9px rgba(158, 39, 74, 0.2);
}

.dashboard-workspace .saved-view-pill {
    min-height: 31px;
    padding: 5px 11px;
    border-radius: 9px;
    background: #FFFFFF;
}

.dashboard-workspace .saved-view-pill.active {
    background: var(--primary);
    color: #FFFFFF;
}

.view-toggle {
    display: inline-flex;
    background: var(--border);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}

    .view-toggle button {
        border: none;
        background: none;
        padding: 6px 14px;
        border-radius: 7px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
    }

        .view-toggle button.active {
            background: #fff;
            color: var(--text);
            box-shadow: 0 1px 2px rgba(20, 30, 55, 0.08);
        }

.board-filters {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--card-head);
}

.board-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .board-filter-group + .board-filter-group {
        padding-left: 24px;
        border-left: 1px solid var(--border);
    }

.board-filter-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.filter-segments {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    overflow-x: auto;
    background: var(--border);
    border-radius: 9px;
}

    .filter-segments button {
        min-height: 31px;
        padding: 6px 12px;
        border: none;
        border-radius: 7px;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        font: inherit;
        font-size: 0.78rem;
        font-weight: 600;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s,
            box-shadow 0.15s;
    }

        .filter-segments button:hover:not(.active) {
            color: var(--text);
            background: rgba(255, 255, 255, 0.62);
        }

        .filter-segments button.active {
            color: #FFFFFF;
            background: var(--primary);
            box-shadow: 0 3px 8px rgba(158, 39, 74, 0.18);
        }

.filter-segments .ownership-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ownership-check {
    display: inline-grid;
    place-items: center;
    width: 0;
    overflow: hidden;
    font-size: 0.68rem;
    opacity: 0;
    transition: opacity 0.15s, width 0.15s;
}

.ownership-filter-button.active .ownership-check {
    width: 12px;
    opacity: 1;
}

.ownership-count {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 800;
}

.ownership-filter-button.active .ownership-count {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.owner-pick-btn.active {
    border-color: var(--primary);
    background: rgba(158, 39, 74, 0.07);
    color: var(--primary);
    box-shadow: 0 0 0 3px rgba(158, 39, 74, 0.08);
}

.owner-pick-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.owner-pick-work-count {
    display: inline-grid;
    place-items: center;
    min-width: 23px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg-sub);
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 800;
}

.owner-pick-item.sel .owner-pick-work-count {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.ownership-scope {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 16px;
    border-bottom: 1px solid #E1D9DC;
    background: linear-gradient(
        90deg,
        rgba(158, 39, 74, 0.08),
        rgba(158, 39, 74, 0.025));
}

.ownership-scope-icon {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border-radius: 9px;
    background: #FFFFFF;
    color: var(--primary);
    font-weight: 800;
    box-shadow: 0 2px 7px rgba(20, 30, 55, 0.07);
}

.ownership-scope-copy {
    display: grid;
    gap: 1px;
}

.ownership-scope strong {
    color: var(--text);
    font-size: 0.78rem;
}

.ownership-scope-copy > span {
    color: var(--muted);
    font-size: 0.7rem;
}

.ownership-metrics {
    display: flex;
    align-items: stretch;
    gap: 7px;
    margin-left: auto;
}

.ownership-metric {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 88px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 4px rgba(20, 30, 55, 0.04);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .ownership-metric:hover {
        border-color: var(--primary);
    }

    .ownership-metric.active {
        border-color: var(--primary);
        box-shadow: inset 0 0 0 1px var(--primary);
    }

.ownership-metric span {
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

.ownership-metric strong {
    margin-left: auto;
    font-size: 0.8rem;
}

.ownership-metric-mine strong {
    color: var(--primary);
}

.ownership-metric-assigned strong {
    color: var(--success);
}

.ownership-metric-unassigned strong {
    color: var(--warning);
}

.ownership-clear {
    margin-left: 2px;
    padding: 6px 10px;
    border: 1px solid rgba(158, 39, 74, 0.22);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--primary);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 750;
    cursor: pointer;
}

.ownership-clear:hover {
    border-color: var(--primary);
    background: rgba(158, 39, 74, 0.05);
}

.group-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}

.group-chips-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 2px;
}

.group-chip {
    border: 1px solid var(--line-in);
    background: #fff;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink2);
    cursor: pointer;
}

    .group-chip.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

.group-pill {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
    background: var(--border-2);
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.priority-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.priority-1 {
    background: #E7A619;
    color: #3A2B00;
}

.priority-2 {
    background: var(--primary);
    color: #fff;
}

/* ── Saved views ─────── */
.saved-views-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.saved-view-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border .15s;
}

    .saved-view-pill:hover {
        border-color: var(--primary);
    }

    .saved-view-pill.active {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

    .saved-view-pill.save-btn,
    .saved-view-pill.del-btn {
        font-size: 15px;
        padding: 2px 10px;
        line-height: 1;
    }

    .saved-view-pill.del-btn {
        border-color: var(--primary);
        color: var(--primary);
    }

.save-view-dialog {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

    .save-view-dialog input[type="text"],
    .save-view-dialog input:not([type]) {
        font-size: 13px;
        padding: 4px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        width: 160px;
    }

.status-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.status-us {
    background: var(--danger-bg);
    color: var(--danger);
}

.status-client {
    background: var(--info-bg);
    color: var(--info);
}

.status-done {
    background: var(--success-bg);
    color: var(--success);
}

/* List view */
.list-table {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
}

.list-head, .list-row {
    display: grid;
    grid-template-columns: 2.6fr 1.4fr 1.1fr 1fr;
    gap: 14px;
    padding: 12px 18px;
    align-items: center;
}

@media (max-width: 900px) {
    .board-filters {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .board-filter-group + .board-filter-group {
        padding: 10px 0 0;
        border-top: 1px solid var(--border);
        border-left: none;
    }
}

.list-head {
    background: var(--bg-sub);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted2);
}

.list-row {
    border-bottom: 1px solid var(--border-2);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

    .list-row:last-child {
        border-bottom: none;
    }

    .list-row:hover {
        background: var(--bg-sub);
    }

.list-subject {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.list-client {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.list-due {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}

/* Split view */
.split {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    align-items: start;
}

.split-list {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden auto;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    max-height: 72vh;
}

.split-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-2);
    cursor: pointer;
}

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

    .split-item:hover {
        background: var(--bg-sub);
    }

    .split-item.sel {
        background: var(--info-bg);
    }

.split-item-sub {
    font-size: 11.5px;
    color: var(--muted2);
    margin-top: 3px;
}

.split-detail {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
}

.split-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.split-detail-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}

.dashboard-workspace > .board,
.dashboard-workspace > .list-table,
.dashboard-workspace > .split {
    margin: 16px;
}

.board-col {
    border-radius: 14px;
    padding: 12px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Each column's cards scroll independently; the header
   stays fixed at the top of the column. */
.board-col-body {
    overflow-y: auto;
    max-height: calc(100vh - 320px);
    min-height: 320px;
    padding-right: 4px;
}

.board-col-us {
    background: #FBF5F6;
    border-color: #EBD9DD;
    border-top: 3px solid var(--danger);
}

.board-col-client {
    background: #F3F7FB;
    border-color: #D8E3F0;
    border-top: 3px solid var(--info);
}

.board-col-done {
    background: #F2F8F4;
    border-color: #D5E6DC;
    border-top: 3px solid var(--success);
}

.board-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
}

.board-head-us {
    color: var(--danger);
}

.board-head-client {
    color: var(--info);
}

.board-head-done {
    color: var(--success);
}

.board-count {
    color: var(--muted2);
    font-weight: 600;
    margin-left: 2px;
}

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

.dot-red {
    background: var(--danger);
}

.dot-blue {
    background: #2C6FBF;
}

.dot-green {
    background: #1F9A5F;
}

.conv-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 13px;
    margin-bottom: 10px;
    box-shadow: 0 2px 7px rgba(20, 30, 55, 0.045);
    transition: border-color 0.16s, box-shadow 0.16s,
        transform 0.16s;
}

.conv-card:hover {
    border-color: #D4D4D8;
    box-shadow: 0 7px 17px rgba(20, 30, 55, 0.08);
    transform: translateY(-1px);
}

@media (max-width: 1180px) {
    .kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .insights-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-workspace .board-toolbar {
        flex-wrap: wrap;
    }

    .dashboard-workspace .local-filter-compact {
        order: 3;
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

@media (max-width: 860px) {
    .dashboard-hero {
        align-items: flex-start;
    }

    /* Swipe between the three columns instead of stacking and
       vertical-scrolling: each column fills the width and snaps
       into place, one swipe per column. Native touch scrolling
       drives it, so no JS is needed. */
    .dashboard-workspace > .board {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 6px;
    }

    .dashboard-workspace > .board::-webkit-scrollbar {
        display: none;
    }

    .dashboard-workspace > .board > .board-col {
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .dashboard-workspace .board-col-body {
        max-height: 440px;
        min-height: 180px;
    }
}

@media (max-width: 620px) {
    .dashboard-hero {
        flex-direction: column;
        gap: 12px;
    }

    .kpi-row,
    .insights-panel {
        grid-template-columns: 1fr;
    }

    .dashboard-workspace > .board,
    .dashboard-workspace > .list-table,
    .dashboard-workspace > .split {
        margin: 10px;
    }

    .ownership-scope {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ownership-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: calc(100% - 40px);
        margin-left: 40px;
    }

    .ownership-metric {
        min-width: 0;
    }

    .ownership-clear {
        margin-left: 40px;
    }
}

.conv-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.conv-select {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

.conv-card-selected {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.selection-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #E1D9DC;
    background: rgba(158, 39, 74, 0.06);
    font-size: 0.82rem;
    font-weight: 650;
}

.bulk-spam-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: 80vh;
    overflow-y: auto;
}

.bulk-spam-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--bg-sub);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    flex-wrap: wrap;
    transition: border-color .15s ease;
}

    .bulk-spam-row:last-child {
        margin-bottom: 0;
    }

.bulk-spam-sender {
    font-size: 0.85rem;
    font-weight: 650;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    color: var(--text);
}

.bulk-spam-done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--success, #2E7D32);
    font-size: 0.78rem;
    font-weight: 700;
}

    .bulk-spam-done::before {
        content: "✓";
    }

.conv-due {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
}

.conv-due-red {
    color: var(--danger);
}

.conv-due-amber {
    color: #E7A619;
}

.conv-subject {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 8px;
    color: var(--text);
}

.conv-client {
    display: flex;
    align-items: center;
    gap: 8px;
}

.avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.conv-client-name {
    font-size: 0.76rem;
    color: var(--muted);
}

/* ── Board: collapsible client groups ────────────────────────────────────────── */
.conv-group {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 11px 13px;
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.05);
    transition: border-color 0.12s;
    user-select: none;
}

    .conv-group:hover {
        border-color: var(--primary);
    }

.conv-group-name {
    flex: 1;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-group-overdue {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--danger);
    white-space: nowrap;
}

.conv-group-atrisk {
    font-size: 0.7rem;
    font-weight: 700;
    color: #E7A619;
    white-space: nowrap;
}

.conv-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--card-head);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.conv-group-caret {
    color: var(--muted);
    font-size: 0.72rem;
    width: 0.8em;
}

.conv-group-children {
    border-left: 2px solid var(--border);
    padding-left: 9px;
    margin-bottom: 10px;
}

    .conv-group-children .conv-card:last-child {
        margin-bottom: 0;
    }

/* ── Buttons (secondary / danger / small) ────────────────────────────────────── */
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--ink2);
    border: 1px solid var(--line-in);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s;
}

    .btn-outline:hover {
        border-color: var(--line-hov);
    }

.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--danger);
    border: 1px solid #EBD3D3;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

    .btn-danger-outline:hover {
        background: var(--danger-bg);
    }

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* ── Info banners ────────────────────────────────────────────────────────────── */
.info-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FDF6E6;
    border: 1px solid #EFD79A;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 0.86rem;
    color: #7A5A00;
    line-height: 1.5;
}

.info-line {
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 18px;
    max-width: 820px;
}

/* ── Entity card grid (Clients) ──────────────────────────────────────────────── */
.clients-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.clients-page-header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.clients-page-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.clients-total-badge {
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.clients-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.clients-overview-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 15px 17px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04);
}

.clients-overview-card strong {
    font-size: 1.35rem;
    line-height: 1;
}

.clients-overview-label {
    color: var(--muted2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.clients-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.clients-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clients-search {
    margin: 0;
}

.clients-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted2);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.clients-sort select {
    min-height: 40px;
    padding: 0 34px 0 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    transition: border-color 0.16s, box-shadow 0.16s;
}

.clients-sort select:hover {
    border-color: #C9C9CE;
}

.clients-sort select:focus-visible {
    border-color: var(--primary);
    outline: 3px solid rgba(158, 39, 74, 0.14);
}

.clients-priority-filter {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--bg-sub);
    box-shadow: inset 0 1px 2px rgba(20, 30, 55, 0.03);
}

.clients-priority-button {
    min-height: 32px;
    padding: 6px 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s, color 0.16s,
        box-shadow 0.16s, transform 0.16s;
}

.clients-priority-button:hover {
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
    transform: translateY(-1px);
}

.clients-priority-button.active {
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(158, 39, 74, 0.22);
}

.clients-priority-button:focus-visible,
.clients-action-button:focus-visible {
    outline: 3px solid rgba(158, 39, 74, 0.18);
    outline-offset: 2px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.entity-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}

    .entity-card:hover {
        border-color: var(--line-hov);
        box-shadow: 0 6px 20px rgba(20, 30, 55, 0.08);
    }

.entity-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.entity-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 11px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.entity-headtext {
    min-width: 0;
    flex: 1;
}

.entity-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-domain {
    font-size: 12px;
    color: var(--muted2);
    font-family: 'JetBrains Mono', monospace;
}

.entity-stats {
    display: flex;
    gap: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--border-2);
}

.entity-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-2);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.clients-results-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 12px 2px;
    color: var(--muted);
    font-size: 0.78rem;
}

.clients-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 15px;
    border: 1px solid rgba(158, 39, 74, 0.3);
    border-radius: 11px;
    background: #FFFFFF;
    color: var(--primary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(20, 30, 55, 0.06);
    transition: background 0.16s, border-color 0.16s,
        box-shadow 0.16s, transform 0.16s;
}

.clients-action-button span {
    font-size: 1rem;
    line-height: 1;
}

.clients-action-button:hover {
    border-color: var(--primary);
    background: rgba(158, 39, 74, 0.05);
    box-shadow: 0 5px 13px rgba(20, 30, 55, 0.1);
    transform: translateY(-1px);
}

.clients-action-button:active,
.clients-priority-button:active {
    transform: translateY(0);
}

/* ── Client profile ──────────────────────────────────────────────────────── */
.client-detail-header {
    margin-bottom: 20px;
}

.client-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.16s, transform 0.16s;
}

.client-back-link:hover {
    color: var(--primary);
    transform: translateX(-2px);
}

.client-detail-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.client-detail-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 15px;
    background: linear-gradient(145deg, var(--primary), #C64168);
    color: #FFFFFF;
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(158, 39, 74, 0.2);
}

.client-detail-heading {
    min-width: 0;
}

.client-detail-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: var(--primary);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.client-detail-heading h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.15;
}

.client-detail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.78rem;
}

.client-detail-summary strong {
    color: var(--text);
}

.client-priority-status {
    margin-left: auto;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.client-priority-status-1 {
    border-color: #E8D18D;
    background: #FFF8DE;
    color: #8B6500;
}

.client-priority-status-2 {
    border-color: #EDC4C4;
    background: #FFF0F0;
    color: #A72C2C;
}

.client-profile-card {
    overflow: visible;
}

.client-profile-card-header {
    padding: 16px 20px;
}

.client-section-description {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.client-save-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.client-save-actions-bottom {
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-2);
}

.client-saved-state,
.client-mobile-saved-state {
    color: #287A50;
    font-size: 0.78rem;
    font-weight: 700;
}

.client-mobile-saved-state {
    display: none;
}

.client-primary-action {
    min-height: 38px;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 4px 11px rgba(158, 39, 74, 0.2);
}

.client-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0;
}

.client-form-panel {
    min-width: 0;
    padding: 20px;
}

.client-form-panel + .client-form-panel {
    border-left: 1px solid var(--border);
}

.client-form-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

.client-form-panel-heading h3,
.client-contact-form h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 800;
}

.client-form-panel-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.client-panel-icon {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 9px;
    background: rgba(158, 39, 74, 0.09);
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 800;
}

.client-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 14px;
}

.client-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.client-field > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.client-field .form-input {
    max-width: none;
    min-height: 39px;
    margin: 0;
    padding: 9px 11px;
    border-radius: 9px;
    background: #FFFFFF;
    transition: border-color 0.16s, box-shadow 0.16s;
}

.client-field .form-input:focus {
    box-shadow: 0 0 0 3px rgba(158, 39, 74, 0.11);
}

.client-field textarea.form-input {
    min-height: 78px;
    resize: vertical;
}

.client-field-wide {
    grid-column: 1 / -1;
}

.client-rep-tools {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.client-rep-tools .clients-action-button {
    min-height: 34px;
    padding: 7px 12px;
}

.client-rep-tools .form-hint {
    margin: 0;
}

.client-protection-control {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-sub);
    cursor: pointer;
}

.client-protection-control input {
    margin-top: 2px;
    accent-color: var(--primary);
}

.client-protection-control span {
    display: grid;
    gap: 2px;
}

.client-protection-control strong {
    font-size: 0.78rem;
}

.client-protection-control small {
    color: var(--muted);
    font-size: 0.72rem;
}

.client-protection-hint {
    margin-left: 30px;
}

.client-activity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.55fr);
    align-items: start;
    gap: 18px;
}

.client-activity-grid .section-card {
    min-width: 0;
}

.client-conversations-card .form-row {
    margin: 12px 16px 8px !important;
}

.client-conversations-card .form-input {
    max-width: none;
}

.client-contacts-card .table-wrap {
    max-height: 290px;
    overflow: auto;
}

.client-contact-form {
    padding: 15px 16px 17px;
    border-top: 1px solid var(--border);
    background: var(--card-head);
}

.client-contact-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: end;
    gap: 10px;
    margin-top: 11px;
}

.client-contact-fields .client-primary-action {
    grid-column: 1 / -1;
    justify-content: center;
}

.client-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px;
    border-color: #E8D5D5;
    background: #FFFDFD;
}

.client-danger-copy {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.client-danger-copy .info-line {
    margin: 4px 0 0;
}

.client-danger-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    background: var(--danger-bg);
    color: var(--danger);
    font-weight: 800;
}

.client-danger-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.client-danger-actions .settings-check {
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .client-profile-grid,
    .client-activity-grid {
        grid-template-columns: 1fr;
    }

    .client-form-panel + .client-form-panel {
        border-top: 1px solid var(--border);
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .clients-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clients-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .clients-toolbar-actions {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .clients-search {
        width: 100%;
    }

    .clients-priority-filter {
        align-self: flex-start;
    }

    .client-profile-card-header,
    .client-danger-zone {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-save-actions {
        width: 100%;
    }

    .client-primary-action {
        justify-content: center;
    }

    .client-save-actions .client-primary-action {
        flex: 1;
    }

    .client-danger-actions {
        align-items: flex-start;
        justify-content: flex-start;
    }
}

@media (max-width: 440px) {
    .clients-page-header {
        align-items: flex-start;
    }

    .clients-overview {
        grid-template-columns: 1fr;
    }

    .client-detail-identity {
        align-items: flex-start;
    }

    .client-priority-status {
        display: none;
    }

    .client-detail-summary {
        gap: 5px 11px;
    }

    .client-profile-card-header {
        padding: 14px 16px;
    }

    .client-saved-state {
        display: none;
    }

    .client-mobile-saved-state {
        display: inline-block;
        margin-top: 10px;
    }

    .client-form-panel {
        padding: 16px;
    }

    .client-field-grid,
    .client-contact-fields {
        grid-template-columns: 1fr;
    }

    .client-danger-actions .settings-check {
        white-space: normal;
    }
}

.entity-stat-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}

.entity-stat-label {
    font-size: 11.5px;
    color: var(--muted2);
}

/* ── Excluded view ───────────────────────────────────────────────────────────── */
.chip-count {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.7;
    margin-left: 3px;
}

.exc-head, .exc-row {
    display: grid;
    grid-template-columns: 2.6fr 1fr 1.1fr 1.1fr;
    gap: 14px;
    padding: 12px 18px;
    align-items: center;
}

.exc-head {
    background: var(--bg-sub);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted2);
}

.exc-item {
    border-bottom: 1px solid var(--border-2);
}

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

    .exc-item.open {
        background: var(--bg-sub);
    }

.exc-row-click {
    cursor: pointer;
}

    .exc-row-click:hover {
        background: var(--bg-sub);
    }

.exc-caret {
    color: var(--muted);
    font-size: .72rem;
    margin-right: 4px;
}

.exc-body-wrap {
    padding: 0 18px 16px;
}

.exc-loading {
    color: var(--muted);
    font-size: 13px;
    padding: 8px 0;
}

.exc-group {
    font-size: 12.5px;
    color: var(--ink2);
}

.exc-date {
    font-size: 12px;
}

.reason-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.reason-internal {
    background: var(--border-2);
    color: var(--ink3);
}

.reason-automated {
    background: var(--warning-bg);
    color: var(--warning);
}

.reason-bulk {
    background: var(--info-bg);
    color: var(--info);
}

.reason-subject {
    background: rgba(163,163,163,.22);
    color: var(--ink2);
}

.reason-spam {
    background: var(--danger-bg);
    color: var(--danger);
}

.reason-other {
    background: var(--border-2);
    color: var(--muted);
}

/* ── Stats ───────────────────────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.stat-list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-2);
}

    .stat-list-row:last-child {
        border-bottom: none;
    }

.stat-name-wrap {
    min-width: 0;
}

.stat-name {
    font-size: 0.86rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.stat-bar {
    height: 6px;
    min-width: 2px;
    border-radius: 3px;
    background: var(--primary);
}

.stat-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink2);
}

/* ── Search results ──────────────────────────────────────────────────────────── */
.search-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 22px 0 12px;
}

    .search-section-title:first-of-type {
        margin-top: 4px;
    }

/* ── List card (Triage / Spam) ───────────────────────────────────────────────── */
.list-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04);
}

/* Triage rows */
.triage-item {
    border-bottom: 1px solid var(--border-2);
}

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

.triage-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
}

.triage-mail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 18px 16px 70px;
}

    .triage-mail .msg {
        background: var(--bg-sub);
    }

.msg-subject {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.exc-loading {
    color: var(--muted);
    font-size: 0.85rem;
    padding: 6px 0;
}

.triage-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.triage-main {
    flex: 1;
    min-width: 0;
}

.triage-name {
    font-size: 14px;
    font-weight: 600;
}

.triage-email {
    font-size: 12px;
    color: var(--muted2);
    font-weight: 400;
    font-family: 'JetBrains Mono', monospace;
}

.triage-meta {
    font-size: 11.5px;
    color: var(--muted2);
    margin-top: 2px;
}

.triage-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.triage-select, .triage-newname {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8rem;
    background: #fff;
}

.triage-select {
    max-width: 160px;
}

.triage-newname {
    width: 150px;
}

    .triage-newname:focus, .triage-select:focus {
        outline: none;
        border-color: var(--primary);
    }

/* Spam grid table */
.spam-add {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.spam-add-value {
    flex: 1;
    max-width: 360px;
    margin-bottom: 0;
}

.spam-add-kind {
    width: 130px;
    margin-bottom: 0;
}

.spam-head, .spam-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 1.2fr 110px;
    gap: 14px;
    padding: 12px 18px;
    align-items: center;
}

.spam-head {
    background: var(--card-head);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted2);
}

.spam-row {
    border-bottom: 1px solid var(--border-2);
}

    .spam-row:last-child {
        border-bottom: none;
    }

.spam-value {
    font-size: 13px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    word-break: break-all;
}

.spam-row-action {
    text-align: right;
}

.type-pill {
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--border-2);
    color: var(--ink3);
}

/* ── Settings ────────────────────────────────────────────────────────────────── */
.settings-wrap {
    max-width: 1400px;
}

/* Side-by-side layout for the settings sections */
.settings-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.settings-nav {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 11px 14px;
    font: inherit;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .settings-nav-item:hover {
        background: rgba(0, 0, 0, 0.04);
        color: var(--text);
    }

    .settings-nav-item:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    .settings-nav-item.active {
        background: var(--card);
        color: var(--primary);
        font-weight: 700;
        box-shadow: 0 1px 3px rgba(60, 40, 20, 0.12);
    }

.settings-nav-icon {
    width: 19px;
    height: 19px;
    flex: none;
}

@media (max-width: 800px) {
    .settings-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .settings-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
    }

    .settings-nav-item {
        white-space: nowrap;
    }
}

.settings-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1040px;
    min-width: 0;
}


    .settings-cards > .settings-card {
        margin-bottom: 0;
    }

/* Overview strip ─ headline counts for management view */
.settings-overview {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(158px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.ov-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 15px 16px;
    box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04);
    transition: box-shadow .18s ease,
        transform .18s ease;
}

    .ov-stat:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(60, 40, 20, 0.09);
    }

.ov-ico {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: linear-gradient(
        135deg,
        rgba(158, 39, 74, 0.12),
        rgba(158, 39, 74, 0.05));
}

    .ov-ico svg {
        width: 22px;
        height: 22px;
    }

.ov-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.ov-num {
    font-size: 23px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ov-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 3px;
}

.settings-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 24px 22px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04);
    transition: box-shadow .18s ease,
        border-color .18s ease;
}

    .settings-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 18px;
        bottom: 18px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--primary);
        opacity: 0;
        transition: opacity .18s ease;
    }

    .settings-card:hover {
        box-shadow: 0 10px 28px rgba(60, 40, 20, 0.08);
        border-color: #d9d0d3;
    }

        .settings-card:hover::before {
            opacity: 1;
        }

.settings-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 5px;
    color: var(--text);
}

.settings-desc {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 18px;
    line-height: 1.55;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.settings-field {
    display: flex;
    flex-direction: column;
}

    .settings-field > label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink3);
        margin-bottom: 6px;
    }

    .settings-field input,
    .settings-field textarea {
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 9px;
        font-size: 13.5px;
        background: #fff;
        font-family: inherit;
        color: var(--text);
    }

        .settings-field input:focus,
        .settings-field textarea:focus {
            outline: none;
            border-color: var(--primary);
        }

    .settings-field textarea {
        resize: vertical;
        min-height: 96px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12.5px;
        line-height: 1.6;
    }

    .settings-field input.settings-mono {
        font-family: 'JetBrains Mono', monospace;
    }

.settings-hint {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 5px;
}

/* Collapsible settings sections (details/summary) */
.settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

    .settings-head::-webkit-details-marker {
        display: none;
    }

    .settings-head .settings-title {
        margin-bottom: 0;
    }

    .settings-head:hover .settings-title {
        color: var(--primary);
    }

.settings-chev {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform .2s ease;
}

details.settings-card[open] > .settings-head {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

    details.settings-card[open] > .settings-head
        .settings-chev {
        transform: rotate(180deg);
        color: var(--primary);
    }

.company-profile-heading,
.company-profile-editor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.company-profile-heading .settings-desc,
.company-profile-editor-heading .settings-desc {
    margin-bottom: 0;
}

.company-profile-list {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.company-profile-row {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--border-2);
    background: #fff;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.company-profile-row:last-child {
    border-bottom: 0;
}

.company-profile-row:hover {
    background: var(--bg-sub);
}

.company-profile-row:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.company-profile-logo {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-sub);
    color: var(--ink3);
    font-size: 12px;
    font-weight: 700;
}

.company-profile-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-profile-summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.company-profile-summary strong {
    overflow: hidden;
    font-size: 13.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-profile-summary span,
.company-profile-vat,
.company-profile-open {
    color: var(--muted);
    font-size: 12px;
}

.company-profile-open {
    color: var(--primary);
    font-weight: 600;
}

.company-profile-empty {
    margin-top: 14px;
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.company-profile-editor {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-2);
}

.company-profile-editor-heading {
    margin-bottom: 18px;
}

.company-profile-section-title {
    margin: 20px 0 12px;
    color: var(--ink3);
    font-size: 13px;
}

.company-profile-logo-editor {
    margin-top: 20px;
}

.company-profile-logo-editor > label {
    display: block;
    margin-bottom: 5px;
    color: var(--ink3);
    font-size: 12.5px;
    font-weight: 600;
}

.company-profile-logo-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
}

.company-profile-logo-preview img {
    max-width: 200px;
    max-height: 64px;
}

@media (max-width: 680px) {
    .company-profile-heading,
    .company-profile-editor-heading {
        flex-direction: column;
    }

    .company-profile-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .company-profile-vat,
    .company-profile-open {
        grid-column: 2;
    }
}

.settings-mono {
    font-family: 'JetBrains Mono', monospace;
}

.settings-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--ink2);
    cursor: pointer;
}

    .settings-check input {
        width: 16px;
        height: 16px;
        accent-color: var(--primary);
    }

.settings-source-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border-2);
    flex-wrap: wrap;
}

    .settings-source-row:first-of-type {
        border-top: none;
    }

.health-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0 8px 0;
    flex-wrap: wrap;
}

.health-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.health-ok {
    background: #15803d;
    color: #fff;
}

.health-err {
    background: var(--primary);
    color: #fff;
}

.health-unknown {
    background: var(--bg-2);
    color: var(--fg-muted);
}

.health-err-msg {
    font-size: 0.75rem;
    color: var(--primary);
    word-break: break-word;
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* ── Conversation thread ─────────────────────────────────────────────────────── */
a.conv-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

    a.conv-card:hover {
        border-color: var(--primary);
    }

.thread {
    padding: 8px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.msg {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
}

.msg-inbound {
    border-left: 3px solid var(--danger);
}

.msg-outbound {
    border-left: 3px solid var(--success);
}

.msg-internal {
    border-left: 3px solid var(--muted);
    opacity: .8;
}

.msg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.msg-dir {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 5px;
}

.msg-dir-inbound {
    background: var(--danger-bg);
    color: var(--danger);
}

.msg-dir-outbound {
    background: var(--success-bg);
    color: var(--success);
}

.msg-dir-internal {
    background: var(--card-head);
    color: var(--muted);
}

.msg-time {
    margin-left: auto;
    font-size: .74rem;
}

.msg-reply-time {
    font-size: .7rem;
    font-weight: 600;
    color: var(--success);
    background: var(--success-bg);
    padding: 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.msg-spam {
    margin-left: 8px;
}

.msg-recipients {
    font-size: .76rem;
    color: var(--muted);
    margin: 0 0 8px;
    word-break: break-word;
}

.msg-recipients-label {
    font-weight: 700;
    color: var(--muted2);
    margin-right: 6px;
}

/* Collapsible follow-up messages (first message stays open) */
.msg-head-toggle {
    cursor: pointer;
}

    .msg-head-toggle:hover .msg-dir {
        filter: brightness(0.96);
    }

.msg-caret {
    color: var(--muted);
    font-size: 0.72rem;
    width: 0.8em;
    flex-shrink: 0;
}

.msg-collapsed {
    background: var(--card-head);
}

.msg-preview {
    color: var(--muted);
    font-size: 0.82rem;
    margin-top: 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Chat view ────────────────────────────────────── */
/* ── Chat view ────────────────────────────────────── */
.view-toggle {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 8px;
    background: var(--card-head);
}

    .view-toggle button {
        padding: 4px 12px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        font-size: .76rem;
        font-weight: 600;
        transition: background .15s, color .15s;
    }

        .view-toggle button.active {
            background: #fff;
            color: var(--text);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
        }


/* ── Chat timeline (ChatView component) ─────────── */
.chat-timeline {
    display: flex;
    flex-direction: column;
    padding: 12px 16px 0;
}

/* Timeline item: gutter (number + line) + card */
.ct-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0;
    min-height: 0;
}

.ct-gutter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
}

.ct-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    flex-shrink: 0;
    z-index: 1;
}

.ct-line {
    flex: 1;
    width: 2px;
    background: #e4cbd3;
    min-height: 14px;
}

/* Card */
.ct-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;
}

.ct-inbound .ct-card {
    border-color: #ecd4dc;
    background: #fffafb;
}

.ct-internal .ct-card {
    border-style: dashed;
    background: var(--card-head);
}

/* Collapsed item — compact spacing */
.ct-collapsed .ct-card {
    opacity: .92;
}

/* Header row */
.ct-toggle {
    cursor: pointer;
    user-select: none;
}

    .ct-toggle:hover {
        background: rgba(180, 30, 65, .04);
    }

.ct-caret {
    color: var(--primary);
    font-size: .7rem;
    width: 14px;
    flex-shrink: 0;
}

.ct-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: .75rem;
    background: rgba(255,255,255,.82);
}

.ct-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.ct-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ct-reply-ref {
    color: var(--primary);
    font-size: .72rem;
    font-weight: 700;
}

.ct-sep {
    color: #ddb8c4;
    font-weight: 300;
}

.ct-name {
    color: var(--primary);
    font-size: .84rem;
    font-weight: 700;
}

.ct-inbound .ct-name {
    color: var(--text);
}

.ct-email {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-time {
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

/* Speaker button */
.ct-speak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card-head);
    color: var(--primary);
    cursor: pointer;
    font-size: .76rem;
    transition: background .15s, transform .15s;
}

    .ct-speak:hover {
        background: var(--danger-bg);
        transform: scale(1.06);
    }

    .ct-speak:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

/* Body */
.ct-body {
    padding: 10px 16px 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--text);
    max-height: 200px;
    overflow-y: auto;
}

    .ct-body:empty::after {
        content: "(no text)";
        opacity: .5;
    }

/* Collapsed preview */
.ct-preview {
    padding: 4px 16px 8px;
    font-size: .78rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

    .ct-preview:hover {
        color: var(--text);
    }

/* Attachments */
.ct-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 12px;
}

.ct-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--primary);
    border-radius: 5px;
    background: #fff;
    color: var(--primary);
    font-size: .73rem;
    font-weight: 600;
    text-decoration: none;
}

    .ct-attach-chip:hover {
        background: var(--danger-bg);
    }

/* Signature toggle */
.ct-sig-toggle {
    padding: 0 16px 10px;
    font-size: .75rem;
}

    .ct-sig-toggle summary {
        color: var(--primary);
        cursor: pointer;
        font-weight: 600;
        user-select: none;
    }

        .ct-sig-toggle summary:hover {
            text-decoration: underline;
        }

.ct-sig-body {
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--card-head);
    border-radius: 6px;
    font-size: .78rem;
    color: var(--muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    border: none;
}

/* ── MailThread component ─────────────────── */
.mt-summary {
    padding: 10px 14px;
    margin-bottom: 8px;
    background: var(--card-head);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
}

.mt-summary-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
}

.mt-summary-text {
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
}

.mt-subject {
    padding: 4px 14px 2px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
}

.mt-item {
    display: block;
    margin-bottom: 4px;
}

/* Reply link — visual connector above card */
.ct-reply-link {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 14px;
    height: 22px;
    position: relative;
}

.ct-reply-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.ct-reply-trace {
    flex: 1;
    height: 2px;
    background: linear-gradient( 90deg, var(--primary) 0%, #ecd4dc 100% );
    max-width: 120px;
}

.ct-reply-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--danger-bg);
    color: var(--primary);
    font-size: .65rem;
    font-weight: 800;
    flex-shrink: 0;
}

.ct-has-parent {
    border-top-color: var(--primary);
    border-top-width: 2px;
}

/* Footer */
.ct-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 14px;
    font-size: .78rem;
    color: var(--muted);
}

.ct-msg-count {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-collapse-btn {
    border: none;
    background: none;
    color: var(--muted);
    font-size: .75rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

    .ct-collapse-btn:hover {
        background: var(--card-head);
        color: var(--text);
    }

/* Mobile */
@media (max-width: 760px) {
    .ct-item {
        grid-template-columns: 36px 1fr;
    }

    .ct-num {
        width: 26px;
        height: 26px;
        font-size: .6rem;
    }

    .ct-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ct-right {
        width: 100%;
        justify-content: flex-end;
    }

    .ct-body {
        padding: 8px 12px 10px;
    }

    .ct-attachments {
        padding: 0 12px 10px;
    }
}

/* ── AI assistant panel ─────────────────────────── */
/* ── AI floating FAB ──────────────────────── */
.ai-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 900;
    transition: background 0.15s, transform 0.15s;
}

    .ai-fab:hover {
        background: var(--primary-hv);
        transform: scale(1.06);
    }

/* ── AI slide-out drawer ──────────────────── */
.ai-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 92vw;
    height: 100vh;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(0,0,0,0.10);
    z-index: 950;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

    .ai-drawer.open {
        transform: translateX(0);
    }

.ai-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

    .ai-drawer-head h3 {
        font-size: 0.92rem;
        font-weight: 700;
        margin: 0;
    }

.ai-drawer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-drawer-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
}

    .ai-drawer-close:hover {
        background: var(--bg-sub);
        color: var(--text);
    }

.ai-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #EBD3D3;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    margin: 0 12px 8px;
    flex-shrink: 0;
}

.ai-privacy {
    align-items: flex-start;
    background: #fff8e6;
    border-top: 1px solid #f1d58a;
    color: #684d05;
    display: flex;
    font-size: 0.78rem;
    gap: 0.45rem;
    line-height: 1.35;
    padding: 0.7rem 1rem;
}

    .ai-privacy input {
        margin-top: 0.15rem;
    }

.ai-text {
    font-family: inherit;
    font-size: 0.84rem;
    line-height: 1.6;
    word-break: break-word;
    margin: 0;
}

    .ai-text p {
        margin: 0.4em 0;
    }

        .ai-text p:first-child {
            margin-top: 0;
        }

        .ai-text p:last-child {
            margin-bottom: 0;
        }

    .ai-text h1, .ai-text h2, .ai-text h3 {
        font-size: 0.92rem;
        font-weight: 700;
        margin: 0.6em 0 0.3em;
    }

        .ai-text h1:first-child,
        .ai-text h2:first-child,
        .ai-text h3:first-child {
            margin-top: 0;
        }

    .ai-text ul, .ai-text ol {
        margin: 0.3em 0;
        padding-left: 1.4em;
    }

    .ai-text li {
        margin: 0.15em 0;
    }

    .ai-text code {
        background: var(--card-head);
        padding: 1px 4px;
        border-radius: 3px;
        font-size: 0.8rem;
    }

    .ai-text pre {
        background: var(--card-head);
        padding: 8px 10px;
        border-radius: 6px;
        overflow-x: auto;
        font-size: 0.8rem;
        margin: 0.4em 0;
    }

        .ai-text pre code {
            background: none;
            padding: 0;
        }

    .ai-text strong {
        font-weight: 700;
    }

    .ai-text hr {
        border: none;
        border-top: 1px solid var(--border);
        margin: 0.5em 0;
    }

.ai-speak-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--muted);
    padding: 0 2px;
    line-height: 1;
    margin-left: auto;
    opacity: 0.6;
    transition: opacity 0.15s;
}

    .ai-speak-btn:hover {
        opacity: 1;
        color: var(--primary);
    }

.ai-chat-meta {
    font-size: 0.65rem;
    color: var(--muted);
    margin-top: 4px;
    display: flex;
    gap: 4px;
}

.ai-speaking-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    background: var(--bg-sub);
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--muted);
    flex-shrink: 0;
}

.ai-stop-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--danger);
}

    .ai-stop-btn:hover {
        background: var(--danger-bg);
    }

.summary-player {
    display: inline-flex;
    align-items: center;
}

.summary-player-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 0.78rem;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
}

    .summary-player-btn:hover {
        background: var(--bg-sub);
    }

    .summary-player-btn.playing {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .summary-player-btn:disabled {
        opacity: 0.5;
        cursor: default;
    }

.summary-player-icon {
    font-size: 0.7rem;
}

.ai-picker {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 0.78rem;
    background: #fff;
    color: var(--text);
    min-width: 120px;
}

    .ai-picker:focus {
        outline: none;
        border-color: var(--primary);
    }

/* ── AI skill (persona) picker ────────────── */
.ai-skill-picker {
    padding: 10px 16px 0;
    flex-shrink: 0;
}

    .ai-skill-picker select {
        width: 100%;
    }

/* ── AI prompt buttons row ───────────────── */
.ai-skills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 16px 8px;
    flex-shrink: 0;
}

.ai-skill-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

    .ai-skill-btn:hover:not(:disabled) {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--danger-bg);
    }

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

.ai-skill-icon {
    font-size: 0.9rem;
}

.ai-skill-list-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── AI chat body (scrollable) ────────────── */
.ai-chat-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

.ai-empty {
    color: var(--muted2);
    font-size: 0.84rem;
    text-align: center;
    margin: auto 0;
    padding: 40px 20px;
}

.ai-chat-msg {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.84rem;
}

.ai-chat-user {
    background: var(--info-bg);
    border: 1px solid #D0DDEF;
    align-self: flex-end;
    max-width: 90%;
}

.ai-chat-assistant {
    background: var(--bg-sub);
    border: 1px solid var(--border);
    align-self: flex-start;
    max-width: 100%;
}

.ai-chat-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-chat-skill-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--danger-bg);
    color: var(--primary);
    text-transform: none;
    letter-spacing: 0;
}

.ai-thinking {
    color: var(--muted);
    font-size: 0.82rem;
    font-style: italic;
    animation: ai-pulse 1.5s ease-in-out infinite;
}

@keyframes ai-pulse {
    0%, 100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* ── AI input bar (pinned bottom) ─────────── */
.ai-input-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--card);
}

.ai-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.84rem;
    background: var(--bg-sub);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
}

    .ai-input:focus {
        border-color: var(--primary);
        background: #fff;
    }

    .ai-input::placeholder {
        color: var(--muted2);
    }

.ai-send-btn {
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

    .ai-send-btn:hover:not(:disabled) {
        background: var(--primary-hv);
    }

    .ai-send-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.ai-provider-list {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.ai-provider-item {
    border-bottom: 1px solid var(--border-2);
}

    .ai-provider-item:last-child {
        border-bottom: none;
    }

    .ai-provider-item.open {
        background: var(--bg-sub);
    }

.ai-provider-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
}

    .ai-provider-summary:hover {
        background: var(--bg-sub);
    }

.ai-provider-caret {
    color: var(--muted);
    font-size: 0.72rem;
    width: 0.8em;
    flex-shrink: 0;
}

.ai-provider-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
}

.ai-type-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.ai-type-claude {
    background: #F3E8D0;
    color: #7A5A00;
}

.ai-type-openai {
    background: #D9ECD9;
    color: #2A6B2A;
}

.ai-type-local {
    background: var(--info-bg);
    color: var(--info);
}

.ai-provider-model {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-provider-edit {
    padding: 10px 14px 14px;
}

    .ai-provider-edit .settings-grid {
        margin-bottom: 8px;
    }

    .ai-provider-edit .btn-danger-outline {
        margin-top: 4px;
    }

/* ── AI Usage Dashboard ─────────────────── */
.usage-table-card {
    margin-top: 16px;
}

    .usage-table-card .table-wrap {
        overflow-x: auto;
    }

    .usage-table-card .email-table th.num,
    .usage-table-card .email-table td.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.usage-when {
    white-space: nowrap;
    color: var(--ink2);
}

.source-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.source-skill {
    background: var(--info-bg);
    color: var(--info);
}

.source-freeform {
    background: var(--success-bg);
    color: var(--success);
}

.source-auto {
    background: var(--warning-bg);
    color: var(--warning);
}

.ai-meta-provider {
    font-weight: 600;
    color: var(--ink2);
}

.ai-meta-when {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.8rem;
}

.usage-link {
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

    .usage-link:hover {
        text-decoration: underline;
    }

/* ── Quarantine ─────── */
.quarantine-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.q-account {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

.q-folder {
    font-size: 12px;
    color: var(--ink3);
}

.q-subject {
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.q-sender {
    font-size: 12px;
    color: var(--ink3);
}

.q-error {
    font-size: 12px;
    color: var(--danger);
    word-break: break-word;
}

.q-when {
    font-size: 12px;
    color: var(--ink3);
    white-space: nowrap;
}

.q-dismissed-label {
    font-size: 12px;
    color: var(--ink3);
    font-style: italic;
}

.quarantine-dismissed {
    opacity: 0.5;
}

/* ── Users and roles ───────────────────────────── */
.users-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.users-page-header h1 {
    margin: 3px 0 4px;
    color: var(--text);
    font-size: 1.7rem;
    line-height: 1.15;
}

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

.users-page-eyebrow,
.users-section-label {
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.users-total-badge {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.users-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.users-overview-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 14px 17px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--card);
    box-shadow: 0 2px 8px rgba(31, 25, 27, 0.04);
}

.users-overview-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary);
    content: "";
}

.users-overview-card span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.users-overview-card strong {
    color: var(--text);
    font-size: 1.55rem;
    font-variant-numeric: tabular-nums;
}

.users-overview-admin::before {
    background: #9e274a;
}

.users-overview-viewer::before {
    background: #287a62;
}

.users-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.users-action-card {
    padding: 20px;
}

.users-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 18px;
}

.users-card-heading h2,
.users-directory-header h2 {
    margin: 0 0 3px;
    color: var(--text);
    font-size: 1rem;
}

.users-card-heading p,
.users-directory-header p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.users-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--danger-bg);
    color: var(--primary);
    font-size: 1rem;
    font-weight: 800;
}

.users-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.users-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.users-field > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.users-field-wide {
    grid-column: 1 / -1;
}

.users-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.users-import-copy {
    min-height: 77px;
    padding: 14px;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    background: var(--bg-sub);
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.users-import-password {
    margin-top: 16px;
}

.users-feedback {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--bg-sub);
    color: var(--muted);
    font-size: 0.78rem;
}

.users-directory-card {
    overflow: hidden;
}

.users-directory-header {
    display: flex;
    justify-content: space-between;
    padding: 19px 20px 12px;
}

.users-search {
    margin: 0 20px 16px;
}

.users-directory-card .table-wrap {
    border-top: 1px solid var(--border-2);
}

.users-directory-card .email-table td {
    vertical-align: middle;
}

.users-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
}

.users-identity > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.users-identity strong,
.users-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-identity strong {
    color: var(--text);
    font-size: 0.82rem;
}

.users-identity small {
    color: var(--muted);
    font-size: 0.7rem;
}

.users-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f2e6ea;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.users-role-pill {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}

.users-role-admin {
    background: #f7e3e9;
    color: #8b1f40;
}

.users-role-viewer {
    background: #e2f2ec;
    color: #17664f;
}

.users-collector-button,
.users-remove-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 650;
    cursor: pointer;
}

.users-collector-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.users-remove-button {
    border-color: transparent;
    color: var(--danger);
}

.users-remove-button:hover {
    background: var(--danger-bg);
}

.users-collector-panel {
    margin: 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    background: var(--bg-sub);
}

/* ── Collector assignment (Users page) ── */
.collector-assign {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
}

.collector-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .users-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .users-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .users-overview {
        grid-template-columns: 1fr;
    }

    .users-form-grid {
        grid-template-columns: 1fr;
    }

    .users-field-wide {
        grid-column: auto;
    }
}

/* ── Stats enhancements ─── */
.stats-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.stats-page-header h1 {
    margin: 3px 0 4px;
    color: var(--text);
    font-size: 1.7rem;
    line-height: 1.15;
}

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

.stats-page-eyebrow {
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.stats-total-badge {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.stats-filter-panel {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
}

.stats-filter-panel .stats-range-bar,
.stats-filter-panel .stats-collector-bar {
    margin-bottom: 0;
}

.stats-filter-panel .stats-collector-bar {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-2);
}

.stats-insight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stats-insight-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 2px 8px rgba(31, 25, 27, 0.04);
}

.stats-insight-card > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stats-insight-card span:not(.stats-insight-icon) {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.stats-insight-card strong {
    overflow: hidden;
    margin: 2px 0;
    color: var(--text);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-insight-card small {
    color: var(--muted2);
    font-size: 0.66rem;
    line-height: 1.35;
}

.stats-insight-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--info-bg);
    color: var(--info);
    font-size: 0.85rem;
    font-weight: 800;
}

.stats-insight-alert {
    background: var(--warning-bg);
    color: var(--warning);
}

.stats-range-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.stats-collector-bar,
.collector-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.collector-bar-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-right: 4px;
}

.range-btn {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink3);
    cursor: pointer;
    transition: all .15s;
}

    .range-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .range-btn.active {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

.priority-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.priority-high {
    background: var(--warning-bg);
    color: var(--warning);
}

.priority-critical {
    background: var(--danger-bg);
    color: var(--danger);
}

.sla-pill {
    font-weight: 700;
    font-size: 13px;
}

.sla-detail {
    font-size: 12px;
    color: var(--ink3);
    margin-left: 4px;
}

.section-sub {
    font-size: 12px;
    color: var(--ink3);
    font-weight: 400;
}

@media (max-width: 1050px) {
    .stats-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .stats-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .stats-insight-grid {
        grid-template-columns: 1fr;
    }
}

/* Trend chart */
.trend-chart {
    padding: 12px 16px 8px;
}

.trend-legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--ink3);
    margin-bottom: 10px;
}

.trend-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

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

.trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    overflow-x: auto;
}

.trend-day {
    flex: 1;
    min-width: 14px;
    max-width: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
}

.trend-col {
    flex: 1;
    width: 100%;
    display: flex;
    gap: 1px;
    align-items: flex-end;
    position: relative;
}

.trend-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-height: 1px;
    transition: height .2s;
}

.trend-bar-in {
    background: var(--info);
    opacity: 0.7;
}

.trend-bar-out {
    background: var(--success);
    opacity: 0.7;
}

.trend-value {
    font-size: 9px;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    line-height: 1;
    padding-bottom: 2px;
    font-variant-numeric: tabular-nums;
}

.trend-label {
    font-size: 10px;
    color: var(--ink3);
    margin-top: 4px;
    white-space: nowrap;
}

/* ── Full-text search ─────────────────────── */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    max-width: 720px;
}

.search-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
}

    .search-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(158, 39, 74, 0.12);
    }

.search-meta {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 12px;
}

.search-item {
    border-bottom: 1px solid var(--border);
}

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

.search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13.5px;
}

    .search-row:hover {
        background: var(--card-head);
    }

    .search-row.open {
        background: var(--card-head);
        border-bottom: 1px solid var(--border);
    }

    .search-row.excluded-row {
        opacity: 0.55;
    }

.search-subject {
    flex: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.search-sender {
    width: 180px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-date {
    width: 130px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12.5px;
}

.search-conv-link {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

    .search-conv-link:hover {
        text-decoration: underline;
    }

.search-preview {
    padding: 2px 14px 8px 14px;
    font-size: 12.5px;
    line-height: 1.4;
}

.search-conv-wrap {
    padding: 12px 14px 16px 14px;
}

.search-view-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
}

    .search-view-toggle button {
        padding: 5px 16px;
        font-size: 12.5px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--muted);
        cursor: pointer;
    }

        .search-view-toggle button:first-child {
            border-radius: 6px 0 0 6px;
        }

        .search-view-toggle button:last-child {
            border-radius: 0 6px 6px 0;
            border-left: none;
        }

        .search-view-toggle button.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }

.dir-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
}

.dir-inbound {
    background: rgba(23, 74, 139, 0.1);
    color: var(--info);
}

.dir-outbound {
    background: rgba(31, 122, 77, 0.1);
    color: var(--success);
}

.dir-internal {
    background: var(--border-2);
    color: var(--muted);
}

.col-dir {
    width: 52px;
}

.col-date {
    width: 130px;
    white-space: nowrap;
}

.col-preview {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Calendar ────────────────────────────── */

.cal-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cal-heading {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    min-width: 180px;
    text-align: center;
}

.cal-today-btn {
    margin-left: auto;
}

.btn-icon {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 10px;
    line-height: 1;
}

    .btn-icon:hover {
        background: var(--bg-sub);
    }

.cal-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.cal-dow {
    background: var(--card);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding: 8px 0;
}

.cal-cell {
    background: var(--card);
    min-height: 80px;
    padding: 6px 8px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}

    .cal-cell:hover {
        background: var(--bg-sub);
    }

.cal-other {
    opacity: 0.35;
}

.cal-today {
    background: var(--danger-bg);
}

    .cal-today:hover {
        background: var(--danger-bg);
        filter: brightness(0.95);
    }

.cal-selected {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    z-index: 1;
}

.cal-day-num {
    font-size: 0.85rem;
    font-weight: 500;
}

.cal-today .cal-day-num {
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cal-in {
    background: var(--primary);
}

.cal-out {
    background: var(--success);
}

.cal-count {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 2px;
}

.cal-detail {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

@media (max-width: 900px) {
    .cal-body {
        flex-direction: column;
    }

    .cal-detail {
        width: 100%;
        position: static;
        max-height: none;
    }
}

.cal-detail-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.cal-conv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

    .cal-conv-row:last-child {
        border-bottom: none;
    }

    .cal-conv-row:hover {
        background: var(--bg-sub);
    }

.cal-conv-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cal-conv-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cal-msg-count {
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
}

.cal-event {
    font-size: 0.7rem;
    line-height: 1.3;
    padding: 1px 4px;
    margin-top: 2px;
    border-radius: 3px;
    background: var(--success-bg);
    border-left: 3px solid var(--success);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-reminder {
    background: var(--info-bg);
    border-left-color: var(--info);
}

.cal-more {
    font-size: 0.65rem;
    color: var(--muted);
    margin-top: 1px;
    padding-left: 4px;
}

.cal-dots {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
}

.cal-section-head {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding: 8px 14px 4px;
    border-bottom: 1px solid var(--border);
}

.cal-event-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

    .cal-event-row:last-child {
        border-bottom: none;
    }

    .cal-event-row.cal-clickable {
        cursor: pointer;
    }

        .cal-event-row.cal-clickable:hover {
            background: var(--bg-sub);
        }

.cal-event-time {
    min-width: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--success);
    padding-top: 1px;
}

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

.cal-method {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--bg-sub);
    border-radius: 4px;
    padding: 2px 6px;
    align-self: flex-start;
}

.cal-conversations {
    margin-top: 20px;
}

.cal-ev-detail {
    padding: 0;
}

.cal-ev-fields {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .cal-ev-fields td {
        padding: 6px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
    }

.cal-ev-label {
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    width: 80px;
}

.cal-allday-badge {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--muted);
    background: var(--bg-sub);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
}

.cal-ev-body {
    padding: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-x: auto;
}

    .cal-ev-body .mail-body {
        white-space: pre-wrap;
        font-size: 0.85rem;
        margin: 0;
    }

    .cal-ev-body .mail-body-html {
        overflow-x: auto;
    }

/* ── Knowledge Base ──────────────────────── */
.kb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.kb-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.kb-search-input {
    flex: 1;
}

.kb-add-form {
    margin-bottom: 16px;
}

    .kb-add-form .form-row {
        margin-bottom: 10px;
    }

    .kb-add-form .form-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 4px;
        color: var(--muted);
    }

    .kb-add-form .form-input {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 0.9rem;
        background: var(--bg);
        color: var(--fg);
    }

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.kb-error {
    color: var(--danger, #e74c3c);
    font-size: 0.85rem;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(231, 76, 60, 0.08);
    border-radius: 6px;
}

.kb-sources {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kb-source-card {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

.kb-source-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.kb-source-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.kb-source-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
}

.kb-status-pending {
    background: rgba(108, 117, 125, 0.12);
    color: var(--muted);
}

.kb-status-crawling {
    background: rgba(52, 152, 219, 0.12);
    color: #3498db;
}

.kb-status-ready {
    background: rgba(39, 174, 96, 0.12);
    color: #27ae60;
}

.kb-status-error {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
}

.kb-source-url {
    font-size: 0.85rem;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .kb-source-url a {
        color: var(--accent, #3b82f6);
        text-decoration: none;
    }

        .kb-source-url a:hover {
            text-decoration: underline;
        }

.kb-source-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 8px;
}

.kb-source-client {
    font-weight: 600;
}

.kb-source-actions {
    display: flex;
    gap: 6px;
}

.btn-danger {
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.3);
}

    .btn-danger:hover {
        background: rgba(231, 76, 60, 0.08);
    }

/* KB search results */
.kb-result {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

    .kb-result:last-child {
        border-bottom: none;
    }

.kb-result-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 4px;
}

.kb-result-score {
    font-weight: 600;
    color: var(--accent, #3b82f6);
}

.kb-result-content {
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Suggested replies */
.kb-reply-card {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--bg);
}

.kb-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.kb-reply-subject {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--accent, #3b82f6);
    text-decoration: none;
}

    .kb-reply-subject:hover {
        text-decoration: underline;
    }

.kb-reply-conf {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.kb-reply-client {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 6px;
}

.kb-reply-body {
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 8px 10px;
    background: rgba(59, 130, 246, 0.04);
    border-radius: 6px;
    margin-bottom: 6px;
    white-space: pre-wrap;
}

.kb-reply-sources {
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 8px;
}

.kb-reply-actions {
    display: flex;
    gap: 6px;
}

/* ── KB chunk browser ── */
.kb-chunks-list {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

.kb-chunks-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.kb-chunk-item {
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
}

.kb-chunk-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted, #777);
    margin-bottom: 4px;
}

.kb-chunk-idx {
    font-weight: 600;
    color: var(--accent, #3b82f6);
}

.kb-chunk-title {
    font-weight: 500;
}

.kb-chunk-url {
    margin-left: auto;
}

.kb-chunk-content {
    font-size: 0.88rem;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.45;
}

/* ── Watchlist page ── */
.wl-header-actions {
    display: flex;
    gap: 8px;
}

.wl-group-form {
    margin-bottom: 16px;
}

.wl-missed {
    border-color: var(--danger, #e74c3c);
}

.wl-missed-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger, #e74c3c);
    margin-right: 6px;
}

.wl-entries {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wl-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
}

    .wl-entry.wl-waiting {
        border-left: 3px solid var(--danger, #e74c3c);
    }

.wl-entry-main {
    flex: 1;
    min-width: 0;
}

.wl-subject {
    font-weight: 600;
    color: var(--text);
}

.wl-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted, #777);
    margin-top: 2px;
}

.wl-client {
    font-weight: 500;
}

.wl-status {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wl-status-waiting_us {
    background: #fde2e2;
    color: #b91c1c;
}

.wl-status-waiting_client {
    background: #dbeafe;
    color: #1d4ed8;
}

.wl-status-answered {
    background: #d1fae5;
    color: #065f46;
}

.wl-mine {
    color: var(--accent, #3b82f6);
    font-weight: 500;
}

.wl-source {
    font-style: italic;
}

.wl-subject-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.wl-open-link {
    font-size: 0.78rem;
    color: var(--primary, #9E274A);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

    .wl-open-link:hover {
        text-decoration: underline;
    }

.wl-summary-preview {
    padding: 8px 16px 12px 16px;
    background: var(--bg, #f4f4f5);
    border-top: 1px solid var(--border, #e0e0e0);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted, #555);
}

.wl-summary-text {
    margin: 0;
}

.wl-summary-loading {
    font-style: italic;
    color: var(--text-muted, #999);
}

.wl-entry-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-close-conv {
    color: #666;
    border-color: #ccc;
}

    .btn-close-conv:hover {
        background: #dc3545;
        color: #fff;
        border-color: #dc3545;
    }

.wl-group-select {
    max-width: 140px;
    font-size: 0.82rem;
    padding: 2px 6px;
}

.wl-settings-groups {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.wl-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--surface-dim, #f3f3f3);
    border-radius: 6px;
    font-size: 0.88rem;
}

/* ── Watchlist digest card ── */
.wl-digest {
    border-color: var(--accent, #3b82f6);
    background: var(--surface, #fff);
}

    .wl-digest .card-heading {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

.wl-digest-date {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--muted, #888);
}

.wl-digest-summary {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 8px 0 12px;
    white-space: pre-line;
}

.wl-digest-stats {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--muted, #888);
}

.wl-digest-stat {
    padding: 3px 8px;
    background: var(--surface-dim, #f3f3f3);
    border-radius: 4px;
}

.wl-digest-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

    .wl-digest-link:hover {
        background: var(--hover-bg, #e8e8e8);
        color: var(--accent, crimson);
    }

/* ── Client search dropdown ── */
.wl-client-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    z-index: 10;
    margin-top: 2px;
}

.wl-client-option {
    padding: 6px 10px;
    font-size: 0.88rem;
    cursor: pointer;
}

    .wl-client-option:hover {
        background: var(--surface-dim, #f3f3f3);
    }

/* ── Collapsible group headers ── */
.wl-collapse-hdr {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wl-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--muted, #888);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.wl-chevron-open {
    transform: rotate(90deg);
}

/* ── Watched client cards ── */
.wl-client-watch {
    border-left: 3px solid var(--accent, #3b82f6);
}

/* ── Suggested replies on conversation detail ── */
.suggested-replies {
    margin: 12px 0;
    border: 1px solid var(--accent, #3b82f6);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--bg);
}

.suggested-reply-card {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 8px;
    background: var(--surface, #fff);
}

.sr-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: var(--muted);
}

.sr-confidence {
    font-weight: 700;
    color: var(--accent, #3b82f6);
}

.sr-draft-tag {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--muted);
}

.sr-flags {
    margin-bottom: 8px;
    padding: 6px 10px;
    border-left: 3px solid #b45309;
    background: rgba(180, 83, 9, 0.1);
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.sr-check {
    margin-bottom: 8px;
    font-size: 0.82rem;
    color: var(--muted);
}

.sr-check-items {
    white-space: pre-wrap;
}

.sr-sources {
    cursor: help;
    border-bottom: 1px dotted var(--muted);
}

.sr-body {
    white-space: pre-wrap;
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.sr-actions {
    display: flex;
    gap: 6px;
}

/* ── Assistant page ───────────────────── */
.assistant-page {
    display: flex;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.assistant-sidebar {
    width: 220px;
    min-width: 220px;
    padding: 16px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    background: var(--surface);
}

.assistant-side-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.assistant-side-mt {
    margin-top: 20px;
}

.assistant-skill-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    margin-bottom: 2px;
}

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

    .assistant-skill-btn.active {
        background: var(--primary);
        color: #fff;
    }

.assistant-skill-icon {
    font-size: 16px;
}

.assistant-provider-pick {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--surface);
    color: var(--text);
}

.assistant-consent {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

.assistant-hint {
    font-size: 12px;
    color: var(--text-muted);
}

    .assistant-hint a {
        color: var(--primary);
    }

.assistant-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.assistant-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}

.assistant-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
}

.assistant-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.assistant-empty h2 {
    font-size: 20px;
    margin: 0 0 8px;
    color: var(--text);
}

.assistant-empty p {
    max-width: 400px;
    font-size: 14px;
    line-height: 1.5;
}

.assistant-msg {
    margin-bottom: 20px;
    max-width: 760px;
}

.assistant-msg-user {
    padding: 12px 16px;
    background: var(--hover);
    border-radius: 10px;
}

.assistant-msg-assistant {
    padding: 12px 0;
}

.assistant-msg-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--text-muted);
}

    .assistant-msg-label strong {
        color: var(--text);
    }

.assistant-msg-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

    .assistant-msg-text p {
        margin: 0 0 8px;
    }

        .assistant-msg-text p:last-child {
            margin: 0;
        }

    .assistant-msg-text h2 {
        font-size: 15px;
        margin: 12px 0 4px;
    }

    .assistant-msg-text h3 {
        font-size: 14px;
        margin: 10px 0 4px;
    }

    .assistant-msg-text ul,
    .assistant-msg-text ol {
        margin: 4px 0;
        padding-left: 20px;
    }

    .assistant-msg-text code {
        background: var(--hover);
        padding: 1px 4px;
        border-radius: 3px;
        font-size: 13px;
    }

    .assistant-msg-text blockquote {
        border-left: 3px solid var(--primary);
        margin: 8px 0;
        padding: 4px 12px;
        color: var(--text-muted);
    }

.assistant-input-bar {
    display: flex;
    gap: 8px;
    padding: 12px 32px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.assistant-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
}

    .assistant-input:focus {
        outline: none;
        border-color: var(--primary);
    }

.assistant-send-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .assistant-send-btn:hover:not(:disabled) {
        opacity: 0.9;
    }

    .assistant-send-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* ── Quoting / Invoicing ────────────────── */
.q-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 700px) {
    .q-detail-grid {
        grid-template-columns: 1fr;
    }
}

.q-info-card,
.q-totals-card {
    padding: 16px;
}

.q-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

    .q-info-row:last-child {
        border-bottom: none;
    }

.q-info-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.q-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.q-total-row {
    border-top: 2px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
}

.q-total {
    font-size: 1.15rem;
    font-weight: 700;
}

.q-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.q-muted {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.q-serial-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.q-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.q-status-draft {
    background: var(--surface-accent, #e3e8ef);
    color: var(--text-muted, #6b7280);
}

.q-status-sent {
    background: #dbeafe;
    color: #1d4ed8;
}

.q-status-accepted,
.q-status-paid {
    background: #d1fae5;
    color: #047857;
}

.q-status-rejected,
.q-status-cancelled {
    background: #fee2e2;
    color: #b91c1c;
}

.q-status-overdue {
    background: #fef3c7;
    color: #92400e;
}

.q-status-active {
    background: #d1fae5;
    color: #047857;
}

.q-status-inactive {
    background: var(--surface-accent, #e3e8ef);
    color: var(--text-muted, #6b7280);
}

.btn-success {
    background: #059669;
    color: #fff;
    border: none;
}

    .btn-success:hover {
        background: #047857;
    }

.btn-danger {
    background: #dc2626;
    color: #fff;
    border: none;
}

    .btn-danger:hover {
        background: #b91c1c;
    }

.btn-xs {
    padding: 2px 8px;
    font-size: 0.75rem;
}

.form-error {
    color: #dc2626;
    font-size: 0.85rem;
    padding: 4px 0;
}

/* ── Invoice / Quote document preview ──── */
.inv-document,
.inv-doc {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px;
    margin-top: 16px;
    max-width: 210mm;
    box-shadow: 0 1px 6px rgba(60, 40, 20, 0.08);
}

.inv-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.inv-header-left {
    flex: 1;
}

.inv-doc-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.inv-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 0.88rem;
    align-items: baseline;
}

.inv-client-section {
    margin-top: 16px;
    padding-top: 12px;
}

.inv-label {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
}

.inv-client-name {
    font-weight: 600;
}

/* Company details card. The right edge is left open
   and the two logos are absolutely positioned into
   the right-hand gutter on a white ground, so they
   break through the border — matching the printed
   neaMetrics quotation template. */
.inv-header-right {
    position: relative;
    flex: 0 0 72mm;
    width: 86mm;
    min-height: 59mm;
    box-sizing: border-box;
    text-align: left;
    padding: 4mm 32mm 4mm 4mm;
    align-self: start;
}

/* Border wraps only the text area and ends at the
   logo gutter, so the logos sit in open space with
   no rule running behind them. */
.inv-header-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 31mm;
    bottom: 0;
    border: 1px solid var(--inv-green);
    border-right: 0;
    border-radius: 18px 0 0 18px;
    z-index: 0;
}

/* Vertical rule dividing the details from the
   logo gutter. */
.inv-header-right::after {
    content: "";
    position: absolute;
    top: 8mm;
    right: 15mm;
    bottom: 11.5mm;
    width: 1.5px;
    background: var(--inv-green);
    z-index: 0;
}

.inv-brand-mark {
    position: absolute;
    right: 2mm;
    top: -7mm;
    width: 26mm;
    height: 14mm;
    box-sizing: border-box;
    object-fit: contain;
    z-index: 1;
}

.inv-brand-mark-bottom {
    top: auto;
    bottom: -4mm;
}

.inv-company-name {
    font-size: 0.88rem;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 2px;
    white-space: nowrap;
}

.inv-co-detail {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.inv-co-spacer {
    height: 8px;
}

.inv-co-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 2px;
    align-items: baseline;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.inv-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.inv-items-section {
    margin-bottom: 0;
    overflow-x: auto;
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.inv-table thead {
    background: #333;
}

.inv-table th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    color: #fff;
    border-bottom: 2px solid var(--border);
}

.inv-table td {
    padding: 10px 10px;
    border-bottom:
        1px solid var(--border);
    vertical-align: top;
}

.inv-quote-table th:not(:last-child),
.inv-quote-table td:not(:last-child) {
    border-right: 1px dotted var(--border);
}

.inv-quote-subtotal td {
    padding: 6px 10px;
    background: #222;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.inv-quote-subtotal td:not(:last-child) {
    border-right-color: rgba(255, 255, 255, 0.45);
}

/* Keep the quotation form stable before products are added. */
.inv-empty-row {
    height: 20px;
}

.inv-empty-row td {
    height: 20px;
    padding: 0;
}

.inv-th-desc { width: 55%; }

.inv-th-qty {
    width: 10%;
    text-align: center;
}

.inv-th-num {
    width: 17%;
    text-align: right;
}

.inv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.inv-brand-row td {
    background: var(--surface-alt, #f0f0f0);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-bottom: 2px solid
        var(--border, #ccc);
}

.inv-brand-logo {
    height: 20px;
    width: auto;
    vertical-align: middle;
    margin-right: 8px;
}

.inv-client-addr-row {
    display: flex;
    gap: 32px;
    margin-top: 16px;
    position: relative;
}

.inv-client-addr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: start;
}

.inv-client-phones {
    position: absolute;
    left: calc(100% + 24px + 4mm);
    width: 53mm;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 0;
}

.inv-client-phones > div {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 10px;
}

.inv-brand-badge {
    position: absolute;
    right: 2mm;
    bottom: -7mm;
    width: 26mm;
    height: 14mm;
    box-sizing: border-box;
    text-align: center;
    z-index: 1;
}

.inv-header-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.inv-serials {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.inv-serial-tag {
    font-size: 0.72rem;
    color: var(--text-muted);
    background:
        var(--surface-accent, #f3f4f6);
    padding: 1px 6px;
    border-radius: 4px;
}

.inv-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 16px 0;
    border-top: 2px solid var(--border);
}

.inv-totals-row {
    display: flex;
    justify-content: space-between;
    min-width: 260px;
    font-size: 0.9rem;
}

.inv-grand {
    font-weight: 700;
    font-size: 1.05rem;
    border-top: 2px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
}

.stmt-overdue-row {
    min-width: 360px;
}

.stmt-overdue {
    color: #dc2626;
    font-weight: 600;
}

.inv-paid-stamp {
    display: inline-block;
    margin: 16px 0;
    padding: 6px 16px;
    border: 3px solid #059669;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    color: #059669;
    letter-spacing: 0.06em;
    transform: rotate(-3deg);
}

.inv-intl-banking {
    margin-top: 16px;
    padding: 16px;
    background:
        var(--surface-accent, #f8f9fa);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.inv-intl-banking .inv-detail-grid {
    margin-top: 4px;
}

.inv-terms {
    margin-top: 16px;
    padding: 12px 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    line-height: 1.5;
}

.inv-banking-footer {
    padding: 10px 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.inv-quote-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 20px;
    align-items: start;
    padding: 16px 8px 0;
}

.inv-quote-terms {
    border: 1px solid var(--inv-green);
    border-radius: 7px;
    padding: 8px 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: center;
}

.inv-quote-banking {
    margin-top: 4px;
    color: var(--text);
    font-weight: 600;
}

.inv-quote-totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
}

.inv-quote-total-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.inv-quote-grand {
    padding-top: 5px;
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
    font-weight: 700;
}

.inv-bank-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 0.88rem;
}

@media (max-width: 700px) {
    .inv-document {
        padding: 16px;
    }

    .inv-header {
        flex-direction: column-reverse;
    }

    .inv-header-right {
        flex-basis: auto;
        width: 100%;
        text-align: left;
        min-width: unset;
    }

    .inv-client-phones {
        position: static;
        width: auto;
        min-width: 180px;
        margin-left: auto;
    }

    .inv-bank-grid {
        grid-template-columns: 1fr;
    }

    .inv-totals-row {
        min-width: 100%;
    }

    .inv-quote-footer {
        grid-template-columns: 1fr;
    }
}

/* ── Print / PDF ──────────────────────────────────
   Isolates the quote/invoice document so browser
   print and the Puppeteer PDF renderer emit only
   the document, using the same markup and styles
   the on-screen preview uses. */
@media print {
    @page {
        size: A4;
        margin: 12mm 10mm;
    }

    html,
    body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .layout,
    main,
    .page {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .sidebar,
    .topbar,
    .notify-banner,
    .kb-header,
    .inv-no-print {
        display: none !important;
    }

    .inv-print-only {
        display: inline !important;
    }

    .inv-document {
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .inv-table thead {
        display: table-header-group !important;
    }

    .inv-table tbody {
        display: table-row-group !important;
    }

    .inv-table thead tr {
        break-after: avoid;
        page-break-after: avoid;
    }

    .inv-table tr,
    .inv-totals,
    .inv-terms,
    .inv-banking-footer,
    .inv-quote-footer {
        break-inside: avoid;
    }

    /* Twenty compact item rows fit on the first quotation page. */
    .inv-table {
        font-size: 0.72rem;
    }

    .inv-table th,
    .inv-table td {
        padding: 3px 5px;
    }

    .inv-empty-row,
    .inv-empty-row td {
        height: 4mm;
    }
}

/* Shown only in the printed / PDF document, hidden on screen. */
.inv-print-only {
    display: none;
}

.q-vat-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.q-vat-field .form-input {
    width: 76px;
}

/* Editable additional-note box on document pages */
.doc-notes {
    margin-top: 16px;
}

.doc-notes-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--ink3);
}

.doc-notes-input {
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

.doc-notes-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

/* Embedded document PDF preview (matches the printout) */
.doc-pdf-frame {
    display: block;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 210 / 297;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(60, 40, 20, 0.06);
}

/* Statement bank-account box (mirrors the Excel layout) */
.stmt-bank-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 32px;
    margin-top: 20px;
    padding: 12px 16px;
    border: 1px solid var(--inv-green);
    border-radius: 7px;
    font-size: 0.78rem;
}

.stmt-bank-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stmt-bank-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px;
}

.stmt-bank-head {
    font-weight: 700;
}

/* ── Modern buttons (app-wide) ───────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease,
        color .15s ease, box-shadow .15s ease,
        transform .04s ease;
}

    .btn:hover {
        background: var(--card-head);
        border-color: #d7cdd0;
    }

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

    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(158, 39, 74, 0.22);
    }

    .btn:disabled,
    .btn[disabled] {
        opacity: .5;
        cursor: not-allowed;
        transform: none;
    }

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(158, 39, 74, 0.25);
}

    .btn-primary:hover {
        background: var(--primary-hv);
        border-color: var(--primary-hv);
    }

.btn-success {
    background: #1f9d57;
    border-color: #1f9d57;
    color: #fff;
}

    .btn-success:hover {
        background: #198048;
        border-color: #198048;
    }

.btn-danger {
    background: #d64545;
    border-color: #d64545;
    color: #fff;
}

    .btn-danger:hover {
        background: #c23b3b;
        border-color: #c23b3b;
    }

.btn-sm {
    padding: 6px 13px;
    font-size: 0.8rem;
    border-radius: 8px;
}

.btn-xs {
    padding: 4px 9px;
    font-size: 0.72rem;
    border-radius: 7px;
}

/* Invoice list paid cell + top total highlight */
.inv-paid-cell {
    color: #1f9d57;
    font-weight: 600;
}

.inv-total-hl {
    font-weight: 700;
    color: var(--text);
}

/* Countdown confirmation dialog */
.cc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(34, 31, 31, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    animation: cc-fade-in .15s ease;
}

.cc-dialog {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border-2);
    border-radius: 16px;
    padding: 24px 26px;
    width: min(420px, calc(100vw - 32px));
    box-shadow: 0 24px 60px rgba(34, 31, 31, 0.22),
        0 4px 14px rgba(34, 31, 31, 0.1);
    animation: cc-pop-in .18s cubic-bezier(.2, .8, .3, 1);
}

@keyframes cc-fade-in {
    from { opacity: 0; }
}

@keyframes cc-pop-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-overlay, .cc-dialog {
        animation: none;
    }
}

.cc-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

.cc-message {
    margin: 0 0 18px;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}

.cc-bar {
    height: 6px;
    background: var(--border-2);
    border-radius: 999px;
    overflow: hidden;
}

.cc-bar-fill {
    height: 100%;
    background: var(--danger);
    border-radius: 999px;
    transition: width 1s linear;
}

.cc-count {
    margin: 8px 0 20px;
    font-size: 0.78rem;
    color: var(--muted2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cc-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 650;
    line-height: 1.15;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease,
        box-shadow .15s ease, transform .04s ease;
}

    .cc-btn:active {
        transform: scale(.97);
    }

.cc-cancel {
    background: var(--card);
    border-color: var(--line-in);
    color: var(--text);
}

    .cc-cancel:hover {
        border-color: var(--line-hov);
        background: var(--bg);
    }

.cc-confirm-mild {
    background: var(--card);
    border-color: #EBD3D3;
    color: var(--danger);
}

    .cc-confirm-mild:hover {
        background: var(--danger-bg);
        border-color: var(--danger);
    }

.cc-confirm {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    box-shadow: 0 1px 2px rgba(158, 39, 74, 0.25);
}

    .cc-confirm:hover {
        background: var(--danger-hv);
        border-color: var(--danger-hv);
    }

.reminder-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    margin: 12px 0 4px;
}

.reminder-hint-inline {
    font-weight: 400;
    color: var(--muted);
}

.reminder-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}

    .reminder-input:focus {
        outline: none;
        border-color: var(--primary);
    }

.reminder-context {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 6px 0 0;
}

.reminder-tag-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.reminder-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--info-bg);
    color: var(--info);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 4px 3px 9px;
    border-radius: 999px;
}

.reminder-tag-remove {
    background: none;
    border: none;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.reminder-tag-input {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    font-size: 0.85rem;
    height: 24px;
    padding: 0 4px;
}

.reminder-suggestions {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 160px;
    overflow-y: auto;
    margin-top: -1px;
}

.reminder-suggestion {
    padding: 7px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

    .reminder-suggestion:hover {
        background: var(--bg);
    }

.reminder-hint {
    font-size: 0.76rem;
    color: var(--muted);
    margin: 6px 0 0;
}

.reminder-error {
    font-size: 0.82rem;
    color: var(--danger);
    margin: 10px 0 0;
}

/* Global undo dock */
.undo-dock {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 900;
    pointer-events: none;
}

.undo-toast {
    background: var(--text);
    color: var(--card);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.undo-topbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: #fff;
    border: none;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .undo-topbar:hover {
        filter: brightness(0.92);
    }

    .undo-topbar svg {
        flex: 0 0 auto;
    }

/* ── Mobile / responsive shell ──────────────────────────────────────────────── */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -6px;
    border: none;
    background: none;
    color: var(--text);
    cursor: pointer;
    border-radius: 8px;
}

    .nav-toggle:hover {
        background: var(--bg-sub);
    }

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 90;
}

@media (max-width: 860px) {
    .nav-toggle {
        display: inline-flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
        overflow-y: auto;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.3);
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    /* Restore the full sidebar in the mobile drawer:
       an existing max-width:720px rule collapses it to
       a 64px icon rail and hides labels, which must be
       overridden here (matching selectors so it wins). */
    .sidebar .nav-label,
    .sidebar .sidebar-tag,
    .sidebar .sidebar-userinfo,
    .sidebar .nav-group {
        display: block;
    }

    .sidebar .nav-group-toggle {
        display: flex;
    }

    .nav-backdrop.show {
        display: block;
    }

    .topbar {
        padding: 0 12px;
        gap: 8px;
        overflow: hidden;
    }

    .topbar-sub,
    .topbar-lastsync {
        display: none;
    }

    /* Collapse verbose buttons to their icons so the bar
       never overflows on a phone. */
    .topbar .btn-topbar-label {
        display: none;
    }

    .topbar .btn-topbar {
        padding: 9px 11px;
        gap: 0;
    }

    .topbar-spacer {
        min-width: 0;
    }

    /* Keep the action icons from being squeezed/overlapped. */
    .btn-topbar-icon,
    .topbar .btn-topbar {
        flex-shrink: 0;
    }

    .content-body {
        padding: 16px;
    }

    .assistant-page {
        flex-direction: column;
        height: calc(100vh - 60px);
    }

    .assistant-sidebar {
        width: 100%;
        min-width: 0;
        max-height: 38vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* Dashboard: stack the hero, KPIs and board */
    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

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

    /* The dashboard board's mobile layout (swipeable columns) is set
       by the more specific ".dashboard-workspace > .board" rule
       above, which wins the cascade over a plain ".board" here. */

    /* Wide tables scroll within their box instead
       of forcing the page sideways. */
    .list-table {
        overflow-x: auto;
    }

    .inv-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Generic two/three-column grids collapse */
    .stats-grid,
    .settings-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Users: role select, merge, and confirm dialog ─────────────────── */
.users-role-select {
    min-width: 118px;
    padding: 6px 8px;
}

.users-alt-emails {
    display: block;
    color: var(--muted, #6b6b70);
    font-size: 11.5px;
}

.users-lastactive {
    font-size: 12.5px;
    color: var(--muted, #6b6b70);
    white-space: nowrap;
}

.users-lastactive-never {
    color: #B3261E;
    font-weight: 600;
}

.users-lastactive-stale {
    color: var(--warn, #B47908);
    font-weight: 600;
}

.users-role-feedback {
    margin-top: 12px;
}

.users-merge-card .users-merge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 4px 0 12px;
}

.btn-danger {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

.btn-danger:hover {
    background: #9a2019;
    border-color: #9a2019;
}

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
}

.confirm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: min(440px, calc(100vw - 32px));
    background: var(--card, #fff);
    color: var(--ink, #1a1a1a);
    border: 1px solid var(--border, #e5e5e7);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    padding: 22px 24px;
}

.confirm-dialog h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
}

.confirm-dialog p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
}

.confirm-note {
    color: var(--muted, #6b6b70);
    font-size: 13px;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 720px) {
    .users-merge-card .users-merge-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Client health & timeline ──────────────────────────────────────── */
.client-health-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.client-health-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.client-health-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.health-healthy {
    background: var(--ok-bg, #E9F1EC);
    color: var(--ok, #1F7A4D);
}

.health-attention {
    background: var(--warn-bg, #F6ECD6);
    color: var(--warn, #B47908);
}

.health-atrisk {
    background: #FCE8EC;
    color: #B3261E;
}

.health-quiet {
    background: var(--info-bg, #EAF0F7);
    color: var(--info, #174A8B);
}

.health-new {
    background: var(--sub, #F2F2F3);
    color: var(--muted, #6B6B70);
}

.client-health-reason {
    font-size: 13.5px;
    color: var(--muted, #6B6B70);
}

.client-health-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.chm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chm-num {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.chm-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted2, #8A8A90);
    font-weight: 600;
}

.chm-alert .chm-num {
    color: #B3261E;
}

.client-timeline {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    position: relative;
}

.client-timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--border, #E5E5E7);
}

.tl-item {
    position: relative;
    padding: 0 0 16px 26px;
}

.tl-item:last-child {
    padding-bottom: 0;
}

.tl-marker {
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--card, #fff);
    border: 2px solid var(--muted2, #8A8A90);
}

.tl-inbound .tl-marker {
    border-color: var(--info, #174A8B);
}

.tl-outbound .tl-marker {
    border-color: var(--ok, #1F7A4D);
}

.tl-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tl-dir {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tl-inbound .tl-dir {
    color: var(--info, #174A8B);
}

.tl-outbound .tl-dir {
    color: var(--ok, #1F7A4D);
}

.tl-when {
    font-size: 12px;
    color: var(--muted2, #8A8A90);
    font-variant-numeric: tabular-nums;
}

.tl-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-top: 1px;
    color: var(--text, #221F1F);
    text-decoration: none;
}

a.tl-title:hover {
    text-decoration: underline;
}

.tl-detail {
    font-size: 12.5px;
    color: var(--muted, #6B6B70);
    margin-top: 1px;
    word-break: break-word;
}

/* ── Client notes (call log) ─────────────────────────────────────────────── */
.client-note-form {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 6px 0 16px;
}

    .client-note-form textarea {
        flex: 1;
        resize: vertical;
    }

.client-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.client-note-item {
    background: var(--bg, #F7F6F5);
    border: 1px solid var(--border, #E5E5E7);
    border-radius: 10px;
    padding: 10px 14px;
}

.client-note-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.client-note-author {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text, #221F1F);
}

.client-note-when {
    font-size: 12px;
    color: var(--muted2, #8A8A90);
    font-variant-numeric: tabular-nums;
}

.client-note-body {
    font-size: 13.5px;
    color: var(--text, #221F1F);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Performance-by-owner table: 7 columns incl. live workload. */
.list-owner .list-head,
.list-owner .list-row {
    grid-template-columns:
        2fr 1fr 1fr 1.2fr 1.4fr 1fr 1.3fr;
}

.owner-overdue {
    color: #B3261E;
    font-weight: 700;
}

/* Conversation AI-summary banner (top of the thread view). */
.convo-summary-banner {
    background: var(--bg-sub, #F7F7F8);
    border: 1px solid var(--border, #E5E5E7);
    border-left: 3px solid var(--primary, #9E274A);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 0;
}

.csb-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}

.csb-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--primary, #9E274A);
}

.csb-time {
    font-size: 11.5px;
    color: var(--muted2, #8A8A90);
    font-variant-numeric: tabular-nums;
}

.csb-text {
    font-size: 14px;
    color: var(--text, #221F1F);
    line-height: 1.5;
}

.csb-text p {
    margin: 0 0 6px;
}

.csb-text p:last-child {
    margin-bottom: 0;
}

/* Per-column quick filters on the Dashboard board */
.col-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px 10px;
}

.col-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

    .col-chip:hover {
        border-color: var(--line-hov);
    }

    .col-chip.active {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

.col-chip-count {
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* Profile page */
.profile-wrap {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 18px;
    margin: 0;
    font-size: 0.88rem;
}

    .profile-facts dt {
        color: var(--muted);
        font-weight: 650;
    }

    .profile-facts dd {
        margin: 0;
        color: var(--text);
        word-break: break-word;
    }

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* AI "this can be closed" suggestion */
.close-suggest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0;
    padding: 14px 18px;
    background: var(--warning-bg);
    border: 1px solid #E9D9AE;
    border-radius: 12px;
}

.close-suggest-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

    .close-suggest-text strong {
        font-size: 0.9rem;
        color: var(--text);
    }

    .close-suggest-text span {
        font-size: 0.82rem;
        color: var(--ink3);
    }

.close-suggest-actions {
    display: flex;
    gap: 8px;
}

.close-pill {
    font-size: 0.68rem;
    font-weight: 700;
    color: #7A5200;
    background: var(--warning-bg);
    border: 1px solid #E9D9AE;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Marks a collapsed message's one-line AI summary */
.msg-ai-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--info-bg);
    color: var(--info);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: 1px;
}


/* Signature editor: form on the left, live preview on the right */
.sig-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.sig-preview {
    position: sticky;
    top: 16px;
}

    .sig-preview h4 {
        margin: 0 0 6px;
    }

.sig-preview-box {
    background: #fff;
    color: #222;
    border: 1px solid #cfcbc5;
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    overflow-x: auto;
}

@media (max-width: 1100px) {
    .sig-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sig-preview {
        position: static;
    }
}

/* Email for sending: two columns of fields on a wide screen */
.sending-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 24px;
}

    .sending-form > :not(.settings-field) {
        grid-column: 1 / -1;
    }

@media (max-width: 800px) {
    .sending-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.settings-field select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font: inherit;
}


/* Per-mail "Show images" bar in the thread */
.mail-images-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--muted);
}


/* Reply dialog: write on the left, the extras on the right */
.composer .form-input {
    max-width: none;
}

.composer-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.composer-side .composer-signature {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
}

@media (max-width: 900px) {
    .composer-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .composer-body {
        height: auto;
        min-height: 220px;
    }
}


/* Save bar stays in reach at the bottom of the settings content */
.settings-cards > .settings-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    background: linear-gradient(to top, var(--bg) 70%, transparent);
}


/* Reply dialog: the mail is one sheet - message, signature, quoted mail */
.composer-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 4px 20px;
    margin-top: 12px;
}

    .composer-tools .form-input {
        margin-bottom: 0;
    }

    .composer-tools .settings-hint,
    .composer-tools .sr-flags,
    .composer-tools .sr-check {
        grid-column: 1 / -1;
    }

.composer-paper {
    background: #fff;
    color: #222;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 12px;
    padding: 14px 18px;
    min-height: 320px;
    max-height: calc(100vh - 440px);
    overflow-y: auto;
}

.composer-msg,
.composer-quote {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.5;
    field-sizing: content;
}

.composer-msg {
    min-height: 96px;
}

.composer-quote {
    min-height: 120px;
    color: #666;
    border-top: 1px solid #e6e2dd;
    margin-top: 14px;
    padding-top: 12px;
}

.composer-signature-inline {
    margin-top: 0;
    pointer-events: none;
    user-select: none;
}

/* Settings: flat sections instead of boxed cards */
.settings-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 40px;
}

.settings-layout .settings-cards {
    gap: 0;
    max-width: 900px;
}

.settings-layout .settings-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: 28px 0 32px;
    margin: 0;
}

    .settings-layout .settings-card:first-child {
        padding-top: 4px;
    }

    .settings-layout .settings-card::before {
        display: none;
    }

    .settings-layout .settings-card:hover {
        box-shadow: none;
        border-color: var(--border);
    }

.settings-layout .settings-head {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
    border-radius: 8px;
}

    .settings-layout .settings-head:hover {
        background: var(--border-2, rgba(0, 0, 0, .03));
    }

    .settings-layout .settings-head .settings-chev {
        grid-column: 1;
        grid-row: 1;
        transform: rotate(-90deg);
    }

    .settings-layout .settings-head .settings-title {
        grid-column: 2;
        grid-row: 1;
    }

    .settings-layout .settings-head .settings-sub {
        grid-column: 2;
        grid-row: 2;
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 2px;
    }

.settings-layout details.settings-card[open] > .settings-head .settings-sub {
    display: none;
}

.settings-layout details.settings-card[open] > .settings-head
    .settings-chev {
    transform: rotate(0deg);
}

.settings-layout .settings-card:not([open]) {
    padding-bottom: 20px;
}

.settings-layout details.settings-card:not([open]) > .settings-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.settings-layout .settings-title {
    font-size: 18px;
    margin-bottom: 4px;
}

.settings-layout .settings-desc {
    font-size: 13px;
    max-width: 70ch;
    margin-bottom: 20px;
}

.settings-layout .settings-nav {
    align-self: start;
    padding: 0;
    gap: 6px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.settings-layout .settings-nav-item {
    position: relative;
    width: 100%;
    gap: 12px;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
}

    .settings-layout .settings-nav-item .settings-nav-icon {
        color: var(--muted);
    }

    .settings-layout .settings-nav-item span {
        flex: 1 1 auto;
    }

    .settings-layout .settings-nav-item::after {
        content: "";
        flex: none;
        width: 7px;
        height: 7px;
        margin-right: 2px;
        border-top: 1.8px solid var(--muted);
        border-right: 1.8px solid var(--muted);
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity .15s ease, transform .15s ease;
    }

    .settings-layout .settings-nav-item:hover {
        border-color: var(--primary);
    }

        .settings-layout .settings-nav-item:hover::after {
            opacity: .7;
        }

    .settings-layout .settings-nav-item.active {
        background: color-mix(in srgb, var(--primary) 10%, var(--card));
        border-color: var(--primary);
        color: var(--primary);
        font-weight: 600;
        box-shadow: none;
    }

        .settings-layout .settings-nav-item.active .settings-nav-icon {
            color: var(--primary);
        }

        .settings-layout .settings-nav-item.active::after {
            opacity: 1;
            border-color: var(--primary);
        }

@media (max-width: 800px) {
    .settings-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .settings-layout .settings-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 6px;
        gap: 4px;
    }

    .settings-layout .settings-nav-item {
        width: auto;
        white-space: nowrap;
    }

        .settings-layout .settings-nav-item::after {
            display: none;
        }
}

/* Settings: plain form controls get the same look as the styled fields */
.settings-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    max-width: 520px;
}

    .settings-row > label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text);
    }

        .settings-row > label:has(input[type="checkbox"]) {
            flex-direction: row;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
            font-size: 14px;
        }

.settings-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([class]),
.settings-card select:not([class]) {
    width: 100%;
    max-width: 520px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    box-sizing: border-box;
}

    .settings-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([class]):focus,
    .settings-card select:not([class]):focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(165, 38, 74, 0.12);
    }

/* Conversation toolbar: wrap on a phone so Actions (Reply) stays reachable */
@media (max-width: 700px) {
    .section-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .conversation-actions {
        flex-wrap: wrap;
        width: 100%;
    }

        .conversation-actions select {
            min-width: 0;
            width: 100%;
        }

        .conversation-actions label {
            flex: 1 1 140px;
        }

    .dash-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-actions {
        flex-wrap: wrap;
    }
}


/* Reply dialog: "this mail is not registered to a client" */
.composer-register {
    background: #fbf3e4;
    border: 1px solid #ecd9ad;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 12px;
    color: #4a3b12;
}

    .composer-register .settings-hint {
        color: #6b5a2a;
        margin: 4px 0 8px;
    }

.composer-register-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

    .composer-register-row .form-input {
        margin-bottom: 0;
        flex: 1 1 200px;
        width: auto;
    }


/* Client page: a free-mail domain on a client */
.client-warn {
    background: #fbf3e4;
    border: 1px solid #ecd9ad;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 0;
    color: #4a3b12;
    font-size: 0.85rem;
    line-height: 1.5;
}


/* Reply dialog: add a link to a quote the client can open */
.composer-doclist {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 150px;
    overflow-y: auto;
}

.composer-doc > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.composer-doc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.composer-quote-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

    .composer-quote-row .form-input {
        flex: 1 1 260px;
        width: auto;
        margin-bottom: 0;
    }

    .composer-quote-row .settings-hint {
        flex: 1 1 100%;
    }

.shared-docs {
    margin-bottom: 14px;
}

/* Who a settings section applies to */
.settings-scope {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    vertical-align: middle;
}

.settings-scope-me {
    color: var(--primary);
    border-color: var(--primary);
}

/* Preview of a message that holds named links */
.composer-linkpreview {
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: 8px;
}

.composer-linkpreview-body {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.composer-linkpreview-body a {
    color: var(--primary);
    text-decoration: underline;
}

/* Thumbs and correction panel under AI output */
.ai-fb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
}

.ai-fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

    .ai-fb-btn:hover {
        color: var(--primary);
        border-color: var(--primary);
    }

    .ai-fb-btn svg {
        width: 15px;
        height: 15px;
    }

.ai-fb-down svg {
    transform: rotate(180deg);
}

.ai-fb-done {
    color: var(--success, var(--muted));
}

.ai-fb-panel {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface, transparent);
}

.ai-fb-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.ai-fb-reason {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
}

.ai-fb-text {
    font-family: inherit;
    resize: vertical;
}

.ai-fb-actions {
    display: flex;
    gap: 8px;
}

/* AI corrections review */
.aic-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

    .aic-filters .form-input {
        width: auto;
        min-width: 220px;
    }

.aic-export {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12.5px;
}

.aic-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.aic-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.aic-rating {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--muted);
}

.aic-down {
    color: var(--danger, #b3261e);
    border-color: var(--danger, #b3261e);
}

.aic-up {
    color: var(--success, #1e7b4b);
    border-color: var(--success, #1e7b4b);
}

.aic-reasons {
    font-size: 13px;
    font-weight: 500;
}

.aic-note {
    font-size: 13px;
}

.aic-texts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.aic-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.aic-text {
    max-height: 160px;
    overflow-y: auto;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface-2, rgba(0, 0, 0, .03));
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.aic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A settings list: one rounded row per item, with its buttons on the right */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.settings-listrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.settings-listrow-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-width: 0;
}

.settings-listrow-name {
    font-weight: 600;
    font-size: 14px;
}

.settings-listrow-tag {
    padding: 1px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--muted);
}

.settings-listrow-sub {
    font-size: 13px;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.settings-listrow-actions {
    display: flex;
    flex: none;
    gap: 6px;
}

/* Merge into another conversation (EM-100) */
.merge-dialog {
    width: min(560px, calc(100vw - 32px));
}

.merge-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 8px;
}

.merge-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    cursor: pointer;
}

    .merge-item:hover {
        border-color: var(--primary);
    }

    .merge-item.sel {
        border-color: var(--primary);
        box-shadow: 0 0 0 1px var(--primary);
    }

.merge-subject {
    font-weight: 600;
}

.merge-meta {
    font-size: 0.8rem;
    color: var(--muted);
}

.merged-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    margin: 6px 0;
}