/* ================================================================
 * admin.layout.css
 * AI 自动外呼升级 v3 - 设计令牌 + 三栏骨架 + 拨号区 + Copilot
 * 日期: 2026-09-30
 * 配套: admin.copilot.v3.js / admin.dialer.v3.js / admin.calls.v3.js
 * ================================================================ */

/* ---------- 设计令牌 ---------- */
:root{--c-primary:#6366F1;--c-primary-hover:#4F46E5;--c-primary-soft:#EEF2FF;--c-success:#22C55E;--c-warn:#F59E0B;--c-danger:#EF4444;--c-neutral:#94A3B8;--c-score-high:#22C55E;--c-score-mid:#F59E0B;--c-score-low:#94A3B8;--c-sent-2:#22C55E;--c-sent-1:#86EFAC;--c-sent0:#E5E7EB;--c-sent-1n:#FCA5A5;--c-sent-2n:#EF4444;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--r-sm:6px;--r-md:10px;--r-lg:14px;--ff:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,Roboto,sans-serif;--sh-sm:0 1px 2px rgba(15,23,42,.06);--sh-md:0 4px 14px rgba(15,23,42,.08);--sh-lg:0 12px 36px rgba(15,23,42,.14)}

/* ---------- TopBar ---------- */
.v3-topbar{position:sticky;top:0;z-index:100;height:64px;display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-6);background:#fff;border-bottom:1px solid #E2E8F0;font-family:var(--ff)}
.v3-topbar .brand{font-weight:700;font-size:16px;color:#0F172A;display:flex;align-items:center;gap:8px}
.v3-topbar .brand .dot{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--c-primary),#A78BFA);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
.v3-topbar .search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-md);background:#F1F5F9;color:#64748B;font-size:13px}
.v3-topbar .actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.v3-topbar .btn-icon{height:36px;padding:0 14px;border-radius:var(--r-md);border:1px solid #E2E8F0;background:#fff;color:#334155;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.v3-topbar .btn-icon:hover{background:#F8FAFC}
.v3-topbar .btn-icon.primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.v3-topbar .btn-icon.primary:hover{background:var(--c-primary-hover)}
.v3-status{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:#F8FAFC;font-size:12px;color:#475569}
.v3-status .led{width:8px;height:8px;border-radius:50%;background:var(--c-success);box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:v3-pulse 2s infinite}
.v3-status.warn .led{background:var(--c-warn)}
.v3-status.danger .led{background:var(--c-danger);animation:none}
.v3-status .ms{color:#94A3B8;font-size:11px;margin-left:4px}
@keyframes v3-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ---------- 三栏骨架 ---------- */
.v3-shell{display:grid;grid-template-columns:220px 1fr 380px;gap:0;min-height:calc(100vh - 64px);font-family:var(--ff)}
.v3-shell.copilot-collapsed{grid-template-columns:220px 1fr 64px}
.v3-shell.no-sidenav{grid-template-columns:1fr 380px}
.v3-sidenav{background:#F8FAFC;border-right:1px solid #E2E8F0;padding:var(--sp-4) var(--sp-3);overflow-y:auto}
.v3-sidenav .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);color:#475569;font-size:13px;cursor:pointer;text-decoration:none;transition:all .12s}
.v3-sidenav .nav-item:hover{background:#fff;color:#0F172A}
.v3-sidenav .nav-item.active{background:var(--c-primary-soft);color:var(--c-primary);font-weight:600}
.v3-sidenav .nav-icon{width:16px;height:16px;flex-shrink:0}
.v3-sidenav .group-title{font-size:11px;font-weight:700;color:#94A3B8;text-transform:uppercase;letter-spacing:.04em;padding:var(--sp-3) var(--sp-3) var(--sp-2)}
.v3-sidenav .badge{margin-left:auto;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--c-danger);color:#fff;font-size:11px;line-height:18px;text-align:center;font-weight:600}
.v3-main{background:#F1F5F9;padding:var(--sp-6);overflow-y:auto}
.v3-copilot{background:#fff;border-left:1px solid #E2E8F0;padding:var(--sp-4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-3)}
.v3-shell.copilot-collapsed .v3-copilot > *:not(.v3-copilot-toggle){display:none}
.v3-copilot-toggle{align-self:flex-end;border:1px solid #E2E8F0;background:#fff;border-radius:var(--r-sm);padding:4px 10px;font-size:11px;color:#64748B;cursor:pointer}

/* ---------- 卡片 + KPI ---------- */
.v3-card{background:#fff;border-radius:var(--r-lg);border:1px solid #E2E8F0;padding:var(--sp-4) var(--sp-5);box-shadow:var(--sh-sm)}
.v3-card .card-head{display:flex;align-items:center;gap:8px;margin-bottom:var(--sp-3);font-size:13px;font-weight:600;color:#0F172A}
.v3-card .card-head .head-tag{font-size:11px;font-weight:500;color:#94A3B8;background:#F1F5F9;padding:2px 6px;border-radius:4px}
.v3-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.v3-kpi{background:#fff;border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);border:1px solid #E2E8F0}
.v3-kpi .label{font-size:11px;color:#64748B;font-weight:600}
.v3-kpi .value{font-size:28px;font-weight:700;color:#0F172A;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.v3-kpi .delta{display:inline-flex;align-items:center;gap:2px;font-size:11px;margin-top:4px;font-weight:600}
.v3-kpi .delta.up{color:var(--c-success)}
.v3-kpi .delta.down{color:var(--c-danger)}
.v3-kpi .delta.flat{color:#94A3B8}

/* ---------- Dialer + 智能时段卡 ---------- */
.v3-dialer{display:flex;gap:var(--sp-3);align-items:center;background:#fff;border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);border:1px solid #E2E8F0}
.v3-dialer input.phone{flex:1;border:none;outline:none;font-size:16px;font-weight:600;color:#0F172A;font-family:var(--ff);background:transparent}
.v3-dialer button{border:1px solid #E2E8F0;background:#fff;border-radius:var(--r-md);padding:8px 14px;font-size:13px;cursor:pointer;color:#334155;display:inline-flex;align-items:center;gap:6px}
.v3-dialer button.primary{background:var(--c-success);border-color:var(--c-success);color:#fff}
.v3-dialer button.primary:hover{background:#16A34A}
.v3-dialer button:hover{background:#F8FAFC}
.v3-dialer button.clock{padding:8px 12px}
.v3-dialer button.clock.loading{opacity:.6;cursor:wait}
.v3-timecard{margin-top:var(--sp-3);background:linear-gradient(135deg,#F0FDF4 0%,#ECFCCB 100%);border:1px solid #BBF7D0;border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:13px;display:none}
.v3-timecard.show{display:block}
.v3-timecard .head{font-weight:600;color:#166534;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.v3-timecard .windows{display:flex;flex-wrap:wrap;gap:6px}
.v3-timecard .win{background:#fff;border:1px solid #BBF7D0;color:#166534;border-radius:99px;padding:4px 10px;font-size:12px;display:inline-flex;align-items:center;gap:4px}
.v3-timecard .fallback{color:#92400E;font-size:12px}

/* ---------- 通话中卡 + 情绪热力 + 实时建议 ---------- */
.v3-livecall{margin-top:var(--sp-3);background:#fff;border:1px solid #E2E8F0;border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--sh-sm);display:none}
.v3-livecall.show{display:block}
.v3-livecall .head{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#0F172A}
.v3-livecall .phone{font-family:ui-monospace,SFMono-Regular,monospace}
.v3-livecall .timer{margin-left:auto;font-family:ui-monospace,monospace;font-size:20px;font-weight:700;color:var(--c-primary)}
.v3-livecall .meta{margin-top:4px;font-size:12px;color:#64748B}
.v3-sentiment{margin-top:var(--sp-3);display:flex;gap:1px;height:28px;border-radius:var(--r-sm);overflow:hidden;background:#F1F5F9}
.v3-sentiment .bar{flex:1;transition:background .25s;position:relative;cursor:default}
.v3-sentiment .bar:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#0F172A;color:#fff;font-size:11px;padding:4px 8px;border-radius:4px;white-space:nowrap;z-index:10}
.v3-sentiment-legend{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;color:#94A3B8}
.v3-advice{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:6px}
.v3-advice .item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:var(--r-sm);background:#F8FAFC;font-size:12px;color:#334155;border-left:3px solid var(--c-neutral);animation:v3-slide-in .25s ease}
.v3-advice .item.urgent{border-left-color:var(--c-danger);background:#FEF2F2}
.v3-advice .item.high{border-left-color:var(--c-warn);background:#FFFBEB}
.v3-advice .item.medium{border-left-color:var(--c-primary);background:#EEF2FF}
.v3-advice .item.low{border-left-color:var(--c-success);background:#F0FDF4}
.v3-advice .item .tag{font-size:10px;padding:1px 5px;border-radius:3px;background:rgba(0,0,0,.06);font-weight:600;flex-shrink:0}
@keyframes v3-slide-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ---------- 模型标签 + 虚拟滚动 + 排行榜 ---------- */
.v3-model-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:600;font-family:ui-monospace,monospace;background:#EEF2FF;color:var(--c-primary)}
.v3-model-pill.rule_v1{background:#F1F5F9;color:#64748B}
.v3-model-pill.llm_v1{background:#EEF2FF;color:var(--c-primary)}
.v3-model-pill.llm_v2{background:#F0FDF4;color:#16A34A}
.v3-vscroll{height:calc(100vh - 360px);min-height:480px;overflow-y:auto;position:relative;background:#fff;border-radius:var(--r-lg);border:1px solid #E2E8F0}
.v3-vscroll .vs-row{position:absolute;left:0;right:0;padding:10px 16px;border-bottom:1px solid #F1F5F9;font-size:13px;display:flex;gap:12px;align-items:center}
.v3-vscroll .vs-row:hover{background:#F8FAFC}
.v3-vscroll .vs-row .col{flex-shrink:0}
.v3-leaderboard .row{display:grid;grid-template-columns:32px 80px 70px 70px 70px 70px 1fr;gap:8px;align-items:center;padding:8px 12px;font-size:12px;color:#334155;border-bottom:1px solid #F1F5F9}
.v3-leaderboard .row.head{font-weight:600;color:#64748B;background:#F8FAFC}
.v3-leaderboard .rank{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:#F1F5F9;font-weight:700;font-size:11px;color:#475569}
.v3-leaderboard .rank.gold{background:#FEF3C7;color:#B45309}
.v3-leaderboard .rank.silver{background:#F1F5F9;color:#475569}
.v3-leaderboard .rank.bronze{background:#FED7AA;color:#C2410C}

/* ---------- Toast + 响应式 ---------- */
.v3-toast-host{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center}
.v3-toast{background:rgba(15,23,42,.92);color:#fff;padding:10px 16px;border-radius:var(--r-md);font-size:13px;box-shadow:var(--sh-lg);animation:v3-toast-in .2s ease;max-width:480px}
.v3-toast.success{background:rgba(22,163,74,.95)}
.v3-toast.warn{background:rgba(217,119,6,.95)}
.v3-toast.danger{background:rgba(220,38,38,.95)}
@keyframes v3-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:1280px){.v3-shell{grid-template-columns:1fr}.v3-sidenav,.v3-copilot{display:none}}
@media (max-width:768px){.v3-kpis{grid-template-columns:repeat(2,1fr)}.v3-topbar{padding:0 var(--sp-3)}.v3-topbar .search{display:none}}

/* v3.2 sidenav version chip */
.v3-sidenav .v3-version-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 8px 10px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #0a7d4f;
  background: linear-gradient(135deg, #e6fff2 0%, #d4f7e6 100%);
  border: 1px solid #6edda6;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.v3-sidenav .v3-version-chip .dot-new {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1ec96b;
  box-shadow: 0 0 0 3px rgba(30, 201, 107, 0.25);
  animation: v3chip-pulse 2s ease-in-out infinite;
}
@keyframes v3chip-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(30, 201, 107, 0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(30, 201, 107, 0.05); }
}

/* ===== [FIX 2026-09-30 DUAL-SIDENAV] v3 模式下隐藏 admin.html 旧侧栏 / 旧顶栏 =====
   由 admin.copilot.v3.js 给 <body> 加 .v3-mode; 避免 v3-sidenav 与 .admin-sidebar
   并排出现 (双侧栏 bug). JS 也会兜底 inline 隐藏. */
body.v3-mode #adminPanel > .admin-header,
body.v3-mode #adminSidebar,
body.v3-mode .admin-sidebar,
body.v3-mode .admin-header,
body.v3-mode #sidebarOverlay,
body.v3-mode #sidebarToggle,
body.v3-mode aside.sidebar { display: none !important; }

/* v3-shell 的 main 区域内 admin-main 要占满 (去掉 flex 限定, 避免被挤窄) */
body.v3-mode .v3-shell > .v3-main { display: block; min-width: 0; }
body.v3-mode .v3-shell > .v3-main #adminPanel { display: block !important; }
body.v3-mode .v3-shell > .v3-main #adminPanel .admin-body { display: block; }
body.v3-mode .v3-shell > .v3-main #adminPanel .admin-main { padding: 0; background: transparent; }

/* 移动端 v3-shell (grid 折叠到 1fr) 时不显示 Copilot 的折叠按钮悬空 */
@media (max-width:1280px){
  body.v3-mode .v3-shell > .v3-sidenav,
  body.v3-mode .v3-shell > .v3-copilot { display: none; }
}