/* ============================================================ Voice Lab 控制台 —— 设计系统（shadcn/ui 语言：Radix 中性 slate + 蓝色主色） 自托管，无 CDN。token 用 HSL 三元组，支持 hsl(var(--x) / alpha)。 class 名与 console.html/console.js 完全一致，仅提升视觉与交互质量。 ============================================================ */ :root{ --background:0 0% 100%; --foreground:222 47% 11%; --card:0 0% 100%; --card-foreground:222 47% 11%; --muted:210 40% 96%; --muted-foreground:215 16% 47%; --border:214 32% 91%; --input:214 32% 88%; --ring:221 83% 53%; --primary:221 83% 53%; --primary-foreground:0 0% 100%; --secondary:210 40% 96%; --secondary-foreground:222 47% 11%; --accent:214 44% 92%; --success:142 68% 36%; --warning:30 90% 42%; --destructive:0 72% 48%; --sidebar:210 40% 98.5%; --sidebar-border:214 32% 91%; --radius:0.6rem; --radius-sm:0.45rem; --shadow-xs:0 1px 2px hsl(222 47% 11% / .05); --shadow-sm:0 1px 2px hsl(222 47% 11% / .06),0 1px 1px hsl(222 47% 11% / .04); --shadow:0 1px 3px hsl(222 47% 11% / .08),0 8px 24px hsl(222 47% 11% / .06); --shadow-lg:0 12px 40px hsl(222 47% 11% / .16); --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; --nav-w:244px; --top-h:60px; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --background:222 42% 6%; --foreground:210 40% 98%; --card:222 34% 9%; --card-foreground:210 40% 98%; --muted:217 30% 15%; --muted-foreground:216 18% 63%; --border:217 28% 18%; --input:217 26% 23%; --ring:221 83% 62%; --primary:221 83% 61%; --primary-foreground:222 47% 8%; --secondary:217 30% 15%; --secondary-foreground:210 40% 98%; --accent:217 30% 19%; --success:142 58% 47%; --warning:36 92% 56%; --destructive:0 74% 60%; --sidebar:222 38% 7.5%; --sidebar-border:217 28% 16%; --shadow-xs:0 1px 2px hsl(0 0% 0% / .4); --shadow-sm:0 1px 2px hsl(0 0% 0% / .4); --shadow:0 1px 3px hsl(0 0% 0% / .5),0 8px 24px hsl(0 0% 0% / .4); --shadow-lg:0 16px 50px hsl(0 0% 0% / .55); } } :root[data-theme="dark"]{ --background:222 42% 6%; --foreground:210 40% 98%; --card:222 34% 9%; --card-foreground:210 40% 98%; --muted:217 30% 15%; --muted-foreground:216 18% 63%; --border:217 28% 18%; --input:217 26% 23%; --ring:221 83% 62%; --primary:221 83% 61%; --primary-foreground:222 47% 8%; --secondary:217 30% 15%; --secondary-foreground:210 40% 98%; --accent:217 30% 19%; --success:142 58% 47%; --warning:36 92% 56%; --destructive:0 74% 60%; --sidebar:222 38% 7.5%; --sidebar-border:217 28% 16%; --shadow-xs:0 1px 2px hsl(0 0% 0% / .4); --shadow-sm:0 1px 2px hsl(0 0% 0% / .4); --shadow:0 1px 3px hsl(0 0% 0% / .5),0 8px 24px hsl(0 0% 0% / .4); --shadow-lg:0 16px 50px hsl(0 0% 0% / .55); } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground)); font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} input,select,textarea{font:inherit} a{color:hsl(var(--primary));text-decoration:none} h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.012em} .hidden{display:none!important} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-thumb{background:hsl(var(--muted-foreground)/.28);border-radius:9px; border:3px solid hsl(var(--background))} ::-webkit-scrollbar-thumb:hover{background:hsl(var(--muted-foreground)/.45)} :focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:4px} /* ---------------- 登录门 ---------------- */ /* ---------------- 应用骨架 ---------------- */ .app{display:grid;grid-template-columns:var(--nav-w) 1fr;grid-template-rows:var(--top-h) 1fr; grid-template-areas:"brand top" "nav main";height:100vh;height:100dvh} .brand{grid-area:brand;display:flex;align-items:center;gap:11px;padding:0 20px; border-bottom:1px solid hsl(var(--sidebar-border));border-right:1px solid hsl(var(--sidebar-border)); background:hsl(var(--sidebar))} .brand .logo{width:30px;height:30px;border-radius:9px;background:hsl(var(--primary));color:hsl(var(--primary-foreground)); display:grid;place-items:center;font-size:15px;flex:0 0 auto;box-shadow:var(--shadow-xs)} .brand .name{font-weight:750;font-size:15px;letter-spacing:-.015em;line-height:1.1} .brand .name small{display:block;font-size:10px;font-weight:500;color:hsl(var(--muted-foreground));letter-spacing:.14em;margin-top:1px} /* 顶部状态条 */ .topbar{grid-area:top;display:flex;align-items:center;gap:14px;padding:0 22px; border-bottom:1px solid hsl(var(--border));background:hsl(var(--background)/.85);backdrop-filter:blur(8px)} .topbar .health{display:flex;align-items:center;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none} .topbar .health::-webkit-scrollbar{display:none} .hchip{display:flex;align-items:center;gap:7px;font-size:12.5px;color:hsl(var(--foreground));white-space:nowrap; padding:5px 11px;border-radius:8px;background:hsl(var(--muted)/.6);border:1px solid hsl(var(--border)/.7)} .hchip .lbl{color:hsl(var(--muted-foreground));font-size:11px;font-family:var(--mono);letter-spacing:.02em} .hchip b{color:hsl(var(--foreground));font-weight:650} .topbar .spacer{flex:1} .role-badge{font-size:11px;font-family:var(--mono);padding:4px 10px;border-radius:20px; background:hsl(var(--primary)/.12);color:hsl(var(--primary));letter-spacing:.03em;font-weight:600} .icon-btn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center; color:hsl(var(--muted-foreground));border:1px solid transparent;transition:background .15s,color .15s,border-color .15s} .icon-btn:hover{background:hsl(var(--accent));color:hsl(var(--foreground))} /* 侧导航 */ .nav{grid-area:nav;border-right:1px solid hsl(var(--sidebar-border));background:hsl(var(--sidebar)); padding:14px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto} /* 分组标题要**大于**条目文字（user：标题不能比类目还小）——只留两大类 */ .nav .group{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800; letter-spacing:.1em;color:hsl(215 40% 92%);padding:20px 12px 8px} .nav .group::before{content:"";width:4px;height:15px;border-radius:3px;flex:0 0 auto; background:linear-gradient(180deg,hsl(var(--primary)),hsl(var(--primary)/.45))} .nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px; color:hsl(var(--muted-foreground));font-weight:500;font-size:13.5px;position:relative; transition:background .14s,color .14s} .nav a .ico{width:18px;text-align:center;font-size:15px;flex:0 0 auto;opacity:.92} .nav a:hover{background:hsl(var(--accent));color:hsl(var(--foreground))} .nav a.active{background:hsl(var(--primary)/.11);color:hsl(var(--primary));font-weight:600} .nav a.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px; border-radius:0 3px 3px 0;background:hsl(var(--primary))} .nav a .tag{margin-left:auto;font-size:10px;font-family:var(--mono);color:hsl(var(--muted-foreground))} .nav a.active .tag{color:hsl(var(--primary))} /* 一级项右侧的下拉小箭头：可点，独立的 hitbox（点它只切换下拉，不导航） */ .nav > a .nav-caret{margin-left:auto;display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:6px;color:hsl(var(--muted-foreground)/.75); transition:transform .2s cubic-bezier(.4,0,.2,1),background .14s,color .14s;flex:0 0 auto} .nav > a .nav-caret svg{width:13px;height:13px} .nav > a .nav-caret:hover{background:hsl(var(--accent));color:hsl(var(--foreground))} .nav > a.expanded .nav-caret{transform:rotate(180deg)} /* 打开时箭头翻转 */ .nav > a.active .nav-caret{color:hsl(var(--primary))} /* 二级菜单：折叠/展开由 .open 控制。 🔴 .nav 是 flex 列容器，它对子项的 max-height 过渡动画不友好（overflow:hidden 让 min-height:auto→0，但 max-height 与 flex 布局互相打架，实测收不回去）。 改用 display:none / flex 硬切 —— 没有平滑动画但可靠，侧栏这种小菜单差别很小。 */ .nav .nav-sub{display:none;flex-direction:column;gap:1px;padding:0;margin:0;flex:0 0 auto} .nav .nav-sub.open{display:flex;padding:2px 0 4px 0;margin:0 0 2px 0} /* 二级菜单：左侧一条淡淡的引导线（像目录树），每一项前面一个小圆点；active 用胶囊背景+主色圆点 */ .nav .nav-sub a{padding:7px 12px 7px 40px;font-size:12.5px;font-weight:500;border-radius:8px; color:hsl(var(--muted-foreground)/.9);position:relative;margin-left:22px} /* 引导线已按 user 要求去掉（2026-08-30："不要显示这条实线"）——只留每项前的小圆点 */ .nav .nav-sub{position:relative} /* 每项前一个小圆点（12px 到引导线的位置） */ .nav .nav-sub a::after{content:"";position:absolute;left:11px;top:50%;width:5px;height:5px; border-radius:50%;background:hsl(var(--muted-foreground)/.4); transform:translateY(-50%);transition:background .15s,box-shadow .15s,transform .15s} .nav .nav-sub a:hover{background:hsl(var(--accent));color:hsl(var(--foreground))} .nav .nav-sub a:hover::after{background:hsl(var(--muted-foreground)/.75)} .nav .nav-sub a.active{background:hsl(var(--primary)/.1);color:hsl(var(--primary));font-weight:600} .nav .nav-sub a.active::after{background:hsl(var(--primary));width:7px;height:7px; box-shadow:0 0 0 3px hsl(var(--primary)/.15)} .nav .nav-sub a.active::before{display:none} /* 二级菜单不要再画左侧那条主色带（父级已有） */ .nav .grow{flex:1} .nav .navfoot{padding:12px;color:hsl(var(--muted-foreground)/.7);font-size:11px; border-top:1px solid hsl(var(--border)/.6);margin-top:8px} /* 内容区 */ .main{grid-area:main;overflow-y:auto;padding:30px 34px 72px} .view{max-width:1060px;margin:0 auto;animation:fade .22s cubic-bezier(.16,1,.3,1)} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .view-head{margin-bottom:24px} .view-head h1{font-size:25px;font-weight:700;letter-spacing:-.02em} .view-head p{color:hsl(var(--muted-foreground));margin:7px 0 0;font-size:13.5px;max-width:72ch} /* 卡片 */ .card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius); box-shadow:var(--shadow-xs);margin-bottom:18px;overflow:hidden} .card-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid hsl(var(--border)/.7)} .card-head h3{font-size:14.5px;font-weight:650} .card-head .sub{color:hsl(var(--muted-foreground));font-size:12px;font-weight:400} .card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center} .card-body{padding:20px} .card-body.tight{padding:6px 20px} /* 网格 */ .grid{display:grid;gap:16px} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}} /* 统计卡 */ .stat{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius); padding:17px 19px;box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s} .stat:hover{border-color:hsl(var(--border));box-shadow:var(--shadow-sm)} .stat .k{font-size:11px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;color:hsl(var(--muted-foreground))} .stat .v{font-size:27px;font-weight:700;margin-top:7px;display:flex;align-items:center;gap:10px; letter-spacing:-.025em;font-variant-numeric:tabular-nums} .stat .foot{font-size:12px;color:hsl(var(--muted-foreground));margin-top:5px} /* 状态灯 & 药丸 */ .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:hsl(var(--muted-foreground)/.55)} .dot.lg{width:11px;height:11px} .dot.ok{background:hsl(var(--success));box-shadow:0 0 0 3px hsl(var(--success)/.16)} .dot.crit{background:hsl(var(--destructive));box-shadow:0 0 0 3px hsl(var(--destructive)/.16)} .dot.warn{background:hsl(var(--warning));box-shadow:0 0 0 3px hsl(var(--warning)/.16)} .dot.run{background:hsl(var(--primary));animation:objpulse 1.8s ease-in-out infinite} .dot.off{background:hsl(var(--muted-foreground)/.5)} .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600; padding:3px 10px;border-radius:20px;background:hsl(var(--muted));color:hsl(var(--muted-foreground)); white-space:nowrap;border:1px solid hsl(var(--border)/.6)} .pill.ok{background:hsl(var(--success)/.13);color:hsl(var(--success));border-color:hsl(var(--success)/.25)} .pill.crit{background:hsl(var(--destructive)/.13);color:hsl(var(--destructive));border-color:hsl(var(--destructive)/.25)} .pill.warn{background:hsl(var(--warning)/.14);color:hsl(var(--warning));border-color:hsl(var(--warning)/.28)} /* 线路行 */ .linerow{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid hsl(var(--border)/.6)} .linerow:first-child{border-top:0} .linerow .id{font-weight:600} .linerow .meta{color:hsl(var(--muted-foreground));font-size:12px;font-family:var(--mono)} .linerow .right{margin-left:auto;display:flex;align-items:center;gap:10px} .err-note{margin:0 20px 14px;padding:12px 14px;border-radius:var(--radius-sm); background:hsl(var(--destructive)/.1);border:1px solid hsl(var(--destructive)/.28);color:hsl(var(--destructive)); font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word} .err-note b{color:hsl(var(--destructive));filter:brightness(1.1)} /* 表单 */ .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .field:last-child{margin-bottom:0} .field .fname{font-size:12.5px;font-weight:600;color:hsl(var(--foreground));display:flex;gap:8px;align-items:baseline} .field .fname em{font-style:normal;font-weight:400;color:hsl(var(--muted-foreground));font-size:11.5px} .field input[type=text],.field input:not([type]),.field input[type=password], .field input[type=number],.field input[type=tel],.field select,.field textarea{ width:100%;height:38px;padding:0 12px;border:1px solid hsl(var(--input));border-radius:var(--radius-sm); background:hsl(var(--background));color:hsl(var(--foreground));transition:border-color .15s,box-shadow .15s} .field select{appearance:none;background-repeat:no-repeat;background-position:right 11px center;padding-right:34px; background-image:linear-gradient(45deg,transparent 50%,hsl(var(--muted-foreground)) 50%),linear-gradient(135deg,hsl(var(--muted-foreground)) 50%,transparent 50%); background-position:calc(100% - 18px) 16px,calc(100% - 13px) 16px;background-size:5px 5px,5px 5px} .field textarea{height:auto;padding:11px 12px;resize:vertical;line-height:1.6;font-family:var(--mono);font-size:12.5px} .field input:focus,.field select:focus,.field textarea:focus{ outline:0;border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring)/.18)} .field input::placeholder,.field textarea::placeholder{color:hsl(var(--muted-foreground)/.7)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} @media(max-width:640px){.row2,.row3{grid-template-columns:1fr}} /* 开关 */ .toggle{display:flex;align-items:center;gap:12px;padding:11px 0;cursor:pointer} .toggle .tx{flex:1} .toggle .tx b{display:block;font-size:13px;font-weight:600} .toggle .tx small{color:hsl(var(--muted-foreground));font-size:11.5px} .sw{width:42px;height:24px;border-radius:20px;background:hsl(var(--muted-foreground)/.35);position:relative; flex:0 0 auto;transition:background .18s} .sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 3px hsl(0 0% 0% / .35);transition:transform .18s} .toggle input{position:absolute;opacity:0;width:0;height:0} .toggle input:checked + .sw{background:hsl(var(--primary))} .toggle input:checked + .sw::after{transform:translateX(18px)} .toggle input:focus-visible + .sw{outline:2px solid hsl(var(--ring));outline-offset:2px} /* range */ input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:hsl(var(--muted)); border-radius:6px;outline:0} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%; background:hsl(var(--primary));cursor:pointer;box-shadow:var(--shadow-xs);transition:transform .1s} input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)} .rangeval{font-family:var(--mono);color:hsl(var(--primary));font-weight:700} /* 按钮 */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px; border-radius:var(--radius-sm);background:hsl(var(--secondary));color:hsl(var(--secondary-foreground)); border:1px solid hsl(var(--border));font-weight:600;font-size:13px;white-space:nowrap; transition:background .14s,border-color .14s,box-shadow .14s,transform .06s} .btn:hover{background:hsl(var(--accent))} .btn:active{transform:translateY(.5px)} .btn.primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:transparent;box-shadow:var(--shadow-xs)} .btn.primary:hover{background:hsl(var(--primary)/.9)} .btn.danger{background:hsl(var(--destructive)/.1);color:hsl(var(--destructive));border-color:hsl(var(--destructive)/.28)} .btn.danger:hover{background:hsl(var(--destructive)/.16)} .btn.ghost{background:transparent;border-color:transparent} .btn.ghost:hover{background:hsl(var(--accent))} .btn.sm{height:32px;padding:0 12px;font-size:12px} .btn:disabled{opacity:.5;cursor:not-allowed} .btn:disabled:active{transform:none} .btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px} .btn-row .note{color:hsl(var(--muted-foreground));font-size:12px} /* 子标签（segmented） */ .subtabs{display:inline-flex;gap:3px;padding:4px;background:hsl(var(--muted));border-radius:10px;margin-bottom:20px; border:1px solid hsl(var(--border)/.7)} .subtabs button{padding:8px 18px;border-radius:7px;color:hsl(var(--muted-foreground));font-weight:600;font-size:13px; transition:background .14s,color .14s} .subtabs button:hover{color:hsl(var(--foreground))} .subtabs button.on{background:hsl(var(--background));color:hsl(var(--foreground));box-shadow:var(--shadow-xs)} /* 表格 */ .tbl-wrap{overflow-x:auto} table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:11px 16px;border-bottom:1px solid hsl(var(--border)/.6);font-size:13px;vertical-align:middle} th{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase; color:hsl(var(--muted-foreground));font-weight:600;background:hsl(var(--muted)/.4)} tbody tr{transition:background .12s} tbody tr:hover{background:hsl(var(--muted)/.5)} tbody tr:last-child td{border-bottom:0} td.num{font-variant-numeric:tabular-nums;font-family:var(--mono)} /* 事件/日志流 */ .feed{max-height:340px;overflow-y:auto;font-family:var(--mono);font-size:12px;line-height:1.7} .feed .ln{display:flex;gap:10px;padding:5px 20px;border-top:1px solid hsl(var(--border)/.5)} .feed .ln:first-child{border-top:0} .feed .ts{color:hsl(var(--muted-foreground)/.85);flex:0 0 auto} .feed .msg{color:hsl(var(--foreground)/.85);word-break:break-word} .feed .msg.ai{color:hsl(var(--primary))} .feed .empty,.empty{color:hsl(var(--muted-foreground));text-align:center;padding:30px;font-size:13px} /* 库存 chips */ .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:10px;background:hsl(var(--muted)/.6); border:1px solid hsl(var(--border));font-size:13px;transition:border-color .14s} .chip:hover{border-color:hsl(var(--muted-foreground)/.4)} .chip b{font-variant-numeric:tabular-nums;font-weight:700} .chip.zero{opacity:.5} .chip .n{font-weight:600} /* hint / 说明块 */ .hint{font-size:12.5px;color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.55); border-radius:var(--radius-sm);padding:12px 14px;line-height:1.65;border:1px solid hsl(var(--border)/.5)} .hint.warn{background:hsl(var(--warning)/.11);color:hsl(var(--warning));border-color:hsl(var(--warning)/.28)} .hint b{color:inherit;font-weight:700} /* iframe playground —— 双栏 */ .pg-layout{display:grid;grid-template-columns:1fr 344px;gap:18px;align-items:start} .pg-frame{display:flex;flex-direction:column;gap:10px} .pg-frame-bar{display:flex;align-items:center;gap:8px;font-size:12px;color:hsl(var(--muted-foreground)); padding:8px 12px;border:1px solid hsl(var(--border));border-radius:var(--radius-sm);background:hsl(var(--muted)/.4)} .frame-wrap{border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;background:#000; height:calc(100vh - var(--top-h) - 200px);min-height:520px;box-shadow:var(--shadow-sm)} .frame-wrap.pg{height:calc(100vh - var(--top-h) - 156px)} .frame-wrap iframe{width:100%;height:100%;border:0;display:block} .pg-side{position:sticky;top:0} .pg-side .card{margin-bottom:12px} .pg-side .field{margin-bottom:12px} @media(max-width:960px){.pg-layout{grid-template-columns:1fr}.pg-side{position:static}} /* 导航汉堡（桌面隐藏） */ .nav-toggle{display:none} .nav-scrim{display:none} /* toast */ #toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(18px);z-index:200; background:hsl(var(--foreground));color:hsl(var(--background));padding:12px 20px;border-radius:10px; box-shadow:var(--shadow-lg);font-size:13px;font-weight:600;opacity:0;pointer-events:none; transition:opacity .22s,transform .22s;max-width:80vw} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} #toast.ok{background:hsl(var(--success));color:#fff} #toast.crit{background:hsl(var(--destructive));color:#fff} /* 窄屏：导航折叠成抽屉 */ @media(max-width:760px){ .app{grid-template-columns:1fr;grid-template-rows:var(--top-h) 1fr;grid-template-areas:"top" "main"} .brand{display:none} .main{padding:20px 16px 56px} .nav-toggle{display:grid} .nav{position:fixed;top:0;left:0;bottom:0;width:256px;z-index:60; transform:translateX(-100%);transition:transform .24s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg)} .nav.open{transform:none} .nav-scrim{display:block;position:fixed;inset:0;z-index:55;background:hsl(0 0% 0% / .5); opacity:0;pointer-events:none;transition:opacity .24s} .nav-scrim.open{opacity:1;pointer-events:auto} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ============================================================ 视觉方向 v2：深色石墨侧栏（跨主题恒定深色，与内容区强对比） —— 一眼可辨的改头换面，经典"暗侧栏 + 亮内容"高端后台形态 ============================================================ */ .brand{background:linear-gradient(180deg,hsl(222 30% 12%),hsl(222 32% 10%)); border-right-color:hsl(222 18% 18%);border-bottom-color:hsl(222 18% 18%)} .brand .name{color:#fff} .brand .name small{color:hsl(214 14% 60%)} .nav{background:hsl(222 32% 10%);border-right-color:hsl(222 18% 18%)} /* 分组标题颜色统一走上面的醒目规则（2026-08-30） */ .nav a{color:hsl(214 16% 70%)} .nav a .ico{opacity:.8} .nav a:hover{background:hsl(0 0% 100% / .07);color:#fff} .nav a:hover .ico{opacity:1} .nav a.active{background:hsl(var(--primary) / .24);color:#fff} .nav a.active .ico{opacity:1} .nav a.active::before{background:hsl(var(--primary));box-shadow:0 0 10px hsl(var(--primary)/.7)} .nav a.active .tag{color:hsl(214 22% 82%)} .nav .nav-sub a{color:hsl(214 14% 62%)} .nav .nav-sub::before{background:linear-gradient(180deg,hsl(214 14% 30%),hsl(214 14% 22%))} .nav .nav-sub a::after{background:hsl(214 14% 40%)} .nav .nav-sub a:hover{background:hsl(0 0% 100% / .06);color:#fff} .nav .nav-sub a:hover::after{background:hsl(214 20% 65%)} .nav .nav-sub a.active{background:hsl(var(--primary)/.24);color:#fff} .nav .nav-sub a.active::after{background:hsl(var(--primary));width:7px;height:7px; box-shadow:0 0 0 3px hsl(var(--primary)/.28), 0 0 8px hsl(var(--primary)/.7)} .nav .navfoot{color:hsl(214 12% 48%);border-top-color:hsl(0 0% 100% / .09)} .nav::-webkit-scrollbar-thumb{background:hsl(0 0% 100% / .12);border-color:transparent} /* 页头更有存在感 */ .view-head h1{font-size:28px;font-weight:750;letter-spacing:-.025em} /* 侧栏在窄屏抽屉里同样是深色（继承上面即可，无需额外处理） */ /* ---- Lucide 线性图标（替换 emoji，跟 shadcn 一套语言）---- */ .nav a .ico{display:grid;place-items:center;width:18px;height:18px} .nav a .ico svg{width:18px;height:18px} .icon-btn svg{width:18px;height:18px} .brand .logo svg{width:18px;height:18px} /* 顶栏当前页标题（原系统状态位置腾出后填入）*/ .topbar-title{font-size:15px;font-weight:650;color:hsl(var(--foreground));letter-spacing:-.01em} /* 测试台里的系统状态条（从全局顶栏移下来）*/ .pg-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;padding:11px 15px; background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-xs)} /* 测试台通话框上方：去掉文字标签，只留两个图标按钮（刷新 / 新标签打开）*/ .pg-frame-bar{background:none; border:0; padding:0 0 2px; justify-content:flex-end; gap:6px;} .pg-iconbtn{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:hsl(var(--muted-foreground)); border:1px solid hsl(var(--border)); background:hsl(var(--card)); transition:background .14s,color .14s,border-color .14s; cursor:pointer;} .pg-iconbtn:hover{background:hsl(var(--accent)); color:hsl(var(--foreground));} .pg-iconbtn svg{width:16px; height:16px;} /* 状态栏最右端的两个操作按钮：刷新（蓝）/ 新标签打开（青绿），带彩色与悬停动效 */ .pg-actions{margin-left:auto; display:flex; gap:8px;} .pg-iconbtn{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; border:1px solid transparent; cursor:pointer; transition:transform .12s, background .15s, color .15s, box-shadow .15s;} .pg-iconbtn svg{width:17px; height:17px; transition:transform .3s;} .pg-iconbtn:active{transform:translateY(1px);} .pg-iconbtn.refresh{background:hsl(221 83% 55% / .14); color:hsl(221 83% 55%); border-color:hsl(221 83% 55% / .28);} .pg-iconbtn.refresh:hover{background:hsl(221 83% 54%); color:#fff; box-shadow:0 4px 13px hsl(221 83% 54% / .42);} .pg-iconbtn.refresh:hover svg{transform:rotate(180deg);} .pg-iconbtn.newtab{background:hsl(168 72% 42% / .16); color:hsl(168 66% 42%); border-color:hsl(168 62% 45% / .32);} .pg-iconbtn.newtab:hover{background:hsl(168 70% 40%); color:#fff; box-shadow:0 4px 13px hsl(168 70% 40% / .42);} .pg-iconbtn.newtab:hover svg{transform:translate(1px,-1px);} /* ---------------- 坐席台 ---------------- */ .seatwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:16px 20px} .seatwall .empty{grid-column:1/-1} .seat{border:1px solid hsl(var(--border));border-left:3px solid hsl(var(--muted-foreground)/.5); border-radius:var(--radius-sm);padding:12px 13px;background:hsl(var(--card))} .seat.s-live{border-left-color:hsl(var(--primary));animation:seatbreathe 2.4s ease-in-out infinite} .seat.s-dialing{border-left-color:hsl(var(--primary))} .seat.s-ringing{border-left-color:#f5b942} .seat.s-lineerr{border-left-color:hsl(var(--destructive))} .seat.s-idle{border-left-color:#22c55e} .seat.s-unattended{border-left-color:#7c8db5;opacity:.85} @keyframes seatbreathe{0%,100%{box-shadow:0 0 0 0 hsl(var(--primary)/0)} 50%{box-shadow:0 0 0 3px hsl(var(--primary)/.16)}} .seat .who{display:flex;align-items:center;gap:8px} .seat .who b{font-size:14px;font-weight:650} .seat .who .ext{color:hsl(var(--muted-foreground));font-size:12px;font-family:var(--mono);margin-left:auto} .seat .st{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;font-weight:600} .seat .st .timer{margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums} .seat .sub2{margin-top:5px;font-size:12.5px;color:hsl(var(--muted-foreground));min-height:18px; word-break:break-all} .seat .foot2{margin-top:8px;padding-top:7px;border-top:1px solid hsl(var(--border)/.7); font-size:11.5px;color:hsl(var(--muted-foreground))} .c-live{color:hsl(var(--primary))} .c-ring{color:#d69b1f} .c-err{color:hsl(var(--destructive))} .c-idle{color:#1f9d51} .c-off{color:hsl(var(--muted-foreground))} .seat .dot.live{background:hsl(var(--primary))} .seat .dot.ring{background:#f5b942} .seat .dot.err{background:hsl(var(--destructive))} .seat .dot.idle{background:#22c55e} .seat .dot.off{background:hsl(var(--muted-foreground)/.55)} .seat .noname{font-weight:500;color:hsl(var(--muted-foreground))} .seat .tagid{font-size:10.5px;font-family:var(--mono);color:hsl(var(--muted-foreground)); border:1px solid hsl(var(--border));border-radius:5px;padding:1px 5px} /* ---------------- 弹窗（账号管理 / 改密码） ---------------- */ .mask{position:fixed;inset:0;background:hsl(220 30% 4%/.55);z-index:60; display:grid;place-items:center;padding:20px} .modal{width:420px;max-width:100%;background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius);box-shadow:0 24px 60px hsl(220 40% 3%/.45);padding:22px; max-height:88vh;overflow:auto} .modal h2{font-size:16px;font-weight:650;margin-bottom:4px} .modal .desc{color:hsl(var(--muted-foreground));font-size:12.5px;margin-bottom:16px} .modal .fld{margin-bottom:12px} .modal .fld label{display:block;font-size:12px;color:hsl(var(--muted-foreground));margin-bottom:5px} .modal .fld input,.modal .fld select{width:100%;height:38px;padding:0 12px;border-radius:var(--radius-sm); border:1px solid hsl(var(--input));background:hsl(var(--background));color:hsl(var(--foreground));font:inherit} .modal .fld input:focus,.modal .fld select:focus{outline:0;border-color:hsl(var(--ring)); box-shadow:0 0 0 3px hsl(var(--ring)/.16)} .modal .err{color:hsl(var(--destructive));font-size:12.5px;min-height:17px;margin-bottom:6px} .modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:6px} /* 宽版弹窗：给号码明细这类要表格 + 分页的场景 */ .modal.lg{width:min(920px, 100%);padding:20px 22px} .modal.lg .modal-lg-hd{display:flex;align-items:center;gap:12px;margin-bottom:14px; padding-bottom:12px;border-bottom:1px solid hsl(var(--border)/.55)} .modal.lg .modal-lg-hd h2{font-size:16px;font-weight:700;margin:0;flex:0 0 auto} .modal.lg .modal-lg-hd .hint{flex:1;font-size:12.5px;color:hsl(var(--muted-foreground))} /* 头部进度：真进度条 + 大号百分比 + 总数（替代原来那行灰字，2026-08-29） */ .modal.lg .modal-lg-hd .mnu-prog{flex:1;display:flex;align-items:center;gap:10px; min-width:0;margin:0 6px} .mnu-prog .mp-bar{flex:1;max-width:230px;height:8px;border-radius:999px; background:hsl(var(--muted));overflow:hidden; box-shadow:inset 0 1px 2px hsl(222 47% 11%/.07)} .mnu-prog .mp-bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,hsl(var(--primary)/.72),hsl(var(--primary)))} .mnu-prog .mp-pct{flex:0 0 auto;font-size:13.5px;font-weight:750;color:hsl(var(--primary)); font-variant-numeric:tabular-nums} .mnu-prog .mp-total{flex:0 0 auto;font-size:12px;color:hsl(var(--muted-foreground))} /* 关闭钮全局统一成实体样式（user 2026-08-29：「很多地方都不明显」）： 白底描边 + 投影，悬停变红——与对话/统计/客户资料弹层的 X 一致 */ .modal.lg .modal-close{flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:10px; display:grid;place-items:center;color:hsl(var(--foreground));background:hsl(var(--card)); border:1px solid hsl(var(--border));box-shadow:0 2px 8px hsl(222 47% 11%/.14);cursor:pointer; transition:background .15s,color .15s,border-color .15s} .modal.lg .modal-close:hover{background:hsl(var(--destructive)/.12); color:hsl(var(--destructive));border-color:hsl(var(--destructive)/.45)} .modal.lg .modal-close svg{width:17px;height:17px;stroke-width:2.4} /* 分页（表格右下角，市面常规摆法）：‹ › 紧凑方向钮 + 「当前页/总页数」小胶囊 + 总条数 */ .mnu-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px} .mnu-foot .hint{font-size:12px;color:hsl(var(--muted-foreground))} .mnu-pager{display:flex;align-items:center;gap:6px;flex:0 0 auto} .mnu-pgbtn{width:28px;height:28px;padding:0;border-radius:8px;display:grid;place-items:center; color:hsl(var(--foreground));background:hsl(var(--card));cursor:pointer; border:1px solid hsl(var(--border));box-shadow:var(--shadow-xs); transition:border-color .15s,color .15s,background .15s} .mnu-pgbtn svg{width:15px;height:15px} .mnu-pgbtn:hover:not(:disabled){border-color:hsl(var(--primary)/.55);color:hsl(var(--primary)); background:hsl(var(--primary)/.06)} .mnu-pgbtn:disabled{opacity:.38;cursor:default} .mnu-page{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px; border-radius:8px;background:hsl(var(--primary)/.08);border:1px solid hsl(var(--primary)/.25); font-size:12px;color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums} .mnu-page b{font-size:12.5px;font-weight:750;color:hsl(var(--primary))} .mnu-page i{font-style:normal;opacity:.6} /* 状态药丸横条（复用 .ob-chip） */ .modal.lg .mnu-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} /* 搜索 + 分页 */ .modal.lg .mnu-tb{display:flex;align-items:center;gap:10px;margin-bottom:10px} .modal.lg .mnu-tb input{flex:1;max-width:280px;height:32px;padding:0 12px;font-size:13px; border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--card)); color:hsl(var(--foreground));font-family:inherit} .modal.lg .mnu-tb input:focus{outline:none;border-color:hsl(var(--primary)/.55); box-shadow:0 0 0 3px hsl(var(--primary)/.11)} .modal.lg .mnu-tb .ac-sp{flex:1} .modal.lg .mnu-tb .hint{font-size:12px;color:hsl(var(--muted-foreground))} /* 表格容器（可滚，最大高度让弹窗自身高度可控） */ /* 🔴 height 固定死（不是 max-height）：切筛选后行数变少，框忽大忽小体验差（user 2026-08-29） */ .modal.lg .mnu-tbl-wrap{height:56vh;overflow:auto;border:1px solid hsl(var(--border)/.55); border-radius:10px;background:hsl(var(--card))} .modal.lg .mnu-tbl{width:100%;border-collapse:collapse;font-size:12.5px} /* 🔴 表头 = 参数栏，做成统一的主色渐变横带（user 2026-08-29：原来各列字号不一—— 逐列的 .c-* 字号规则连 th 一起命中。字号规则已限定到 td，th 全列统一） */ .modal.lg .mnu-tbl th{position:sticky;top:0;z-index:1; background:linear-gradient(180deg,hsl(var(--primary)/.09),hsl(var(--primary)/.045)); padding:11px 12px;font-size:11.5px;font-weight:750;text-align:left;letter-spacing:.05em; color:hsl(var(--primary));border-bottom:1px solid hsl(var(--primary)/.25); white-space:nowrap} .modal.lg .mnu-tbl td{padding:10px 12px;border-bottom:1px solid hsl(var(--border)/.4); vertical-align:middle} .modal.lg .mnu-tbl tr:last-child td{border-bottom:none} .modal.lg .mnu-tbl tr:hover td{background:hsl(var(--muted)/.3)} .modal.lg .mnu-tbl .c-seq{width:44px} .modal.lg .mnu-tbl td.c-seq{color:hsl(var(--muted-foreground));font-size:11px} .modal.lg .mnu-tbl .c-num{width:70px;text-align:right} .modal.lg .mnu-tbl td.c-num{font-variant-numeric:tabular-nums} .modal.lg .mnu-tbl .c-when{width:110px} .modal.lg .mnu-tbl td.c-when{font-size:11.5px} .modal.lg .mnu-tbl .c-who2{width:88px} .modal.lg .mnu-tbl td.c-who2{color:hsl(var(--muted-foreground));font-size:12px} .modal.lg .mnu-tbl .c-talk{width:92px} .modal.lg .mnu-tbl .ob-who b{font-family:var(--mono);font-size:12.5px;font-weight:600; color:hsl(var(--foreground));display:block} .modal.lg .mnu-tbl .ob-who span{display:block;font-size:11px;color:hsl(var(--muted-foreground))} /* 对话记录弹层：自建 talk-mask（不用全局 .mask，避免被 closeModal() 误删） */ .talk-mask{position:fixed;inset:0;background:hsl(220 30% 4%/.55);z-index:60; display:grid;place-items:center;padding:20px} .talk-mask.hidden{display:none} /* 🔴 关闭钮 = 全部 talk-mask 弹层共用一份（右上角白底描边实体钮，悬停变红）。 别再往单个弹窗 id 下写关闭钮样式——每写一份新弹窗就漏一份，这问题已复发过三次 （talkChat→obStat→ibStat 各修一遍），这里是唯一出处。 */ .talk-mask .modal-close{position:absolute;top:14px;right:14px;left:auto;z-index:3; width:34px;height:34px;padding:0;border-radius:10px;display:grid;place-items:center; color:hsl(var(--foreground));background:hsl(var(--card)); border:1px solid hsl(var(--border));box-shadow:0 2px 8px hsl(222 47% 11%/.14); cursor:pointer;transition:background .15s,color .15s,border-color .15s} .talk-mask .modal-close:hover{background:hsl(var(--destructive)/.12); color:hsl(var(--destructive));border-color:hsl(var(--destructive)/.45)} .talk-mask .modal-close svg{width:17px;height:17px;stroke-width:2.4} .talk-mask .modal{position:relative} /* 🔴 对话弹层必须压过通用 modal()（.mask z=60，动态 append 到 body 末尾、DOM 比它靠后）： 实时监控「看所有号码」的号码明细就是 .mask 弹窗，从里面点「N 句」开对话， 不抬 z-index 对话会被盖在底下（2026-08-29 实测）。客户资料(70) 仍在最上层。 */ #talkChatMask{z-index:65} /* 弹窗按「内容区」居中，不按视口：左侧压着 244px 侧栏，视口居中会整体偏左 （user 2026-08-29："总感觉没居中"——实测确实左偏约 120px）。 遮罩仍盖全屏，只是把对话框往右让出侧栏宽度；窄屏侧栏收起时不偏移。 */ @media (min-width:761px){ .mask,.talk-mask{padding-left:calc(var(--nav-w) + 20px)} } /* ============ 对话详情弹层（2026-08-29 重设计）============ 头部固定不滚（方向徽章 + 号码 + 图标化元信息），只有 .chat-body 滚动。 🔴 弹层挂在 #app 外面，#app 前缀的样式（.btn.soft / .pill / --ac-* 变量） 一概套不到，这里必须自带全套。方向色 --hc 直接引用主题 token 三元组， 深浅主题自动跟随（同 obj-fact 的 --fc 手法）。 */ /* 🔴 高度固定死（不是 max-height）：打开瞬间内容还是「加载中」，靠内容撑高会先塌成 小方块、数据到了再猛地弹开（user 2026-08-29 报的"闪一下"）。定高 + 骨架占位就稳了 */ #talkChatMask .modal.lg{position:relative;display:flex;flex-direction:column; height:min(88vh,760px);overflow:hidden;padding:0;border-radius:18px} /* 关闭钮样式在 .talk-mask 共用块（唯一出处，别在这重写） */ #talkChatMask #talkChat{flex:1;display:flex;flex-direction:column;min-height:0} /* —— 固定头部：方向色横幅（呼出=蓝 / 呼入=绿 / 未接=红，--hc 驱动整条配色）—— user 2026-08-29 二稿：别黑白灰——号码/徽章/药丸全走主题色； 参数做成分格数据条（上标签下大值）；客服记的「客户状态」也固定在头部。 */ #talkChatMask .chat-hd{--hc:var(--primary);flex:0 0 auto;display:flex;flex-direction:column;gap:11px; padding:16px 22px 14px;position:relative; background:linear-gradient(155deg,hsl(var(--hc)/.16),hsl(var(--hc)/.05) 52%,hsl(var(--hc)/.1)); border-bottom:1px solid hsl(var(--hc)/.22)} #talkChatMask .chat-hd::after{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,hsl(var(--hc)),hsl(var(--hc)/.35) 60%,transparent); border-radius:18px 18px 0 0} #talkChatMask .chat-hd.hd-in{--hc:var(--success)} #talkChatMask .chat-hd.hd-miss{--hc:var(--destructive)} /* 第一行：实色徽章 + 主题色号码 + 方向药丸 + 复制钮 */ #talkChatMask .ch-line1{display:flex;align-items:center;gap:11px;min-width:0;padding-right:46px} #talkChatMask .ch-badge{width:44px;height:44px;border-radius:14px;flex:0 0 auto; display:grid;place-items:center;color:#fff; background:linear-gradient(150deg,hsl(var(--hc)) 15%,hsl(var(--hc)/.75)); box-shadow:0 5px 14px hsl(var(--hc)/.38),inset 0 1px 0 hsl(0 0% 100%/.28)} #talkChatMask .ch-badge svg{width:22px;height:22px} #talkChatMask .ch-num{font-family:var(--mono);font-size:19px;font-weight:800; letter-spacing:.015em;color:hsl(var(--hc)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #talkChatMask .ch-pname{flex:0 0 auto;font-size:14px;font-weight:700;color:hsl(var(--foreground)); max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #talkChatMask .ch-dir{flex:0 0 auto;height:21px;padding:0 9px;border-radius:999px; display:inline-flex;align-items:center;font-size:11px;font-weight:750; color:#fff;background:hsl(var(--hc)/.9);box-shadow:0 2px 6px hsl(var(--hc)/.3)} #talkChatMask #talkCopy,#talkChatMask #talkPeer{flex:0 0 auto;height:30px;padding:0 13px; border-radius:9px;font-size:12px;font-weight:650;color:hsl(var(--hc));cursor:pointer; display:inline-flex;align-items:center;gap:6px; background:hsl(var(--card)/.7);border:1px solid hsl(var(--hc)/.4); transition:background .15s,border-color .15s} #talkChatMask #talkPeer{margin-left:auto} #talkChatMask #talkPeer svg{width:13px;height:13px} #talkChatMask #talkCopy:hover,#talkChatMask #talkPeer:hover{ background:hsl(var(--hc)/.12);border-color:hsl(var(--hc)/.6)} /* 参数条：玻璃质感分格，图标方块 + 上标签下大值，一眼扫全四个参数 */ #talkChatMask .ch-stats{display:grid;grid-template-columns:repeat(4,1fr); background:hsl(var(--card)/.66);border:1px solid hsl(var(--hc)/.2);border-radius:13px; box-shadow:0 1px 3px hsl(var(--hc)/.08),inset 0 1px 0 hsl(0 0% 100%/.35);overflow:hidden} #talkChatMask .ch-stat{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 13px} #talkChatMask .ch-stat + .ch-stat{border-left:1px solid hsl(var(--hc)/.14)} #talkChatMask .ch-stat-ic{width:28px;height:28px;border-radius:9px;flex:0 0 auto; display:grid;place-items:center;color:hsl(var(--hc));background:hsl(var(--hc)/.13)} #talkChatMask .ch-stat-ic svg{width:15px;height:15px} #talkChatMask .ch-stat-tx{display:flex;flex-direction:column;min-width:0;line-height:1.3} #talkChatMask .ch-stat-tx span{font-size:10.5px;color:hsl(var(--muted-foreground));letter-spacing:.02em} #talkChatMask .ch-stat-tx b{font-size:14px;font-weight:750;color:hsl(var(--foreground)); font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 客户状态（客服标记）固定在头部第三行，琥珀色区别于方向色 */ #talkChatMask .chat-hd .call-note{margin:0} /* —— 滚动区：聊天内容（带极淡的顶部光晕底色，让气泡浮起来）—— */ #talkChatMask .chat-body{flex:1;min-height:0;overflow-y:auto;padding:18px 22px 26px; background:radial-gradient(900px 300px at 50% -8%,hsl(var(--primary)/.05),transparent 70%), hsl(var(--muted)/.25)} /* —— 气泡精修（原 #app 前缀那套搬进来，弹层移出 #app 后那套已失效）—— */ /* —— 发言人区（2026-08-29 二稿重设计）：名字行提到气泡外、36px 渐变方块头像 —— user：别用小圆图标，要能一眼看出这句是哪个 AI 人设/哪个客服/哪个客户说的。 配色 = 身份：AI 人设=紫（同任务卡人设 chip）、人工客服=蓝、客户=绿。 */ #talkChatMask .turn{--tv:262 66% 52%;display:flex;gap:10px;margin-bottom:18px;max-width:78%} #talkChatMask .turn.me{margin-left:auto;flex-direction:row-reverse} #talkChatMask .turn .tav{width:36px;height:36px;border-radius:11px;flex:0 0 auto;margin-top:20px; display:grid;place-items:center;font-size:14.5px;font-weight:750;color:#fff;border:none; background:linear-gradient(150deg,hsl(var(--success)) 15%,hsl(var(--success)/.72)); box-shadow:0 3px 9px hsl(var(--success)/.3),inset 0 1px 0 hsl(0 0% 100%/.28)} #talkChatMask .turn .tav svg{width:19px;height:19px} #talkChatMask .turn.me.ai .tav{background:linear-gradient(150deg,hsl(var(--tv)) 15%,hsl(var(--tv)/.72)); box-shadow:0 3px 9px hsl(var(--tv)/.3),inset 0 1px 0 hsl(0 0% 100%/.28)} #talkChatMask .turn.me.human .tav{background:linear-gradient(150deg,hsl(var(--primary)) 15%,hsl(var(--primary)/.72)); box-shadow:0 3px 9px hsl(var(--primary)/.3),inset 0 1px 0 hsl(0 0% 100%/.28)} #talkChatMask .tcol{min-width:0;display:flex;flex-direction:column;gap:4px} /* 名字行：在气泡外面，名字按身份染色 + 身份小标 + 时间点 */ #talkChatMask .tname{display:flex;align-items:center;gap:7px;padding:0 3px;font-size:12px;line-height:1.4} #talkChatMask .turn.me .tname{justify-content:flex-end} #talkChatMask .tname b{font-weight:750;color:hsl(var(--success)); max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #talkChatMask .turn.me.ai .tname b{color:hsl(var(--tv))} #talkChatMask .turn.me.human .tname b{color:hsl(var(--primary))} #talkChatMask .tname > span{font-family:var(--mono);font-size:10.5px; color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums} #talkChatMask .bub{border-radius:5px 14px 14px 14px;padding:10px 13px; box-shadow:0 1px 2px hsl(222 47% 11%/.05),0 4px 12px hsl(222 47% 11%/.04)} #talkChatMask .turn.me .bub{border-radius:14px 5px 14px 14px; background:linear-gradient(160deg,hsl(var(--primary)/.1),hsl(var(--primary)/.05)); border-color:hsl(var(--primary)/.22)} #talkChatMask .turn.me.ai .bub{background:linear-gradient(160deg,hsl(var(--tv)/.1),hsl(var(--tv)/.045)); border-color:hsl(var(--tv)/.24)} #talkChatMask .who-chip{display:inline-flex;align-items:center;height:15px;padding:0 5px; border-radius:4px;font-style:normal;font-size:9px;font-weight:750;letter-spacing:.03em} #talkChatMask .who-chip.wc-ai{color:hsl(var(--tv));background:hsl(var(--tv)/.12); box-shadow:inset 0 0 0 1px hsl(var(--tv)/.3)} #talkChatMask .who-chip.wc-hm{color:hsl(var(--primary));background:hsl(var(--primary)/.11); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.3)} :root[data-theme="dark"] #talkChatMask .turn{--tv:262 78% 70%} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #talkChatMask .turn{--tv:262 78% 70%} } /* AI → 人工 的分界线：横贯整行，谁接入的写在中间 */ #talkChatMask .turn-cut{display:flex;align-items:center;gap:11px;margin:20px 0 18px; font-size:11.5px;font-weight:650;color:hsl(var(--primary))} #talkChatMask .turn-cut i{flex:1;height:1px; background:linear-gradient(90deg,transparent,hsl(var(--primary)/.45))} #talkChatMask .turn-cut i:last-child{background:linear-gradient(90deg,hsl(var(--primary)/.45),transparent)} #talkChatMask .turn-cut span{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto; height:24px;padding:0 11px;border-radius:999px; background:hsl(var(--primary)/.1);box-shadow:inset 0 0 0 1px hsl(var(--primary)/.3)} #talkChatMask .turn-cut svg{width:13px;height:13px} #talkChatMask .bub .src{font-size:14px;line-height:1.6} #talkChatMask .bub .tr{border-top:1px solid hsl(var(--border)/.6);margin-top:8px;padding-top:7px;line-height:1.6} #talkChatMask .bub .tr::before{border-radius:5px;font-size:9px;font-weight:700;padding:1px 5px; border-color:hsl(var(--border)/.8);background:hsl(var(--muted)/.7)} #talkChatMask .trstate{font-size:11.5px;flex:0 0 auto} #talkChatMask .empty{padding:40px 0;text-align:center;color:hsl(var(--muted-foreground))} /* 加载骨架：结构与真实头部一致（徽章位/号码条/参数条），数据到位时布局零跳动 */ #talkChatMask .tc-skb{background:hsl(var(--muted));box-shadow:none;color:transparent; animation:tcpulse 1.1s ease-in-out infinite} #talkChatMask .tc-skl{display:inline-block;height:15px;border-radius:6px; background:hsl(var(--muted));animation:tcpulse 1.1s ease-in-out infinite} @keyframes tcpulse{0%,100%{opacity:.55}50%{opacity:1}} #talkChatMask .chat-body .tc-load{display:flex;flex-direction:column;align-items:center; justify-content:center;height:100%;gap:10px;color:hsl(var(--muted-foreground));font-size:13px} #talkChatMask .tc-load i{width:22px;height:22px;border-radius:50%;flex:0 0 auto; border:2.5px solid hsl(var(--primary)/.2);border-top-color:hsl(var(--primary)); animation:tcspin .8s linear infinite} @keyframes tcspin{to{transform:rotate(360deg)}} /* 深色下玻璃条的白色内高光收敛，避免糊成灰边 */ :root[data-theme="dark"] #talkChatMask .ch-stats{box-shadow:0 1px 3px hsl(0 0% 0%/.3),inset 0 1px 0 hsl(0 0% 100%/.06)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #talkChatMask .ch-stats{box-shadow:0 1px 3px hsl(0 0% 0%/.3),inset 0 1px 0 hsl(0 0% 100%/.06)} } /* ============ 客户详细资料（三级弹窗，盖在对话弹层上）============ 客户身份色=绿（与气泡区的客户色一致）；字段=上下排的清单卡。 */ #peerPopMask{z-index:70} #peerPopMask .modal.peer-pop{position:relative;width:400px;max-width:94vw;padding:0; border-radius:16px;overflow:hidden;display:flex;flex-direction:column;max-height:82vh} /* 关闭钮样式在 .talk-mask 共用块（唯一出处） */ #peerPopMask .pp-hd{flex:0 0 auto;display:flex;align-items:center;gap:13px; padding:18px 56px 15px 20px;position:relative; background:linear-gradient(155deg,hsl(var(--success)/.16),hsl(var(--success)/.05) 52%,hsl(var(--success)/.1)); border-bottom:1px solid hsl(var(--success)/.22)} #peerPopMask .pp-hd::after{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,hsl(var(--success)),hsl(var(--success)/.35) 60%,transparent)} #peerPopMask .pp-av{width:46px;height:46px;border-radius:14px;flex:0 0 auto; display:grid;place-items:center;font-size:19px;font-weight:750;color:#fff; background:linear-gradient(150deg,hsl(var(--success)) 15%,hsl(var(--success)/.72)); box-shadow:0 5px 14px hsl(var(--success)/.35),inset 0 1px 0 hsl(0 0% 100%/.28)} #peerPopMask .pp-av svg{width:22px;height:22px} #peerPopMask .pp-who{min-width:0;display:flex;flex-direction:column;gap:2px} #peerPopMask .pp-who b{font-size:17px;font-weight:800;color:hsl(var(--success)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #peerPopMask .pp-who span{font-size:12.5px;color:hsl(var(--muted-foreground));letter-spacing:.02em} #peerPopMask .pp-body{flex:1;min-height:0;overflow-y:auto;padding:8px 20px} #peerPopMask .pp-row{display:flex;align-items:baseline;gap:14px;padding:10px 2px; border-bottom:1px solid hsl(var(--border)/.45)} #peerPopMask .pp-row:last-child{border-bottom:none} #peerPopMask .pp-k{flex:0 0 88px;font-size:12px;color:hsl(var(--muted-foreground))} #peerPopMask .pp-v{min-width:0;font-size:13.5px;font-weight:650;color:hsl(var(--foreground)); word-break:break-word;line-height:1.5} #peerPopMask .pp-empty{padding:34px 8px;text-align:center;font-size:13.5px; color:hsl(var(--foreground));line-height:2} #peerPopMask .pp-empty span{font-size:12px;color:hsl(var(--muted-foreground))} #peerPopMask .pp-foot{flex:0 0 auto;padding:9px 20px 12px;font-size:11px; color:hsl(var(--muted-foreground)/.85);border-top:1px solid hsl(var(--border)/.45); background:hsl(var(--muted)/.3)} /* 🔴 弹窗挂在 #app 外，下面这些开关/时段样式原本是 #app 作用域的，这里补回来。 否则 `.modal .fld label{display:block}` 会把开关 label 从 inline-flex 压成 block， 轨道 .tk（inline span）宽高失效塌缩，只剩白色圆钮露出来 = 那个"白点"。 */ .modal .fld label.ac-toggle{display:inline-flex;margin:2px 0 8px} .modal .tw{display:flex;align-items:center;gap:8px;margin-top:2px} .modal .tw input{width:auto;flex:1} .modal .tw > span{color:hsl(var(--muted-foreground));font-size:12.5px;flex:0 0 auto} .pwbox{border:1px dashed hsl(38 92% 50%/.65);background:hsl(38 92% 50%/.09); border-radius:var(--radius-sm);padding:12px 14px;margin:2px 0 14px;text-align:center} .pwbox code{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:1.5px;user-select:all} .pwbox p{font-size:11.5px;color:hsl(var(--muted-foreground));margin-top:7px} /* ---------------- 通话记录（原文 + 译文） ---------------- */ .talk-tb{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .talk-tb input,.talk-tb select{height:34px;padding:0 11px;border-radius:var(--radius-sm); border:1px solid hsl(var(--input));background:hsl(var(--background));color:hsl(var(--foreground));font:inherit;font-size:13px} .talk-tb input:focus,.talk-tb select:focus{outline:0;border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring)/.16)} .talk-tb .hint{color:hsl(var(--muted-foreground));font-size:12px} .seg{display:flex;border:1px solid hsl(var(--border));border-radius:var(--radius-sm);overflow:hidden} .seg button{background:hsl(var(--card));border:none;border-right:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground));padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer} .seg button:last-child{border-right:none} .seg button.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:600} /* 通话记录 v2（2026-08-29 竖版卡片）：不再左右两栏，改成卡片网格 + 点击弹层看完整对话 */ .talk-body{border-top:1px solid hsl(var(--border));padding:14px 18px;overflow-y:auto;min-height:0} /* 页面整体铺满、不产生页面级滚动，只让 talk-body 自己滚 */ #view-talks{display:flex;flex-direction:column;height:100%;min-height:0} #view-talks>.card{flex:1;min-height:0;display:flex;flex-direction:column} #view-talks>.card>.card-head,#view-talks>.card>.card-body{flex:0 0 auto} #view-talks .talk-body{flex:1;min-height:0} .main:has(#view-talks:not(.hidden)){padding:14px 18px} #view-talks{max-width:none} #view-talks>.view-head{display:none} /* ============================================================ 通话记录 v3（2026-08-29 分外呼/接听两套卡） ------------------------------------------------------------ 外呼卡（.tco）：琥珀 / 主色系，围绕"打给谁 · 结果如何" 接听卡（.tci）：绿 / 青系，围绕"谁打进来 · 谁接的" 两套设计视觉完全不同，管理员切分页一眼就能区分 ============================================================ */ /* 分页按钮条 */ #app .talk-dirtabs{margin:0 20px 4px;padding:12px 0 0;border-bottom:1px solid hsl(var(--border)/.5); background:transparent} #app .talk-dirtabs button{display:inline-flex;align-items:center;gap:6px} #app .talk-dirtabs button svg{width:14px;height:14px} #app .talk-dirtabs button[data-d="in"].on{background:hsl(142 68% 40%/.11);color:hsl(142 68% 40%)} #app .talk-dirtabs button[data-d="in"].on:hover{background:hsl(142 68% 40%/.14)} @media(prefers-color-scheme:dark){ #app .talk-dirtabs button[data-d="in"].on{background:hsl(142 68% 45%/.18);color:hsl(142 68% 65%)} } /* ============================================================ 通话记录卡片（旧遗留：仍在别处引用 .tlc-* 的兼容层） ============================================================ */ /* 分组标题（按天） */ .tl-grp{margin:18px 0 10px;font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:hsl(var(--muted-foreground)); display:flex;align-items:center;gap:10px} .tl-grp::before{content:"";width:3px;height:14px;border-radius:2px;background:hsl(var(--primary))} .tl-grp:first-child{margin-top:0} /* 分组下面的一排卡（自适应网格：宽点 3-4 张，窄点 2 张） */ .tl-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} /* 单张卡：略微立体 + hover 上浮 */ .tlc{background:hsl(var(--card));border:1px solid hsl(var(--border)/.75);border-radius:14px; padding:0 16px 14px;position:relative;overflow:hidden;cursor:pointer; box-shadow:0 1px 3px hsl(222 47% 11%/.05), 0 1px 2px hsl(222 47% 11%/.03); transition:border-color .18s,box-shadow .18s,transform .18s; display:flex;flex-direction:column;gap:10px} .tlc:hover{border-color:hsl(var(--primary)/.4); box-shadow:0 6px 20px hsl(var(--primary)/.12), 0 2px 4px hsl(222 47% 11%/.06); transform:translateY(-2px)} .tlc.on{border-color:hsl(var(--primary)); box-shadow:0 3px 14px hsl(var(--primary)/.2), 0 1px 3px hsl(222 47% 11%/.05)} /* 顶部色带：按方向着色 */ .tlc-band{height:4px;margin:0 -16px 6px;background:hsl(var(--muted-foreground)/.25)} .tlc.dir-in .tlc-band{background:linear-gradient(90deg,hsl(142 68% 40%),hsl(142 68% 55%))} .tlc.dir-out .tlc-band{background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--primary)/.7))} .tlc.dir-miss .tlc-band{background:linear-gradient(90deg,hsl(var(--destructive)/.8),hsl(var(--destructive)/.5))} .tlc.dir-live .tlc-band{background:linear-gradient(90deg,hsl(38 92% 50%),hsl(38 92% 65%),hsl(38 92% 50%)); background-size:200% 100%;animation:obc-flow 2s linear infinite} /* 卡头：方向药丸 + 时间 */ .tlc-hd{display:flex;align-items:center;gap:8px;padding-top:2px} .tlc-hd .dirtag{flex:0 0 auto} .tlc-time{margin-left:auto;font-size:11.5px;color:hsl(var(--muted-foreground));font-family:var(--mono)} /* 用户档案区：头像 + 姓名/性别/年龄/号码/卡号 */ .tlc-user{display:flex;gap:12px;align-items:flex-start;padding:6px 0} .tlc-av{flex:0 0 auto;width:46px;height:46px;border-radius:50%; display:grid;place-items:center;font-size:19px;font-weight:700; color:#fff;letter-spacing:-.02em; background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--primary)/.7)); box-shadow:0 2px 6px hsl(var(--primary)/.25)} .tlc.dir-in .tlc-av{background:linear-gradient(135deg,hsl(142 68% 45%),hsl(142 68% 55%)); box-shadow:0 2px 6px hsl(142 68% 40%/.28)} .tlc.dir-miss .tlc-av{background:linear-gradient(135deg,hsl(var(--destructive)/.9),hsl(var(--destructive)/.7)); box-shadow:0 2px 6px hsl(var(--destructive)/.22)} .tlc-user-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .tlc-name{font-size:16px;font-weight:700;color:hsl(var(--foreground));letter-spacing:-.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tlc-name.tlc-noname{color:hsl(var(--muted-foreground));font-weight:500;font-style:italic} .tlc-sub{font-size:12px;color:hsl(var(--muted-foreground));letter-spacing:.01em} .tlc-num{font-family:var(--mono);font-size:13px;font-weight:600;color:hsl(var(--foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em} .tlc-card{font-family:var(--mono);font-size:11.5px;color:hsl(var(--muted-foreground)); display:flex;align-items:center;gap:5px} .tlc-card span{font-size:12px} .tlc-lv{font-size:11.5px;color:hsl(38 90% 40%);font-weight:600} /* 客户标签（客服打的备注）—— 高亮，是这张卡最想看的信息之一 */ .tlc-tag{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px; background:linear-gradient(135deg,hsl(38 92% 50%/.13),hsl(38 92% 50%/.06)); border:1px solid hsl(38 92% 50%/.32);font-size:12.5px;font-weight:600; color:hsl(38 92% 30%);line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tlc-tag-i{font-size:13px;flex:0 0 auto} .tlc-tag-by{margin-left:auto;font-size:10.5px;font-weight:500;color:hsl(38 60% 40%);flex:0 0 auto} @media(prefers-color-scheme:dark){.tlc-tag{color:hsl(38 90% 65%)}.tlc-tag-by{color:hsl(38 60% 60%)}} /* 搜索命中 */ .tlc-hit{font-size:11.5px;color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.5); border-radius:6px;padding:5px 8px;line-height:1.45; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 底部区：客服 + 通话元信息 */ .tlc-ft{margin-top:auto;padding-top:12px;border-top:1px dashed hsl(var(--border)/.55); display:flex;flex-direction:column;gap:8px} /* 客服归属：小头像 + 名字 + 状态说明 */ .tlc-agent{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px; background:hsl(var(--muted)/.35)} .tlc-agent.none{background:hsl(var(--destructive)/.05);border:1px dashed hsl(var(--destructive)/.28)} .tlc-agent-av{flex:0 0 auto;width:26px;height:26px;border-radius:50%; display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff; background:linear-gradient(135deg,hsl(200 80% 50%),hsl(200 80% 65%)); box-shadow:0 1px 3px hsl(200 80% 40%/.28)} .tlc-agent-av.none{background:hsl(var(--muted-foreground)/.35);color:hsl(var(--muted-foreground)); box-shadow:none} .tlc-agent-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25} .tlc-agent-body b{font-size:12.5px;font-weight:650;color:hsl(var(--foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tlc-agent.none .tlc-agent-body b{color:hsl(var(--destructive))} .tlc-agent-body span{font-size:10.5px;color:hsl(var(--muted-foreground));margin-top:1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 元信息一行（时长 · 句数 · 线路） */ .tlc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:11.5px; color:hsl(var(--muted-foreground));padding:0 2px} .tlc-dur{font-variant-numeric:tabular-nums;font-weight:600;color:hsl(var(--foreground))} .tlc-turns{font-weight:600;color:hsl(var(--primary))} .tlc-line{color:hsl(var(--muted-foreground))} /* ============================================================ 分组标题（外呼/接听共用） ============================================================ */ .tl-row{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} /* ============================================================ 外呼卡 .tco —— 琥珀边框 + 客户档案卡 ============================================================ */ .tco{--acc:hsl(var(--primary));--acc-soft:hsl(var(--primary)/.09); background:hsl(var(--card));border:1px solid hsl(var(--border)/.75);border-radius:14px; padding:0 14px 12px;position:relative;overflow:hidden;cursor:pointer; box-shadow:0 1px 3px hsl(222 47% 11%/.05); transition:transform .18s,box-shadow .18s,border-color .18s; display:flex;flex-direction:column;gap:9px} .tco.t-ok{--acc:hsl(var(--success));--acc-soft:hsl(var(--success)/.08)} .tco.t-miss{--acc:hsl(38 92% 52%);--acc-soft:hsl(38 92% 50%/.08)} .tco.t-fail{--acc:hsl(var(--destructive));--acc-soft:hsl(var(--destructive)/.08)} .tco:hover{transform:translateY(-2px);border-color:var(--acc); box-shadow:0 8px 22px hsl(222 47% 11%/.12), 0 2px 4px var(--acc-soft)} .tco.on{border-color:var(--acc);box-shadow:0 4px 18px var(--acc-soft)} .tco-band{height:4px;margin:0 -14px;background:var(--acc)} .tco-inner{display:flex;align-items:flex-start;gap:10px;padding-top:10px} /* 左：结果 + 时间（垂直堆叠，与右侧客户档案分列） */ .tco-left{flex:0 0 auto;width:66px;display:flex;flex-direction:column;align-items:flex-start;gap:6px} .tco-result{padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700; color:#fff;letter-spacing:.02em;line-height:1.2;background:hsl(var(--muted-foreground)/.5)} .tco-result.r-ok{background:linear-gradient(135deg,hsl(var(--success)),hsl(var(--success)/.8)); box-shadow:0 2px 6px hsl(var(--success)/.28)} .tco-result.r-warn{background:linear-gradient(135deg,hsl(38 92% 52%),hsl(38 92% 60%)); box-shadow:0 2px 6px hsl(38 92% 50%/.28)} .tco-result.r-miss{background:linear-gradient(135deg,hsl(38 92% 52%),hsl(30 92% 48%)); box-shadow:0 2px 6px hsl(38 92% 40%/.3)} .tco-result.r-fail{background:linear-gradient(135deg,hsl(var(--destructive)),hsl(var(--destructive)/.8)); box-shadow:0 2px 6px hsl(var(--destructive)/.28)} .tco-result.r-muted{background:hsl(var(--muted-foreground)/.35);color:hsl(var(--muted-foreground));box-shadow:none} .tco-time{font-size:10.5px;color:hsl(var(--muted-foreground))} /* 右：客户档案（头像 + 姓名 + 号码） */ .tco-user{flex:1;min-width:0;display:flex;gap:10px;align-items:flex-start} .tco-av{flex:0 0 auto;width:40px;height:40px;border-radius:12px; display:grid;place-items:center;font-size:16px;font-weight:750;color:#fff;letter-spacing:-.02em; background:var(--acc); box-shadow:0 2px 6px var(--acc-soft)} .tco-user-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .tco-name{font-size:14px;font-weight:700;color:hsl(var(--foreground));letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tco-noname{color:hsl(var(--muted-foreground));font-weight:500;font-style:italic} .tco-sub{font-size:11.5px;color:hsl(var(--muted-foreground))} .tco-num{font-family:var(--mono);font-size:12.5px;font-weight:600;color:hsl(var(--foreground)); letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 客户档案扩展 chip（卡号 / 会员等级） */ .tco-extras{display:flex;flex-wrap:wrap;gap:5px} .tco-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px; font-size:11px;color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.55); font-family:var(--mono);letter-spacing:-.01em} .tco-chip.lv{color:hsl(38 92% 40%);background:hsl(38 92% 50%/.13);font-family:inherit} .tco-chip .ci{font-size:11px;font-family:inherit} /* 客户标签（客服打的备注） */ .tco-tag{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px; background:linear-gradient(135deg,hsl(38 92% 50%/.14),hsl(38 92% 50%/.06)); border:1px solid hsl(38 92% 50%/.32);font-size:12px;line-height:1.3} .tco-tag-i{font-size:12px;flex:0 0 auto} .tco-tag b{flex:1;min-width:0;font-weight:600;color:hsl(38 92% 30%); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tco-tag-by{flex:0 0 auto;font-size:10.5px;color:hsl(38 60% 40%);font-weight:500} @media(prefers-color-scheme:dark){.tco-tag b{color:hsl(38 90% 65%)}.tco-tag-by{color:hsl(38 60% 60%)}} .tco-hit{padding:5px 8px;border-radius:6px;font-size:11px;color:hsl(var(--muted-foreground)); background:hsl(var(--muted)/.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 底部：客服 + 通话度量 */ .tco-ft{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px; border-top:1px dashed hsl(var(--border)/.55)} .tco-agent{display:flex;align-items:center;gap:7px;flex:1;min-width:0} .tco-agent-av{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center; font-size:10.5px;font-weight:700;color:#fff; background:linear-gradient(135deg,hsl(200 80% 50%),hsl(200 80% 65%)); box-shadow:0 1px 3px hsl(200 80% 40%/.3)} .tco-agent.none .tco-agent-av{background:hsl(var(--muted-foreground)/.4); color:hsl(var(--muted-foreground));box-shadow:none} .tco-agent-body{flex:1;min-width:0;line-height:1.2} .tco-agent-body b{display:block;font-size:12px;font-weight:650;color:hsl(var(--foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tco-agent.none .tco-agent-body b{color:hsl(var(--destructive)/.85);font-weight:600} .tco-agent-body span{display:block;font-size:10px;color:hsl(var(--muted-foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .tco-metrics{flex:0 0 auto;display:flex;gap:9px;font-size:11px;color:hsl(var(--muted-foreground)); font-variant-numeric:tabular-nums} /* ============================================================ 接听卡 .tci —— 绿色系 + 号码 hero 布局 跟外呼卡完全不同：hero 显示号码；底部说明谁接的；来电视角 ============================================================ */ .tci{--acc:hsl(142 68% 42%);--acc-soft:hsl(142 68% 40%/.08); background:hsl(var(--card));border:1px solid hsl(var(--border)/.75);border-radius:14px; padding:14px;position:relative;overflow:hidden;cursor:pointer; box-shadow:0 1px 3px hsl(222 47% 11%/.05); transition:transform .18s,box-shadow .18s,border-color .18s; display:flex;flex-direction:column;gap:9px} .tci.t-ok{--acc:hsl(142 68% 42%);--acc-soft:hsl(142 68% 40%/.1)} .tci.t-ai{--acc:hsl(200 80% 48%);--acc-soft:hsl(200 80% 50%/.09)} .tci.t-miss{--acc:hsl(var(--destructive));--acc-soft:hsl(var(--destructive)/.08)} .tci:hover{transform:translateY(-2px);border-color:var(--acc); box-shadow:0 8px 22px var(--acc-soft), 0 2px 4px hsl(222 47% 11%/.06)} .tci.on{border-color:var(--acc);box-shadow:0 4px 18px var(--acc-soft)} /* 左侧脉冲小圆，让"呼入"有听声感 */ .tci::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:var(--acc)} /* Hero：来电图标 + 号码 + 结果药丸 */ .tci-hero{display:flex;align-items:center;gap:11px} /* ⚠️ 别写 var(--acc)/.75 —— var() 后面拼透明度是非法 CSS，整条背景会被丢弃， 白图标落在白底上变"空泡泡"（2026-08-30 实测修复） */ .tci-ico{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:var(--acc);color:#fff; box-shadow:0 3px 8px var(--acc-soft), 0 0 0 4px hsl(var(--card)), 0 0 0 5px var(--acc-soft); animation:tci-ring 2.5s ease-out infinite} @keyframes tci-ring{ 0%,60%{box-shadow:0 3px 8px var(--acc-soft),0 0 0 4px hsl(var(--card)),0 0 0 5px var(--acc-soft)} 70%{box-shadow:0 3px 8px var(--acc-soft),0 0 0 4px hsl(var(--card)),0 0 0 10px var(--acc-soft)} 100%{box-shadow:0 3px 8px var(--acc-soft),0 0 0 4px hsl(var(--card)),0 0 0 12px transparent} } .tci-ico svg{width:18px;height:18px} .tci-hero-body{flex:1;min-width:0} .tci-num{font-family:var(--mono);font-size:15px;font-weight:700;color:hsl(var(--foreground)); letter-spacing:-.02em;line-height:1.15; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tci-name{margin-top:2px;font-size:11.5px;color:hsl(var(--muted-foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tci-result{flex:0 0 auto;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em} .tci-result.r-ok{background:linear-gradient(135deg,hsl(142 68% 42%),hsl(142 68% 50%))} .tci-result.r-ai{background:linear-gradient(135deg,hsl(200 80% 48%),hsl(200 80% 58%))} .tci-result.r-miss{background:linear-gradient(135deg,hsl(var(--destructive)),hsl(var(--destructive)/.8))} .tci-result.r-muted{background:hsl(var(--muted-foreground)/.4);color:hsl(var(--muted-foreground))} /* 元信息（时间 · 响铃 · 时长 · 句数） */ .tci-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:2px 0; font-size:11px;color:hsl(var(--muted-foreground))} .tci-time{font-family:var(--mono);color:hsl(var(--foreground));font-weight:600} .tci-ring{color:hsl(38 92% 40%);font-weight:600} @media(prefers-color-scheme:dark){.tci-ring{color:hsl(38 90% 65%)}} /* 标签 */ .tci-tag{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px; background:linear-gradient(135deg,hsl(200 80% 50%/.11),hsl(200 80% 50%/.05)); border:1px solid hsl(200 80% 50%/.28);font-size:12px;line-height:1.3} .tci-tag-i{font-size:12px;flex:0 0 auto} .tci-tag b{flex:1;min-width:0;font-weight:600;color:hsl(200 60% 35%); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tci-tag-by{flex:0 0 auto;font-size:10.5px;color:hsl(200 30% 50%);font-weight:500} @media(prefers-color-scheme:dark){.tci-tag b{color:hsl(200 80% 68%)}.tci-tag-by{color:hsl(200 40% 60%)}} .tci-hit{padding:5px 8px;border-radius:6px;font-size:11px;color:hsl(var(--muted-foreground)); background:hsl(var(--muted)/.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 底部："谁接的"—人工/AI/未接 三态视觉不同 */ .tci-ft{display:flex;align-items:center;gap:9px;margin-top:auto;padding:10px 12px; border-radius:9px;background:hsl(142 68% 40%/.08)} .tci-ft.ai-only{background:hsl(200 80% 50%/.08)} .tci-ft-ico{flex:0 0 auto;font-size:19px;line-height:1} .tci-ft-ico.ai{color:hsl(200 80% 48%)} .tci-ft-ico.miss{color:hsl(var(--destructive))} .tci-ft-body{flex:1;min-width:0;line-height:1.2} .tci-ft-body b{display:block;font-size:12.5px;font-weight:650;color:hsl(var(--foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tci-ft-body span{display:block;font-size:11px;color:hsl(var(--muted-foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .tci.t-miss .tci-ft{background:hsl(var(--destructive)/.06); border:1px dashed hsl(var(--destructive)/.28)} .tci.t-miss .tci-ft-body b{color:hsl(var(--destructive))} /* --- 遗留（可能还在别处用到）--- */ .tl-i{padding:10px 14px;border-bottom:1px solid hsl(var(--border));cursor:pointer;border-left:3px solid transparent} .tl-i:hover{background:hsl(var(--accent))} .tl-i.on{background:hsl(var(--accent));border-left-color:hsl(var(--primary))} .tl-top{display:flex;align-items:center;gap:7px} .tl-num{font-family:var(--mono);font-size:13px;font-weight:600} .tl-time{margin-left:auto;font-size:11px;font-family:var(--mono);color:hsl(var(--muted-foreground))} .tl-sub{margin-top:4px;font-size:11.5px;color:hsl(var(--muted-foreground));display:flex;gap:10px;flex-wrap:wrap} .tl-hit{margin-top:5px;font-size:11.5px;color:hsl(var(--muted-foreground)); background:hsl(var(--muted)/.5);border-radius:6px;padding:4px 7px;line-height:1.45} .dirtag{font-size:11px;padding:1px 6px;border-radius:5px;border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground))} .dirtag.in{color:#1f9d51;border-color:#22c55e55} .dirtag.out{color:hsl(var(--primary));border-color:hsl(var(--primary)/.4)} .dirtag.miss{color:hsl(var(--destructive));border-color:hsl(var(--destructive)/.4)} .dirtag.live{color:#b45309;border-color:#f59e0b66} /* 振铃中 / 呼出中：还没结束的那种 */ /* mark（搜索高亮）样式在文件后段的精修区（token 化，深浅主题通用） */ /* .chat-hd 的完整样式在 #talkChatMask 弹层块里（2026-08-29 重设计，头部固定不滚） */ .turn{display:flex;gap:9px;margin-bottom:15px;max-width:78%} .turn.me{margin-left:auto;flex-direction:row-reverse} .turn .tav{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; font-size:10px;font-weight:650;background:hsl(var(--card));border:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground))} .turn.me .tav{border-color:hsl(var(--primary)/.5);color:hsl(var(--primary))} .bub{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:12px;padding:9px 12px;min-width:0} .turn.me .bub{background:hsl(var(--primary)/.07);border-color:hsl(var(--primary)/.25)} .bub .meta{display:flex;align-items:center;gap:8px;font-size:11px;font-family:var(--mono); color:hsl(var(--muted-foreground));margin-bottom:4px} .turn.me .bub .meta{justify-content:flex-end} .bub .src{font-size:14px;word-break:break-word;line-height:1.55} .bub .tr{margin-top:6px;padding-top:6px;border-top:1px dashed hsl(var(--border)); font-size:12.5px;color:hsl(var(--muted-foreground));word-break:break-word;line-height:1.55} .bub .tr::before{content:"译";font-size:9.5px;border:1px solid hsl(var(--border));border-radius:4px; padding:0 4px;margin-right:6px;vertical-align:1px} .bub .tr.only{border:none;padding:0;margin:0;font-size:14px;color:hsl(var(--foreground))} .trstate{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:hsl(var(--muted-foreground))} .trstate.run{color:#b45309} .trstate.fail{color:hsl(var(--destructive))} /* 客服给这通电话记的「客户状态/备注」——高亮摆在对话上方 */ .call-note{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:10px 13px; border-radius:10px;background:hsl(38 92% 50%/.1);border:1px solid hsl(38 92% 50%/.32);line-height:1.6} .call-note .cn-label{font-size:11px;font-weight:700;color:#b45309;background:hsl(38 92% 50%/.16); border-radius:6px;padding:2px 8px;flex:0 0 auto} @media(prefers-color-scheme:dark){.call-note .cn-label{color:#f5c86b}} .call-note .cn-text{font-size:14px;color:hsl(var(--foreground));white-space:pre-wrap;word-break:break-word} .call-note .cn-by{font-size:12px;color:hsl(var(--muted-foreground));margin-left:auto;flex:0 0 auto} @media(max-width:900px){.talk-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.talk-list{max-height:220px}} .seat.clickable{cursor:pointer} .seat.clickable:hover{border-color:hsl(var(--primary)/.55);box-shadow:var(--shadow-sm)} /* 客服筛选：人一多下拉就翻不动，所以做成"打字过滤 + 下拉候选" */ .agentpick{position:relative} .agentpick input{width:210px} .agentpick.picked input{border-color:hsl(var(--primary));background:hsl(var(--primary)/.06);font-weight:600} .agentpop{position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:270px;max-height:300px; overflow-y:auto;background:hsl(var(--card));border:1px solid hsl(var(--border)); border-radius:var(--radius-sm);box-shadow:0 12px 30px hsl(220 40% 3%/.28);padding:4px} .agentpop .ai{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13px} .agentpop .ai:hover,.agentpop .ai.act{background:hsl(var(--accent))} .agentpop .ai .g{margin-left:auto;font-size:11px;color:hsl(var(--muted-foreground))} .agentpop .ai .lid{font-family:var(--mono);font-size:11px;color:hsl(var(--muted-foreground))} .agentpop .none{padding:10px;color:hsl(var(--muted-foreground));font-size:12.5px} .agentpop .hd{padding:6px 10px 4px;font-size:11px;font-family:var(--mono);color:hsl(var(--muted-foreground))} /* ---------------- 坐席台 v2（20 人一屏，超过 20 翻页） ---------------- */ .seat-kpis{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;margin-bottom:2px} .seat-kpis .k b{font-size:22px;font-weight:700} .seat-kpis .k span{font-size:12px;color:hsl(var(--muted-foreground));margin-left:5px} .seat-kpis .k.bad b{color:hsl(var(--destructive))} .seat-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;margin:12px 0 7px; background:hsl(var(--muted))} .seat-bar i{display:block} .seat-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px; color:hsl(var(--muted-foreground));margin-bottom:16px} .seat-legend span{display:inline-flex;align-items:center;gap:6px;cursor:pointer} .seat-legend span:hover,.seat-legend span.on{color:hsl(var(--foreground))} .seat-legend span.on b{text-decoration:underline} .seat-legend i{width:9px;height:9px;border-radius:3px} .seat-legend b{color:hsl(var(--foreground));font-weight:650} .seat-alert{display:flex;align-items:center;gap:10px;background:hsl(var(--destructive)/.09); border:1px solid hsl(var(--destructive)/.35);border-radius:var(--radius-sm); padding:10px 14px;margin-bottom:16px;font-size:13px} .seat-alert b{color:hsl(var(--destructive))} .seat-alert .right{margin-left:auto} .seat-tb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px} .seat-tb input,.seat-tb select{height:34px;padding:0 11px;border-radius:var(--radius-sm); border:1px solid hsl(var(--input));background:hsl(var(--background)); color:hsl(var(--foreground));font:inherit;font-size:13px} .seat-tb input:focus,.seat-tb select:focus{outline:0;border-color:hsl(var(--ring)); box-shadow:0 0 0 3px hsl(var(--ring)/.16)} .seat-tb .sp{flex:1} /* 卡片：比 v1 小一半，20 张一屏放得下 */ .seatwall2{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:9px} .seatwall2 .empty{grid-column:1/-1} .sc{background:hsl(var(--card));border:1px solid hsl(var(--border)); border-left:3px solid hsl(var(--muted-foreground)/.45);border-radius:10px;padding:9px 11px;cursor:pointer} .sc:hover{border-color:hsl(var(--primary)/.5)} .sc.live,.sc.dialing{border-left-color:hsl(var(--primary))} .sc.ringing{border-left-color:#f5b942;animation:scblink 1s steps(2,end) infinite} .sc.lineerr{border-left-color:hsl(var(--destructive));background:hsl(var(--destructive)/.05)} .sc.idle{border-left-color:#22c55e} .sc.off{opacity:.45;filter:saturate(.25)} @keyframes scblink{50%{background:#f5b94219}} .sc .n{display:flex;align-items:center;gap:6px} .sc .n b{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sc .n .ext{margin-left:auto;font-size:11px;font-family:var(--mono);color:hsl(var(--muted-foreground))} .sc .s{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12.5px;font-weight:600} .sc .s i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:currentColor} .sc .s .t{margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums} .sc .d{margin-top:4px;font-size:11.5px;color:hsl(var(--muted-foreground));min-height:17px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sc .f{margin-top:7px;padding-top:6px;border-top:1px solid hsl(var(--border)); font-size:11px;color:hsl(var(--muted-foreground));display:flex;gap:9px} .k-live,.k-dialing{color:hsl(var(--primary))} .k-ringing{color:#b45309} .k-lineerr{color:hsl(var(--destructive))} .k-idle{color:#1f9d51} .k-off{color:hsl(var(--muted-foreground))} .seat-tbl{width:100%;border-collapse:collapse;font-size:13px;background:hsl(var(--card)); border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden} .seat-tbl th{text-align:left;font-size:11.5px;font-weight:500;color:hsl(var(--muted-foreground)); padding:9px 11px;border-bottom:1px solid hsl(var(--border));white-space:nowrap} .seat-tbl td{padding:7px 11px;border-bottom:1px solid hsl(var(--border))} .seat-tbl tbody tr{cursor:pointer} .seat-tbl tbody tr:hover td{background:hsl(var(--accent))} .seat-pager{display:flex;align-items:center;gap:10px;justify-content:center; margin-top:16px;color:hsl(var(--muted-foreground));font-size:12.5px} .seat-pager button{background:hsl(var(--card));border:1px solid hsl(var(--border)); color:hsl(var(--foreground));border-radius:7px;padding:5px 12px;font-size:12.5px;cursor:pointer} .seat-pager button:disabled{opacity:.4;cursor:default} .seat-pager .pg{font-family:var(--mono)} /* 单人抽屉 */ .seat-dw{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:93vw;z-index:61; background:hsl(var(--card));border-left:1px solid hsl(var(--border));overflow:auto;padding:22px} .seat-dw .x{position:absolute;top:16px;right:18px;background:none;border:none; color:hsl(var(--muted-foreground));font-size:22px;cursor:pointer;line-height:1} .seat-dw h2{font-size:17px;margin:0} .seat-dw .who2{color:hsl(var(--muted-foreground));font-size:12px;font-family:var(--mono);margin-top:3px} .seat-dw .rec{display:flex;gap:9px;align-items:center;font-size:12.5px;padding:7px 0; border-bottom:1px solid hsl(var(--border))} .seat-dw .rec .peer{font-family:var(--mono)} .seat-dw .rec .ago{margin-left:auto;color:hsl(var(--muted-foreground));font-size:11.5px} /* ---------------- AI 人设 ---------------- */ .vh-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap} .vh-right{margin-left:auto;display:flex;gap:8px} .pn-tb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px} .pn-tb input,.pn-tb select{height:34px;padding:0 11px;border-radius:var(--radius-sm); border:1px solid hsl(var(--input));background:hsl(var(--background));color:hsl(var(--foreground)); font:inherit;font-size:13px} .pn-tb input{width:220px} .pn-tb .sp{flex:1} .pn-tb .hint{color:hsl(var(--muted-foreground));font-size:12.5px} .pn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px} .pn-grid .empty{grid-column:1/-1} .pn{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius); padding:16px 17px;transition:border-color .15s,transform .15s} .pn:hover{border-color:hsl(var(--primary)/.45);transform:translateY(-1px)} .pn.off{opacity:.55} .pn .top{display:flex;align-items:flex-start;gap:10px} .pn .nm{font-size:15.5px;font-weight:650;letter-spacing:-.01em} .pn .note{color:hsl(var(--muted-foreground));font-size:12.5px;margin-top:3px;min-height:19px} .pn .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px} .pn .tag{font-size:11.5px;border:1px solid hsl(var(--border));border-radius:20px;padding:2px 9px; color:hsl(var(--muted-foreground));display:inline-flex;align-items:center;gap:5px} .pn .tag b{color:hsl(var(--foreground));font-weight:600} .pn .tag.zh{color:#3b82f6;border-color:#3b82f655} .pn .tag.en{color:#8b5cf6;border-color:#8b5cf655} .pn .dbadge{font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 7px;margin-left:6px; background:hsl(var(--primary));color:hsl(var(--primary-foreground))} .pn .dbadge.in{background:#22c55e;color:#04210f} .pn .foot{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px; border-top:1px solid hsl(var(--border))} .pn .foot .who{color:hsl(var(--muted-foreground));font-size:11.5px;margin-right:auto} /* 开关 */ .sw{width:40px;height:23px;border-radius:20px;background:hsl(var(--muted-foreground)/.35); position:relative;cursor:pointer;flex:0 0 auto;border:none;padding:0;transition:background .18s} .sw::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%; background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.35)} .sw.on{background:#22c55e} .sw.on::after{transform:translateX(17px)} .swrow{display:flex;align-items:center;gap:10px;margin-bottom:12px} .swrow .lbl b{font-size:13.5px;font-weight:600} .swrow .lbl span{display:block;color:hsl(var(--muted-foreground));font-size:11.5px;margin-top:1px} /* 编辑表单 */ #pnEdit .card-head h3{display:flex;align-items:center;gap:9px} .stepn{width:20px;height:20px;border-radius:6px;background:hsl(var(--primary)); color:hsl(var(--primary-foreground));display:grid;place-items:center;font-size:11px;font-weight:700} #pnEdit .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} #pnEdit .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} #pnEdit .fld{margin-bottom:15px} #pnEdit .fld:last-child{margin-bottom:0} #pnEdit .fld > label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px} #pnEdit .fld > label small{color:hsl(var(--muted-foreground));font-weight:400;margin-left:6px} #pnEdit input[type=text],#pnEdit select,#pnEdit textarea{width:100%; background:hsl(var(--background));border:1px solid hsl(var(--input));color:hsl(var(--foreground)); border-radius:var(--radius-sm);padding:9px 12px;font:inherit;font-size:13.5px;outline:none} #pnEdit textarea{line-height:1.65;resize:vertical;font-size:13px;font-family:inherit} #pnEdit input:focus,#pnEdit select:focus,#pnEdit textarea:focus{border-color:hsl(var(--ring)); box-shadow:0 0 0 3px hsl(var(--ring)/.16)} #pnEdit .hint{color:hsl(var(--muted-foreground));font-size:11.5px;margin-top:6px;line-height:1.6} .seg.sm button{padding:5px 11px;font-size:12px} .pn-preview{background:hsl(var(--muted)/.4);border:1px dashed hsl(var(--border)); border-radius:var(--radius-sm);padding:12px 14px;margin-top:4px} .pn-preview .t{font-size:11.5px;color:hsl(var(--muted-foreground));margin-bottom:8px} .pn-mini{display:flex;align-items:center;gap:9px;background:hsl(var(--card)); border:1px solid hsl(var(--border));border-radius:var(--radius-sm);padding:9px 12px} .pn-mini b{font-size:13.5px} .pn-mini span{color:hsl(var(--muted-foreground));font-size:12px} .advbox{border-top:1px dashed hsl(var(--border))} .advbox > summary{cursor:pointer;padding:12px 20px;font-size:12.5px; color:hsl(var(--muted-foreground));list-style:none} .advbox > summary::-webkit-details-marker{display:none} .advbox > summary::before{content:"▸ ";display:inline-block;transition:transform .15s} .advbox[open] > summary::before{transform:rotate(90deg)} .advbox > summary:hover{color:hsl(var(--foreground))} .pn-sticky{position:sticky;bottom:0;display:flex;align-items:center;gap:9px; padding:16px 0 6px;background:linear-gradient(transparent,hsl(var(--background)) 30%)} .pn-sticky .sp{flex:1} /* ============ 人设话术 6 页 + token 计数（2026-09-14 user 重设计）============ 页签 = 分段卡片，每页一个主题色（--pc），与下方构成条、编辑区左侧色条一一对应； 合计胶囊按阈值变色：≥5 万黄 / ≥8 万橙 / ≥10 万红。 选择器一律带 #pnEdit + 类名，稳压 #app textarea 那组通用表单样式，不依赖文件先后顺序。 */ #pnEdit{--pp-yel:43 96% 40%;--pp-org:24 95% 47%;--pp-red:var(--destructive)} :root[data-theme="dark"] #pnEdit{--pp-yel:46 95% 57%;--pp-org:27 96% 61%} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #pnEdit{--pp-yel:46 95% 57%;--pp-org:27 96% 61%}} #pnEdit .pp-total{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px; border:1px solid hsl(var(--border));background:hsl(var(--muted)/.6);font-size:12px; color:hsl(var(--muted-foreground));white-space:nowrap;cursor:default; transition:background .2s,border-color .2s,color .2s} #pnEdit .pp-total b{font-size:15px;font-weight:750;letter-spacing:-.01em;color:hsl(var(--foreground)); font-variant-numeric:tabular-nums} #pnEdit .pp-total.t-yel{--pt:var(--pp-yel)} #pnEdit .pp-total.t-org{--pt:var(--pp-org)} #pnEdit .pp-total.t-red{--pt:var(--pp-red)} #pnEdit .pp-total[class*=" t-"]{color:hsl(var(--pt));background:hsl(var(--pt)/.12);border-color:hsl(var(--pt)/.5)} #pnEdit .pp-total[class*=" t-"] b{color:hsl(var(--pt))} #pnEdit .pp-tabs{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:4px;padding:4px; border-radius:12px;background:hsl(var(--muted)/.6);border:1px solid hsl(var(--border)/.8)} #pnEdit .pp-tab{position:relative;display:flex;align-items:center;gap:8px;min-width:0;height:44px;padding:0 10px; border:0;border-radius:9px;background:transparent;color:hsl(var(--muted-foreground)); font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s} #pnEdit .pp-tab:hover{color:hsl(var(--foreground));background:hsl(var(--card)/.65)} #pnEdit .pp-tab[aria-selected="true"]{color:hsl(var(--foreground));background:hsl(var(--card)); box-shadow:0 1px 2px hsl(222 47% 11%/.07),0 4px 12px -6px hsl(222 47% 11%/.24)} #pnEdit .pp-tab[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px; border-radius:2px 2px 0 0;background:hsl(var(--pc))} #pnEdit .pp-tab:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px} /* 人工介入=无人工：转人工页整页停用（2026-09-15 user）。内容保留，改回客服组就能接着用 */ #pnEdit .pp-tab.pp-off{opacity:.42;cursor:not-allowed;text-decoration:line-through} #pnEdit .pp-tab.pp-off:hover{background:transparent;color:hsl(var(--muted-foreground))} #pnEdit .pp-pane.pp-off{opacity:.5} #pnEdit .pp-pane.pp-off .pp-ta{background:hsl(var(--muted)/.5);cursor:not-allowed} #pnEdit .pp-pane.pp-off::before{content:"这套人设选了「无人工」，本页不会发给 AI"; display:block;margin:0 0 10px;padding:8px 11px;border-radius:9px;font-size:12px;font-weight:600; color:hsl(var(--warning));background:hsl(var(--warning)/.1);border:1px solid hsl(var(--warning)/.28)} #pnEdit .pp-n{flex:0 0 auto;width:20px;height:20px;border-radius:6px;display:grid;place-items:center; font-size:11px;font-weight:750;color:hsl(var(--pc));background:hsl(var(--pc)/.14);transition:background .15s,color .15s} #pnEdit .pp-tab[aria-selected="true"] .pp-n,#pnEdit .pp-pane-hd .pp-n{color:#fff;background:hsl(var(--pc))} #pnEdit .pp-tab-name{flex:1;min-width:0;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #pnEdit .pp-tab-tok{flex:0 0 auto;font:600 11px/1 var(--mono);color:hsl(var(--muted-foreground)); font-variant-numeric:tabular-nums} #pnEdit .pp-tab-tok.none{font-family:inherit;font-weight:500;opacity:.65} #pnEdit .pp-tab-tok.need{font-family:inherit;color:hsl(var(--destructive))} #pnEdit .pp-tab-tok.t-yel,#pnEdit .pp-pane-tok.t-yel{color:hsl(var(--pp-yel))} #pnEdit .pp-tab-tok.t-org,#pnEdit .pp-pane-tok.t-org{color:hsl(var(--pp-org))} #pnEdit .pp-tab-tok.t-red,#pnEdit .pp-pane-tok.t-red{color:hsl(var(--pp-red))} #pnEdit .pp-pane{position:relative;border:1px solid hsl(var(--border));border-radius:12px;overflow:hidden; background:hsl(var(--card));transition:border-color .15s,box-shadow .15s} #pnEdit .pp-pane::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:hsl(var(--pc));z-index:1} #pnEdit .pp-pane:focus-within{border-color:hsl(var(--pc)/.55);box-shadow:0 0 0 3px hsl(var(--pc)/.12)} #pnEdit .pp-pane-hd{display:flex;align-items:center;gap:10px;padding:11px 16px 11px 18px; border-bottom:1px solid hsl(var(--border)/.7);background:linear-gradient(90deg,hsl(var(--pc)/.07),transparent 55%)} #pnEdit .pp-pane-t{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1} #pnEdit .pp-pane-t b{font-size:14px;font-weight:720;white-space:nowrap} #pnEdit .pp-pane-t span{font-size:12px;color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #pnEdit .pp-pane-tok{flex:0 0 auto;font-size:12px;color:hsl(var(--muted-foreground));white-space:nowrap} #pnEdit .pp-pane-tok b{font-weight:700;color:hsl(var(--foreground));font-variant-numeric:tabular-nums} #pnEdit .pp-pane-tok[class*=" t-"] b{color:inherit} #pnEdit textarea.pp-ta{display:block;width:100%;min-height:320px;margin:0;padding:14px 18px;border:0;border-radius:0; background:transparent;box-shadow:none;font-size:13.5px;line-height:1.8;resize:vertical} #pnEdit textarea.pp-ta:focus{border:0;box-shadow:none} #pnEdit textarea.pp-ta::placeholder{color:hsl(var(--muted-foreground)/.72)} #pnEdit .pp-pane-ft{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:42px;padding:8px 16px 8px 18px; border-top:1px dashed hsl(var(--border));font-size:12px;color:hsl(var(--muted-foreground))} #pnEdit .pp-pane-ft:empty{display:none} #pnEdit .pp-pane-ft .btn{margin-left:auto} #pnEdit .pp-xst{display:inline-flex;align-items:center;gap:7px} #pnEdit .pp-xst::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:hsl(var(--muted-foreground)/.5)} #pnEdit .pp-xst.on{color:hsl(var(--success))} #pnEdit .pp-xst.on::before{background:hsl(var(--success));box-shadow:0 0 0 3px hsl(var(--success)/.18)} #pnEdit .pp-warn{color:hsl(var(--warning));font-weight:600} #pnEdit .pp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:10px; font-size:11.5px;color:hsl(var(--muted-foreground))} #pnEdit .pp-legend{display:inline-flex;align-items:center;gap:5px} #pnEdit .pp-legend i{display:inline-block;width:9px;height:9px;margin-left:5px;border-radius:3px} #pnEdit .pp-legend i.t-yel{background:hsl(var(--pp-yel))} #pnEdit .pp-legend i.t-org{background:hsl(var(--pp-org))} #pnEdit .pp-legend i.t-red{background:hsl(var(--pp-red))} #pnEdit .pp-legacy{margin-top:14px;border:1px dashed hsl(var(--border));border-radius:10px;background:hsl(var(--muted)/.3)} #pnEdit .pp-legacy > summary{cursor:pointer;list-style:none;padding:10px 14px;font-size:12.5px;font-weight:650; color:hsl(var(--muted-foreground))} #pnEdit .pp-legacy > summary::-webkit-details-marker{display:none} #pnEdit .pp-legacy > summary::before{content:"▸ ";display:inline-block;transition:transform .15s} #pnEdit .pp-legacy[open] > summary::before{transform:rotate(90deg)} #pnEdit .pp-legacy > summary small{margin-left:6px;font-weight:400} #pnEdit .pp-legacy-body{display:grid;gap:10px;padding:0 14px 14px} #pnEdit .pp-lg{border:1px solid hsl(var(--border));border-radius:9px;background:hsl(var(--card));overflow:hidden} #pnEdit .pp-lg-hd{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px; border-bottom:1px solid hsl(var(--border)/.7)} #pnEdit .pp-lg-hd i{font-style:normal;font-size:11px;padding:1px 8px;border-radius:99px; color:hsl(var(--success));background:hsl(var(--success)/.1)} #pnEdit .pp-lg-hd span{margin-left:auto;color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums} #pnEdit .pp-lg pre{margin:0;padding:10px 12px;max-height:240px;overflow:auto;white-space:pre-wrap;word-break:break-word; font:12px/1.7 var(--mono);color:hsl(var(--foreground)/.85)} #pnEdit .pp-lg-act{display:flex;align-items:center;gap:10px;font-size:12px;color:hsl(var(--muted-foreground))} #pnEdit .pp-lg-act .btn{margin-left:auto} /* 对话时间戳时区（卡片「怎么说话」）：右边预览 AI 实际看到的那一行 */ #pnEdit .pn-tzrow{margin-top:14px} #pnEdit .pn-tzpv{display:flex;align-items:center;min-height:39px;padding:8px 12px;border-radius:var(--radius-sm); border:1px dashed hsl(var(--border));background:hsl(var(--muted)/.45);font:12.5px/1.5 var(--mono); color:hsl(var(--foreground));word-break:break-all} @media (max-width:980px){#pnEdit .pp-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:560px){#pnEdit .pp-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} #pnEdit .pp-pane-t span{display:none}} /* 登录门样式已抽到 static/login.css —— /console、/phone、/agent 三个页面共用一份。 别再往这里复制一份（本项目已经在 session/VAD/提示词/音色清单上栽过四次"抄多份"）。 */ /* ============================================================ 客服管理 —— 名册（2026-08-23 精细化重做） 设计原则（自定，别随手推翻）： ① 一屏只答三件事：谁能登录 / 他是谁 / 现在什么状态。占位信息不占版面。 ② 层级靠"字号 × 字重 × 灰度"三档拉开，不要所有文字挤在同一档 —— 简陋感的头号来源。 ③ 表面有质感：多层柔阴影 + 顶部内高光 + 低透明度描边，而不是一根 1px 硬线。 ④ 色彩克制：大面积中性，主色与状态色只出现在小面积（徽章、选中态、在线点）。 头像**不用随机色相**，那读起来是"杂"不是"精美"。 ⑤ 密码默认打码 —— 这页会被投屏截图，界面要帮着守住。 🔴 打码的类名不能叫 .mask：那是弹窗遮罩（position:fixed;inset:0）， 而且 closeModal() 会把所有 .mask 删掉。2026-08-23 真踩过。 ⑥ 微交互：160ms cubic-bezier(.4,0,.2,1)，行 hover 提亮操作区，focus 有 3px 柔光环。 ⑦ 数字一律 tabular-nums；加载态是骨架屏，不是"加载中…"。 ⑧ ⋯ 菜单挂 body 用 fixed 定位 —— .tbl-wrap 的 overflow-x 会裁掉绝对定位的下拉。 ============================================================ */ /* ---------- 页头 ---------- */ .ac-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:22px} .ac-head h1{margin:0;font-size:27px;font-weight:750;letter-spacing:-.028em;line-height:1.2} .ac-head p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:hsl(var(--muted-foreground));max-width:64ch} .ac-head-act{margin-left:auto;display:flex;gap:9px;flex:0 0 auto;padding-top:3px} .ac-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;cursor:pointer; font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em; color:hsl(var(--foreground));background:hsl(var(--card)); border:1px solid var(--ac-line);border-radius:var(--ac-r-sm); box-shadow:0 1px 2px hsl(222 47% 11%/.05),var(--ac-sheen); transition:background var(--ac-ease),border-color var(--ac-ease),transform var(--ac-ease),box-shadow var(--ac-ease)} .ac-btn svg{width:15px;height:15px;opacity:.85} .ac-btn:hover{background:hsl(var(--accent)/.7);transform:translateY(-1px); box-shadow:0 3px 8px hsl(222 47% 11%/.09),var(--ac-sheen)} .ac-btn:active{transform:translateY(0)} .ac-btn.primary{color:hsl(var(--primary-foreground));border-color:transparent; background:linear-gradient(180deg,hsl(var(--primary)/.94),hsl(var(--primary))); box-shadow:0 1px 2px hsl(var(--primary)/.35),0 6px 16px hsl(var(--primary)/.28),inset 0 1px 0 hsl(0 0% 100%/.22)} .ac-btn.primary:hover{box-shadow:0 3px 10px hsl(var(--primary)/.4),0 10px 24px hsl(var(--primary)/.3),inset 0 1px 0 hsl(0 0% 100%/.22)} .ac-btn svg{stroke-width:1.8} /* ---------- 统计卡 = 筛选器 ---------- */ .ac-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px} .ac-stat{position:relative;display:flex;flex-direction:column;gap:2px;padding:15px 16px;cursor:pointer; text-align:left;font:inherit;overflow:hidden; background:hsl(var(--card));border:1px solid var(--ac-line);border-radius:var(--ac-r); box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen); transition:transform var(--ac-ease),box-shadow var(--ac-ease),border-color var(--ac-ease),background var(--ac-ease)} .ac-stat:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow),var(--ac-sheen)} .ac-stat .n{font-size:25px;font-weight:750;letter-spacing:-.03em;line-height:1.15; font-variant-numeric:tabular-nums;color:hsl(var(--foreground))} .ac-stat .l{font-size:12px;font-weight:500;color:hsl(var(--muted-foreground));letter-spacing:.02em} .ac-stat .ic{position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:9px; display:grid;place-items:center;color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.75); transition:color var(--ac-ease),background var(--ac-ease)} .ac-stat .ic svg{width:15px;height:15px;stroke-width:1.8} .ac-stat.on{border-color:hsl(var(--primary)/.55);background:hsl(var(--primary)/.055); box-shadow:0 0 0 3px hsl(var(--primary)/.11),var(--ac-shadow)} .ac-stat.on .n{color:hsl(var(--primary))} .ac-stat.on .ic{color:hsl(var(--primary));background:hsl(var(--primary)/.14)} .ac-stat.tone-live .ic{color:hsl(var(--success));background:hsl(var(--success)/.13)} @media (max-width:1100px){.ac-stats{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---------- 面板 ---------- */ .ac-panel{background:hsl(var(--card));border:1px solid var(--ac-line);border-radius:var(--ac-r); box-shadow:var(--ac-shadow),var(--ac-sheen);overflow:hidden;margin-bottom:18px} .ac-panel-head{display:flex;align-items:baseline;gap:10px;padding:16px 20px 14px} .ac-panel-head h3{margin:0;font-size:14.5px;font-weight:680;letter-spacing:-.01em} .ac-panel-head span{font-size:12px;color:hsl(var(--muted-foreground))} /* 工具条 */ .ac-tb{display:flex;align-items:center;gap:12px;padding:14px 18px; border-bottom:1px solid hsl(var(--border)/.55);background:hsl(var(--muted)/.25)} .ac-tb .ac-sp{flex:1} .ac-search{position:relative;display:flex;align-items:center;width:min(320px,46%)} .ac-search svg{position:absolute;left:12px;width:15px;height:15px;pointer-events:none; color:hsl(var(--muted-foreground));opacity:.8} .ac-search input{width:100%;height:38px;padding:0 13px 0 36px;font:inherit;font-size:13px; color:hsl(var(--foreground));background:hsl(var(--card)); border:1px solid var(--ac-line);border-radius:999px; box-shadow:inset 0 1px 2px hsl(222 47% 11%/.04); transition:border-color var(--ac-ease),box-shadow var(--ac-ease)} .ac-search input::placeholder{color:hsl(var(--muted-foreground)/.85)} .ac-search input:focus{outline:none;border-color:hsl(var(--ring)/.65); box-shadow:0 0 0 3.5px hsl(var(--ring)/.15)} /* 开关（比裸 checkbox 干净） */ .ac-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;white-space:nowrap} .ac-toggle input{position:absolute;opacity:0;width:0;height:0} .ac-toggle .tk{position:relative;width:34px;height:20px;flex:0 0 auto;border-radius:999px; background:hsl(var(--muted-foreground)/.28);transition:background var(--ac-ease)} .ac-toggle .tk::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%; background:#fff;box-shadow:0 1px 3px hsl(222 47% 11%/.3);transition:transform var(--ac-ease)} .ac-toggle input:checked+.tk{background:hsl(var(--primary))} .ac-toggle input:checked+.tk::after{transform:translateX(14px)} .ac-toggle input:focus-visible+.tk{box-shadow:0 0 0 3.5px hsl(var(--ring)/.2)} .ac-toggle .tx{font-size:12.5px;color:hsl(var(--muted-foreground))} /* ---------- 表格 ---------- */ .ac-tbl{width:100%;border-collapse:separate;border-spacing:0} .ac-tbl th{padding:11px 16px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.075em; text-transform:none;font-family:var(--sans);color:hsl(var(--muted-foreground)/.9); background:hsl(var(--muted)/.35);border-bottom:1px solid hsl(var(--border)/.6);white-space:nowrap} .ac-tbl th.c-ops{text-align:right} .ac-tbl td{padding:14px 16px;font-size:13px;vertical-align:middle; border-bottom:1px solid hsl(var(--border)/.45)} .ac-tbl tbody tr:last-child td{border-bottom:none} .ac-tbl tbody tr{transition:background var(--ac-ease)} .ac-tbl tbody tr:hover{background:hsl(var(--primary)/.035)} .ac-tbl tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 hsl(var(--primary)/.55)} .ac-tbl tr.is-off{opacity:.5} /* 身份 */ .ac-who{display:flex;align-items:center;gap:12px;min-width:0} .ac-av{position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:50%; display:grid;place-items:center;font-size:14px;font-weight:700;letter-spacing:.01em; color:hsl(var(--muted-foreground)); background:linear-gradient(150deg,hsl(var(--muted)),hsl(var(--accent)/.85)); border:1px solid hsl(var(--border)/.9); box-shadow:inset 0 1px 0 hsl(0 0% 100%/.6),0 1px 2px hsl(222 47% 11%/.06)} .ac-av.is-admin{color:hsl(var(--primary)); background:linear-gradient(150deg,hsl(var(--primary)/.16),hsl(var(--primary)/.07)); border-color:hsl(var(--primary)/.32)} .ac-av .live{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%; background:hsl(var(--muted-foreground)/.45);border:2.5px solid hsl(var(--card))} .ac-av .live.on{background:hsl(var(--success));box-shadow:0 0 0 2px hsl(var(--success)/.2)} .ac-name{min-width:0} .ac-name b{display:block;font-size:14px;font-weight:650;letter-spacing:-.005em;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ac-name span{display:block;margin-top:1px;font-family:var(--mono);font-size:11.5px; color:hsl(var(--muted-foreground)/.9);letter-spacing:-.01em} /* 徽章 */ .ac-tag{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 9px;border-radius:999px; font-size:11.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap; color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.85); border:1px solid hsl(var(--border)/.75)} .ac-tag.pri{color:hsl(var(--primary));background:hsl(var(--primary)/.11);border-color:hsl(var(--primary)/.26)} /* ===== 人员详情弹窗（2026-08-29 由右侧抽屉改造；2026-09-05 定稿=固定正方形、与接听台「通话详情」同款） ===== user 2026-09-05 三次反馈：横版宽条不好看 → 竖版长方形不好看 → 左右分栏"不是正常的正方形"。 定稿照接听台 #cvMask .sheet 的样子：**一整块白色正方形** = 顶部标题栏（头像 + 姓名/角色 + 账号·班组 + 状态药丸 + 关闭）→ 今日四格一行 → 线路一行 → 近 7 天五格 → 最近通话占满余下高度自己滚。 边长 min(640px,94vw,86vh)，宽高定死、不随内容伸缩。角色染色只用在头像和角色标（组长琥珀/客服蓝）。 */ .talk-mask .modal.seatpop{--sz:min(640px,94vw,86vh);width:var(--sz);height:var(--sz);max-width:none; max-height:none;padding:0;border-radius:18px;overflow:hidden;display:flex;flex-direction:column; box-shadow:0 24px 60px hsl(222 47% 11%/.28),0 0 0 1px hsl(var(--border)/.6)} #seatPop{flex:1;min-height:0;display:flex;flex-direction:column} /* 顶部标题栏（同 .sheet-h：浅底、下分割线） */ #app .sp-hd{--hc:var(--primary);flex:0 0 auto;display:flex;align-items:center;gap:12px; padding:14px 58px 14px 18px;position:relative; background:hsl(var(--muted)/.35);border-bottom:1px solid hsl(var(--border)/.7)} #app .sp-hd::after{content:none} #app .sp-hd.t-lead{--hc:var(--warning)} #app .sp-av{position:relative;width:44px;height:44px;border-radius:13px;flex:0 0 auto; display:grid;place-items:center;font-size:18px;font-weight:800;color:#fff;letter-spacing:-.02em; background:linear-gradient(150deg,hsl(var(--hc)) 10%,hsl(var(--hc)/.72)); box-shadow:0 4px 12px hsl(var(--hc)/.32),inset 0 1px 0 hsl(0 0% 100%/.28)} #app .sp-av .live{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%; background:hsl(var(--muted-foreground)/.5);border:2px solid hsl(var(--card))} #app .sp-av .live.on{background:hsl(var(--success))} #app .sp-who{flex:1;min-width:0} #app .sp-name{display:flex;align-items:center;gap:8px;font-size:15.5px} #app .sp-name b{font-weight:800;letter-spacing:-.015em;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:hsl(var(--foreground))} #app .sp-role{font-style:normal;flex:0 0 auto;font-size:10.5px;font-weight:750;padding:2px 7px; border-radius:6px;color:#fff;background:hsl(var(--hc)/.9)} #app .sp-meta{margin-top:2px;font-size:12px;color:hsl(var(--muted-foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 状态药丸（标题栏右侧）：空闲绿 / 通话蓝闪 / 振铃琥珀 / 线路异常红 / 其它灰 */ #app .sp-state{--sc:var(--muted-foreground);flex:0 0 auto;display:inline-flex;align-items:center;gap:7px; height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:700; color:hsl(var(--sc));background:hsl(var(--card));border:1px solid hsl(var(--sc)/.32); box-shadow:0 1px 3px hsl(222 47% 11%/.07);max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .sp-state::before{content:"";width:7px;height:7px;border-radius:50%;background:hsl(var(--sc));flex:0 0 auto} #app .sp-state.s-live,#app .sp-state.s-dialing{--sc:var(--primary)} #app .sp-state.s-live::before{animation:sp-blink 1.2s ease-in-out infinite} #app .sp-state.s-ringing{--sc:var(--warning)} #app .sp-state.s-lineerr{--sc:var(--destructive)} #app .sp-state.s-idle{--sc:var(--success)} #app .sp-state .t{font-style:normal;font-family:var(--mono)} @keyframes sp-blink{50%{opacity:.25}} /* 今日四格一行 */ #app .sp-stats{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:14px 20px 0; background:hsl(var(--border)/.55);border:1px solid hsl(var(--border)/.55);border-radius:12px;overflow:hidden} #app .sp-stat{padding:11px 6px;text-align:center;background:hsl(var(--card))} #app .sp-stat b{display:block;font-size:19px;font-weight:800;letter-spacing:-.025em; color:hsl(var(--foreground));font-variant-numeric:tabular-nums;line-height:1.1} #app .sp-stat span{display:block;margin-top:4px;font-size:10.5px;color:hsl(var(--muted-foreground))} #app .sp-stat.warn b{color:hsl(var(--warning))} #app .sp-stat.ok b{color:hsl(var(--success))} /* 线路一行 */ #app .sp-line{flex:0 0 auto;margin:10px 20px 0;padding:8px 12px;border-radius:10px;font-size:12.5px; color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.35);display:flex;align-items:center;gap:8px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .sp-line::before{content:"";width:15px;height:15px;flex:0 0 auto; background:currentColor;opacity:.7; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.1 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.1 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z'/%3E%3C/svg%3E") center/contain no-repeat} #app .sp-line .sp-ok{color:hsl(var(--success));font-weight:650} #app .sp-lineerr{color:hsl(var(--destructive));font-weight:650} /* 主体：近 7 天固定在上，最近通话占满余下高度自己滚 */ #app .sp-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:2px 20px 0;overflow:hidden} #app .sp-body h4{flex:0 0 auto;margin:12px 0 8px;font-size:11px;font-weight:750;letter-spacing:.08em; color:hsl(var(--muted-foreground));text-transform:uppercase} #app .sp-stats.sp-week{grid-template-columns:repeat(5,1fr);margin:0 0 4px} #app .sp-week .sp-stat{padding:9px 4px} #app .sp-week .sp-stat b{font-size:15px} #app .sp-week .sp-stat span{font-size:10px;margin-top:3px} #app .sp-recent{flex:1;min-height:100px;overflow-y:auto;margin:0 0 16px;padding:0; border:1px solid hsl(var(--border)/.5);border-radius:12px;background:hsl(var(--muted)/.18)} #app .sp-recent .empty{padding:18px 12px;text-align:center;font-size:12.5px} /* 一通两行：第一行 方向药丸 + 号码 + 时长；第二行 时间 + 客服标签 + 「N 句」 */ #app .sp-recent .obs-rc-row{display:grid;grid-template-columns:auto 1fr auto; grid-template-areas:"st num dur" "time nm btn";column-gap:10px;row-gap:5px;align-items:center; padding:9px 12px;border-radius:0;background:transparent; border-bottom:1px solid hsl(var(--border)/.45)} #app .sp-recent .obs-rc-row:last-child{border-bottom:none} #app .sp-recent .obs-rc-row:hover{background:hsl(var(--muted)/.45)} #app .sp-recent .obs-rc-st{grid-area:st} #app .sp-recent .obs-rc-num{grid-area:num;font-size:13.5px;font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #app .sp-recent .obs-rc-dur{grid-area:dur;font-size:12px} #app .sp-recent .obs-rc-time{grid-area:time;min-width:0;font-size:11px;justify-self:start} #app .sp-recent .obs-rc-nm{grid-area:nm;font-size:11.5px} #app .sp-recent .obs-rc-nm .ibs-note{margin-left:0} #app .sp-recent .osm-talk{grid-area:btn;justify-self:end} #app .sp-ft{flex:0 0 auto;display:flex;justify-content:center;padding:8px 20px 12px; border-top:1px solid hsl(var(--border)/.5);font-size:11.5px} /* ===== 坐席台二级分页（2026-08-29）：分组名册 + 接听线路三段 ===== */ /* 名册筛选标签：全部 / 在线 / 未在线（在线绿、未在线灰；选中实色） */ #app .sg-filter{display:inline-flex;gap:4px;padding:4px;margin:2px 0 12px; border-radius:11px;background:hsl(var(--muted)/.55);border:1px solid hsl(var(--border)/.55)} #app .sg-chip{--fc:var(--primary);display:inline-flex;align-items:center;gap:6px;height:29px; padding:0 13px;border-radius:8px;font-size:12.5px;font-weight:650;cursor:pointer; color:hsl(var(--muted-foreground));transition:color var(--ac-ease),background var(--ac-ease)} #app .sg-chip.c-on{--fc:var(--success)} #app .sg-chip.c-off{--fc:var(--muted-foreground)} #app .sg-chip b{font-size:11px;font-weight:750;padding:2px 7px;border-radius:999px; background:hsl(var(--fc)/.12);color:hsl(var(--fc));font-variant-numeric:tabular-nums} #app .sg-chip:hover{color:hsl(var(--foreground))} #app .sg-chip.on{background:hsl(var(--card));color:hsl(var(--foreground)); box-shadow:0 1px 3px hsl(222 47% 11%/.12),var(--ac-sheen)} #app .sg{margin-bottom:18px} #app .sg-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:9px;padding:0 2px} #app .sg-hd > b{font-size:15px;font-weight:750;letter-spacing:-.015em} #app .sg-lead{font-size:12.5px;color:hsl(var(--warning));font-weight:650} #app .sg-cnt{margin-left:auto;font-size:12px;color:hsl(var(--muted-foreground))} #app .sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px} #app .sg-card{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer; background:hsl(var(--card));border:1px solid hsl(var(--border)/.75);border-radius:13px; box-shadow:var(--shadow-xs);transition:border-color var(--ac-ease),box-shadow var(--ac-ease)} #app .sg-card:hover{border-color:hsl(var(--primary)/.4);box-shadow:var(--ac-shadow),var(--ac-sheen)} #app .sg-card.is-lead{border-color:hsl(var(--warning)/.45); background:linear-gradient(155deg,hsl(var(--warning)/.06),hsl(var(--card)))} #app .sg-card.is-off{opacity:.5} /* 🔴 在线/离线一眼分得出（user 2026-09-03 反复要求做明显）： 离线=灰度化+压暗+虚线；在线=绿底渐变卡+绿粗左条+呼吸绿点+白字绿底「在线」徽章 */ #app .sg-card.sg-off{opacity:.5;filter:grayscale(.65);border-style:dashed} #app .sg-card.sg-on{background:linear-gradient(150deg,hsl(var(--success)/.11),hsl(var(--card)) 60%); border-color:hsl(var(--success)/.55);box-shadow:inset 5px 0 0 hsl(var(--success)),var(--shadow-xs)} #app .sg-live{font-size:11px;font-weight:850;line-height:1;padding:3px 10px;border-radius:999px; background:hsl(var(--muted));color:hsl(var(--muted-foreground));letter-spacing:.3px;flex:0 0 auto} #app .sg-live.on{background:hsl(var(--success));color:#fff;box-shadow:0 1px 5px hsl(var(--success)/.45)} #app .sg-card.st-live{border-color:hsl(var(--primary)/.5)} #app .sg-card.st-ringing{border-color:hsl(var(--warning)/.55)} #app .sg-card.st-lineerr{border-color:hsl(var(--destructive)/.5)} #app .sg-av{position:relative;width:38px;height:38px;border-radius:12px;flex:0 0 auto; display:grid;place-items:center;font-size:15px;font-weight:750;color:hsl(var(--foreground)); background:hsl(var(--muted));box-shadow:inset 0 0 0 1px hsl(var(--border))} #app .sg-av .live{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%; background:hsl(var(--muted-foreground)/.4);border:2px solid hsl(var(--card))} #app .sg-av .live.on{background:hsl(var(--success));box-shadow:0 0 0 3px hsl(var(--success)/.3); animation:sgpulse 1.8s ease-in-out infinite} @keyframes sgpulse{0%,100%{box-shadow:0 0 0 3px hsl(var(--success)/.3)}50%{box-shadow:0 0 0 6px hsl(var(--success)/.1)}} #app .sg-bd{flex:1;min-width:0} #app .sg-name{display:flex;align-items:center;gap:7px;font-size:13.5px} #app .sg-name b{font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .sg-role{font-style:normal;flex:0 0 auto;font-size:10px;font-weight:750;padding:1px 6px; border-radius:5px;color:hsl(var(--warning));background:hsl(var(--warning)/.13); box-shadow:inset 0 0 0 1px hsl(var(--warning)/.3)} #app .sg-sub{margin-top:2px;font-size:11.5px;color:hsl(var(--muted-foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .sg-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px} #app .sg-st{font-size:11.5px;font-weight:700;color:hsl(var(--muted-foreground))} #app .sg-st.s-live{color:hsl(var(--primary))} #app .sg-st.s-dialing{color:hsl(var(--primary))} #app .sg-st.s-ringing{color:hsl(var(--warning))} #app .sg-st.s-lineerr{color:hsl(var(--destructive))} #app .sg-st .t{font-style:normal;font-family:var(--mono);font-weight:650} #app .sg-today{font-size:10.5px;color:hsl(var(--muted-foreground)/.85)} /* 接听坐席台的线路三段 */ #app .si-seg{margin-bottom:12px} #app .si-seg:last-child{margin-bottom:0} #app .si-seg-hd{display:flex;align-items:center;gap:7px;margin-bottom:6px; font-size:12px;font-weight:750;color:hsl(var(--muted-foreground))} #app .si-seg-hd b{font-size:11px;padding:1px 7px;border-radius:999px; background:hsl(var(--muted)/.8);font-variant-numeric:tabular-nums} #app .si-seg-hd.s-live{color:hsl(var(--primary))} #app .si-seg-hd.s-live b{background:hsl(var(--primary)/.12);color:hsl(var(--primary))} #app .si-seg-hd.s-on{color:hsl(var(--success))} #app .si-seg-hd.s-on b{background:hsl(var(--success)/.12);color:hsl(var(--success))} /* 线路卡 = 成员卡形态，但状态是主视觉（2026-08-29 三稿，user：一眼分不出区别）： 分区盒按状态染边框+浅底，图标块实色渐变，状态是彩色药丸 */ #app .si-seg{--sc:var(--muted-foreground);padding:11px 13px;margin-bottom:12px; border:1px solid hsl(var(--sc)/.28);border-radius:13px;background:hsl(var(--sc)/.05)} #app .si-seg:last-child{margin-bottom:0} #app .si-seg.t-live{--sc:var(--primary)} #app .si-seg.t-on{--sc:var(--success)} #app .si-seg .si-seg-hd{margin-bottom:8px} #app .sg-card.si2{cursor:pointer;background:hsl(var(--card))} #app .sg-card.si2.t-live{border-color:hsl(var(--primary)/.55); box-shadow:0 2px 10px hsl(var(--primary)/.14)} #app .sg-card.si2.t-on{border-color:hsl(var(--success)/.45)} #app .sg-card.si2.t-off{opacity:.66} #app .si-av{color:#fff;box-shadow:none} #app .si-av svg{width:17px;height:17px} #app .si-av.t-live{background:linear-gradient(150deg,hsl(var(--primary)) 15%,hsl(var(--primary)/.72)); box-shadow:0 3px 9px hsl(var(--primary)/.32),inset 0 1px 0 hsl(0 0% 100%/.28)} #app .si-av.t-on{background:linear-gradient(150deg,hsl(var(--success)) 15%,hsl(var(--success)/.72)); box-shadow:0 3px 9px hsl(var(--success)/.3),inset 0 1px 0 hsl(0 0% 100%/.28)} #app .si-av.t-off{background:hsl(var(--muted));color:hsl(var(--muted-foreground)); box-shadow:inset 0 0 0 1px hsl(var(--border))} #app .si-ext{flex:0 0 auto;font-size:10.5px;color:hsl(var(--muted-foreground)); background:hsl(var(--muted)/.55);padding:1px 6px;border-radius:5px} #app .si-pill{--sc:var(--muted-foreground);display:inline-flex;align-items:center;height:20px; padding:0 9px;border-radius:999px;font-size:10.5px;font-weight:750; color:hsl(var(--sc));background:hsl(var(--sc)/.12);box-shadow:inset 0 0 0 1px hsl(var(--sc)/.3)} #app .si-pill.t-live{--sc:var(--primary);color:#fff;background:hsl(var(--primary)/.9); box-shadow:0 2px 6px hsl(var(--primary)/.3)} #app .si-pill.t-on{--sc:var(--success)} #app .si-none{padding:4px 2px;font-size:12px;color:hsl(var(--muted-foreground)/.7)} #app .si-offnote{margin-top:2px;font-size:11.5px;color:hsl(var(--muted-foreground)/.8)} /* ===== 管理日志（2026-08-29 重做）：分日时间线，动作类型配图标与色调 ===== */ #app .alog{padding:6px 18px 14px;position:relative} #app .alog-day{display:flex;align-items:center;gap:10px;margin:14px 0 8px} #app .alog-day::after{content:"";flex:1;height:1px;background:hsl(var(--border)/.6)} #app .alog-day span{font-size:11.5px;font-weight:750;letter-spacing:.05em; color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.6); padding:3px 10px;border-radius:999px} #app .alog-item{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:10px; transition:background var(--ac-ease)} #app .alog-item:hover{background:hsl(var(--muted)/.4)} #app .alog-ic{--lc:var(--muted-foreground);width:30px;height:30px;border-radius:9px;flex:0 0 auto; display:grid;place-items:center;color:hsl(var(--lc));background:hsl(var(--lc)/.11); box-shadow:inset 0 0 0 1px hsl(var(--lc)/.18)} #app .alog-ic svg{width:15px;height:15px} #app .alog-ic.t-ok{--lc:var(--success)} #app .alog-ic.t-pri{--lc:var(--primary)} #app .alog-ic.t-warn{--lc:var(--warning)} #app .alog-ic.t-crit{--lc:var(--destructive)} #app .alog-ic.t-vio{--lc:262 66% 52%} :root[data-theme="dark"] #app .alog-ic.t-vio{--lc:262 78% 70%} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #app .alog-ic.t-vio{--lc:262 78% 70%} } #app .alog-bd{flex:1;min-width:0} #app .alog-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;font-size:13px; line-height:1.5} #app .alog-by{font-weight:700;color:hsl(var(--foreground))} #app .alog-act{--lc:var(--muted-foreground);flex:0 0 auto;font-size:11px;font-weight:700; padding:1px 8px;border-radius:999px;color:hsl(var(--lc));background:hsl(var(--lc)/.11); box-shadow:inset 0 0 0 1px hsl(var(--lc)/.22)} #app .alog-act.t-ok{--lc:var(--success)} #app .alog-act.t-pri{--lc:var(--primary)} #app .alog-act.t-warn{--lc:var(--warning)} #app .alog-act.t-crit{--lc:var(--destructive)} #app .alog-act.t-vio{--lc:262 66% 52%} :root[data-theme="dark"] #app .alog-act.t-vio{--lc:262 78% 70%} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #app .alog-act.t-vio{--lc:262 78% 70%} } #app .alog-target{font-family:var(--mono);font-size:12.5px;font-weight:650; color:hsl(var(--foreground))} #app .alog-detail{min-width:0;font-size:12px;color:hsl(var(--muted-foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px} #app .alog-time{flex:0 0 auto;font-family:var(--mono);font-size:11.5px; color:hsl(var(--muted-foreground)/.85);font-variant-numeric:tabular-nums} /* 人员四级角色徽章：主管=紫 / 组长=琥珀（超管沿用 pri 蓝、客服中性） */ .ac-tag.sup{color:hsl(262 66% 52%);background:hsl(262 66% 52%/.1);border-color:hsl(262 66% 52%/.28)} .ac-tag.lead{color:hsl(var(--warning));background:hsl(var(--warning)/.12);border-color:hsl(var(--warning)/.3)} .ac-tag.ok{color:hsl(var(--success));background:hsl(var(--success)/.12);border-color:hsl(var(--success)/.26)} .ac-tag.warn{color:hsl(var(--warning));background:hsl(var(--warning)/.13);border-color:hsl(var(--warning)/.28)} .ac-tag.crit{color:hsl(var(--destructive));background:hsl(var(--destructive)/.12);border-color:hsl(var(--destructive)/.28)} .ac-tag .d{width:6px;height:6px;border-radius:50%;background:currentColor} .ac-st{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .ac-muted{color:hsl(var(--muted-foreground)/.7)} /* 密码 */ .ac-pw{display:flex;align-items:center;gap:3px} .ac-pw .v{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em;min-width:96px;user-select:all} .ac-pw .v.hid{letter-spacing:.18em;color:hsl(var(--muted-foreground)/.75);font-size:11px} .ac-pw .v.none{font-family:var(--sans);font-size:12px;font-style:italic;color:hsl(var(--muted-foreground)/.8);min-width:96px} .ac-ico{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;cursor:pointer; border:1px solid transparent;border-radius:8px;background:transparent; color:hsl(var(--muted-foreground));opacity:.45; transition:opacity var(--ac-ease),background var(--ac-ease),color var(--ac-ease),border-color var(--ac-ease)} .ac-ico svg{width:15px;height:15px;stroke-width:1.7} .ac-tbl tbody tr:hover .ac-ico{opacity:.85} .ac-ico:hover{opacity:1;color:hsl(var(--foreground));background:hsl(var(--accent)/.8);border-color:var(--ac-line)} .ac-ico:focus-visible{outline:none;opacity:1;box-shadow:0 0 0 3px hsl(var(--ring)/.2)} /* 操作 */ .ac-ops{text-align:right;white-space:nowrap} .ac-ops .mini{display:inline-flex;align-items:center;height:29px;padding:0 11px;margin-left:6px;cursor:pointer; font:inherit;font-size:12px;font-weight:600;vertical-align:middle; color:hsl(var(--muted-foreground));background:transparent; border:1px solid hsl(var(--border)/.7);border-radius:8px;opacity:.75; transition:opacity var(--ac-ease),background var(--ac-ease),color var(--ac-ease),border-color var(--ac-ease)} .ac-tbl tbody tr:hover .ac-ops .mini{opacity:1} .ac-ops .mini:hover{color:hsl(var(--foreground));background:hsl(var(--accent)/.8);border-color:var(--ac-line)} .ac-ops .ac-ico{display:inline-grid;vertical-align:middle;margin-left:4px} /* ⋯ 菜单：挂 body、fixed，绕开 .tbl-wrap 的 overflow 裁切 */ .popmenu{position:fixed;z-index:60;min-width:164px;padding:6px; background:hsl(var(--card));border:1px solid var(--ac-line);border-radius:12px; box-shadow:0 10px 24px hsl(222 47% 11%/.14),0 24px 60px hsl(222 47% 11%/.16),var(--ac-sheen); animation:popin 140ms cubic-bezier(.4,0,.2,1)} @keyframes popin{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}} .popmenu button{display:block;width:100%;text-align:left;padding:9px 11px;cursor:pointer; border:none;border-radius:8px;background:transparent; color:hsl(var(--foreground));font:inherit;font-size:13px;transition:background var(--ac-ease)} .popmenu button:hover{background:hsl(var(--accent)/.85)} .popmenu button.danger{color:hsl(var(--destructive))} .popmenu button.danger:hover{background:hsl(var(--destructive)/.12)} .popmenu .sep{height:1px;margin:5px 4px;background:hsl(var(--border)/.75)} /* 审计时间线 */ .ac-tl{position:relative;list-style:none;margin:0;padding:4px 20px 18px 20px; max-height:300px;overflow:auto} .ac-tl::before{content:"";position:absolute;left:calc(20px + 4.5px);top:12px;bottom:22px;width:1px; background:linear-gradient(hsl(var(--border)),hsl(var(--border)/0))} .ac-tl li{position:relative;display:flex;gap:12px;align-items:baseline;padding:7px 0 7px 22px;font-size:12.5px} .ac-tl li::before{content:"";position:absolute;left:1px;top:13px;width:9px;height:9px;border-radius:50%; background:hsl(var(--card));border:2px solid hsl(var(--muted-foreground)/.4)} .ac-tl li.hot::before{border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.13)} .ac-tl .t{flex:0 0 auto;font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums; color:hsl(var(--muted-foreground)/.85)} .ac-tl .c{color:hsl(var(--muted-foreground));line-height:1.6} .ac-tl .c b{color:hsl(var(--foreground));font-weight:640} .ac-tl .c em{font-style:normal;color:hsl(var(--foreground)/.8);font-family:var(--mono);font-size:12px} .ac-tl .none{padding:22px 0;text-align:center;color:hsl(var(--muted-foreground))} /* 空态 / 骨架屏 */ .ac-empty{padding:56px 20px;text-align:center} .ac-empty .ic{width:46px;height:46px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center; color:hsl(var(--muted-foreground)/.8);background:hsl(var(--muted)/.7);border:1px solid var(--ac-line)} .ac-empty .ic svg{width:22px;height:22px;stroke-width:1.6} .ac-empty b{display:block;font-size:14px;font-weight:650} .ac-empty p{margin:5px 0 0;font-size:12.5px;color:hsl(var(--muted-foreground))} .sk{display:block;border-radius:7px; background:linear-gradient(90deg,hsl(var(--muted)/.7) 25%,hsl(var(--muted)/.35) 37%,hsl(var(--muted)/.7) 63%); background-size:400% 100%;animation:skshine 1.4s ease-in-out infinite} @keyframes skshine{0%{background-position:100% 50%}100%{background-position:0 50%}} .sk.av{width:38px;height:38px;border-radius:50%} .sk.l1{height:11px;width:82px}.sk.l2{height:9px;width:54px;margin-top:6px} .sk.pill{height:21px;width:60px;border-radius:999px} .sk.txt{height:11px;width:84px} /* 窄屏：先砍次要列。⚠️ 断点要减去侧栏宽度(--nav-w 244px)再判断， 否则在 1200 上下会出现"表格挤爆但媒体查询没触发"。 */ @media (max-width:1240px){#view-accounts .c-last{display:none}} @media (max-width:1080px){#view-accounts .c-team{display:none}} @media (max-width:900px){.ac-head{flex-direction:column}.ac-head-act{margin-left:0} .ac-tb{flex-wrap:wrap}.ac-search{width:100%}} /* ============================================================================ 全站视觉统一层（2026-08-23） 起因：AI人设 / 坐席台 / 通话记录 还是"白底 + 按钮"，而客服管理页已经有一套 完整的视觉语言。与其逐页糊样式，不如把那套**提升为共用**，各页只补特有部件。 —— 本项目在 session 结构、VAD、提示词、音色清单上已经栽过四次"抄多份"。 分寸：克制。不加新色相、不加装饰性图形；质感只来自 「多层柔阴影 + 顶部内高光 + 低透明度描边 + 160ms 过渡」。 ⚠️ 选择器统一用 #app 前缀压过基础样式，不要改成裸类名，否则会被上面的规则覆盖。 ============================================================================ */ .view{ --ac-r:14px; --ac-r-sm:10px; --ac-line:hsl(var(--border)/.8); --ac-shadow:0 1px 2px hsl(222 47% 11%/.045), 0 4px 12px hsl(222 47% 11%/.05), 0 18px 40px hsl(222 47% 11%/.045); --ac-sheen:inset 0 1px 0 hsl(0 0% 100%/.75); --ac-ease:160ms cubic-bezier(.4,0,.2,1); } :root[data-theme="dark"] .view{ --ac-shadow:0 1px 2px hsl(0 0% 0%/.5), 0 6px 18px hsl(0 0% 0%/.45), 0 24px 50px hsl(0 0% 0%/.4); --ac-sheen:inset 0 1px 0 hsl(0 0% 100%/.05); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .view{ --ac-shadow:0 1px 2px hsl(0 0% 0%/.5), 0 6px 18px hsl(0 0% 0%/.45), 0 24px 50px hsl(0 0% 0%/.4); --ac-sheen:inset 0 1px 0 hsl(0 0% 100%/.05); }} /* ---------- 页头 ---------- */ #app .view-head{margin-bottom:22px} #app .view-head h1{font-size:27px;font-weight:750;letter-spacing:-.028em;line-height:1.2} #app .view-head p{margin:8px 0 0;font-size:13.5px;line-height:1.6;max-width:64ch} /* ---------- 卡片 = 有质感的面板 ---------- */ #app .card{border-radius:var(--ac-r);border-color:var(--ac-line); box-shadow:var(--ac-shadow),var(--ac-sheen);overflow:hidden; transition:box-shadow var(--ac-ease),border-color var(--ac-ease)} #app .card-head{padding:15px 20px;border-bottom-color:hsl(var(--border)/.55); background:hsl(var(--muted)/.22)} #app .card-head h3{font-size:14.5px;font-weight:680;letter-spacing:-.01em} #app .card-head .sub{font-size:12px} /* ---------- 按钮 ---------- */ #app .btn{border-radius:var(--ac-r-sm);border-color:var(--ac-line);font-weight:600;letter-spacing:.01em; box-shadow:0 1px 2px hsl(222 47% 11%/.05),var(--ac-sheen); transition:background var(--ac-ease),border-color var(--ac-ease),transform var(--ac-ease),box-shadow var(--ac-ease)} #app .btn:hover{background:hsl(var(--accent)/.7);transform:translateY(-1px); box-shadow:0 3px 8px hsl(222 47% 11%/.09),var(--ac-sheen)} #app .btn:active{transform:translateY(0)} #app .btn.primary{border-color:transparent; background:linear-gradient(180deg,hsl(var(--primary)/.94),hsl(var(--primary))); box-shadow:0 1px 2px hsl(var(--primary)/.35),0 6px 16px hsl(var(--primary)/.26),inset 0 1px 0 hsl(0 0% 100%/.22)} #app .btn.primary:hover{background:linear-gradient(180deg,hsl(var(--primary)),hsl(var(--primary)/.92)); box-shadow:0 3px 10px hsl(var(--primary)/.4),0 10px 24px hsl(var(--primary)/.3),inset 0 1px 0 hsl(0 0% 100%/.22)} #app .btn.ghost{box-shadow:none;border-color:transparent} #app .btn.ghost:hover{box-shadow:none;background:hsl(var(--accent)/.8)} #app .btn.danger{box-shadow:none} #app .btn.danger:hover{box-shadow:0 3px 10px hsl(var(--destructive)/.2)} /* ---------- 表格 ---------- */ #app th{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.075em; text-transform:none;color:hsl(var(--muted-foreground)/.9); background:hsl(var(--muted)/.35);border-bottom-color:hsl(var(--border)/.6);padding:11px 16px} #app td{padding:13px 16px;border-bottom-color:hsl(var(--border)/.45)} #app tbody tr{transition:background var(--ac-ease)} #app tbody tr:hover{background:hsl(var(--primary)/.03)} #app tbody tr:last-child td{border-bottom:none} /* ---------- 徽章 ---------- */ #app .pill{height:23px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600; border-color:hsl(var(--border)/.75);background:hsl(var(--muted)/.85)} /* ---------- 表单控件 ---------- */ #app input[type=text],#app input:not([type]),#app input[type=password],#app input[type=number], #app input[type=tel],#app select,#app textarea{ border-radius:var(--ac-r-sm);border-color:var(--ac-line); box-shadow:inset 0 1px 2px hsl(222 47% 11%/.035); transition:border-color var(--ac-ease),box-shadow var(--ac-ease)} #app input:focus,#app select:focus,#app textarea:focus{ border-color:hsl(var(--ring)/.65);box-shadow:0 0 0 3.5px hsl(var(--ring)/.15)} /* 开关（人设卡 / 设置项共用） */ #app .sw{background:hsl(var(--muted-foreground)/.28);transition:background var(--ac-ease)} #app .sw::after{box-shadow:0 1px 3px hsl(222 47% 11%/.3)} #app .sw.on{background:hsl(var(--success))} #app .toggle input:checked + .sw{background:hsl(var(--primary))} /* ---------- 分段控件 ---------- */ #app .seg{border-radius:999px;border-color:var(--ac-line);padding:3px;gap:2px;background:hsl(var(--muted)/.6); box-shadow:inset 0 1px 2px hsl(222 47% 11%/.04)} #app .seg button{border:none;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600; background:transparent;transition:background var(--ac-ease),color var(--ac-ease),box-shadow var(--ac-ease)} #app .seg button:hover{color:hsl(var(--foreground))} #app .seg button.on{background:hsl(var(--card));color:hsl(var(--foreground)); box-shadow:0 1px 2px hsl(222 47% 11%/.1),var(--ac-sheen)} #app .seg.sm button{padding:5px 11px;font-size:12px} /* ---------- 二级标签页 ---------- */ #app .subtabs{border-radius:999px;padding:4px;background:hsl(var(--muted)/.7); box-shadow:inset 0 1px 2px hsl(222 47% 11%/.05)} #app .subtabs button{border-radius:999px;padding:8px 18px} #app .subtabs button.on{background:hsl(var(--card));box-shadow:0 1px 3px hsl(222 47% 11%/.12),var(--ac-sheen)} /* ---------- 概览的数字卡 ---------- */ #app .stat{border-radius:var(--ac-r);border-color:var(--ac-line); box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen); transition:transform var(--ac-ease),box-shadow var(--ac-ease)} #app .stat:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow),var(--ac-sheen)} #app .stat .k{font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;text-transform:none;font-weight:500} #app .stat .v{font-size:26px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums} /* ---------- 日志流 / 空态 / 提示 ---------- */ #app .feed .ln{padding:6px 20px;border-top-color:hsl(var(--border)/.4)} #app .empty{padding:38px 20px;font-size:13px} #app .hint{border-radius:var(--ac-r-sm);background:hsl(var(--muted)/.5);line-height:1.65} /* ---------- 弹窗 ---------- */ .mask{backdrop-filter:blur(2px)} .modal{border-radius:16px;border-color:var(--ac-line);padding:24px; box-shadow:0 16px 40px hsl(220 40% 3%/.28),0 40px 90px hsl(220 40% 3%/.34); animation:modalin 180ms cubic-bezier(.4,0,.2,1)} @keyframes modalin{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}} .modal h2{font-size:17px;font-weight:700;letter-spacing:-.015em} .pwbox{border:1px solid hsl(var(--warning)/.35);background:hsl(var(--warning)/.08);border-radius:12px} /* ============================================================================ AI 人设 ============================================================================ */ #app .pn-tb input,#app .pn-tb select,#app .seat-tb input,#app .seat-tb select, #app .talk-tb input,#app .talk-tb select{height:36px;border-radius:999px;padding:0 14px} #app .pn-tb select,#app .seat-tb select,#app .talk-tb select{padding-right:34px} #app .pn{border-radius:var(--ac-r);border-color:var(--ac-line);padding:17px 18px; box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen); transition:transform var(--ac-ease),box-shadow var(--ac-ease),border-color var(--ac-ease)} #app .pn:hover{transform:translateY(-2px);border-color:hsl(var(--primary)/.4); box-shadow:var(--ac-shadow),var(--ac-sheen)} #app .pn .nm{font-size:16px;font-weight:700;letter-spacing:-.015em} #app .pn .note{font-size:12.5px;line-height:1.6;margin-top:4px} #app .pn .tag{height:23px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:600; border-color:hsl(var(--border)/.75);background:hsl(var(--muted)/.7)} #app .pn .tag.zh{background:hsl(217 91% 60%/.11);border-color:hsl(217 91% 60%/.28)} #app .pn .tag.en{background:hsl(258 90% 66%/.11);border-color:hsl(258 90% 66%/.28)} #app .pn .dbadge{border-radius:999px;padding:2px 9px;font-size:10.5px;letter-spacing:.02em; box-shadow:0 1px 3px hsl(var(--primary)/.32)} #app .pn .dbadge.in{box-shadow:0 1px 3px hsl(142 68% 40%/.32)} #app .pn .foot{border-top-color:hsl(var(--border)/.55);padding-top:13px;margin-top:15px} /* 预览块：虚线框显廉价，换成柔色块 */ #app .pn-preview{border:1px solid var(--ac-line);background:hsl(var(--muted)/.45); border-radius:12px;padding:14px 15px} #app .pn-mini{border-radius:10px;border-color:var(--ac-line); box-shadow:0 1px 2px hsl(222 47% 11%/.05),var(--ac-sheen)} #app .advbox{border-top:1px solid hsl(var(--border)/.55)} #app .advbox > summary{padding:13px 20px;font-weight:600;transition:background var(--ac-ease)} #app .advbox > summary:hover{background:hsl(var(--muted)/.4)} #app .stepn{border-radius:7px;box-shadow:0 1px 3px hsl(var(--primary)/.35)} #app .pn-sticky{padding:16px 0 8px} /* ============================================================================ 坐席台 ============================================================================ */ /* KPI 从裸文字升级成卡片行（纯 CSS，不动 markup） */ #app .seat-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px;margin-bottom:14px} #app .seat-kpis .k{display:flex;flex-direction:column;gap:3px;padding:14px 16px; background:hsl(var(--card));border:1px solid var(--ac-line);border-radius:var(--ac-r); box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen)} #app .seat-kpis .k b{font-size:25px;font-weight:750;letter-spacing:-.03em;line-height:1.15; font-variant-numeric:tabular-nums} #app .seat-kpis .k span{margin-left:0;font-size:12px;color:hsl(var(--muted-foreground))} #app .seat-kpis .k.bad{border-color:hsl(var(--destructive)/.35);background:hsl(var(--destructive)/.045)} #app .seat-bar{height:10px;border-radius:999px;margin:2px 0 10px; box-shadow:inset 0 1px 2px hsl(222 47% 11%/.07)} #app .seat-legend{gap:8px;margin-bottom:18px} #app .seat-legend span{height:28px;padding:0 11px;border-radius:999px;gap:7px; border:1px solid transparent;transition:background var(--ac-ease),border-color var(--ac-ease)} #app .seat-legend span:hover{background:hsl(var(--muted)/.6)} #app .seat-legend span.on{background:hsl(var(--primary)/.08);border-color:hsl(var(--primary)/.32); color:hsl(var(--foreground))} #app .seat-legend span.on b{text-decoration:none} #app .seat-legend i{width:8px;height:8px;border-radius:50%} #app .seat-alert{border-radius:var(--ac-r);padding:13px 16px; background:linear-gradient(90deg,hsl(var(--destructive)/.1),hsl(var(--destructive)/.04)); border-color:hsl(var(--destructive)/.3);box-shadow:inset 3px 0 0 hsl(var(--destructive)/.7)} /* 坐席卡：左侧色条改成柔和的内阴影条，加悬停抬升 */ #app .sc{border-radius:12px;border-color:var(--ac-line);border-left-width:1px;padding:11px 13px; box-shadow:inset 3px 0 0 hsl(var(--muted-foreground)/.35),0 1px 2px hsl(222 47% 11%/.04); transition:transform var(--ac-ease),box-shadow var(--ac-ease),border-color var(--ac-ease)} #app .sc:hover{transform:translateY(-2px);border-color:hsl(var(--primary)/.4); box-shadow:inset 3px 0 0 hsl(var(--primary)/.5),var(--ac-shadow)} #app .sc.live,#app .sc.dialing{box-shadow:inset 3px 0 0 hsl(var(--primary)),0 1px 2px hsl(222 47% 11%/.05)} #app .sc.ringing{box-shadow:inset 3px 0 0 #f5b942,0 0 0 3px hsl(38 92% 55%/.14)} #app .sc.lineerr{box-shadow:inset 3px 0 0 hsl(var(--destructive)),0 1px 2px hsl(222 47% 11%/.05)} #app .sc.idle{box-shadow:inset 3px 0 0 hsl(var(--success)),0 1px 2px hsl(222 47% 11%/.04)} #app .seat{border-radius:12px;border-left-width:3px; box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen)} #app .seat.clickable:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow),var(--ac-sheen)} #app .tagid{border-radius:999px;padding:1px 7px;border-color:hsl(var(--border)/.8)} /* ============================================================================ 通话记录 ============================================================================ */ #app .talk-body{border-top-color:hsl(var(--border)/.55)} #app .talk-list{border-right-color:hsl(var(--border)/.55);background:hsl(var(--muted)/.12)} #app .tl-grp{padding:10px 14px 6px;font-family:var(--sans);font-size:11px;font-weight:600; letter-spacing:.06em;background:linear-gradient(hsl(var(--card)) 70%,hsl(var(--card)/0))} #app .tl-i{padding:11px 14px;border-bottom-color:hsl(var(--border)/.45);border-left:none; box-shadow:inset 3px 0 0 transparent;transition:background var(--ac-ease),box-shadow var(--ac-ease)} #app .tl-i:hover{background:hsl(var(--primary)/.045)} #app .tl-i.on{background:hsl(var(--card));box-shadow:inset 3px 0 0 hsl(var(--primary))} #app .tl-num{font-size:13px;font-weight:650;letter-spacing:-.01em} #app .tl-hit{border-radius:8px;background:hsl(var(--warning)/.08);padding:5px 8px} #app .dirtag{height:20px;padding:0 8px;display:inline-flex;align-items:center;border-radius:999px; font-size:10.5px;font-weight:700;letter-spacing:.02em;border-color:hsl(var(--border)/.8)} #app .dirtag.in{background:hsl(142 68% 40%/.11);border-color:hsl(142 68% 40%/.28)} #app .dirtag.out{background:hsl(var(--primary)/.1);border-color:hsl(var(--primary)/.26)} #app .dirtag.miss{background:hsl(var(--destructive)/.1);border-color:hsl(var(--destructive)/.26)} #app .dirtag.live{background:hsl(38 92% 50%/.12);border-color:hsl(38 92% 50%/.3)} /* 对话气泡的精修样式已随弹层移出 #app，收编进上面的 #talkChatMask 块（2026-08-29） */ mark{background:hsl(38 92% 55%/.32);color:inherit;border-radius:4px;padding:0 3px;font-weight:600} #app .agentpop{border-radius:12px;border-color:var(--ac-line);padding:5px; box-shadow:0 10px 24px hsl(222 47% 11%/.14),0 24px 60px hsl(222 47% 11%/.16),var(--ac-sheen)} #app .agentpop .ai{border-radius:8px;padding:8px 11px} #app .agentpick.picked input{background:hsl(var(--primary)/.07);border-color:hsl(var(--primary)/.5)} /* ============================================================================ 配色层（2026-08-23） 起因：user「还是纯白色背景」。纯白显廉价的根因是**卡片和背景同色**，没有层次 —— 不是缺装饰，是缺对比。所以： 画布 = 冷调浅灰蓝 + 三团极淡环境光；卡片 = 纯白，浮在画布上；侧栏 = 深石墨。 输入框用画布色（凹陷）、卡片用纯白（浮起），一凹一凸把层次做出来。 分寸：环境光全部在 5%~10% 透明度，只在大面积铺底；强色只出现在按钮、徽章、状态点。 ⚠️ --background 必须在**三个上下文**里各改一次（:root / [data-theme=dark] / prefers-color-scheme:dark），漏一个就会出现"切到深色还是浅色底"。 ============================================================================ */ :root{ --background:221 34% 93%; /* 画布：明确的冷调蓝灰。 ⚠️ 别再往 96% 以上调 —— 97% 在屏幕上和纯白分辨不出来，等于没上色（2026-08-23 返工过一次）。 */ --tone-violet:262 83% 62%; --tone-teal:172 66% 41%; --tone-amber:32 95% 52%; --glow-1:hsl(var(--primary)/.22); --glow-2:hsl(var(--tone-violet)/.18); --glow-3:hsl(var(--tone-teal)/.13); --canvas-top:hsl(224 36% 90%); /* 画布顶部略深，往下提亮，避免一整块死板的平色 */ --canvas-bot:hsl(219 34% 95%); } :root[data-theme="dark"]{ --background:226 44% 4.5%; --glow-1:hsl(var(--primary)/.22); --glow-2:hsl(var(--tone-violet)/.17); --glow-3:hsl(var(--tone-teal)/.11); --canvas-top:hsl(226 44% 6.5%); --canvas-bot:hsl(226 44% 3.5%); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --background:226 44% 4.5%; --glow-1:hsl(var(--primary)/.22); --glow-2:hsl(var(--tone-violet)/.17); --glow-3:hsl(var(--tone-teal)/.11); --canvas-top:hsl(226 44% 6.5%); --canvas-bot:hsl(226 44% 3.5%); }} /* 环境光：三团大范围柔光铺在内容区底下。attachment:fixed 让它不跟着滚动， 页面再长也是同一片天光，而不是滚出去一片死白。 */ #app .main{ background: radial-gradient(1000px 560px at 12% -10%, var(--glow-1), transparent 60%), radial-gradient(820px 500px at 98% -4%, var(--glow-2), transparent 58%), radial-gradient(760px 520px at 58% 112%, var(--glow-3), transparent 62%), linear-gradient(180deg, var(--canvas-top), var(--canvas-bot) 55%), hsl(var(--background)); background-attachment:fixed,fixed,fixed,fixed,fixed} body{background:linear-gradient(180deg, var(--canvas-top), var(--canvas-bot) 55%) fixed, hsl(var(--background))} /* 侧栏：加一层竖向渐变和顶部品牌辉光，别是一块死黑 */ .brand{background:linear-gradient(180deg,hsl(222 30% 13.5%),hsl(222 32% 10.5%))} .nav{background: radial-gradient(320px 200px at 50% -6%, hsl(var(--primary)/.16), transparent 68%), linear-gradient(180deg,hsl(222 32% 11%),hsl(224 34% 8.5%))} #app .nav a.active{background:linear-gradient(90deg,hsl(var(--primary)/.30),hsl(var(--primary)/.14))} #app .nav a.active::before{box-shadow:0 0 12px hsl(var(--primary)/.85)} .brand .logo{background:linear-gradient(150deg,hsl(var(--primary)),hsl(var(--tone-violet))); box-shadow:0 2px 8px hsl(var(--primary)/.45),inset 0 1px 0 hsl(0 0% 100%/.28)} /* 顶栏：半透明浮在画布上 */ #app .topbar{background:hsl(var(--card)/.72);backdrop-filter:blur(14px) saturate(1.4); border-bottom-color:hsl(var(--border)/.7)} #app .role-badge{background:linear-gradient(180deg,hsl(var(--primary)/.16),hsl(var(--primary)/.1)); border:1px solid hsl(var(--primary)/.26);font-family:var(--sans);font-size:11.5px;padding:4px 11px} /* 卡片浮起、输入框凹陷 —— 一凸一凹，层次就出来了 */ #app .card,#app .ac-panel{background:hsl(var(--card))} #app input[type=text],#app input:not([type]),#app input[type=password],#app input[type=number], #app input[type=tel],#app select,#app textarea{background:hsl(var(--background))} #app .ac-search input{background:hsl(var(--background))} /* ============================================================================ 按钮：六种角色，长得不一样才叫"有主次" primary 主行动 实心渐变 + 彩色投影 tonal 次强调 主色淡底 + 主色字（NEW） 默认 次要 白面 + 描边 + 微阴影 soft 低频 灰底无边（NEW） ghost 最弱 纯文字 danger 破坏性 红调淡底 ============================================================================ */ #app .btn.tonal{background:linear-gradient(180deg,hsl(var(--primary)/.14),hsl(var(--primary)/.09)); color:hsl(var(--primary));border-color:hsl(var(--primary)/.28);box-shadow:none} #app .btn.tonal:hover{background:hsl(var(--primary)/.18);border-color:hsl(var(--primary)/.42); box-shadow:0 3px 10px hsl(var(--primary)/.18)} #app .btn.soft{background:hsl(var(--muted)/.9);border-color:transparent; color:hsl(var(--muted-foreground));box-shadow:none} #app .btn.soft:hover{background:hsl(var(--muted));color:hsl(var(--foreground));box-shadow:none;transform:none} /* 带图标按钮 + 刷新动效：转圈 → 完成后闪一下绿光，让点击后一眼看到"确实动了" */ #app .btn.has-ico{display:inline-flex;align-items:center;gap:6px} #app .btn.has-ico svg{width:15px;height:15px;flex:0 0 auto} #app .btn.spinning{cursor:progress;opacity:.85} #app .btn.spinning svg{animation:btn-spin .7s linear infinite} #app .btn.just-refreshed{background:hsl(var(--success)/.16);color:hsl(var(--success)); border-color:hsl(var(--success)/.35); animation:btn-flash .9s ease} @keyframes btn-spin{to{transform:rotate(360deg)}} @keyframes btn-flash{ 0%{background:hsl(var(--success)/.32);box-shadow:0 0 0 0 hsl(var(--success)/.5)} 60%{box-shadow:0 0 0 8px hsl(var(--success)/0)} 100%{background:hsl(var(--success)/.16);box-shadow:0 0 0 8px hsl(var(--success)/0)} } #app .btn.tealtone{background:linear-gradient(180deg,hsl(var(--tone-teal)/.15),hsl(var(--tone-teal)/.09)); color:hsl(var(--tone-teal));border-color:hsl(var(--tone-teal)/.3);box-shadow:none} #app .btn.tealtone:hover{background:hsl(var(--tone-teal)/.2);box-shadow:0 3px 10px hsl(var(--tone-teal)/.2)} #app .icon-btn{border-radius:10px} #app .icon-btn:hover{background:hsl(var(--accent)/.85);border-color:hsl(var(--border)/.7)} /* 统计卡图标按语义分色，四张卡不再是一片灰 */ #app .ac-stat.tone-all .ic{color:hsl(var(--muted-foreground));background:hsl(var(--muted))} #app .ac-stat.tone-admin .ic{color:hsl(var(--tone-violet));background:hsl(var(--tone-violet)/.13)} #app .ac-stat.tone-sup .ic{color:hsl(var(--primary));background:hsl(var(--primary)/.13)} #app .ac-stat.tone-lead .ic{color:hsl(var(--warning));background:hsl(var(--warning)/.14)} #app .ac-stat.tone-agent .ic{color:hsl(var(--tone-teal));background:hsl(var(--tone-teal)/.13)} #app .ac-stat.tone-live .ic{color:hsl(var(--success));background:hsl(var(--success)/.14)} #app .ac-stat.on .ic{color:hsl(var(--primary));background:hsl(var(--primary)/.16)} /* 坐席台 KPI 卡也上色（第一张=总数保持中性，其余按语义） */ #app .seat-kpis .k:nth-child(2) b{color:hsl(var(--primary))} #app .seat-kpis .k:nth-child(3) b{color:hsl(var(--success))} #app .seat-kpis .k.bad b{color:hsl(var(--destructive))} /* 卡片顶部一道极淡的主色高光线，只在悬停时透出 —— 克制的"活起来" */ #app .pn,#app .sc,#app .ac-stat,#app .stat{position:relative;overflow:hidden} #app .pn::after,#app .sc::after,#app .ac-stat::after,#app .stat::after{ content:"";position:absolute;left:0;right:0;top:0;height:1px;opacity:0; background:linear-gradient(90deg,transparent,hsl(var(--primary)/.7),transparent); transition:opacity var(--ac-ease)} #app .pn:hover::after,#app .sc:hover::after,#app .ac-stat:hover::after,#app .stat:hover::after{opacity:1} /* ============================================================================ 人设卡 —— 「AI 角色名片」（2026-08-23，第二轮精修） 第一轮解决了信息结构（角色徽标 / 2×2 规格区 / 三档操作），但卡面仍然是"白盒子"。 这一轮补的是**质感**： ① 每张卡带自己的身份色 —— 顶部一道渐变细线 + 一层 6% 的色晕，从供应商色来。 色只出现在卡的上沿，正文区仍是纯白，所以有色而不花。 ② 徽标做实：外圈柔光环 + 内高光 + 悬停时辉光加强。 ③ 右下角**声波徽记** —— 这是语音 AI，卡上总得有一处说明"它会说话"。 三根条高度不同，停用时静止变灰。 ④ 规格区从"通栏灰格子"改成**内嵌软面板**（圆角 + 凹陷底），与卡面拉开层次。 ⑤ 底栏去掉灰带，只留一根发丝线，重心交还给内容。 🔴 --pv 是**供应商色相**（172 青绿=OpenAI / 262 紫=Grok / 32 琥珀=Qwen）， 整张卡的所有配色都从它派生。这是有信息量的颜色，不是装饰，别改成随机色。 ============================================================================ */ #app .pn-grid{grid-template-columns:repeat(auto-fill,minmax(318px,1fr));gap:14px} #app .pn{--pv:172;position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden; border-radius:16px;border-color:hsl(var(--border)/.75); box-shadow:0 1px 2px hsl(222 47% 11%/.04),0 6px 18px hsl(222 47% 11%/.045),var(--ac-sheen); transition:transform var(--ac-ease),box-shadow var(--ac-ease),border-color var(--ac-ease)} #app .pn[data-prov="openai"]{--pv:172} #app .pn[data-prov="grok"]{--pv:262} #app .pn[data-prov="qwen"]{--pv:32} #app .pn:hover{transform:translateY(-3px);border-color:hsl(var(--pv) 45% 72%); box-shadow:0 2px 4px hsl(222 47% 11%/.05),0 12px 28px hsl(var(--pv) 50% 45%/.16), 0 26px 56px hsl(222 47% 11%/.07),var(--ac-sheen)} #app .pn.off{opacity:.6} #app .pn.off .pn-av{filter:grayscale(1)} #app .pn.off .pn-wave s{animation:none;background:hsl(var(--muted-foreground)/.5)} #app .pn::after{display:none} /* 上一版的通用高光线，这里由 .pn-accent 接管 */ /* ① 身份色：顶沿一道渐变细线 + 头部一层极淡色晕 */ #app .pn-accent{position:absolute;left:0;right:0;top:0;height:3px;z-index:1; background:linear-gradient(90deg,transparent,hsl(var(--pv) 72% 52%/.85) 22%, hsl(var(--pv) 72% 62%/.9) 50%,hsl(var(--pv) 72% 52%/.85) 78%,transparent); opacity:.75;transition:opacity var(--ac-ease)} #app .pn:hover .pn-accent{opacity:1} #app .pn-hd{position:relative;display:flex;align-items:center;gap:12px;padding:15px 16px 3px; background:linear-gradient(180deg,hsl(var(--pv) 68% 55%/.075),transparent 78%)} /* ② 徽标 */ #app .pn-av{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:13px; display:grid;place-items:center;font-size:15.5px;font-weight:750;letter-spacing:.01em; color:hsl(var(--pv) 62% 30%); background:linear-gradient(150deg,hsl(var(--pv) 72% 95%),hsl(var(--pv) 62% 87%)); border:1px solid hsl(var(--pv) 48% 80%); box-shadow:inset 0 1px 0 hsl(0 0% 100%/.85), 0 0 0 4px hsl(var(--pv) 65% 55%/.07), 0 6px 16px hsl(var(--pv) 58% 45%/.2); transition:box-shadow var(--ac-ease)} #app .pn:hover .pn-av{box-shadow:inset 0 1px 0 hsl(0 0% 100%/.85), 0 0 0 5px hsl(var(--pv) 65% 55%/.13),0 8px 20px hsl(var(--pv) 58% 45%/.3)} :root[data-theme="dark"] #app .pn-av{color:hsl(var(--pv) 72% 78%); background:linear-gradient(150deg,hsl(var(--pv) 45% 25%),hsl(var(--pv) 42% 17%)); border-color:hsl(var(--pv) 40% 34%)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #app .pn-av{ color:hsl(var(--pv) 72% 78%); background:linear-gradient(150deg,hsl(var(--pv) 45% 25%),hsl(var(--pv) 42% 17%)); border-color:hsl(var(--pv) 40% 34%)}} /* ③ 声波徽记：这是语音 AI，卡上得有一处说明"它会说话" */ #app .pn-wave{position:absolute;right:-4px;bottom:-4px;display:flex;align-items:center;gap:1.5px; height:14px;padding:0 4px;border-radius:999px; background:hsl(var(--card));border:1px solid hsl(var(--pv) 45% 78%); box-shadow:0 1px 3px hsl(222 47% 11%/.14)} #app .pn-wave s{display:block;width:2px;border-radius:2px;background:hsl(var(--pv) 62% 44%); animation:pnwave 1.25s ease-in-out infinite} #app .pn-wave s:nth-child(1){height:4px;animation-delay:0s} #app .pn-wave s:nth-child(2){height:8px;animation-delay:.18s} #app .pn-wave s:nth-child(3){height:5px;animation-delay:.36s} @keyframes pnwave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}} :root[data-theme="dark"] #app .pn-wave{border-color:hsl(var(--pv) 40% 36%)} :root[data-theme="dark"] #app .pn-wave s{background:hsl(var(--pv) 66% 62%)} /* 名字与角标同一行，卡头从三行压到两行 */ #app .pn-id{min-width:0;flex:1} #app .pn-nmrow{display:flex;align-items:center;gap:7px;min-width:0} #app .pn-nm{font-size:15.5px;font-weight:720;letter-spacing:-.02em;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .pn-def{flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 9px; border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em; color:hsl(var(--primary));border:1px solid hsl(var(--primary)/.3); background:linear-gradient(180deg,hsl(var(--primary)/.13),hsl(var(--primary)/.07))} #app .pn-def.in{color:hsl(var(--success));border-color:hsl(var(--success)/.32); background:linear-gradient(180deg,hsl(var(--success)/.14),hsl(var(--success)/.07))} #app .pn-def.off{color:hsl(var(--muted-foreground));border-color:hsl(var(--border)); background:hsl(var(--muted))} /* 开关 */ #app .pn-sw{flex:0 0 auto;position:relative;width:36px;height:21px;border-radius:999px; background:hsl(var(--muted-foreground)/.24);border:none;cursor:pointer; box-shadow:inset 0 1px 2px hsl(222 47% 11%/.12);transition:background var(--ac-ease)} #app .pn-sw i{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff; box-shadow:0 1px 3px hsl(222 47% 11%/.32);transition:transform var(--ac-ease)} #app .pn-sw.on{background:linear-gradient(180deg,hsl(var(--primary)/.92),hsl(var(--primary))); box-shadow:inset 0 1px 0 hsl(0 0% 100%/.25),0 2px 6px hsl(var(--primary)/.35)} #app .pn-sw.on i{transform:translateX(15px)} /* ④ 规格区：内嵌软面板，和卡面拉开层次 */ #app .pn-spec{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:12px 16px 0; background:hsl(var(--muted)/.55);border:1px solid hsl(var(--border)/.55); border-radius:12px;overflow:hidden; box-shadow:inset 0 1px 2px hsl(222 47% 11%/.035)} #app .pn-spec .sp{padding:8px 11px 9px;min-width:0} #app .pn-spec .sp:nth-child(odd){border-right:1px solid hsl(var(--border)/.5)} #app .pn-spec .sp:nth-child(-n+2){border-bottom:1px solid hsl(var(--border)/.5)} #app .pn-spec dt{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600; letter-spacing:.05em;color:hsl(var(--muted-foreground)/.85)} #app .pn-spec dt svg{width:13px;height:13px;flex:0 0 auto;opacity:.9} #app .pn-spec dd{margin:3px 0 0;font-size:12.5px;font-weight:650;letter-spacing:-.008em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ⑤ 底栏：去掉灰带，只留发丝线 */ #app .pn-ft{display:flex;align-items:center;gap:6px;margin:12px 16px 0;padding:10px 0 13px; border-top:1px solid hsl(var(--border)/.5);background:none} #app .pn-meta{margin-right:auto;font-size:11.5px;color:hsl(var(--muted-foreground)/.8); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .pn-ft .btn.sm{height:29px;padding:0 11px;font-size:12px;flex:0 0 auto} #app .pn-ft .ac-ico{opacity:.55} #app .pn:hover .pn-ft .ac-ico{opacity:.95} /* ---------- 外呼 / 接听 两类人设：顶部切换 + 两种卡片样式 ---------- */ /* 顶部切换：比普通 seg 大一号，选中态按方向着色，一眼分清在管哪一类 */ #app .pn-dir{margin-bottom:14px;padding:4px;gap:3px;vertical-align:top} #app .pn-dir button{display:inline-flex;align-items:center;gap:7px;padding:8px 18px; font-size:13.5px;font-weight:650} #app .pn-dir button svg{width:16px;height:16px} #app .pn-dir button[data-d="out"].on{color:hsl(28 80% 42%);background:hsl(28 85% 96%); box-shadow:0 1px 2px hsl(28 60% 40%/.18),var(--ac-sheen)} #app .pn-dir button[data-d="in"].on{color:hsl(168 68% 30%);background:hsl(168 58% 95%); box-shadow:0 1px 2px hsl(168 55% 35%/.18),var(--ac-sheen)} :root[data-theme="dark"] #app .pn-dir button[data-d="out"].on{background:hsl(28 45% 20%);color:hsl(28 85% 70%)} :root[data-theme="dark"] #app .pn-dir button[data-d="in"].on{background:hsl(168 40% 18%);color:hsl(168 62% 66%)} /* 方向色：外呼=琥珀(28) / 接听=青(168)。顶条与卡的方向氛围都从它派生 */ #app .pn.dir-out{--dv:28} #app .pn.dir-in{--dv:168} #app .pn.dir-train{--dv:262} #app .pn.dir-train:hover{border-color:hsl(262 60% 62%)} #app .pn.dir-out:hover{border-color:hsl(28 72% 62%)} #app .pn.dir-in:hover{border-color:hsl(168 55% 50%)} /* 顶部方向条（取代原来的 pn-accent 细线）——外呼/接听各一色，最先入眼 */ #app .pn-band{display:flex;align-items:center;gap:8px;padding:8px 15px;font-size:12px;font-weight:650; color:hsl(var(--dv) 72% 32%); background:linear-gradient(180deg,hsl(var(--dv) 72% 50%/.17),hsl(var(--dv) 72% 50%/.07)); border-bottom:1px solid hsl(var(--dv) 55% 50%/.2)} #app .pn-band-l{display:inline-flex;align-items:center;gap:6px} #app .pn-band-l svg{width:15px;height:15px} #app .pn-band-def{margin-left:auto;font-weight:750;font-size:11.5px;color:hsl(var(--dv) 80% 36%)} #app .pn-band-shared{margin-left:auto;font-size:11px;font-weight:500;color:hsl(var(--muted-foreground))} :root[data-theme="dark"] #app .pn-band{color:hsl(var(--dv) 68% 72%); border-bottom-color:hsl(var(--dv) 45% 45%/.32)} :root[data-theme="dark"] #app .pn-band-def{color:hsl(var(--dv) 70% 70%)} /* 名字旁"共用"小角标（外呼接听都能用的人设） */ #app .pn-def.both{color:hsl(var(--muted-foreground));border-color:hsl(var(--border)); background:hsl(var(--muted));font-weight:600} /* 底栏里"已是本方向默认"的文字标（替代"设为默认"按钮） */ #app .pn-isdef{display:inline-flex;align-items:center;height:29px;padding:0 11px; font-size:12px;font-weight:700;color:hsl(var(--dv) 78% 36%)} :root[data-theme="dark"] #app .pn-isdef{color:hsl(var(--dv) 70% 68%)} /* ============================================================================ 工具条：搜索框 / 下拉筛选 / 统计文字，三者要一眼分得开（2026-08-23） 起因：上一版把三个页面的输入框和下拉都做成同一个"胶囊 + 灰边"， 两者除了有没有箭头之外没差别；右侧的统计文字还套着 .hint 的灰底框， 看起来像第三个可点控件 —— 其实它只是一行数字。 规则：**输入 = 白底 + 描边 + 放大镜**（可写，凸） **筛选 = 灰底填充 + 箭头**（可选，凹） **统计 = 纯文字**，不给任何容器 ⚠️ 图标走 data-URI 背景图，所以不用改任何 HTML；深浅色各一份（背景图里的 颜色不能用 currentColor，必须写死，所以要分两套）。 ============================================================================ */ #app .pn-tb input,#app .seat-tb input:not([type=checkbox]), #app .talk-tb input:not([type=checkbox]){ background-color:hsl(var(--card)); border-color:hsl(var(--border)); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365758b' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:left 13px center;background-size:15px; padding-left:37px; box-shadow:0 1px 2px hsl(222 47% 11%/.05),inset 0 1px 0 hsl(0 0% 100%/.6)} #app .pn-tb input{width:250px} #app .talk-tb .agentpick input{width:230px} #app .pn-tb input:focus,#app .seat-tb input:focus,#app .talk-tb input:focus{ border-color:hsl(var(--ring)/.65);box-shadow:0 0 0 3.5px hsl(var(--ring)/.15)} #app .pn-tb select,#app .seat-tb select,#app .talk-tb select{ background-color:hsl(var(--muted)); border-color:transparent; color:hsl(var(--foreground));font-weight:600; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center;background-size:15px; padding:0 33px 0 14px;appearance:none;-webkit-appearance:none; box-shadow:inset 0 1px 2px hsl(222 47% 11%/.05)} #app .pn-tb select:hover,#app .seat-tb select:hover,#app .talk-tb select:hover{ background-color:hsl(var(--accent)/.9)} #app .pn-tb select:focus,#app .seat-tb select:focus,#app .talk-tb select:focus{ border-color:hsl(var(--ring)/.6);box-shadow:0 0 0 3.5px hsl(var(--ring)/.15)} /* 统计文字不是控件，别给它容器 */ #app .pn-tb .hint,#app .seat-tb .hint,#app .talk-tb .hint{ background:none;border:none;padding:0;font-size:12.5px; color:hsl(var(--muted-foreground))} /* 「自动转写」那个开关是个 label.hint，里面有 checkbox —— 保留可点手感 */ #app .talk-tb label.hint{display:inline-flex;align-items:center;gap:7px;height:36px; padding:0 13px;border-radius:999px;cursor:pointer; background:hsl(var(--muted));transition:background var(--ac-ease)} #app .talk-tb label.hint:hover{background:hsl(var(--accent)/.9)} :root[data-theme="dark"] #app .pn-tb input, :root[data-theme="dark"] #app .seat-tb input:not([type=checkbox]), :root[data-theme="dark"] #app .talk-tb input:not([type=checkbox]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e9bb0' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4-4'/%3E%3C/svg%3E")} :root[data-theme="dark"] #app .pn-tb select, :root[data-theme="dark"] #app .seat-tb select, :root[data-theme="dark"] #app .talk-tb select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e9bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #app .pn-tb input, :root:not([data-theme="light"]) #app .seat-tb input:not([type=checkbox]), :root:not([data-theme="light"]) #app .talk-tb input:not([type=checkbox]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e9bb0' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m20.5 20.5-4-4'/%3E%3C/svg%3E")} :root:not([data-theme="light"]) #app .pn-tb select, :root:not([data-theme="light"]) #app .seat-tb select, :root:not([data-theme="light"]) #app .talk-tb select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e9bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} } /* ============================================================================ AI 接听 / AI 外呼（2026-08-23） 两页共用一套部件：线路卡、当前通话卡、拨号表单、字幕流。 ⚠️ 两页的"人设"语义不同，别合并：接听页改的是**接听默认**（影响真实来电）， 外呼页的下拉只影响**这一通**，不动任何默认。 ============================================================================ */ #app .call-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} @media (max-width:1020px){#app .call-grid{grid-template-columns:1fr}} #app .cp-body{padding:16px 18px 18px} /* 线路卡 */ #app .cl-top{display:flex;align-items:center;gap:10px;font-size:14px} #app .cl-top b{font-weight:650} #app .cl-top .btn{margin-left:auto} #app .cl-err{margin-top:11px;white-space:pre-wrap;line-height:1.6} #app .cl-meta{margin-top:10px;font-size:12px;color:hsl(var(--muted-foreground))} #app .cl-meta code{font-family:var(--mono);font-size:11.5px;padding:1px 6px;border-radius:5px; background:hsl(var(--muted))} /* 当前通话 */ #app .cn-idle{display:flex;align-items:center;gap:9px;padding:6px 0; font-size:13.5px;color:hsl(var(--muted-foreground))} #app .cn-live{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0} #app .cn-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #app .cn-num{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.01em} #app .cn-timer{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px; font-weight:650;color:hsl(var(--primary))} #app .cn-sub{width:100%;font-size:12.5px;color:hsl(var(--muted-foreground))} #app .cn-live .btn{margin-left:auto} #app .cn-live.other{opacity:.75} #app .cn-note{margin-top:10px} /* 谁来接 */ #app .cp-persona{display:flex;align-items:center;gap:12px} #app .cp-persona .ac-av{--av-h:210;width:42px;height:42px;border-radius:13px;font-size:16px; color:hsl(var(--primary));background:linear-gradient(150deg,hsl(var(--primary)/.16),hsl(var(--primary)/.07)); border-color:hsl(var(--primary)/.3)} #app .cp-pn{min-width:0} #app .cp-pn b{display:block;font-size:15px;font-weight:680;letter-spacing:-.012em} #app .cp-pn span{display:block;margin-top:2px;font-size:12.5px;color:hsl(var(--muted-foreground))} #app .cp-persona .ac-tag{margin-left:auto} #app .cp-swap{display:flex;align-items:center;gap:8px;margin-top:15px;padding-top:14px; border-top:1px solid hsl(var(--border)/.5);flex-wrap:wrap} #app .cp-swap select{flex:1;min-width:150px;height:34px} #app .cp-note{margin-top:10px} /* 拨号表单 */ #app .dl-f{margin-bottom:13px} #app .dl-f > label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600; color:hsl(var(--muted-foreground))} #app .dl-f input,#app .dl-f select{width:100%;height:40px;padding:0 14px;font-size:14px} #app #obNum{font-family:var(--mono);font-size:16px;letter-spacing:.02em} #app .dl-row{display:grid;grid-template-columns:1fr auto;gap:13px;align-items:end} #app .dl-row .dl-f{margin-bottom:13px} #app #obLang{height:40px;align-items:center} #app #obDial{min-width:120px} /* 字幕流 */ #app .call-feed{max-height:300px;padding:6px 0} #app .call-feed .ln{padding:7px 18px;border-top-color:hsl(var(--border)/.4);font-size:13px;line-height:1.6} #app .call-feed .ts{min-width:34px;font-family:var(--sans);font-size:11px;font-weight:700; color:hsl(var(--muted-foreground)/.9)} #app .call-feed .msg.ai{color:hsl(var(--primary))} /* ---------- AI 接听：来电全过程面板（振铃 → AI 接待 → 转人工 → 客服接管）---------- */ #app .in-idle{padding:2px 0} #app .in-idle-hd{display:flex;align-items:center;gap:10px;font-size:15px} #app .in-idle-hd b{font-weight:650} #app .in-idle-tip{margin:11px 0 16px;color:hsl(var(--muted-foreground));font-size:12.5px; line-height:1.65;max-width:62ch} #app .in-live{display:flex;flex-direction:column;gap:17px} /* 来电人 */ #app .in-caller{display:flex;align-items:center;gap:14px} #app .in-caller-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center; font-size:22px;flex:0 0 auto;background:hsl(var(--primary)/.1);border:1px solid hsl(var(--primary)/.2)} #app .in-caller-ic.ringing{background:hsl(var(--warning)/.12);border-color:hsl(var(--warning)/.3); animation:inRing 1s ease-in-out infinite;transform-origin:50% 20%} @keyframes inRing{0%,60%,100%{transform:rotate(0)}20%{transform:rotate(-13deg)}40%{transform:rotate(13deg)}} #app .in-caller-id{min-width:0} #app .in-num{display:block;font-size:23px;font-weight:750;letter-spacing:.02em; font-variant-numeric:tabular-nums;font-family:var(--mono);line-height:1.2} #app .in-caller-sub{display:block;margin-top:3px;font-size:12.5px;color:hsl(var(--muted-foreground))} #app .in-caller .btn{margin-left:auto;flex:0 0 auto} /* 阶段轨 */ #app .in-steps{display:flex;align-items:flex-start;padding:2px 4px 0} #app .ist{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto} #app .ist-dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px; background:hsl(var(--muted));border:1.5px solid hsl(var(--border));color:hsl(var(--muted-foreground)); transition:background var(--ac-ease),border-color var(--ac-ease),box-shadow var(--ac-ease)} #app .ist-lb{font-size:11.5px;color:hsl(var(--muted-foreground));white-space:nowrap} #app .ist-line{flex:1;min-width:18px;height:2px;margin:18px 7px 0;border-radius:2px; background:hsl(var(--border));transition:background var(--ac-ease)} #app .ist-line.done{background:hsl(var(--success)/.55)} #app .ist.done .ist-dot{background:hsl(var(--success)/.14);border-color:hsl(var(--success)/.5); color:hsl(var(--success))} #app .ist.done .ist-lb{color:hsl(var(--foreground))} #app .ist.on .ist-dot{background:hsl(var(--primary));border-color:hsl(var(--primary)); color:hsl(var(--primary-foreground));box-shadow:0 0 0 4px hsl(var(--primary)/.15)} #app .ist.on .ist-lb{color:hsl(var(--primary));font-weight:650} #app .ist.todo{opacity:.5} /* 当前处理人卡 */ #app .in-handler{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px; border:1px solid hsl(var(--border));background:hsl(var(--card))} #app .in-handler.ai{border-color:hsl(var(--primary)/.3);background:hsl(var(--primary)/.05)} #app .in-handler.agent{border-color:hsl(var(--success)/.35);background:hsl(var(--success)/.06)} #app .in-handler.wait{border-color:hsl(var(--warning)/.38);background:hsl(var(--warning)/.07)} #app .in-handler.ring{border-color:hsl(var(--warning)/.3);background:hsl(var(--warning)/.05)} #app .in-handler .ac-av{width:42px;height:42px;border-radius:13px;font-size:17px} #app .ac-av.ai{color:hsl(var(--primary));border-color:hsl(var(--primary)/.32); background:linear-gradient(150deg,hsl(var(--primary)/.18),hsl(var(--primary)/.08))} #app .ac-av.agent{color:hsl(var(--success));border-color:hsl(var(--success)/.32); background:linear-gradient(150deg,hsl(var(--success)/.18),hsl(var(--success)/.08))} #app .ac-av.wait,#app .ac-av.ring{color:hsl(var(--warning));border-color:hsl(var(--warning)/.32); background:linear-gradient(150deg,hsl(var(--warning)/.16),hsl(var(--warning)/.07))} #app .ac-av.wait{animation:inSpin 1.4s linear infinite} @keyframes inSpin{to{transform:rotate(360deg)}} #app .ihf{min-width:0;flex:1} #app .ihf b{display:block;font-size:14px;font-weight:650;letter-spacing:-.005em} #app .ihf span{display:block;margin-top:2px;font-size:12px;color:hsl(var(--muted-foreground))} #app .in-handler .ac-tag{margin-left:auto;flex:0 0 auto} #app .ac-tag.ai{color:hsl(var(--primary));background:hsl(var(--primary)/.11);border-color:hsl(var(--primary)/.26)} /* 坐席就绪条 */ #app .in-agents{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px; background:hsl(var(--muted)/.5);border:1px solid hsl(var(--border)/.7);font-size:13px} #app .in-agents b{font-weight:650} #app .in-agents-n{font-variant-numeric:tabular-nums} #app .in-agents-note{color:hsl(var(--muted-foreground));font-size:12px} #app .in-agents .btn{margin-left:auto;flex:0 0 auto} @media (max-width:560px){#app .in-agents-note{display:none}} /* 今日接听：最近呼入列表 */ #app .in-recent{display:flex;flex-direction:column;gap:2px;margin-top:14px} #app .inr{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer; border:1px solid transparent;transition:background var(--ac-ease),border-color var(--ac-ease)} #app .inr:hover{background:hsl(var(--accent)/.7);border-color:hsl(var(--border)/.7)} #app .inr-num{font-family:var(--mono);font-size:13.5px;font-weight:650;min-width:132px} #app .inr-persona{font-size:12px;color:hsl(var(--muted-foreground));white-space:nowrap} #app .inr-tag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap} #app .inr-tag.ai{background:hsl(var(--primary)/.12);color:hsl(var(--primary))} #app .inr-tag.agent{background:hsl(var(--success)/.13);color:hsl(var(--success))} #app .inr-dur{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12.5px; color:hsl(var(--muted-foreground))} #app .inr-turns{font-size:12px;color:hsl(var(--muted-foreground));min-width:44px;text-align:right} #app .inr-time{font-size:12px;color:hsl(var(--muted-foreground)/.8);min-width:52px;text-align:right} #app .in-recent-foot{margin-top:12px} @media (max-width:640px){#app .inr-persona,#app .inr-time{display:none}} /* 转人工分派：客服组选择 */ /* 线路新增/编辑弹窗：中号宽 + 双列字段网格（单列太长会滚到看不见按钮，user 报过） */ .modal.ib-dlg{width:560px;max-width:94vw} .modal.ib-dlg .ibdlg-hint{margin:2px 0 14px;padding:9px 12px;border-radius:9px;font-size:12.5px; background:hsl(var(--primary)/.07);border:1px solid hsl(var(--primary)/.18); color:hsl(var(--muted-foreground))} .ibdlg-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .ibdlg-grid .fld.full{grid-column:1/-1} /* 编辑弹窗只读信息面板（2026-09-15 user：参数详细一点，把需要的信息都展示出来） */ .modal.ib-dlg .ibdlg-info{display:flex;flex-direction:column;margin:0 0 16px;padding:2px 14px; border-radius:11px;background:hsl(var(--muted)/.5);border:1px solid hsl(var(--border)/.6)} .modal.ib-dlg .ii-row{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:12.5px; border-bottom:1px dashed hsl(var(--border)/.5)} .modal.ib-dlg .ii-row:last-child{border-bottom:none} .modal.ib-dlg .ii-k{flex:0 0 92px;color:hsl(var(--muted-foreground))} .modal.ib-dlg .ii-v{flex:1;min-width:0;font-weight:600;color:hsl(var(--foreground));word-break:break-all} .modal.ib-dlg .ii-v.mono{font-family:var(--mono);font-size:12px} .modal.ib-dlg .ii-st{display:inline-flex;align-items:center;gap:5px;font-weight:700} .modal.ib-dlg .ii-st i{width:7px;height:7px;border-radius:50%;background:hsl(var(--muted-foreground)/.5)} .modal.ib-dlg .ii-st.s-ok{color:hsl(152 52% 32%)} .modal.ib-dlg .ii-st.s-ok i{background:hsl(152 60% 42%)} .modal.ib-dlg .ii-st.s-live{color:hsl(var(--primary))} .modal.ib-dlg .ii-st.s-live i{background:hsl(var(--primary))} .modal.ib-dlg .ii-st.s-crit{color:hsl(var(--destructive))} .modal.ib-dlg .ii-st.s-crit i{background:hsl(var(--destructive))} .modal.ib-dlg .ii-st.s-off{color:hsl(var(--muted-foreground))} .modal.ib-dlg .ii-err .ii-v{color:hsl(var(--warning))} /* 分机批量填写（2026-09-15 user）：字段小标注 + 输入框下方的实时条数提示 */ .modal.ib-dlg .fld label small{font-weight:500;font-size:11px;color:hsl(var(--muted-foreground));margin-left:4px} .exth{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:6px 0 2px; font-size:11.5px;line-height:1.6;color:hsl(var(--muted-foreground))} .exth-idle b{font-family:var(--mono);font-weight:600;color:hsl(var(--foreground))} .exth-n{font-size:12.5px;font-weight:750;color:hsl(var(--primary))} .exth-pv{font-family:var(--mono);font-size:11px;color:hsl(var(--muted-foreground)); min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .exth-warn{font-style:normal;font-weight:650;color:hsl(var(--warning))} .exth-bad{font-style:normal;font-weight:650;color:hsl(var(--destructive))} /* 批量结果里被跳过的分机清单 */ .extskip{max-height:44vh;overflow-y:auto;margin:10px 0 4px;border-radius:10px; border:1px solid hsl(var(--border)/.7);background:hsl(var(--muted)/.4)} .extskip-row{display:flex;align-items:baseline;gap:12px;padding:8px 12px;font-size:12.5px; border-bottom:1px dashed hsl(var(--border)/.5)} .extskip-row:last-child{border-bottom:none} .extskip-row b{flex:0 0 96px;font-family:var(--mono);font-weight:700} .extskip-row span{flex:1;min-width:0;color:hsl(var(--muted-foreground))} /* 无人工时：客服组整块置灰（2026-09-15 user） */ .modal.ib-dlg .fld-off{opacity:.55} .modal.ib-dlg .fld-off .xfer-chip{cursor:not-allowed} /* 转人工等待音：当前素材 + 试听/上传/恢复默认 */ .modal.ib-dlg .holdrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:9px 12px;border-radius:10px;background:hsl(var(--muted)/.45);border:1px solid hsl(var(--border)/.6)} .modal.ib-dlg .hold-cur{flex:1;min-width:140px;display:inline-flex;align-items:center;gap:8px; font-size:12.5px;font-weight:600;color:hsl(var(--foreground))} .modal.ib-dlg .hold-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto; background:hsl(var(--muted-foreground)/.5)} .modal.ib-dlg .hold-dot.on{background:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.16)} .modal.ib-dlg .hold-acts{flex:0 0 auto;display:flex;gap:6px} .modal.ib-dlg #ibDlgHoldAudio{display:none} /* 对话总结卡（2026-09-15 user）：查看通话记录时排在逐句对话之前 */ #app .call-sum{margin:0 0 14px;padding:12px 14px;border-radius:12px; background:linear-gradient(180deg,hsl(199 85% 42%/.09),hsl(199 85% 42%/.04)); border:1px solid hsl(199 85% 42%/.28)} #app .cs-hd{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:7px} #app .cs-hd b{font-size:12.5px;font-weight:750;color:hsl(199 80% 32%)} #app .cs-ic{color:hsl(199 85% 42%);font-size:13px;line-height:1} #app .cs-tag{font-style:normal;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px; color:hsl(199 80% 30%);background:hsl(199 85% 42%/.16);border:1px solid hsl(199 85% 42%/.3)} #app .cs-tx{margin:0;font-size:13px;line-height:1.7;color:hsl(var(--foreground));white-space:pre-wrap} @media(prefers-color-scheme:dark){ #app .cs-hd b{color:hsl(199 85% 68%)} #app .cs-tag{color:hsl(199 85% 74%)} } #app[data-theme="dark"] .cs-hd b{color:hsl(199 85% 68%)} #app[data-theme="dark"] .cs-tag{color:hsl(199 85% 74%)} /* 🔴 不加 #app 前缀：线路编辑弹窗（modal() 挂 body）里也要用这套药丸， 加前缀那边会退化成纯文字（2026-08-29 实测踩过） */ .xfer-chips{display:flex;flex-wrap:wrap;gap:8px} .xfer-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px; border:1px solid hsl(var(--border));background:hsl(var(--card));font:inherit;font-size:13px; color:hsl(var(--foreground));cursor:pointer; transition:background var(--ac-ease),border-color var(--ac-ease),color var(--ac-ease)} .xfer-chip:hover{background:hsl(var(--accent)/.7)} .xfer-chip.on{background:hsl(var(--primary)/.12);border-color:hsl(var(--primary)/.42); color:hsl(var(--primary));font-weight:600} .xfer-chip i{font-style:normal;font-size:11px;opacity:.7;font-variant-numeric:tabular-nums} #app .xfer-note{margin-top:12px} /* ============================================================================ 批量外呼（2026-08-23） 🔴 线路只有一路 —— 界面处处要如实说"排队逐个拨"，别做成看起来能并发的样子。 ============================================================================ */ #app .ob-master .cp-body{padding:0} #app .obm-row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:16px 18px} #app .obm-sw{display:flex;align-items:center;gap:13px} #app .obm-line{display:flex;align-items:center;gap:11px;padding-left:18px; border-left:1px solid hsl(var(--border)/.6)} #app .obm-txt b{display:block;font-size:14px;font-weight:680;letter-spacing:-.012em} #app .obm-txt span{display:block;margin-top:2px;font-size:12.5px;color:hsl(var(--muted-foreground))} #app .obm-note{margin:0;border-radius:0 0 var(--ac-r) var(--ac-r);line-height:1.65} #app .pn-sw:disabled{opacity:.45;cursor:not-allowed} @media (max-width:820px){#app .obm-row{grid-template-columns:1fr} #app .obm-line{padding-left:0;border-left:0;padding-top:14px;border-top:1px solid hsl(var(--border)/.6)}} /* 任务表 */ #app .ob-tbl .c-num,#app .ob-tbl .c-seq{text-align:right;width:1%;white-space:nowrap} #app .ob-tbl .c-prog{width:190px} #app .ob-name b{display:block;font-size:13.5px;font-weight:650} #app .ob-name span,#app .ob-sub{display:block;margin-top:2px;font-size:11.5px; color:hsl(var(--muted-foreground))} #app .ob-bar{height:7px;border-radius:999px;background:hsl(var(--muted));overflow:hidden; box-shadow:inset 0 1px 2px hsl(222 47% 11%/.07)} #app .ob-bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,hsl(var(--primary)/.75),hsl(var(--primary))); transition:width .4s cubic-bezier(.4,0,.2,1)} /* 上传区 */ #app .drop{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer; padding:34px 20px;border-radius:14px;text-align:center; border:1.5px dashed hsl(var(--border));background:hsl(var(--muted)/.35); transition:border-color var(--ac-ease),background var(--ac-ease)} #app .drop:hover,#app .drop.over{border-color:hsl(var(--primary)/.6);background:hsl(var(--primary)/.05)} #app .drop-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center; color:hsl(var(--primary));background:hsl(var(--primary)/.11)} #app .drop-ic svg{width:22px;height:22px} #app .drop b{font-size:14px;font-weight:650} #app .drop span{font-size:12.5px;color:hsl(var(--muted-foreground))} #app .ob-file{display:flex;align-items:baseline;gap:10px;margin-top:16px} #app .ob-file b{font-size:14px;font-weight:650} #app .ob-file span{font-size:12.5px;color:hsl(var(--muted-foreground))} #app .ob-map{margin-top:14px} #app .ob-count{display:flex;align-items:center;height:40px;font-size:13px; color:hsl(var(--muted-foreground))} #app .ob-count b{font-weight:700;color:hsl(var(--foreground))} #app .ob-count b.ok{color:hsl(var(--success))} #app .ob-count b.bad{color:hsl(var(--warning));cursor:help;border-bottom:1px dotted} #app .ob-preview{margin-top:8px;border:1px solid hsl(var(--border)/.6);border-radius:12px; max-height:260px;overflow:auto} #app .ob-preview th{position:sticky;top:0;z-index:1} #app .ob-preview td{font-size:12.5px;white-space:nowrap} #app .ob-parsing{display:flex;align-items:center;gap:10px;margin-top:16px; font-size:13px;color:hsl(var(--muted-foreground))} /* 表单 */ #app .dl-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end} @media (max-width:860px){#app .dl-row3{grid-template-columns:1fr}} #app .tw{display:flex;align-items:center;gap:8px} #app .tw input{width:auto;flex:1} #app .tw span{font-size:12.5px;color:hsl(var(--muted-foreground))} #app .stepn{width:21px;height:21px;border-radius:7px;display:inline-grid;place-items:center; font-size:11.5px;font-weight:700;margin-right:8px; background:linear-gradient(180deg,hsl(var(--primary)/.94),hsl(var(--primary))); color:hsl(var(--primary-foreground));box-shadow:0 1px 3px hsl(var(--primary)/.35)} #app .ac-panel-head h3{display:flex;align-items:center} /* ---- 外呼页的线路清单（2026-08-23：user 说"不知道多少个线路在跑"）---- */ #app .obl-stats{display:flex;gap:10px} #app .obl-stat{min-width:78px;padding:9px 13px;border-radius:11px;text-align:center; background:hsl(var(--muted)/.7);border:1px solid hsl(var(--border)/.6)} #app .obl-stat b{display:block;font-size:21px;font-weight:750;letter-spacing:-.03em; font-variant-numeric:tabular-nums;line-height:1.2} #app .obl-stat span{display:block;margin-top:1px;font-size:11px;color:hsl(var(--muted-foreground))} #app .obl-stat.live{background:hsl(var(--primary)/.1);border-color:hsl(var(--primary)/.3)} #app .obl-stat.live b{color:hsl(var(--primary))} #app .obl-stat.bad{background:hsl(var(--destructive)/.09);border-color:hsl(var(--destructive)/.3)} #app .obl-stat.bad b{color:hsl(var(--destructive))} #app .obl-list{border-top:1px solid hsl(var(--border)/.55);padding:4px 18px 14px} #app .obl-head{padding:13px 0 7px;font-size:11px;font-weight:600;letter-spacing:.06em; color:hsl(var(--muted-foreground)/.9)} #app .obl-head.sub{margin-top:6px;border-top:1px dashed hsl(var(--border)/.7);padding-top:13px} #app .obl-head b{color:hsl(var(--warning));font-weight:700} #app .obl-row{display:flex;align-items:center;gap:11px;padding:8px 0; border-bottom:1px solid hsl(var(--border)/.35)} #app .obl-row:last-of-type{border-bottom:none} #app .obl-nm{min-width:0;flex:1} #app .obl-nm b{display:block;font-size:13.5px;font-weight:650} #app .obl-nm span{display:block;margin-top:1px;font-size:11.5px;color:hsl(var(--muted-foreground))} #app .obl-ext{flex:0 0 auto;font-size:12.5px;color:hsl(var(--muted-foreground))} #app .obl-st2{flex:0 0 auto;min-width:80px;text-align:right;font-size:12px; color:hsl(var(--muted-foreground))} #app .dot.live{background:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.18)} #app .obl-err{margin:8px 0 2px;white-space:pre-wrap;line-height:1.6} #app .obl-none,#app .obl-foot{padding:8px 0 0;font-size:12px;color:hsl(var(--muted-foreground))} #app .obl-foot{padding-top:11px} @media (max-width:820px){#app .obl-stats{width:100%;justify-content:space-between}} /* ============================================================================ AI 外呼：左右两栏（2026-08-23 重排） 参考成熟拨号软件的组织方式：任务(campaign) 占主版面，拨号器是不抢版面的小部件， 实时监控与配置管理分开。原来六块竖排、主次不分，user 说"看着太乱"。 左 = 任务卡（一眼看进度） 右 = 线路与实时（只回答"能不能拨 / 在拨谁"） ⚠️ 右栏别再摊开虚拟号码线路 —— 它们 AI 外呼一条都用不上，摊开只会让人以为能并发。 ============================================================================ */ #app .ob-2col{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:18px;align-items:start} @media (max-width:1080px){#app .ob-2col{grid-template-columns:1fr}} #app .ob-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0} #app .ob-side .ac-panel{margin-bottom:0} #app .ob-jobs-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:12px} #app .ob-jobs-hd h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.015em} #app .ob-jobs-hd span{font-size:12.5px;color:hsl(var(--muted-foreground))} /* ===== 任务列表 = campaign 数据表格（2026-08-29 四稿，卡片网格已废）===== 一行一任务：名称+参数副行 / 状态 / 进度条 / 各指标列（右对齐可纵向比较）/ 操作。 点整行进详情；行尾 ▶/⏸ + ⋯。彩色只留：状态徽章、进度条、转人工绿、未接琥珀。 */ #app .ob-jobs{display:block} #app .jobs-tblwrap{background:hsl(var(--card));border:1px solid hsl(var(--border)/.75); border-radius:14px;overflow:auto;box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen)} #app .jobs-tbl{width:100%;min-width:880px;border-collapse:collapse;font-size:12.5px} #app .jobs-tbl th{position:sticky;top:0;z-index:1;padding:12px 10px;white-space:nowrap; font-size:12.5px;font-weight:750;letter-spacing:.04em;text-align:left; color:hsl(var(--foreground)/.82);background:hsl(var(--muted)/.6); border-bottom:1px solid hsl(var(--border));cursor:pointer;user-select:none; transition:color var(--ac-ease)} #app .jobs-tbl th:hover{color:hsl(var(--foreground))} #app .jobs-tbl th.c-act{cursor:default} #app .jobs-tbl th.sorted{color:hsl(var(--primary))} #app .jt-arr{font-style:normal;margin-left:3px;font-size:11px;color:hsl(var(--primary))} /* 行距加大 + 分隔线加实（user 连提两轮：七稿 24px 行距 + 更深的实线）*/ #app .jobs-tbl td{padding:24px 10px;border-bottom:1px solid hsl(var(--muted-foreground)/.32); vertical-align:middle} /* 序号列：01、02… 普通数字加大加粗（美术体试过被否），跟着当前排序走 */ #app .jobs-tbl .c-seq{width:52px;text-align:center;white-space:nowrap} #app .jobs-tbl td.c-seq{font-size:15px;font-weight:750;line-height:1; color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums} #app .jobs-tbl th.c-seq{cursor:default;text-align:center} #app .jobs-tbl tr:last-child td{border-bottom:none} #app .jt-row{cursor:pointer;transition:background var(--ac-ease)} #app .jt-row:hover{background:hsl(var(--muted)/.4)} #app .jt-row.t-run td:first-child{box-shadow:inset 3px 0 0 hsl(var(--primary))} #app .jt-row.t-pause td:first-child{box-shadow:inset 3px 0 0 hsl(var(--warning)/.7)} #app .jt-row.t-done td:first-child{box-shadow:inset 3px 0 0 hsl(var(--success)/.6)} #app .jobs-tbl .c-task{min-width:215px} /* 任务专属色首字头像：--h 由 id 哈希得（稳定），行与行一眼分得开 */ #app .jt-taskcell{display:flex;align-items:center;gap:11px;min-width:0} #app .jt-av{width:34px;height:34px;border-radius:10px;flex:0 0 auto; display:grid;place-items:center;font-size:14.5px;font-weight:750;color:#fff; background:linear-gradient(150deg,hsl(var(--h) 62% 56%) 15%,hsl(var(--h) 58% 44%)); box-shadow:0 2px 6px hsl(var(--h) 62% 45%/.35),inset 0 1px 0 hsl(0 0% 100%/.25)} #app .jt-taskmain{min-width:0} #app .jt-name{font-size:13.5px;font-weight:700;letter-spacing:-.01em; color:hsl(var(--foreground))} /* 任务格里的四个参数徽章（复用 .objf 定稿样式：中性底+彩色小图标）。 🔴 固定 2×2 网格，不用 flex-wrap——线路名宽度不一会让折行点漂移， 有的行 2+2 有的 3+1，看着像两种布局（user 报过）。 */ /* ⚠️ 选择器要带 .objf-row 提特异性：基础的 #app .objf-row{display:flex} 在文件更后面， 同特异性会把这里的 grid 盖掉（实测踩过：徽章竖成一列） */ #app .objf-row.jt-facts{margin-top:5px;display:grid;grid-template-columns:repeat(2,max-content); gap:4px;justify-content:start} #app .jt-facts .objf{height:21px;padding:0 7px;font-size:11px} #app .objf.f-total{--fc:221 83% 53%} :root[data-theme="dark"] #app .objf.f-total{--fc:221 83% 66%} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #app .objf.f-total{--fc:221 83% 66%} } #app .jt-live{margin-top:3px;font-size:11.5px;color:hsl(var(--primary)); display:flex;align-items:center;gap:6px} #app .jt-live .dot{width:6px;height:6px;border-radius:50%;background:hsl(var(--primary)); animation:objpulse 1.2s ease-in-out infinite;flex:0 0 auto} #app .jobs-tbl .c-st{width:80px;white-space:nowrap;text-align:center} /* 进度：三层竖排——百分比在条上、条居中、已拨/总数在条下， 三层与「进度」表头全部按列中线居中（user 2026-08-29 定稿形态） */ #app .jobs-tbl .c-prog{width:150px;white-space:nowrap;text-align:center} #app .jobs-tbl th.c-prog{text-align:center} #app .jt-progwrap{display:inline-flex;flex-direction:column;gap:3px;align-items:center; vertical-align:middle} #app .jt-pp{font-size:12.5px;font-weight:750;color:hsl(var(--primary));line-height:1; font-variant-numeric:tabular-nums} #app .jt-bar{width:112px;height:6px;border-radius:999px;background:hsl(var(--muted)); overflow:hidden} #app .jt-bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,hsl(var(--primary)/.72),hsl(var(--primary)))} #app .jt-pf{font-size:11px;color:hsl(var(--muted-foreground));line-height:1; font-variant-numeric:tabular-nums} /* 🔴 数字列表头必须跟单元格一起右对齐：`#app .jobs-tbl th` 的 text-align:left 特异性压过 `.c-n`，不显式写 th.c-n 表头会靠左、数字靠右，看着全没对齐（user 报过） */ #app .jobs-tbl .c-n{width:62px;text-align:center;white-space:nowrap} #app .jobs-tbl th.c-n{text-align:center} #app .jobs-tbl th.c-st{text-align:center} #app .jobs-tbl td.c-n b{font-size:13.5px;font-weight:700;color:hsl(var(--foreground)); font-variant-numeric:tabular-nums} #app .jobs-tbl td.c-n.ok b{color:hsl(var(--success))} #app .jobs-tbl td.c-n.warn b{color:hsl(var(--warning))} /* 已转人工：数字在上、转化率在下的两行小堆叠（横排「4 29%」被否，读着像一个数）*/ #app .jt-x{display:inline-flex;flex-direction:column;align-items:center;line-height:1.2} #app .jt-x i{font-style:normal;font-size:10.5px;color:hsl(var(--muted-foreground)); font-variant-numeric:tabular-nums} #app .jobs-tbl .c-when{width:74px;font-size:11.5px;color:hsl(var(--muted-foreground)); white-space:nowrap;text-align:center} /* 行尾操作：带文字的设计按钮（2026-08-29 六稿，user：光图标看不懂）—— 「▶ 开始」蓝 /「⏸ 暂停」琥珀 /「已拨完」灰 + 「更多 ▾」中性描边 */ #app .jobs-tbl .c-act{width:150px;text-align:right;white-space:nowrap} #app .jt-act{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px; border-radius:9px;font-size:12px;font-weight:650;cursor:pointer;vertical-align:middle; opacity:.88;transition:opacity var(--ac-ease),background var(--ac-ease), border-color var(--ac-ease),box-shadow var(--ac-ease)} #app .jt-row:hover .jt-act{opacity:1} #app .jt-act svg{width:13px;height:13px;flex:0 0 auto} #app .jt-act.a-run{color:hsl(var(--primary));background:hsl(var(--primary)/.1); border:1px solid hsl(var(--primary)/.35)} #app .jt-act.a-run:hover{background:hsl(var(--primary)/.18); box-shadow:0 2px 7px hsl(var(--primary)/.22)} #app .jt-act.a-pause{color:hsl(var(--warning));background:hsl(var(--warning)/.12); border:1px solid hsl(var(--warning)/.4)} #app .jt-act.a-pause:hover{background:hsl(var(--warning)/.2)} #app .jt-act.a-run:disabled{color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.5); border-color:hsl(var(--border));cursor:default;box-shadow:none} #app .jt-act.a-more{margin-left:6px;color:hsl(var(--foreground)); background:hsl(var(--card));border:1px solid hsl(var(--border));box-shadow:var(--shadow-xs)} #app .jt-act.a-more:hover{border-color:hsl(var(--primary)/.5);color:hsl(var(--primary))} #app .jt-act.a-more svg{width:12px;height:12px;opacity:.7} #app .jt-row .obj-badge{height:22px} #app .jt-row.t-run .obj-badge{color:hsl(var(--primary));background:hsl(var(--primary)/.11); border-color:hsl(var(--primary)/.3)} #app .jt-row.t-pause .obj-badge{color:hsl(var(--warning));background:hsl(var(--warning)/.13); border-color:hsl(var(--warning)/.3)} #app .jt-row.t-done .obj-badge{color:hsl(var(--success));background:hsl(var(--success)/.12); border-color:hsl(var(--success)/.3)} /* 任务卡（紧凑三行：标题+参数徽章 / 进度 / 数字，页脚常驻） */ #app .obj{background:hsl(var(--card));border:1px solid hsl(var(--border)/.75);border-radius:14px; padding:12px 15px 10px;box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen); transition:box-shadow var(--ac-ease),border-color var(--ac-ease)} #app .obj:hover{border-color:hsl(var(--primary)/.35);box-shadow:var(--ac-shadow),var(--ac-sheen)} #app .obj.paused{opacity:.9} #app .obj-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #app .obj-nm{font-size:14.5px;font-weight:700;letter-spacing:-.018em;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .obj-hd .ac-ico{margin-left:auto;opacity:.5} #app .obj:hover .obj-hd .ac-ico{opacity:.9} #app .obj-bar{height:8px;border-radius:999px;margin:12px 0 9px;background:hsl(var(--muted)); overflow:hidden;box-shadow:inset 0 1px 2px hsl(222 47% 11%/.07)} #app .obj-bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,hsl(var(--primary)/.72),hsl(var(--primary))); transition:width .4s cubic-bezier(.4,0,.2,1)} #app .obj-nums{display:flex;align-items:baseline;gap:13px;font-size:11px;flex-wrap:wrap; color:hsl(var(--muted-foreground))} #app .obj-nums b{font-size:14px;font-weight:750;margin-right:3px;color:hsl(var(--foreground)); font-variant-numeric:tabular-nums} #app .obj-nums .ok b{color:hsl(var(--success))} #app .obj-nums .warn b{color:hsl(var(--warning))} #app .obj-nums .pct{margin-left:auto;font-size:13px;font-weight:700;color:hsl(var(--primary)); font-variant-numeric:tabular-nums} #app .obj-ft{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:8px; border-top:1px solid hsl(var(--border)/.5)} #app .obj-time{margin-right:auto;font-size:11px;color:hsl(var(--muted-foreground)/.85)} #app .obj-ft .btn.sm{height:27px;padding:0 10px;font-size:12px} #app .ob-empty{padding:52px 20px;text-align:center;background:hsl(var(--card)); border:1px dashed hsl(var(--border));border-radius:14px} #app .ob-empty .ic{width:46px;height:46px;margin:0 auto 12px;border-radius:14px;display:grid; place-items:center;color:hsl(var(--primary));background:hsl(var(--primary)/.1)} #app .ob-empty .ic svg{width:22px;height:22px} #app .ob-empty b{display:block;font-size:14.5px;font-weight:650} #app .ob-empty p{margin:6px 0 16px;font-size:12.5px;color:hsl(var(--muted-foreground))} /* 右栏：线路 */ #app .obl-one{display:flex;align-items:center;gap:10px} #app .obl-nm{min-width:0;flex:1} #app .obl-nm b{display:block;font-size:13.5px;font-weight:650} #app .obl-nm span{display:block;margin-top:1px;font-size:11.5px;color:hsl(var(--muted-foreground))} #app .obl-cap{margin-top:12px;padding:9px 11px;border-radius:10px;font-size:11.5px; background:hsl(var(--muted)/.7);color:hsl(var(--muted-foreground));line-height:1.55} #app .obl-cap b{color:hsl(var(--foreground));font-weight:700} #app .obl-more{margin-top:9px;font-size:11.5px;color:hsl(var(--muted-foreground))} #app .obl-err{margin-top:10px;white-space:pre-wrap;line-height:1.6;font-size:11.5px} #app .obl-auto{display:flex;align-items:center;gap:11px;margin-top:13px;padding-top:13px; border-top:1px solid hsl(var(--border)/.55)} #app .obl-todo{margin-top:10px;font-size:11.5px;line-height:1.6} /* 自动拨号循环的实时状态行（在拨谁/在等什么），任务卡上的同款动态行 */ #app .obl-phase{margin-top:10px;font-size:11.5px;line-height:1.6} #app .obj-live{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12px; color:hsl(var(--primary));line-height:1.5} #app .obj-live .mono{font-weight:650} /* 右栏：当前通话里的字幕 */ #app .ob-side .call-feed{max-height:210px;border-top:1px solid hsl(var(--border)/.55)} #app .ob-side .call-feed .ln{padding:6px 16px;font-size:12.5px} /* 右栏：手动试拨（默认折叠，不抢版面） */ #app .ob-manual{padding:0} #app .ob-manual > summary{display:flex;align-items:baseline;gap:9px;cursor:pointer; padding:15px 18px;list-style:none;transition:background var(--ac-ease)} #app .ob-manual > summary::-webkit-details-marker{display:none} #app .ob-manual > summary::after{content:"▾";margin-left:auto;color:hsl(var(--muted-foreground)); transition:transform var(--ac-ease)} #app .ob-manual[open] > summary::after{transform:rotate(180deg)} #app .ob-manual > summary:hover{background:hsl(var(--muted)/.4)} #app .ob-manual > summary h3{margin:0;font-size:14.5px;font-weight:680} #app .ob-manual > summary span{font-size:11.5px;color:hsl(var(--muted-foreground))} #app .ob-manual .cp-body{padding-top:4px;border-top:1px solid hsl(var(--border)/.5)} #app .ob-manual .dl-f input,#app .ob-manual .dl-f select{height:36px;font-size:13px} /* ============================================================================ AI 外呼：按成熟拨号软件的界面约定补齐（2026-08-23） 采自 Convoso / CloudTalk 帮助文档里写死的四条（营销页只讲功能、截图拿不到， 所以只采信文档明确写出来的）： ① 顶部一排关键运行指标（Convoso Agent Monitor Screen） ② 任务显示剩余号码 + 拨打时段（Campaign Overview 的 remaining leads / start-end） ③ 状态颜色编码：进行中 / 等待 / 暂停 各一色，且进行中要有活体感 ④ 主操作悬停才浮出（CloudTalk hover-to-call），静态时列表干净 ============================================================================ */ #app .ob-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px} @media (max-width:1200px){#app .ob-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:700px){#app .ob-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---- 子分页拆分后的新布局（2026-08-28） ---- */ /* 任务子页顶栏：左边任务数字统计，右边刷新/新建 */ #app .ob-taskbar{display:flex;align-items:center;gap:16px;margin-bottom:14px} #app .ob-taskbar-l{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0} #app .ob-taskbar-l b{font-size:17px;font-weight:700;letter-spacing:-.015em} #app .ob-taskbar-l span{font-size:13px;color:hsl(var(--muted-foreground))} #app .ob-taskbar-r{display:flex;gap:8px;flex:0 0 auto} /* 全局自动外呼开关条 —— 原来在线路面板里的那一小块，独立成"操作任务"的横条 */ #app .ob-autobar{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:14px; background:hsl(var(--card));border:1px solid hsl(var(--border)/.75);border-radius:14px; box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen)} #app .ob-autobar:empty{display:none} #app .ob-autobar .pn-sw{flex:0 0 auto} #app .ob-autobar-tx{min-width:0;flex:1} #app .ob-autobar-tx b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em} #app .ob-autobar-tx span{display:block;margin-top:2px;font-size:12px;color:hsl(var(--muted-foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 统计子页顶栏：时间范围切换 + 当前范围说明（老版本，留着不删——万一别处用到） */ #app .ob-stats-hd{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap} #app .ob-stats-hd .hint{font-size:12px} /* ============================================================ 统计子页 v2（2026-08-28）：按任务卡片 · 可展开看深度详情 顶部 4 格汇总（复用 .ob-kpis）+ 筛选条 + 卡片列表 ============================================================ */ /* 时间范围条：预设 seg + 独立「挑日期」按钮（更抢眼）+ 命中数说明 */ #app .ob-stat-range{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap; position:relative} #app .ob-stat-range .seg{flex:0 0 auto} #app .ob-pickdate{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:34px; padding:0 14px;font-size:13px;font-weight:600;border-radius:9px; border:1px dashed hsl(var(--primary)/.45); background:hsl(var(--primary)/.06);color:hsl(var(--primary)); transition:background .15s,border-color .15s,box-shadow .15s;position:relative} #app .ob-pickdate svg{width:15px;height:15px;flex:0 0 auto} #app .ob-pickdate:hover{background:hsl(var(--primary)/.13); border-color:hsl(var(--primary)/.7);border-style:solid; box-shadow:0 2px 8px hsl(var(--primary)/.18)} #app .ob-pickdate.active{background:hsl(var(--primary));color:hsl(var(--primary-foreground)); border-color:hsl(var(--primary));border-style:solid; box-shadow:0 2px 10px hsl(var(--primary)/.32)} #app .ob-pickdate.active:hover{background:hsl(var(--primary)/.9)} #app #obStatRangeScope{flex:1;min-width:0;font-size:12px;color:hsl(var(--muted-foreground)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 挑日期弹层：position:fixed（portal 到 #app 下）*/ #app .ob-pickdate-pop{position:fixed;z-index:2100;width:320px;padding:14px; background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:12px; box-shadow:0 12px 36px hsl(222 47% 11%/.22),0 2px 6px hsl(222 47% 11%/.08); animation:pd-in .18s cubic-bezier(.16,1,.3,1)} #app .ob-pickdate-pop.hidden{display:none} @keyframes pd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} #app .ob-pickdate-pop .pd-hd{font-size:13.5px;font-weight:700;margin-bottom:12px; letter-spacing:-.01em} #app .ob-pickdate-pop .pd-row{display:flex;align-items:center;gap:10px;margin-bottom:9px} #app .ob-pickdate-pop .pd-row label{flex:0 0 auto;width:24px;font-size:12.5px; color:hsl(var(--muted-foreground))} #app .ob-pickdate-pop input[type="date"]{flex:1;height:34px;padding:0 10px;font-size:13px; border:1px solid hsl(var(--border));border-radius:7px;background:hsl(var(--muted)/.35); color:hsl(var(--foreground));font-family:inherit} #app .ob-pickdate-pop input[type="date"]:focus{outline:none;border-color:hsl(var(--primary)/.55); background:hsl(var(--card));box-shadow:0 0 0 3px hsl(var(--primary)/.11)} #app .ob-pickdate-pop .pd-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px; margin:12px 0 4px;padding-top:10px;border-top:1px dashed hsl(var(--border)/.6)} #app .ob-pickdate-pop .pd-q-lb{font-size:11.5px;color:hsl(var(--muted-foreground)); margin-right:2px} #app .ob-pickdate-pop .pd-quick button{padding:4px 10px;font-size:12px; border:1px solid hsl(var(--border));border-radius:7px;background:hsl(var(--muted)/.4); color:hsl(var(--muted-foreground));cursor:pointer;transition:background .12s} #app .ob-pickdate-pop .pd-quick button:hover{background:hsl(var(--accent)); color:hsl(var(--foreground));border-color:hsl(var(--primary)/.35)} #app .ob-pickdate-pop .pd-err{margin-top:8px;padding:7px 10px;font-size:12px; color:hsl(var(--destructive));background:hsl(var(--destructive)/.09); border-radius:7px;border:1px solid hsl(var(--destructive)/.28)} #app .ob-pickdate-pop .pd-err.hidden{display:none} #app .ob-pickdate-pop .pd-acts{display:flex;justify-content:flex-end;gap:8px; margin-top:12px;padding-top:10px;border-top:1px solid hsl(var(--border)/.5)} #app .ob-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px} #app .ob-summary .ob-kpi{padding:14px 16px} @media (max-width:900px){#app .ob-summary{grid-template-columns:repeat(2,minmax(0,1fr))}} #app .ob-stat-filter{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} #app .ob-stat-filter #obStatQ{flex:1;min-width:180px;max-width:280px;height:32px;padding:0 12px; border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--card));font:inherit;font-size:13px} #app .ob-stat-filter #obStatQ:focus{outline:none;border-color:hsl(var(--primary)/.55); box-shadow:0 0 0 3px hsl(var(--primary)/.1)} #app .ob-stat-cards{display:flex;flex-direction:column;gap:12px} /* 单张卡片 */ #app .obs{background:hsl(var(--card));border:1px solid hsl(var(--border)/.75);border-radius:14px; padding:15px 17px 13px;position:relative;overflow:hidden; box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen); transition:box-shadow var(--ac-ease),border-color var(--ac-ease)} #app .obs:hover{border-color:hsl(var(--primary)/.35);box-shadow:var(--ac-shadow),var(--ac-sheen)} /* 左侧状态色带 */ #app .obs::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px; border-radius:0 3px 3px 0;background:hsl(var(--muted-foreground)/.35)} #app .obs.t-run::before{background:hsl(var(--primary))} #app .obs.t-pause::before{background:hsl(var(--warning))} #app .obs.t-done::before{background:hsl(var(--success))} #app .obs{padding-left:19px} /* 卡片头（可点：切换展开） */ #app .obs-hd{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none} #app .obs-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto; background:hsl(var(--muted-foreground)/.45)} #app .obs.t-run .obs-dot{background:hsl(var(--primary));animation:objpulse 1.8s ease-in-out infinite} #app .obs.t-pause .obs-dot{background:hsl(var(--warning))} #app .obs.t-done .obs-dot{background:hsl(var(--success))} #app .obs-nm{flex:1;min-width:0;font-size:15.5px;font-weight:700;letter-spacing:-.018em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .obs-badge{flex:0 0 auto;height:22px;padding:0 10px;border-radius:999px;display:inline-flex; align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.02em; color:hsl(var(--muted-foreground));background:hsl(var(--muted));border:1px solid hsl(var(--border)/.7)} #app .obs.t-run .obs-badge{color:hsl(var(--primary));background:hsl(var(--primary)/.11); border-color:hsl(var(--primary)/.3)} #app .obs.t-pause .obs-badge{color:hsl(var(--warning));background:hsl(var(--warning)/.13); border-color:hsl(var(--warning)/.3)} #app .obs.t-done .obs-badge{color:hsl(var(--success));background:hsl(var(--success)/.12); border-color:hsl(var(--success)/.3)} /* 「查看详情」钮（下拉展开已改成弹窗，2026-08-29）：常驻淡显，悬停卡片时提亮 */ #app .obs-detail-btn{flex:0 0 auto;opacity:.65;transition:opacity var(--ac-ease)} #app .obs:hover .obs-detail-btn{opacity:1} /* 统计详情弹窗骨架（外呼任务 #obStatMask + 接听线路 #ibStatMask 共用）： 主色横幅头 + 可滚主体。🔴 选择器按 .talk-mask + 结构类作用，别绑单个弹窗 id ——绑 id 的后果实测过：ibStatMask 全套样式失效、关闭钮流到左上角变裸图标。 */ .talk-mask .modal.obstat{width:620px;max-width:94vw;padding:0; border-radius:16px;overflow:hidden;display:flex;flex-direction:column;max-height:86vh} .talk-mask .obstat-hd{--hc:var(--primary);flex:0 0 auto;padding:17px 56px 13px 22px;position:relative; background:linear-gradient(155deg,hsl(var(--hc)/.14),hsl(var(--hc)/.04) 52%,hsl(var(--hc)/.09)); border-bottom:1px solid hsl(var(--hc)/.22)} .talk-mask .obstat-hd::after{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,hsl(var(--hc)),hsl(var(--hc)/.35) 60%,transparent)} .talk-mask .obstat-hd.t-pause{--hc:var(--warning)} .talk-mask .obstat-hd.t-done{--hc:var(--success)} .talk-mask .osm-line1{display:flex;align-items:center;gap:10px;min-width:0} .talk-mask .osm-nm{font-size:17px;font-weight:800;letter-spacing:-.015em; color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .talk-mask .osm-line1 .obj-badge{flex:0 0 auto;height:21px;padding:0 9px;border-radius:999px; display:inline-flex;align-items:center;font-size:11px;font-weight:750; color:hsl(var(--hc));background:hsl(var(--hc)/.12);box-shadow:inset 0 0 0 1px hsl(var(--hc)/.3)} .talk-mask .osm-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:5px; font-size:12px;color:hsl(var(--muted-foreground))} .talk-mask .osm-meta i{width:3px;height:3px;border-radius:50%;background:hsl(var(--muted-foreground)/.45)} .talk-mask .obstat-hd .obs-prog{margin:12px 0 2px} .talk-mask .obstat-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px 20px} /* 状态筛选药丸（无前缀通用类）：统计详情弹窗 + 监控页号码明细弹窗共用。 🔴 别加 #app / #obStatMask 前缀——号码明细是 modal() 挂 body 的，加前缀就套不到 （.ob-chip 在那个弹窗里变纯文本就是这么来的）。 */ .osm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .osm-chip{--cc:var(--primary);display:inline-flex;align-items:center;gap:5px; height:26px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;cursor:pointer; color:hsl(var(--cc));background:hsl(var(--cc)/.08);border:1px solid hsl(var(--cc)/.35); transition:background .15s,color .15s,border-color .15s} .osm-chip b{font-size:10.5px;font-variant-numeric:tabular-nums;line-height:1; background:hsl(var(--cc)/.14);border-radius:999px;padding:2px 6px} .osm-chip:hover{background:hsl(var(--cc)/.14)} .osm-chip.on{color:#fff;background:hsl(var(--cc));border-color:hsl(var(--cc)); box-shadow:0 2px 7px hsl(var(--cc)/.3)} .osm-chip.on b{background:hsl(0 0% 100%/.24);color:#fff} .osm-chip.c-fail{--cc:var(--destructive)} .osm-chip.c-ans{--cc:var(--warning)} .osm-chip.c-xfer{--cc:var(--success)} .osm-chip.c-pend{--cc:var(--muted-foreground)} /* 「N 句」通话记录钮（无前缀通用类）：统计详情弹窗 + 号码明细弹窗共用，点开对话弹层 */ .osm-talk{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:23px; padding:0 10px;border-radius:999px;font-size:11px;font-weight:650;cursor:pointer; white-space:nowrap;color:hsl(var(--primary));background:hsl(var(--primary)/.09); border:1px solid hsl(var(--primary)/.35);transition:background .15s,border-color .15s} .osm-talk:hover{background:hsl(var(--primary)/.16);border-color:hsl(var(--primary)/.55)} .osm-talk svg{width:12px;height:12px;flex:0 0 auto} .osm-talk.dim{opacity:.55;border-style:dashed} .osm-talk.dim:hover{opacity:1} .talk-mask .osm-cap{padding:10px 0 2px;text-align:center;font-size:11.5px; color:hsl(var(--muted-foreground))} /* 号码/通话清单自带滚动区（外呼+接听两个详情弹窗共用；切筛选钮时上面内容与滚动位置都不动， 只有清单内部换）；min-height 固定住高度，加载态不塌、不引起外层跳动 */ .talk-mask .osm-list{min-height:200px;max-height:46vh;overflow-y:auto; border:1px solid hsl(var(--border)/.55);border-radius:12px;padding:4px 6px; background:hsl(var(--muted)/.22)} /* 副行 meta */ #app .obs-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px; font-size:12px;color:hsl(var(--muted-foreground))} #app .obs-meta i{width:3px;height:3px;border-radius:50%;background:hsl(var(--muted-foreground)/.45)} /* 进度条 */ #app .obs-prog{display:flex;align-items:center;gap:11px;margin:12px 0 10px} #app .obs-bar{flex:1;height:8px;border-radius:999px;background:hsl(var(--muted)); overflow:hidden;box-shadow:inset 0 1px 2px hsl(222 47% 11%/.07)} #app .obs-bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,hsl(var(--primary)/.72),hsl(var(--primary))); transition:width .4s cubic-bezier(.4,0,.2,1)} #app .obs-pct{flex:0 0 auto;font-size:13px;font-weight:700;color:hsl(var(--primary)); font-variant-numeric:tabular-nums} /* 5 格核心数字 */ #app .obs-nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px; padding:10px 0 2px} #app .obs-n{padding:8px 6px;text-align:center;border-radius:9px;background:hsl(var(--muted)/.4)} #app .obs-n b{display:block;font-size:18px;font-weight:750;letter-spacing:-.02em; color:hsl(var(--foreground));font-variant-numeric:tabular-nums;line-height:1.15} #app .obs-n span{display:block;margin-top:2px;font-size:11px;color:hsl(var(--muted-foreground))} #app .obs-n.ok b{color:hsl(var(--success))} #app .obs-n.pri b{color:hsl(var(--primary))} @media (max-width:700px){#app .obs-nums{grid-template-columns:repeat(3,minmax(0,1fr))}} /* 详情四段（拨号分布/通话质量/时间线/最近拨打）——现在渲染在 #obStatMask 弹窗里 */ #app .obs-sec{margin-bottom:16px} #app .obs-sec:last-child{margin-bottom:0} #app .obs-sec h4{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:hsl(var(--muted-foreground))} /* 拨号分布 */ #app .obs-dg-nums{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px; color:hsl(var(--muted-foreground));margin-bottom:8px} #app .obs-dg-nums b{font-weight:700;color:hsl(var(--foreground));font-variant-numeric:tabular-nums;margin-left:4px} #app .obs-dg-nums .dg-ok{color:hsl(var(--success))} #app .obs-dg-nums .dg-ok b{color:hsl(var(--success))} #app .obs-dg-nums .dg-warn{color:hsl(var(--warning))} #app .obs-dg-nums .dg-warn b{color:hsl(var(--warning))} #app .obs-dg-nums .dg-crit{color:hsl(var(--destructive))} #app .obs-dg-nums .dg-crit b{color:hsl(var(--destructive))} #app .obs-dg-bar{display:flex;height:10px;border-radius:999px;overflow:hidden; background:hsl(var(--muted));box-shadow:inset 0 1px 2px hsl(222 47% 11%/.07)} #app .obs-dg-bar i{display:block;height:100%;transition:width .35s ease} #app .obs-dg-bar .dg-ok{background:hsl(var(--success))} #app .obs-dg-bar .dg-warn{background:hsl(var(--warning))} #app .obs-dg-bar .dg-crit{background:hsl(var(--destructive))} #app .obs-dg-bar .dg-muted{background:hsl(var(--muted-foreground)/.4)} /* 时间线 / 通话质量的 key-value 行 */ #app .obs-tl-row{display:flex;align-items:baseline;gap:8px;padding:6px 0;font-size:13px; border-bottom:1px solid hsl(var(--border)/.35)} #app .obs-tl-row:last-child{border-bottom:none} #app .obs-tl-row > span:first-child{min-width:100px;color:hsl(var(--muted-foreground));font-size:12.5px} #app .obs-tl-row > b{font-weight:600;color:hsl(var(--foreground));font-variant-numeric:tabular-nums} #app .obs-tl-row .hint{font-size:11.5px;color:hsl(var(--muted-foreground))} /* 最近拨打 */ #app .obs-rc{display:flex;flex-direction:column;gap:2px} #app .obs-rc-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px; font-size:12.5px;background:hsl(var(--muted)/.3)} #app .obs-rc-row:hover{background:hsl(var(--muted)/.55)} #app .obs-rc-time{color:hsl(var(--muted-foreground));font-family:var(--mono);font-size:11.5px; flex:0 0 auto;min-width:52px} #app .obs-rc-num{flex:0 0 auto;font-weight:600;color:hsl(var(--foreground))} #app .obs-rc-nm{flex:1;min-width:0;color:hsl(var(--muted-foreground));font-size:12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .obs-rc-st{flex:0 0 auto;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700; color:hsl(var(--muted-foreground));background:hsl(var(--muted))} #app .obs-rc-st.t-ok{color:hsl(var(--success));background:hsl(var(--success)/.13)} #app .obs-rc-st.t-warn{color:hsl(var(--warning));background:hsl(var(--warning)/.13)} #app .obs-rc-st.t-crit{color:hsl(var(--destructive));background:hsl(var(--destructive)/.13)} #app .obs-rc-dur{flex:0 0 auto;color:hsl(var(--muted-foreground));font-family:var(--mono);font-size:11.5px} #app .obs-more{margin-top:10px;text-align:right} #app .obs-more a{color:hsl(var(--primary));font-size:12.5px;font-weight:600;text-decoration:none} #app .obs-more a:hover{text-decoration:underline} /* 统计表：稍紧凑，数字列右对齐；小 hint 灰字紧贴主数字下方 */ #app .ob-stat-tbl{width:100%;border-collapse:collapse} #app .ob-stat-tbl th{padding:10px 12px;font-size:11.5px;font-weight:600;text-align:left; letter-spacing:.04em;text-transform:uppercase;color:hsl(var(--muted-foreground)); border-bottom:1px solid hsl(var(--border)/.65);background:hsl(var(--muted)/.35)} #app .ob-stat-tbl th.num{text-align:right} #app .ob-stat-tbl td{padding:11px 12px;font-size:13px;vertical-align:top; border-bottom:1px solid hsl(var(--border)/.4)} #app .ob-stat-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600} #app .ob-stat-tbl td.num .hint{display:block;margin-top:2px;font-size:11px;font-weight:400; color:hsl(var(--muted-foreground))} #app .ob-stat-tbl tr:last-child td{border-bottom:none} #app .ob-stat-tbl tr:hover td{background:hsl(var(--muted)/.3)} /* ============================================================ 实时监控子页 v3（2026-08-28 竖版卡片） 只显示 running 任务；每张卡 portrait 布局；跟外呼任务页做出区别 ============================================================ */ /* 顶部窄条 */ #app .ob-mon-strip{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:14px; background:hsl(var(--card));border:1px solid hsl(var(--border)/.75);border-radius:12px; box-shadow:0 1px 2px hsl(222 47% 11%/.04)} #app .ob-mon-strip:empty{display:none} #app .obms-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto; background:hsl(var(--muted-foreground)/.4)} #app .obms-dot.live{background:hsl(var(--primary)); animation:objpulse 1.8s ease-in-out infinite} #app .ob-mon-strip b{font-size:13px;font-weight:700;letter-spacing:-.01em} #app .ob-mon-strip .hint{font-size:12px;color:hsl(var(--muted-foreground))} #app .ob-mon-strip .sp{flex:1} #app .ob-mon-strip a{color:hsl(var(--primary));font-weight:600;text-decoration:none} /* 空态 */ /* 外呼任务分组页签（2026-08-29 二稿）：分段控件——凹槽容器 + 选中浮起的卡片药丸， 每个页签带图标 + 彩色计数徽章（当前=蓝 / 未完成=琥珀 / 已完成=绿） */ #app .ob-jobtabs{display:inline-flex;gap:4px;padding:5px;margin:2px 0 14px; border-radius:13px;background:hsl(var(--muted)/.55); border:1px solid hsl(var(--border)/.55);box-shadow:inset 0 1px 3px hsl(222 47% 11%/.05)} #app .ob-jobtab{--jc:var(--primary);display:inline-flex;align-items:center;gap:7px; height:35px;padding:0 15px;border-radius:9px;font-size:13px;font-weight:650; color:hsl(var(--muted-foreground));cursor:pointer; transition:color var(--ac-ease),background var(--ac-ease),box-shadow var(--ac-ease)} #app .ob-jobtab.jt-todo{--jc:var(--warning)} #app .ob-jobtab.jt-done{--jc:var(--success)} #app .ob-jobtab svg{width:15px;height:15px;opacity:.75} #app .ob-jobtab b{font-size:11px;font-weight:750;line-height:1;padding:3px 7px;border-radius:999px; background:hsl(var(--jc)/.12);color:hsl(var(--jc));font-variant-numeric:tabular-nums} #app .ob-jobtab:hover{color:hsl(var(--foreground))} #app .ob-jobtab.on{background:hsl(var(--card));color:hsl(var(--foreground)); box-shadow:0 1px 3px hsl(222 47% 11%/.12),0 3px 8px hsl(222 47% 11%/.07),var(--ac-sheen)} #app .ob-jobtab.on svg{opacity:1;color:hsl(var(--jc))} #app .ob-jobtab.on b{background:hsl(var(--jc)/.16)} /* ================= AI 接听三分页（2026-08-29，结构照外呼） ================= */ /* ① 接听线路卡：状态色左条 + 开关 + 人设下拉 + 今日小计 */ #app .ib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px;margin-bottom:18px} #app .ibl{position:relative;background:hsl(var(--card));border:1px solid hsl(var(--border)/.75); border-radius:14px;padding:15px 17px 12px 20px;box-shadow:var(--shadow-xs)} #app .ibl::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px; border-radius:0 3px 3px 0;background:hsl(var(--muted-foreground)/.35)} #app .ibl.t-on::before{background:hsl(var(--success))} #app .ibl.t-live::before{background:hsl(var(--primary))} #app .ibl.t-ring::before{background:hsl(var(--warning))} #app .ibl.t-err::before{background:hsl(var(--destructive))} #app .ibl-hd{display:flex;align-items:center;gap:9px} #app .ibl-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto; background:hsl(var(--muted-foreground)/.4)} #app .ibl.t-on .ibl-dot{background:hsl(var(--success));animation:objpulse 1.8s ease-in-out infinite} #app .ibl.t-live .ibl-dot{background:hsl(var(--primary));animation:objpulse 1.2s ease-in-out infinite} #app .ibl.t-ring .ibl-dot{background:hsl(var(--warning));animation:objpulse .8s ease-in-out infinite} #app .ibl.t-err .ibl-dot{background:hsl(var(--destructive))} #app .ibl-nm{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.015em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .ibl-ext{flex:0 0 auto;font-size:12px;color:hsl(var(--muted-foreground)); background:hsl(var(--muted)/.55);padding:2px 8px;border-radius:6px} #app .ibl-sw{flex:0 0 auto} #app .ibl-st{display:flex;align-items:baseline;gap:8px;margin-top:9px; font-size:12.5px;font-weight:700} #app .ibl.t-on .ibl-st{color:hsl(var(--success))} #app .ibl.t-live .ibl-st{color:hsl(var(--primary))} #app .ibl.t-ring .ibl-st{color:hsl(var(--warning))} #app .ibl.t-err .ibl-st{color:hsl(var(--destructive))} #app .ibl.t-off .ibl-st{color:hsl(var(--muted-foreground))} #app .ibl-st span{flex:1;min-width:0;font-weight:400;font-size:12px; color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .ibl-persona{display:flex;align-items:center;gap:8px;margin-top:11px} #app .ibl-persona > span{flex:0 0 auto;font-size:12px;color:hsl(var(--muted-foreground))} #app .ibl-persona select{flex:1;min-width:0;height:31px;padding:0 9px;font-size:12.5px; border:1px solid hsl(var(--input));border-radius:8px;background:hsl(var(--card)); color:hsl(var(--foreground))} #app .ibl-persona.bad select{border-color:hsl(var(--destructive)/.6)} #app .ibl-pn-warn{font-style:normal;flex:0 0 auto} #app .ibl-groups{display:flex;align-items:baseline;gap:8px;margin-top:8px;font-size:12px; color:hsl(var(--muted-foreground))} #app .ibl-groups b{font-weight:650;color:hsl(var(--foreground));min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .ibl-ftbtns{display:flex;gap:6px;flex:0 0 auto} #app .ibl-today{display:flex;gap:15px;margin-top:12px;font-size:11px; color:hsl(var(--muted-foreground))} #app .ibl-today b{font-size:15px;font-weight:750;margin-right:3px;color:hsl(var(--foreground)); font-variant-numeric:tabular-nums} #app .ibl-today .ok b{color:hsl(var(--success))} #app .ibl-today .warn b{color:hsl(var(--warning))} #app .ibl-ft{display:flex;align-items:center;justify-content:space-between;gap:8px; margin-top:11px;padding-top:9px;border-top:1px solid hsl(var(--border)/.5)} #app .ib-badhint{color:hsl(var(--warning));font-size:12px;font-weight:650} /* ② 统计：按线路分行 + 时段分布 */ #app .ibs-row{display:flex;align-items:center;gap:14px;padding:10px 2px; border-bottom:1px solid hsl(var(--border)/.4)} #app .ibs-row:last-child{border-bottom:none} #app .ibs-nm{flex:0 0 210px;min-width:0;display:flex;align-items:center;gap:8px} #app .ibs-nm b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:13px;font-weight:650} #app .ibs-nm .mono{font-size:11px;color:hsl(var(--muted-foreground))} #app .ibs-off{font-style:normal;font-size:10.5px;color:hsl(var(--muted-foreground)); border:1px solid hsl(var(--border));padding:1px 6px;border-radius:5px;flex:0 0 auto} #app .ibs-bar{flex:1;height:8px;border-radius:999px;background:hsl(var(--muted));overflow:hidden} #app .ibs-bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,hsl(var(--primary)/.72),hsl(var(--primary)))} #app .ibs-n{flex:0 0 82px;font-size:11.5px;color:hsl(var(--muted-foreground));text-align:right; white-space:nowrap} #app .ibs-n b{font-size:14px;font-weight:750;margin-right:3px;color:hsl(var(--foreground)); font-variant-numeric:tabular-nums} #app .ibs-n.ok b{color:hsl(var(--success))} #app .ibs-n.warn b{color:hsl(var(--warning))} #app .ibh{display:flex;align-items:flex-end;gap:4px;height:110px;padding:4px 2px 0} #app .ibh-col{flex:1;height:100%;display:flex;flex-direction:column;align-items:center; justify-content:flex-end;gap:4px;min-width:0} #app .ibh-col i{width:100%;min-height:2px;border-radius:4px 4px 0 0; background:linear-gradient(180deg,hsl(var(--primary)),hsl(var(--primary)/.55))} #app .ibh-col span{font-size:10px;color:hsl(var(--muted-foreground));height:12px;line-height:12px} /* ③ 监控卡补充（主体复用外呼的 .obc 系列） */ #app .ibm .ibm-ext{margin-top:2px;font-size:11.5px;color:hsl(var(--muted-foreground))} #app .obc-rc-hd{margin:10px 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.05em; color:hsl(var(--muted-foreground))} /* 统计详情明细里的「客户状态」小标 */ #app .ibs-note{font-style:normal;margin-left:6px;font-size:10.5px;color:#b45309; background:hsl(38 92% 50%/.13);border-radius:5px;padding:1px 6px;white-space:nowrap} #app .ibs-row > .btn.sm{flex:0 0 auto} #app .ob-mon-empty{padding:60px 20px;text-align:center;background:hsl(var(--card)); border:1px dashed hsl(var(--border));border-radius:14px} #app .ob-mon-empty .ic{width:64px;height:64px;margin:0 auto 14px;color:hsl(var(--muted-foreground)/.6)} #app .ob-mon-empty .ic svg{width:100%;height:100%} #app .ob-mon-empty b{display:block;font-size:15px;font-weight:700;margin-bottom:4px} #app .ob-mon-empty p{color:hsl(var(--muted-foreground));font-size:13px;margin:0} #app .ob-mon-empty a{color:hsl(var(--primary));font-weight:600;text-decoration:none} /* 网格：竖版卡片自适应排列 —— 想放几张就放几张，一行不够就换行 */ #app .ob-mon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px} /* 单张竖版卡（portrait，比宽多一点高） */ #app .obc{background:hsl(var(--card));border:1px solid hsl(var(--border)/.75);border-radius:16px; padding:0 16px 14px;position:relative;overflow:hidden; box-shadow:0 2px 10px hsl(222 47% 11%/.06),var(--ac-sheen); display:flex;flex-direction:column;gap:12px} /* 顶部色带（拨号中=主色，通话中=脉冲主色，等待=灰） */ #app .obc-band{height:4px;margin:0 -16px 6px;background:hsl(var(--muted-foreground)/.25)} #app .obc-band.dialing{background:hsl(var(--primary))} #app .obc-band.live{background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--primary)/.6),hsl(var(--primary))); background-size:200% 100%;animation:obc-flow 2s linear infinite} @keyframes obc-flow{from{background-position:200% 0}to{background-position:0 0}} #app .obc-band.wait{background:hsl(var(--warning)/.6)} /* 卡头 */ #app .obc-hd{display:flex;align-items:center;gap:10px;padding-top:6px} #app .obc-nm{flex:1;min-width:0;font-size:15px;font-weight:700;letter-spacing:-.018em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .obc-tag{flex:0 0 auto;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700; letter-spacing:.02em} #app .obc-tag.live{background:hsl(var(--primary)/.13);color:hsl(var(--primary)); border:1px solid hsl(var(--primary)/.35)} #app .obc-tag.dialing{background:hsl(var(--primary)/.11);color:hsl(var(--primary)); border:1px solid hsl(var(--primary)/.3)} #app .obc-tag.wait{background:hsl(var(--warning)/.14);color:hsl(var(--warning)); border:1px solid hsl(var(--warning)/.35)} /* 两枚圆环（进度 + 转人工率） */ #app .obc-rings{display:flex;justify-content:space-around;align-items:center;gap:14px; padding:6px 0 2px} #app .obc-ring{position:relative;width:96px;height:96px;flex:0 0 auto} #app .obc-ring svg{width:100%;height:100%;transform:rotate(0deg)} #app .obc-ring-bg{fill:none;stroke:hsl(var(--muted));stroke-width:6} #app .obc-ring-fg{fill:none;stroke:hsl(var(--primary));stroke-width:6;stroke-linecap:round; transition:stroke-dasharray .4s cubic-bezier(.4,0,.2,1)} #app .obc-ring:nth-child(2) .obc-ring-fg{stroke:hsl(var(--success))} #app .obc-ring-tx{position:absolute;inset:0;display:flex;flex-direction:column; justify-content:center;align-items:center;text-align:center} #app .obc-ring-tx b{font-size:19px;font-weight:750;letter-spacing:-.02em; color:hsl(var(--foreground));font-variant-numeric:tabular-nums;line-height:1} #app .obc-ring-tx span{font-size:10.5px;color:hsl(var(--muted-foreground));margin-top:3px; letter-spacing:.06em;text-transform:uppercase} /* 当前号码块 */ #app .obc-cur{padding:10px 12px;border-radius:10px; background:hsl(var(--muted)/.4);border:1px solid transparent} #app .obc-cur.live{background:hsl(var(--primary)/.08);border-color:hsl(var(--primary)/.28)} #app .obc-cur.dialing{background:hsl(var(--primary)/.06);border-color:hsl(var(--primary)/.2)} #app .obc-cur.wait{background:hsl(var(--warning)/.07);border-color:hsl(var(--warning)/.24)} #app .obc-cur-lb{font-size:11px;font-weight:700;color:hsl(var(--muted-foreground)); letter-spacing:.04em;margin-bottom:4px} #app .obc-cur.live .obc-cur-lb,#app .obc-cur.dialing .obc-cur-lb{color:hsl(var(--primary))} #app .obc-cur-num{font-family:var(--mono);font-size:16px;font-weight:700; color:hsl(var(--foreground));letter-spacing:-.01em} #app .obc-cur-nm{font-size:12px;color:hsl(var(--muted-foreground));margin-top:2px} #app .obc-cur-idle{font-size:12px;color:hsl(var(--muted-foreground));font-style:italic} /* 字幕挂载槽（obCall + obTranscript 会移到这里，样式沿用原有的 .call-feed） */ #app .obc-transcript{min-height:0} #app .obc-transcript:empty{display:none} #app .obc-transcript .feed.call-feed{max-height:180px;margin:0; border:1px solid hsl(var(--border)/.5);border-radius:8px;padding:8px 10px; background:hsl(var(--muted)/.3)} #app .obc-transcript .feed.call-feed.hidden{display:none} /* 4 格实时计数 */ #app .obc-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} #app .obc-n{padding:8px 4px;text-align:center;border-radius:8px;background:hsl(var(--muted)/.35)} #app .obc-n b{display:block;font-size:16px;font-weight:750;letter-spacing:-.02em; color:hsl(var(--foreground));font-variant-numeric:tabular-nums;line-height:1.15} #app .obc-n span{display:block;margin-top:2px;font-size:10.5px;color:hsl(var(--muted-foreground))} #app .obc-n.ok b{color:hsl(var(--success))} #app .obc-n.warn b{color:hsl(var(--warning))} /* 最近 3 通（超紧凑） */ #app .obc-recent-hd{font-size:10.5px;font-weight:700;letter-spacing:.06em; color:hsl(var(--muted-foreground));text-transform:uppercase;margin-bottom:6px} #app .obc-recent-empty{font-size:12px;color:hsl(var(--muted-foreground));text-align:center;padding:8px} #app .obc-rc-row{display:flex;align-items:center;gap:8px;padding:5px 8px;margin-bottom:3px; border-radius:6px;font-size:11.5px;background:hsl(var(--muted)/.25)} #app .obc-rc-row:last-child{margin-bottom:0} #app .obc-rc-time{color:hsl(var(--muted-foreground));font-family:var(--mono);flex:0 0 auto;min-width:44px;font-size:10.5px} #app .obc-rc-num{flex:1;min-width:0;font-weight:600;color:hsl(var(--foreground)); font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .obc-rc-st{flex:0 0 auto;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:700; color:hsl(var(--muted-foreground));background:hsl(var(--muted))} #app .obc-rc-st.t-ok{color:hsl(var(--success));background:hsl(var(--success)/.13)} #app .obc-rc-st.t-warn{color:hsl(var(--warning));background:hsl(var(--warning)/.13)} #app .obc-rc-st.t-crit{color:hsl(var(--destructive));background:hsl(var(--destructive)/.13)} /* 卡片底部操作 */ #app .obc-ft{display:flex;gap:8px;margin-top:auto;padding-top:8px;border-top:1px dashed hsl(var(--border)/.55)} #app .obc-ft .btn.sm{height:28px;padding:0 12px;font-size:12px;flex:1} /* 监控子页：拨号线路面板小标签 */ #app .obl-live-hd{margin-top:10px;padding-top:10px;font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:hsl(var(--muted-foreground)); border-top:1px dashed hsl(var(--border)/.65)} #app .obl-idle{margin-top:10px;padding-top:10px;font-size:12.5px;color:hsl(var(--muted-foreground)); border-top:1px dashed hsl(var(--border)/.65)} /* 手动试拨子页：字段挨得开一些（原来挤在侧栏，现在给足空间） */ #app .ob-dial-body{max-width:520px} #app .ob-dial-body .dl-f{margin-bottom:12px} #app .ob-dial-body .btn-row{margin-top:16px} #app .ob-kpi{padding:14px 16px;border-radius:14px;background:hsl(var(--card)); border:1px solid hsl(var(--border)/.75);box-shadow:0 1px 2px hsl(222 47% 11%/.04),var(--ac-sheen)} #app .ob-kpi b{display:block;font-size:25px;font-weight:750;letter-spacing:-.03em;line-height:1.15; font-variant-numeric:tabular-nums} #app .ob-kpi span{display:block;margin-top:2px;font-size:12px;color:hsl(var(--muted-foreground))} #app .ob-kpi i{display:block;margin-top:5px;font-style:normal;font-size:11px; color:hsl(var(--muted-foreground)/.8)} #app .ob-kpi.muted b{color:hsl(var(--muted-foreground))} #app .ob-kpi.ok b{color:hsl(var(--success))} #app .ob-kpi.live{border-color:hsl(var(--primary)/.4);background:hsl(var(--primary)/.05)} #app .ob-kpi.live b{color:hsl(var(--primary))} #app .ob-kpi.bad{border-color:hsl(var(--destructive)/.35);background:hsl(var(--destructive)/.05)} #app .ob-kpi.bad b{color:hsl(var(--destructive))} /* ③ 状态颜色编码 —— 一条竖色带 + 圆点 + 徽章，三处同色，扫一眼就知道 */ #app .obj{position:relative;padding-left:19px} #app .obj::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px; border-radius:0 3px 3px 0;background:hsl(var(--muted-foreground)/.35)} #app .obj.t-run::before{background:hsl(var(--primary))} #app .obj.t-pause::before{background:hsl(var(--warning))} #app .obj.t-done::before{background:hsl(var(--success))} #app .obj-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto; background:hsl(var(--muted-foreground)/.45)} #app .obj.t-run .obj-dot{background:hsl(var(--primary));animation:objpulse 1.8s ease-in-out infinite} #app .obj.t-pause .obj-dot{background:hsl(var(--warning))} #app .obj.t-done .obj-dot{background:hsl(var(--success))} @keyframes objpulse{0%,100%{box-shadow:0 0 0 0 hsl(var(--primary)/.45)} 50%{box-shadow:0 0 0 5px hsl(var(--primary)/0)}} #app .obj-badge{flex:0 0 auto;height:21px;padding:0 9px;border-radius:999px;display:inline-flex; align-items:center;font-size:11px;font-weight:700;letter-spacing:.02em; color:hsl(var(--muted-foreground));background:hsl(var(--muted));border:1px solid hsl(var(--border)/.7)} #app .obj.t-run .obj-badge{color:hsl(var(--primary));background:hsl(var(--primary)/.11); border-color:hsl(var(--primary)/.3)} #app .obj.t-pause .obj-badge{color:hsl(var(--warning));background:hsl(var(--warning)/.13); border-color:hsl(var(--warning)/.3)} #app .obj.t-done .obj-badge{color:hsl(var(--success));background:hsl(var(--success)/.12); border-color:hsl(var(--success)/.3)} /* ② 任务配置三要素：人设 / 线路 / 拨号间隔 —— 小号徽章并入标题行。 🔴 2026-08-29 三稿降噪（user："好晃眼"）：双列高密度下每卡三个彩色徽章太吵， 底色统一中性灰、文字用正文色，**只有小图标保留身份色**——扫得出是什么，但不抢戏。 */ #app .objf-row{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap; margin-left:2px} #app .objf{--fc:221 83% 53%;display:inline-flex;align-items:center;gap:5px;min-width:0; height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:550; color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.55)} #app .objf svg{width:12px;height:12px;flex:0 0 auto;color:hsl(var(--fc));opacity:.85} #app .objf.f-persona,#app .objf.f-line{max-width:150px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;display:inline-block;line-height:22px} #app .objf.f-persona svg,#app .objf.f-line svg{vertical-align:-2px;margin-right:5px} #app .objf.f-persona{--fc:262 66% 52%} #app .objf.f-line{--fc:188 72% 33%} #app .objf.f-gap{--fc:30 88% 40%} :root[data-theme="dark"] #app .objf.f-persona{--fc:262 78% 70%} :root[data-theme="dark"] #app .objf.f-line{--fc:188 62% 56%} :root[data-theme="dark"] #app .objf.f-gap{--fc:36 90% 60%} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #app .objf.f-persona{--fc:262 78% 70%} :root:not([data-theme="light"]) #app .objf.f-line{--fc:188 62% 56%} :root:not([data-theme="light"]) #app .objf.f-gap{--fc:36 90% 60%} } #app .obj-prog{display:flex;align-items:center;gap:11px;margin:10px 0 8px} #app .obj-prog .obj-bar{flex:1;margin:0;height:7px} #app .obj-pct{flex:0 0 auto;font-size:13px;font-weight:750;color:hsl(var(--primary)); font-variant-numeric:tabular-nums;min-width:36px;text-align:right} #app .obj.t-done .obj-pct{color:hsl(var(--success))} /* 数字行降噪：只给「已转人工」(绿)「未接」(琥珀) 留色，其余中性（蓝色让给进度条）*/ #app .obj-nums .rest b{color:hsl(var(--foreground))} #app .obj-nums .rate{margin-left:auto} #app .obj-nums .rate b{color:hsl(var(--foreground))} /* ④ 主操作弱化、悬停提亮。 ⚠️ CloudTalk 是 hover 才浮出（opacity:0），但那是**紧凑列表**的做法； 我们是大卡片，而且 user 的原话是"操作简单、看着很直接" —— 按钮完全看不见 正好是"不直接"。所以只弱化到 60%，不藏。借来的约定不能盖过用户的明确要求。 */ #app .obj-act{display:flex;gap:7px;opacity:.6;transition:opacity var(--ac-ease)} #app .obj:hover .obj-act,#app .obj:focus-within .obj-act{opacity:1} #app .obj-ft{min-height:29px} /* ---- 导入向导 + 任务详情（2026-08-23 做完）---- */ .wiz{display:flex;gap:8px;list-style:none;margin:0 0 16px;padding:0} #app .wiz li{display:flex;align-items:center;gap:9px;flex:1;padding:11px 15px;border-radius:12px; font-size:13px;font-weight:600;color:hsl(var(--muted-foreground)); background:hsl(var(--card));border:1px solid hsl(var(--border)/.7); transition:background var(--ac-ease),border-color var(--ac-ease),color var(--ac-ease)} #app .wiz li b{width:22px;height:22px;border-radius:8px;display:grid;place-items:center; font-size:11.5px;font-weight:700;color:hsl(var(--muted-foreground));background:hsl(var(--muted))} #app .wiz li.on{color:hsl(var(--foreground));border-color:hsl(var(--primary)/.45); background:hsl(var(--primary)/.06)} #app .wiz li.on b{color:hsl(var(--primary-foreground)); background:linear-gradient(180deg,hsl(var(--primary)/.94),hsl(var(--primary))); box-shadow:0 1px 3px hsl(var(--primary)/.35)} #app .wiz li.done b{color:#fff;background:hsl(var(--success))} #app .wiz li.done b::before{content:"✓"} #app .wiz li.done b{font-size:12px} #app .wiz li.done b{color:#fff} @media (max-width:760px){.wiz{flex-direction:column}} #app .ob-file{display:flex;align-items:center;gap:12px;margin-top:16px;padding:13px 15px; border-radius:12px;background:hsl(var(--muted)/.5);border:1px solid hsl(var(--border)/.6)} #app .ob-file-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; color:hsl(var(--primary));background:hsl(var(--primary)/.11)} #app .ob-file-ic svg{width:16px;height:16px} #app .ob-file b{display:block;font-size:13.5px;font-weight:650} #app .ob-file span{display:block;margin-top:1px;font-size:12px;color:hsl(var(--muted-foreground))} #app .ob-file .btn{margin-left:auto} #app .ob-cnt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px} @media (max-width:760px){#app .ob-cnt{grid-template-columns:repeat(2,minmax(0,1fr))}} #app .ob-cnt-t{padding:11px 13px;border-radius:11px;background:hsl(var(--card)); border:1px solid hsl(var(--border)/.7)} #app .ob-cnt-t b{display:block;font-size:21px;font-weight:750;letter-spacing:-.03em; font-variant-numeric:tabular-nums;line-height:1.2} #app .ob-cnt-t span{display:block;margin-top:2px;font-size:11.5px;color:hsl(var(--muted-foreground))} #app .ob-cnt-t.ok{border-color:hsl(var(--success)/.35);background:hsl(var(--success)/.06)} #app .ob-cnt-t.ok b{color:hsl(var(--success))} #app .ob-cnt-t.warn b{color:hsl(var(--warning));cursor:help} #app .ob-cnt-t.bad{border-color:hsl(var(--destructive)/.35)} #app .ob-cnt-t.bad b{color:hsl(var(--destructive))} #app .ob-cnt-t.muted b{color:hsl(var(--muted-foreground))} #app .ob-cnt-t.pri{border-color:hsl(var(--primary)/.35);background:hsl(var(--primary)/.06)} #app .ob-cnt-t.pri b{color:hsl(var(--primary))} /* 号码归属地区：可搜索输入 + 下拉列表 */ #app .ob-region{margin-top:16px} #app .ob-region-lb{font-size:12.5px;font-weight:600;color:hsl(var(--foreground));margin-bottom:8px} #app .ob-region-lb span{display:block;margin-top:3px;font-size:11.5px;font-weight:400; color:hsl(var(--muted-foreground));line-height:1.55} #app .rgn{position:relative;max-width:440px} #app .ob-nmc{display:block;width:100%;height:44px;padding:0 14px;font:inherit;font-size:14px; border:1px solid hsl(var(--border));border-radius:var(--radius-sm);background:hsl(var(--card)); color:hsl(var(--foreground));cursor:pointer} #app .ob-nmc:focus{outline:none;border-color:hsl(var(--primary)/.55);box-shadow:0 0 0 3px hsl(var(--primary)/.12)} #app .rgn-cur{display:flex;align-items:center;gap:9px;width:100%;height:44px;padding:0 14px; border:1px solid hsl(var(--border));border-radius:var(--radius-sm);background:hsl(var(--card)); font:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s} #app .rgn-cur:hover{background:hsl(var(--accent)/.7)} #app .rgn-flag{font-size:17px;line-height:1;flex:0 0 auto} #app .rgn-nm{font-size:14px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #app .rgn-cur .rgn-cc{margin-left:auto} #app .rgn-cc{font-family:var(--mono);font-size:12.5px;color:hsl(var(--muted-foreground));flex:0 0 auto} #app .rgn-caret{margin-left:9px;font-size:10px;color:hsl(var(--muted-foreground));flex:0 0 auto} /* 🔴 用 position:fixed —— 外层 .ac-panel 有 overflow:hidden 会把 absolute 弹层截掉， 改成 fixed 就脱离所有祖先的裁剪。位置和最大高度由 JS 按触发按钮的 viewport 坐标算， 不够地方就翻上开。用 flex column 让列表随弹层最大高度伸缩，不会撑出屏幕。 */ #app .rgn-pop{position:fixed;z-index:2000;display:flex;flex-direction:column; background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);padding:8px;overflow:hidden} #app .rgn-pop.hidden{display:none} #app .rgn-q{width:100%;height:38px;padding:0 12px;border:1px solid hsl(var(--border)); border-radius:var(--radius-sm);background:hsl(var(--muted)/.4);font:inherit;font-size:13px;margin-bottom:6px} #app .rgn-q:focus{outline:none;border-color:hsl(var(--primary)/.55); box-shadow:0 0 0 3px hsl(var(--primary)/.11)} /* 列表用 flex 自适应弹层高度：弹层 max-height 由 JS 按视口空间设，列表 min-height:0 才会缩 */ #app .rgn-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px} #app .rgn-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none; background:transparent;border-radius:8px;font:inherit;text-align:left;cursor:pointer; transition:background .12s} #app .rgn-item:hover{background:hsl(var(--accent))} #app .rgn-item.on{background:hsl(var(--primary)/.11)} #app .rgn-item.on .rgn-nm{color:hsl(var(--primary))} #app .rgn-item.on .rgn-cc{color:hsl(var(--primary))} #app .rgn-item .rgn-cc{margin-left:auto} #app .rgn-none{padding:16px;text-align:center;color:hsl(var(--muted-foreground));font-size:13px} /* 号码前缀与各自拨打次数（2026-10-07，替掉原来的「号码归属地区」+「没接通重拨」） 5 行：+1…+5 各一个 0–9 的次数输入；0 = 这个前缀不拨。选择器不带 #app 前缀， 因为编辑任务弹窗由 modal() 挂在 #app 外面，一样要套上。 */ .ob-pfx{margin-top:16px} .ob-pfx-lb{font-size:12.5px;font-weight:600;color:hsl(var(--foreground));margin-bottom:8px} .ob-pfx-lb span{display:block;margin-top:3px;font-size:11.5px;font-weight:400; color:hsl(var(--muted-foreground));line-height:1.55} .ob-pfx-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:8px;max-width:760px} .ob-pfx-row{display:flex;align-items:center;gap:7px;padding:9px 11px;cursor:pointer; border:1px solid hsl(var(--border));border-radius:10px;background:hsl(var(--card)); transition:border-color .15s,background .15s,box-shadow .15s} .ob-pfx-row:hover{background:hsl(var(--accent)/.6)} .ob-pfx-row.on{border-color:hsl(var(--primary)/.4);background:hsl(var(--primary)/.05)} .ob-pfx-row b{font-family:var(--mono);font-size:13.5px;font-weight:650;color:hsl(var(--muted-foreground)); min-width:26px} .ob-pfx-row.on b{color:hsl(var(--primary))} /* −/+ 步进按钮（2026-10-07 user）：0 时减号禁用、9 时加号禁用；在 label 里点击要 preventDefault（JS 已拦） */ .ob-pfx-btn{flex:0 0 auto;width:26px;height:26px;padding:0;border-radius:8px; border:1px solid hsl(var(--border));background:hsl(var(--muted)/.45);color:hsl(var(--foreground)); font-size:15px;line-height:1;font-family:var(--mono);cursor:pointer;user-select:none; display:inline-flex;align-items:center;justify-content:center; transition:background .12s,border-color .12s,transform .08s} .ob-pfx-btn:hover{background:hsl(var(--accent));border-color:hsl(var(--primary)/.45)} .ob-pfx-btn:active{transform:scale(.9)} .ob-pfx-btn:disabled{opacity:.32;cursor:not-allowed;transform:none} .ob-pfx-btn:focus-visible{outline:none;box-shadow:0 0 0 3px hsl(var(--primary)/.2)} .ob-pfx-row input{width:44px;height:30px;padding:0 4px;text-align:center;font:inherit;font-size:14px; font-weight:650;border:1px solid hsl(var(--border));border-radius:7px;background:hsl(var(--muted)/.4); color:hsl(var(--foreground));font-family:var(--mono)} .ob-pfx-row input:focus{outline:none;border-color:hsl(var(--primary)/.55); box-shadow:0 0 0 3px hsl(var(--primary)/.12)} .ob-pfx-row i{font-style:normal;font-size:12px;color:hsl(var(--muted-foreground))} .ob-pfx-off{margin-left:auto;font-size:11.5px;font-weight:600;color:hsl(var(--muted-foreground))} .ob-pfx-row:not(.on){opacity:.72} .ob-pfx-row:not(.on) .ob-pfx-off{color:hsl(var(--destructive)/.85)} /* 编辑弹窗里的那组（挂在 .fld 下，label 在上、行在下） */ .fld.ob-pfx>label span{display:block;margin-top:4px;font-size:11.5px;font-weight:400; color:hsl(var(--muted-foreground));line-height:1.55} .fld.ob-pfx .ob-pfx-rows{margin-top:8px} .fld.ob-pfx .hint{margin-top:8px} /* 格式帮助折叠面板：可展开看示例，默认收起不占地方 */ #app .ob-fmt-help{margin-top:12px;border:1px solid hsl(var(--border)/.6);border-radius:10px; background:hsl(var(--muted)/.35);overflow:hidden} #app .ob-fmt-help summary{padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer; color:hsl(var(--foreground));list-style:none;position:relative;user-select:none} #app .ob-fmt-help summary::marker,#app .ob-fmt-help summary::-webkit-details-marker{display:none} #app .ob-fmt-help summary::after{content:"▾";float:right;color:hsl(var(--muted-foreground)); font-size:11px;transition:transform .18s} #app .ob-fmt-help[open] summary::after{transform:rotate(180deg)} #app .ob-fmt-help summary:hover{background:hsl(var(--muted)/.55)} #app .ob-fmt-body{padding:6px 16px 14px;border-top:1px solid hsl(var(--border)/.5); background:hsl(var(--card))} #app .ob-fmt-body p{margin:10px 0;font-size:12.5px;line-height:1.65;color:hsl(var(--muted-foreground))} #app .ob-fmt-body p b{color:hsl(var(--foreground));font-weight:600} #app .ob-fmt-body code{padding:1px 5px;font-size:11.5px;background:hsl(var(--muted)); border-radius:4px;color:hsl(var(--foreground))} #app .ob-fmt-eg-hd{margin-top:14px !important;font-size:12px !important;color:hsl(var(--foreground)) !important;font-weight:600} #app .ob-fmt-eg{margin:6px 0 0;padding:10px 12px;background:hsl(var(--muted)/.6); border:1px solid hsl(var(--border)/.55);border-radius:7px; font-family:var(--mono);font-size:12px;line-height:1.65; white-space:pre;overflow-x:auto;color:hsl(var(--foreground))} /* 客户档案：勾选哪些列作为对方资料带进通话 */ #app .ob-extras{margin-top:18px;padding-top:16px;border-top:1px solid hsl(var(--border)/.5)} #app .ob-extras-lb{font-size:13px;font-weight:600;margin-bottom:6px} #app .ob-extras-lb span{display:block;margin-top:3px;font-size:12px;font-weight:400; color:hsl(var(--muted-foreground));line-height:1.55} #app .ob-extras-list{display:flex;flex-direction:column;gap:6px;margin:10px 0 8px} #app .ob-ext-row{display:flex;align-items:center;gap:8px;padding:8px 10px; border:1px solid hsl(var(--border)/.6);border-radius:9px;background:hsl(var(--muted)/.3); cursor:pointer;transition:background .12s,border-color .12s} #app .ob-ext-row:hover{background:hsl(var(--muted)/.55)} #app .ob-ext-row.on{border-color:hsl(var(--primary)/.4);background:hsl(var(--primary)/.05)} #app .ob-ext-row > input[type="checkbox"]{flex:0 0 auto;margin:0} #app .ob-ext-orig{flex:0 0 auto;min-width:70px;font-size:13px;font-weight:600; color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px} #app .ob-ext-arrow{flex:0 0 auto;color:hsl(var(--muted-foreground));font-size:12px} #app .ob-ext-lb{flex:1;min-width:100px;height:30px;padding:0 10px;font-size:12.5px; border:1px solid hsl(var(--border));border-radius:7px;background:hsl(var(--card));font:inherit} #app .ob-ext-lb:focus{outline:none;border-color:hsl(var(--primary)/.55); box-shadow:0 0 0 3px hsl(var(--primary)/.1)} #app .ob-ext-sens{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px; font-size:12px;color:hsl(var(--muted-foreground));cursor:pointer; padding:4px 8px;border-radius:6px;transition:background .12s} #app .ob-ext-sens:hover{background:hsl(var(--muted))} #app .ob-ext-sens input{margin:0} #app .ob-extras-foot{display:flex;align-items:center;gap:14px;margin-top:8px} #app .ob-extras-foot .hint{flex:1;font-size:12px;color:hsl(var(--muted-foreground))} #app .ob-extras-all{display:flex;gap:8px;flex:0 0 auto} #app .ob-extras-all .btn{height:26px;font-size:11.5px;padding:0 10px} /* 档案预览："拨到某人时 AI 会看到这段" */ #app .ob-extras-preview:empty{display:none} #app .ob-extras-pv{margin-top:14px;padding:12px 14px; background:hsl(var(--primary)/.05);border:1px dashed hsl(var(--primary)/.3);border-radius:10px} #app .ob-extras-pv-hd{font-size:12px;color:hsl(var(--muted-foreground));margin-bottom:8px} #app .ob-extras-pv-hd .mono{color:hsl(var(--foreground));font-family:var(--mono)} #app .ob-extras-more{margin-left:8px;font-size:11px;padding:1px 7px;border-radius:999px; background:hsl(var(--muted));color:hsl(var(--muted-foreground))} #app .ob-extras-pv-body{margin:0;padding:10px 12px;background:hsl(var(--card)); border:1px solid hsl(var(--border)/.7);border-radius:7px; font:inherit;font-size:12.5px;line-height:1.75;white-space:pre-wrap; color:hsl(var(--foreground));max-height:200px;overflow:auto} /* "原号码 → 拨号号码"示例 */ #app .ob-conv{margin-top:14px} #app .ob-conv:empty{display:none} #app .ob-conv-t{font-size:12px;color:hsl(var(--muted-foreground));margin-bottom:8px} #app .ob-conv-row{display:flex;align-items:center;gap:11px;padding:8px 13px; border:1px solid hsl(var(--border)/.6);border-radius:10px;background:hsl(var(--card)); margin-bottom:6px;font-family:var(--mono);font-size:13px} #app .ob-conv-from{color:hsl(var(--muted-foreground))} #app .ob-conv-arrow{color:hsl(var(--muted-foreground)/.55)} #app .ob-conv-to{font-weight:650;letter-spacing:.01em} #app .ob-conv-tag{margin-left:auto;font-family:inherit;font-size:11px;font-weight:600; padding:2px 10px;border-radius:999px;background:hsl(var(--muted));color:hsl(var(--muted-foreground))} #app .ob-conv-tag.add{background:hsl(var(--primary)/.12);color:hsl(var(--primary))} /* 选中的列在预览里高亮 —— 光看下拉文字不容易确认"是不是这一列" */ #app .ob-preview .col-num{background:hsl(var(--primary)/.09)} #app .ob-preview th.col-num{background:hsl(var(--primary)/.16);color:hsl(var(--primary))} #app .ob-preview .col-name{background:hsl(var(--tone-teal)/.09)} #app .ob-preview th.col-name{background:hsl(var(--tone-teal)/.16);color:hsl(var(--tone-teal))} /* 面包屑 */ /* 任务详情的返回钮：明显的描边圆钮，悬停变主色 + 箭头左移 （user 2026-08-29：原面包屑「外呼任务 / 任务名」太不显眼，点不出来是个按钮） */ #app .ob-back{width:37px;height:37px;border-radius:11px;flex:0 0 auto;margin-right:2px; display:grid;place-items:center;cursor:pointer; color:hsl(var(--foreground));background:hsl(var(--card)); border:1px solid hsl(var(--border));box-shadow:var(--shadow-xs); transition:border-color .15s,color .15s,box-shadow .15s} #app .ob-back:hover{border-color:hsl(var(--primary)/.55);color:hsl(var(--primary)); box-shadow:var(--shadow-sm)} #app .ob-back svg{width:19px;height:19px;transition:transform .15s} #app .ob-back:hover svg{transform:translateX(-2px)} #app .ob-dt-hd{display:flex;align-items:center;gap:11px} #app .ob-dt-badge.t-run .obj-badge{color:hsl(var(--primary));background:hsl(var(--primary)/.11); border-color:hsl(var(--primary)/.3)} #app .ob-dt-badge.t-pause .obj-badge{color:hsl(var(--warning));background:hsl(var(--warning)/.13); border-color:hsl(var(--warning)/.3)} #app .ob-dt-badge.t-done .obj-badge{color:hsl(var(--success));background:hsl(var(--success)/.12); border-color:hsl(var(--success)/.3)} /* 详情概览 */ #app .ov-bar{display:flex;align-items:center;gap:12px} #app .ov-bar .obj-bar{flex:1;height:10px;margin:0} #app .ov-bar .obj-pct{font-size:16px;min-width:46px} #app .ov-nums{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:15px} @media (max-width:900px){#app .ov-nums{grid-template-columns:repeat(3,minmax(0,1fr))}} #app .ovn b{display:block;font-size:22px;font-weight:750;letter-spacing:-.03em; font-variant-numeric:tabular-nums;line-height:1.2} #app .ovn span{display:block;margin-top:2px;font-size:11.5px;color:hsl(var(--muted-foreground))} #app .ovn.ok b{color:hsl(var(--success))} #app .ovn.warn b{color:hsl(var(--warning))} #app .ovn.pri b{color:hsl(var(--primary))} #app .ov-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:15px;padding-top:13px; border-top:1px solid hsl(var(--border)/.5);font-size:12px;color:hsl(var(--muted-foreground))} #app .ov-meta i{width:3px;height:3px;border-radius:50%;background:hsl(var(--muted-foreground)/.45)} /* 状态筛选胶囊（带计数，比下拉直观） */ #app .ob-filters{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px 0} #app .ob-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;cursor:pointer; border-radius:999px;font-size:12.5px;font:inherit;font-size:12.5px; color:hsl(var(--muted-foreground));background:hsl(var(--card)); border:1px solid hsl(var(--border)/.75);transition:all var(--ac-ease)} #app .ob-chip b{font-weight:700;color:hsl(var(--foreground));font-variant-numeric:tabular-nums} #app .ob-chip:hover{background:hsl(var(--accent)/.7)} #app .ob-chip.on{background:hsl(var(--primary)/.1);border-color:hsl(var(--primary)/.45); color:hsl(var(--primary))} #app .ob-chip.on b{color:hsl(var(--primary))} #app .ob-chip.ok.on{background:hsl(var(--success)/.11);border-color:hsl(var(--success)/.4);color:hsl(var(--success))} #app .ob-chip.ok.on b{color:hsl(var(--success))} #app .ob-chip.warn.on{background:hsl(var(--warning)/.13);border-color:hsl(var(--warning)/.4);color:hsl(var(--warning))} #app .ob-chip.warn.on b{color:hsl(var(--warning))} #app .ob-chip.crit.on{background:hsl(var(--destructive)/.11);border-color:hsl(var(--destructive)/.4);color:hsl(var(--destructive))} #app .ob-chip.crit.on b{color:hsl(var(--destructive))} #app .ob-numcell{font-size:13px;font-weight:600;letter-spacing:.01em} /* 表单里的开关（全天可拨这类） */ #app .ac-toggle.wd{margin-bottom:9px} #app .ac-toggle.wd .tx{font-size:13px;color:hsl(var(--foreground))} #app .modal .ac-toggle.wd{margin:2px 0 9px} /* 🔴 .dl-f 里的开关本身也是个