/* CIEC UI Kit v2 — 通用组件与页面骨架样式(tokens.css 的实现层)
   Card / StatCard / Tabs / Select / Badge / Avatar + 看板 v2 布局 +
   侧边栏子菜单、细滚动条、会话列表与模型胶囊下拉。 */

/* ── 细滚动条(侧栏 / 会话列表 / 客户面板 / 内容区) ──────────────── */
.sidebar,.session-list,.customer-results,.customer-detail,.main-content,.staff-search-results{
  scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;}
.sidebar::-webkit-scrollbar,.session-list::-webkit-scrollbar,.customer-results::-webkit-scrollbar,
.customer-detail::-webkit-scrollbar,.main-content::-webkit-scrollbar,.staff-search-results::-webkit-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size)}
.sidebar::-webkit-scrollbar-thumb,.session-list::-webkit-scrollbar-thumb,.customer-results::-webkit-scrollbar-thumb,
.customer-detail::-webkit-scrollbar-thumb,.main-content::-webkit-scrollbar-thumb,.staff-search-results::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-pill)}
.sidebar::-webkit-scrollbar-thumb:hover,.session-list::-webkit-scrollbar-thumb:hover,.customer-results::-webkit-scrollbar-thumb:hover,
.customer-detail::-webkit-scrollbar-thumb:hover,.main-content::-webkit-scrollbar-thumb:hover,.staff-search-results::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}
.sidebar::-webkit-scrollbar-track,.session-list::-webkit-scrollbar-track,.customer-results::-webkit-scrollbar-track,
.customer-detail::-webkit-scrollbar-track,.main-content::-webkit-scrollbar-track{background:transparent}

/* ── Card ─────────────────────────────────────────────────────── */
.ui-card{background:var(--neutral-1);border:1px solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-lg);min-width:0}
.ui-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin:0 0 var(--space-md)}
.ui-card-title{font:var(--font-module-title);color:var(--color-ink);margin:0}
.ui-card-sub{font:var(--font-aux-text);color:var(--color-muted);margin:2px 0 0}
.ui-card-body{min-width:0}

/* ── StatCard ─────────────────────────────────────────────────── */
.ui-stat{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0;transition:box-shadow var(--dur-fast) var(--ease-out)}
button.ui-stat,.ui-stat[role="button"]{cursor:pointer}
.ui-stat:hover{box-shadow:var(--shadow-card-hover)}
.ui-stat-top{display:flex;align-items:center;gap:var(--space-sm)}
.ui-stat-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--color-accent-soft);color:var(--color-accent);flex-shrink:0}
.ui-stat-label{font:var(--font-aux-text);color:var(--color-muted)}
.ui-stat-value{font-size:28px;font-weight:650;line-height:1.15;color:var(--color-ink);font-variant-numeric:tabular-nums}
.ui-stat-value small{font-size:var(--text-sm);font-weight:400;color:var(--color-muted);margin-left:var(--space-xs)}
.ui-stat-meta{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.ui-stat-delta{display:inline-flex;align-items:center;gap:2px;font:650 var(--text-xs)/1 var(--font-body);padding:3px 8px;border-radius:var(--radius-pill)}
.ui-stat-delta .icon svg{width:12px;height:12px}
.ui-stat-delta.up{color:var(--color-success-strong);background:var(--color-success-soft)}
.ui-stat-delta.down{color:var(--color-danger-strong);background:var(--color-danger-soft)}
.ui-stat-delta.flat{color:var(--color-muted);background:var(--neutral-2)}
.ui-stat-delta.none{display:none}
.ui-stat-note{font:var(--font-aux-text);color:var(--color-muted)}

/* ── Tabs(吸顶分段标签) ───────────────────────────────────────── */
.ui-tabs{position:sticky;top:0;z-index:5;display:flex;gap:var(--space-xs);padding:var(--space-sm);margin:0 0 var(--space-md);background:color-mix(in srgb,var(--neutral-1) 92%,transparent);backdrop-filter:blur(8px);border:1px solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow-x:auto;scrollbar-width:none}
.ui-tabs::-webkit-scrollbar{display:none}
.ui-tab{border:0;background:transparent;color:var(--color-muted);border-radius:var(--radius-md);padding:8px var(--space-lg);font:500 var(--text-base)/1.4 var(--font-body);white-space:nowrap;min-height:36px}
.ui-tab:hover{background:var(--color-hover);color:var(--color-ink)}
.ui-tab[aria-selected="true"]{background:var(--color-accent);color:#fff;font-weight:650}
.ui-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ── Select ───────────────────────────────────────────────────── */
.ui-select{position:relative;display:inline-flex;min-width:0}
.ui-select select{appearance:none;-webkit-appearance:none;width:100%;min-height:38px;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--neutral-1);color:var(--color-ink);padding:6px 30px 6px var(--space-md);font:var(--font-body-text);cursor:pointer}
.ui-select select:hover{border-color:var(--blue-200)}
.ui-select select:focus-visible{outline:none;border-color:var(--color-accent);box-shadow:var(--shadow-focus)}
.ui-select::after{content:"";position:absolute;right:11px;top:50%;width:8px;height:8px;border-right:1.6px solid var(--neutral-5);border-bottom:1.6px solid var(--neutral-5);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.ui-select-label{display:grid;gap:var(--space-xs);font:var(--font-aux-text);color:var(--color-muted);min-width:0}
.ui-select-block{width:100%}

/* ── Badge ────────────────────────────────────────────────────── */
.ui-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--radius-pill);font:500 var(--text-xs)/1.7 var(--font-body);white-space:nowrap}
.ui-badge.neutral{background:var(--neutral-2);color:var(--neutral-5)}
.ui-badge.accent{background:var(--color-accent-soft);color:var(--blue-600)}
.ui-badge.success{background:var(--color-success-soft);color:var(--color-success-strong)}
.ui-badge.warning{background:var(--color-warning-soft);color:var(--color-warning-strong)}
.ui-badge.danger{background:var(--color-danger-soft);color:var(--color-danger-strong)}

/* ── Avatar ───────────────────────────────────────────────────── */
.ui-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:650;flex-shrink:0;user-select:none;width:36px;height:36px;font-size:15px}
.ui-avatar.sm{width:26px;height:26px;font-size:12px}
.ui-avatar.lg{width:44px;height:44px;font-size:18px}
.ui-avatar.hue-0{background:#1677ff}.ui-avatar.hue-1{background:#0ea5a3}.ui-avatar.hue-2{background:#7c5cd6}
.ui-avatar.hue-3{background:#d97706}.ui-avatar.hue-4{background:#d94f70}.ui-avatar.hue-5{background:#389e0d}

/* ── 看板 v2:1440px 居中 + 指标 4 列 + 模块 2 列 ───────────────── */
.dashboard-page{max-width:1440px;margin:0 auto;padding:var(--space-lg) var(--space-xl) var(--space-3xl);display:grid;gap:var(--space-lg);min-width:0}
.dashboard-metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg)}
.dashboard-modules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);align-items:start}
.dashboard-module-col{display:grid;gap:var(--space-lg);min-width:0}
.dashboard-module-col:empty{display:none}
/* 看板里的模块统一为 Card 规范 */
.dashboard-active-section>.dashboard-section,.dashboard-modules-grid .dashboard-section{background:var(--neutral-1);border:1px solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-lg);min-width:0}
/* StatCard 也是一张卡(div 与 button 两种形态) */
.ui-stat{background:var(--neutral-1);border:1px solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-lg)}
.dashboard-active-section{min-width:0}
.dashboard-chart-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-lg)}
.dashboard-chart-cell{display:grid;gap:var(--space-xs);min-width:0}
.dashboard-chart-cell-wide{grid-column:1/-1}
.ui-chart{width:100%;height:230px;min-width:0}
.ui-chart-caption{display:flex;gap:var(--space-lg);flex-wrap:wrap;margin:0 0 var(--space-xs);font:var(--font-aux-text);color:var(--color-muted)}
.ui-chart-key{display:inline-flex;align-items:center;gap:6px}
.ui-chart-key i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ── 侧边栏:经验沉淀可折叠子菜单 ─────────────────────────────────── */
.nav-group{display:grid;gap:2px}
.nav-parent{width:100%;justify-content:flex-start}
.nav-parent .nav-caret{transition:transform var(--dur-fast) var(--ease-out);margin-left:auto}
.nav-group[data-open="true"]>.nav-parent .nav-caret{transform:rotate(180deg)}
.nav-sub{display:grid;gap:2px;padding-left:var(--space-lg);margin:2px 0 var(--space-sm)}
.nav-group[data-open="false"]>.nav-sub{display:none}
.nav-sub .nav-item{position:relative;font-size:var(--text-sm);min-height:38px}
.nav-sub .nav-item::before{content:"";position:absolute;left:calc(-1 * var(--space-sm));top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--neutral-3)}
.nav-sub .nav-item.active::before{background:var(--color-accent)}

/* ── 助手页:会话列表(完整摘要 + hover 星标) ─────────────────────── */
.session-row .session-open{display:block;width:100%;justify-content:flex-start;text-align:left;white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;height:auto;padding:var(--space-sm) var(--space-md);border:0;background:transparent;border-radius:var(--radius-md)}
.session-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-xs)}
.session-row .star{opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.session-row:hover .star,.session-row:focus-within .star,.session-row .star.is-starred{opacity:1}
.session-row:hover{background:var(--color-hover);border-radius:var(--radius-md)}

/* ── 助手页:模型胶囊下拉(输入框左下角) ─────────────────────────── */
.composer-toolbar .ui-model-pill{border:1px solid var(--color-rule);background:var(--neutral-1);color:var(--color-muted);border-radius:var(--radius-pill);padding:4px 12px;font:var(--font-aux-text);gap:6px;min-height:30px}
.composer-toolbar .ui-model-pill:hover{border-color:var(--blue-200);color:var(--color-ink)}
.composer-toolbar .ui-model-pill .icon svg{width:13px;height:13px}
.ui-model-wrap{position:relative;display:inline-flex}
.ui-model-menu{position:fixed;inset:auto;margin:0;z-index:20;width:min(320px,calc(100vw - 32px));max-height:min(360px,calc(100dvh - 96px));overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;background:var(--neutral-1);border:1px solid var(--color-rule);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);padding:var(--space-xs);display:grid}
.ui-model-menu[hidden]{display:none}
.ui-model-option{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);width:100%;border:0;background:transparent;border-radius:var(--radius-sm);padding:8px var(--space-md);font:var(--font-body-text);color:var(--color-ink);text-align:left;min-height:44px}
.ui-model-option:hover{background:var(--color-hover)}
.ui-model-option[aria-checked="true"]{color:var(--color-accent);background:var(--color-accent-soft);font-weight:650}
.ui-model-option small{display:block;color:var(--color-muted);font-weight:400}

/* ── 助手页:客户面板列表卡片 ───────────────────────────────────── */
.customer-result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm) var(--space-md);align-items:center;width:100%;text-align:left;border:0;background:transparent;border-bottom:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);min-height:52px}
.customer-result:hover{background:var(--color-hover)}
.customer-result .cr-main{display:grid;gap:2px;min-width:0}
.customer-result .cr-name{display:flex;align-items:center;gap:var(--space-sm);min-width:0;font-weight:650;color:var(--color-ink)}
.customer-result .cr-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customer-result .cr-name .ui-badge{flex-shrink:0}
.customer-result .cr-meta{font:var(--font-aux-text);color:var(--color-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}

/* ── 响应式 ───────────────────────────────────────────────────── */
@media (max-width:1100px){
  .dashboard-modules-grid{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .dashboard-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (hover:none){
  .session-row .star{opacity:1}
}
@media (max-width:700px){
  .dashboard-page{padding:var(--space-md) var(--space-md) var(--space-2xl)}
  .dashboard-metrics-grid{grid-template-columns:1fr;gap:var(--space-md)}
  .dashboard-chart-row{grid-template-columns:1fr}
  .ui-tabs{border-radius:var(--radius-md)}
  .ui-stat-value{font-size:24px}
}

/* 原生模型 select 保留为状态源,视觉隐藏 */
.sr-only-model{display:none!important}

/* ── 客户列表阶段页签 ─────────────────────────────────────────── */
.list-tabs{position:static;margin:0 0 var(--space-md)}
.stage-tabs .tab-count{margin-left:6px;padding:1px 7px;border-radius:var(--radius-pill);background:var(--neutral-2);color:var(--color-muted);font:600 var(--text-xs)/1.6 var(--font-body);font-variant-numeric:tabular-nums}
.stage-tabs .ui-tab[aria-selected="true"] .tab-count{background:rgba(255,255,255,.24);color:#fff}
.row-summary{display:block;margin-top:2px;font:var(--font-aux-text);color:var(--color-muted);max-width:36em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 历史归档面咨 ─────────────────────────────────────────────── */
.archive-detail{display:grid;gap:var(--space-lg)}
.archive-detail audio{width:100%}
.archive-transcript{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--neutral-2);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:var(--space-md);max-height:32rem;overflow:auto;font:var(--font-aux-text)/1.7 var(--font-body)}
.intake-row .badge{margin-left:var(--space-sm)}


/* ── 家庭图谱 ─────────────────────────────────────────────────── */
.constellation-layout>*{grid-column:1/-1}
.family-graph-controls{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-sm);color:var(--color-muted);font:var(--font-aux-text)}
.family-graph-spacer{flex:1}
.family-graph-stats{margin:0 0 var(--space-sm)}
.family-graph-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-md);align-items:stretch}
.family-graph-canvas{height:560px;background:var(--neutral-1);border:1px solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card);min-width:0}
.family-graph-side{background:var(--neutral-1);border:1px solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-lg);display:none;min-width:0;max-height:560px;overflow:auto;scrollbar-width:thin}
.family-graph-side.open{display:grid;gap:var(--space-sm);align-content:start}
.fg-member{display:grid;gap:var(--space-xs);border-bottom:1px solid var(--color-rule);padding-bottom:var(--space-sm)}
.fg-member .badge{justify-self:start}
@media (max-width:900px){
  .family-graph-body{grid-template-columns:1fr}
  .family-graph-canvas{height:420px}
}

/* ── 模型管理 ─────────────────────────────────────────────────── */
.models-form{display:grid;gap:var(--space-sm);margin-bottom:var(--space-lg)}
.models-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.models-field{display:grid;gap:var(--space-xs);font:var(--font-aux-text);color:var(--color-muted);min-width:0}
.models-field input{min-height:40px;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--neutral-1);color:var(--color-ink);padding:var(--space-sm) var(--space-md);font:var(--font-body-text)}
.model-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-sm) var(--space-lg);align-items:center;background:var(--neutral-1);border:1px solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-sm)}
.model-row .models-row-actions{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;justify-content:flex-end}
.model-row .badge[data-enabled="false"]{background:var(--neutral-2);color:var(--color-muted)}
@media (max-width:800px){.models-form-grid{grid-template-columns:1fr}}