:root {
    --bg: #f4f7fb;
    --card: #ffffff;
    --ink: #1f2937;
    --muted: #64748b;
    --line: #dbe4f0;
    --primary: #1d4ed8;
    --primary-soft: #e8f0ff;
    --danger: #dc2626;
    --success: #15803d;
    --warning: #b45309;
    --shadow: 0 16px 40px rgba(15, 23, 42, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--primary); text-decoration: none; }
.topbar { min-height: 70px; background: #0f172a; color: white; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; position: sticky; top: 0; z-index: 20; box-shadow: 0 8px 18px rgba(2, 6, 23, .18); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #2563eb, #06b6d4); font-weight: 800; letter-spacing: -1px; }
.brand small { display: block; color: #cbd5e1; margin-top: 2px; font-size: 12px; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.main-nav a { color: #e2e8f0; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.main-nav a:hover, .main-nav a.active { background: rgba(255,255,255,.12); color: #fff; }
.nav-toggle { display: none; border: 0; background: rgba(255,255,255,.12); color: #fff; padding: 8px 11px; border-radius: 10px; font-size: 20px; }
.page { width: min(1240px, calc(100% - 28px)); margin: 22px auto 40px; }
.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 24px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card h1, .card h2, .card h3 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }
.stat { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.stat strong { font-size: 34px; display: block; color: #0f172a; }
.stat span { color: var(--muted); font-size: 13px; }
.stat-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.form-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-bottom: 12px; }
.field { grid-column: span 6; }
.field.full { grid-column: span 12; }
label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 13px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; font: inherit; background: #fff; color: var(--ink); }
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(29, 78, 216, .13); border-color: var(--primary); }
button, .btn { border: 0; border-radius: 11px; padding: 10px 14px; font-weight: 700; cursor: pointer; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; }
.btn.secondary, button.secondary { background: #e2e8f0; color: #0f172a; }
.btn.danger, button.danger { background: var(--danger); }
.btn.success, button.success { background: var(--success); }
.btn.warning, button.warning { background: var(--warning); }
.btn.ghost, button.ghost { background: transparent; color: var(--primary); border: 1px solid var(--line); }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
th, td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f8fafc; color: #334155; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: #fbfdff; }
.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #e2e8f0; color: #334155; }
.badge.active, .badge.completed, .badge.success { background: #dcfce7; color: #166534; }
.badge.queued, .badge.ringing, .badge.warning { background: #fef3c7; color: #92400e; }
.badge.in_progress { background: #dbeafe; color: #1e40af; }
.badge.on_hold { background: #ede9fe; color: #5b21b6; }
.badge.cancelled, .badge.missed, .badge.inactive, .badge.danger { background: #fee2e2; color: #991b1b; }
.alert { border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--line); background: #fff; }
.alert.success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.alert.error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.alert.info { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
.help { color: var(--muted); font-size: 13px; line-height: 1.45; }
.login-wrap { min-height: calc(100vh - 130px); display: grid; place-items: center; }
.login-card { width: min(440px, 100%); }
.console-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 330px; gap: 16px; }
.phone-panel { background: #0f172a; color: white; border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.phone-screen { background: #020617; border: 1px solid rgba(255,255,255,.12); padding: 16px; border-radius: 15px; margin-bottom: 14px; min-height: 120px; }
.call-number { font-size: 24px; font-weight: 800; word-break: break-word; }
.call-timer { margin-top: 8px; font-size: 34px; font-weight: 800; color: #22c55e; }
.call-status { color: #cbd5e1; }
.phone-panel button { width: 100%; margin-bottom: 8px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tab-btn { background: #e2e8f0; color: #0f172a; }
.tab-btn.active { background: var(--primary); color: #fff; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.profile-pop { border-left: 5px solid var(--primary); }
.empty-state { border: 2px dashed var(--line); border-radius: 16px; padding: 26px; text-align: center; color: var(--muted); background: #fbfdff; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.script-box { background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; padding: 14px; line-height: 1.5; }
@media (max-width: 980px) {
    .grid, .form-row, .console-grid, .kpi-row { grid-template-columns: 1fr; }
    .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12, .field, .field.full { grid-column: span 1; }
    .nav-toggle { display: block; }
    .main-nav { display: none; position: absolute; left: 12px; right: 12px; top: 68px; background: #111827; padding: 12px; border-radius: 14px; box-shadow: var(--shadow); }
    .nav-open .main-nav { display: grid; }
    .topbar { align-items: flex-start; }
}
@media print {
    .topbar, .footer, .no-print, button, .btn { display: none !important; }
    body { background: white; }
    .page { width: 100%; margin: 0; }
    .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* Professional landing and live simulation enhancements */
.page.landing-page { width: 100%; margin: 0; }
.landing-shell { background: radial-gradient(circle at top left, rgba(37, 99, 235, .25), transparent 34%), linear-gradient(135deg, #020617 0%, #0f172a 47%, #172554 100%); color: #fff; min-height: calc(100vh - 70px); }
.landing-inner { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 54px 0; }
.landing-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: center; }
.landing-kicker { display:inline-flex; gap:8px; align-items:center; padding:7px 11px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.08); color:#bfdbfe; font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.landing-title { font-size: clamp(34px, 5vw, 64px); line-height: .98; letter-spacing: -.055em; margin: 18px 0; }
.landing-copy { color: #dbeafe; font-size: 18px; line-height: 1.62; max-width: 700px; }
.landing-actions { display:flex; flex-wrap:wrap; gap:12px; margin: 26px 0; }
.landing-actions .btn { min-height: 48px; padding-inline: 20px; }
.landing-actions .btn.secondary { background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); }
.landing-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.landing-stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 16px; }
.landing-stat strong { display:block; font-size: 24px; color:#fff; }
.landing-stat span { display:block; color:#cbd5e1; font-size: 13px; margin-top:4px; }
.crm-preview { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 26px; padding: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.35); backdrop-filter: blur(16px); }
.crm-window { background:#f8fafc; color:#0f172a; border-radius:20px; overflow:hidden; }
.crm-window-top { background:#0f172a; color:#e2e8f0; display:flex; justify-content:space-between; gap:12px; padding:12px 14px; font-size:13px; }
.crm-window-body { padding:16px; display:grid; gap:12px; }
.softphone-demo { display:grid; grid-template-columns: 120px 1fr; gap:12px; }
.softphone-card { background:#020617; color:#fff; border-radius:16px; padding:14px; }
.softphone-card .timer { color:#22c55e; font-size:28px; font-weight:900; margin-top:6px; }
.profile-demo { background:#fff; border:1px solid #dbe4f0; border-left:5px solid #2563eb; border-radius:16px; padding:14px; }
.demo-metrics { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.demo-metrics div { background:#fff; border:1px solid #dbe4f0; border-radius:14px; padding:12px; }
.landing-section { width:min(1180px, calc(100% - 28px)); margin:0 auto; padding: 38px 0; }
.feature-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { background:#fff; border:1px solid var(--line); border-radius: 20px; padding:20px; box-shadow: var(--shadow); }
.feature-card strong { display:block; margin-bottom:8px; color:#0f172a; }
.feature-card p { margin:0; color:var(--muted); line-height:1.5; font-size:14px; }
.pro-login { min-height: calc(100vh - 118px); display:grid; grid-template-columns: 1fr 440px; gap:28px; align-items:center; }
.pro-login-panel { background:linear-gradient(135deg, #0f172a, #1e3a8a); color:#fff; border-radius:26px; padding:34px; box-shadow: var(--shadow); }
.pro-login-panel h1 { font-size:42px; line-height:1; margin:0 0 14px; }
.pro-login-panel p { color:#dbeafe; line-height:1.6; }
.login-card.enhanced { width:100%; }
.queue-cards { display:grid; gap:10px; margin-top: 10px; }
.queue-card { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; }
.queue-card strong { display:block; color:#0f172a; }
.queue-card small { color: var(--muted); }
.empty-state.compact { padding: 14px; font-size: 13px; }
.call-room { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; }
.call-room-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:#0f172a; color:#fff; }
.call-room-head .meta { color:#cbd5e1; font-size:12px; margin-top:2px; }
.call-room-tools { display:flex; gap:8px; flex-wrap:wrap; }
.call-room-body { height: 360px; overflow:auto; padding:16px; background:linear-gradient(#f8fafc,#eef4ff); }
.message-row { display:flex; margin: 0 0 10px; }
.message-row.client { justify-content:flex-start; }
.message-row.agent, .message-row.teacher, .message-row.admin { justify-content:flex-end; }
.message-bubble { max-width:78%; border:1px solid var(--line); border-radius:16px; padding:10px 12px; background:#fff; box-shadow: 0 6px 16px rgba(15,23,42,.05); }
.message-row.agent .message-bubble, .message-row.teacher .message-bubble, .message-row.admin .message-bubble { background:#dbeafe; border-color:#bfdbfe; }
.message-row.system { justify-content:center; }
.message-row.system .message-bubble { background:#111827; color:#e2e8f0; max-width:90%; font-size:13px; }
.message-name { font-weight:800; font-size:12px; margin-bottom:4px; color:#334155; }
.message-row.system .message-name { color:#cbd5e1; }
.message-text { white-space:pre-wrap; line-height:1.45; }
.message-time { font-size:11px; color:#64748b; margin-top:4px; }
.message-row.system .message-time { color:#94a3b8; }
.call-room-compose { display:grid; grid-template-columns: 1fr auto; gap:10px; padding:12px; border-top:1px solid var(--line); background:#fff; }
.call-room-compose textarea { min-height: 54px; }
.quick-lines { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.quick-lines button { min-height:32px; padding:7px 10px; font-size:12px; }
.live-status { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.live-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:#eff6ff; color:#1e40af; font-weight:800; font-size:12px; }
.live-dot { width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.14); }
.call-disabled { opacity:.62; pointer-events:none; }
@media (max-width: 980px) {
    .landing-hero, .feature-grid, .pro-login { grid-template-columns:1fr; }
    .landing-stats, .demo-metrics { grid-template-columns:1fr; }
    .softphone-demo { grid-template-columns:1fr; }
    .call-room-body { height: 320px; }
    .message-bubble { max-width: 92%; }
    .call-room-compose { grid-template-columns:1fr; }
}

/* Actual browser audio/video call layer */
.media-call-panel { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: #f8fafc; margin-bottom: 14px; }
.media-call-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.media-call-head .meta { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.4; }
.media-status { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; background: #e2e8f0; color: #334155; }
.media-status.info { background: #dbeafe; color: #1e40af; }
.media-status.success { background: #dcfce7; color: #166534; }
.media-status.warning { background: #fef3c7; color: #92400e; }
.media-status.error { background: #fee2e2; color: #991b1b; }
.media-video-grid { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; align-items: stretch; }
.media-video-card { position: relative; min-height: 230px; border-radius: 16px; overflow: hidden; background: #020617; border: 1px solid #111827; display: grid; place-items: center; }
.media-video-card.local { min-height: 140px; }
.media-video-card video { width: 100%; height: 100%; object-fit: cover; background: #020617; }
.media-video-card::before { content: 'Waiting for media'; color: #94a3b8; font-weight: 800; font-size: 13px; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.media-video-card.active::before { content: ''; display: none; }
.media-video-card span { position: absolute; left: 10px; bottom: 10px; background: rgba(15, 23, 42, .78); color: #fff; padding: 5px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.media-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.media-controls button { min-height: 36px; padding: 8px 11px; }
@media (max-width: 980px) {
    .media-call-head { display: grid; }
    .media-status { white-space: normal; }
    .media-video-grid { grid-template-columns: 1fr; }
    .media-video-card, .media-video-card.local { min-height: 210px; }
}

.media-call-panel .media-controls button:disabled { opacity: .48; cursor: not-allowed; }
.media-video-card.remote { min-height: 260px; }
.media-video-card.local video { transform: scaleX(-1); }
.media-call-panel .help { line-height: 1.45; }
.media-call-panel .media-status { max-width: 100%; }
@media (max-width: 980px) {
    .media-video-grid { grid-template-columns: 1fr; }
    .media-video-card.remote, .media-video-card.local { min-height: 220px; }
}


/* Automatic client-to-agent video call activation */
.auto-call-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #064e3b;
    color: #dcfce7;
    border: 1px solid rgba(187, 247, 208, .22);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ringing-card {
    border-color: #f59e0b;
    background: linear-gradient(90deg, #fffbeb, #ffffff);
    animation: crmRingPulse 1.25s ease-in-out infinite;
}
@keyframes crmRingPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
    50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, .16); }
}

/* v8 actual ringing call sound and visual state */
.ring-sound-panel,
.ringback-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    margin: 0 0 10px;
}
.ring-sound-panel strong,
.ringback-panel strong { display: block; font-size: 13px; }
.ring-sound-panel small,
.ringback-panel small { display: block; color: #64748b; font-size: 11px; line-height: 1.35; margin-top: 2px; }
.ring-sound-panel .compact-btn,
.ringback-panel .compact-btn { min-height: 34px; padding: 7px 10px; font-size: 12px; white-space: nowrap; }
.ring-sound-panel.ringing,
.ringback-panel.ringing {
    border-color: #f59e0b;
    background: linear-gradient(90deg, #fffbeb, #ffffff);
    animation: crmRingPanelPulse 1s ease-in-out infinite;
}
.ring-sound-panel.blocked,
.ringback-panel.blocked {
    border-color: #f97316;
    background: #fff7ed;
}
.ringback-panel { display: none; margin-bottom: 12px; }
.ringback-panel.show,
.ringback-panel.ringing,
.ringback-panel.blocked,
.ringback-panel.connected { display: grid; }
.ringback-panel.connected {
    border-color: #86efac;
    background: #f0fdf4;
}
.phone-screen.ringing {
    border-color: #fbbf24;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, .18), 0 20px 45px rgba(245, 158, 11, .18);
    animation: crmPhoneRingShake .18s linear infinite;
}
.auto-call-banner.ringing {
    background: #7c2d12;
    color: #ffedd5;
    border-color: rgba(251, 191, 36, .45);
    animation: crmRingPanelPulse 1s ease-in-out infinite;
}
body.agent-call-ringing .topbar {
    box-shadow: 0 6px 24px rgba(245, 158, 11, .24);
}
body.agent-call-ringing #callerNumber {
    color: #facc15;
}
@keyframes crmRingPanelPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(245, 158, 11, 0); transform: translateY(0); }
    50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, .18); transform: translateY(-1px); }
}
@keyframes crmPhoneRingShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}
@media (max-width: 720px) {
    .ring-sound-panel,
    .ringback-panel { grid-template-columns: 1fr; }
    .ring-sound-panel .compact-btn,
    .ringback-panel .compact-btn { width: 100%; }
}

/* v9 streamlined Agent Console navigation */
.agent-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 20px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0f172a, #172554 62%, #1d4ed8);
    color: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .20);
}
.agent-hero-card h1 {
    margin: 8px 0 6px;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -.045em;
    line-height: 1;
}
.agent-hero-card p {
    margin: 0;
    color: #dbeafe;
    max-width: 850px;
    line-height: 1.55;
}
.agent-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.agent-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.agent-hero-actions .btn,
.agent-hero-actions button {
    min-height: 44px;
    white-space: nowrap;
}
.agent-hero-actions .btn.secondary {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
}
.console-grid {
    grid-template-columns: 280px minmax(0, 1fr) 310px;
    align-items: start;
}
.phone-panel,
.agent-side-panel {
    position: sticky;
    top: 88px;
}
.phone-panel {
    padding: 16px;
}
.phone-mini-profile {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: center;
    margin: 0 0 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}
.phone-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #1d4ed8;
    font-size: 18px;
}
.phone-mini-profile strong {
    display: block;
    font-size: 13px;
    color: #fff;
    line-height: 1.25;
}
.phone-mini-profile small {
    display: block;
    margin-top: 2px;
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1.3;
}
.agent-workflow-card {
    margin-top: 10px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(15,23,42,.65);
    border: 1px solid rgba(148,163,184,.32);
    color: #e2e8f0;
}
.agent-workflow-card strong {
    display: block;
    margin-bottom: 8px;
}
.agent-workflow-card ol {
    margin: 0;
    padding-left: 20px;
    line-height: 1.48;
    font-size: 13px;
}
.agent-main-panel {
    padding: 16px;
}
.agent-command-bar {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    background: linear-gradient(90deg, #eff6ff, #ffffff);
    box-shadow: 0 10px 24px rgba(29,78,216,.08);
}
.command-status {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.command-status strong,
.command-status small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.command-status small {
    color: var(--muted);
    margin-top: 2px;
    font-size: 12px;
}
.command-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.command-metrics span {
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    min-width: 0;
}
.command-metrics b,
.command-metrics small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.command-metrics b {
    font-size: 13px;
    color: #0f172a;
}
.command-metrics small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
}
.command-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.compact-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
}
.agent-empty-state {
    min-height: 340px;
    display: grid;
    align-content: center;
}
.active-customer-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff;
    margin-bottom: 12px;
}
.active-customer-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.active-avatar {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 20px;
    flex: 0 0 auto;
}
.active-customer-main strong,
.active-customer-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.active-customer-main small {
    color: var(--muted);
    margin-top: 3px;
    font-size: 12px;
}
.active-customer-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.agent-tabs {
    position: sticky;
    top: 84px;
    z-index: 5;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
}
.agent-tabs .tab-btn {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 12px;
}
.agent-side-panel h2 {
    margin-bottom: 12px;
}
.agent-side-panel select,
.agent-side-panel textarea {
    margin-bottom: 10px;
}
.agent-side-actions {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}
.agent-side-actions button {
    width: 100%;
}
.shortcut-help {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed var(--line);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
.shortcut-help strong {
    color: #0f172a;
}
.media-call-panel {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.media-video-card.remote {
    min-height: 320px;
}
.call-room-body {
    height: 300px;
}
@media (max-width: 1180px) {
    .console-grid {
        grid-template-columns: 250px minmax(0, 1fr);
    }
    .agent-side-panel {
        grid-column: 1 / -1;
        position: static;
    }
    .agent-side-panel {
        display: grid;
        grid-template-columns: minmax(240px, .8fr) minmax(260px, 1fr) minmax(220px, .7fr);
        gap: 12px;
        align-items: start;
    }
    .agent-side-panel h2,
    .agent-side-panel h3,
    .agent-side-panel label,
    .agent-side-panel select,
    .agent-side-panel textarea,
    .agent-side-actions,
    .shortcut-help,
    .agent-side-panel .script-box {
        margin-top: 0;
    }
}
@media (max-width: 980px) {
    .agent-hero-card,
    .active-customer-strip,
    .agent-command-bar {
        grid-template-columns: 1fr;
    }
    .agent-hero-actions,
    .active-customer-tools,
    .command-actions {
        justify-content: flex-start;
    }
    .phone-panel,
    .agent-tabs {
        position: static;
    }
    .agent-side-panel {
        display: block;
    }
    .command-metrics {
        grid-template-columns: 1fr;
    }
    .media-video-card.remote {
        min-height: 240px;
    }
}
@media (max-width: 720px) {
    .agent-hero-card {
        padding: 18px;
        border-radius: 20px;
    }
    .agent-hero-actions .btn,
    .agent-hero-actions button,
    .active-customer-tools button,
    .command-actions button {
        width: 100%;
    }
}

/* v10 professional full-screen Agent Command Center */
body.agent-console-body {
    background: #0b1220;
    overflow-x: hidden;
}
body.agent-console-body .topbar {
    min-height: 58px;
    padding: 8px 18px;
    background: rgba(15, 23, 42, .96);
    backdrop-filter: blur(14px);
}
body.agent-console-body .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}
body.agent-console-body .main-nav a {
    padding: 8px 11px;
}
body.agent-console-body .footer {
    display: none;
}
.page.agent-console-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px;
    min-height: calc(100vh - 58px);
    background:
        radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .22), transparent 28%),
        radial-gradient(circle at 92% 4%, rgba(14, 165, 233, .16), transparent 30%),
        linear-gradient(180deg, #0b1220 0%, #101827 48%, #eef4fb 48%, #eef4fb 100%);
}
.agent-console-page .agent-pro-hero {
    min-height: 94px;
    margin: 0 0 10px;
    padding: 16px 18px;
    border: 1px solid rgba(191, 219, 254, .16);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,58,138,.92) 58%, rgba(37,99,235,.92)),
        radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 40%);
    box-shadow: 0 18px 45px rgba(2, 6, 23, .22);
}
.agent-console-page .agent-pro-hero h1 {
    font-size: clamp(24px, 2.4vw, 36px);
    margin: 6px 0 5px;
}
.agent-console-page .agent-pro-hero p {
    max-width: 980px;
    font-size: 14px;
}
.agent-console-page .agent-hero-actions .btn,
.agent-console-page .agent-hero-actions button {
    min-height: 40px;
    border-radius: 12px;
}
.agent-ops-strip {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr .78fr .85fr;
    gap: 10px;
    margin-bottom: 10px;
}
.agent-ops-tile {
    position: relative;
    overflow: hidden;
    min-height: 82px;
    padding: 14px 15px;
    border: 1px solid rgba(203, 213, 225, .76);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
}
.agent-ops-tile::after {
    content: '';
    position: absolute;
    right: -32px;
    top: -42px;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .08);
}
.agent-ops-tile.primary {
    background: linear-gradient(135deg, #172554, #1d4ed8);
    color: #fff;
    border-color: rgba(191, 219, 254, .22);
}
.agent-ops-tile span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .085em;
}
.agent-ops-tile.primary span {
    color: #bfdbfe;
}
.agent-ops-tile strong,
.agent-ops-tile small {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agent-ops-tile strong {
    color: #0f172a;
    font-size: 19px;
    letter-spacing: -.02em;
}
.agent-ops-tile.primary strong {
    color: #fff;
}
.agent-ops-tile small {
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
}
.agent-ops-tile.primary small {
    color: #dbeafe;
}
.agent-console-page .agent-pro-grid {
    display: grid;
    grid-template-columns: 300px minmax(720px, 1fr) 370px;
    gap: 12px;
    align-items: stretch;
    min-height: calc(100vh - 260px);
}
.agent-console-page .phone-panel,
.agent-console-page .agent-workspace-panel,
.agent-console-page .agent-insights-panel {
    height: calc(100vh - 250px);
    min-height: 610px;
    margin-bottom: 0;
    overflow: auto;
    scrollbar-width: thin;
}
.agent-console-page .agent-softphone-panel {
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 22px;
    background:
        linear-gradient(180deg, #111827 0%, #0f172a 52%, #020617 100%);
    box-shadow: 0 20px 50px rgba(2, 6, 23, .26);
}
.agent-console-page .phone-screen {
    min-height: 118px;
    padding: 17px;
    border-radius: 18px;
    border-color: rgba(96, 165, 250, .2);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .22), transparent 44%),
        #020617;
}
.agent-console-page .call-number {
    font-size: clamp(20px, 1.6vw, 28px);
}
.agent-console-page .call-timer {
    font-size: clamp(30px, 2.2vw, 42px);
}
.agent-console-page .phone-panel button {
    min-height: 40px;
    border-radius: 13px;
    box-shadow: 0 9px 18px rgba(2, 6, 23, .13);
}
.agent-console-page .agent-workspace-panel {
    padding: 14px;
    border-radius: 22px;
    border-color: rgba(203, 213, 225, .88);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
}
.agent-console-page .agent-insights-panel {
    border-radius: 22px;
    border-color: rgba(203, 213, 225, .88);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
}
.agent-console-page .agent-command-bar {
    position: sticky;
    top: 0;
    z-index: 9;
    grid-template-columns: minmax(250px, 1fr) minmax(330px, 1.2fr) auto;
    border: 1px solid rgba(59, 130, 246, .24);
    background: linear-gradient(90deg, #eff6ff, #ffffff 70%);
}
.agent-console-page .active-customer-strip {
    background: linear-gradient(90deg, #ffffff, #f8fbff);
    border-color: rgba(148, 163, 184, .6);
}
.agent-console-page .agent-tabs {
    top: 0;
    margin-bottom: 10px;
    border-radius: 17px;
    background: rgba(248, 250, 252, .96);
}
.agent-console-page .agent-tabs .tab-btn {
    flex: 1 1 auto;
    min-width: max-content;
    min-height: 38px;
    border-radius: 12px;
}
.agent-console-page #activePanel {
    min-height: 0;
}
.agent-console-page .tab-pane.active {
    animation: agentPanelIn .16s ease-out;
}
@keyframes agentPanelIn {
    from { opacity: .45; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.agent-console-page .media-call-panel {
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, .10);
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 32%),
        linear-gradient(180deg, #f8fafc, #ffffff);
}
.agent-console-page .media-call-head {
    align-items: center;
}
.agent-console-page .media-video-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr);
    gap: 10px;
}
.agent-console-page .media-video-card {
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, .32);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 38px rgba(2, 6, 23, .18);
}
.agent-console-page .media-video-card.remote {
    min-height: clamp(360px, 45vh, 620px);
}
.agent-console-page .media-video-card.local {
    min-height: clamp(220px, 28vh, 380px);
}
.agent-console-page .media-video-card span {
    left: 14px;
    bottom: 14px;
    padding: 7px 10px;
    background: rgba(15, 23, 42, .82);
    backdrop-filter: blur(8px);
}
.agent-console-page .media-controls {
    padding: 10px;
    border-radius: 16px;
    background: #f1f5f9;
}
.agent-console-page .media-controls button {
    min-height: 38px;
}
.agent-console-page .call-room {
    border-radius: 20px;
}
.agent-console-page .call-room-body {
    height: clamp(230px, 28vh, 360px);
}
.agent-console-page .quick-lines {
    padding-bottom: 6px;
}
.agent-console-page .quick-lines button {
    border: 1px solid rgba(148, 163, 184, .45);
}
.agent-console-page .agent-insights-panel h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #0f172a;
}
.agent-console-page .agent-insights-panel h2::before {
    content: '◎';
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
}
.agent-console-page .agent-insights-panel .script-box {
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc, #ffffff);
}
.agent-console-page .agent-side-actions {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0), #ffffff 28%);
}
.agent-console-page .table-wrap,
.agent-console-page .call-room-body,
.agent-console-page .agent-workspace-panel,
.agent-console-page .agent-insights-panel,
.agent-console-page .phone-panel {
    scrollbar-color: rgba(100, 116, 139, .45) transparent;
}
@media (min-width: 1800px) {
    .agent-console-page .agent-pro-grid {
        grid-template-columns: 330px minmax(900px, 1fr) 420px;
    }
    .agent-console-page .media-video-card.remote {
        min-height: clamp(440px, 50vh, 720px);
    }
}
@media (max-width: 1360px) {
    .agent-console-page .agent-pro-grid {
        grid-template-columns: 280px minmax(0, 1fr) 330px;
    }
    .agent-console-page .phone-panel,
    .agent-console-page .agent-workspace-panel,
    .agent-console-page .agent-insights-panel {
        min-height: 560px;
    }
    .agent-console-page .media-video-grid {
        grid-template-columns: minmax(0, 1fr) 190px;
    }
}
@media (max-width: 1180px) {
    .agent-ops-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .agent-console-page .agent-pro-grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }
    .agent-console-page .agent-insights-panel {
        grid-column: 1 / -1;
        height: auto;
        min-height: 0;
    }
}
@media (max-width: 980px) {
    .page.agent-console-page {
        padding: 10px;
        background: #eef4fb;
    }
    .agent-console-page .agent-pro-hero,
    .agent-ops-strip,
    .agent-console-page .agent-pro-grid,
    .agent-console-page .agent-command-bar,
    .agent-console-page .active-customer-strip {
        grid-template-columns: 1fr;
    }
    .agent-console-page .phone-panel,
    .agent-console-page .agent-workspace-panel,
    .agent-console-page .agent-insights-panel {
        height: auto;
        min-height: 0;
        position: static;
    }
    .agent-console-page .media-video-grid {
        grid-template-columns: 1fr;
    }
    .agent-console-page .media-video-card.remote,
    .agent-console-page .media-video-card.local {
        min-height: 260px;
    }
    .agent-console-page .agent-command-bar {
        position: static;
    }
}
@media (max-width: 720px) {
    .agent-ops-strip {
        grid-template-columns: 1fr;
    }
    .agent-console-page .agent-pro-hero {
        border-radius: 18px;
    }
}