/* ═══════════════════════════════════════════════════════════════
   MSO Agent Command Center — V3 FINAL DASHBOARD
   Real-time · Draggable · Agent Whiteboard · Beautiful
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg-0: #0b0d11;
    --bg-1: #11141b;
    --bg-2: #181c26;
    --bg-3: #1f2433;
    --bg-hover: #252a3a;

    /* Text */
    --t1: #f0f2f5;
    --t2: #a1a8b8;
    --t3: #636b7e;

    /* Borders */
    --br: #232839;
    --br-light: #2a3045;

    /* Accents */
    --blue: #4f8fff;
    --green: #34d399;
    --red: #f87171;
    --yellow: #fbbf24;
    --purple: #a78bfa;
    --orange: #fb923c;
    --cyan: #22d3ee;
    --pink: #f472b6;

    /* Agent colors */
    --scout: #4f8fff;
    --reach: #fb923c;
    --nurture: #34d399;
    --closer: #a78bfa;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    /* Shadows */
    --shadow-card: 0 1px 4px rgba(0,0,0,.15), 0 0 1px rgba(0,0,0,.08);
    --shadow-lg: 0 4px 14px rgba(0,0,0,.35);
    --shadow-glow: 0 0 20px rgba(79,143,255,.15);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg-0);
    color: var(--t1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    height: 100vh;
}

a { text-decoration: none; color: inherit; }

/* ── Typography ────────────────────────────────────────────── */
.mono { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; }
.label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--t3);
}

/* ── Shell ─────────────────────────────────────────────────── */
.shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
    overflow: hidden;
    transition: grid-template-columns .25s ease;
}

.shell:has(.sidebar.collapsed) {
    grid-template-columns: 56px 1fr;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.sidebar {
    grid-row: 1 / -1;
    background: rgba(17, 20, 27, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--br);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width .25s ease;
    width: 240px;
    z-index: 200;
}

.sidebar.collapsed {
    width: 56px;
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    border-bottom: 1px solid var(--br);
    min-height: 52px;
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-logo-icon {
    font-size: 15px;
    font-weight: 800;
    color: var(--blue);
    flex-shrink: 0;
}

.sidebar-logo-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    transition: opacity .2s;
}

.sidebar.collapsed .sidebar-logo-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all .15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle:hover { color: var(--t1); background: var(--bg-2); }

.sidebar.collapsed .sidebar-toggle {
    margin: 0 auto;
}

/* Sidebar Nav Links */
.sidebar-nav {
    flex: 1;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--r-sm);
    color: var(--t3);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
    position: relative;
}

.sidebar-link:hover {
    color: var(--t2);
    background: var(--bg-2);
}

.sidebar-link.active {
    color: var(--t1);
    background: var(--bg-3);
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--blue);
    border-radius: 0 3px 3px 0;
}

.sidebar-link-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.sidebar-link-text {
    transition: opacity .2s;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-link-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--red);
    color: white;
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0 4px;
    font-size: 9px;
    margin: 0;
}

/* Agent Legend in Sidebar */
.sidebar-legend {
    padding: 8px 10px 12px;
    border-top: 1px solid var(--br);
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-section-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--t3);
    margin-bottom: 6px;
    padding-left: 4px;
}

.sidebar.collapsed .sidebar-section-label {
    text-align: center;
    padding-left: 0;
    font-size: 8px;
}

.sidebar-agent-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
    border-radius: 4px;
    white-space: nowrap;
}

.sidebar-agent-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--t2);
    transition: opacity .2s;
}

.sidebar-agent-label {
    font-size: 10px;
    color: var(--t3);
    margin-left: auto;
    transition: opacity .2s;
}

.sidebar.collapsed .sidebar-agent-name,
.sidebar.collapsed .sidebar-agent-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Legend Dots — Active vs Idle */
.legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.legend-dot.lit {
    box-shadow: 0 0 8px currentColor;
    animation: legend-pulse 2s ease-in-out infinite;
}

.legend-dot.lit::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: .3;
    animation: legend-ring 2s ease-in-out infinite;
}

.legend-dot.unlit {
    opacity: .25;
    box-shadow: none;
}

@keyframes legend-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.9); }
}

@keyframes legend-ring {
    0%, 100% { opacity: .3; transform: scale(1); }
    50% { opacity: .1; transform: scale(1.3); }
}

.legend-dot.scout { color: var(--scout); background: var(--scout); }
.legend-dot.reach { color: var(--reach); background: var(--reach); }
.legend-dot.nurture { color: var(--nurture); background: var(--nurture); }
.legend-dot.closer { color: var(--closer); background: var(--closer); }
.legend-dot.firestore { color: var(--cyan); background: var(--cyan); }
.legend-dot.instantly { color: var(--orange); background: var(--orange); }
.legend-dot.gmail { color: var(--red); background: var(--red); }
.legend-dot.websocket { color: var(--green); background: var(--green); }
.legend-dot.apollo { color: var(--yellow); background: var(--yellow); }

/* Sidebar Footer */
.sidebar-footer {
    border-top: 1px solid var(--br);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.sidebar-connection {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--green);
}

.ws-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ws-dot.connected { background: var(--green); animation: pulse 2s ease-in-out infinite; }
.ws-dot.disconnected { background: var(--red); }

.sidebar-clock {
    font-size: 10px;
    color: var(--t3);
    padding: 2px 4px;
    font-variant-numeric: tabular-nums;
}

.sidebar.collapsed .sidebar-clock {
    display: none;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px;
    border-radius: var(--r-sm);
    color: var(--t3);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}

.sidebar-logout:hover { color: var(--red); background: rgba(248,113,113,.08); }

.sidebar-logout .sidebar-link-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* ── Mobile Top Bar ────────────────────────────────────────── */
.mobile-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--br);
}

.hamburger {
    background: none;
    border: none;
    color: var(--t2);
    cursor: pointer;
    padding: 4px;
}

.mobile-logo {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 150;
}

.sidebar-overlay.visible {
    display: block;
}

/* ── Main Content Area ─────────────────────────────────────── */
.main-content {
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-0);
    height: 100vh;
}

/* ── Top Bar (legacy — kept for standalone pages) ──────────── */
.topbar {
    background: var(--bg-1);
    border-bottom: 1px solid var(--br);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 16px;
    z-index: 100;
    height: 52px;
}

.topbar-user {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    text-decoration: none;
}

.live-dot {
    width: 7px; height: 7px;
    background: var(--green);
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
    margin-left: 2px;
}

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


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD PAGE — DRAGGABLE GRID LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.dashboard-page {
    height: 100vh;
    overflow-y: auto;
    padding: 20px 24px;
    background: var(--bg-0);
}

/* ── Status Legend (kept for inline use) ────────────────────── */
.status-legend {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    transition: all .2s;
    cursor: default;
}

.legend-item:hover { border-color: var(--br-light); }

.legend-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--t2);
}

.legend-status {
    font-size: 10px;
    color: var(--t3);
}


/* ── Draggable Grid System ─────────────────────────────────── */
.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    grid-auto-rows: minmax(60px, auto);
}

.grid-widget {
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
    position: relative;
}

.grid-widget:hover {
    border-color: var(--br-light);
}

.grid-widget.dragging {
    opacity: .6;
    border-color: var(--blue);
    box-shadow: var(--shadow-glow);
    z-index: 50;
}

.grid-widget.drag-over {
    border-color: var(--blue);
    background: rgba(79,143,255,.05);
}

/* Widget drag handle */
.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--br);
    cursor: grab;
    user-select: none;
}

.widget-header:active { cursor: grabbing; }

.widget-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.widget-title-icon {
    font-size: 14px;
}

.widget-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--bg-3);
    color: var(--t2);
}

.widget-badge.alert {
    background: var(--red);
    color: white;
}

.widget-drag-handle {
    color: var(--t3);
    font-size: 14px;
    cursor: grab;
    opacity: 0;
    transition: opacity .15s;
}

.grid-widget:hover .widget-drag-handle {
    opacity: 1;
}

.widget-body {
    padding: 12px 16px;
    overflow-y: auto;
}


/* ── Default Grid Positions ────────────────────────────────── */
/* Stats Panel: full width, 2 rows */
.widget-stats { grid-column: 1 / -1; grid-row: span 2; }

/* Lead Cards: 8 columns, flexible height */
.widget-leads { grid-column: 1 / 9; grid-row: span 6; }

/* Draft Emails: 4 columns */
.widget-drafts { grid-column: 9 / 13; grid-row: span 6; }

/* Operations Board: 8 columns */
.widget-operations { grid-column: 1 / 9; grid-row: span 5; }

/* Activity Feed: 4 columns */
.widget-activity { grid-column: 9 / 13; grid-row: span 5; }


/* ═══════════════════════════════════════════════════════════════
   STATS PANEL — Daily/Weekly/Monthly Toggle
   ═══════════════════════════════════════════════════════════════ */

.stats-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg-0);
    border-radius: var(--r-sm);
    padding: 2px;
}

.stats-toggle-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
}

.stats-toggle-btn:hover { color: var(--t2); }
.stats-toggle-btn.active { color: var(--t1); background: var(--bg-3); }

.stats-kpi-row {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
}

.stats-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: var(--bg-0);
    border-radius: var(--r-md);
    border: 1px solid var(--br);
}

.stats-kpi-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--t3);
}

.stats-kpi-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--t1);
}

.stats-kpi-value.money { color: var(--green); }
.stats-kpi-value.hot { color: var(--yellow); }
.stats-kpi-value.active { color: var(--blue); }

.stats-kpi-change {
    font-size: 11px;
    font-weight: 600;
}

.stats-kpi-change.up { color: var(--green); }
.stats-kpi-change.down { color: var(--red); }
.stats-kpi-change.flat { color: var(--t3); }


/* ═══════════════════════════════════════════════════════════════
   SCOUT'S LEAD CARDS — Filterable, Sortable, Detailed
   ═══════════════════════════════════════════════════════════════ */

.leads-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-0);
    border-bottom: 1px solid var(--br);
    flex-wrap: wrap;
}

.leads-filter-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.leads-filter-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.leads-filter-select {
    padding: 4px 8px;
    font-size: 11px;
    background: var(--bg-2);
    color: var(--t2);
    border: 1px solid var(--br);
    border-radius: 4px;
    font-family: inherit;
    cursor: pointer;
}

.leads-filter-select:focus { outline: none; border-color: var(--blue); }

.leads-search {
    flex: 1;
    min-width: 150px;
    padding: 5px 10px;
    font-size: 12px;
    background: var(--bg-2);
    color: var(--t1);
    border: 1px solid var(--br);
    border-radius: var(--r-sm);
    font-family: inherit;
}

.leads-search::placeholder { color: var(--t3); }
.leads-search:focus { outline: none; border-color: var(--blue); }

.leads-count {
    font-size: 11px;
    color: var(--t3);
    white-space: nowrap;
}

/* Lead Cards */
.leads-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    max-height: 400px;
    overflow-y: auto;
}

.lead-card {
    background: var(--bg-0);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .2s;
    border-left: 3px solid transparent;
}

.lead-card:hover { border-color: var(--br-light); }
.lead-card.tier-1 { border-left-color: var(--green); }
.lead-card.tier-2 { border-left-color: var(--yellow); }
.lead-card.tier-3 { border-left-color: var(--t3); }

.lead-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lead-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
}

.lead-score {
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-sm);
}

.lead-score.high { background: rgba(52,211,153,.15); color: var(--green); }
.lead-score.medium { background: rgba(251,191,36,.15); color: var(--yellow); }
.lead-score.low { background: rgba(99,107,126,.15); color: var(--t3); }

.lead-company {
    font-size: 12px;
    color: var(--t2);
}

.lead-pain-quote {
    font-size: 12px;
    font-style: italic;
    color: var(--orange);
    padding: 6px 10px;
    background: rgba(251,146,60,.05);
    border-left: 2px solid var(--orange);
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
}

.lead-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lead-meta-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: 3px;
    color: var(--t2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.lead-meta-tag .meta-icon { font-size: 10px; }

.lead-source {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 6px;
    border-radius: 3px;
}

.lead-source.apollo { background: rgba(251,191,36,.12); color: var(--yellow); }
.lead-source.reddit { background: rgba(251,146,60,.12); color: var(--orange); }
.lead-source.linkedin { background: rgba(79,143,255,.12); color: var(--blue); }
.lead-source.referral { background: rgba(52,211,153,.12); color: var(--green); }


/* ═══════════════════════════════════════════════════════════════
   DRAFT EMAILS — One-click Approve
   ═══════════════════════════════════════════════════════════════ */

.drafts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.draft-card {
    background: var(--bg-0);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    padding: 14px;
    transition: border-color .2s;
}

.draft-card:hover { border-color: var(--br-light); }
.draft-card.urgent { border-left: 3px solid var(--red); }
.draft-card.normal { border-left: 3px solid var(--blue); }

.draft-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.draft-channel {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
}

.draft-channel.sms { background: rgba(79,143,255,.15); color: var(--blue); }
.draft-channel.email { background: rgba(52,211,153,.15); color: var(--green); }

.draft-agent {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.draft-agent.scout { color: var(--scout); }
.draft-agent.reach { color: var(--reach); }
.draft-agent.nurture { color: var(--nurture); }
.draft-agent.closer { color: var(--closer); }

.draft-lead-info {
    margin-bottom: 6px;
}

.draft-lead-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
}

.draft-lead-company {
    font-size: 11px;
    color: var(--t3);
}

.draft-preview {
    background: var(--bg-2);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--t2);
    line-height: 1.5;
    max-height: 80px;
    overflow: hidden;
    margin-bottom: 8px;
}

.draft-reasoning {
    font-size: 11px;
    color: var(--t3);
    padding: 6px 8px;
    background: rgba(79,143,255,.05);
    border-left: 2px solid var(--blue);
    border-radius: 0 4px 4px 0;
    margin-bottom: 8px;
    line-height: 1.4;
}

.draft-actions {
    display: flex;
    gap: 6px;
}

.btn {
    padding: 10px 20px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.btn:active { transform: scale(.97); }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { filter: brightness(1.1); }
.btn-danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-ghost { background: transparent; color: var(--t2); border-color: var(--br); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--t1); }

/* Legacy button classes for backward compat */
.btn-approve { background: var(--green); color: #000; }
.btn-edit { background: var(--blue); color: white; }
.btn-reject { background: transparent; border: 1px solid var(--red); color: var(--red); }

/* Edit form */
.edit-form { margin-top: 8px; display: none; }
.edit-form.active { display: block; }
.edit-form textarea {
    width: 100%;
    min-height: 80px;
    background: var(--bg-0);
    color: var(--t1);
    border: 1px solid var(--br);
    border-radius: 4px;
    padding: 8px;
    font-family: inherit;
    font-size: 12px;
    resize: vertical;
}
.edit-form .edit-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   OPERATIONS BOARD — 8 Daily Shift Reports
   ═══════════════════════════════════════════════════════════════ */

.ops-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 350px;
    overflow-y: auto;
}

.ops-shift-card {
    background: var(--bg-0);
    border: 1px solid var(--br);
    border-radius: var(--r-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .2s;
}

.ops-shift-card:hover { border-color: var(--br-light); }

.ops-shift-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ops-shift-agent {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ops-shift-agent.scout { color: var(--scout); }
.ops-shift-agent.reach { color: var(--reach); }
.ops-shift-agent.nurture { color: var(--nurture); }
.ops-shift-agent.closer { color: var(--closer); }

.ops-shift-time {
    font-size: 10px;
    color: var(--t3);
}

.ops-shift-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
}

.ops-shift-summary {
    font-size: 11px;
    color: var(--t2);
    line-height: 1.4;
}

.ops-shift-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ops-metric-tag {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: 3px;
    color: var(--t2);
}

.ops-shift-status {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 6px;
    border-radius: 3px;
}

.ops-shift-status.completed { background: rgba(52,211,153,.12); color: var(--green); }
.ops-shift-status.active { background: rgba(79,143,255,.12); color: var(--blue); }
.ops-shift-status.pending { background: rgba(251,191,36,.12); color: var(--yellow); }


/* ═══════════════════════════════════════════════════════════════
   ACTIVITY FEED
   ═══════════════════════════════════════════════════════════════ */

.activity-list {
    display: flex;
    flex-direction: column;
    max-height: 350px;
    overflow-y: auto;
}

.activity-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--br);
    display: flex;
    gap: 10px;
    transition: background .15s;
    font-size: 12px;
}

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

.activity-time {
    min-width: 55px;
    font-size: 11px;
    color: var(--t3);
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
    flex-shrink: 0;
}

.activity-agent {
    min-width: 56px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding-top: 1px;
    flex-shrink: 0;
}

.activity-agent.scout { color: var(--scout); }
.activity-agent.reach { color: var(--reach); }
.activity-agent.nurture { color: var(--nurture); }
.activity-agent.closer { color: var(--closer); }
.activity-agent.system { color: var(--t3); }

.activity-text {
    flex: 1;
    color: var(--t2);
    font-size: 12px;
    line-height: 1.4;
}

.activity-text strong { color: var(--t1); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════
   AGENT WHITEBOARD — Chat + Workspace (Real-time)
   ═══════════════════════════════════════════════════════════════ */

.whiteboard-page {
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    background: var(--bg-0);
}

/* Agent Profile Header (on agent page) */
.agent-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--br);
}

.agent-page-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.agent-page-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.agent-page-avatar.scout { background: rgba(79,143,255,.15); }
.agent-page-avatar.reach { background: rgba(251,146,60,.15); }
.agent-page-avatar.nurture { background: rgba(52,211,153,.15); }
.agent-page-avatar.closer { background: rgba(167,139,250,.15); }

.agent-page-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--t1);
}

.agent-page-role {
    font-size: 12px;
    color: var(--t3);
}

.agent-page-badges {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.agent-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}

.agent-badge.sonnet { background: rgba(52,211,153,.12); color: var(--green); }
.agent-badge.active { background: rgba(52,211,153,.12); color: var(--green); }
.agent-badge.idle { background: rgba(251,191,36,.12); color: var(--yellow); }
.agent-badge.offline { background: rgba(99,107,126,.12); color: var(--t3); }

.agent-page-header-right {
    display: flex;
    gap: 10px;
}

.agent-header-btn {
    padding: 8px 16px;
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-sm);
    color: var(--t2);
    font-size: 13px;
    font-weight: 500;
    transition: all .2s;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.agent-header-btn:hover {
    background: var(--bg-3);
    color: var(--t1);
}

/* Whiteboard Container */
.whiteboard-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    overflow: hidden;
}

/* Chat Panel */
.whiteboard-chat {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--br);
    overflow: hidden;
}

.whiteboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--br);
    flex-shrink: 0;
}

.whiteboard-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.whiteboard-panel-title h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t1);
}

.whiteboard-panel-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--bg-3);
    color: var(--t3);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-message {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-2);
    border-radius: var(--r-md);
    animation: fadeInUp .3s ease;
}

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

.chat-msg-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.chat-msg-avatar.scout { background: rgba(79,143,255,.2); color: var(--scout); }
.chat-msg-avatar.reach { background: rgba(251,146,60,.2); color: var(--reach); }
.chat-msg-avatar.nurture { background: rgba(52,211,153,.2); color: var(--nurture); }
.chat-msg-avatar.closer { background: rgba(167,139,250,.2); color: var(--closer); }
.chat-msg-avatar.system { background: rgba(99,107,126,.2); color: var(--t3); }
.chat-msg-avatar.human { background: rgba(251,191,36,.2); color: var(--yellow); }

.chat-msg-content { flex: 1; }

.chat-msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.chat-msg-name {
    font-size: 12px;
    font-weight: 600;
}

.chat-msg-name.scout { color: var(--scout); }
.chat-msg-name.reach { color: var(--reach); }
.chat-msg-name.nurture { color: var(--nurture); }
.chat-msg-name.closer { color: var(--closer); }
.chat-msg-name.system { color: var(--t3); }
.chat-msg-name.human { color: var(--yellow); }

.chat-msg-time {
    font-size: 10px;
    color: var(--t3);
}

.chat-msg-text {
    font-size: 13px;
    color: var(--t2);
    line-height: 1.5;
}

.chat-msg-text code {
    background: var(--bg-0);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--cyan);
}

.chat-msg-data {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-0);
    border-radius: var(--r-sm);
    font-size: 11px;
    color: var(--t3);
    font-family: 'JetBrains Mono', monospace;
}

/* Chat Input */
.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-1);
    border-top: 1px solid var(--br);
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-2);
    color: var(--t1);
    border: 1px solid var(--br);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-family: inherit;
}

.chat-input:focus { outline: none; border-color: var(--blue); }

.chat-send-btn {
    padding: 8px 16px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
}

.chat-send-btn:hover { opacity: .85; }


/* Workspace Panel */
.whiteboard-workspace {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workspace-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.workspace-section {
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    overflow: hidden;
}

.workspace-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--br);
    cursor: pointer;
}

.workspace-section-header h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t2);
}

.workspace-section-toggle {
    font-size: 10px;
    color: var(--t3);
}

.workspace-section-body {
    padding: 12px 14px;
}

.workspace-entry {
    padding: 8px 0;
    border-bottom: 1px solid var(--br);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workspace-entry:last-child { border-bottom: none; }

.workspace-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workspace-entry-author {
    font-size: 11px;
    font-weight: 600;
}

.workspace-entry-author.scout { color: var(--scout); }
.workspace-entry-author.reach { color: var(--reach); }
.workspace-entry-author.nurture { color: var(--nurture); }
.workspace-entry-author.closer { color: var(--closer); }

.workspace-entry-time {
    font-size: 10px;
    color: var(--t3);
}

.workspace-entry-text {
    font-size: 13px;
    color: var(--t2);
    line-height: 1.5;
}

.workspace-entry-text.editable {
    cursor: text;
    padding: 4px 6px;
    border-radius: 3px;
    transition: background .15s;
}

.workspace-entry-text.editable:hover { background: var(--bg-0); }
.workspace-entry-text.editable:focus { background: var(--bg-0); outline: 1px solid var(--blue); }

/* Workspace Add Entry */
.workspace-add-entry {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--br);
}

.workspace-add-input {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-0);
    color: var(--t1);
    border: 1px solid var(--br);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
}

.workspace-add-input:focus { outline: none; border-color: var(--blue); }

.workspace-add-btn {
    padding: 6px 12px;
    background: var(--bg-3);
    color: var(--t2);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.workspace-add-btn:hover { background: var(--blue); color: white; }


/* ═══════════════════════════════════════════════════════════════
   AGENTS GRID PAGE
   ═══════════════════════════════════════════════════════════════ */

.agents-page {
    height: 100vh;
    overflow-y: auto;
    padding: 24px 32px;
    background: var(--bg-0);
}

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

.agents-page-title h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--t1);
}

.agents-page-subtitle {
    font-size: 13px;
    color: var(--t3);
    margin-top: 4px;
}

/* Team KPI Strip */
.team-kpi-strip {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.team-kpi {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.team-kpi-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--t3);
}

.team-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--t1);
    line-height: 1;
}

.team-kpi-value.hot { color: var(--yellow); }
.team-kpi-value.good { color: var(--green); }

/* Agents Grid */
.agents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.agent-grid-card {
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-lg);
    padding: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.agent-grid-card:hover {
    border-color: var(--br-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.agent-grid-accent {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.agent-grid-accent.scout { background: var(--scout); }
.agent-grid-accent.reach { background: var(--reach); }
.agent-grid-accent.nurture { background: var(--nurture); }
.agent-grid-accent.closer { background: var(--closer); }

.agent-grid-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-grid-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.agent-grid-avatar.scout { background: rgba(79,143,255,.15); }
.agent-grid-avatar.reach { background: rgba(251,146,60,.15); }
.agent-grid-avatar.nurture { background: rgba(52,211,153,.15); }
.agent-grid-avatar.closer { background: rgba(167,139,250,.15); }

.agent-grid-info { flex: 1; }

.agent-grid-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--t1);
}

.agent-grid-role {
    font-size: 11px;
    color: var(--t3);
}

.agent-grid-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.agent-grid-status .status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
}

.agent-grid-status.active { color: var(--green); }
.agent-grid-status.active .status-dot { background: var(--green); animation: pulse 2s ease-in-out infinite; }
.agent-grid-status.idle { color: var(--yellow); }
.agent-grid-status.idle .status-dot { background: var(--yellow); }
.agent-grid-status.offline { color: var(--t3); }
.agent-grid-status.offline .status-dot { background: var(--t3); }

.agent-grid-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.agm-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agm-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--t1);
    line-height: 1;
}

.agm-value.blue { color: var(--blue); }
.agm-value.green { color: var(--green); }
.agm-value.orange { color: var(--orange); }
.agm-value.purple { color: var(--purple); }

.agm-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--t3);
}

.agent-grid-bio {
    background: var(--bg-0);
    border-radius: var(--r-sm);
    padding: 8px 12px;
}

.agent-grid-bio-text {
    font-size: 11px;
    color: var(--t2);
    line-height: 1.4;
    margin-top: 4px;
}

.agent-grid-focus {
    background: var(--bg-0);
    border-radius: var(--r-sm);
    padding: 8px 12px;
}

.agent-grid-last-report-box {
    background: var(--bg-0);
    border-radius: var(--r-sm);
    padding: 8px 12px;
}

.agent-grid-kb {
    background: var(--bg-0);
    border-radius: var(--r-sm);
    padding: 8px 12px;
}

.agent-grid-kb-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.kb-tag {
    font-size: 10px;
    color: var(--t2);
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

.agent-grid-focus-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
    color: var(--t3);
}

.agent-grid-focus-text {
    font-size: 12px;
    color: var(--t2);
    margin-top: 2px;
}

.agent-grid-footer {
    border-top: 1px solid var(--br);
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.agent-grid-last-report {
    font-size: 11px;
    color: var(--t3);
}

.agent-grid-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
}

.agent-grid-card:hover .agent-grid-link { color: var(--cyan); }


/* ═══════════════════════════════════════════════════════════════
   RECENT REPORTS
   ═══════════════════════════════════════════════════════════════ */

.recent-reports-section {
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--br);
}

.section-title-bar h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
}

.recent-reports-list {
    max-height: 300px;
    overflow-y: auto;
}

.recent-report-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--br);
    transition: background .15s;
}

.recent-report-item:hover { background: var(--bg-hover); }
.recent-report-item:last-child { border-bottom: none; }

.report-agent-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.report-agent-tag.scout { background: rgba(79,143,255,.15); color: var(--scout); }
.report-agent-tag.reach { background: rgba(251,146,60,.15); color: var(--reach); }
.report-agent-tag.nurture { background: rgba(52,211,153,.15); color: var(--nurture); }
.report-agent-tag.closer { background: rgba(167,139,250,.15); color: var(--closer); }

.report-content { flex: 1; }

.report-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 2px;
}

.report-summary {
    font-size: 12px;
    color: var(--t3);
    line-height: 1.4;
}

.report-time {
    font-size: 11px;
    color: var(--t3);
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state .icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; font-weight: 600; color: var(--t1); margin-bottom: 8px; }
.empty-state p { color: var(--t3); font-size: 14px; }

/* Legacy empty-state sub-classes */
.empty-state .emoji { font-size: 28px; margin-bottom: 6px; }
.empty-state .msg { font-size: 13px; line-height: 1.5; }
.empty-state.small { padding: 16px; }


/* ═══════════════════════════════════════════════════════════════
   SCROLLBARS
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--br); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--t3); }


/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

.flash-success { animation: flashGreen .5s ease; }
@keyframes flashGreen { 0% { background: rgba(52,211,153,.15); } 100% { background: transparent; } }

.flash-new { animation: flashBlue .6s ease; }
@keyframes flashBlue { 0% { background: rgba(79,143,255,.15); } 100% { background: transparent; } }

/* HTMX loading indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }


/* ═══════════════════════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════════════════════ */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--bg-0);
}

.login-box {
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-lg);
    padding: 40px 36px;
    width: 380px;
    box-shadow: var(--shadow-lg);
}

.login-box h2 {
    margin-bottom: 24px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.login-box input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-0);
    color: var(--t1);
    border: 1px solid var(--br);
    border-radius: var(--r-sm);
    font-size: 14px;
    margin-bottom: 14px;
    font-family: inherit;
}

.login-box input:focus { outline: none; border-color: var(--blue); }

.login-box button {
    width: 100%;
    padding: 10px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.login-box button:hover { opacity: .9; }

.login-box .error {
    color: var(--red);
    font-size: 13px;
    margin-top: 10px;
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   URGENCY DETECTOR — Badges, Signals, Filters
   ═══════════════════════════════════════════════════════════════ */

/* Urgency badge inline with score */
.urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.urgency-badge.urgency-high {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.urgency-badge.urgency-medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.urgency-badge.urgency-low {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Card border glow for HIGH urgency leads */
.lead-card.urgency-high {
    border-left: 3px solid #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}

.lead-card.urgency-medium {
    border-left: 3px solid #f59e0b;
}

/* Urgency signals list */
.lead-urgency-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0;
}

.urgency-signal-tag {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--t2, #b0b0b0);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.urgency-signal-more {
    font-size: 10px;
    color: var(--t3, #666);
    padding: 2px 4px;
}

/* Routed-to badge */
.lead-routed-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin: 4px 0;
}

.lead-routed-badge.closer {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Urgency filter buttons in toolbar */
.urgency-filter-btns {
    display: flex;
    gap: 4px;
}

.urgency-filter-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--t2, #b0b0b0);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.urgency-filter-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.urgency-filter-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--t1, #fff);
    border-color: rgba(255, 255, 255, 0.2);
}

.urgency-filter-btn.high.active {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

.urgency-filter-btn.medium.active {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
}

.urgency-filter-btn.low.active {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}


/* ═══════════════════════════════════════════════════════════════
   APPROVALS PAGE — Redesigned Cards (standalone page)
   ═══════════════════════════════════════════════════════════════ */

.approvals-page {
    height: 100vh;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg-0);
}

.approval-card-v2 {
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    margin-bottom: 12px;
    transition: border-color .2s;
}

.approval-card-v2:hover { border-color: var(--br-light); }

.approval-card-v2.priority-high {
    border-left: 4px solid var(--red);
}

.approval-headline {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.approval-headline .agent-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.agent-tag.scout { background: rgba(79,143,255,.15); color: var(--scout); }
.agent-tag.reach { background: rgba(251,146,60,.15); color: var(--reach); }
.agent-tag.nurture { background: rgba(52,211,153,.15); color: var(--nurture); }
.agent-tag.closer { background: rgba(167,139,250,.15); color: var(--closer); }

.approval-draft-block {
    background: var(--bg-0);
    border: 1px solid var(--br);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin: 8px 0;
    font-size: 13px;
    color: var(--t2);
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    border-left: 3px solid var(--bg-3);
}

.approval-why {
    font-size: 12px;
    color: var(--t3);
    padding: 6px 10px;
    background: rgba(79,143,255,.04);
    border-left: 2px solid var(--blue);
    border-radius: 0 4px 4px 0;
    margin: 8px 0;
    line-height: 1.4;
}

.approval-actions-v2 {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.approval-actions-v2 .btn {
    padding: 8px 20px;
    font-size: 13px;
    border-radius: var(--r-sm);
}

.approval-actions-v2 .btn-approve {
    background: var(--green);
    color: #000;
    font-weight: 700;
}

.approval-actions-v2 .btn-edit {
    background: var(--blue);
    color: white;
}

.approval-actions-v2 .btn-reject {
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
}

.approval-meta-strip {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--t3);
    flex-wrap: wrap;
}

.approval-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--t3);
}

.approval-empty .emoji { font-size: 48px; margin-bottom: 12px; }
.approval-empty .msg { font-size: 16px; color: var(--t2); }
.approval-empty .sub { font-size: 13px; margin-top: 4px; }


/* ═══════════════════════════════════════════════════════════════
   OPERATIONS FEED — Inter-Agent Activity Timeline
   ═══════════════════════════════════════════════════════════════ */

.ops-feed-page {
    height: 100vh;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg-0);
}

.ops-feed-header {
    margin-bottom: 20px;
}

.ops-feed-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--t1);
}

.ops-feed-header p {
    font-size: 13px;
    color: var(--t3);
    margin-top: 4px;
}

.ops-feed-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.ops-feed-timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--br);
}

.ops-feed-item {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    position: relative;
}

.ops-feed-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
    margin-left: 13px;
    position: relative;
    z-index: 1;
}

.ops-feed-dot.scout { background: var(--scout); box-shadow: 0 0 8px var(--scout); }
.ops-feed-dot.reach { background: var(--reach); box-shadow: 0 0 8px var(--reach); }
.ops-feed-dot.nurture { background: var(--nurture); box-shadow: 0 0 8px var(--nurture); }
.ops-feed-dot.closer { background: var(--closer); box-shadow: 0 0 8px var(--closer); }
.ops-feed-dot.system { background: var(--t3); }
.ops-feed-dot.dashboard { background: var(--yellow); }
.ops-feed-dot.maps_scout { background: var(--scout); box-shadow: 0 0 8px var(--scout); }
.ops-feed-dot.reddit_scout { background: var(--cyan, #06b6d4); box-shadow: 0 0 8px var(--cyan, #06b6d4); }
.ops-feed-dot.gm { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }

.ops-feed-content {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    padding: 12px 16px;
    transition: border-color .15s;
}

.ops-feed-content:hover { border-color: var(--br-light); }

.ops-feed-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ops-feed-agent {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ops-feed-agent.scout { color: var(--scout); }
.ops-feed-agent.reach { color: var(--reach); }
.ops-feed-agent.nurture { color: var(--nurture); }
.ops-feed-agent.closer { color: var(--closer); }
.ops-feed-agent.dashboard { color: var(--yellow); }
.ops-feed-agent.system { color: var(--t3); }
.ops-feed-agent.maps_scout { color: var(--scout); }
.ops-feed-agent.reddit_scout { color: var(--cyan, #06b6d4); }
.ops-feed-agent.gm { color: var(--yellow); }

.ops-feed-time {
    font-size: 10px;
    color: var(--t3);
    font-variant-numeric: tabular-nums;
}

.ops-feed-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 2px;
}

.ops-feed-detail {
    font-size: 12px;
    color: var(--t2);
    line-height: 1.4;
}

.ops-feed-handoff {
    background: rgba(167,139,250,.06);
    border: 1px solid rgba(167,139,250,.2);
    border-radius: var(--r-md);
    padding: 14px 16px;
}

.ops-feed-handoff .ops-feed-action {
    color: var(--purple);
}

.ops-feed-summary {
    font-size: 11px;
    color: var(--t3);
    margin-top: 3px;
    line-height: 1.4;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    letter-spacing: -0.2px;
}

.ops-feed-error {
    border-color: rgba(255,68,68,.25);
    background: rgba(255,68,68,.04);
}

.ops-feed-error .ops-feed-action {
    color: var(--red);
}


/* ═══════════════════════════════════════════════════════════════
   AGENT PROFILE — Two-Column Layout (redesigned)
   ═══════════════════════════════════════════════════════════════ */

.agent-profile-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 0;
    height: 100%;
    overflow: hidden;
}

/* Left: Profile Card */
.agent-profile-card {
    background: var(--bg-1);
    border-right: 1px solid var(--br);
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.agent-profile-section {
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    padding: 14px;
}

.agent-profile-section-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 8px;
}

.agent-profile-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.agent-profile-stat {
    padding: 8px;
    background: var(--bg-0);
    border-radius: var(--r-sm);
}

.agent-profile-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--t1);
    line-height: 1;
}

.agent-profile-stat-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t3);
    margin-top: 2px;
}

/* Right: Chat */
.agent-chat-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Bottom: Activity Timeline */
.agent-activity-log {
    background: var(--bg-1);
    border-top: 1px solid var(--br);
    padding: 14px 20px;
    max-height: 240px;
    overflow-y: auto;
}

.agent-activity-log-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   REDDIT DM — Redesigned Cards
   ═══════════════════════════════════════════════════════════════ */

.reddit-page {
    height: 100vh;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg-0);
}

.reddit-info-banner {
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--t2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.reddit-warning-banner {
    background: rgba(251,191,36,.06);
    border: 1px solid rgba(251,191,36,.2);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--yellow);
    display: flex;
    align-items: center;
    gap: 8px;
}

.reddit-dm-card-v2 {
    background: var(--bg-2);
    border: 1px solid var(--br);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    margin-bottom: 10px;
    transition: border-color .2s;
}

.reddit-dm-card-v2:hover { border-color: var(--br-light); }

.reddit-dm-recipient {
    font-size: 14px;
    font-weight: 600;
    color: #ff4500;
    margin-bottom: 4px;
}

.reddit-dm-subreddit {
    font-size: 12px;
    color: var(--t3);
}

.reddit-dm-message-block {
    background: var(--bg-0);
    border: 1px solid var(--br);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin: 10px 0;
    font-size: 13px;
    color: var(--t2);
    line-height: 1.6;
    white-space: pre-wrap;
}

.reddit-dm-status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.reddit-dm-status-badge.pending { background: rgba(251,191,36,.15); color: var(--yellow); }
.reddit-dm-status-badge.approved { background: rgba(52,211,153,.15); color: var(--green); }
.reddit-dm-status-badge.sent { background: rgba(99,102,241,.15); color: #6366f1; }
.reddit-dm-status-badge.rejected { background: rgba(248,113,113,.15); color: var(--red); }
.reddit-dm-status-badge.failed { background: rgba(248,113,113,.15); color: var(--red); }


/* ═══════════════════════════════════════════════════════════════
   UNIFIED COMPONENTS — Cards, Headings, Page Headers
   ═══════════════════════════════════════════════════════════════ */

/* Unified Card */
.card { background: var(--bg-2); border: 1px solid var(--br); border-radius: var(--r-lg); padding: 20px; }

/* Heading */
.heading { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--t1); }

/* Page Header */
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--t1); letter-spacing: -0.02em; }
.page-header .subtitle { color: var(--t2); font-size: 14px; margin-top: 4px; }

/* Approval Card Clean — Redesigned */
.approval-card-clean { background: var(--bg-2); border: 1px solid var(--br); border-radius: var(--r-lg); padding: 24px; margin-bottom: 16px; }
.approval-card-clean .company-name { font-size: 16px; font-weight: 700; color: var(--t1); }
.approval-card-clean .channel-badge { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.approval-card-clean .channel-badge.email { background: rgba(79,143,255,.15); color: var(--blue); }
.approval-card-clean .channel-badge.sms { background: rgba(52,211,153,.15); color: var(--green); }
.approval-card-clean .subject-line { font-size: 15px; font-weight: 600; color: var(--t1); margin: 12px 0 8px; }
.approval-card-clean .body-preview { color: var(--t2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.approval-card-clean .body-preview.expanded { -webkit-line-clamp: unset; }
.approval-card-clean .why-toggle { color: var(--t3); font-size: 12px; cursor: pointer; margin-top: 8px; }
.approval-card-clean .why-content { display: none; color: var(--t3); font-size: 13px; margin-top: 8px; padding: 12px; background: var(--bg-3); border-radius: var(--r-md); }
.approval-card-clean .why-content.show { display: block; }
.approval-card-clean .actions { display: flex; gap: 10px; margin-top: 16px; }
.approval-card-clean .meta-details { display: none; color: var(--t3); font-size: 12px; margin-top: 12px; padding: 12px; background: var(--bg-3); border-radius: var(--r-md); }
.approval-card-clean .meta-details.show { display: block; }


/* ═══════════════════════════════════════════════════════════════
   RICH CONTEXT — Category Tags, AI Reasoning, Lead Intelligence
   ═══════════════════════════════════════════════════════════════ */

/* Category Tag Strip */
.draft-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.draft-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.draft-tag .tag-icon {
    font-size: 11px;
}

/* Category colors */
.draft-tag.category-direct_client {
    background: rgba(79, 143, 255, 0.15);
    color: var(--blue);
    border: 1px solid rgba(79, 143, 255, 0.3);
}

.draft-tag.category-white_label {
    background: rgba(167, 139, 250, 0.15);
    color: var(--purple);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.draft-tag.category-campaign_template {
    background: rgba(251, 146, 60, 0.15);
    color: var(--orange);
    border: 1px solid rgba(251, 146, 60, 0.3);
}

/* Stage colors */
.draft-tag.stage-reach {
    background: rgba(251, 146, 60, 0.15);
    color: var(--orange);
    border: 1px solid rgba(251, 146, 60, 0.3);
}

.draft-tag.stage-nurture {
    background: rgba(52, 211, 153, 0.15);
    color: var(--green);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.draft-tag.stage-closer {
    background: rgba(167, 139, 250, 0.15);
    color: var(--purple);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Channel colors */
.draft-tag.channel-email {
    background: rgba(79, 143, 255, 0.12);
    color: var(--blue);
    border: 1px solid rgba(79, 143, 255, 0.25);
}

.draft-tag.channel-sms {
    background: rgba(52, 211, 153, 0.12);
    color: var(--green);
    border: 1px solid rgba(52, 211, 153, 0.25);
}

.draft-tag.channel-reddit_dm {
    background: rgba(255, 69, 0, 0.15);
    color: #ff4500;
    border: 1px solid rgba(255, 69, 0, 0.3);
}

/* AI Reasoning Panel */
.ai-reasoning-panel {
    background: var(--bg-0);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    margin: 12px 0;
    overflow: hidden;
}

.ai-reasoning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--br);
    cursor: pointer;
    transition: background .15s;
}

.ai-reasoning-header:hover {
    background: var(--bg-2);
}

.ai-reasoning-header h4 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--t2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-reasoning-header .toggle-icon {
    font-size: 10px;
    color: var(--t3);
    transition: transform .2s;
}

.ai-reasoning-panel.expanded .ai-reasoning-header .toggle-icon {
    transform: rotate(180deg);
}

.ai-reasoning-body {
    display: none;
    padding: 14px;
}

.ai-reasoning-panel.expanded .ai-reasoning-body {
    display: block;
}

.ai-reasoning-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--br);
}

.ai-reasoning-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ai-reasoning-label {
    min-width: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--t3);
    padding-top: 2px;
}

.ai-reasoning-value {
    flex: 1;
    font-size: 13px;
    color: var(--t2);
    line-height: 1.5;
}

/* Lead Intelligence Panel */
.lead-intel-panel {
    background: var(--bg-0);
    border: 1px solid var(--br);
    border-radius: var(--r-md);
    margin: 12px 0;
    overflow: hidden;
}

.lead-intel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--br);
    cursor: pointer;
    transition: background .15s;
}

.lead-intel-header:hover {
    background: var(--bg-2);
}

.lead-intel-header h4 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--t2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.lead-intel-header .toggle-icon {
    font-size: 10px;
    color: var(--t3);
    transition: transform .2s;
}

.lead-intel-panel.expanded .lead-intel-header .toggle-icon {
    transform: rotate(180deg);
}

.lead-intel-body {
    display: none;
    padding: 14px;
}

.lead-intel-panel.expanded .lead-intel-body {
    display: block;
}

.lead-intel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.lead-intel-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lead-intel-item.full-width {
    grid-column: 1 / -1;
}

.lead-intel-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--t3);
}

.lead-intel-value {
    font-size: 13px;
    color: var(--t1);
    font-weight: 500;
}

.lead-intel-value.score {
    font-size: 16px;
    font-weight: 700;
    color: var(--green);
}

.lead-intel-value.tier-1 { color: var(--green); }
.lead-intel-value.tier-2 { color: var(--yellow); }
.lead-intel-value.tier-3 { color: var(--t3); }

/* Engagement Stats */
.engagement-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--br);
}

.engagement-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--t2);
}

.engagement-stat .stat-value {
    font-weight: 700;
    color: var(--t1);
}

.engagement-stat.sent { color: var(--blue); }
.engagement-stat.opened { color: var(--yellow); }
.engagement-stat.replied { color: var(--green); }
.engagement-stat.bounced { color: var(--red); }

/* Quick summary strip (always visible) */
.draft-quick-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-0);
    border-radius: var(--r-sm);
    margin: 10px 0;
    font-size: 12px;
    color: var(--t2);
}

.draft-quick-summary .summary-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.draft-quick-summary .summary-label {
    color: var(--t3);
}

.draft-quick-summary .summary-value {
    font-weight: 600;
    color: var(--t1);
}

/* Notes section in intel panel */
.lead-intel-notes {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--t2);
    line-height: 1.5;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .grid-container { grid-template-columns: repeat(6, 1fr); }
    .widget-stats { grid-column: 1 / -1; }
    .widget-leads { grid-column: 1 / -1; }
    .widget-drafts { grid-column: 1 / -1; }
    .widget-operations { grid-column: 1 / -1; }
    .widget-activity { grid-column: 1 / -1; }
    .agents-grid { grid-template-columns: 1fr; }
    .ops-board { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .shell {
        grid-template-columns: 1fr;
        grid-template-rows: 48px 1fr;
    }

    .shell:has(.sidebar.collapsed) {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        width: 240px;
        transition: left .25s ease;
        z-index: 200;
    }

    .sidebar.collapsed {
        width: 240px;
        left: -260px;
    }

    .sidebar.mobile-open {
        left: 0;
    }

    .mobile-topbar {
        display: flex;
    }

    .main-content {
        height: calc(100vh - 48px);
    }

    .dashboard-page { padding: 12px; }
    .agents-page { padding: 16px; }
    .status-legend { flex-direction: column; }
    .stats-kpi-row { flex-direction: column; }
    .team-kpi-strip { flex-direction: column; }
    .ops-board { grid-template-columns: 1fr; }
    body { overflow: auto; }

    .whiteboard-page {
        grid-template-rows: auto auto auto auto;
        overflow-y: auto;
    }

    .whiteboard-container {
        grid-template-columns: 1fr;
    }

    .agent-profile-grid {
        grid-template-columns: 1fr;
    }
}