/* ============================================================================
 * 慧知 · 界面重设计层（TailAdmin 风格 + GSAP 动效）
 *
 * 为什么是「覆盖层」而不是把原来的 CSS 改掉：
 * 原型那 780 行内联样式里，每一条选择器都被 10 个 JS 模块依赖着（class 名就是接口）。
 * 直接重写会把 crm.js / cockpit.js / delivery.js 里几千行 innerHTML 全部打烂。
 * 所以这一层只做一件事：保持 class 名不变，把「长什么样」整个换掉。
 * 加载顺序在 crm.css / welcome.css 之后，同权重后来者胜。
 *
 * 设计取向参考 TailAdmin：浅灰底 + 纯白卡片 + 柔和分层阴影 + 大圆角 + 靛蓝主色，
 * 保留慧知自己的印章标识和深色侧栏（这是品牌识别，不该跟着模板走丢）。
 * ========================================================================== */

:root{
  /* ---- 主色：TailAdmin 靛蓝。--teal 这个名字是历史遗留，全站几百处在用它当主色，
         与其改几百处调用点，不如在这里把它重新指向新主色，语义由 --brand 说明 ---- */
  --brand:#465FFF;
  --brand-600:#3641F5;
  --brand-700:#2A31D8;
  --brand-50:#ECF3FF;
  --brand-100:#DDE9FF;
  --teal:var(--brand);
  --teal-ink:var(--brand-700);

  /* ---- 中性色阶 ---- */
  --paper:#F9FAFB;
  --card:#FFFFFF;
  --line:#E4E7EC;
  --line-soft:#F2F4F7;
  --text:#101828;
  --muted:#667085;
  --muted-2:#98A2B3;

  /* ---- 深色侧栏 ---- */
  --ink:#0F1728;
  --ink-2:#18223A;
  --ink-3:#1F2A44;

  /* ---- 语义色 ---- */
  --brass:#F79009;
  --brass-ink:#B54708;
  --ok:#12B76A;
  --warn:#F79009;
  --danger:#F04438;
  --accent-red:#F04438;

  /* ---- 圆角与阴影：TailAdmin 的分层阴影，比单层阴影更有纸感 ---- */
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.1), 0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 8px -2px rgba(16,24,40,.1), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-lg:0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --shadow-xl:0 20px 24px -4px rgba(16,24,40,.08), 0 8px 8px -4px rgba(16,24,40,.03);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

body{ background:var(--paper); color:var(--text); }

/* 滚动条：默认那根粗灰条在浅色界面里非常抢眼，收细并淡化 */
*::-webkit-scrollbar{ width:8px; height:8px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{ background:#D0D5DD; border-radius:8px; border:2px solid transparent; background-clip:content-box }
*::-webkit-scrollbar-thumb:hover{ background:#98A2B3; background-clip:content-box }

/* ============================================================ 侧边栏 */
.sidebar{
  width:248px; background:var(--ink); padding:18px 12px;
  border-right:1px solid rgba(255,255,255,.06);
}
.brand{ padding:6px 8px 20px }
.brand .mark{
  width:36px; height:36px; border-radius:11px;
  background:linear-gradient(140deg,#FDB022,var(--brass) 55%,var(--brass-ink));
  box-shadow:0 4px 12px -2px rgba(247,144,9,.45);
}
.brand .name{ font-size:16.5px; font-weight:650; letter-spacing:.01em; color:#F9FAFB }
.brand .sub{ font-size:9.5px; letter-spacing:.16em; color:#667085 }

.nav-label{
  font-size:10px; color:#5D6B88; letter-spacing:.12em; font-weight:600;
  padding:16px 10px 7px;
}
.nav-item{
  border-radius:10px; padding:9px 11px; font-size:13.5px; color:#B4BDCE; gap:11px;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  margin-bottom:3px;
}
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff }
.nav-item.active{
  background:linear-gradient(96deg, var(--brand), var(--brand-600));
  color:#fff; box-shadow:0 4px 12px -3px rgba(70,95,255,.55);
}
/* 原来那根左侧竖条在圆角胶囊上会突兀地飘在外面，胶囊本身已经足够表达选中态 */
.nav-item.active::before{ display:none }
.nav-item .seal{ width:22px; height:22px; border-radius:7px; font-size:10px }
.nav-item.active .seal{ background:rgba(255,255,255,.22) !important; color:#fff !important }

.seal-teal{ background:var(--brand) }
.seal-brass{ background:var(--brass); color:#3B2503 }
.seal-ink{ background:#344054 }
.seal-danger{ background:var(--danger) }

.nav-badge{
  min-width:20px; height:20px; border-radius:7px; font-size:10px; font-weight:600;
  background:rgba(255,255,255,.1); color:#C8D0DE; font-family:var(--font-body);
}
.nav-item.active .nav-badge{ background:rgba(255,255,255,.24); color:#fff }
.nav-badge.hot{ background:var(--danger); color:#fff; letter-spacing:.04em }
/* 逾期角标：红色 + 轻微呼吸，让"有事逾期了"能被余光注意到 */
.nav-badge.overdue{ background:var(--danger); color:#fff; position:relative }
.nav-badge.overdue::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 2px rgba(240,68,56,.5);
  animation:ringPulse 2.4s ease-in-out infinite;
}

}

.nav-more-toggle{ border-radius:10px; font-size:12px; color:#6B7A96; padding:9px 11px }
.nav-more-toggle:hover{ background:rgba(255,255,255,.06); color:#fff }

.sidebar-foot{ border-top:1px solid rgba(255,255,255,.07); padding-top:14px }
.user-card{ border-radius:11px; padding:9px 10px; transition:background .18s var(--ease) }
.user-card:hover{ background:rgba(255,255,255,.06) }

/* ============================================================ 顶栏 */
.topbar{
  /* 这里原来是 rgba(255,255,255,.86) + backdrop-filter:blur(12px) saturate(1.6)。
     去掉的理由：背景本来就 86% 不透明，透过来的那 14% 再怎么模糊也看不出来，
     但代价是实打实的——backdrop-filter 会让**顶栏下面任何一次重绘**都触发
     整条顶栏重新采样并模糊背景。侧栏一个脉冲小红点、首页一个动画，
     都会把这条全宽长条拖进每帧重新合成，整个界面的 hover 因此发涩。
     换成不透明底色，观感几乎无差别，这条持续成本直接归零。 */
  background:#FCFCFD;
  border-bottom:1px solid var(--line); height:60px;
}
.ws-chip,.mode-pill{
  border-radius:9px; border:1px solid var(--line); background:#fff;
  font-size:11.5px; padding:6px 11px; color:var(--muted); font-family:var(--font-body);
}
.mode-pill{ background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100); font-weight:600 }
.avatar{ border-radius:10px; background:linear-gradient(140deg,var(--brand),var(--brand-700)); font-family:var(--font-body) }

/* ============================================================ 通用卡片 */
.metric-card,.dash-card,.kb-card,.crm-card,.quad,.kb-stat,.wc-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-xs);
}
.metric-card,.dash-card,.crm-card{ padding:18px 20px }

.metric-card{ transition:box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease) }
.metric-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:#D0D5DD }
.metric-card .m-label{ font-size:11.5px; color:var(--muted); font-weight:500; letter-spacing:.01em }
.metric-card .m-value{ font-size:29px; font-weight:680; letter-spacing:-.02em; color:var(--text); line-height:1.15 }
.metric-card .m-sub{ font-size:11px; color:var(--muted-2) }

.dash-head h2,.view-head h2,.dash-card h3{ letter-spacing:-.015em; color:var(--text) }
.dash-head h2{ font-size:23px; font-weight:680 }
.view-head h2{ font-size:22px; font-weight:670 }
.dash-card h3{ font-size:14px; font-weight:640 }
.dash-head p,.view-head p{ color:var(--muted); font-size:13px }

.panel-title{
  font-size:10.5px; letter-spacing:.1em; color:var(--muted-2); font-weight:650;
  text-transform:uppercase;
}

/* ============================================================ 按钮 */
.rec-btn{
  font-size:12.5px; padding:8px 15px; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--text); font-weight:550; box-shadow:var(--shadow-xs);
  transition:background .16s var(--ease), border-color .16s var(--ease),
             box-shadow .16s var(--ease), transform .12s var(--ease), color .16s var(--ease);
}
.rec-btn:hover{ background:var(--line-soft); border-color:#D0D5DD; box-shadow:var(--shadow-sm) }
.rec-btn:active{ transform:scale(.97) }
.rec-btn.start{
  background:linear-gradient(180deg,var(--brand),var(--brand-600)); color:#fff;
  border-color:var(--brand-600); box-shadow:0 2px 6px -1px rgba(70,95,255,.42);
}
.rec-btn.start:hover{ background:linear-gradient(180deg,var(--brand-600),var(--brand-700)); box-shadow:0 4px 12px -2px rgba(70,95,255,.5) }
.rec-btn.stop{ background:var(--danger); color:#fff; border-color:var(--danger); box-shadow:0 2px 6px -1px rgba(240,68,56,.38) }
.rec-btn.stop:hover{ background:#D92D20 }
.rec-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none }

.crm-rowbtn{
  border:1px solid var(--line); background:#fff; border-radius:7px; padding:4px 10px;
  font-size:11px; color:var(--muted); transition:all .16s var(--ease);
}
.crm-rowbtn:hover{ background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100) }
.crm-rowbtn.danger:hover{ background:#FEF3F2; color:var(--danger); border-color:#FECDCA }

.send-btn{
  border-radius:10px; background:linear-gradient(180deg,var(--brand),var(--brand-600));
  box-shadow:0 2px 8px -1px rgba(70,95,255,.45); transition:transform .14s var(--ease), box-shadow .16s var(--ease);
}
.send-btn:hover{ box-shadow:0 5px 14px -2px rgba(70,95,255,.55) }
.send-btn:active{ transform:scale(.93) }

/* ============================================================ 表单 */
input,select,textarea{ font-family:var(--font-body) }
.crm-form input,.crm-form select,.crm-form textarea,
.hz-field input,.hz-field select,.hz-field textarea,
.hz-field2 input,.hz-field2 select,
.crm-search input,#kbSearch,#settingsBody input,#settingsBody select{
  border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:12.5px;
  background:#fff; color:var(--text);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.crm-form input:focus,.crm-form select:focus,.crm-form textarea:focus,
.hz-field input:focus,.hz-field textarea:focus,.hz-field select:focus,
.crm-search input:focus,#kbSearch:focus,#settingsBody input:focus,#settingsBody select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-50);
}
.crm-form label,.hz-field label,.hz-field2 label,#settingsBody label{
  font-size:10.5px; color:var(--muted); font-weight:600; letter-spacing:.01em;
}

/* ============================================================ 设置中心排版
 * 这一页跟客户360共用 .crm-card/.crm-form，但两边的内容形状完全不同：
 * 客户360是少量、信息量大的字段，两列铺开合理；设置中心是几十个短参数
 * （一个数字输入框 + 一行说明），同样两列铺在没有上限宽度的容器里，
 * 每格能分到大半个屏幕——参数看着"巨大"、页面"乱"，都是这一点造成的。
 * 只在 #settingsBody 下覆盖，客户360和其它用到 .crm-form 的弹窗不受影响。 */
#settingsBody{
  /* width:100% 不能省：#view-settings 是 flex 容器，flex 子项一旦带 margin:auto，
     跨轴（这里是宽度）就不再走 align-items:stretch，而是退化成按内容自身宽度
     收缩（fit-content）——实测量出来只有 484px，比 max-width 小一大截，
     不是没生效，是被"内容多宽就多宽"的收缩算法抢了先。显式 width:100% 把
     它摁回"先撑满、再被 max-width 封顶"。 */
  width:100%; max-width:900px; margin:0 auto;
}
#settingsBody .crm-form{
  /* auto-fill + minmax：字段按最小可读宽度换行，是 2 个还是 7 个字段，
     每格宽度都稳定在 190~260px 左右，不会因为这张卡片字段少就被拉得特别宽 */
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px 14px;
}
#settingsBody .crm-card{ padding:14px 16px; margin-bottom:10px; }
#settingsBody .crm-card-head h4{ font-size:12.5px; }
#settingsBody .view-head{ margin-bottom:14px; }
/* 供应商行内部已经显式指定 3 列（字段本身偏长：Base URL、模型名），
   保持原样不受 auto-fill 影响——inline style 优先级本来就比这里的类选择器高 */

/* ============================================================ 标签 / 药丸 */
.crm-pill,.crm-badge,.meta-pill,.kb-tag,.trust-badge,.stage-pill{
  border-radius:7px; font-weight:600; letter-spacing:.01em;
}
.crm-pill,.meta-pill{
  background:var(--line-soft); color:var(--muted); border:1px solid var(--line);
  font-size:10.5px; padding:2px 8px;
}
.kb-tag{ background:var(--brand-50); color:var(--brand-700); font-family:var(--font-body); font-size:10px; padding:3px 8px }
.crm-badge{ background:var(--brand-50); color:var(--brand-700); font-size:10.5px; padding:2px 9px }
.crm-badge.tier-A{ background:#FFFAEB; color:var(--brass-ink) }
.crm-pill.s-DONE{ background:#ECFDF3; color:#027A48; border-color:#ABEFC6 }
.crm-pill.s-IN_PROGRESS{ background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100) }
.crm-pill.s-BLOCKED{ background:#FEF3F2; color:#B42318; border-color:#FECDCA }
.crm-pill.s-WAITING_CUSTOMER{ background:#FFFAEB; color:#B54708; border-color:#FEDF89 }
.crm-pill.s-NOT_STARTED{ background:var(--line-soft); color:var(--muted) }

.chip,.mode-chip{
  border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--muted);
  font-size:11.5px; padding:6px 12px; font-family:var(--font-body);
  transition:all .16s var(--ease);
}
.chip:hover,.mode-chip:hover{ border-color:var(--brand); color:var(--brand-700); background:var(--brand-50) }
.tab-row .chip.active,.mode-chip.active{
  background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 2px 6px -1px rgba(70,95,255,.4);
}

/* ============================================================ 表格 */
/* 内边距不能给太大：.crm-table 自带 min-width:620px，右栏那种 330px 宽的卡片里
   多给 4px 就会把「约定日期」挤出可视区。这里只加纵向呼吸，横向保持紧凑。 */
.crm-table{ font-size:12px }
.crm-table thead th{
  background:var(--line-soft); color:var(--muted); font-size:10.5px; font-weight:650;
  letter-spacing:.03em; padding:9px 8px; border-bottom:1px solid var(--line);
}
.crm-table tbody td{ padding:9px 8px; border-bottom:1px solid var(--line-soft) }
.crm-table tbody tr{ transition:background .14s var(--ease) }
.crm-table tbody tr:hover td{ background:var(--brand-50) }
/* 窄卡片里放 620px 的表，之前是直接裁掉右半边。给个横向滚动，至少能看全 */
.crm-card > .crm-table,
.crm-card > div > .crm-table{ display:table }
.crm-card{ overflow-x:auto }

/* crm.css 给 td:first-child 定死 min-width:160px，本意是照顾"第一列就是标题"的表
   （合同、回款）。但记录表第一列是「类型」，表头明明写了 width:88px 却被这条盖掉，
   多吃掉的 72px 全从没有指定宽度的「标题/内容」列里扣——于是标题被挤成每行三四个字。
   收窄到 88px：既够「首款 50%」「HF-2026…」这类第一列标题，也把宽度还给正文列。 */
.crm-table td:first-child{ min-width:88px }
/* 正文列要能正常断行，别因为一个长词把整列撑开或挤扁 */
.crm-table td{ overflow-wrap:anywhere }
/* 记录表列多、右栏又窄，「标题/内容」是这张表唯一真正要读的列，给它保底宽度；
   实在放不下时由 .crm-card 的横向滚动兜底，而不是把标题挤成每行三个字 */
.crm-table.t-records td:nth-child(2),
.crm-table.t-records th:nth-child(2){ min-width:190px }
.crm-table.t-records .crm-rowbtn{ padding:4px 7px }

/* ============================================================ 问答气泡 */
.bubble{
  border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow-xs);
  font-size:13.8px; padding:14px 16px;
}
.msg.user .bubble{
  background:linear-gradient(180deg,var(--brand),var(--brand-600)); border-color:var(--brand-600);
  color:#fff; box-shadow:0 3px 10px -2px rgba(70,95,255,.4);
}
.msg .bubble-avatar{ border-radius:10px; font-family:var(--font-body); font-weight:650 }
.msg.ai .bubble-avatar{ background:linear-gradient(140deg,var(--brand),var(--brand-700)) }
.msg.user .bubble-avatar{ background:#344054 }

.cite-card{ border-radius:11px; border:1px solid var(--line); box-shadow:var(--shadow-xs) }
.cite-card:hover,.cite-card.focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50) }
.cite-card .cite-num{ background:var(--brand); border-radius:6px; font-family:var(--font-body); font-weight:650 }

.composer{ border-top:1px solid var(--line); background:#fff }
.composer-box{
  border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow-xs);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.composer-box:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-50) }

/* ============================================================ 知识库卡片 */
.kb-card{ padding:17px 18px }
.kb-card:hover{ border-color:var(--brand); box-shadow:var(--shadow-md); transform:translateY(-3px) }
.kb-card h4{ font-size:14.5px; font-weight:640; letter-spacing:-.01em }
.kb-card .kb-foot{ border-top:1px solid var(--line-soft); color:var(--muted-2) }
.kb-stat .num{ font-size:25px; font-weight:680; letter-spacing:-.02em }
.kb-stat .lbl{ font-size:11px; color:var(--muted) }

/* 卡片右上角的删除按钮：平时淡出，hover 卡片才显形——常驻会让整面卡片墙都是红叉 */
.kb-card{ position:relative }
.kb-card .kb-del{
  position:absolute; right:10px; bottom:10px; z-index:2;
  border:1px solid var(--line); background:#fff; color:var(--muted-2);
  width:26px; height:26px; border-radius:8px; cursor:pointer; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(3px); transition:all .18s var(--ease);
}
.kb-card:hover .kb-del{ opacity:1; transform:translateY(0) }
.kb-card .kb-del:hover{ background:#FEF3F2; color:var(--danger); border-color:#FECDCA }

/* 长文知识阅读器：完整正文分页展示，不再只截前 12 块和 400 字 */
.kb-reader-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.kb-reader-head h3{margin:0 0 4px;font-size:17px;line-height:1.45}
.kb-reader-id{font:10px/1.6 var(--font-mono);color:var(--muted);word-break:break-all}
.kb-reader-ready{flex-shrink:0;padding:5px 8px;border:1px solid #ABEFC6;border-radius:7px;
  background:#F6FEF9;color:#027A48;font:10px var(--font-mono)}
.kb-reader-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:10px}
.kb-reader-stats>div{min-width:0;padding:9px;text-align:center;background:var(--line-soft);border-radius:8px}
.kb-reader-stats b{display:block;font:650 15px var(--font-mono);overflow:hidden;text-overflow:ellipsis}
.kb-reader-stats span{font-size:9px;color:var(--muted)}
.kb-reader-models{padding:8px 10px;margin-bottom:9px;border:1px solid var(--line);border-radius:7px;
  color:var(--muted);font-size:10.5px;line-height:1.7}
.kb-reader-actions{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.kb-reader-actions a{text-decoration:none;display:inline-flex;align-items:center}
.kb-reader-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.kb-reader-toolbar>div{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.kb-reader-toolbar b{font-size:13px}.kb-reader-toolbar span{font-size:9.5px;color:var(--muted)}
.kb-reader-toolbar input{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:11px}
.kb-reader-toolbar input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.kb-reader-section{border:1px solid var(--line);border-radius:9px;margin-bottom:9px;background:#fff;overflow:hidden}
.kb-reader-section summary{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:#FAFBFB;cursor:pointer}
.kb-reader-section summary span{font-size:12px;font-weight:650;color:var(--text)}
.kb-reader-section summary small{font:9px/1.5 var(--font-mono);color:var(--muted)}
.kb-reader-text{padding:12px 13px;font-size:12.5px;line-height:1.9;color:var(--text);white-space:pre-wrap;word-break:break-word}
.kb-reader-pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 0 3px}
.kb-reader-pager span{min-width:100px;text-align:center;font:10px var(--font-mono);color:var(--muted)}
@media(max-width:600px){.kb-reader-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.kb-reader-head{flex-direction:column}}

/* ============================================================ 弹窗 / 抽屉 */
.hz-modal,.wire-drawer-body{ border-radius:var(--radius-lg); box-shadow:var(--shadow-xl) }
.wire-drawer-body{ border-radius:0 }
.hz-modal h3{ font-size:16px; font-weight:660; letter-spacing:-.01em }
.hz-modal-actions,.crm-form-actions{ border-top:1px solid var(--line) }

/* ============================================================ 客户 360 */
.crm-shell{ background:var(--paper) }
.crm-side,.crm-timeline-col{ background:#fff; border-color:var(--line) }
.crm-cust{ border-radius:10px; padding:10px 11px; margin-bottom:3px }
.crm-cust:hover{ background:var(--brand-50) }
.crm-cust.active{ background:var(--brand-50); border-left:3px solid var(--brand) }
.crm-step .dot{
  border-radius:9px; font-weight:650; font-family:var(--font-body);
  transition:all .22s var(--ease);
}
.crm-step.current .dot{ background:var(--brand); box-shadow:0 3px 9px -2px rgba(70,95,255,.5) }
.crm-step.done .dot{ background:var(--ok) }
.crm-stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-xs) }
.crm-stat .v{ font-size:22px; font-weight:680; letter-spacing:-.02em }

/* ============================================================ 甘特图 */
/* 原型给驾驶舱写死了 #F4F5F6，和新的 --paper 差一档，会看出来两块灰不一样 */
#view-dashboard{ background:var(--paper) }
/* #view-dashboard 是 flex column，默认 flex-shrink:1 会把这张卡压到比内容还矮，
   于是甘特行整片溢出压在下面的卡片上。不能靠 overflow:hidden 遮，那是把内容裁掉。 */
#ganttCard{ margin-bottom:12px; flex-shrink:0 }

.gantt-wrap{ overflow-x:auto; padding-bottom:4px }
.gantt{ min-width:660px }
.gantt-head{
  display:grid; grid-template-columns:200px 1fr; gap:12px; align-items:end;
  padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:10px;
}
.gantt-scale{ position:relative; height:22px }
.gantt-tick{
  position:absolute; top:0; font-size:9.5px; color:var(--muted-2); white-space:nowrap;
  transform:translateX(-50%); font-family:var(--font-mono);
}
.gantt-tick::after{
  content:""; position:absolute; left:50%; top:15px; width:1px; height:7px; background:var(--line);
}
.gantt-row{
  display:grid; grid-template-columns:200px 1fr; gap:12px; align-items:center;
  padding:6px 0; border-radius:8px; transition:background .14s var(--ease);
}
.gantt-row:hover{ background:var(--brand-50) }
.gantt-label{ min-width:0; cursor:pointer }
.gantt-label .t{
  font-size:12px; font-weight:560; color:var(--text); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.gantt-label .c{ font-size:10px; color:var(--muted-2); margin-top:1px }
.gantt-track{ position:relative; height:26px }
/* 今天这条竖线是甘特图的锚点，没有它就看不出"逾期"到底逾了多少 */
.gantt-today{
  position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--danger);
  opacity:.55; border-radius:2px; z-index:1;
}
.gantt-bar{
  position:absolute; top:4px; height:18px; border-radius:6px; min-width:6px;
  background:linear-gradient(180deg,var(--brand),var(--brand-600));
  box-shadow:0 2px 5px -1px rgba(70,95,255,.4); cursor:pointer;
  display:flex; align-items:center; padding:0 7px; overflow:hidden;
  /* 只过渡 transform。filter 每一帧都要跑一遍滤镜通道，
     而它在这里只是让颜色亮一点点——让它瞬时生效，观感几乎没差别。 */
  transition:transform .16s var(--ease);
}
.gantt-bar:hover{ filter:brightness(1.08); transform:scaleY(1.14) }
.gantt-bar .bl{ font-size:9.5px; color:#fff; font-weight:600; white-space:nowrap; opacity:.95 }
.gantt-bar.overdue{ background:linear-gradient(180deg,#FF7A70,var(--danger)); box-shadow:0 2px 5px -1px rgba(240,68,56,.45) }
.gantt-bar.customer{ background:linear-gradient(180deg,#FDB022,var(--brass)); box-shadow:0 2px 5px -1px rgba(247,144,9,.4) }
.gantt-bar.risk{ background:linear-gradient(180deg,#9B8AFB,#7A5AF8); box-shadow:0 2px 5px -1px rgba(122,90,248,.4) }
.gantt-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:10.5px; color:var(--muted) }
.gantt-legend i{ width:11px; height:11px; border-radius:4px; display:inline-block; margin-right:5px; vertical-align:-1px }

/* ============================================================ 字典管理 */
.dict-row{ border-bottom:1px solid var(--line-soft) !important }
.dict-row:hover{ background:var(--line-soft) }
.dict-label,.dict-free-input{
  border:1px solid var(--line); border-radius:8px; padding:7px 11px; font-size:12.5px;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.dict-label:focus,.dict-free-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50) }
.dict-up,.dict-down{ border-radius:4px; transition:color .14s var(--ease) }
.dict-up:hover:not(:disabled),.dict-down:hover:not(:disabled){ color:var(--brand) !important }
.dict-up:disabled,.dict-down:disabled{ opacity:.25; cursor:not-allowed }

/* ============================================================ 谈单驾驶舱 */
.quad{ padding:14px 16px }
.quad-head h4{ font-family:var(--font-body); font-size:11px; letter-spacing:.06em; color:var(--muted) }
.turn{ border-radius:11px }
.turn.cust{ background:#FFFAEB; border-left:3px solid var(--brass) }
.turn.rep{ background:var(--brand-50); border-left:3px solid var(--brand) }
.tag{ border-radius:7px; font-size:10.5px; padding:3px 9px }
.tag.need{ background:var(--brand-50); color:var(--brand-700) }
.tag.risk{ background:#FEF3F2; color:#B42318 }

/* ============================================================ 报价 */
.quote-package{ border-radius:var(--radius); padding:13px 14px; border-color:var(--line) }
.quote-package:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm) }
.quote-package.active{ border-color:var(--brand); background:var(--brand-50); box-shadow:0 0 0 3px var(--brand-50) }
.quote-package .pn{ font-size:13px; font-weight:640 }

/* ============================================================ 进入动画（CSS 兜底） */
/* GSAP 接管后这些会被覆盖；GSAP 万一加载失败，这里保证界面不是"全部不可见" */
.view.active{ animation:none }
.metric-card,.kb-card,.cite-card,.quote-package{ animation:none; opacity:1 }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ============================================================================
 * 驾驶舱重构 + 外出出勤 + 科技感
 * ========================================================================== */

/* ---- 顶部时钟 ---- */
.dash-date{ text-align:right; line-height:1.35 }
.dash-date b{
  display:block; font-family:var(--font-mono); font-size:19px; font-weight:650;
  color:var(--text); letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.dash-date span{ font-size:11px; color:var(--muted-2) }

/* ---- 指标卡：左上角状态点 + 顶部一道渐变高光 ---- */
.metric-card{ position:relative; overflow:hidden }
.metric-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--brand),transparent 70%);
  opacity:0; transition:opacity .25s var(--ease);
}
.metric-card:hover::after{ opacity:1 }
.metric-card .m-dot{
  position:absolute; right:14px; top:14px; width:6px; height:6px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 3px var(--brand-50);
}
.metric-card .m-dot.ok{ background:var(--ok); box-shadow:0 0 0 3px #ECFDF3 }
.metric-card .m-dot.warn{ background:var(--warn); box-shadow:0 0 0 3px #FFFAEB }
.metric-card .m-dot.danger{ background:var(--danger); box-shadow:0 0 0 3px #FEF3F2; position:relative }
.metric-card .m-dot.danger::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  box-shadow:0 0 0 2px var(--danger);
  animation:ringPulse 2s ease-in-out infinite;
}
/* 脉冲一律用 transform + opacity 做，不要动 box-shadow。
   box-shadow 是绘制属性，动画期间每帧都要重绘元素；
   transform/opacity 是合成属性，交给 GPU，主线程零开销。
   这几个点是常驻的（未读角标、录音指示、告警指标），
   用错属性的代价是全天候的。 */
@keyframes ringPulse{ 0%,100%{ transform:scale(1); opacity:.55 } 50%{ transform:scale(2.1); opacity:0 } }
.m-value{ font-variant-numeric:tabular-nums }

/* ---- 通用卡片头 ---- */
.dash-2col{ grid-template-columns:1fr 1fr !important; align-items:stretch }
@media(max-width:1100px){ .dash-2col{ grid-template-columns:1fr !important } }
/* 网格单元格本身已经等高（grid 默认 stretch），但里面的 .dash-card 是普通块级元素，
   不会自动撑满格子——内容少的那张卡边框就比旁边矮一截，两行对不齐。
   包一层 flex 让卡片真正填满格子，而不是留白飘在格子里。 */
.dash-2col > div{ display:flex; min-width:0 }
.dash-2col > div > .dash-card{ flex:1; display:flex; flex-direction:column; min-width:0 }
.dash-card.tech{ position:relative; overflow:hidden }
.dash-card.tech::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--brand-100) 30%,var(--brand-100) 70%,transparent);
}
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px }
.card-top h3{ margin:0; font-size:14.5px; font-weight:650; letter-spacing:-.01em }
.card-sub{ font-size:11px; color:var(--muted); margin-top:3px; line-height:1.6 }

/* ---- 我的日程 ---- */
.sched-chips{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:14px }
@media(max-width:900px){ .sched-chips{ grid-template-columns:repeat(3,1fr) } }
.sched-chip{
  border:1px solid var(--line); border-radius:11px; padding:10px 8px; text-align:center;
  cursor:pointer; background:#fff;
  /* 原来是 transition:all。all 会让浏览器在每次状态变化时比对**所有**可动画属性，
     首页这排六个格子是最常被鼠标扫过的地方，代价按次累积。
     这里实际只变四个属性，写清楚即可。 */
  transition:border-color .18s var(--ease), transform .18s var(--ease),
             box-shadow .18s var(--ease), background .18s var(--ease);
}
.sched-chip:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-sm) }
.sched-chip.on{ border-color:var(--brand); background:var(--brand-50); box-shadow:0 0 0 3px var(--brand-50) }
.sched-chip .n{ font-size:21px; font-weight:680; line-height:1.1; font-variant-numeric:tabular-nums }
.sched-chip .l{ font-size:10.5px; color:var(--muted); margin-top:3px }
.sched-chip.empty .n{ color:var(--muted-2) }
.sched-chip.overdue .n{ color:var(--danger) }
.sched-chip.today .n{ color:var(--brand) }
.sched-chip.week .n{ color:var(--warn) }
.sched-chip.outing .n{ color:var(--brass) }

.sched-list{ max-height:290px; overflow-y:auto }
.sched-row{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:9px;
  cursor:pointer; transition:background .15s var(--ease);
}
.sched-row:hover{ background:var(--brand-50) }
.sched-row b{ font-size:12.5px; font-weight:560 }
.sched-row .sub{ font-size:10.5px; color:var(--muted-2); margin-top:2px }
.sched-due{
  font-size:10.5px; color:var(--muted); white-space:nowrap; text-align:right;
  font-family:var(--font-mono); line-height:1.5;
}
.sched-due.over{ color:var(--danger); font-weight:600 }
.sched-empty{ color:var(--muted); font-size:12px; padding:20px 0; line-height:1.9 }

/* ---- 知识治理 ---- */
.gov-list{ margin-bottom:14px }
.gov-row{
  display:flex; align-items:center; gap:11px; padding:10px 8px; border-radius:10px;
  cursor:pointer; transition:background .15s var(--ease);
}
.gov-row:hover{ background:var(--brand-50) }
.gov-row:hover .gov-arrow{ transform:translateX(3px); color:var(--brand) }
.gov-row b{ font-size:12.5px; font-weight:580 }
.gov-row .sub{ font-size:10.5px; color:var(--muted-2); margin-top:2px }
.gov-arrow{ color:var(--muted-2); font-size:13px; transition:color .18s var(--ease), transform .18s var(--ease) }
.gov-seal{
  width:26px; height:26px; border-radius:9px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:650; color:#fff;
}
.gov-seal.danger{ background:var(--danger) }
.gov-seal.brass{ background:var(--brass) }
.gov-seal.ok{ background:var(--ok) }
.gov-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  border-top:1px solid var(--line); padding-top:12px;
}
.gov-stats div{ text-align:center }
.gov-stats b{ display:block; font-size:17px; font-weight:670; font-variant-numeric:tabular-nums }
.gov-stats b.bad{ color:var(--danger) }
.gov-stats span{ font-size:10px; color:var(--muted-2) }

/* ---- Token 使用 ---- */
.tok-today{ text-align:right }
.tok-today b{ display:block; font-size:17px; font-weight:670; font-family:var(--font-mono) }
.tok-today span{ font-size:10px; color:var(--muted-2) }
.tok-main{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:12px }
.tok-big b{ font-size:30px; font-weight:680; letter-spacing:-.02em; font-family:var(--font-mono); line-height:1 }
.tok-big span{ display:block; font-size:11px; color:var(--muted); margin-top:4px }
.tok-split{ display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--muted) }
.tok-split i{ width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:6px }
.tok-split i.in{ background:var(--brand) }
.tok-split i.out{ background:var(--brass) }
.tok-split b{ color:var(--text); font-family:var(--font-mono) }
.tok-bars{ display:flex; align-items:flex-end; gap:5px; height:74px; margin-bottom:6px }
.tok-bars i{
  flex:1; border-radius:5px 5px 2px 2px; min-height:5px;
  background:linear-gradient(180deg,var(--brand),#8FA3FF);
  transition:transform .16s var(--ease);
  animation:barGrow .5s var(--ease-out) both;
  transform-origin:bottom;
}
@keyframes barGrow{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
.tok-bars i:hover{ filter:brightness(1.12); transform:scaleY(1.04) }
.tok-none{ font-size:11.5px; color:var(--muted); align-self:center }
.tok-axis{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--muted-2) }
.tok-models{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px }
.tok-model{ display:flex; align-items:center; gap:10px; padding:4px 0; font-size:11px }
.tok-model .mn{ flex:1; font-family:var(--font-mono); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tok-model .mv{ font-weight:650; font-family:var(--font-mono) }
.tok-model .mc{ color:var(--muted-2); min-width:46px; text-align:right }

/* ---- 最近入库 ---- */
.feed-list{ max-height:280px; overflow-y:auto }
.feed-row{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:9px;
  cursor:pointer; transition:background .15s var(--ease);
}
.feed-row:hover{ background:var(--brand-50) }
.feed-row b{ font-size:12.5px; font-weight:560 }
.feed-row .sub{ font-size:10.5px; color:var(--muted-2); margin-top:2px }

/* ---- 今日出勤 ---- */
.att-bar{ display:flex; gap:3px; height:7px; margin-bottom:14px }
.att-seg{ border-radius:4px; transition:flex .4s var(--ease) }
.att-seg.free{ background:var(--ok) }
.att-seg.out{ background:var(--brass) }
.att-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media(max-width:760px){ .att-cols{ grid-template-columns:1fr } }
.att-h{ font-size:10.5px; color:var(--muted); font-weight:650; margin-bottom:7px }
.att-h i{ width:8px; height:8px; border-radius:3px; display:inline-block; margin-right:6px }
.att-h i.free{ background:var(--ok) } .att-h i.out{ background:var(--brass) }
.att-row{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12px }
.att-row b{ font-weight:560 }
.att-row .rl{ font-size:10px; color:var(--muted-2) }
.att-row .sub{ font-size:10px; color:var(--muted-2); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.att-row .me{ font-size:9px; background:var(--brand); color:#fff; padding:1px 5px; border-radius:5px }
.att-row .ava{
  width:24px; height:24px; border-radius:8px; background:var(--ok); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:650;
}
.att-row .ava.out{ background:var(--brass) }
.att-none{ font-size:11.5px; color:var(--muted-2); padding:10px 0 }

/* ============================================================ 外出与出勤 */
.out-alert{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#FFFAEB; border:1px solid #FEDF89; border-radius:var(--radius);
  padding:12px 16px; font-size:12.5px; color:#93370D; margin-bottom:14px; line-height:1.7;
}
.out-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:14px;
}
.out-tabs{ display:flex; gap:4px; background:var(--line-soft); padding:4px; border-radius:11px }
.out-tab{
  padding:7px 16px; border-radius:8px; font-size:12.5px; color:var(--muted);
  cursor:pointer; font-weight:550; transition:all .18s var(--ease);
}
.out-tab:hover{ color:var(--text) }
.out-tab.on{ background:#fff; color:var(--brand-700); box-shadow:var(--shadow-xs) }
.out-filters{ display:flex; gap:8px; flex-wrap:wrap }
.out-filters select{
  border:1px solid var(--line); border-radius:9px; padding:7px 11px; font-size:12px;
  background:#fff; color:var(--text);
}
.out-filters select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50) }

/* ---- 月历 ---- */
.cal-week{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:8px;
  font-size:12px; color:var(--muted); font-weight:650; text-align:center;
}
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px }
.cal-cell{
  min-height:110px; border:1px solid var(--line); border-radius:10px; padding:9px;
  background:#fff; cursor:pointer; transition:all .16s var(--ease);
}
.cal-cell:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm) }
.cal-cell.empty{ background:transparent; border:none; cursor:default; min-height:0 }
.cal-cell.weekend{ background:#FCFCFD }
.cal-cell.today{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-50) }
.cal-d{ font-size:13.5px; font-weight:650; color:var(--muted); margin-bottom:7px;
  display:flex; align-items:center; gap:5px }
.cal-cell.today .cal-d{ color:var(--brand) }
.cal-today{ font-size:9.5px; background:var(--brand); color:#fff; padding:2px 6px; border-radius:5px; font-weight:600 }
.cal-items{ display:flex; flex-direction:column; gap:3px }
.cal-item{
  font-size:11.5px; padding:4px 7px; border-radius:6px; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border:1px solid transparent; transition:transform .14s var(--ease);
}
.cal-item:hover{ transform:translateX(2px) }
.cal-item b{ margin-right:4px; font-weight:650 }
.cal-item.proposed{ border-style:dashed; opacity:.82 }
.cal-more{ font-size:10.5px; color:var(--muted-2); padding-left:4px }
.k-visit{ background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100) }
.k-deliv{ background:#ECFDF3; color:#027A48; border-color:#ABEFC6 }
.k-meet{ background:#F4F3FF; color:#5925DC; border-color:#D9D6FE }
.k-train{ background:#FFFAEB; color:#B54708; border-color:#FEDF89 }
.k-leave{ background:#FEF3F2; color:#B42318; border-color:#FECDCA }
.k-other{ background:var(--line-soft); color:var(--muted); border-color:var(--line) }
.cal-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:11.5px; color:var(--muted) }
.cal-legend i{ width:11px; height:11px; border-radius:4px; display:inline-block; margin-right:5px; vertical-align:-1px }
.cal-legend i.proposed-demo{ border:1px dashed var(--muted-2); background:transparent }

/* ---- 时间线 ---- */
.tl-day{ display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-soft) }
.tl-day:last-child{ border-bottom:none }
.tl-day.today .tl-date b{ color:var(--brand) }
.tl-date{ width:78px; flex-shrink:0; text-align:right; padding-top:5px }
.tl-date b{ display:block; font-size:15px; font-weight:670; font-family:var(--font-mono) }
.tl-date span{ font-size:10.5px; color:var(--muted-2) }
.tl-date em{
  display:inline-block; font-style:normal; font-size:9px; background:var(--brand);
  color:#fff; padding:1px 6px; border-radius:5px; margin-top:3px;
}
.tl-count{ display:block; font-style:normal; font-size:9.5px; color:var(--muted-2); margin-top:3px }
.tl-items{ flex:1; min-width:0; display:flex; flex-direction:column; gap:14px;
  border-left:2px solid var(--line); padding-left:16px; position:relative }
/* 一天内按 上午/下午/全天 分组，每组一个小标签起头，不再是一天一整条堆下来 */
.tl-period{ display:flex; flex-direction:column; gap:8px }
.tl-period-h{ display:flex; align-items:center; gap:8px; margin-bottom:-2px }
.tl-period-tag{
  font-size:10px; font-weight:650; padding:2px 9px; border-radius:20px; letter-spacing:.02em;
}
.tl-period-tag.tl-am{ background:var(--brand-50); color:var(--brand-700) }
.tl-period-tag.tl-pm{ background:#FFF6ED; color:#B93815 }
.tl-period-tag.tl-full{ background:#ECFDF3; color:#027A48 }
.tl-period-line{ flex:1; height:1px; background:var(--line-soft) }
.tl-item{
  display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:#fff; position:relative;
  transition:all .16s var(--ease); cursor:pointer;
}
.tl-item::before{
  content:""; position:absolute; left:-21px; top:16px; width:8px; height:8px;
  border-radius:50%; background:var(--brand); border:2px solid #fff; box-shadow:0 0 0 2px var(--brand-50);
}
.tl-item:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm); transform:translateX(2px) }
.tl-item.s-PROPOSED{ border-style:dashed }
.tl-item.s-DECLINED,.tl-item.s-CANCELLED{ opacity:.55 }
.tl-item.s-DECLINED::before{ background:var(--danger); box-shadow:0 0 0 2px #FEF3F2 }
.tl-time{ font-size:10.5px; font-family:var(--font-mono); color:var(--muted); white-space:nowrap; padding-top:2px }
.tl-body{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.tl-body b{ font-size:12.5px; font-weight:620 }
.tl-title{ font-size:12.5px; color:var(--text) }
.tl-kind{ font-size:10px; color:var(--muted-2) }
.tl-note{ flex-basis:100%; font-size:10.5px; color:var(--muted); line-height:1.7; margin-top:2px }
.tl-act{ display:flex; gap:5px; flex-shrink:0 }

/* ---- 月度总结 ---- */
.sum-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px }
.sum-kpis div{ text-align:center; padding:12px 6px; background:var(--line-soft); border-radius:11px }
.sum-kpis b{ display:block; font-size:23px; font-weight:680; font-variant-numeric:tabular-nums }
.sum-kpis b.warn{ color:var(--warn) } .sum-kpis b.bad{ color:var(--danger) }
.sum-kpis span{ font-size:10.5px; color:var(--muted) }
.sum-sec{ font-size:10.5px; color:var(--muted-2); font-weight:650; letter-spacing:.06em; margin-bottom:8px }
.sum-bar-row{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:11.5px }
.sum-bar-row .n{ width:62px; flex-shrink:0; font-weight:560 }
.sum-bar-row .v{ width:96px; text-align:right; color:var(--muted); font-family:var(--font-mono); font-size:10.5px }
.sum-bar{ flex:1; height:9px; background:var(--line-soft); border-radius:6px; overflow:hidden }
.sum-bar i{
  display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--brand),#8FA3FF);
  animation:sumGrow .6s var(--ease-out) both; transform-origin:left;
}
@keyframes sumGrow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.sum-row{ display:flex; align-items:center; justify-content:space-between; padding:7px 0;
  border-bottom:1px solid var(--line-soft); font-size:12px }
.sum-row:last-child{ border-bottom:none }
.sum-row b{ font-family:var(--font-mono); font-weight:650 }

/* ---- 月历分层版：全天栏 + 上午/下午栏，参考成熟日历的 all-day / time-grid 结构 ---- */
#outMain{ min-width:0; max-width:100% }
.out-calendar-card{ min-width:0; overflow:hidden }
.cal-period-guide{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:12px;
  margin-bottom:12px; border-bottom:1px solid var(--line-soft); font-size:11.5px;
}
.cal-period-guide b{ font-size:13px; margin-right:2px }
.cal-period-guide i{ margin-left:auto; color:var(--muted-2); font-style:normal }
.out-calendar-shell{ max-width:100%; overflow-x:auto; padding-bottom:3px }
.out-calendar-shell .cal-week,.out-calendar-shell .cal-grid{ min-width:920px }
.cal-cell{ min-height:198px; padding:10px 9px }
.cal-layers{ display:flex; flex-direction:column; gap:6px }
.cal-layer{
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:6px; min-height:36px;
  padding:5px; border:1px solid var(--line-soft); border-radius:8px; background:#fff;
}
.cal-layer.cal-full{ border-color:#ABEFC6; background:#F6FEF9 }
.cal-layer.cal-am{ border-color:var(--brand-100); background:#F8FAFF }
.cal-layer.cal-pm{ border-color:#FEDF89; background:#FFFCF5 }
.cal-layer-label{
  display:flex; align-items:center; justify-content:center; border-right:1px solid currentColor;
  font-size:10px; font-weight:700; color:var(--muted-2); line-height:1;
}
.cal-full .cal-layer-label{ color:#027A48 }
.cal-am .cal-layer-label{ color:var(--brand-700) }
.cal-pm .cal-layer-label{ color:#B54708 }
.cal-layer-items{ min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px }
.cal-item{ display:flex; align-items:center; gap:5px; min-width:0; padding:3px 6px }
.cal-item:hover{ transform:translateY(-1px); box-shadow:var(--shadow-xs) }
.cal-item b{ flex-shrink:0; max-width:60px; overflow:hidden; text-overflow:ellipsis }
.cal-item-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cal-mileage{ margin-left:auto; flex-shrink:0; font-family:var(--font-mono); font-size:9.5px; opacity:.78 }
.cal-more{ padding:2px 4px; font-size:10px; color:var(--muted-2) }
.cal-legend{ align-items:center; gap:7px; padding-top:12px; margin-top:12px; border-top:1px solid var(--line-soft) }
.cal-legend b{ margin-right:2px; color:var(--text); font-size:10.5px }
.cal-legend-chip{
  display:inline-flex; align-items:center; min-height:23px; padding:3px 8px; border:1px solid var(--line);
  border-radius:7px; font-size:10px; font-weight:560;
}
.cal-legend-chip.proposed-demo{ background:#fff; border-style:dashed; color:var(--muted) }
.mileage-pill{ color:#175CD3; background:#EFF8FF; border-color:#B2DDFF }

/* ---- 月度总结：所有内容限定在容器内，按员工独立成卡 ---- */
.outing-summary{ width:100%; min-width:0; display:flex; flex-direction:column; gap:14px }
.sum-overview-card{ min-width:0 }
.sum-overview-card .crm-card-head{ align-items:flex-start }
.sum-overview-card .crm-card-head p{ margin:3px 0 0; color:var(--muted); font-size:10.5px }
.sum-rate{
  flex-shrink:0; padding:5px 9px; border-radius:7px; background:#F6FEF9;
  border:1px solid #ABEFC6; color:#027A48; font-family:var(--font-mono); font-size:10px;
}
.sum-kpis-6{ grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:0 }
.sum-kpis-6 div{ min-width:0 }
.sum-kpis-6 b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px }
.sum-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; min-width:0 }
.sum-section-head div{ display:flex; align-items:center; gap:8px }
.sum-section-head b{ font-size:13px }
.sum-section-head span{ color:var(--muted); font-size:10px }
.sum-section-head p{ margin:0; color:var(--muted-2); font-size:10px }
.sum-member-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
  gap:12px; width:100%; min-width:0;
}
.sum-member-card{
  min-width:0; overflow:hidden; padding:14px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-xs); transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.sum-member-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm) }
.sum-member-card.is-empty{ background:#FCFCFD; box-shadow:none }
.sum-member-card header{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:11px }
.sum-member-card h4{ margin:0; font-size:13px }
.sum-member-card header div>span{ font-size:10px; color:var(--muted-2) }
.sum-member-state{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end }
.sum-member-metrics{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px }
.sum-member-metrics div{ min-width:0; padding:8px 5px; text-align:center; background:var(--line-soft); border-radius:8px }
.sum-member-metrics b{ display:block; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-family:var(--font-mono) }
.sum-member-metrics span{ font-size:9px; color:var(--muted-2) }
.sum-member-kinds{ display:flex; gap:5px; flex-wrap:wrap; padding:10px 0 3px }
.sum-member-kinds span{ padding:3px 7px; border-radius:6px; background:var(--brand-50); color:var(--brand-700); font-size:9.5px }
.sum-member-items{ margin-top:9px; border-top:1px solid var(--line-soft) }
.sum-member-item{
  width:100%; min-width:0; display:grid; grid-template-columns:34px 38px minmax(0,1fr) 58px auto;
  align-items:center; gap:6px; padding:7px 2px; border:0; border-bottom:1px solid var(--line-soft);
  background:transparent; color:var(--text); text-align:left; cursor:pointer; font:inherit;
}
.sum-member-item:hover{ background:var(--brand-50) }
.sum-member-item:last-child{ border-bottom:0 }
.sum-member-item b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px }
.sum-member-item>span:not(.tl-period-tag){ color:var(--muted); font-size:9.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sum-member-item em{ color:#175CD3; font-style:normal; font-family:var(--font-mono); font-size:9px; white-space:nowrap }
.sum-item-date{ font-family:var(--font-mono) }
.sum-member-empty{ padding:12px 2px 2px; color:var(--muted-2); font-size:10.5px }
.sum-breakdown-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0 }
.sum-breakdown-grid>*{ min-width:0 }

/* ---- 外出里程录入与图片凭证 ---- */
.mileage-form-block{ padding:13px; border:1px solid #B2DDFF; border-radius:10px; background:#F5FAFF }
.mileage-form-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:11px }
.mileage-form-head div{ display:flex; flex-direction:column; gap:2px }
.mileage-form-head b{ font-size:12px }
.mileage-form-head div span,.mileage-form-block>p{ color:var(--muted); font-size:9.5px; line-height:1.6 }
.mileage-form-head>span{ flex-shrink:0; padding:4px 7px; border-radius:6px; background:#fff; color:#175CD3; font-family:var(--font-mono); font-size:9.5px }
/* 里程只填一个数（实际行驶公里数），网格从三列（出发/返回/预览）收窄成两列（里程/预览） */
.mileage-input-grid{ display:grid; grid-template-columns:1fr 128px; gap:8px; align-items:end; margin-bottom:10px }
.mileage-preview{ display:flex; flex-direction:column; justify-content:center; min-height:55px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#fff }
.mileage-preview b{ font-size:14px; font-family:var(--font-mono) }
.mileage-preview span{ color:var(--muted); font-size:9px }
.mileage-preview.ready{ border-color:#75E0A7; background:#F6FEF9 }
.mileage-rate-warn{ margin:7px 0 0; color:#B54708!important }
.mileage-rate-warn a{ color:#B54708; font-weight:700; text-decoration:underline; margin-left:4px; white-space:nowrap }
/* 从预约弹窗跳到设置中心之后，短暂高亮一下目标卡片，人才知道"就是这块" */
@keyframes flashHighlight{
  0%,100%{ box-shadow:none }
  25%,75%{ box-shadow:0 0 0 3px #FEDF89 }
}
.flash-highlight{ animation:flashHighlight 1.8s ease-in-out; border-radius:10px }
.mileage-detail{ padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--line-soft) }
.mileage-detail.has-mileage{ border-color:#B2DDFF; background:#F5FAFF }
.mileage-detail-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px }
.mileage-detail-head b{ font-size:11.5px }
.mileage-detail-head span{ color:var(--muted); font-family:var(--font-mono); font-size:9.5px }
.mileage-detail-metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
.mileage-detail-metrics div{ min-width:0; padding:7px; border-radius:7px; background:#fff; text-align:center }
.mileage-detail-metrics b{ display:block; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-mono); font-size:12px }
.mileage-detail-metrics span{ color:var(--muted-2); font-size:8.5px }
.mileage-photo-strip{ display:flex; gap:7px; overflow-x:auto; margin-top:9px; padding-bottom:2px }
.mileage-photo-strip a,.mileage-photo-manage a{ display:block; flex-shrink:0 }
.mileage-photo-strip img{ width:68px; height:54px; border-radius:7px; border:1px solid var(--line); object-fit:cover; background:#fff }
.mileage-photo-manage{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.mileage-photo-manage>div{ min-width:0; padding:7px; border:1px solid var(--line); border-radius:8px; background:#fff }
.mileage-photo-manage img{ width:100%; height:82px; border-radius:6px; object-fit:cover; background:var(--line-soft) }
.mileage-photo-manage span{ display:block; margin:5px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:var(--muted) }

@media(max-width:1180px){
  .sum-kpis-6{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media(max-width:760px){
  .sum-section-head{ align-items:flex-start; flex-direction:column }
  .sum-member-list,.sum-breakdown-grid{ grid-template-columns:1fr }
  .sum-member-metrics{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .sum-member-item{ grid-template-columns:32px 38px minmax(0,1fr) }
  .sum-member-item>span:nth-of-type(3),.sum-member-item em{ display:none }
  /* 只剩一个里程输入框 + 一个预览框，窄屏干脆上下堆叠，比硬挤在一行好输入 */
  .mileage-input-grid{ grid-template-columns:1fr }
  .mileage-photo-manage{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
.tok-warn{
  font-size:10.5px; color:var(--warn); background:#FFFAEB; border:1px solid #FEDF89;
  border-radius:8px; padding:7px 10px; margin-top:10px; line-height:1.7;
}

/* ============================================================ 谈单建议（① 象限） */
/* 现场读的东西，行距要松、字号不能小；但整块必须能滚动，
   不然一段长建议会把象限撑开、把下面三个象限挤出屏幕 */
#solutionBlock{ max-height:100%; overflow-y:auto; font-size:12.5px; line-height:1.85; color:var(--text) }
#solutionBlock .adv-wait{
  display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; padding:6px 0;
}
#solutionBlock .adv-body strong{ color:var(--brand-700) }
#solutionBlock .adv-body p{ margin:6px 0 }
#solutionBlock .adv-body ul,#solutionBlock .adv-body ol{ margin:6px 0; padding-left:18px }
#solutionBlock .adv-body li{ margin:3px 0 }
#solutionBlock .adv-body table{ font-size:11.5px }
#solutionBlock .adv-foot{
  display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:8px;
  border-top:1px dashed var(--line); font-size:10.5px; color:var(--muted-2);
}
#solutionBlock .adv-foot span{ margin-right:auto }
/* 引用角标：markdown.js 已经把 [1] 转成了 .cite，但原型只给 .bubble 作用域写了样式，
   建议面板里就成了裸露的数字，读起来像「裁员。14」。这里补一份同款样式。 */
#solutionBlock .cite{
  display:inline-block; font-family:var(--font-mono); font-size:10px; background:var(--brand-50);
  color:var(--brand-700); border:1px solid var(--brand-100); border-radius:5px;
  padding:0 5px; margin:0 2px; cursor:pointer; vertical-align:1px;
}
#solutionBlock .cite:hover{ background:var(--brand); color:#fff; border-color:var(--brand) }

/* ============================================================ 实时录音转写 */
.rec-bar{
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:linear-gradient(90deg,#FEF3F2,#fff); border-bottom:1px solid var(--line);
  font-size:11px; color:var(--muted);
}
.rec-bar .rec-live{
  width:8px; height:8px; border-radius:50%; background:var(--danger); flex-shrink:0;
  animation:recPulse 1.2s ease-in-out infinite;
}
/* 只动 opacity。原来还带 box-shadow，那一项让这个常驻指示器每帧重绘 */
@keyframes recPulse{ 0%,100%{opacity:1} 50%{opacity:.5} }
/* 音量条：让人确认「麦克风真的听到了」——没有这个反馈，静默失败时用户只会以为系统坏了 */
.rec-bar .rec-lv{
  width:70px; height:4px; border-radius:3px; background:var(--line); overflow:hidden; flex-shrink:0;
}
.rec-bar .rec-lv i{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,var(--ok),var(--warn)); transition:width .1s linear;
}
.rec-bar .rec-tip{ font-variant-numeric:tabular-nums }

/* 识别中的占位行：半透明 + 呼吸，和已确认的文字区分开 */
.turn.pending{ opacity:.55; animation:recPulse 1.4s ease-in-out infinite }
.turn.pending .txt{ font-style:italic }

/* 会话栏里的系统提示（录音不可用、权限被拒等）——不用弹窗打断谈单 */
.tr-notice{
  margin:10px 0; padding:10px 12px; border-radius:9px; font-size:11.5px; line-height:1.8;
  background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100);
}
.tr-notice.warn{ background:#FFFAEB; color:#B54708; border-color:#FEDF89 }