/* ═══════════════════════════════════════════════════════════
   SmartMailer Ultimate — Professional Dark Dashboard CSS v2
   21st Century Design Language
   ═══════════════════════════════════════════════════════════ */

:root {
    --bg-0: #060610;
    --bg-1: #0c0c1d;
    --bg-2: #11112a;
    --bg-3: #181838;
    --bg-card: #0f0f24;
    --bg-card-hover: #14143a;
    --bg-sidebar: #080815;
    --bg-modal: rgba(4, 4, 16, 0.85);
    --border: rgba(255, 255, 255, 0.05);
    --border-hover: rgba(255, 255, 255, 0.1);
    --border-active: rgba(124, 92, 252, 0.3);
    --text-0: #f0f0ff;
    --text-1: #c8c8e0;
    --text-2: #8888a8;
    --text-3: #555570;
    --purple: #7c5cfc;
    --purple-glow: rgba(124, 92, 252, 0.15);
    --green: #00d68f;
    --green-glow: rgba(0, 214, 143, 0.12);
    --red: #ff5252;
    --red-glow: rgba(255, 82, 82, 0.12);
    --amber: #ffb300;
    --amber-glow: rgba(255, 179, 0, 0.12);
    --cyan: #22d3ee;
    --cyan-glow: rgba(34, 211, 238, 0.12);
    --orange: #ff7043;
    --gradient-1: linear-gradient(135deg, #7c5cfc 0%, #a78bfa 100%);
    --gradient-2: linear-gradient(135deg, #00d68f 0%, #34d399 100%);
    --gradient-3: linear-gradient(135deg, #ff5252 0%, #f87171 100%);
    --gradient-4: linear-gradient(135deg, #ffb300 0%, #fbbf24 100%);
    --gradient-5: linear-gradient(135deg, #22d3ee 0%, #67e8f9 100%);
    --gradient-6: linear-gradient(135deg, #ff7043 0%, #fb923c 100%);
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --shadow: 0 4px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Tech Lab Theme */
    --tech-bg: #0a0a1a;
    --tech-panel: #111125;
    --tech-accent: #00f3ff;
    --tech-purple: #7000ff;
    --tech-floor: #16162a;
    --tech-grid: rgba(0, 243, 255, 0.08);
    --tech-glow: rgba(0, 243, 255, 0.2);
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-0);
    color: var(--text-0);
    display: flex;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-2); }

/* ─── TEXT HELPERS ─── */
.text-muted { color: var(--text-3); font-size: 13px; }
.text-success { color: var(--green); }
.text-danger { color: var(--red); }
.text-accent { color: var(--purple); }

/* ════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════ */
.sidebar {
    width: 250px;
    min-width: 250px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 200;
    backdrop-filter: blur(20px);
}

.sidebar-brand {
    padding: 24px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--border);
}

.brand-icon {
    width: 42px; height: 42px;
    background: var(--gradient-1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 20px rgba(124, 92, 252, 0.35);
    animation: brandGlow 3s ease-in-out infinite alternate;
}

@keyframes brandGlow {
    from { box-shadow: 0 0 15px rgba(124, 92, 252, 0.25); }
    to { box-shadow: 0 0 30px rgba(124, 92, 252, 0.45); }
}

.sidebar-brand h1 { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; }
.brand-sub { font-size: 10px; color: var(--purple); font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; }
.app-version {
    display: inline-block;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(124,92,252,0.7);
    background: rgba(124,92,252,0.1);
    border: 1px solid rgba(124,92,252,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s var(--ease);
    text-align: left;
    width: 100%;
    position: relative;
}

.nav-btn::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    background: var(--purple);
    border-radius: 0 2px 2px 0;
    transform: translateY(-50%);
    transition: height 0.25s var(--ease);
}

.nav-btn:hover { background: var(--purple-glow); color: var(--text-1); }
.nav-btn.active { background: var(--purple-glow); color: var(--purple); font-weight: 600; }
.nav-btn.active::before { height: 24px; }

.nav-icon { font-size: 17px; width: 24px; text-align: center; }

.sidebar-footer {
    padding: 16px 16px 20px;
    border-top: 1px solid var(--border);
}

.mode-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s var(--ease);
    background: var(--red-glow);
    color: var(--red);
    border: 1px solid rgba(255, 82, 82, 0.15);
}

.mode-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }

.mode-badge.live {
    background: var(--green-glow);
    color: var(--green);
    border-color: rgba(0, 214, 143, 0.15);
}

.mode-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

.mode-toggle-hint { margin-left: auto; font-size: 14px; opacity: 0.6; }
.mode-detail { padding: 6px 14px 0; font-size: 10px; color: var(--text-3); }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* ════════════════════════════════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════════════════════════════════ */
.main-content {
    flex: 1;
    margin-left: 250px;
    padding: 28px 36px;
    min-height: 100vh;
    background: var(--bg-0);
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.page-header h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.page-desc { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.last-update { font-size: 11px; color: var(--text-3); }

/* ─── TAB SYSTEM ─── */
.tab-content { display: none; animation: fadeSlide 0.35s var(--ease); }
.tab-content.active { display: block; }

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

/* ════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
    transition: all 0.25s var(--ease);
}

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

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

.card-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-0);
    letter-spacing: -0.2px;
}

.card-info { background: linear-gradient(135deg, var(--bg-card), rgba(124, 92, 252, 0.03)); border-color: rgba(124, 92, 252, 0.1); }

.section-desc { font-size: 12px; color: var(--text-2); margin: -8px 0 16px; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   STAT CARDS
   ════════════════════════════════════════════════════════════ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.stats-grid-small { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.stat-card {
    padding: 20px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s var(--ease);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    transition: all 0.4s var(--ease);
}

.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat-card:hover::after { transform: scale(1.3); }

.gradient-1 { background: var(--gradient-1); }
.gradient-2 { background: var(--gradient-2); }
.gradient-3 { background: var(--gradient-3); }
.gradient-4 { background: var(--gradient-4); color: #1a1a2e; }
.gradient-5 { background: var(--gradient-5); color: #1a1a2e; }
.gradient-6 { background: var(--gradient-6); }

.stat-icon { font-size: 28px; opacity: 0.9; z-index: 1; }
.stat-info { display: flex; flex-direction: column; z-index: 1; }
.stat-value { font-size: 28px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.stat-label { font-size: 11px; opacity: 0.85; margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.stat-arrow { margin-left: auto; font-size: 16px; opacity: 0.5; z-index: 1; }

/* ════════════════════════════════════════════════════════════
   DASHBOARD GRID
   ════════════════════════════════════════════════════════════ */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

/* ─── PROGRESS BAR ─── */
.daily-progress { margin-top: 8px; }
.progress-bar { height: 10px; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; margin-bottom: 10px; }
.progress-fill { height: 100%; background: var(--gradient-2); border-radius: 5px; transition: width 1s var(--ease); width: 0%; position: relative; }
.progress-fill::after { content:''; position:absolute; right:0; top:0; width:30px; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3)); animation: shimmer 2s infinite; }
@keyframes shimmer { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
.progress-text { font-size: 13px; color: var(--text-2); font-weight: 500; }

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn {
    padding: 10px 20px;
    border-radius: var(--radius-xs);
    border: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    white-space: nowrap;
}

.btn-primary { background: var(--gradient-1); color: white; box-shadow: 0 4px 15px rgba(124,92,252,0.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(124,92,252,0.4); }
.btn-accent { background: var(--gradient-5); color: #1a1a2e; }
.btn-accent:hover { transform: translateY(-2px); }
.btn-danger { background: var(--gradient-3); color: white; }
.btn-ghost { background: rgba(255,255,255,0.04); color: var(--text-2); border: 1px solid var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--text-0); border-color: var(--border-hover); }
.btn-sm { padding: 6px 12px; font-size: 11px; border-radius: var(--radius-xs); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; }

/* ════════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════════ */
.table-container { overflow-x: auto; }
.table-actions-inline { display: flex; gap: 10px; align-items: center; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
    text-align: left;
    padding: 12px 14px;
    font-weight: 700;
    color: var(--text-2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
}

.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--purple); }
.sortable.asc .sort-icon { color: var(--green); }
.sortable.desc .sort-icon { color: var(--red); }
.sort-icon { font-size: 10px; opacity: 0.4; margin-left: 4px; }
.th-check { width: 40px; }

tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-1); }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: rgba(124, 92, 252, 0.03); }
tbody tr.selected { background: rgba(124, 92, 252, 0.08); }

.empty-state { text-align: center; color: var(--text-3); padding: 40px 20px !important; font-style: italic; }

/* ════════════════════════════════════════════════════════════
   FORMS & INPUTS
   ════════════════════════════════════════════════════════════ */
.form-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }

input[type="text"], input[type="number"], select, textarea {
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-0);
    font-size: 13px;
    font-family: inherit;
    transition: all 0.2s var(--ease);
    min-width: 160px;
}

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-glow); }

/* ─── CHECKBOX ─── */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-hover);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    vertical-align: middle;
    min-width: 16px;
}
input[type="checkbox"]:checked { background: var(--purple); border-color: var(--purple); }
input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: -1px; left: 3px; color: white; font-size: 11px; font-weight: 700; }

/* ─── TOGGLE ─── */
.toggle { display: flex; align-items: center; cursor: pointer; width: fit-content; }
.toggle input { display: none; }
.toggle-slider {
    width: 44px; height: 24px;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s var(--ease);
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: all 0.3s var(--ease);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.toggle input:checked + .toggle-slider { background: var(--green); }
.toggle input:checked + .toggle-slider::before { left: 23px; }
.toggle-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════
   TOOLTIP
   ════════════════════════════════════════════════════════════ */
.info-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: var(--text-3);
    font-size: 12px;
    cursor: help;
    position: relative;
    flex-shrink: 0;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.info-tooltip:hover { background: var(--purple-glow); color: var(--purple); border-color: rgba(124,92,252,0.2); }

.info-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 280px;
    padding: 12px 16px;
    background: var(--bg-3);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-1);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: all 0.25s var(--ease);
    z-index: 500;
    pointer-events: none;
    font-weight: 400;
}

.info-tooltip:hover::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   AGENTS GRID
   ════════════════════════════════════════════════════════════ */
.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.agent-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.25s var(--ease);
    cursor: pointer;
}

.agent-card:hover { border-color: var(--border-active); transform: translateY(-3px); box-shadow: var(--shadow); }
.agent-card .agent-icon { font-size: 28px; margin-top: 2px; }
.agent-card .agent-info { flex: 1; min-width: 0; }
.agent-card .agent-name { font-size: 14px; font-weight: 700; }
.agent-card .agent-desc { font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.4; }
.agent-card .agent-extra { font-size: 11px; color: var(--cyan); margin-top: 6px; }

.agent-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}

.agent-status.ok { background: var(--green-glow); color: var(--green); }
.agent-status.warning { background: var(--amber-glow); color: var(--amber); }
.agent-status.critical { background: var(--red-glow); color: var(--red); }

/* ════════════════════════════════════════════════════════════
   PIPELINE VISUALIZATION
   ════════════════════════════════════════════════════════════ */
.pipeline-steps {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 8px 0;
}

.pipeline-step {
    flex: 1;
    min-width: 110px;
    text-align: center;
    padding: 16px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    transition: all 0.3s var(--ease);
}

.pipeline-step.active { background: var(--purple-glow); border-color: var(--purple); }
.pipeline-step.done { background: var(--green-glow); border-color: rgba(0,214,143,0.2); }

.pipe-num { display: block; font-size: 20px; font-weight: 900; color: var(--text-3); }
.pipeline-step.active .pipe-num { color: var(--purple); }
.pipeline-step.done .pipe-num { color: var(--green); }

.pipe-label { display: block; font-size: 12px; font-weight: 700; margin-top: 6px; color: var(--text-1); }
.pipe-detail { display: block; font-size: 10px; color: var(--text-3); margin-top: 3px; }
.pipeline-arrow { color: var(--text-3); font-size: 16px; flex-shrink: 0; }

/* ─── Automation Panel ─── */
.auto-status { display: flex; align-items: center; gap: 18px; }
.auto-indicator { width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.auto-indicator.running { background: var(--green); animation: pulse 1.5s infinite; box-shadow: 0 0 14px rgba(0,214,143,0.4); }
.auto-indicator.stopped { background: var(--red); }
.auto-cycle-info { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.cycle-badge { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--purple-glow); color: var(--purple); }
.auto-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 16px; }

/* ─── LOG CONTAINER ─── */
.log-container {
    max-height: 450px;
    overflow-y: auto;
    background: #060610;
    border-radius: var(--radius-sm);
    padding: 16px;
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.7;
    border: 1px solid var(--border);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ════════════════════════════════════════════════════════════
   DISCOVER / SOURCE
   ════════════════════════════════════════════════════════════ */
.discover-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); display: none; font-size: 13px; }
.discover-status.active { display: block; background: var(--purple-glow); border: 1px solid rgba(124,92,252,0.15); }
.discover-status.success { display: block; background: var(--green-glow); border: 1px solid rgba(0,214,143,0.15); color: var(--green); }

.source-breakdown { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.source-tag { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--purple-glow); color: var(--purple); }

.source-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.source-stat {
    text-align: center;
    padding: 14px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.source-stat .value { font-size: 22px; font-weight: 800; color: var(--purple); }
.source-stat .label { font-size: 10px; color: var(--text-3); margin-top: 4px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }

/* ════════════════════════════════════════════════════════════
   DRAFTS
   ════════════════════════════════════════════════════════════ */
.drafts-container { margin-top: 16px; }

.draft-card {
    background: rgba(255,255,255,0.01);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 14px;
    transition: all 0.2s var(--ease);
    cursor: pointer;
}

.draft-card:hover { border-color: var(--border-hover); }

.draft-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.draft-email { font-size: 13px; font-weight: 700; color: var(--purple); }
.draft-company { font-size: 12px; color: var(--text-2); margin-left: 10px; }

.draft-score {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}
.draft-score.high { background: var(--green-glow); color: var(--green); }
.draft-score.low { background: var(--red-glow); color: var(--red); }

.draft-subject { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.draft-preview { font-size: 12px; color: var(--text-2); line-height: 1.6; }

/* ════════════════════════════════════════════════════════════
   CAMPAIGN — INFO GRID
   ════════════════════════════════════════════════════════════ */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.info-item {
    text-align: center;
    padding: 16px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.info-label { display: block; font-size: 10px; color: var(--text-3); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
.info-value { display: block; font-size: 22px; font-weight: 800; margin: 6px 0; }
.info-item small { font-size: 11px; color: var(--text-3); }

.campaign-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.campaign-stat-item { text-align: center; padding: 14px; background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.campaign-stat-item .value { font-size: 24px; font-weight: 800; color: var(--purple); }
.campaign-stat-item .label { font-size: 10px; color: var(--text-3); margin-top: 4px; text-transform: uppercase; font-weight: 600; }
.campaign-badge { padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 700; background: var(--green-glow); color: var(--green); animation: pulse 2s infinite; }

/* ════════════════════════════════════════════════════════════
   SETTINGS
   ════════════════════════════════════════════════════════════ */
.settings-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.setting-row > label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    min-width: 150px;
    flex-shrink: 0;
}

.settings-form > small {
    font-size: 11px;
    color: var(--text-3);
    padding: 0 0 4px 166px;
    display: block;
    line-height: 1.4;
}

.status-badge { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.status-badge.ok { background: var(--green-glow); color: var(--green); }
.status-badge.error { background: var(--red-glow); color: var(--red); }

/* ─── Sector Tags ─── */
.sector-tags-container { display: flex; flex-wrap: wrap; gap: 6px; }
.sector-tag { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--purple-glow); color: var(--purple); border: 1px solid rgba(124,92,252,0.15); }

/* ─── Followup Stats ─── */
.followup-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.followup-stat { text-align: center; padding: 14px 10px; background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.followup-stat .value { font-size: 20px; font-weight: 800; color: var(--cyan); }
.followup-stat .label { font-size: 9px; color: var(--text-3); margin-top: 4px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.3px; }

/* ─── Watchdog ─── */
.watchdog-report { display: flex; flex-direction: column; gap: 6px; }
.watchdog-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); border-left: 3px solid var(--green); }
.watchdog-item.warning { border-left-color: var(--amber); }
.watchdog-item.critical { border-left-color: var(--red); }

/* ════════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-modal);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s var(--ease);
}
.modal-overlay.visible { display: flex; }

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

.modal {
    background: var(--bg-2);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalSlide 0.3s var(--ease);
}

@keyframes modalSlide { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-2);
    z-index: 10;
}

.modal-header h3 { font-size: 16px; font-weight: 800; }
.modal-close { background: none; border: none; color: var(--text-2); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-xs); transition: all 0.2s; }
.modal-close:hover { background: var(--red-glow); color: var(--red); }

.modal-body { padding: 24px; }
.modal-body .detail-grid { display: grid; grid-template-columns: 140px 1fr; gap: 10px; margin-bottom: 16px; }
.modal-body .detail-label { font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; }
.modal-body .detail-value { font-size: 13px; color: var(--text-0); }
.modal-body .detail-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.modal-body .detail-section h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.modal-body .email-content { background: #0a0a16; padding: 16px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; color: var(--text-1); white-space: pre-wrap; border: 1px solid var(--border); max-height: 400px; overflow-y: auto; }

/* ════════════════════════════════════════════════════════════
   TOASTS
   ════════════════════════════════════════════════════════════ */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }

.toast {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    min-width: 280px;
    max-width: 420px;
    animation: toastIn 0.35s var(--ease);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(12px);
}

.toast.success { background: linear-gradient(135deg, rgba(0,60,30,0.9), rgba(0,40,20,0.95)); border: 1px solid rgba(0,214,143,0.25); color: var(--green); }
.toast.error { background: linear-gradient(135deg, rgba(60,0,0,0.9), rgba(40,0,0,0.95)); border: 1px solid rgba(255,82,82,0.25); color: var(--red); }
.toast.info { background: linear-gradient(135deg, rgba(10,10,50,0.9), rgba(15,15,60,0.95)); border: 1px solid rgba(124,92,252,0.25); color: var(--purple); }

@keyframes toastIn { from { transform: translateX(120px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ─── LOADING ─── */
.loading { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.15); border-top-color: var(--purple); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .sidebar { width: 60px; min-width: 60px; }
    .sidebar-brand h1, .brand-sub, .nav-text, .mode-toggle-hint, .mode-detail { display: none; }
    .nav-btn { justify-content: center; padding: 14px; }
    .main-content { margin-left: 60px; padding: 16px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid, .settings-sections { grid-template-columns: 1fr; }
    .pipeline-steps { flex-wrap: wrap; }
    .pipeline-arrow { display: none; }
}

/* ════════════════════════════════════════════════════════════
   MEETING ROOM
   ════════════════════════════════════════════════════════════ */
.meeting-room-card { overflow: hidden; }

.meeting-status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.05);
    color: var(--text-3);
}
.meeting-status-badge.active {
    background: var(--green-glow);
    color: var(--green);
    animation: pulse 2s infinite;
}

/* ─── Command Center Area — High-End Mission Control ─── */
.meeting-office {
    position: relative;
    width: 100%;
    height: 800px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0,243,255,0.2);
    overflow: hidden;
    margin-bottom: 16px;
    perspective: 1200px;
    background: radial-gradient(circle at 50% 20%, #1a1a45 0%, #08081a 60%, #03030b 100%);
}

/* Master Scanline Overlay */
.meeting-office::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 3px 100%;
    opacity: 0.3;
}

/* Moving Digital Data Noise */
.meeting-office::after {
    content: '';
    position: absolute;
    top: -100%; left: 0; right: 0; bottom: 0;
    z-index: 99;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 243, 255, 0.03) 1px, rgba(0, 243, 255, 0.03) 2px);
    animation: scanlineMove 10s linear infinite;
    opacity: 0.5;
}

@keyframes scanlineMove { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* ─── Tactical Map Floor — Radar & Neural Web ─── */
.office-floor {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        /* Radar Circles */
        radial-gradient(circle at 50% 50%, transparent 0%, transparent 150px, rgba(0, 243, 255, 0.05) 151px, transparent 153px),
        /* Grid */
        repeating-linear-gradient(90deg, var(--tech-grid) 0px, var(--tech-grid) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(0deg, var(--tech-grid) 0px, var(--tech-grid) 1px, transparent 1px, transparent 60px),
        /* Dark Base */
        #080815;
    transform: perspective(1000px) rotateX(15deg) scale(1.1);
    transform-origin: center 85%;
}

/* Central Mission Core Glow */
.office-floor::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(112,0,255,0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: corePulse 5s ease-in-out infinite;
}

@keyframes corePulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes neonPulse {
    0%, 100% { opacity: 0.6; filter: hue-rotate(0deg); }
    50% { opacity: 0.9; filter: hue-rotate(10deg); }
}

@keyframes holographic {
    0%, 100% { opacity: 0.8; transform: skewX(0deg); }
    50% { opacity: 1; transform: skewX(0.5deg); }
    52% { opacity: 0.7; transform: skewX(-1deg); }
}

/* ─── Integrated Bridge Consoles ─── */
.css-desk {
    position: absolute;
    width: 130px;
    height: 52px;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(25deg);
}

.css-desk::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e1e2f 0%, #0c0c16 100%);
    border-radius: 6px;
    box-shadow: 
        0 -2px 0 var(--tech-accent),
        0 15px 30px rgba(0,0,0,0.8),
        inset 0 0 15px rgba(0, 243, 255, 0.1);
    border: 1px solid rgba(0, 243, 255, 0.3);
}

/* Glowing Console Side Trims */
.css-desk::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: -2px;
    right: -2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tech-accent), transparent);
    box-shadow: 0 0 12px var(--tech-accent);
}

/* Advanced Holographic Consoles */
.desk-monitor {
    position: absolute;
    top: -45px;
    left: 15px;
    width: 100px;
    height: 55px;
    background: linear-gradient(180deg, rgba(0, 243, 255, 0.2) 0%, rgba(112, 0, 255, 0.1) 100%);
    border: 1px solid rgba(0, 243, 255, 0.5);
    border-radius: 4px;
    backdrop-filter: blur(5px);
    animation: holographic 8s infinite ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.desk-monitor::after {
    content: 'SYNC ACTIVE';
    font-family: 'Cascadia Code', monospace;
    font-size: 8px;
    color: var(--tech-accent);
    letter-spacing: 1px;
    text-shadow: 0 0 5px var(--tech-accent);
}

.desk-monitor::before {
    content: '';
    width: 40px;
    height: 2px;
    background: var(--tech-accent);
    animation: scanlineMove 2s linear infinite;
}

/* Mechanical chairs */
.desk-chair {
    position: absolute;
    width: 38px;
    height: 38px;
    left: 41px;
    background: linear-gradient(135deg, #333344 0%, #111122 100%);
    border-radius: 5px;
    transform: perspective(400px) rotateX(-15deg);
    border: 1px solid rgba(255,255,255,0.05);
}

/* Bio-Tech Foliage (Replacing plants) */
.css-plant, .css-plant-large {
    font-size: 24px;
    filter: drop-shadow(0 0 8px var(--tech-accent)) brightness(1.5) grayscale(0.2);
    animation: bioPulse 3s infinite alternate;
}
@keyframes bioPulse { from { filter: hue-rotate(0deg) brightness(1.5); } to { filter: hue-rotate(180deg) brightness(2); } }

/* Holographic Displays (Replacing Whiteboard/Projector) */
.css-whiteboard, .css-projector-screen {
    background: rgba(0, 243, 255, 0.05) !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);
    animation: holographic 8s infinite;
}
.css-whiteboard span, .projector-content {
    color: var(--tech-accent) !important;
    text-shadow: 0 0 8px var(--tech-accent);
    font-family: 'Cascadia Code', monospace;
    text-transform: uppercase;
}

/* Data Nodes (Replacing server racks/bookshelves) */
.css-bookshelf, .css-filing, .css-printer {
    background: #111122 !important;
    border: 1px solid rgba(112,0,255,0.3) !important;
    color: var(--tech-purple) !important;
    text-shadow: 0 0 10px var(--tech-purple);
    font-size: 28px !important;
}
.css-bookshelf::after, .css-filing::after {
    content: '...';
    position: absolute;
    bottom: 2px;
    left: 50%; transform: translateX(-50%);
    font-size: 8px; color: #00ff00;
    animation: blink 0.5s infinite alternate;
}

/* Neon Lights */
.css-light {
    width: 150px !important;
    height: 4px !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 0 20px #00f3ff, 0 0 40px #00f3ff !important;
    opacity: 0.8;
}
/* ─── Live Status Bubble (above character head) ─── */
.agent-status-bubble {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(8px);
    color: var(--tech-accent);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    max-width: 260px;
    min-width: 100px;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
    border: 1px solid rgba(0, 243, 255, 0.3);
    font-family: 'Cascadia Code', monospace;
}

.agent-status-bubble.visible {
    opacity: 1;
}

.agent-status-bubble::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #0a0a1a;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    border-right: 1px solid rgba(0, 243, 255, 0.3);
}

/* ─── Tech Viewports (Replacing windows) ─── */
.css-window {
    position: absolute;
    top: 0;
    width: 90px;
    height: 55px;
    background: linear-gradient(180deg, 
        #87ceeb 0%, 
        #b3e5fc 30%, 
        #e1f5fe 60%,
        rgba(255,255,255,0.6) 100%);
    border-radius: 0 0 6px 6px;
    box-shadow: 
        inset 0 0 15px rgba(135,206,235,0.4),
        0 4px 12px rgba(0,0,0,0.15),
        0 0 30px rgba(255,248,220,0.2);
    border: 3px solid #90a4ae;
    border-top: 4px solid #78909c;
}

/* Window glass divider */
.css-window::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #90a4ae;
}

/* Window light beam */
.css-window::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 10%;
    width: 80%;
    height: 80px;
    background: linear-gradient(180deg, 
        rgba(255,248,220,0.15) 0%, 
        transparent 100%);
    clip-path: polygon(10% 0%, 90% 0%, 120% 100%, -20% 100%);
    pointer-events: none;
}

/* ─── 3D Plants with pots ─── */
.css-plant {
    position: absolute;
    font-size: 28px;
    z-index: 2;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.25));
    animation: plantSway 5s ease-in-out infinite;
}

.css-plant::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 5px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.2) 0%, transparent 70%);
    border-radius: 50%;
}

@keyframes plantSway {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(2deg) scale(1.02); }
    75% { transform: rotate(-2deg) scale(0.98); }
}

/* Isometric floor grid overlay for depth */
.meeting-office::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(100,120,180,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,120,180,0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(600px) rotateX(45deg);
    transform-origin: center bottom;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
}

/* Floating particle container */
.office-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(124,92,252,0.5);
    border-radius: 50%;
    animation: floatParticle 8s linear infinite;
    opacity: 0;
}

@keyframes floatParticle {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.7; }
    80% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-200px) scale(1.2); }
}

.meeting-office::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(100,149,237,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* ─── 3D Perspective Container ─── */
.meeting-office {
    perspective: 1200px;
}

.meeting-office-inner {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}

/* ─── Toplantı Masası ─── */
.meeting-table {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(25deg);
    width: 380px;
    height: 220px;
    z-index: 1;
    transition: all 1.2s var(--ease);
    opacity: 0.25;
}

.meeting-table.active {
    opacity: 1;
    transform: translate(-50%, -50%) rotateX(12deg) scale(1.08);
}

.table-surface {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a3e 0%, #2a2352 30%, #1e1e44 60%, #24244a 100%);
    border-radius: 50%;
    border: 3px solid rgba(124,92,252,0.3);
    box-shadow: 
        0 0 50px rgba(124,92,252,0.12),
        inset 0 0 40px rgba(0,0,0,0.4),
        inset 0 -8px 20px rgba(124,92,252,0.08),
        0 25px 60px rgba(0,0,0,0.5),
        0 6px 0 #141430;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Table wood grain texture */
.table-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-linear-gradient(
        120deg,
        rgba(255,255,255,0.01) 0px,
        transparent 2px,
        transparent 8px
    );
    pointer-events: none;
}

/* Table edge highlight */
.table-surface::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 10%;
    width: 80%;
    height: 30%;
    background: radial-gradient(ellipse, rgba(124,92,252,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Table legs (visible on hover/active) */
.meeting-table.active::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 15%;
    width: 70%;
    height: 14px;
    background: linear-gradient(180deg, #141430 0%, #0a0a1f 100%);
    border-radius: 0 0 50% 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.table-logo {
    font-size: 14px;
    font-weight: 800;
    color: rgba(124,92,252,0.4);
    letter-spacing: 1.5px;
    text-shadow: 0 0 20px rgba(124,92,252,0.15);
    z-index: 1;
    animation: tableLogoGlow 4s ease-in-out infinite;
}

.meeting-table.active .table-logo {
    color: rgba(124,92,252,0.6);
}

@keyframes tableLogoGlow {
    0%, 100% { text-shadow: 0 0 15px rgba(124,92,252,0.1); }
    50% { text-shadow: 0 0 30px rgba(124,92,252,0.25); }
}

/* ─── Agent Koltukları — 3D Karakter Sistemi ─── */
.meeting-seat {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 5;
    cursor: pointer;
    transform-style: preserve-3d;
    /* Smooth walking transition */
    transition: top 2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                left 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.meeting-seat:hover { z-index: 20; }
.meeting-seat:hover .agent-avatar { transform: scale(1.15) translateY(-5px); }

/* ═══ 3D CHARACTER BASE — perspective standing ═══ */
.meeting-seat .agent-avatar {
    transform-style: preserve-3d;
    transform: perspective(400px) rotateX(5deg) rotateY(0deg);
    transition: transform 0.4s var(--ease);
}

/* Direction awareness — character faces movement direction */
.meeting-seat.facing-left .agent-avatar {
    transform: perspective(400px) rotateX(5deg) rotateY(15deg) scaleX(-1);
}
.meeting-seat.facing-right .agent-avatar {
    transform: perspective(400px) rotateX(5deg) rotateY(-15deg);
}

/* ═══ IDLE — masada çalışırken (öne eğik, yazıyor) ═══ */
.meeting-seat.idle .agent-avatar {
    animation: idleWork 3s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes idleWork {
    0%, 100% {
        transform: perspective(400px) rotateX(8deg) rotateY(-3deg) translateY(0);
    }
    30% {
        transform: perspective(400px) rotateX(12deg) rotateY(0deg) translateY(-2px);
    }
    60% {
        transform: perspective(400px) rotateX(8deg) rotateY(3deg) translateY(0);
    }
}

/* ═══ WALKING — 3D adım atma animasyonu ═══ */
.meeting-seat.walking .agent-avatar {
    animation: walk3D 0.5s ease-in-out infinite !important;
    transform-origin: bottom center;
}

@keyframes walk3D {
    0% {
        transform: perspective(400px) rotateX(5deg) rotateZ(0deg) translateY(0) scaleY(1);
    }
    15% {
        transform: perspective(400px) rotateX(8deg) rotateZ(-5deg) translateY(-12px) scaleY(1.03);
    }
    30% {
        transform: perspective(400px) rotateX(3deg) rotateZ(0deg) translateY(-2px) scaleY(0.97);
    }
    50% {
        transform: perspective(400px) rotateX(5deg) rotateZ(0deg) translateY(0) scaleY(1);
    }
    65% {
        transform: perspective(400px) rotateX(8deg) rotateZ(5deg) translateY(-12px) scaleY(1.03);
    }
    80% {
        transform: perspective(400px) rotateX(3deg) rotateZ(0deg) translateY(-2px) scaleY(0.97);
    }
    100% {
        transform: perspective(400px) rotateX(5deg) rotateZ(0deg) translateY(0) scaleY(1);
    }
}

/* Walking with direction */
.meeting-seat.walking.facing-left .agent-avatar {
    animation: walk3DLeft 0.5s ease-in-out infinite !important;
}

@keyframes walk3DLeft {
    0% {
        transform: perspective(400px) rotateX(5deg) rotateY(15deg) scaleX(-1) translateY(0);
    }
    15% {
        transform: perspective(400px) rotateX(8deg) rotateY(20deg) rotateZ(5deg) scaleX(-1) translateY(-12px);
    }
    30% {
        transform: perspective(400px) rotateX(3deg) rotateY(12deg) scaleX(-1) translateY(-2px) scaleY(0.97);
    }
    50% {
        transform: perspective(400px) rotateX(5deg) rotateY(15deg) scaleX(-1) translateY(0);
    }
    65% {
        transform: perspective(400px) rotateX(8deg) rotateY(20deg) rotateZ(-5deg) scaleX(-1) translateY(-12px);
    }
    80% {
        transform: perspective(400px) rotateX(3deg) rotateY(12deg) scaleX(-1) translateY(-2px) scaleY(0.97);
    }
    100% {
        transform: perspective(400px) rotateX(5deg) rotateY(15deg) scaleX(-1) translateY(0);
    }
}

/* ═══ SPEAKING — konuşma efekti (yeşil halka + titreme) ═══ */
.meeting-seat.speaking .agent-avatar {
    animation: speakAnim 0.8s ease-in-out infinite !important;
    filter: drop-shadow(0 0 12px rgba(0,214,143,0.5)) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

@keyframes speakAnim {
    0%, 100% {
        transform: perspective(400px) rotateX(5deg) translateY(0) scale(1);
    }
    25% {
        transform: perspective(400px) rotateX(5deg) translateY(-3px) scale(1.04);
    }
    50% {
        transform: perspective(400px) rotateX(8deg) translateY(0) scale(1);
    }
    75% {
        transform: perspective(400px) rotateX(5deg) translateY(-2px) scale(1.02);
    }
}

/* ═══ GROUND SHADOW — 3D gölge (her durum için) ═══ */
.meeting-seat::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotateX(60deg);
    width: 55px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(2px);
}

/* Shadow reacts to states */
.meeting-seat.walking::before {
    animation: shadowStep 0.5s ease-in-out infinite;
}

@keyframes shadowStep {
    0%, 50%, 100% { transform: translateX(-50%) rotateX(60deg) scaleX(1); opacity: 0.8; }
    25% { transform: translateX(-50%) rotateX(60deg) scaleX(0.7); opacity: 0.5; }
    75% { transform: translateX(-50%) rotateX(60deg) scaleX(0.7); opacity: 0.5; }
}

.meeting-seat.idle::before {
    animation: shadowIdle 3s ease-in-out infinite;
}

@keyframes shadowIdle {
    0%, 100% { transform: translateX(-50%) rotateX(60deg) scaleX(1); }
    50% { transform: translateX(-50%) rotateX(60deg) scaleX(1.1); }
}

/* ═══ DESK INDICATOR — laptop emoji at desk ═══ */
.meeting-seat.idle::after {
    content: '💻';
    position: absolute;
    bottom: -22px;
    font-size: 16px;
    opacity: 0.7;
    animation: typing 0.8s ease-in-out infinite;
}

@keyframes typing {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-2px); opacity: 0.9; }
}

/* Toplantıda laptop kaldır */
.meeting-seat.at-table::after { display: none; }

/* ═══ AT-TABLE SITTING POSE — masada oturma pozu ═══ */
/* Bacaklar 90° bükülü, kollar masada, hafif sallanma */
.meeting-seat.at-table .chibi-leg-l {
    transform: translate(-4px, 50px) rotate(75deg) !important;
    animation: none !important;
}
.meeting-seat.at-table .chibi-leg-r {
    transform: translate(4px, 50px) rotate(-75deg) !important;
    animation: none !important;
}
/* Kollar masada — hafif hareket */
.meeting-seat.at-table .chibi-arm-l {
    animation: meetingArmL 3s ease-in-out infinite !important;
}
.meeting-seat.at-table .chibi-arm-r {
    animation: meetingArmR 3s ease-in-out infinite 0.5s !important;
}
/* Baş — konuşmayı izliyormuş gibi hafif dönme */
.meeting-seat.at-table .chibi-head {
    animation: meetingHeadLook 6s ease-in-out infinite;
}
/* Vücut hafif öne eğik (masaya doğru) */
.meeting-seat.at-table .chibi-body {
    transform: translate(0, -2px);
}
/* Nefes alma — hafif yukarı aşağı */
.meeting-seat.at-table .chibi-svg {
    animation: meetingSitBreathe 4s ease-in-out infinite !important;
}

@keyframes meetingArmL {
    0%, 100% { transform: translate(0, 36px) rotate(-12deg); }
    30% { transform: translate(0, 38px) rotate(-8deg); }
    70% { transform: translate(0, 36px) rotate(-15deg); }
}
@keyframes meetingArmR {
    0%, 100% { transform: translate(0, 36px) rotate(12deg); }
    30% { transform: translate(0, 38px) rotate(8deg); }
    70% { transform: translate(0, 36px) rotate(15deg); }
}
@keyframes meetingHeadLook {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    20% { transform: translateY(0) rotate(-3deg); }
    40% { transform: translateY(1px) rotate(2deg); }
    60% { transform: translateY(0) rotate(-1deg); }
    80% { transform: translateY(1px) rotate(1.5deg); }
}
@keyframes meetingSitBreathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
}

/* ═══ MEETING CHAIRS — masanın etrafında sandalyeler ═══ */
.meeting-seat.at-table::before {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 22px;
    background: linear-gradient(180deg, #37474f, #263238);
    border-radius: 6px 6px 3px 3px;
    z-index: -1;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* Sandalye arkalığı */
.meeting-seat.at-table .agent-seat-name::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 12px;
    background: linear-gradient(180deg, #455a64, #37474f);
    border-radius: 5px 5px 2px 2px;
    z-index: -2;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
}

/* ═══ SPEAKING AT TABLE — konuşanın vurgusu güçlü ═══ */
.meeting-seat.at-table.speaking .agent-avatar {
    filter: drop-shadow(0 0 18px rgba(0,214,143,0.7)) drop-shadow(0 4px 8px rgba(0,0,0,0.3)) !important;
}
.meeting-seat.at-table.speaking .chibi-arm-l {
    animation: speakGestureL 0.6s ease-in-out infinite !important;
}
.meeting-seat.at-table.speaking .chibi-arm-r {
    animation: speakGestureR 0.6s ease-in-out infinite 0.15s !important;
}
.meeting-seat.at-table.speaking .chibi-head {
    animation: speakHeadNod 0.8s ease-in-out infinite !important;
}

@keyframes speakGestureL {
    0%, 100% { transform: translate(0, 36px) rotate(-20deg); }
    50% { transform: translate(-2px, 34px) rotate(-30deg); }
}
@keyframes speakGestureR {
    0%, 100% { transform: translate(0, 36px) rotate(20deg); }
    50% { transform: translate(2px, 34px) rotate(30deg); }
}
@keyframes speakHeadNod {
    0%, 100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(-2px) rotate(-2deg); }
    60% { transform: translateY(1px) rotate(1deg); }
}

/* ═══ SIT-DOWN TRANSITION — masaya oturma animasyonu ═══ */
.meeting-seat.sitting-down .agent-avatar {
    animation: sitDownBounce 0.6s ease-out forwards !important;
}

@keyframes sitDownBounce {
    0% { transform: translateY(-15px) scale(1); }
    40% { transform: translateY(3px) scale(0.97, 1.03); }
    60% { transform: translateY(-4px) scale(1.01, 0.99); }
    80% { transform: translateY(1px) scale(0.99, 1.01); }
    100% { transform: translateY(0) scale(1); }
}

/* ═══ DEPTH SCALING — uzaktakiler küçük, yakındakiler büyük ═══ */
.meeting-seat.depth-far   { transform: scale(0.7);  z-index: 3; }
.meeting-seat.depth-mid   { transform: scale(0.9);  z-index: 5; }
.meeting-seat.depth-near  { transform: scale(1.1);  z-index: 7; }
.meeting-seat.depth-front { transform: scale(1.2);  z-index: 9; }
/* ═══════════════════════════════════════════ */
/* ═══ SVG CHIBI CHARACTER SYSTEM ═══════════ */
/* ═══════════════════════════════════════════ */

.agent-avatar {
    width: 80px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)) drop-shadow(0 2px 3px rgba(0,0,0,0.2));
    transition: transform 0.3s var(--ease);
}

.meeting-seat:hover .agent-avatar {
    transform: scale(1.15) translateY(-5px);
}

.agent-avatar.boss {
    width: 95px;
    height: 100px;
    filter: drop-shadow(0 0 14px rgba(255,215,0,0.6)) drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

/* ─── SVG Base — 3D Perspective ─── */
.chibi-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-style: preserve-3d;
    transform: perspective(200px) rotateX(5deg);
    transition: transform 0.3s var(--ease);
}

/* Ground shadow under character */
.meeting-seat::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 12px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.25) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(3px);
}

/* ─── Leg positioning (below body) ─── */
.chibi-leg {
    transform-origin: center top;
}
.chibi-leg-l { transform: translate(0, 55px); }
.chibi-leg-r { transform: translate(0, 55px); }

/* ─── Arm positioning (at shoulder level) ─── */
.chibi-arm {
    transform-origin: center top;
}
.chibi-arm-l { transform: translate(0, 36px); }
.chibi-arm-r { transform: translate(0, 36px); }

/* ═══ IDLE STATE — arms slightly swinging, breathing ═══ */
.meeting-seat.idle .chibi-arm-l {
    animation: svgArmIdleL 2s ease-in-out infinite;
}
.meeting-seat.idle .chibi-arm-r {
    animation: svgArmIdleR 2s ease-in-out infinite 1s;
}
.meeting-seat.idle .chibi-svg {
    animation: svgBreathe 3s ease-in-out infinite;
}

@keyframes svgArmIdleL {
    0%, 100% { transform: translate(0, 36px) rotate(0deg); }
    50% { transform: translate(0, 36px) rotate(-8deg); }
}
@keyframes svgArmIdleR {
    0%, 100% { transform: translate(0, 36px) rotate(0deg); }
    50% { transform: translate(0, 36px) rotate(8deg); }
}
@keyframes svgBreathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* ═══ SITTING POSE — at desk, legs bent, typing ═══ */
.meeting-seat.at-desk .chibi-leg-l {
    transform: translate(-4px, 50px) rotate(70deg) !important;
    animation: none !important;
}
.meeting-seat.at-desk .chibi-leg-r {
    transform: translate(4px, 50px) rotate(-70deg) !important;
    animation: none !important;
}
/* Typing arm animation */
.meeting-seat.at-desk.idle .chibi-arm-l {
    animation: svgTypingL 0.6s ease-in-out infinite !important;
}
.meeting-seat.at-desk.idle .chibi-arm-r {
    animation: svgTypingR 0.6s ease-in-out infinite 0.15s !important;
}
/* Subtle head micro-nod while typing */
.meeting-seat.at-desk.idle .chibi-head {
    animation: svgTypingHead 2s ease-in-out infinite;
}
/* Body slightly forward (leaning to desk) */
.meeting-seat.at-desk .chibi-body {
    transform: translate(0, -2px);
}

@keyframes svgTypingL {
    0%, 100% { transform: translate(0, 36px) rotate(-15deg); }
    30% { transform: translate(0, 38px) rotate(-10deg); }
    60% { transform: translate(0, 36px) rotate(-18deg); }
}
@keyframes svgTypingR {
    0%, 100% { transform: translate(0, 36px) rotate(15deg); }
    30% { transform: translate(0, 38px) rotate(10deg); }
    60% { transform: translate(0, 36px) rotate(18deg); }
}
@keyframes svgTypingHead {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(1px) rotate(-1deg); }
    50% { transform: translateY(0) rotate(0.5deg); }
    75% { transform: translateY(1px) rotate(-0.5deg); }
}

/* ═══ WALKING — arms and legs swing alternately ═══ */
.meeting-seat.walking .chibi-arm-l {
    animation: svgArmWalkL 0.4s ease-in-out infinite !important;
}
.meeting-seat.walking .chibi-arm-r {
    animation: svgArmWalkR 0.4s ease-in-out infinite !important;
}
.meeting-seat.walking .chibi-leg-l {
    animation: svgLegWalkL 0.4s ease-in-out infinite !important;
}
.meeting-seat.walking .chibi-leg-r {
    animation: svgLegWalkR 0.4s ease-in-out infinite !important;
}
.meeting-seat.walking .chibi-svg {
    animation: svgWalkBounce 0.4s ease-in-out infinite !important;
}
.meeting-seat.walking .chibi-head {
    animation: svgHeadBob 0.4s ease-in-out infinite;
}

@keyframes svgArmWalkL {
    0%, 100% { transform: translate(0, 36px) rotate(35deg); }
    50% { transform: translate(0, 36px) rotate(-35deg); }
}
@keyframes svgArmWalkR {
    0%, 100% { transform: translate(0, 36px) rotate(-35deg); }
    50% { transform: translate(0, 36px) rotate(35deg); }
}
@keyframes svgLegWalkL {
    0%, 100% { transform: translate(0, 55px) rotate(-25deg); }
    50% { transform: translate(0, 55px) rotate(25deg); }
}
@keyframes svgLegWalkR {
    0%, 100% { transform: translate(0, 55px) rotate(25deg); }
    50% { transform: translate(0, 55px) rotate(-25deg); }
}
@keyframes svgWalkBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(-2deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-6px) rotate(2deg); }
}
@keyframes svgHeadBob {
    0%, 50%, 100% { transform: translateY(0); }
    25% { transform: translateY(-2px); }
    75% { transform: translateY(-2px); }
}

/* ═══ SPEAKING — glow pulse ═══ */
.meeting-seat.speaking .agent-avatar {
    filter: drop-shadow(0 0 15px rgba(0,214,143,0.6)) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.meeting-seat.speaking .chibi-svg {
    animation: svgSpeakPulse 0.8s ease-in-out infinite !important;
}
@keyframes svgSpeakPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.05); }
}

/* ─── Name tags ─── */
.boss-name {
    color: #d4a017 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

.agent-seat-name {
    font-size: 9px;
    font-weight: 700;
    color: rgba(30,30,60,0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    max-width: 80px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.6);
    padding: 2px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

/* ═══ DESK POSITIONS — agent'lar ofiste dağılmış çalışıyor ═══ */
.seat-0.at-desk  { top: 25px;  left: 48%;  }
.seat-1.at-desk  { top: 100px; left: 10%; }
.seat-2.at-desk  { top: 100px; left: 86%; }
.seat-3.at-desk  { top: 220px; left: 4%; }
.seat-4.at-desk  { top: 220px; left: 93%; }
.seat-5.at-desk  { top: 380px; left: 6%; }
.seat-6.at-desk  { top: 380px; left: 90%; }
.seat-7.at-desk  { top: 540px; left: 12%; }
.seat-8.at-desk  { top: 540px; left: 82%; }
.seat-9.at-desk  { top: 680px; left: 32%; }
.seat-10.at-desk { top: 680px; left: 62%; }

/* ═══ MEETING POSITIONS — toplantı masası etrafında ═══ */
.seat-0.at-table  { top: 230px; left: 48%;  transform: translateX(-50%); z-index: 8; }
.seat-1.at-table  { top: 285px; left: 72%; }
.seat-2.at-table  { top: 285px; left: 22%; }
.seat-3.at-table  { top: 370px; left: 80%; }
.seat-4.at-table  { top: 370px; left: 14%; }
.seat-5.at-table  { top: 470px; left: 78%; }
.seat-6.at-table  { top: 470px; left: 16%; }
.seat-7.at-table  { top: 560px; left: 70%; }
.seat-8.at-table  { top: 560px; left: 25%; }
.seat-9.at-table  { top: 620px; left: 56%; }
.seat-10.at-table { top: 620px; left: 38%; }

/* ─── Status indicator dot ─── */
.agent-status-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid #0d1117;
    z-index: 6;
}

.agent-status-dot.busy {
    background: #f59e0b;
    animation: busyPulse 1.5s ease-in-out infinite;
}

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

/* ─── Konuşma Baloncukları ─── */
.speech-bubbles-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.speech-bubble {
    position: absolute;
    max-width: 200px;
    padding: 8px 12px;
    background: rgba(20,20,45,0.95);
    border: 1px solid rgba(124,92,252,0.3);
    border-radius: 12px 12px 12px 2px;
    font-size: 11px;
    color: var(--text-1);
    line-height: 1.4;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    animation: bubbleIn 0.35s var(--ease);
    pointer-events: auto;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 10px;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(20,20,45,0.95);
}

.speech-bubble .bubble-agent {
    font-size: 9px;
    font-weight: 800;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

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

/* ─── Canlı Sohbet Akışı ─── */
.meeting-chat-stream {
    max-height: 350px;
    overflow-y: auto;
    background: #060610;
    border-radius: var(--radius-sm);
    padding: 16px;
    border: 1px solid var(--border);
}

.chat-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-3);
}

.chat-placeholder-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 12px;
}

.chat-placeholder p {
    font-size: 13px;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

.chat-msg {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    animation: chatSlideIn 0.3s var(--ease);
}

@keyframes chatSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.chat-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e1e3f, #2a2a50);
    border: 1px solid var(--border-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
}

.chat-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat-msg-content { flex: 1; min-width: 0; }

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

.chat-msg-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--purple);
}

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

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

/* ═══════════════════════════════════════════════════════════
   SYSTEM TAB — Health Monitor
   ═══════════════════════════════════════════════════════════ */
.nav-badge-health {
    margin-left: auto;
    font-size: 10px;
    color: var(--green);
    animation: pulse 2s infinite;
}

.system-health-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.system-health-badge.ok {
    background: var(--green-glow);
    color: var(--green);
}

.system-health-badge.warning {
    background: var(--amber-glow);
    color: var(--amber);
}

.system-health-badge.critical {
    background: var(--red-glow);
    color: var(--red);
    animation: pulse 1.5s infinite;
}