:root { color-scheme: light; /* Apple-Tech 主题：浅灰底 + 冷色渐变点缀 + 玻璃质感 */ --bg: #f4f6fb; --bg-mesh: radial-gradient(1200px 600px at 100% -10%, rgba(99, 102, 241, 0.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(20, 184, 166, 0.07), transparent 60%), linear-gradient(180deg, #f6f8fc 0%, #eef1f7 100%); --surface: rgba(255, 255, 255, 0.78); --surface-solid: #ffffff; --surface-elev: rgba(255, 255, 255, 0.92); --text: #0b0e14; --muted: #6b7280; --muted-2: #94a3b8; --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.14); --primary: #0a84ff; /* iOS system blue */ --primary-2: #5e5ce6; /* iOS system indigo */ --info: #0a84ff; --success: #30d158; --warning: #ff9f0a; --danger: #ff453a; --accent: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%); --accent-soft: linear-gradient(135deg, rgba(10, 132, 255, 0.12), rgba(94, 92, 230, 0.12)); --shadow-sm: 0 1px 2px rgba(11, 14, 20, 0.04), 0 1px 1px rgba(11, 14, 20, 0.04); --shadow-md: 0 4px 14px rgba(11, 14, 20, 0.06), 0 1px 3px rgba(11, 14, 20, 0.04); --shadow-lg: 0 24px 56px rgba(11, 14, 20, 0.10), 0 2px 6px rgba(11, 14, 20, 0.04); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --blur: saturate(180%) blur(20px); --transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ===== Dark theme（[data-theme="dark"] 加到 ，由 preferences.theme 或系统偏好驱动）===== */ html[data-theme="dark"] { color-scheme: dark; --bg: #0a0d14; --bg-mesh: radial-gradient(1200px 600px at 100% -10%, rgba(94, 92, 230, 0.16), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(10, 132, 255, 0.12), transparent 60%), linear-gradient(180deg, #0c1018 0%, #060a12 100%); --surface: rgba(20, 24, 33, 0.72); --surface-solid: #14181f; --surface-elev: rgba(28, 32, 41, 0.88); --text: #f3f4f6; --muted: #a1a8b5; --muted-2: #6b7280; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.30); } /* 暗色下：标题渐变改用浅色 */ html[data-theme="dark"] h1 { background: linear-gradient(180deg, #f8fafc 0%, #94a3b8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 暗色下：玻璃浮层背景透明度 + 边框稍亮 */ html[data-theme="dark"] .panel, html[data-theme="dark"] .metric, html[data-theme="dark"] .item, html[data-theme="dark"] .org-picker, html[data-theme="dark"] .topbar-user-menu, html[data-theme="dark"] .notification-bell-menu, html[data-theme="dark"] .command-palette { background: rgba(20, 24, 33, 0.72); } /* 暗色：输入框白底改为透明深色 */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: rgba(255, 255, 255, 0.04); color: var(--text); } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: rgba(255, 255, 255, 0.30); } /* 暗色：secondary 按钮 */ html[data-theme="dark"] button.secondary { background: rgba(255, 255, 255, 0.06); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } html[data-theme="dark"] button.secondary:hover { background: rgba(255, 255, 255, 0.10); } /* 暗色：link / item-actions / kbd / pre / status-card code / 滚动条 */ html[data-theme="dark"] a.link { background: rgba(10, 132, 255, 0.18); } html[data-theme="dark"] a.link:hover { background: rgba(10, 132, 255, 0.30); } html[data-theme="dark"] .item-actions a, html[data-theme="dark"] .badge { background: rgba(255, 255, 255, 0.06); color: var(--text); border-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] kbd { background: linear-gradient(180deg, #1f2937, #111827); color: var(--text); border-color: rgba(255, 255, 255, 0.10); } html[data-theme="dark"] .result, html[data-theme="dark"] pre, html[data-theme="dark"] .status-card code { background: rgba(255, 255, 255, 0.04); color: #c7d2fe; border-color: var(--border); } html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); background-clip: padding-box; } html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); background-clip: padding-box; } /* 暗色：metric 顶部高光略弱 */ html[data-theme="dark"] .metric::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent); } /* 暗色：状态行 / 通知行 hover 用浅色 */ html[data-theme="dark"] .status-row-bar { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .notification-row:hover, html[data-theme="dark"] .topbar-user-menu-item:hover, html[data-theme="dark"] .command-palette-item:hover { background: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .command-palette-input-row { border-bottom-color: var(--border); } html[data-theme="dark"] .command-palette-foot { border-top-color: var(--border); } html[data-theme="dark"] .command-palette-backdrop { background: rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .ticket-age, html[data-theme="dark"] .alert-row { /* tone 类自带配色，无需覆盖 */ } /* 暗色：funnel / status 进度条底色 */ html[data-theme="dark"] .funnel-bar, html[data-theme="dark"] .lead-source-bar { background: rgba(255, 255, 255, 0.06); } * { box-sizing: border-box; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--bg); background-image: var(--bg-mesh); background-attachment: fixed; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14px; letter-spacing: -0.01em; font-feature-settings: "ss01", "cv11"; } ::selection { background: rgba(10, 132, 255, 0.18); } /* —— 滚动条：苹果风极细、悬停高亮 —— */ * { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, 0.18) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.16); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.28); background-clip: padding-box; } /* 侧栏内滚动条用浅色 */ .sidebar *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); background-clip: padding-box; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 256px; padding: 22px 18px 18px; /* 深色玻璃 + 微噪点感 */ background: radial-gradient(140% 90% at 0% 0%, rgba(94, 92, 230, 0.22), transparent 60%), radial-gradient(120% 80% at 100% 100%, rgba(10, 132, 255, 0.18), transparent 60%), linear-gradient(180deg, #0c1018 0%, #0a0d14 100%); color: #fff; border-right: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04) inset; display: flex; flex-direction: column; gap: 18px; overflow: hidden; } .brand { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; flex: 0 0 auto; } .brand strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .brand span { display: block; color: rgba(255, 255, 255, 0.55); font-size: 11px; margin-top: 2px; } .mark { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 6px 16px rgba(10, 132, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); display: block; } nav { display: grid; gap: 2px; } /* 分组导航容器：替代原扁平 nav，做成「分组 + 图标」结构 */ .sidebar-nav { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; margin-right: -4px; } .nav-group { display: grid; gap: 2px; } .nav-group-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.36); padding: 8px 12px 4px; user-select: none; } .nav-item { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.72); text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: 13px; letter-spacing: -0.005em; position: relative; transition: background var(--transition), color var(--transition), transform var(--transition); } .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .nav-item .nav-icon { width: 16px; height: 16px; flex: 0 0 16px; color: rgba(255, 255, 255, 0.55); transition: color var(--transition), transform var(--transition); } .nav-item:hover .nav-icon { color: rgba(255, 255, 255, 0.85); } .nav-item.is-active { background: linear-gradient(180deg, rgba(10, 132, 255, 0.28), rgba(94, 92, 230, 0.22)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .nav-item.is-active .nav-icon { color: #fff; } .nav-item.is-active::before { /* 左侧 2px 渐变高亮条 */ content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #0a84ff, #5e5ce6); box-shadow: 0 0 8px rgba(94, 92, 230, 0.6); } /* 旧 nav a 保留为兜底，避免外部老代码崩溃 */ nav a { color: rgba(255, 255, 255, 0.72); text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: 13px; letter-spacing: -0.005em; display: flex; align-items: center; gap: 10px; transition: background var(--transition), color var(--transition); } nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } nav a.active { background: linear-gradient(180deg, rgba(10, 132, 255, 0.28), rgba(94, 92, 230, 0.22)); color: #fff; } .main { margin-left: 256px; padding: 28px 32px 56px; display: grid; gap: 20px; } .topbar { display: flex; justify-content: space-between; gap: 20px; align-items: start; } h1, h2, h3, p { margin: 0; } h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; background: linear-gradient(180deg, #0b0e14 0%, #2a2f3a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } h3 { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; } p { color: var(--muted); margin-top: 6px; } .org-box { /* 隐藏每页顶部的「组织 ID」选择器：组织已通过登录态自动绑定， 切换组织请到「设置 → 所有组织」点击「使用」。仍保留 DOM 节点以便 旧 JS 中 requireOrg() 读取 #orgId.value 不会报空。 */ display: none !important; } .org-input-row { display: flex; gap: 8px; } .org-input-row input { flex: 1; } .org-current-name { font-size: 12px; color: var(--muted); margin-top: 2px; display: block; } .org-picker-btn { padding: 8px 10px; min-width: 36px; } .org-box { position: relative; } .org-picker { position: absolute; top: calc(100% + 6px); right: 0; width: min(420px, 90vw); max-height: 360px; overflow: auto; background: rgba(255, 255, 255, 0.86); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 80; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .org-picker input[type="search"] { padding: 8px 10px; } .org-picker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; overflow-y: auto; } .org-picker-empty { padding: 12px; text-align: center; } .org-picker-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; } .org-picker-item:hover { background: #f1f5f9; } .org-picker-item.is-active { border-color: var(--primary); background: #ecfdf5; } .org-picker-item strong { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .org-picker-item small { font-size: 11px; color: var(--muted); white-space: nowrap; } .org-picker-plan { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; background: #eef2f7; color: var(--text); } .brand-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border); vertical-align: middle; } .danger-zone { border-color: #fecaca; background: #fef9f9; } .template-archived { opacity: 0.6; } .template-config { margin: 0; font-size: 12px; max-height: 160px; } /* ===== Login page ===== */ .auth-body { display: grid; min-height: 100vh; place-items: center; padding: 24px; } .auth-shell { width: 100%; max-width: 420px; } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; display: grid; gap: 18px; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08); } .auth-tabs { display: flex; gap: 4px; background: #f1f5f9; border-radius: 8px; padding: 4px; } .auth-tab { flex: 1; background: transparent; color: var(--muted); border-radius: 6px; font-size: 13px; font-weight: 600; border: 0; padding: 8px; cursor: pointer; } .auth-tab.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .auth-form label { display: grid; gap: 4px; color: var(--text); font-size: 13px; } .auth-foot { text-align: center; font-size: 12px; } /* ===== Sidebar user badge ===== */ .sidebar-user { margin-top: 14px; padding: 12px 12px 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); display: grid; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sidebar-user strong { font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; letter-spacing: -0.005em; } .sidebar-user-actions { display: flex; justify-content: space-between; gap: 6px; } .sidebar-user-actions a { color: rgba(255, 255, 255, 0.55); text-decoration: none; font-size: 11px; cursor: pointer; transition: color var(--transition); } .sidebar-user-actions a:hover { color: #fff; } .sidebar-user-login { display: block; margin-top: 14px; background: var(--accent); color: #fff; text-align: center; padding: 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; text-decoration: none; letter-spacing: -0.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(10, 132, 255, 0.35); transition: filter var(--transition), transform var(--transition); } .sidebar-user-login:hover { filter: brightness(1.05); } /* ===== 顶部右侧用户徽章（浮动） ===== */ .topbar-user-host { position: fixed; top: 16px; right: 24px; z-index: 70; } /* ===== 顶部通知铃铛 ===== */ .notification-bell-host { position: fixed; top: 16px; right: calc(24px + 280px); z-index: 71; } .notification-bell { position: relative; width: 38px; height: 38px; border-radius: 999px; background: var(--surface-elev); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition); } .notification-bell:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .notification-bell svg { width: 18px; height: 18px; } .notification-dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(255, 69, 58, 0.40); border: 2px solid var(--bg); } .notification-bell-menu { position: absolute; top: calc(100% + 8px); right: 0; width: min(360px, 90vw); max-height: 480px; overflow-y: auto; background: rgba(255, 255, 255, 0.92); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; animation: topbar-user-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .notification-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px; } .notification-bell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .notification-bell-list li { display: block; } .notification-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--radius-sm); transition: background var(--transition); } .notification-row:hover { background: rgba(15, 23, 42, 0.05); } .notification-status { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; margin-top: 6px; background: var(--muted-2); } .notification-status-sent { background: var(--success); box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.15); } .notification-status-failed { background: var(--danger); box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.15); } .notification-status-queued { background: var(--warning); box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.15); } .notification-status-pending { background: var(--warning); } .notification-row-body { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 13px; } .notification-row-body strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notification-row-body .muted { font-size: 11px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 920px) { .notification-bell-host { right: calc(12px + 48px); top: 12px; } } /* ===== 全局命令面板 ⌘K ===== */ .command-palette-host { position: fixed; inset: 0; z-index: 200; } .command-palette-backdrop { position: absolute; inset: 0; background: rgba(11, 14, 20, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .command-palette { position: relative; margin: 12vh auto 0; width: min(640px, 92vw); background: rgba(255, 255, 255, 0.96); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: command-palette-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes command-palette-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .command-palette-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .command-palette-input-row input { flex: 1; border: 0; background: transparent; font-size: 15px; outline: none; padding: 0; width: 100%; font-family: inherit; letter-spacing: -0.005em; } .command-palette-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; } .command-palette-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; } .command-palette-item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; transition: background var(--transition); } .command-palette-item:hover { background: rgba(15, 23, 42, 0.06); } .command-palette-item.is-selected { background: linear-gradient(135deg, rgba(10, 132, 255, 0.12), rgba(94, 92, 230, 0.12)); box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.30); } .command-palette-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-align: center; background: rgba(15, 23, 42, 0.06); padding: 2px 6px; border-radius: 999px; } .command-palette-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-palette-hint { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .command-palette-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); } .command-palette-foot kbd { margin: 0 2px; } /* ===== 全局撤销 Toast 栈 ===== */ .global-toast-stack { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 220; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .global-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(15, 23, 42, 0.92); color: #fff; border-radius: 999px; font-size: 13px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30); animation: toast-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); letter-spacing: -0.005em; } .global-toast-leaving { animation: toast-out 200ms ease forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } } .global-toast-action { background: transparent; border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; padding: 4px 10px; font-size: 12px; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 600; } .global-toast-action:hover { background: rgba(255, 255, 255, 0.08); } .global-toast-count { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255, 255, 255, 0.55); min-width: 24px; text-align: right; } /* ===== 全局确认对话框 ===== */ .global-confirm-backdrop { position: fixed; inset: 0; background: rgba(11, 14, 20, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 230; display: grid; place-items: center; animation: drawer-backdrop-in 180ms ease both; } .global-confirm { background: var(--surface-elev); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(420px, 92vw); padding: 22px 24px 18px; animation: command-palette-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .global-confirm h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .global-confirm p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; white-space: pre-line; } .global-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; } .global-confirm-danger { background: var(--danger) !important; box-shadow: 0 6px 14px rgba(255, 69, 58, 0.30) !important; } /* ===== 首次登录引导浮层 ===== */ .onboarding-backdrop { position: fixed; inset: 0; background: rgba(11, 14, 20, 0.48); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 240; display: grid; place-items: center; animation: drawer-backdrop-in 220ms ease both; } .onboarding-card { position: relative; background: var(--surface-elev); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(460px, 92vw); padding: 32px 28px 22px; animation: command-palette-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .onboarding-card h2 { margin: 0 0 10px; font-size: 18px; background: linear-gradient(135deg, #0a84ff, #5e5ce6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .onboarding-card p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.7; } .onboarding-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); border: 0; cursor: pointer; font-size: 14px; color: var(--muted); display: grid; place-items: center; } .onboarding-close:hover { background: rgba(15, 23, 42, 0.12); color: var(--text); } .onboarding-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; } .onboarding-dots span { width: 7px; height: 7px; border-radius: 999px; background: rgba(15, 23, 42, 0.18); transition: background var(--transition), width var(--transition); } .onboarding-dots span.is-active { background: linear-gradient(135deg, #0a84ff, #5e5ce6); width: 22px; } .onboarding-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ===== 键盘快捷键帮助浮层 ===== */ .shortcuts-help-backdrop { position: fixed; inset: 0; background: rgba(11, 14, 20, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 235; display: grid; place-items: center; animation: drawer-backdrop-in 180ms ease both; } .shortcuts-help { position: relative; background: var(--surface-elev); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(560px, 92vw); padding: 24px 28px; animation: command-palette-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .shortcuts-help h2 { margin: 0 0 16px; font-size: 16px; } .shortcuts-help-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); border: 0; cursor: pointer; font-size: 14px; color: var(--muted); display: grid; place-items: center; } .shortcuts-help-grid { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 10px 16px; font-size: 13px; } .shortcuts-help-grid kbd { margin: 0 2px; } /* ===== 反馈悬浮按钮 ===== */ .feedback-fab { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 999px; border: 0; cursor: pointer; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(10, 132, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18); z-index: 160; transition: transform var(--transition), box-shadow var(--transition); } .feedback-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(10, 132, 255, 0.40); } .feedback-fab svg { width: 20px; height: 20px; } /* 反馈表单星级 */ .feedback-rating { display: inline-flex; gap: 4px; margin-top: 4px; } .feedback-rating button { background: transparent; border: 0; cursor: pointer; font-size: 20px; color: rgba(15, 23, 42, 0.18); padding: 0 2px; transition: color var(--transition), transform 120ms; } .feedback-rating button:hover { transform: scale(1.15); } .feedback-rating button.is-on { color: var(--warning); } /* ===== 拖拽上传：drop zone 视觉态 ===== */ .dnd-over { outline: 2px dashed var(--primary); outline-offset: 4px; background: rgba(10, 132, 255, 0.04); border-radius: var(--radius-md); transition: background var(--transition); } /* ===== 通用空状态 ===== */ .empty-state { display: grid; place-items: center; text-align: center; padding: 56px 20px; color: var(--muted); } .empty-state-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, rgba(10, 132, 255, 0.10), rgba(94, 92, 230, 0.10)); color: var(--primary); margin-bottom: 14px; } .empty-state-icon svg { width: 32px; height: 32px; } .empty-state h3 { font-size: 15px; color: var(--text); margin: 0 0 6px; font-weight: 600; } .empty-state p { margin: 0 0 14px; font-size: 13px; max-width: 360px; } .empty-state .empty-actions { display: flex; gap: 8px; } .topbar-user { position: relative; } .topbar-user-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; background: var(--surface-elev); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: 999px; color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); font-family: inherit; letter-spacing: -0.005em; } .topbar-user-trigger:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .topbar-user[data-open="true"] .topbar-user-trigger { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .topbar-user-avatar { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0; box-shadow: 0 4px 12px rgba(10, 132, 255, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .topbar-user-meta { display: grid; gap: 0; text-align: left; line-height: 1.25; max-width: 180px; } .topbar-user-meta strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-user-meta span { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-user-caret { width: 14px; height: 14px; color: var(--muted); margin-left: 2px; transition: transform var(--transition); } .topbar-user[data-open="true"] .topbar-user-caret { transform: rotate(180deg); } .topbar-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: rgba(255, 255, 255, 0.92); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px; display: grid; gap: 2px; box-shadow: var(--shadow-lg); animation: topbar-user-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes topbar-user-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .topbar-user-menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); background: transparent; border: 0; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; text-decoration: none; letter-spacing: -0.005em; transition: background var(--transition), color var(--transition); } .topbar-user-menu-item:hover { background: rgba(15, 23, 42, 0.06); } .topbar-user-menu-item.is-danger { color: var(--danger); } .topbar-user-menu-item.is-danger:hover { background: rgba(255, 69, 58, 0.10); } .topbar-user-menu-divider { height: 1px; margin: 4px 2px; background: var(--border); } .topbar-user-login { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--accent); color: #fff; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: -0.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(10, 132, 255, 0.30); transition: filter var(--transition), transform var(--transition); } .topbar-user-login:hover { filter: brightness(1.05); } /* 给页面顶部 topbar 右侧预留位置，避免标题区与浮动徽章重叠 */ .main .topbar { padding-right: 220px; } @media (max-width: 920px) { .topbar-user-host { top: 12px; right: 12px; } .topbar-user-meta { display: none; } .topbar-user-trigger { padding: 4px; } .topbar-user-caret { display: none; } .main .topbar { padding-right: 0; } } label { color: var(--muted); font-size: 12px; } input, select, textarea, button { font: inherit; } input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.9); color: var(--text); padding: 10px 12px; letter-spacing: -0.005em; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } input::placeholder, textarea::placeholder { color: var(--muted-2); } input:hover, select:hover, textarea:hover { border-color: var(--border-strong); } input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(10, 132, 255, 0.55); box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.16); background: #fff; } textarea { resize: vertical; } button { border: 0; border-radius: var(--radius-sm); background: var(--accent); color: #fff; padding: 9px 14px; cursor: pointer; font-weight: 600; letter-spacing: -0.005em; transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px rgba(10, 132, 255, 0.22); } button:hover { filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 10px 22px rgba(10, 132, 255, 0.28); } button:active { transform: translateY(0.5px) scale(0.995); } button:disabled { filter: grayscale(0.4); cursor: not-allowed; opacity: 0.7; box-shadow: none; } button.secondary { background: rgba(15, 23, 42, 0.04); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } button.secondary:hover { background: rgba(15, 23, 42, 0.07); filter: none; } .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .summary-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } .metric { position: relative; min-height: 88px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); padding: 14px 16px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); overflow: hidden; } .metric::before { /* 顶部高光 */ content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); pointer-events: none; } .metric strong { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .metric span { color: var(--muted); font-size: 12px; } .action { min-height: 52px; } .panel { background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: grid; gap: 16px; box-shadow: var(--shadow-md); } .notice { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(10, 132, 255, 0.08); color: var(--text); font-size: 13px; } .notice.success { background: rgba(48, 209, 88, 0.10); border-color: rgba(48, 209, 88, 0.25); color: #14532d; } .notice.error { background: rgba(255, 69, 58, 0.10); border-color: rgba(255, 69, 58, 0.30); color: #7f1d1d; } .notice-warning { background: rgba(255, 159, 10, 0.10); border-color: rgba(255, 159, 10, 0.30); color: #7c2d12; } .source-facts { margin: 8px 0 0; padding-left: 20px; color: var(--muted); } .source-facts li { margin: 4px 0; } .source-facts strong { color: var(--text); } .project-outline-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .project-outline-summary > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-outline-summary > div.is-warn { border-color: rgba(245, 158, 11, 0.28); background: rgba(245, 158, 11, 0.08); } .project-outline-summary span, .project-outline-summary strong { display: block; } .project-outline-summary span { margin-bottom: 4px; color: var(--muted); font-size: 12px; } .project-outline-summary strong { font-size: 18px; } .project-outline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .project-outline-actions a.secondary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-elev); color: var(--text); font-weight: 600; text-decoration: none; } .project-outline-slide { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-outline-slide .item-head { align-items: flex-start; } .project-outline-slide small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.5; } .muted { color: var(--muted); font-size: 12px; } a.link { color: var(--info); text-decoration: none; font-weight: 600; padding: 7px 10px; border-radius: var(--radius-sm); background: rgba(10, 132, 255, 0.08); letter-spacing: -0.005em; transition: background var(--transition), color var(--transition); } a.link:hover { background: rgba(10, 132, 255, 0.16); } .item p { white-space: pre-line; } .panel-head { display: flex; align-items: center; justify-content: space-between; } .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .stack { display: grid; gap: 10px; } .inset { border-top: 1px solid var(--border); padding-top: 16px; } .list { display: grid; gap: 10px; } .item { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--surface-elev); box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .item-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; } .item small { color: var(--muted); } .item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .item-actions.action-overflow-ready, .row-actions.action-overflow-ready { align-items: center; flex-wrap: nowrap; max-width: none !important; overflow: visible; } .item-actions.has-action-overflow, .row-actions.has-action-overflow { max-width: none !important; } .action-overflow { position: relative; flex: 0 0 auto; z-index: 20; } .item:has(.action-overflow[open]) { z-index: 120; } .action-overflow[open] { z-index: 140; } .action-overflow > summary { list-style: none; } .action-overflow > summary::-webkit-details-marker { display: none; } .action-overflow-summary { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-elev); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-sm); } .action-overflow[open] .action-overflow-summary { border-color: rgba(37, 99, 235, 0.35); background: #eff6ff; color: var(--primary); } .action-overflow-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1000; min-width: 148px; max-height: min(360px, 58vh); display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: var(--shadow-md); overflow: auto; } .action-overflow:not([open]) .action-overflow-menu { display: none; } .action-overflow-menu button, .action-overflow-menu a { width: 100% !important; min-height: 32px !important; justify-content: flex-start !important; text-align: left; white-space: nowrap; border-radius: 7px; } .action-overflow-menu button { border: 1px solid var(--border); background: #fff; color: var(--text); } .action-overflow-menu button.danger, .action-overflow-menu .danger { border-color: rgba(220, 38, 38, 0.22); background: rgba(255, 69, 58, 0.1); color: var(--danger); } .saas-table td:last-child { overflow: visible; } .item-actions a { display: inline-flex; align-items: center; min-height: 32px; border-radius: var(--radius-sm); padding: 0 12px; background: rgba(15, 23, 42, 0.04); color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px; transition: background var(--transition); } .item-actions a:hover { background: rgba(15, 23, 42, 0.08); } .item-actions select { width: auto; min-width: 110px; padding: 6px 10px; } .row-gap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row-center { display: flex; justify-content: center; } .inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .inline-check input { width: auto; margin: 0; } .filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* 快捷筛选 chip 行（在 toolbar 与列表之间） */ .quick-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .quick-filter-chip { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 500; cursor: pointer; min-height: 28px; } .quick-filter-chip:hover { background: #f1f5f9; border-color: #94a3b8; } .quick-filter-chip.is-active { background: var(--info); color: #fff; border-color: var(--info); } .chip { display: inline-flex; align-items: center; gap: 6px; background: #e0f2fe; color: #075985; border-radius: 999px; padding: 4px 8px 4px 12px; font-size: 12px; } .chip-clear { background: transparent; border: 0; color: #075985; cursor: pointer; font-weight: 700; padding: 0 4px; line-height: 1; font-size: 14px; } .ticket-item.is-urgent { border-left: 4px solid var(--danger); } .ticket-item.is-high { border-left: 4px solid var(--warning); } .ticket-detail { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); } .detail-title { margin: 0 0 8px; font-size: 13px; color: var(--muted); } .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .timeline li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; } .timeline-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--primary); margin-top: 6px; flex: 0 0 8px; } kbd { display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border-strong); background: linear-gradient(180deg, #fff, #f1f5f9); font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); } .bulk-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #f1f5f9; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .saved-views { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; font-size: 12px; } .view-chip { background: #fef3c7; color: #92400e; padding-left: 4px; } .view-chip button[data-view-apply] { background: transparent; border: 0; cursor: pointer; color: inherit; font-weight: 600; padding: 0 4px; } .view-chip .chip-clear { color: #92400e; } .ticket-summary { position: relative; } .ticket-summary p { margin: 0; } .link-button { display: inline-block; margin-top: 4px; background: transparent; border: 0; color: var(--info); font-size: 12px; font-weight: 600; padding: 0; cursor: pointer; } .link-button:hover { text-decoration: underline; } .summary-edit { width: 100%; margin-top: 4px; } .bulk-bar select { width: auto; min-width: 150px; padding: 6px 10px; } .ticket-head-left { display: flex; align-items: center; gap: 10px; } .ticket-select { width: auto; margin: 0; cursor: pointer; } .ticket-item.is-selected { background: #f5f8ff; border-color: #93c5fd; } .timeline-dot.is-comment { background: var(--info); } .comment-body { margin-top: 4px; padding: 8px 10px; background: #f8fafc; border-radius: 6px; border: 1px solid var(--border); white-space: pre-line; } .comment-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 12px; } .comment-form button { height: 40px; } @media (max-width: 920px) { .filter-grid { grid-template-columns: 1fr; } .bulk-bar { flex-direction: column; align-items: stretch; } .comment-form { grid-template-columns: 1fr; } } .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .badge { border-radius: 999px; background: rgba(15, 23, 42, 0.05); padding: 3px 9px; font-size: 11px; font-weight: 500; letter-spacing: -0.005em; color: var(--text); border: 1px solid rgba(15, 23, 42, 0.06); } .badge.warning { background: rgba(255, 159, 10, 0.12); color: #92400e; border-color: rgba(255, 159, 10, 0.28); } .badge.success { background: rgba(48, 209, 88, 0.12); color: #14532d; border-color: rgba(48, 209, 88, 0.28); } .badge.danger { background: rgba(255, 69, 58, 0.12); color: #7f1d1d; border-color: rgba(255, 69, 58, 0.30); } .status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .status-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-elev); padding: 14px; display: grid; gap: 10px; box-shadow: var(--shadow-sm); } .status-card code { display: block; overflow: auto; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.04); color: #334155; font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .result, pre { background: rgba(15, 23, 42, 0.04); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; overflow: auto; font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; color: #1f2937; } /* ===== 会话页面：工具栏、选中态、聊天气泡、详情卡片 ===== */ .conv-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .conv-toolbar input[type="search"], .conv-toolbar select { min-height: 34px; } .conv-toolbar input[type="search"] { min-width: 220px; } .conv-item { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .conv-item:hover { border-color: #94a3b8; } .conv-item.is-selected { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); background: #f5f8ff; } .conv-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; } .conv-meta-row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; word-break: break-all; } .conv-meta-row .muted { font-size: 12px; } .chat-thread-wrap { position: relative; } .chat-thread { display: flex; flex-direction: column; gap: 10px; height: 480px; min-height: 240px; max-height: min(80vh, 1200px); overflow-y: auto; padding: 12px; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; resize: vertical; /* A8: 拖底边手动调高 */ } /* SLA 计时器横幅 */ .sla-strip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); background: #fff7ed; color: #7c2d12; font-size: 13px; } .sla-strip.sla-warn { background: #fff7ed; border-color: #fdba74; color: #7c2d12; } .sla-strip.sla-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .sla-strip .sla-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; animation: slaBlink 1.6s ease-in-out infinite; flex: 0 0 8px; } @keyframes slaBlink { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } /* 私有备注块 */ .conv-note-box { border: 1px solid var(--border); border-radius: 8px; background: #fffbeb; padding: 10px 14px; } .conv-note-box summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; } .conv-note-box summary strong { font-size: 13px; } .conv-note-box[open] { display: grid; gap: 8px; } .conv-note-box textarea { width: 100%; background: #fff; border-color: #fde68a; font-size: 13px; line-height: 1.5; } .new-msgs-indicator { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--primary); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; z-index: 2; animation: indicatorFadeIn 0.18s ease; } .new-msgs-indicator .muted { color: rgba(255, 255, 255, 0.85); font-weight: 500; } .new-msgs-indicator:hover { filter: brightness(1.06); } @keyframes indicatorFadeIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } } .chat-row { display: flex; } .chat-row.from-them { justify-content: flex-start; } .chat-row.from-us { justify-content: flex-end; } .chat-bubble { max-width: min(72%, 560px); border-radius: 18px; padding: 10px 14px; background: var(--surface-elev); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: grid; gap: 4px; } .chat-row.from-us .chat-bubble { background: var(--accent); border-color: transparent; color: #fff; } .chat-row.from-us .chat-meta, .chat-row.from-us .chat-extras, .chat-row.from-us .muted { color: rgba(255, 255, 255, 0.78); } .chat-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 12px; } .chat-body { white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.5; } .chat-extras { font-size: 12px; } /* 消息气泡内的快速操作（复制 / 引用 / 标星） */ .chat-bubble { position: relative; } .chat-actions { position: absolute; top: 6px; right: 8px; display: inline-flex; gap: 2px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border); border-radius: 999px; padding: 2px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; } .chat-bubble:hover .chat-actions, .chat-bubble:focus-within .chat-actions { opacity: 1; pointer-events: auto; } .chat-action { background: transparent; color: var(--text); border: 0; padding: 2px 6px; font-size: 13px; line-height: 1; border-radius: 999px; cursor: pointer; font-weight: 500; } .chat-action:hover { background: #eef2f7; } .chat-action.is-on { color: #ca8a04; } /* 标星消息：左侧金色细条 */ .chat-row.is-starred .chat-bubble { box-shadow: inset 3px 0 0 #f59e0b, 0 1px 0 rgba(15, 23, 42, 0.03); } /* 消息内搜索：当前匹配高亮 + 非匹配灰化 */ .chat-row.is-match.is-current-match .chat-bubble { outline: 2px solid #2563eb; outline-offset: 1px; } .chat-row.is-dim { opacity: 0.35; } .chat-row.is-dim .chat-actions { display: none; } .chat-row.is-hidden { display: none !important; } /* 跳转到消息时的闪烁高亮 */ .chat-row.is-target-flash .chat-bubble { outline: 2px solid #f59e0b; outline-offset: 1px; animation: messageFlash 1.8s ease; } @keyframes messageFlash { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); } 35% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.18); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } } .msg-search-row { display: flex; gap: 6px; align-items: center; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; } .msg-search-row input[type="search"] { flex: 1; min-width: 200px; padding: 6px 10px; } .msg-search-row .secondary { padding: 6px 10px; font-size: 12px; min-width: 32px; } #messageSearchCount { min-width: 60px; text-align: right; font-size: 12px; } /* 乐观回复气泡：发送中 / 失败 */ .chat-row.is-optimistic .chat-bubble.pending { opacity: 0.7; border-style: dashed; } .chat-row.is-optimistic.is-failed .chat-bubble { background: #fef2f2; border-color: #fecaca; opacity: 1; } .chat-row.is-optimistic.is-failed .chat-extras { color: #991b1b; } /* 列表获得焦点时给个柔和提示，便于键盘用户感知 */ .list:focus, .list:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.25); outline-offset: 4px; border-radius: 8px; } /* 待回复高亮（列表行左侧色条 + 颜色） */ .conv-item.is-awaiting { border-left: 4px solid var(--danger); } /* 置顶会话：左侧金色色条；置顶与待回复可同时存在（两条由 inset shadow 模拟） */ .conv-item.is-pinned { background: linear-gradient(180deg, #fffbeb 0%, #fff 60%); } .conv-item.is-pinned.is-awaiting { box-shadow: inset 4px 0 0 var(--warning); border-left-color: var(--danger); } .conv-item.is-pinned:not(.is-awaiting) { border-left: 4px solid var(--warning); } /* 置顶按钮（星标） */ .pin-toggle { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; min-height: 34px; font-size: 16px; line-height: 1; cursor: pointer; font-weight: 700; } .pin-toggle:hover { background: #fef3c7; color: var(--warning); border-color: #fcd34d; } .pin-toggle.is-on { color: var(--warning); background: #fef3c7; border-color: #fcd34d; } /* 批量选择：行内 title 包一个 checkbox + 内容 */ .conv-item-title { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .conv-item-title > div { min-width: 0; } .conv-select { width: auto; margin: 4px 0 0; cursor: pointer; flex: 0 0 auto; } .conv-item.is-bulk-checked { background: #ecfeff; border-color: #67e8f9; } .conv-item.is-bulk-checked.is-pinned { background: linear-gradient(180deg, #fffbeb 0%, #ecfeff 60%); } /* 复用现有 .bulk-bar；这里让动作按钮更紧凑 */ .bulk-bar button { padding: 6px 10px; font-size: 13px; min-height: 32px; } /* 变量插入 chip 行：与 quick-replies 同布局，添加前缀标签 */ .var-insert-row { align-items: center; border-top: 1px dashed var(--border); padding-top: 8px; } .var-insert-row .quick-reply-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 3px 8px; } /* 关键字命中高亮：与原生 区分，用更柔和的颜色 */ mark.conv-mark { background: #fef08a; color: #713f12; padding: 0 2px; border-radius: 3px; } /* AI 摘要卡片 */ .summary-card { border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 8px; padding: 14px; display: grid; gap: 8px; } .summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .summary-body { font-size: 14px; line-height: 1.6; color: #0f172a; white-space: normal; } .summary-headline { font-size: 14px; line-height: 1.55; color: #0f172a; font-weight: 600; } .summary-actions { display: inline-flex; gap: 6px; } .summary-actions button { padding: 4px 10px; font-size: 12px; } .summary-grid { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 10px; } .summary-grid .metric { min-width: 0; padding: 10px 12px; min-height: 72px; } .summary-grid .metric strong { font-size: 20px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .summary-grid .metric span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } @media (max-width: 1400px) { .summary-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } @media (max-width: 900px) { .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } .summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .summary-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: #0f172a; font-size: 13px; line-height: 1.55; } .summary-next { font-size: 13px; color: #0f172a; border-top: 1px dashed #bfdbfe; padding-top: 8px; } /* 会话详情卡片：值带复制按钮 */ .conv-meta-value { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .copy-mini { background: #eef2f7; color: var(--text); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 500; line-height: 1.4; cursor: pointer; } .copy-mini:hover { background: #dbeafe; } /* 聊天日期分隔线 */ .chat-day-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 6px 4px; } .chat-day-divider::before, .chat-day-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .chat-day-divider span { padding: 2px 8px; background: #fff; border: 1px solid var(--border); border-radius: 999px; } /* "上次查看后" 未读消息分隔线 */ .chat-unread-divider { display: flex; align-items: center; gap: 10px; margin: 8px 4px; font-size: 12px; font-weight: 600; color: var(--danger); } .chat-unread-divider::before, .chat-unread-divider::after { content: ""; flex: 1; height: 1px; background: var(--danger); opacity: 0.4; } .chat-unread-divider span { padding: 2px 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 999px; letter-spacing: 0.5px; } /* 快捷回复 */ .quick-replies { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .quick-reply-chip { background: #eef2f7; color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 500; cursor: pointer; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid transparent; } .quick-reply-chip:hover { background: #dbeafe; border-color: #bfdbfe; } .visitor-info { border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; padding: 12px 14px; display: grid; gap: 10px; } .visitor-info-head { display: flex; align-items: baseline; gap: 10px; } .visitor-info-head strong { font-size: 13px; } .visitor-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 16px; font-size: 13px; } .visitor-info-row { display: flex; flex-direction: column; gap: 2px; word-break: break-all; } .visitor-info-row .muted { font-size: 11px; } .ticket-priority-select { width: auto; min-width: 96px; padding: 6px 10px; font-size: 12px; background: #fff; } .row-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .checkbox-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; } .checkbox-label input { width: auto; } /* ===== 仪表盘：工具栏、卡片着色、迷你图、漏斗、状态条、活动列表 ===== */ .dashboard-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .attention-banner { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: #fff; min-height: 44px; } .attention-banner strong { font-size: 22px; line-height: 1; } .attention-banner span { color: var(--muted); font-size: 13px; } .attention-banner-busy { background: linear-gradient(135deg, rgba(255, 159, 10, 0.12), rgba(255, 69, 58, 0.10)); border-color: rgba(255, 159, 10, 0.32); color: #92400e; box-shadow: 0 8px 20px rgba(255, 159, 10, 0.12); } .attention-banner-busy span { color: #92400e; } .attention-banner-clear { background: linear-gradient(135deg, rgba(48, 209, 88, 0.12), rgba(10, 132, 255, 0.08)); border-color: rgba(48, 209, 88, 0.30); color: #065f46; box-shadow: 0 8px 20px rgba(48, 209, 88, 0.10); } .attention-banner-clear span { color: #065f46; } .attention-banner-loading { background: rgba(15, 23, 42, 0.04); border-color: var(--border); } .dashboard-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .dashboard-controls button { display: inline-flex; align-items: center; gap: 6px; } .dashboard-controls .checkbox-label { font-size: 13px; } .metric-grid { display: grid; gap: 12px; } .metric-grid-inbox { grid-template-columns: repeat(5, minmax(0, 1fr)); } .metric-grid-ops { grid-template-columns: repeat(4, minmax(0, 1fr)); } .metric-link { display: block; text-decoration: none; color: inherit; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .metric-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); } .metric-info { border-color: rgba(10, 132, 255, 0.32); background: linear-gradient(180deg, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0.02)); } .metric-info strong { background: linear-gradient(135deg, #0a84ff, #5e5ce6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .metric-warning { border-color: rgba(255, 159, 10, 0.32); background: linear-gradient(180deg, rgba(255, 159, 10, 0.10), rgba(255, 159, 10, 0.02)); } .metric-warning strong { color: #b45309; } .metric-danger { border-color: rgba(255, 69, 58, 0.32); background: linear-gradient(180deg, rgba(255, 69, 58, 0.10), rgba(255, 69, 58, 0.02)); } .metric-danger strong { color: #b91c1c; } .dashboard-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dashboard-row-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); } .status-list { display: grid; gap: 8px; } .status-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: 13px; } .status-row-label { color: var(--muted); } .status-row-bar { position: relative; height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; } .status-row-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.25s ease; } .status-row-fill.info { background: var(--info); } .status-row-fill.warning { background: var(--warning); } .status-row-fill.success { background: var(--success); } .status-row-fill.danger { background: var(--danger); } .status-row-value { font-weight: 600; text-align: right; } .alert-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .funnel { display: grid; gap: 8px; } .funnel-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; } .funnel-label { color: var(--muted); } .funnel-bar { height: 22px; background: #f8fafc; border-radius: 6px; overflow: hidden; } .funnel-fill { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding: 0 8px; color: #fff; font-weight: 600; background: linear-gradient(90deg, #0a84ff, #5e5ce6); transition: width 0.25s ease; } .funnel-value { font-size: 12px; } .sparkline { width: 100%; height: 96px; } .spark-line { fill: none; stroke: var(--primary); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 1px rgba(10, 132, 255, 0.35)); } .spark-area { fill: rgba(10, 132, 255, 0.14); stroke: none; } .spark-dot { fill: var(--primary); } .spark-axis { font-size: 4px; fill: var(--muted); } .usage-by-type { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .usage-pill { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--muted); } .usage-pill strong { color: var(--text); font-size: 13px; } #activityFeed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 360px; overflow-y: auto; } #activityFeed li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; } .timeline-body { display: grid; gap: 2px; flex: 1; min-width: 0; } .timeline-title { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .timeline-when { font-size: 11px; } /* ===== 仪表盘 v3：分段选择器、骨架屏、紧急工单、引擎状态、用量 delta ===== */ .segmented { display: inline-flex; background: #f1f5f9; border-radius: 6px; padding: 2px; gap: 2px; } .segmented-btn { background: transparent; color: var(--muted); border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; border: 0; font-family: inherit; } .segmented-btn[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } .usage-headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .usage-headline strong { font-size: 18px; } .usage-delta { font-size: 12px; font-weight: 600; } .delta-up { color: var(--success); } .delta-down { color: var(--danger); } .delta-neutral { color: var(--muted); } .skeleton { background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: 4px; display: inline-block; } .skeleton-num { width: 60%; height: 22px; margin-bottom: 6px; } .skeleton-text { width: 80%; height: 12px; } .skeleton-block { width: 100%; height: 80px; display: block; } .skeleton-tall { height: 110px; } .metric-skeleton { display: flex; flex-direction: column; gap: 4px; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .urgent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .urgent-item { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: #fff; border-left: 4px solid var(--warning); } .urgent-item.urgent-urgent { border-left-color: var(--danger); background: #fef2f2; } .urgent-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; } .urgent-when { margin-left: auto; font-size: 12px; } .urgent-summary { margin: 0 0 8px; color: var(--text); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .urgent-actions { display: flex; justify-content: flex-end; } .engine-status { display: grid; gap: 8px; } .engine-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; } .engine-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); flex: 0 0 8px; } .engine-dot.up { background: var(--success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); } .engine-dot.down { background: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); } .engine-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; } .engine-meta strong { font-size: 13px; } .engine-meta .muted { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .engine-status-text { font-size: 12px; font-weight: 600; } .engine-status-text.up { color: var(--success); } .engine-status-text.down { color: var(--danger); } /* ===== 仪表盘 v4：渠道卡片、转化率、最久未结、Top 来源、过期提示 ===== */ .notice-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .notice-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .subhead { margin-top: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; } .ticket-age { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; font-size: 13px; border: 1px solid var(--border); background: #f8fafc; } .ticket-age strong { font-weight: 700; } .ticket-age-info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } .ticket-age-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .ticket-age-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .ticket-age-icon { font-size: 16px; } .funnel-conv { margin-left: 6px; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: #f1f5f9; } .lead-sources { display: grid; gap: 6px; } .lead-source-rows { display: grid; gap: 6px; } .lead-source-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 36px; align-items: center; gap: 8px; font-size: 12px; } .lead-source-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lead-source-bar { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; } .lead-source-fill { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #2563eb); border-radius: 999px; } .lead-source-value { font-weight: 600; text-align: right; } .channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .channel-card { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 12px; display: grid; gap: 10px; } .channel-card-head { display: flex; align-items: center; gap: 8px; } .channel-icon { font-size: 20px; line-height: 1; } .channel-card-title { display: flex; flex-direction: column; flex: 1; min-width: 0; } .channel-card-title strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-card-title .muted { font-size: 11px; } .channel-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; } .channel-card-stats > div { display: flex; flex-direction: column; gap: 2px; } .channel-card-stats strong { font-size: 16px; font-weight: 700; } .channel-card-stats span { color: var(--muted); font-size: 11px; } .channel-card-stats .danger-text { color: var(--danger); } .channel-card-foot { font-size: 11px; } .knowledge-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } .knowledge-filters { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; } .quick-filters { display: flex; flex-wrap: wrap; gap: 6px; } .quick-filter-btn { background: #eef2f7; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .quick-filter-btn:hover { background: #dbeafe; border-color: #93c5fd; } .quick-filter-btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); } .quick-filter-btn strong { font-size: 12px; font-weight: 700; } .saved-views { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .saved-views select { width: auto; min-width: 160px; padding: 6px 10px; } .saved-views .muted { font-size: 12px; } .import-format-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .dropzone { border: 2px dashed var(--border); border-radius: 8px; padding: 18px; text-align: center; background: #f8fafc; transition: border-color 0.15s ease, background 0.15s ease; cursor: default; } .dropzone p { margin: 0; font-size: 13px; } .dropzone a { color: var(--info); font-weight: 600; text-decoration: none; } .dropzone a:hover { text-decoration: underline; } .dropzone.is-dragover { border-color: var(--primary); background: #ecfdf5; } /* ===== 知识库 v6：覆盖率 / 标签云 / 高级字段 / 详情 / 永久链接 ===== */ .coverage-chart { display: grid; gap: 6px; margin-top: 4px; } .coverage-title { display: flex; align-items: baseline; gap: 8px; font-size: 12px; } .coverage-title .muted { font-size: 11px; } .coverage-row { display: grid; grid-template-columns: 80px 1fr 40px; align-items: center; gap: 8px; font-size: 12px; } .coverage-label { color: var(--muted); } .coverage-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #f1f5f9; } .coverage-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; } .coverage-seg.approved { background: var(--success); } .coverage-seg.pending { background: var(--warning); } .coverage-seg.rejected { background: var(--danger); } .coverage-seg.deprecated { background: #94a3b8; } .coverage-total { text-align: right; font-weight: 700; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 4px; } .tag-cloud-head { flex: 0 0 100%; display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: 12px; } .tag-chip { min-height: 26px; background: #e8eef7; color: var(--text); border: 1px solid #d8e0ec; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; opacity: 1; } .tag-chip:hover { background: #dbeafe; border-color: #93c5fd; } .tag-chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); } .tag-chip strong { font-size: 11px; } .tag-inline { background: transparent; border: 0; color: var(--info); font-size: 12px; padding: 0 4px; cursor: pointer; } .tag-inline:hover { text-decoration: underline; } .inline-tags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; } .advanced-fields { border: 1px dashed var(--border); border-radius: 6px; padding: 8px 12px; } .advanced-fields > summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: 12px; user-select: none; } .advanced-fields[open] > summary { margin-bottom: 8px; } .advanced-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .advanced-head strong { font-size: 12px; } .advanced-head button { padding: 4px 10px; font-size: 11px; } .advanced-head .muted { font-size: 11px; } .kv-rows { display: grid; gap: 6px; } .kv-row { display: grid; grid-template-columns: 180px 1fr 32px; gap: 6px; } .kv-row input { padding: 6px 8px; font-size: 12px; } .kv-remove { padding: 4px 8px; font-size: 14px; line-height: 1; } .expand-toggle { background: transparent; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 6px; margin-top: 2px; } .expand-toggle:hover { color: var(--text); } .detail-panel { margin-top: 10px; padding: 12px; background: #f8fafc; border: 1px solid var(--border); border-radius: 6px; display: grid; gap: 10px; } .detail-grid { display: grid; gap: 10px; } .detail-section { font-size: 13px; } .detail-section .detail-title { font-weight: 600; margin-bottom: 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .detail-section .notice-warning { font-size: 12px; } .kv-table { border-collapse: collapse; font-size: 12px; width: 100%; } .kv-table th, .kv-table td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; vertical-align: top; } .kv-table th { background: #f1f5f9; font-weight: 600; width: 30%; } .related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .related-list li { font-size: 13px; } .source-item { background: #fff; } /* ===== 知识库 v7：Audit diff / Refs / 锁定 / 过期 ===== */ .knowledge-item.is-locked { border-left: 4px solid #94a3b8; } .knowledge-item.is-expired { border-left: 4px solid var(--danger); background: #fef2f2; } .knowledge-item button:disabled { opacity: 0.45; cursor: not-allowed; } .diff-block { margin-top: 6px; display: grid; gap: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; background: #f8fafc; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; } .diff-row { display: grid; gap: 2px; } .diff-field { color: var(--muted); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .diff-before { color: #991b1b; background: #fef2f2; padding: 2px 6px; border-radius: 4px; white-space: pre-wrap; word-break: break-word; } .diff-after { color: #166534; background: #ecfdf5; padding: 2px 6px; border-radius: 4px; white-space: pre-wrap; word-break: break-word; } /* v8: 行内 word-level diff */ .diff-inline { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; background: #fff; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); } .diff-ins, ins.diff-ins { background: #ecfdf5; color: #166534; text-decoration: none; padding: 0 2px; border-radius: 3px; } .diff-del, del.diff-del { background: #fef2f2; color: #991b1b; text-decoration: line-through; padding: 0 2px; border-radius: 3px; } /* v8: 置顶视觉 */ .knowledge-item.is-pinned { border-left: 4px solid var(--info); background: linear-gradient(180deg, rgba(37, 99, 235, 0.05), #fff 30%); } /* ===== 知识库 v9：时间线 / 评论 / 覆盖率盲区 / 冲突解读 / 打印 ===== */ .timeline-chart { margin-top: 8px; } .ts-head { display: flex; gap: 10px; align-items: baseline; font-size: 12px; margin-bottom: 4px; } .ts-head .muted { font-size: 11px; } .ts-svg { width: 100%; height: auto; display: block; } .ts-approved { fill: var(--success); } .ts-pending { fill: var(--warning); } .ts-rejected { fill: var(--danger); } .ts-deprecated { fill: #94a3b8; } .ts-label { font-size: 9px; fill: var(--muted); text-anchor: middle; } .ts-num { font-size: 9px; fill: var(--text); text-anchor: middle; font-weight: 700; } .coverage-suggest { margin-top: 8px; padding: 12px; border: 1px dashed var(--border); border-radius: 8px; background: #f8fafc; } .coverage-suggest-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .coverage-suggest-item { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 13px; } .comments-block .comments-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; } .comment-row { padding: 8px 10px; background: #f8fafc; border: 1px solid var(--border); border-radius: 6px; } .comment-head { display: flex; align-items: baseline; gap: 6px; font-size: 12px; } .comment-body { white-space: pre-wrap; font-size: 13px; margin-top: 2px; } .comment-add-form { display: grid; gap: 6px; } .comment-add-form textarea { font-size: 13px; } .conflict-explain-card { margin-top: 6px; padding: 8px 10px; background: #fffbeb; border-radius: 6px; font-size: 13px; border: 1px solid #fde68a; } .conflict-explain-card ul { margin: 4px 0; padding-left: 20px; } /* 打印样式：导出 PDF */ @media print { body.print-mode .sidebar, body.print-mode .topbar .org-box, body.print-mode #pageNotice, body.print-mode .panel-head .row-actions, body.print-mode #toggleFormBtn, body.print-mode #openImportBtn, body.print-mode #openAiExtractBtn, body.print-mode .filter-chips, body.print-mode .quick-filters, body.print-mode .saved-views, body.print-mode .bulk-bar, body.print-mode .knowledge-filters, body.print-mode .form-grid form, body.print-mode #knowledgeForm, body.print-mode #aiExtractPanel, body.print-mode #sourcesPanel, body.print-mode .item-actions, body.print-mode .knowledge-select, body.print-mode .expand-toggle, body.print-mode .modal-mask, body.print-mode #knowledgePagination, body.print-mode .coverage-suggest, body.print-mode .comments-block .comment-add-form { display: none !important; } body.print-mode .main { margin-left: 0; padding: 8mm; } body.print-mode .panel { box-shadow: none; border-radius: 0; page-break-inside: avoid; } body.print-mode .item { page-break-inside: avoid; } body.print-mode .badge { border: 1px solid #999 !important; background: transparent !important; color: #000 !important; } } .detail-refs .ref-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12px; } .detail-refs .ref-list li { padding: 6px 8px; background: #fff; border: 1px solid var(--border); border-radius: 6px; } .detail-refs .ref-list code { background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-size: 11px; } .knowledge-item .knowledge-body { white-space: pre-line; word-break: break-word; } .knowledge-item .link-inline { color: var(--info); text-decoration: none; font-weight: 600; margin-left: 4px; } .knowledge-item .link-inline:hover { text-decoration: underline; } .usage-pill[role="button"] { cursor: pointer; transition: background 0.15s ease; } .usage-pill[role="button"]:hover { background: #dbeafe; } .usage-pill.active { background: var(--primary); color: #fff; } .usage-pill.active strong { color: #fff; } .knowledge-item .knowledge-head-left { display: flex; align-items: flex-start; gap: 10px; } .knowledge-item .knowledge-select { width: auto; margin-top: 4px; cursor: pointer; } .knowledge-item.is-selected { background: #f5f8ff; border-color: #93c5fd; } .knowledge-item mark { background: #fef08a; color: inherit; padding: 0 2px; border-radius: 2px; } .knowledge-item.is-flash { animation: knowledge-flash 1.2s ease-out; } @keyframes knowledge-flash { 0% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } .source-preview { margin: 0; padding-left: 22px; display: grid; gap: 10px; } .source-preview li { padding-left: 4px; } .source-preview .source-preview-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; } .source-preview .source-preview-link:hover { text-decoration: underline; } .source-preview p { margin: 4px 0 0; } .modal-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; } .modal-mask[hidden] { display: none; } .modal { background: #fff; border-radius: 10px; padding: 20px; width: min(640px, 100%); max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.25); display: grid; gap: 14px; } .modal-head { display: flex; justify-content: space-between; align-items: center; } .modal-head h3 { margin: 0; font-size: 18px; } .modal label { display: grid; gap: 6px; } @media (max-width: 920px) { .knowledge-metrics, .knowledge-filters { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .dashboard-row, .dashboard-row-2 { grid-template-columns: 1fr; } .metric-grid-inbox, .metric-grid-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 920px) { .sidebar { position: static; width: auto; } .main { margin-left: 0; padding: 16px; } .topbar, .form-grid, .grid, .status-grid, .summary-grid { grid-template-columns: 1fr; display: grid; } .metric-grid-inbox, .metric-grid-ops { grid-template-columns: 1fr; } .org-box { width: 100%; } } /* Tickets analytics & quick-pills */ .analytics-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; } .analytics-card { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 12px 14px; display: grid; gap: 8px; } .analytics-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .analytics-head h3 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; } .trend-chart { display: grid; gap: 6px; } .trend-svg { width: 100%; height: 100px; display: block; } .trend-legend { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); } .trend-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 4px; vertical-align: middle; } .dot-info { background: var(--info); } .dot-success { background: var(--success); } .breakdown-list { display: grid; gap: 6px; font-size: 12px; } .breakdown-row { display: grid; grid-template-columns: 90px 1fr 28px; align-items: center; gap: 8px; } .breakdown-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .breakdown-bar { position: relative; height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; } .breakdown-bar span { position: absolute; inset: 0 auto 0 0; background: var(--primary); border-radius: 999px; } .breakdown-count { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); } .quick-pills { display: flex; flex-wrap: wrap; gap: 6px; } .quick-pill { background: #eef2f7; color: var(--text); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .quick-pill:hover { background: #e2e8f0; } .quick-pill.is-active { background: var(--primary); color: #fff; border-color: var(--primary); } .quick-pill .pill-count { background: rgba(255, 255, 255, 0.35); color: inherit; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; } .quick-pill:not(.is-active) .pill-count { background: rgba(15, 118, 110, 0.12); color: var(--primary); } @media (max-width: 920px) { .analytics-grid { grid-template-columns: 1fr; } } /* ---- A2: 标签 ---- */ .tags-editor { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; } .tags-editor strong { font-size: 13px; } .tags-editor input[type="text"] { grid-column: 1 / span 2; padding: 6px 10px; font-size: 12px; } .tags-list { display: flex; flex-wrap: wrap; gap: 6px; } .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 10px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .tag-chip-mini { padding: 1px 7px; font-size: 10px; } .tag-chip-remove { background: transparent; color: rgba(255, 255, 255, 0.85); border: 0; cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; } .tag-chip-remove:hover { color: #fff; } /* ---- A3: Slash 命令面板 ---- */ .textarea-wrap { position: relative; } .slash-menu { position: absolute; left: 8px; bottom: calc(100% + 4px); width: min(420px, 92%); max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14); padding: 4px; z-index: 60; display: grid; gap: 2px; } .slash-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; background: transparent; color: var(--text); border: 0; border-radius: 6px; padding: 6px 10px; text-align: left; cursor: pointer; font-size: 13px; } .slash-item strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--info); } .slash-item .muted { font-size: 12px; } .slash-item.is-focus, .slash-item:hover { background: #eef2f7; } /* ---- A4: hover 预览 ---- */ .conv-hover-preview { position: absolute; width: 360px; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14); padding: 10px 12px; z-index: 70; display: grid; gap: 6px; } .hover-preview-head { display: flex; align-items: baseline; gap: 8px; } .hover-preview-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .hover-preview-item { border-top: 1px dashed var(--border); padding-top: 6px; font-size: 13px; } .hover-preview-item:first-child { border-top: 0; padding-top: 0; } /* ========================================================================= * v11 增强样式 — 主题 / 密度 / 模态 / 抽屉 / 多选 / 审计 / 打印 / 内部备注 * ========================================================================= */ /* 主题：暗色 (data-theme="dark" or prefers + data-theme="auto") */ html[data-theme="dark"] { --bg: #0b1220; --surface: #111827; --text: #e5e7eb; --muted: #94a3b8; --border: #1f2937; } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0f172a; color: var(--text); border-color: #334155; } html[data-theme="dark"] .item, html[data-theme="dark"] .panel, html[data-theme="dark"] .status-card, html[data-theme="dark"] .summary-card, html[data-theme="dark"] .visitor-info, html[data-theme="dark"] .chat-thread, html[data-theme="dark"] .chat-bubble { background: #111827; color: var(--text); border-color: #1f2937; } html[data-theme="dark"] .chat-row.from-us .chat-bubble { background: #1e3a8a; border-color: #1d4ed8; } html[data-theme="dark"] .chat-day-divider span, html[data-theme="dark"] kbd { background: #0f172a; border-color: #334155; color: #e5e7eb; } html[data-theme="dark"] .notice { background: #0f172a; } html[data-theme="dark"] .notice.success { background: #052e2b; color: #6ee7b7; border-color: #134e4a; } html[data-theme="dark"] .notice.error { background: #2c0d0d; color: #fecaca; border-color: #7f1d1d; } html[data-theme="dark"] .quick-filter-chip { background: #0f172a; color: var(--text); border-color: #334155; } html[data-theme="dark"] .quick-filter-chip.is-active { background: var(--info); color: #fff; } html[data-theme="dark"] a.link { background: #0f172a; } html[data-theme="dark"] a.link:hover { background: #1e293b; } html[data-theme="dark"] mark.conv-mark { background: #fde047; color: #1c1917; } @media (prefers-color-scheme: dark) { html[data-theme="auto"] { --bg: #0b1220; --surface: #111827; --text: #e5e7eb; --muted: #94a3b8; --border: #1f2937; } html[data-theme="auto"] input, html[data-theme="auto"] select, html[data-theme="auto"] textarea { background: #0f172a; color: var(--text); border-color: #334155; } html[data-theme="auto"] .item, html[data-theme="auto"] .panel, html[data-theme="auto"] .status-card, html[data-theme="auto"] .summary-card, html[data-theme="auto"] .visitor-info, html[data-theme="auto"] .chat-thread, html[data-theme="auto"] .chat-bubble { background: #111827; color: var(--text); border-color: #1f2937; } html[data-theme="auto"] .chat-row.from-us .chat-bubble { background: #1e3a8a; border-color: #1d4ed8; } } /* 密度：紧凑模式压缩行高与内边距 */ html[data-density="compact"] .item { padding: 8px 10px; } html[data-density="compact"] .panel { padding: 12px; gap: 10px; } html[data-density="compact"] .badges { gap: 4px; margin-top: 4px; } html[data-density="compact"] .badge { padding: 2px 6px; font-size: 11px; } html[data-density="compact"] .chat-thread { padding: 8px; max-height: 360px; } /* ========================================================================= * SaaS 后台规范化布局 * 目标：降低装饰感，提高信息密度、扫描效率与企业后台一致性。 * ========================================================================= */ :root { --bg: #f6f7f9; --bg-mesh: none; --surface: #ffffff; --surface-solid: #ffffff; --surface-elev: #ffffff; --text: #101828; --muted: #667085; --muted-2: #98a2b3; --border: #e4e7ec; --border-strong: #d0d5dd; --primary: #2563eb; --primary-2: #0f766e; --info: #2563eb; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --accent: #2563eb; --accent-soft: #eff6ff; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 1px 3px rgba(16, 24, 40, 0.08); --shadow-lg: 0 18px 40px rgba(16, 24, 40, 0.14); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 8px; --radius-xl: 10px; --blur: none; } html, body, button, input, select, textarea, h1, h2, h3, .nav-item, .brand strong, .brand span { letter-spacing: 0 !important; } body { background: var(--bg); background-image: none; font-size: 14px; line-height: 1.45; } .sidebar { width: 268px; padding: 18px 14px; gap: 14px; background: #0f172a; border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; } .brand { min-height: 44px; padding: 0 8px 12px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mark { width: 32px; height: 32px; border-radius: 8px; box-shadow: none; } .brand strong { font-size: 15px; font-weight: 700; } .brand span { margin-top: 1px; font-size: 11px; color: rgba(255, 255, 255, 0.58); } .sidebar-nav { gap: 12px; padding: 0 4px 0 0; } .nav-group { gap: 1px; } .nav-group-label { padding: 8px 10px 5px; font-size: 11px; letter-spacing: 0.06em !important; color: rgba(255, 255, 255, 0.42); } .nav-item, nav a { min-height: 34px; padding: 7px 10px; border-radius: 6px; color: rgba(255, 255, 255, 0.72); font-size: 13px; } .nav-item:hover, nav a:hover { background: rgba(255, 255, 255, 0.07); } .nav-item.is-active, nav a.active { background: rgba(37, 99, 235, 0.22); color: #ffffff; box-shadow: inset 3px 0 0 #60a5fa; } .nav-item.is-active::before { display: none; } .main { margin-left: 268px; padding: 22px 28px 56px; gap: 16px; } .topbar { position: sticky; top: 0; z-index: 40; align-items: center; min-height: 72px; margin: -22px -28px 2px; padding: 16px 300px 14px 28px !important; background: rgba(246, 247, 249, 0.96); border-bottom: 1px solid var(--border); } h1 { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--text); background: none; -webkit-text-fill-color: currentColor; } h2 { font-size: 15px; line-height: 1.35; font-weight: 700; } h3 { font-size: 13px; line-height: 1.35; } p { margin-top: 4px; } .topbar p { max-width: 760px; font-size: 13px; } .topbar-user-host { top: 17px; right: 28px; } .notification-bell-host { top: 17px; right: 236px; } .video-top-refresh { position: fixed; top: 17px; right: 286px; z-index: 72; min-height: 38px; padding: 0 14px; background: #ffffff; box-shadow: var(--shadow-sm); } .video-ops-panel { display: grid; gap: 16px; } .video-metrics-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; } .video-metric-wide { grid-column: span 2; } .video-metric-card, .video-resource-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface); } .video-metric-card span, .video-resource-item span { display: block; color: var(--muted); font-size: 12px; } .video-metric-card strong { display: block; margin-top: 4px; font-size: 20px; } .video-flow-guide { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(180deg, rgba(10, 132, 255, 0.055), rgba(52, 199, 89, 0.035)), var(--surface); } .video-flow-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .video-flow-guide h3 { margin: 0 0 4px; font-size: 15px; } .video-flow-guide p { margin: 0; line-height: 1.45; } .video-flow-steps { display: grid; grid-template-columns: repeat(6, minmax(132px, 1fr)); gap: 8px; } .video-flow-step { min-height: 158px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 10px; border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 8px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .video-flow-index { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: rgba(10, 132, 255, 0.10); color: var(--primary); font-size: 12px; font-weight: 800; } .video-flow-step strong { display: block; margin-bottom: 4px; font-size: 13px; } .video-flow-step p { color: var(--muted); font-size: 12px; } .video-flow-step button { width: 100%; min-height: 32px; } .video-guide-pulse { animation: video-guide-pulse 1250ms ease-out; } @keyframes video-guide-pulse { 0% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.34); } 72% { box-shadow: 0 0 0 10px rgba(10, 132, 255, 0); } 100% { box-shadow: none; } } .video-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .video-resource-list { display: grid; gap: 8px; } .video-asset-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; } .video-asset-item img, .video-asset-file { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); background: rgba(15, 23, 42, 0.04); object-fit: cover; } .video-asset-file { display: grid; place-items: center; color: var(--muted); font-size: 11px; font-weight: 800; } .video-storyboard { display: grid; gap: 10px; } .video-scene { display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface); } .video-scene span { color: var(--muted); font-size: 12px; } .video-step-retry { margin-left: auto; } .topbar-user-trigger, .notification-bell { background: #ffffff; border-color: var(--border); box-shadow: var(--shadow-sm); } .topbar-user-trigger { border-radius: 8px; min-width: 196px; padding: 5px 10px 5px 6px; } .notification-bell { border-radius: 8px; } .panel { gap: 14px; padding: 16px; border-radius: 8px; background: #ffffff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .panel-head { min-height: 32px; gap: 12px; } .panel-head .muted { font-size: 12px; } .metric { min-height: 82px; padding: 14px; border-radius: 8px; background: #ffffff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .metric::before { display: none; } .metric strong { margin-bottom: 4px; font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--text); -webkit-text-fill-color: currentColor; background: none; } .metric span { display: block; font-size: 12px; color: var(--muted); } .metric-link:hover, .item:hover { transform: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); } .metric-info, .metric-warning, .metric-danger { background: #ffffff; } .metric-info { border-left: 3px solid var(--info); } .metric-warning { border-left: 3px solid var(--warning); } .metric-danger { border-left: 3px solid var(--danger); } .dashboard-toolbar { align-items: stretch; } .attention-banner { min-height: 48px; padding: 10px 14px; border-radius: 8px; background: #ffffff; box-shadow: var(--shadow-sm); } .attention-banner strong { font-size: 24px; font-weight: 800; } .attention-banner-busy, .attention-banner-clear { background: #ffffff; box-shadow: var(--shadow-sm); } .attention-banner-busy { border-left: 3px solid var(--warning); } .attention-banner-clear { border-left: 3px solid var(--success); } .dashboard-controls { justify-content: flex-end; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #ffffff; } .dashboard-row { gap: 14px; } .dashboard-row-2 { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); } .metric-grid { gap: 10px; } .metric-grid-inbox { grid-template-columns: repeat(5, minmax(150px, 1fr)); } .metric-grid-ops { grid-template-columns: repeat(4, minmax(160px, 1fr)); } input, select, textarea { min-height: 38px; border-radius: 6px; background: #ffffff; border-color: var(--border); box-shadow: none; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } button, .topbar-user-login, .sidebar-user-login { border-radius: 6px; background: var(--primary); box-shadow: none; } button:hover, .topbar-user-login:hover, .sidebar-user-login:hover { filter: brightness(0.98); box-shadow: none; } button.secondary { background: #ffffff; color: #344054; border: 1px solid var(--border); box-shadow: none; } button.secondary:hover { background: #f9fafb; } a.link { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 9px; border-radius: 6px; background: #eff6ff; color: var(--primary); font-size: 12px; } a.link:hover { background: #dbeafe; } .badge { border-radius: 999px; background: #f2f4f7; border-color: #eaecf0; color: #344054; font-weight: 600; } .badge.warning { background: #fffaeb; color: #b54708; border-color: #fedf89; } .badge.success { background: #ecfdf3; color: #027a48; border-color: #abefc6; } .badge.danger { background: #fef3f2; color: #b42318; border-color: #fecdca; } .item, .status-card, .analytics-card, .channel-card, .engine-row, .urgent-item, .detail-panel, .visitor-info, .chat-thread, .summary-card { border-radius: 8px; background: #ffffff; border-color: var(--border); box-shadow: none; } .status-row { grid-template-columns: 86px minmax(0, 1fr) 44px; } .status-row-bar, .funnel-bar, .lead-source-bar, .breakdown-bar { background: #eef2f6; } .status-row-fill.info, .status-row-fill { background: var(--primary); } .funnel-fill, .lead-source-fill { background: var(--primary); } .spark-line { stroke: var(--primary); filter: none; } .spark-area { fill: rgba(37, 99, 235, 0.10); } .segmented { padding: 3px; background: #f2f4f7; border-radius: 8px; } .segmented-btn { border-radius: 6px; box-shadow: none; } .segmented-btn[aria-pressed="true"] { background: #ffffff; box-shadow: var(--shadow-sm); } .timeline li, #activityFeed li { padding: 8px 0; border-bottom: 1px solid #f2f4f7; } .timeline li:last-child, #activityFeed li:last-child { border-bottom: 0; } .timeline-dot { width: 7px; height: 7px; margin-top: 7px; background: var(--primary); } .channel-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #eff6ff; color: var(--primary); font-size: 11px; font-weight: 800; } .ticket-age-icon { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: currentColor; } .notice, .notice-warning, .notice-error { border-radius: 8px; } html[data-theme="dark"] { --bg: #0b1220; --bg-mesh: none; --surface: #111827; --surface-solid: #111827; --surface-elev: #111827; --text: #e5e7eb; --muted: #94a3b8; --muted-2: #64748b; --border: #1f2937; --border-strong: #334155; --accent: #2563eb; } html[data-theme="dark"] body, html[data-theme="dark"] .topbar { background: #0b1220; } html[data-theme="dark"] .panel, html[data-theme="dark"] .metric, html[data-theme="dark"] .item, html[data-theme="dark"] .status-card, html[data-theme="dark"] .analytics-card, html[data-theme="dark"] .channel-card, html[data-theme="dark"] .engine-row, html[data-theme="dark"] .urgent-item, html[data-theme="dark"] .dashboard-controls, html[data-theme="dark"] .attention-banner, html[data-theme="dark"] .topbar-user-trigger, html[data-theme="dark"] .notification-bell { background: #111827; border-color: #1f2937; } @media (max-width: 1180px) { .metric-grid-inbox, .metric-grid-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-row, .dashboard-row-2 { grid-template-columns: 1fr; } } @media (max-width: 920px) { .sidebar { position: static; width: auto; max-height: none; } .main { margin-left: 0; padding: 14px; } .topbar { position: static; margin: -14px -14px 0; padding: 72px 14px 14px !important; } .topbar-user-host { top: 14px; right: 14px; } .notification-bell-host { top: 14px; right: 64px; } .dashboard-toolbar, .dashboard-controls { align-items: stretch; } .metric-grid-inbox, .metric-grid-ops, .grid, .form-grid, .status-grid, .summary-grid { grid-template-columns: 1fr !important; } } html[data-density="compact"] .chat-bubble { padding: 6px 9px; } html[data-density="compact"] .chat-body { font-size: 13px; line-height: 1.4; } html[data-density="compact"] .chat-extras { font-size: 11px; } /* 顶部 UI prefs */ .topbar-extras { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: min(460px, 44vw); } .ui-prefs { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; align-items: center; } .ui-prefs .mini, button.secondary.mini, select.mini { font-size: 12px; padding: 4px 10px; min-height: 28px; width: auto; } select.mini { padding: 2px 8px; } /* 高级筛选弹出 */ .filter-popout summary { list-style: none; cursor: pointer; } .filter-popout summary::-webkit-details-marker { display: none; } .filter-popout { position: relative; } .filter-popout .as-button { display: inline-flex; align-items: center; gap: 4px; background: #eef2f7; color: var(--text); border-radius: 6px; padding: 8px 12px; min-height: 34px; font-weight: 600; } .filter-popout[open] .as-button { background: #dbeafe; } .filter-popout-body { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); padding: 12px; min-width: 320px; max-width: 480px; z-index: 60; display: grid; gap: 10px; } .filter-popout-body > div { display: grid; gap: 6px; } .multi-select-chips { display: flex; flex-wrap: wrap; gap: 4px; } .ms-chip { background: #eef2f7; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; } .ms-chip:hover { background: #f1f5f9; } .ms-chip.is-on { background: var(--info); color: #fff; border-color: var(--info); } /* 快捷筛选计数 */ .qf-count { color: var(--muted); font-size: 11px; margin-left: 2px; } .quick-filter-chip.is-active .qf-count { color: #e0f2fe; } /* 详情：管理行 */ .conv-manage-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 8px 12px; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; } html[data-theme="dark"] .conv-manage-row { background: #0f172a; } .conv-manage-row input, .conv-manage-row select { padding: 6px 8px; min-height: 30px; } /* 内部备注消息行 */ .chat-row.is-internal-note .chat-bubble { background: #fef3c7; border-color: #fcd34d; border-style: dashed; } html[data-theme="dark"] .chat-row.is-internal-note .chat-bubble { background: #422006; border-color: #92400e; color: #fde68a; } .chat-row.is-internal-note .chat-bubble::before { content: "📝 内部备注 · 仅团队可见"; display: block; font-size: 11px; font-weight: 600; color: #92400e; margin-bottom: 4px; } html[data-theme="dark"] .chat-row.is-internal-note .chat-bubble::before { color: #fde68a; } #conversationReplySubmit.is-internal { background: var(--warning); } /* AI 改写 chip 行 */ .tone-row { border-top: 1px dashed var(--border); padding-top: 6px; } /* 审计时间线 */ .audit-panel { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: grid; gap: 8px; } html[data-theme="dark"] .audit-panel { background: #0f172a; } .audit-panel-head { display: flex; align-items: center; justify-content: space-between; } .audit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 280px; overflow: auto; } .audit-list li { padding: 6px 8px; border-left: 3px solid var(--primary); background: #fff; border-radius: 4px; font-size: 13px; } html[data-theme="dark"] .audit-list li { background: #111827; } .audit-line { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; } /* 空状态 */ .empty-state { padding: 32px 24px; text-align: center; border: 1px dashed var(--border); border-radius: 8px; color: var(--text); display: grid; gap: 8px; } .empty-state code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } html[data-theme="dark"] .empty-state code { background: #1e293b; } /* 模态 backdrop & 通用 modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; } html[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.6); } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: min(720px, 92vw); max-height: 76vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2); overflow: hidden; } .modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); } .modal-body { padding: 16px; overflow: auto; } .help-table { width: 100%; border-collapse: collapse; } .help-table th, .help-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 13px; } .help-table th { color: var(--muted); font-weight: 600; } .help-table td:first-child { white-space: nowrap; width: 240px; } /* Cmd+K */ .modal.cmdk { padding: 0; } .modal.cmdk input { border: 0; border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; padding: 14px 16px; font-size: 15px; } .cmdk-results { max-height: 50vh; overflow: auto; } .cmdk-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border); } .cmdk-item.is-active { background: #e0f2fe; } html[data-theme="dark"] .cmdk-item.is-active { background: #1e3a8a; } .cmdk-foot { padding: 8px 16px; border-top: 1px solid var(--border); text-align: right; } .cmdk-empty { padding: 20px; text-align: center; } /* 抽屉（旧 .drawer 加宽到 720 px） */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 96vw); background: var(--surface-elev); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-left: 1px solid var(--border); box-shadow: -16px 0 48px rgba(15, 23, 42, 0.18); display: flex; flex-direction: column; z-index: 180; animation: drawer-slide-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); } .drawer-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .drawer-body { padding: 16px 18px; overflow: auto; display: grid; gap: 12px; } .drawer-footer { padding: 12px 18px; border-top: 1px solid var(--border); } @keyframes drawer-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ===== 全站「列表详情」自动右侧滑出 ===== 命中常见的内嵌详情容器：tickets / conversations / leads / projects / knowledge 等。 这些元素本被各页面以"展开在列表底部"的形式渲染；CSS 强制提升为右侧固定抽屉， 保留原 DOM 结构与事件，不修改每个页面的 JS。 */ .ticket-detail, .ticket-detail-panel, .conv-detail-panel, .conv-detail, .lead-detail, .lead-detail-panel, .project-detail, .project-detail-panel, .knowledge-item-detail, .knowledge-detail, .item-detail, .item-detail-panel, .review-detail, .outbound-detail, .contact-detail, .channel-detail, /* 兜底：任何 id 以 DetailPanel / Detail 结尾的容器（如 #videoDetailPanel） */ [id$="DetailPanel"], .panel[id$="Detail"] { position: fixed !important; top: 0; right: 0; bottom: 0; width: min(760px, 96vw) !important; max-width: none !important; margin: 0 !important; padding: 20px 22px 24px !important; background: var(--surface-elev) !important; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-left: 1px solid var(--border) !important; border-top: 0 !important; border-radius: 0 !important; box-shadow: -16px 0 48px rgba(15, 23, 42, 0.18) !important; z-index: 180; overflow-y: auto; overflow-x: hidden; display: grid; gap: 16px; align-content: start; animation: drawer-slide-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* 当详情元素 hidden / display:none 时不显示遮罩 */ .ticket-detail[hidden], .ticket-detail-panel[hidden], .conv-detail-panel[hidden], .conv-detail[hidden], .lead-detail[hidden], .lead-detail-panel[hidden], .project-detail[hidden], .project-detail-panel[hidden], .knowledge-item-detail[hidden], .knowledge-detail[hidden], .item-detail[hidden], .item-detail-panel[hidden], .review-detail[hidden], .outbound-detail[hidden], .contact-detail[hidden], .channel-detail[hidden], [id$="DetailPanel"][hidden], .panel[id$="Detail"][hidden] { display: none !important; } /* 详情抽屉里嵌套 .detail-title / .item / pre 等的视觉微调 */ .ticket-detail .detail-title, .conv-detail-panel .detail-title { margin-top: 0; } /* 右侧抽屉打开时的页面遮罩（由 common.js 注入并维护） */ .global-drawer-backdrop { position: fixed; inset: 0; background: rgba(11, 14, 20, 0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 170; animation: drawer-backdrop-in 200ms ease both; } @keyframes drawer-backdrop-in { from { opacity: 0; } to { opacity: 1; } } /* 详情抽屉自带「✕」关闭按钮（由 common.js 注入） */ .global-drawer-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); border: 1px solid var(--border); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; transition: background var(--transition); } .global-drawer-close:hover { background: rgba(15, 23, 42, 0.12); } /* 响应式：窄屏全屏抽屉 */ @media (max-width: 720px) { .drawer, .ticket-detail, .ticket-detail-panel, .conv-detail-panel, .lead-detail, .lead-detail-panel, .project-detail, .project-detail-panel, .knowledge-item-detail, .knowledge-detail, .item-detail, .item-detail-panel, .review-detail, .outbound-detail, .contact-detail, .channel-detail, [id$="DetailPanel"], .panel[id$="Detail"] { width: 100vw !important; } } .star-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: #fff; } html[data-theme="dark"] .star-item { background: #111827; } .star-body { white-space: pre-wrap; padding: 6px 0; font-size: 13px; } /* 打印样式 */ @media print { body * { visibility: hidden !important; } body.printing-conversation #conversationDetailPanel, body.printing-conversation #conversationDetailPanel * { visibility: visible !important; } body.printing-conversation #conversationDetailPanel { position: absolute; inset: 0; padding: 0; border: 0; box-shadow: none; } body.printing-conversation .conv-toolbar, body.printing-conversation #conversationReplyForm, body.printing-conversation .msg-search-row, body.printing-conversation #conversationAuditPanel, body.printing-conversation .new-msgs-indicator { display: none !important; } body.printing-conversation .chat-thread { max-height: none !important; overflow: visible !important; background: #fff !important; border: 0 !important; padding: 0 !important; } body.printing-conversation .chat-bubble { box-shadow: none !important; page-break-inside: avoid; } } /* 标签徽章 / 行内按钮通用 */ .tag-badge { font-weight: 600; } button.secondary.mini, .button.mini { width: auto; } /* 修一些重复定义可能的 a.link 行高问题（暗色下） */ html[data-theme="dark"] .badge { background: #1e293b; color: #cbd5e1; } html[data-theme="dark"] .badge.success { background: #052e2b; color: #6ee7b7; } html[data-theme="dark"] .badge.warning { background: #422006; color: #fde68a; } html[data-theme="dark"] .badge.danger { background: #2c0d0d; color: #fecaca; } /* 加载骨架（P2-7） */ .skeleton-row { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; } html[data-theme="dark"] .skeleton-row { background: #111827; } .skeleton-line { height: 12px; background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%); background-size: 200% 100%; border-radius: 4px; animation: skeleton-shimmer 1.4s ease infinite; } html[data-theme="dark"] .skeleton-line { background: linear-gradient(90deg, #1f2937 0%, #334155 50%, #1f2937 100%); background-size: 200% 100%; } .skeleton-line.short { width: 40%; } .skeleton-line.medium { width: 70%; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===================================================== */ /* Tickets P0+P1 增强：toast / undo / 视图切换 / 密度 / 表格 / 看板 / 标签 / 骨架 / AI 回复 */ /* ===================================================== */ .toast-stack { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .toast { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: #eff6ff; color: var(--text); font-size: 13px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); transition: opacity 0.2s, transform 0.2s; } .toast.is-leaving { opacity: 0; transform: translateX(10px); } .toast-success { background: #ecfdf5; border-color: #99f6e4; color: #065f46; } .toast-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .toast-info { background: #eff6ff; } .undo-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 12px; background: #111827; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .undo-bar button { background: #fff; color: #111827; padding: 6px 12px; border-radius: 999px; font-size: 12px; } .view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .view-btn { background: #fff; color: var(--text); border: 0; border-right: 1px solid var(--border); padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; } .view-btn:last-child { border-right: 0; } .view-btn.is-active { background: var(--primary); color: #fff; } /* 密度切换 */ body[data-density="compact"] .item { padding: 8px 10px; } body[data-density="compact"] .item-head { gap: 8px; } body[data-density="compact"] .badges { gap: 4px; margin-top: 4px; } body[data-density="compact"] .item p { font-size: 12px; } body[data-density="compact"] .ticket-tags { gap: 3px; } /* 标签胶囊 */ .ticket-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .tag-pill { display: inline-block; background: #f0f9ff; color: #075985; border: 1px solid #bae6fd; border-radius: 999px; padding: 2px 8px; font-size: 11px; cursor: pointer; } .tag-pill:hover { background: #e0f2fe; } .tag-edit { flex: 1; width: auto; min-width: 200px; padding: 6px 8px; } /* 行内 assignee 选择器 */ .ticket-assignee-select { width: auto; min-width: 110px; padding: 6px 10px; } /* 表格视图 */ .ticket-table-inner { width: 100%; border-collapse: collapse; font-size: 13px; } .ticket-table-inner thead th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); background: #f8fafc; position: sticky; top: 0; } .ticket-table-inner tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .ticket-table-inner tbody tr:hover { background: #fafbfc; } .td-summary a { color: var(--text); text-decoration: none; } .td-summary a:hover { text-decoration: underline; } .td-actions { white-space: nowrap; } .td-actions button { padding: 4px 8px; font-size: 11px; margin-left: 2px; } .td-tags .tag-pill { margin-right: 2px; } /* 看板视图 */ .kanban-grid { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; } .kanban-col { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 10px; min-height: 260px; display: flex; flex-direction: column; gap: 8px; } .kanban-col.is-drop-target { border-color: var(--primary); background: #ecfdf5; } .kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px; font-size: 12px; } .kanban-col-body { display: flex; flex-direction: column; gap: 6px; min-height: 100px; } .kanban-card { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; cursor: grab; display: grid; gap: 4px; font-size: 12px; } .kanban-card.is-urgent { border-left: 3px solid var(--danger); } .kanban-card.is-high { border-left: 3px solid var(--warning); } .kanban-card.is-dragging { opacity: 0.4; } .kanban-card p { margin: 0; color: var(--text); } /* 骨架屏 */ .skeleton { background: #fafbfc; } .sk-line { height: 12px; margin: 6px 0; background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%); background-size: 200% 100%; animation: sk-shimmer 1.4s infinite; border-radius: 4px; } .sk-line.w-30 { width: 30%; } .sk-line.w-60 { width: 60%; } .sk-line.w-80 { width: 80%; } @keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* AI 回复 */ .ai-reply { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; } .ai-reply pre { background: transparent; border: 0; padding: 0; margin: 0 0 6px; white-space: pre-wrap; font-family: inherit; font-size: 13px; } .ai-reply-slot:not(:empty) { margin-bottom: 8px; } @media (max-width: 1100px) { .kanban-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); } .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .analytics-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .kanban-grid { grid-template-columns: 1fr; } .ticket-table-inner { font-size: 12px; } } /* ========================================================================= * v12 增强样式 — 加载更多 / 指标行 / typing / 提及 / 待审核 / 撤回 / 移动端 * ========================================================================= */ /* P1-1 加载更多 */ .load-more-bar { display: flex; justify-content: center; padding: 8px 0; } .load-more-bar button { width: auto; padding: 8px 18px; } /* P3-8 指标小卡（顶部摘要旁边） */ .metrics-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .metric.mini { min-width: 110px; min-height: auto; padding: 8px 12px; } .metric.mini strong { font-size: 18px; } .metric.mini span { font-size: 11px; color: var(--muted); } /* P2-3 typing 横幅 */ .typing-banner { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 6px; padding: 4px 10px; font-size: 12px; margin-bottom: 6px; } html[data-theme="dark"] .typing-banner { background: #422006; color: #fde68a; border-color: #92400e; } /* P2-5 @ 提及 chip 与下拉 */ .mention-tag { background: #dbeafe; color: #1d4ed8; border-radius: 4px; padding: 0 4px; font-weight: 600; } html[data-theme="dark"] .mention-tag { background: #1e3a8a; color: #93c5fd; } .mention-popup { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); z-index: 220; min-width: 160px; max-height: 220px; overflow: auto; padding: 4px 0; } .mention-item { padding: 6px 12px; cursor: pointer; font-size: 13px; } .mention-item.is-active, .mention-item:hover { background: #e0f2fe; } html[data-theme="dark"] .mention-item.is-active, html[data-theme="dark"] .mention-item:hover { background: #1e3a8a; } /* P2-6 待审核草稿（复用 .drawer） */ .pending-draft-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: grid; gap: 6px; background: #fff; } html[data-theme="dark"] .pending-draft-item { background: #111827; } .pending-draft-head { display: flex; justify-content: space-between; align-items: center; } .pending-draft-body { white-space: pre-wrap; font-size: 13px; padding: 6px 0; line-height: 1.5; } /* P3-10 撤回 chip：附着在已发气泡内 */ .recall-chip { display: inline-block; margin-top: 6px; padding: 2px 8px; background: #fde68a; color: #78350f; border: 1px solid #fcd34d; border-radius: 999px; font-size: 11px; cursor: pointer; } .recall-chip:hover { background: #fcd34d; } html[data-theme="dark"] .recall-chip { background: #422006; color: #fde68a; border-color: #92400e; } /* P3-3 移动端 (≤ 920px)：堆叠布局 + 工具栏可折叠 */ @media (max-width: 920px) { .sidebar { position: static; width: 100%; padding: 12px 16px; } .sidebar nav { grid-template-columns: repeat(3, 1fr); gap: 4px; } .sidebar nav a { padding: 8px 6px; font-size: 12px; text-align: center; } .main { margin-left: 0; padding: 12px; gap: 12px; } .topbar { flex-direction: column; align-items: stretch; gap: 12px; } .topbar-extras { min-width: 0; } .ui-prefs { justify-content: flex-start; } .conv-toolbar { gap: 6px; } .conv-toolbar select, .conv-toolbar input[type="search"] { flex: 1 1 calc(50% - 6px); min-width: 0; } .conv-toolbar input[type="search"] { flex-basis: 100%; } .quick-filter-chips { gap: 4px; } .quick-filter-chip { font-size: 11px; padding: 3px 8px; } .bulk-bar { flex-direction: column; gap: 8px; align-items: stretch; } .bulk-bar button { width: 100%; } .filter-popout-body { right: auto; left: 0; width: calc(100vw - 32px); max-width: none; } .chat-bubble { max-width: 92% !important; } .form-grid { grid-template-columns: 1fr !important; } .modal { width: 96vw; max-height: 88vh; } .drawer { width: 100vw; } .conv-manage-row { flex-direction: column; align-items: stretch; } .conv-manage-row > label { width: 100%; } } /* 小屏：底部留出空间 */ @media (max-width: 920px) { body { padding-bottom: 16px; } } /* === 修复：hidden 属性应优先于自定义 display 规则（modal/drawer 用 flex 会覆盖 [hidden]） === */ [hidden] { display: none !important; } /* ===================================================== */ /* 平台化追加：SSE 指示器 / Modal / 相似工单 / Webhook 列表 / 打印 / 邮件入口示例 */ /* ===================================================== */ .sse-indicator { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; } .sse-indicator .dot { width: 8px; height: 8px; border-radius: 999px; background: #cbd5e1; } .sse-indicator.is-connected .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); } .sse-indicator.is-disconnected .dot { background: var(--danger); } .modal-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(15, 23, 42, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; overflow-y: auto; } .modal-card { width: min(780px, 95vw); background: #fff; border-radius: 12px; padding: 22px 26px; box-shadow: 0 16px 48px rgba(15, 23, 42, 0.25); display: grid; gap: 18px; } .modal-head { display: flex; align-items: center; justify-content: space-between; } .modal-head h2 { margin: 0; font-size: 18px; } .modal-head button { padding: 4px 12px; font-size: 16px; line-height: 1; } .modal-section { border-top: 1px solid var(--border); padding-top: 14px; } .modal-section h3 { margin: 0 0 8px; font-size: 14px; } .inline-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .inline-label input { padding: 6px 8px; } .code-block { display: block; background: #f8fafc; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; white-space: pre-wrap; } .webhook-list { display: grid; gap: 6px; } .webhook-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: #f8fafc; font-size: 12px; } .similar-slot { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); } .similar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; } .similar-list li a { color: var(--info); text-decoration: none; } .similar-list li a:hover { text-decoration: underline; } /* 打印工单：只显示目标卡片 */ @media print { body.printing-ticket .sidebar, body.printing-ticket .topbar, body.printing-ticket .panel:not(:has(.print-target)), body.printing-ticket #bulkActionBar, body.printing-ticket #savedViewsBar, body.printing-ticket #quickPills, body.printing-ticket .filter-grid, body.printing-ticket .filter-chips, body.printing-ticket #loadMoreBtn, body.printing-ticket #toastStack, body.printing-ticket .undo-bar, body.printing-ticket .modal-backdrop, body.printing-ticket .item-actions, body.printing-ticket .ticket-select, body.printing-ticket .panel-head, body.printing-ticket .analytics-grid, body.printing-ticket #ticketStats { display: none !important; } body.printing-ticket .item:not(.print-target) { display: none !important; } body.printing-ticket .main { margin-left: 0; padding: 0; } body.printing-ticket .ticket-item { border: 0 !important; box-shadow: none !important; } } /* ---- B6: 草稿 vs 访客原文 diff 弹层 ---- */ .draft-diff-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); display: grid; place-items: center; z-index: 999; } .draft-diff-modal { background: #fff; border-radius: 10px; width: min(900px, 92vw); max-height: 84vh; overflow-y: auto; display: grid; gap: 12px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32); } .draft-diff-head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .draft-diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 18px; } .draft-diff-cols pre { white-space: pre-wrap; background: #f8fafc; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.6; border: 1px solid var(--border); margin: 6px 0 0; } .draft-diff-cols h4 { margin: 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .draft-diff-summary { padding: 0 18px 18px; display: grid; gap: 8px; font-size: 13px; } .diff-added { background: #dcfce7; color: #065f46; padding: 1px 4px; border-radius: 3px; } .diff-removed { background: #fee2e2; color: #991b1b; padding: 1px 4px; border-radius: 3px; text-decoration: line-through; } @media (max-width: 820px) { .draft-diff-cols { grid-template-columns: 1fr; } } /* ---- A6: 客服效率统计条 ---- */ .agent-stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding-bottom: 6px; } .agent-stat-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; background: #fff; display: grid; gap: 2px; } .agent-stat-card strong { font-size: 22px; line-height: 1.1; } .agent-stat-card span { color: var(--muted); font-size: 12px; } .agent-stat-card.success { border-color: #99f6e4; background: #ecfdf5; } .agent-stat-card.danger { border-color: #fecaca; background: #fef2f2; } .agent-stat-card.success strong { color: #065f46; } .agent-stat-card.danger strong { color: #991b1b; } /* ---- B4: 摘要下一步 一键转 actions ---- */ .summary-next-actions { display: inline-flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; } .summary-next-actions button { padding: 4px 10px; font-size: 12px; } /* ---- A7: 移动端适配 ---- */ @media (max-width: 820px) { .main { margin-left: 0; padding: 14px; } .sidebar { position: static; width: auto; } .conv-toolbar { flex-direction: column; align-items: stretch; } .conv-toolbar > * { width: 100%; } .topbar { flex-direction: column; } .topbar-extras { width: 100%; } .org-box { width: 100%; } .chat-thread { height: 60dvh; min-height: 200px; max-height: 80dvh; } .draft-diff-cols { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .summary-grid { grid-template-columns: repeat(2, 1fr); } .summary-next-actions { display: flex; margin-left: 0; margin-top: 6px; } .agent-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bulk-bar { flex-direction: column; align-items: stretch; } .msg-search-row { flex-wrap: wrap; } } @media (max-width: 480px) { .agent-stats-strip { grid-template-columns: 1fr 1fr; } .summary-grid { grid-template-columns: 1fr; } .chat-bubble { max-width: 100%; } h1 { font-size: 22px; } h2 { font-size: 16px; } } /* ---- D2: 知识库 AI 抽取面板 ---- */ .ai-extract-panel { border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; padding: 12px 14px; display: grid; gap: 10px; } .ai-extract-head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; } .ai-extract-head strong { font-size: 13px; } .ai-extract-panel textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #fff; } #aiExtractCandidates .item p { white-space: pre-line; } /* ========================================================================= * v13 增强样式 — 附件 / emoji / 语音 / KB / 表格视图 / 粘性回复 / 多 tab * ========================================================================= */ .v13-extras { border-top: 1px dashed var(--border); padding-top: 6px; } .v13-extras .as-button { display: inline-flex; align-items: center; gap: 6px; background: #eef2f7; color: var(--text); border: 0; border-radius: 6px; padding: 4px 10px; min-height: 28px; font-size: 12px; font-weight: 600; cursor: pointer; } .v13-extras .as-button:hover { background: #dbeafe; } /* 附件 chips */ .attach-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; } .attach-chip { background: #e0f2fe; color: #075985; border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; } .attach-chip button { background: transparent; color: #075985; border: 0; cursor: pointer; padding: 0 4px; font-weight: 700; } /* 消息内附件展示 */ .attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .attach-thumb img { max-width: 160px; max-height: 160px; border-radius: 6px; border: 1px solid var(--border); } .attach-file { display: inline-flex; align-items: center; gap: 4px; background: #f1f5f9; color: var(--text); border-radius: 6px; padding: 4px 8px; font-size: 12px; text-decoration: none; border: 1px solid var(--border); } .attach-file:hover { background: #dbeafe; } html[data-theme="dark"] .attach-file { background: #1e293b; color: var(--text); border-color: #334155; } /* emoji popup */ .emoji-popup { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); z-index: 210; padding: 6px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-width: 280px; } .emoji-popup button { background: transparent; border: 0; padding: 4px; cursor: pointer; font-size: 18px; } .emoji-popup button:hover { background: #f1f5f9; border-radius: 4px; } /* KB 引用 popup */ .kb-cite-popup { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); z-index: 210; width: min(420px, 92vw); max-height: 360px; display: flex; flex-direction: column; } .kb-cite-head { display: flex; gap: 6px; align-items: center; padding: 6px; border-bottom: 1px solid var(--border); } .kb-cite-head input { padding: 6px 8px; min-height: 30px; } .kb-cite-list { overflow: auto; padding: 4px; display: grid; gap: 4px; } .kb-cite-item { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: #fff; } .kb-cite-item:hover { background: #f1f5f9; border-color: #94a3b8; } .kb-cite-body { font-size: 12px; color: var(--muted); margin-top: 2px; } html[data-theme="dark"] .kb-cite-item { background: #111827; } /* 表格视图（density=table）：list 改成行 */ html[data-density="table"] .conv-item { padding: 6px 10px; display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; } html[data-density="table"] .conv-item .item-head { display: contents; } html[data-density="table"] .conv-item .badges { margin-top: 0; flex-wrap: nowrap; overflow: hidden; } html[data-density="table"] .conv-item .badge { font-size: 10px; padding: 1px 5px; white-space: nowrap; } html[data-density="table"] .conv-item-title { min-width: 0; align-items: center; } html[data-density="table"] .conv-item-title strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } html[data-density="table"] .conv-item-title small { display: none; } /* 粘性回复（detail panel 内的回复 form 始终可见） */ @media (min-height: 600px) { #conversationReplyForm { position: sticky; bottom: 0; background: var(--surface); z-index: 5; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--border); } } /* tab peek 高亮（多 tab 协调） */ .conv-item.is-tab-peek { box-shadow: inset 0 0 0 2px #fbbf24; } /* 设置抽屉 sections */ #v13SettingsDrawer .drawer-body section { padding: 8px 0; border-bottom: 1px dashed var(--border); display: grid; gap: 8px; } #v13SettingsDrawer .drawer-body section:last-child { border-bottom: 0; } #v13SettingsDrawer textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } /* 企业能力补齐：audit / canned / attach / kb-focus / chat / merge / snooze / sched */ .audit-list { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; } .audit-item { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fafbfc; font-size: 12px; } .canned-list { display: grid; gap: 6px; } .attach-list, .children-list, .sched-list, .ai-chat-slot { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); display: grid; gap: 4px; font-size: 12px; } .attach-item { display: flex; align-items: center; gap: 8px; } .sched-item { padding: 4px 0; } .kb-focus { outline: 2px solid var(--info); outline-offset: 2px; } .chat-log { max-height: 220px; overflow-y: auto; display: grid; gap: 4px; padding: 6px; background: #f8fafc; border-radius: 6px; } .chat-msg { padding: 4px 8px; border-radius: 6px; font-size: 12px; } .chat-msg.user { background: #e0f2fe; } .chat-msg.assistant { background: #ecfdf5; white-space: pre-wrap; } .chat-input { width: auto; flex: 1; padding: 6px 10px; } .chat-send { padding: 6px 14px; } .snooze-row { flex-wrap: wrap; } .snooze-row input[type="datetime-local"] { width: auto; padding: 6px; } @media (max-width: 720px) { .snooze-row { flex-direction: column; align-items: stretch; } } /* ===== 暗色模式 ===== */ body[data-theme="dark"] { --bg: #0b1220; --surface: #111827; --text: #e5e7eb; --muted: #94a3b8; --border: #1f2937; --primary: #14b8a6; --info: #60a5fa; --success: #34d399; --warning: #fbbf24; --danger: #f87171; } body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea { background: #1f2937; color: var(--text); border-color: var(--border); } body[data-theme="dark"] .panel, body[data-theme="dark"] .item, body[data-theme="dark"] .metric, body[data-theme="dark"] .modal-card, body[data-theme="dark"] .analytics-card, body[data-theme="dark"] .kanban-col, body[data-theme="dark"] .kanban-card { background: var(--surface); border-color: var(--border); color: var(--text); } body[data-theme="dark"] .ticket-table-inner thead th { background: #1f2937; color: var(--muted); } body[data-theme="dark"] .toast { background: #1f2937; color: var(--text); border-color: var(--border); } body[data-theme="dark"] .chip { background: #1e3a8a; color: #bfdbfe; } body[data-theme="dark"] .badge { background: #334155; color: var(--text); } body[data-theme="dark"] .breakdown-bar { background: #1f2937; } body[data-theme="dark"] .code-block, body[data-theme="dark"] pre, body[data-theme="dark"] .result { background: #0b1220; color: #cbd5e1; } /* 附件 inline preview */ .attach-preview { max-width: 240px; max-height: 160px; border: 1px solid var(--border); border-radius: 6px; margin-top: 4px; } .attach-preview-iframe { width: 100%; height: 280px; border: 1px solid var(--border); border-radius: 6px; } /* 客户档案侧栏 */ .contact-sidebar { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: #f8fafc; font-size: 12px; } body[data-theme="dark"] .contact-sidebar { background: #1f2937; } .contact-sidebar h4 { margin: 4px 0 6px; font-size: 12px; color: var(--muted); } /* 工时计时器 */ .timer-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 6px; } .timer-row code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; } /* ---- Pixelle-Video: 视频任务条 ---- */ .video-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; overflow: hidden; background: radial-gradient(640px 240px at 88% 0%, rgba(20, 184, 166, 0.16), transparent 64%), linear-gradient(135deg, rgba(10, 132, 255, 0.10), rgba(255, 255, 255, 0.92) 46%, rgba(20, 184, 166, 0.08)); } .video-topnav { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; min-width: 0; } .video-breadcrumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 600; } .video-breadcrumb a { color: var(--muted); text-decoration: none; } .video-breadcrumb a:hover { color: var(--primary); } .video-breadcrumb span::before, .video-breadcrumb strong::before { content: ">"; margin-right: 8px; color: var(--muted-2); font-weight: 500; } .video-breadcrumb strong { color: var(--text); font-size: 15px; line-height: 1; } .video-hero h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: 0; } .video-hero p { margin: 0; font-size: 14px; line-height: 1.55; } .video-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .video-hero-actions span { display: inline-flex; min-height: 36px; align-items: center; padding: 0 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--border); color: var(--text); font-size: 12px; } .video-workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .video-compose-panel, .video-list-panel, .video-preview-panel { min-width: 0; } .video-preview-panel { position: sticky; top: 16px; } .video-drawer-backdrop { position: fixed; top: var(--video-drawer-offset, 56px); right: 0; bottom: 0; left: 0; z-index: 170; background: rgba(15, 23, 42, 0.38); opacity: 0; transition: opacity 180ms ease; } .video-drawer-backdrop.open { opacity: 1; } .video-drawer { position: fixed; top: var(--video-drawer-offset, 56px); right: 0; bottom: 0; z-index: 180; width: min(640px, calc(100vw - 24px)); display: flex; flex-direction: column; background: var(--surface-elev); border-left: 1px solid var(--border); box-shadow: -18px 0 52px rgba(15, 23, 42, 0.20); transform: translateX(100%); transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); overflow: hidden; } .video-drawer[hidden], .video-drawer-backdrop[hidden] { display: none !important; } .video-drawer.open { transform: translateX(0); } .video-detail-drawer { width: min(680px, calc(100vw - 24px)); } .video-detail-drawer .drawer-body { padding-bottom: 24px; } .video-detail-drawer .video-inspector-title h3 { max-width: 34em; } .video-confirm-backdrop { position: fixed; top: var(--video-drawer-offset, 56px); right: 0; bottom: 0; left: 0; z-index: 210; background: rgba(15, 23, 42, 0.34); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity 180ms ease; } .video-confirm-backdrop.open { opacity: 1; } .video-confirm-dialog { z-index: 220; width: min(440px, calc(100vw - 24px)); } .video-form-dialog { width: min(520px, calc(100vw - 24px)); } .video-form-dialog .video-confirm-copy { width: 100%; } .video-confirm-dialog .drawer-head button { min-width: 64px; white-space: nowrap; } .video-confirm-backdrop[hidden], .video-confirm-dialog[hidden] { display: none !important; } .video-confirm-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; background: rgba(10, 132, 255, 0.10); color: var(--primary); font-weight: 800; } .video-confirm-content { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .video-confirm-dialog.is-danger .video-confirm-icon, #videoConfirmOkBtn.is-danger { background: rgba(255, 69, 58, 0.12); color: var(--danger); } .video-confirm-copy h2, .video-confirm-copy h3 { margin: 0 0 6px; font-size: 16px; } .video-confirm-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; } .video-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; } #videoConfirmOkBtn.is-danger, button.danger { border-color: rgba(255, 69, 58, 0.24); background: rgba(255, 69, 58, 0.10); color: var(--danger); } #videoConfirmOkBtn.is-danger:hover, button.danger:hover { background: rgba(255, 69, 58, 0.16); } .video-drawer .drawer-head { padding: 14px 18px 12px; min-width: 0; } .video-drawer .panel-head { width: 100%; } .video-drawer .panel-head h2 { font-size: 16px; margin-bottom: 4px; } .video-drawer .panel-head p { font-size: 12px; } .video-drawer .drawer-body { flex: 1; overflow: auto; padding: 14px 18px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; } .video-drawer .video-submit-row { position: sticky; bottom: 0; margin: 4px -18px -18px; padding: 14px 18px; background: var(--surface-elev); border-top: 1px solid var(--border); box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.06); } .video-preset-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; } .video-preset { min-width: 0; height: 54px; min-height: 54px; max-height: 54px; width: 100%; display: grid; align-content: center; gap: 4px; text-align: left; border: 1px solid var(--border); background: rgba(248, 250, 252, 0.88); color: var(--text); border-radius: 8px; padding: 10px 12px; box-sizing: border-box; box-shadow: none; overflow: hidden; } .video-preset:hover { border-color: rgba(10, 132, 255, 0.34); background: rgba(10, 132, 255, 0.06); } .video-preset.is-active { border-color: rgba(10, 132, 255, 0.46); background: rgba(10, 132, 255, 0.09); } .video-preset::before { content: none; } .video-preset strong { display: block; min-width: 0; overflow: hidden; color: var(--text); font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .video-preset span { display: block; min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .video-draft-empty { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: rgba(248, 250, 252, 0.72); } .video-draft-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(10, 132, 255, 0.10); color: var(--primary); font-size: 12px; font-weight: 800; } .video-draft-empty > div:nth-child(2) { min-width: 0; } .video-draft-empty strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .video-draft-empty p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; } .video-draft-empty > span { color: var(--muted); font-size: 12px; font-weight: 700; } .field-block { display: grid; gap: 6px; min-width: 0; } .field-block > span { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 600; } .field-block small { color: var(--muted-2); font-weight: 500; } .video-form-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(132px, 0.8fr) minmax(148px, 1fr); gap: 10px; } .video-drawer input, .video-drawer select { min-height: 40px; } .video-drawer textarea { min-height: 118px; } .video-option-grid { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.025); } .video-submit-row { justify-content: flex-end; } .video-risk-hint { border: 1px solid rgba(255, 159, 10, 0.28); background: rgba(255, 159, 10, 0.10); color: #92400e; border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; line-height: 1.6; } .video-preview-card { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); align-items: center; gap: 14px; } .video-preview-frame { position: relative; display: grid; place-items: center; gap: 8px; width: min(100%, 220px); min-height: 320px; margin: 0 auto; padding: 24px; border-radius: 22px; color: #fff; text-align: center; background: radial-gradient(180px 180px at 68% 24%, rgba(50, 214, 196, 0.52), transparent 60%), linear-gradient(160deg, #0f316b 0%, #0a84ff 44%, #12315f 100%); box-shadow: 0 18px 42px rgba(10, 132, 255, 0.24); overflow: hidden; } .video-preview-frame::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 18px; } .video-preview-frame.is-horizontal { width: 100%; aspect-ratio: 16 / 9; min-height: 0; } .video-preview-frame.is-square { width: min(100%, 280px); aspect-ratio: 1; min-height: 0; } .video-preview-frame strong, .video-preview-frame span, .video-preview-play { position: relative; z-index: 1; } .video-preview-frame strong { font-size: 16px; line-height: 1.45; max-width: 15em; } .video-preview-frame span { font-size: 12px; color: rgba(255, 255, 255, 0.70); } .video-preview-play { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } .video-preview-meta { display: grid; gap: 8px; } .video-preview-meta div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.56); } .video-preview-meta span { color: var(--muted); font-size: 12px; } .video-preview-meta strong { color: var(--text); font-size: 12px; text-align: right; } .video-pipeline-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; } .video-pipeline-mini span { min-height: 28px; display: grid; place-items: center; border-radius: 999px; background: rgba(48, 209, 88, 0.12); color: #166534; border: 1px solid rgba(48, 209, 88, 0.20); font-size: 11px; font-weight: 600; } .video-list-controls { display: grid; grid-area: controls; grid-template-columns: auto minmax(260px, 520px) minmax(132px, 160px); gap: 8px; align-items: center; min-width: 0; justify-content: start; } .video-list-controls input { min-width: 0; width: 100%; } .video-list-controls select.is-board-mode { opacity: 0.7; } .video-list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "controls actions"; justify-content: space-between; align-items: center; gap: 10px 12px; margin-bottom: 14px; padding: 0; border: 0; border-radius: 0; background: transparent; } .video-help-wrap { position: relative; flex: 0 0 auto; } .video-help-btn { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; border-radius: 8px; background: rgba(10, 132, 255, 0.08); color: var(--primary); font-weight: 800; } .video-help-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 320px; display: none; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.55; } .video-help-popover strong, .video-help-popover span { display: block; } .video-help-popover strong { color: var(--text); font-size: 15px; line-height: 1.45; } .video-help-popover span { margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.5; } .video-help-wrap:hover .video-help-popover, .video-help-wrap:focus-within .video-help-popover { display: block; } .video-credits-pill { display: inline-flex; min-height: 34px; align-items: center; white-space: nowrap; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(248, 250, 252, 0.86); color: var(--text); font-size: 12px; } .video-toolbar-left { grid-area: actions; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; } .video-toolbar-left > button, .video-view-switch { flex: 0 0 auto; } .video-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .video-stat { padding: 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.70); border: 1px solid var(--border); } .video-stat span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; } .video-stat strong { font-size: 22px; line-height: 1; } .video-bulkbar { position: sticky; bottom: 14px; z-index: 35; display: flex; justify-content: flex-start; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px; border: 1px solid rgba(10, 132, 255, 0.28); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .video-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 8px 0 0; color: var(--muted); font-size: 12px; } #videoPageInfo { order: 2; white-space: nowrap; } .video-page-actions { order: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .video-page-actions label { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; } .video-page-actions select { min-height: 32px; padding: 0 28px 0 10px; } .video-page-actions button { min-height: 32px; padding: 0 10px; } .video-page-actions strong { color: var(--text); font-size: 12px; } .video-topic-trigger { cursor: pointer; } .video-topic-trigger:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .video-empty-state { display: grid; place-items: center; gap: 6px; min-height: 180px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: rgba(248, 250, 252, 0.72); color: var(--muted); } .video-empty-state strong { color: var(--text); font-size: 14px; } .video-empty-state span { font-size: 12px; } .video-more { position: relative; display: inline-flex; } .video-more-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 128px; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-elev); box-shadow: var(--shadow-lg); } .video-more-menu.is-floating { position: fixed; right: auto; z-index: 1000; } .video-more-menu[hidden] { display: none !important; } .video-more-menu button, .video-more-menu a { justify-content: flex-start; width: 100%; min-height: 30px; padding: 0 9px; border: 0; background: transparent; color: var(--text); text-align: left; box-shadow: none; } .video-more-menu button:hover, .video-more-menu a:hover { background: rgba(15, 23, 42, 0.05); } .video-board-filter-note { margin-bottom: 10px; padding: 8px 10px; border: 1px solid rgba(10, 132, 255, 0.18); border-radius: var(--radius-sm); background: rgba(10, 132, 255, 0.06); color: var(--muted); font-size: 12px; } .video-bulkbar.is-empty { visibility: hidden; pointer-events: none; opacity: 0; transform: translateY(12px); } .video-view-switch { display: inline-flex; align-items: center; width: max-content; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; white-space: nowrap; } .video-view-switch button { min-width: 56px; min-height: 34px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); box-shadow: none; white-space: nowrap; word-break: keep-all; } .video-toolbar-left button { white-space: nowrap; } .video-view-switch button.is-active { background: rgba(10, 132, 255, 0.10); color: var(--primary); } .video-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-start; width: 100%; } .video-select-all { white-space: nowrap; } .video-jobs-list { display: grid; gap: 10px; padding-bottom: 12px; } .video-jobs-list.is-table { display: block; padding-bottom: 0; } .video-table-wrap { overflow-x: auto; overflow-y: visible; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-elev); box-shadow: var(--shadow-sm); } .video-table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: 12px; } .video-table th, .video-table td { height: 54px; padding: 6px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; } .video-table th { color: var(--muted); font-size: 11px; font-weight: 700; background: rgba(248, 250, 252, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .video-table tbody tr { transition: background var(--transition); } .video-table tbody tr:hover, .video-table tbody tr.is-selected { background: rgba(10, 132, 255, 0.06); } .video-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); } .video-table td:first-child, .video-table th:first-child { width: 52px; } .video-table th:nth-child(4), .video-table td:nth-child(4), .video-table th:nth-child(5), .video-table td:nth-child(5), .video-table th:nth-child(6), .video-table td:nth-child(6) { width: 72px; white-space: nowrap; } .video-table th:nth-child(7), .video-table td:nth-child(7) { width: 118px; } .video-table td:last-child { position: sticky; right: 0; z-index: 4; width: 1%; min-width: 176px; max-width: 240px; text-align: left; white-space: nowrap; background: var(--surface-elev); } .video-table th:last-child { position: sticky; right: 0; z-index: 6; width: 1%; min-width: 176px; max-width: 240px; text-align: left; white-space: nowrap; background: rgba(248, 250, 252, 0.98); } .video-table-wrap.is-x-scroll .video-table td:last-child, .video-table-wrap.is-x-scroll .video-table th:last-child { box-shadow: -10px 0 18px rgba(15, 23, 42, 0.06); } .video-table tbody tr:hover td:last-child, .video-table tbody tr.is-selected td:last-child { background: #eef6ff; } .video-floating-head { position: fixed; z-index: 90; overflow: hidden; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: rgba(248, 250, 252, 0.98); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); pointer-events: none; } .video-floating-head .video-table { min-width: 880px; } .video-floating-head th { border-top: 0; } .video-error-tip, .video-table-error { max-width: 42em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== Reusable SaaS list page template ===== */ .saas-page .topbar { padding-right: 300px !important; } .saas-breadcrumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 600; } .saas-breadcrumb a { color: var(--muted); text-decoration: none; } .saas-breadcrumb span::before, .saas-breadcrumb strong::before { content: ">"; margin-right: 8px; color: var(--muted-2); font-weight: 500; } .saas-breadcrumb-single strong::before { content: none; margin-right: 0; } .app-dialog-root { position: fixed; inset: 0; z-index: 10000; display: block; padding: 0; } .app-dialog-root[hidden] { display: none !important; } .app-dialog-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.24); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .app-dialog { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, calc(100vw - 28px)); max-height: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--border); border-top: 0; border-right: 0; border-bottom: 0; border-radius: 16px 0 0 16px; background: var(--surface-elev); box-shadow: -18px 0 48px rgba(15, 23, 42, 0.18); overflow: hidden; transform: translateX(0); animation: app-dialog-drawer-in 0.18s ease-out; } @keyframes app-dialog-drawer-in { from { transform: translateX(24px); opacity: 0.72; } to { transform: translateX(0); opacity: 1; } } .app-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); } .app-dialog-head h2 { margin: 0; font-size: 18px; } .app-dialog-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; } .app-dialog-close { min-width: 34px; min-height: 34px; padding: 0; font-size: 18px; line-height: 1; } .app-dialog-body { display: grid; gap: 12px; min-width: 0; overflow: auto; align-content: start; padding: 18px; } .app-dialog-body p { margin: 0; white-space: pre-wrap; color: var(--text); line-height: 1.6; } .app-dialog-body textarea { width: 100%; min-height: 120px; resize: vertical; } .app-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-elev); } .saas-breadcrumb strong { color: var(--text); font-size: 15px; } .saas-top-refresh { position: fixed; top: 17px; right: 286px; z-index: 72; min-height: 38px; padding: 0 14px; background: #fff; box-shadow: var(--shadow-sm); } .saas-workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .saas-list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "controls actions"; align-items: center; gap: 10px 12px; margin-bottom: 14px; } .saas-list-controls { grid-area: controls; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; min-width: 0; } .saas-list-controls input { min-width: 0; width: min(42vw, 520px); } .saas-list-controls select { width: min(18vw, 180px); } .saas-date-filter { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--muted); white-space: nowrap; } .saas-date-filter input { width: 128px; min-height: 30px; padding: 0; border: 0; box-shadow: none; } .saas-toolbar-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; } .saas-summary-pill { display: inline-flex; min-height: 34px; align-items: center; white-space: nowrap; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(248, 250, 252, 0.86); color: var(--text); font-size: 12px; } .saas-help-btn { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; border-radius: 8px; background: rgba(10, 132, 255, 0.08); color: var(--primary); font-weight: 800; } .saas-view-switch { display: inline-flex; align-items: center; width: max-content; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; white-space: nowrap; } .saas-view-switch button { min-width: 56px; min-height: 34px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); box-shadow: none; white-space: nowrap; word-break: keep-all; } .saas-view-switch button.is-active { background: rgba(10, 132, 255, 0.10); color: var(--primary); } .saas-list-root { display: grid; gap: 10px; } .saas-list-root.is-table { display: block; } .saas-table-wrap { overflow-x: auto; overflow-y: visible; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-elev); box-shadow: var(--shadow-sm); } .saas-table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: 12px; } .saas-table th, .saas-table td { height: 54px; padding: 6px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; } .saas-table th { color: var(--muted); font-size: 11px; font-weight: 700; background: rgba(248, 250, 252, 0.98); } .saas-table td:first-child, .saas-table th:first-child { width: 52px; } .saas-table td:last-child, .saas-table th:last-child { position: sticky; right: 0; z-index: 4; width: 1%; min-width: 176px; max-width: 240px; white-space: nowrap; background: var(--surface-elev); } .saas-table th:last-child { z-index: 6; background: rgba(248, 250, 252, 0.98); } .automations-table { min-width: 980px; table-layout: fixed; } .automations-table th:first-child, .automations-table td:first-child { width: 300px; min-width: 300px; white-space: normal; } .automations-table td:first-child strong { display: block; max-width: 28em; line-height: 1.5; word-break: normal; overflow-wrap: anywhere; } .automations-table th:nth-child(2), .automations-table td:nth-child(2) { width: 150px; } .automations-table th:nth-child(3), .automations-table td:nth-child(3), .automations-table th:nth-child(4), .automations-table td:nth-child(4), .automations-table th:nth-child(5), .automations-table td:nth-child(5) { width: 150px; } .automations-table th:last-child, .automations-table td:last-child { width: 176px; min-width: 176px; max-width: 176px; } .settings-page { gap: 16px; } .settings-overview { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); gap: 16px; } .settings-current-panel, .settings-create-panel { min-width: 0; } .settings-current-panel .panel-head, .settings-create-panel .panel-head { align-items: flex-start; gap: 12px; } .settings-current-panel .panel-head h2, .settings-create-panel .panel-head h2 { margin-bottom: 3px; } .settings-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .settings-metric, .settings-empty-metric { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(248, 250, 252, 0.72); } .settings-metric span, .settings-empty-metric span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; } .settings-metric strong, .settings-empty-metric strong { display: block; overflow: hidden; color: var(--text); font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .settings-empty-metric { grid-column: 1 / -1; } .settings-inline-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 8px; align-items: end; margin-top: 12px; } .settings-create-panel .settings-inline-form, .settings-danger-zone .settings-inline-form { grid-template-columns: minmax(0, 1fr); } .settings-org-table { min-width: 1040px; } .settings-org-table th:first-child, .settings-org-table td:first-child { width: 300px; min-width: 300px; } .settings-org-table td:first-child strong, .settings-org-table td:first-child small { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-org-table tr.is-selected td { background: rgba(10, 132, 255, 0.05); } .settings-org-table th:nth-child(2), .settings-org-table td:nth-child(2) { width: 170px; } .settings-org-table th:nth-child(3), .settings-org-table td:nth-child(3), .settings-org-table th:nth-child(5), .settings-org-table td:nth-child(5) { width: 130px; } .settings-org-table th:nth-child(4), .settings-org-table td:nth-child(4) { width: 170px; } .settings-org-actions .item-actions { justify-content: flex-start; flex-wrap: nowrap; } .settings-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .settings-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; } .settings-span-2 { grid-column: 1 / -1; } .settings-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; align-items: center; } .settings-retention-form { grid-template-columns: repeat(5, minmax(0, 1fr)); } .settings-retention-form .settings-form-actions { grid-column: 1 / -1; } .settings-shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .settings-shortcut { display: grid; gap: 4px; min-height: 64px; align-content: center; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(248, 250, 252, 0.72); color: inherit; text-decoration: none; } .settings-shortcut:hover { border-color: rgba(10, 132, 255, 0.32); background: rgba(10, 132, 255, 0.06); } .settings-shortcut strong { font-size: 13px; } .settings-shortcut span { color: var(--muted); font-size: 12px; } .settings-audit-feed { max-height: 420px; overflow: auto; padding-right: 4px; } .settings-danger-zone { margin-bottom: 8px; } .settings-danger-zone.is-hidden { display: none; } .saas-sort-head { min-height: 22px; padding: 0; display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: inherit; box-shadow: none; font-size: inherit; font-weight: inherit; white-space: nowrap; } .saas-sort-head:hover, .saas-sort-head.is-active { color: var(--primary); filter: none; transform: none; } .saas-sort-icon { color: var(--muted-2); font-size: 10px; } .saas-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; color: var(--muted); font-size: 12px; } .saas-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .saas-page-actions label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .saas-page-actions select { min-height: 32px; width: 72px; padding: 0 8px; } .audit-code { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 6px; background: rgba(15, 23, 42, 0.05); color: var(--muted); font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.6; } .audit-meta { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .billing-table td:nth-child(3) { font-weight: 700; } .saas-text-preview { max-width: 520px; overflow: hidden; color: var(--muted); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } .team-row-main { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .team-avatar { width: 30px; height: 30px; flex: 0 0 30px; display: inline-grid; place-items: center; border-radius: 10px; background: rgba(10, 132, 255, 0.12); color: var(--primary); font-weight: 800; } .templates-table { min-width: 1120px; } .audit-table td:last-child, .audit-table th:last-child, .billing-table td:last-child, .billing-table th:last-child, .team-table td:last-child, .team-table th:last-child, .notifications-table td:last-child, .notifications-table th:last-child, .sessions-table td:last-child, .sessions-table th:last-child { position: static; width: auto; min-width: 0; max-width: none; white-space: normal; } .channels-table { min-width: 1180px; } .channels-table .saas-text-preview { max-width: 460px; overflow: visible; white-space: normal; } .text-danger { color: var(--danger); } .text-success { color: var(--success); } .developer-table, .reviews-table { min-width: 1040px; } .reviews-table { table-layout: fixed; min-width: 930px; } .reviews-table th:nth-child(1), .reviews-table td:nth-child(1) { width: 52px; } .reviews-table th:nth-child(2), .reviews-table td:nth-child(2) { width: 112px; } .reviews-table th:nth-child(3), .reviews-table td:nth-child(3) { width: 240px; } .reviews-table th:nth-child(4), .reviews-table td:nth-child(4), .reviews-table th:nth-child(5), .reviews-table td:nth-child(5) { width: 86px; } .reviews-table th:nth-child(6), .reviews-table td:nth-child(6) { width: 134px; white-space: nowrap; } .reviews-table th:last-child, .reviews-table td:last-child { width: 220px; min-width: 220px; max-width: 220px; } .reviews-table .review-actions { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; } .reviews-table .review-actions button, .reviews-table .review-action-link { flex: 0 0 auto; min-height: 32px; padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; } .reviews-table .review-action-link { display: inline-flex; align-items: center; border: 1px solid transparent; background: #eff6ff; color: var(--primary); text-decoration: none; } .reviews-table .review-action-link:hover { background: #dbeafe; } .reviews-table .audit-code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .templates-table .item-actions { flex-wrap: nowrap; gap: 6px; } .templates-table .item-actions button, .canned-table .item-actions button { min-height: 32px; padding: 0 10px; } .knowledge-list-panel .saas-list-toolbar { align-items: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: "actions" "controls"; } .knowledge-overview-panel { overflow: hidden; } .knowledge-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .knowledge-overview-primary, .knowledge-overview-secondary { min-width: 0; display: grid; gap: 14px; align-items: start; } .knowledge-overview-primary { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr); } .knowledge-overview-primary .knowledge-metrics, .knowledge-overview-primary .timeline-chart { grid-column: 1; } .knowledge-overview-primary .usage-by-type { grid-column: 2; grid-row: 1; } .knowledge-overview-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .knowledge-overview-secondary .coverage-chart, .knowledge-overview-secondary .tag-cloud, .knowledge-overview-secondary .coverage-suggest { min-width: 0; } .knowledge-overview-secondary .knowledge-governance-panel { grid-column: 1 / -1; } .knowledge-overview-primary .usage-by-type, .knowledge-overview-primary .timeline-chart, .knowledge-overview-secondary .coverage-chart, .knowledge-overview-secondary .tag-cloud, .knowledge-overview-secondary .coverage-suggest { margin-top: 0; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; padding: 12px; } .knowledge-overview-primary .usage-by-type { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 8px; min-height: auto; } .knowledge-overview-primary .usage-by-type .usage-pill { min-width: 0; min-height: 30px; height: auto; border-radius: 8px; padding: 6px 10px; background: #eef2f7; white-space: nowrap; } .knowledge-overview-primary .timeline-chart { min-height: 156px; } .knowledge-overview-secondary .coverage-chart { gap: 10px; } .knowledge-overview-secondary .tag-cloud { min-height: 0; align-content: start; } .knowledge-layout-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .knowledge-layout-grid > .panel { min-width: 0; margin: 0; } .knowledge-main-list-panel { grid-column: 1; grid-row: auto; order: 1; } .knowledge-preview-panel, .knowledge-source-panel, .knowledge-compose-panel { grid-column: 1; grid-row: auto; } .knowledge-compose-panel { order: 2; } .knowledge-source-panel { order: 3; } .knowledge-preview-panel { order: 4; } .knowledge-preview-panel .source-preview, .knowledge-source-panel .list { max-height: 360px; overflow: auto; } .knowledge-source-automation { border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; padding: 10px; display: grid; gap: 8px; } .source-auto-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .source-auto-head select { min-width: 92px; } .source-auto-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .source-auto-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .source-auto-metrics span { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 8px; color: var(--muted); font-size: 12px; } .source-auto-metrics strong { display: block; color: var(--text); font-size: 18px; line-height: 1; margin-bottom: 4px; } .knowledge-source-automation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .knowledge-source-automation li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; } .knowledge-source-automation li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .source-refresh-queue { border-top: 1px dashed var(--border); padding-top: 8px; display: grid; gap: 6px; } .source-refresh-queue-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .source-refresh-queue-head > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; } .source-refresh-queue > strong, .source-refresh-queue-head > strong { font-size: 12px; } .source-refresh-queue li { grid-template-columns: minmax(0, 1fr) auto auto; } .knowledge-preview-panel, .knowledge-source-panel, .knowledge-compose-panel { position: static; } .knowledge-compose-panel { overflow: visible; } .knowledge-compose-launchers { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; } .knowledge-compose-launchers p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .knowledge-compose-drawer[hidden] { display: none !important; } .knowledge-compose-drawer { position: fixed; inset: 0; z-index: 10020; display: flex; justify-content: flex-end; } .knowledge-compose-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .knowledge-compose-drawer-panel { position: relative; width: min(680px, calc(100vw - 28px)); height: 100vh; display: grid; grid-template-rows: auto minmax(0, auto) minmax(0, auto); align-content: start; gap: 14px; padding: 18px; border-left: 1px solid var(--border); border-radius: 16px 0 0 16px; background: var(--surface-elev); box-shadow: -18px 0 48px rgba(15, 23, 42, 0.18); overflow: auto; animation: app-dialog-drawer-in 0.18s ease-out; scrollbar-gutter: stable; } .knowledge-compose-drawer-head { position: sticky; top: -18px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: -18px -18px 0; padding: 18px; border-bottom: 1px solid var(--border); background: var(--surface-elev); } .knowledge-compose-drawer-head h2 { margin: 0; font-size: 18px; } .knowledge-compose-drawer-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; } body.has-compose-drawer { overflow: hidden; } .knowledge-compose-drawer-panel #aiExtractPanel { max-height: none; overflow: visible; } .knowledge-compose-panel .form-grid, .knowledge-source-panel .form-grid, .knowledge-compose-panel #aiExtractPanel .form-grid { grid-template-columns: 1fr !important; } .knowledge-compose-panel .row-actions, .knowledge-source-panel .row-actions, .knowledge-preview-panel .row-actions { flex-wrap: wrap; } .knowledge-ai-automation { border: 1px solid rgba(37, 99, 235, 0.18); border-radius: 8px; background: #f8fbff; padding: 12px; display: grid; gap: 12px; } .knowledge-ai-automation-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .knowledge-ai-automation-head strong { display: block; margin-bottom: 3px; } .knowledge-ai-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .knowledge-ai-options label { min-width: 0; } .knowledge-ai-options label:not(.checkbox-label) { display: grid; gap: 5px; } .knowledge-ai-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .knowledge-ai-steps li { min-height: 42px; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 8px 9px; color: var(--muted); font-size: 12px; line-height: 1.35; } .knowledge-ai-steps li::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 999px; background: #cbd5e1; margin-bottom: 6px; } .knowledge-ai-steps li.is-running { border-color: #2563eb; color: var(--text); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); } .knowledge-ai-steps li.is-running::before { background: #2563eb; } .knowledge-ai-steps li.is-done { border-color: rgba(22, 163, 74, 0.28); background: #f0fdf4; color: #166534; } .knowledge-ai-steps li.is-done::before { background: #16a34a; } .knowledge-ai-steps li.is-error { border-color: rgba(220, 38, 38, 0.34); background: #fef2f2; color: #991b1b; } .knowledge-ai-steps li.is-error::before { background: #dc2626; } .knowledge-automation-recipe { border: 1px dashed rgba(37, 99, 235, 0.22); border-radius: 8px; background: #fff; padding: 9px 10px; display: grid; gap: 3px; font-size: 12px; } .knowledge-automation-recipe strong { color: var(--text); } .knowledge-automation-recipe span { color: var(--muted); line-height: 1.45; } .knowledge-automation-advisor { border: 1px solid rgba(22, 163, 74, 0.22); border-radius: 8px; background: #f7fdf9; padding: 10px; display: grid; gap: 8px; } .knowledge-automation-advisor-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .knowledge-automation-advisor-head strong { display: block; margin-bottom: 3px; } .knowledge-automation-advisor p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .knowledge-automation-advisor-tags { display: flex; flex-wrap: wrap; gap: 6px; } .knowledge-automation-advisor-tags span { border: 1px solid rgba(22, 163, 74, 0.24); border-radius: 999px; background: #fff; color: #166534; padding: 3px 8px; font-size: 11px; font-weight: 700; } .knowledge-automation-simulation { border: 1px solid rgba(37, 99, 235, 0.18); border-radius: 8px; background: #f8fbff; padding: 10px; display: grid; gap: 8px; } .knowledge-automation-simulation-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .knowledge-automation-simulation-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .knowledge-automation-progress { border: 1px solid rgba(37, 99, 235, 0.16); border-radius: 8px; background: #fff; padding: 9px; display: grid; gap: 7px; } .knowledge-automation-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .knowledge-automation-progress strong { font-size: 20px; line-height: 1; } .knowledge-automation-progress span { color: var(--muted); font-size: 12px; } .knowledge-automation-progress-track { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } .knowledge-automation-progress-track span { display: block; height: 100%; border-radius: inherit; background: #2563eb; } .knowledge-automation-progress p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; } .knowledge-automation-stage { border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; background: #fff; padding: 9px; display: grid; gap: 5px; } .knowledge-automation-stage.is-govern { border-left-color: #f59e0b; } .knowledge-automation-stage.is-semi { border-left-color: #2563eb; } .knowledge-automation-stage.is-ready, .knowledge-automation-stage.is-auto { border-left-color: #16a34a; } .knowledge-automation-stage > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .knowledge-automation-stage strong { font-size: 13px; } .knowledge-automation-stage span, .knowledge-automation-stage p { color: var(--muted); font-size: 12px; line-height: 1.4; } .knowledge-automation-stage p { margin: 0; } .knowledge-automation-stage-gap { display: flex; flex-wrap: wrap; gap: 6px; } .knowledge-automation-stage-gap span { border: 1px solid var(--border); border-radius: 999px; background: #f8fafc; padding: 3px 8px; color: var(--text); font-weight: 700; font-size: 11px; } .knowledge-automation-batch-actions { display: flex; flex-wrap: wrap; gap: 6px; } .knowledge-automation-batch-actions button { font-size: 12px; } .knowledge-automation-simulation-metrics span { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 8px; color: var(--muted); font-size: 12px; } .knowledge-automation-simulation-metrics strong { display: block; color: var(--text); font-size: 18px; line-height: 1; margin-bottom: 4px; } .knowledge-automation-simulation p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .knowledge-automation-simulation-tags { display: flex; flex-wrap: wrap; gap: 6px; } .knowledge-automation-simulation-tags span { border: 1px solid rgba(37, 99, 235, 0.18); border-radius: 999px; background: #fff; color: #1d4ed8; padding: 3px 8px; font-size: 11px; font-weight: 700; } .knowledge-automation-simulation-samples { display: grid; gap: 6px; } .knowledge-automation-simulation-samples button { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 8px; display: grid; gap: 4px; text-align: left; cursor: pointer; } .knowledge-automation-simulation-samples button:hover { border-color: rgba(37, 99, 235, 0.28); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07); } .knowledge-automation-simulation-samples strong { font-size: 12px; line-height: 1.25; } .knowledge-automation-simulation-samples span { color: var(--muted); font-size: 12px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .knowledge-automation-repair-plan { border-top: 1px dashed var(--border); padding-top: 8px; display: grid; gap: 7px; } .knowledge-automation-repair-plan > strong { font-size: 12px; } .knowledge-automation-repair-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .knowledge-automation-repair-plan li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 8px; } .knowledge-automation-repair-plan li span { min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.4; } .knowledge-automation-repair-plan li b { display: block; color: var(--text); font-size: 12px; margin-bottom: 2px; } .knowledge-automation-preflight { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 10px; display: grid; gap: 8px; } .knowledge-automation-preflight-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .knowledge-automation-preflight ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .knowledge-automation-preflight li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 1.4; } .knowledge-automation-preflight li span { color: var(--muted); } .knowledge-automation-preflight li strong { font-weight: 600; color: var(--text); } .knowledge-automation-preflight li.is-warning strong { color: #b45309; } .knowledge-automation-history { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 10px; display: grid; gap: 8px; } .knowledge-automation-history-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .knowledge-automation-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; max-height: 168px; overflow: auto; } .knowledge-automation-history li { border-top: 1px dashed var(--border); padding-top: 7px; display: grid; gap: 3px; font-size: 12px; } .knowledge-automation-history li:first-child { border-top: 0; padding-top: 0; } .knowledge-automation-history li > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .knowledge-automation-history li span, .knowledge-automation-history li p { color: var(--muted); } .knowledge-automation-history li p { margin: 0; line-height: 1.45; } .knowledge-automation-history li.is-error strong { color: var(--danger); } .knowledge-governance-panel { margin-top: 0; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 8px; background: #fff; padding: 12px; display: grid; gap: 12px; } .knowledge-governance-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; } .knowledge-governance-head strong { display: block; margin-bottom: 3px; } .knowledge-governance-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .knowledge-governance-metric { border: 1px solid var(--border); background: #f8fafc; color: var(--text); padding: 9px; border-radius: 8px; text-align: left; min-width: 0; } .knowledge-governance-metric strong { display: block; font-size: 18px; line-height: 1; margin-bottom: 5px; } .knowledge-governance-metric span { color: var(--muted); font-size: 12px; } .knowledge-automation-readiness { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; } .readiness-score { width: 58px; height: 58px; border-radius: 8px; border: 1px solid #f59e0b; background: #fffbeb; color: #92400e; display: grid; place-items: center; align-content: center; } .readiness-score strong { font-size: 22px; line-height: 1; } .readiness-score span { font-size: 10px; line-height: 1.2; } .readiness-score.is-good { border-color: rgba(22, 163, 74, 0.32); background: #f0fdf4; color: #166534; } .readiness-score.is-risk { border-color: rgba(220, 38, 38, 0.32); background: #fef2f2; color: #991b1b; } .knowledge-automation-readiness p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .knowledge-automation-tasks { border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; padding: 10px; display: grid; gap: 8px; } .knowledge-automation-tasks-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .knowledge-automation-tasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .knowledge-automation-tasks li { border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; background: #fff; padding: 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; } .knowledge-automation-tasks li.is-danger { border-left-color: #dc2626; } .knowledge-automation-tasks li.is-warning { border-left-color: #f59e0b; } .knowledge-automation-tasks li.is-info { border-left-color: #2563eb; } .knowledge-automation-tasks li.is-success { border-left-color: #16a34a; } .knowledge-automation-tasks li strong { display: block; font-size: 13px; line-height: 1.25; } .knowledge-automation-tasks li p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; } .knowledge-automation-task-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .readiness-action { appearance: none; border: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 700; line-height: 1.45; padding: 0; cursor: pointer; text-align: left; } .readiness-action:hover { text-decoration: underline; } .knowledge-governance-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; } .knowledge-governance-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 180px; overflow: auto; } .knowledge-governance-results li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; border-top: 1px dashed var(--border); padding-top: 6px; font-size: 12px; } .knowledge-governance-results li .muted { grid-column: 1 / -1; } .knowledge-list-panel .saas-list-controls, .knowledge-list-panel .saas-toolbar-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; } .knowledge-list-panel .saas-list-controls { display: flex !important; align-items: center; gap: 8px; min-width: 0; } .knowledge-list-panel .saas-list-controls input { width: min(42vw, 520px); } .knowledge-list-panel .saas-list-controls select { flex: 0 0 170px; width: 170px; } .knowledge-list-panel .saved-views, .knowledge-list-panel .quick-filters, .knowledge-list-panel .filter-chips { margin-top: 10px; } .knowledge-list-panel .saved-views { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; } .knowledge-list-panel .quick-filters { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; } .knowledge-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "actions" "controls" !important; gap: 10px !important; align-items: start !important; margin-bottom: 10px !important; } .knowledge-toolbar .saas-list-controls { grid-area: controls; } .knowledge-toolbar .knowledge-toolbar-actions { grid-area: actions; display: flex !important; align-items: center; justify-content: flex-start !important; gap: 8px; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-gutter: stable; } .knowledge-toolbar [hidden] { display: none !important; } .knowledge-toolbar .knowledge-toolbar-actions > span:not(.saas-summary-pill) { display: contents; } .knowledge-toolbar .knowledge-toolbar-actions > *, .knowledge-toolbar .knowledge-toolbar-actions > span:not(.saas-summary-pill) > * { flex: 0 0 auto; } @media (max-width: 1180px) { .settings-overview, .settings-config-grid { grid-template-columns: 1fr; } .settings-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .knowledge-overview-grid, .knowledge-layout-grid { grid-template-columns: 1fr; } .knowledge-overview-primary, .knowledge-overview-secondary { grid-template-columns: 1fr; } .knowledge-overview-primary .knowledge-metrics, .knowledge-overview-primary .timeline-chart, .knowledge-overview-primary .usage-by-type, .knowledge-overview-secondary .knowledge-governance-panel { grid-column: auto; grid-row: auto; } .knowledge-main-list-panel, .knowledge-preview-panel, .knowledge-source-panel, .knowledge-compose-panel { grid-column: auto; grid-row: auto; } .knowledge-compose-panel { position: static; } .knowledge-compose-drawer-panel { width: 100vw; border-radius: 0; } .saas-pagination { align-items: stretch; flex-direction: column; } .saas-page-actions { justify-content: space-between; } .knowledge-preview-panel, .knowledge-source-panel { position: static; } .knowledge-ai-steps, .knowledge-ai-options, .knowledge-governance-metrics, .knowledge-governance-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .knowledge-list-panel .saas-list-controls input, .knowledge-list-panel .saas-list-controls select { width: auto; } } @media (max-width: 720px) { .settings-metrics, .settings-form, .settings-retention-form, .settings-shortcuts { grid-template-columns: 1fr; } .knowledge-ai-automation-head, .knowledge-automation-advisor-head, .knowledge-automation-simulation-head, .knowledge-automation-simulation-metrics, .knowledge-automation-preflight-head, .knowledge-automation-history-head, .knowledge-ai-steps, .knowledge-ai-options, .knowledge-governance-head, .knowledge-governance-metrics, .knowledge-governance-options { grid-template-columns: 1fr; } .knowledge-automation-preflight li { grid-template-columns: 1fr; } .knowledge-automation-history li > div { grid-template-columns: 1fr; } .knowledge-automation-tasks li { grid-template-columns: 1fr; } .knowledge-automation-task-actions { justify-content: flex-start; } .settings-inline-form { grid-template-columns: 1fr; } .settings-form-actions { justify-content: stretch; } .settings-form-actions button { width: 100%; } .knowledge-overview-grid, .knowledge-layout-grid { gap: 12px; } .knowledge-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .knowledge-overview-primary .usage-by-type, .knowledge-overview-primary .timeline-chart, .knowledge-overview-secondary .coverage-chart, .knowledge-overview-secondary .tag-cloud, .knowledge-overview-secondary .coverage-suggest { padding: 10px; } .knowledge-list-panel .saas-list-controls input, .knowledge-list-panel .saas-list-controls select { width: 100%; } .knowledge-list-panel .saas-toolbar-actions button { flex: 1 1 120px; } } .tickets-list-toolbar, .tickets-filter-toolbar { align-items: start; } .tickets-list-summary, .tickets-toolbar-actions, .tickets-filter-controls { flex-wrap: wrap; } .tickets-filter-controls input { width: min(34vw, 260px); } .tickets-filter-controls select { width: min(18vw, 164px); } .tickets-quick-pills { margin-bottom: 10px; } .saas-bulkbar { position: sticky; bottom: 14px; z-index: 80; margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(10, 132, 255, 0.28); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } .saas-bulkbar.is-empty { visibility: hidden; pointer-events: none; opacity: 0; } .saas-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; } .button-link:hover { border-color: rgba(37, 99, 235, 0.36); color: var(--primary); } .saas-drawer-backdrop { position: fixed; top: var(--video-drawer-offset, 56px); right: 0; bottom: 0; left: 0; z-index: 170; background: rgba(15, 23, 42, 0.38); } .saas-drawer { position: fixed; top: var(--video-drawer-offset, 56px); right: 0; bottom: 0; z-index: 180; width: min(640px, calc(100vw - 24px)); display: flex; flex-direction: column; background: var(--surface-elev); border-left: 1px solid var(--border); box-shadow: -18px 0 52px rgba(15, 23, 42, 0.20); overflow: hidden; } .saas-drawer[hidden], .saas-drawer-backdrop[hidden] { display: none !important; } .contact-query-panel .panel-head { align-items: center; } .contact-query-panel .panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; } .contact-query-form { margin: 12px 0 0; } .contact-query-form .saas-list-controls input { width: min(28vw, 360px); } .contact-recent { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .contact-overview { margin-top: 14px; } .contact-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; } .contact-result-card { min-height: 220px; } .contact-result-card .panel-head { margin-bottom: 10px; } .contact-result-card .list { gap: 8px; } .contact-result-card .item { border-radius: 8px; box-shadow: none; } .canned-edit-drawer label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; } .canned-edit-drawer input, .canned-edit-drawer textarea { width: 100%; } .canned-edit-drawer textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .canned-variable-row { display: flex; flex-wrap: wrap; gap: 8px; } .canned-preview-box { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; } .canned-preview-vars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; } .canned-preview-vars input, .canned-preview-vars button { min-height: 34px; } .interaction-summary-grid { margin-bottom: 14px; } .interaction-summary-card { width: 100%; min-height: 76px; text-align: left; cursor: pointer; } .interaction-summary-card:hover { border-color: rgba(37, 99, 235, 0.36); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08); } .interaction-summary-card.warning { border-color: #fed7aa; background: #fffaf0; } .interaction-summary-card.danger { border-color: #fecaca; background: #fff7f7; } .interaction-summary-card.success { border-color: #bbf7d0; background: #f0fdf4; } .canned-create-vars { grid-column: 1 / -1; } .interaction-detail-drawer .drawer-body { display: grid; gap: 14px; align-content: start; } .interaction-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .interaction-detail-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; } .interaction-detail-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; } .interaction-detail-grid strong { display: block; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .interaction-subtitle { margin: 0; font-size: 13px; } .interaction-json { max-height: 340px; margin: 0; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12px; } .contact-empty-panel { min-height: 160px; display: grid; align-content: center; gap: 6px; } .contact-empty-panel h2 { margin: 0; font-size: 18px; } .contact-empty-line { min-height: 92px; display: grid; place-items: center; border: 1px dashed var(--border); border-radius: 8px; background: rgba(248, 250, 252, 0.7); } .assistant-drafts-panel .panel-head { align-items: center; } .assistant-filter-toolbar { margin: 12px 0; } .assistant-filter-toolbar .filter-chips { grid-area: controls; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; } .assistant-filter-toolbar .saas-list-controls { grid-area: actions; } .assistant-filter-toolbar .filter-search { width: min(26vw, 320px); } .saas-dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .saas-dashboard-toolbar .dashboard-controls, .saas-dashboard-toolbar .row-gap { flex-wrap: wrap; } .saas-page .dashboard-row > .saas-list-panel, .saas-page .dashboard-row > .panel { min-width: 0; } .saas-page .kpi-grid, .saas-page .metric-grid { margin-top: 0; } .saas-page .bar-grid, .saas-page .ranking, .saas-page .status-list, .saas-page .timeline { min-width: 0; } .saas-page #searchInput { width: min(46vw, 640px); } .saas-page #searchEmpty { min-height: 140px; display: grid; align-content: center; } .login-template-page { position: relative; z-index: 1; } .login-template-page.saas-page { padding: 0; } .login-template-page .auth-card.saas-list-panel { border-radius: 26px; } .share-card.saas-list-panel { display: block; max-width: 760px; } .project-drawer { position: fixed; top: 84px; right: 18px; bottom: 18px; z-index: 80; width: min(520px, calc(100vw - 36px)); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-elev); box-shadow: var(--shadow-lg); overflow: hidden; } .project-drawer[hidden] { display: none !important; } .project-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px; border-bottom: 1px solid var(--border); } .project-drawer-head h2 { margin: 0 0 4px; font-size: 18px; } .project-drawer-head p { margin: 0; color: var(--muted); font-size: 13px; } .project-drawer-body { padding: 18px; overflow: auto; } .project-ai-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(10, 132, 255, 0.18); border-radius: var(--radius-md); background: linear-gradient(90deg, rgba(10, 132, 255, 0.08), rgba(52, 199, 89, 0.06)); } .project-ai-strip > div { display: grid; gap: 2px; } .project-ai-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .project-ai-actions select { min-height: 36px; max-width: 150px; } .project-batch-fallback { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-elev); color: var(--muted); font-size: 12px; white-space: nowrap; } .project-ai-strip strong { font-size: 14px; } .project-ai-strip span { color: var(--muted); font-size: 12px; } .project-engine-status { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .project-engine-status span { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-elev); color: var(--muted); font-size: 12px; } .project-engine-status span.is-ok { border-color: rgba(52, 199, 89, 0.28); background: rgba(52, 199, 89, 0.1); color: #047857; } .project-engine-status span.is-warn { border-color: rgba(245, 158, 11, 0.28); background: rgba(245, 158, 11, 0.1); color: #92400e; } .project-batch-strategy-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .project-batch-strategy-summary span { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--muted); font-size: 12px; } .project-preset-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } .project-preset-bar button { min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-elev); color: var(--muted); font-weight: 600; } .project-preset-bar button.is-active { border-color: rgba(10, 132, 255, 0.28); background: rgba(10, 132, 255, 0.1); color: var(--primary); } .project-template-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: -2px 0 14px; } .project-template-card, .project-template-help span { position: relative; display: grid; gap: 4px; min-height: 78px; padding: 12px 12px 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: left; } .project-template-card { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .project-template-card:hover, .project-template-card.is-active { border-color: rgba(10, 132, 255, 0.32); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .project-template-card i, .project-template-help i { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: #2563eb; } .project-template-card strong, .project-template-help strong { font-size: 13px; } .project-template-card span, .project-template-help small { color: var(--muted); font-size: 12px; line-height: 1.45; } .project-template-card.is-sales_gradient i, .project-template-help .is-sales_gradient i { background: #f97316; } .project-template-card.is-dark_executive, .project-template-help .is-dark_executive { background: #111827; color: #f8fafc; } .project-template-card.is-dark_executive i, .project-template-help .is-dark_executive i { background: #38bdf8; } .project-template-card.is-dark_executive span, .project-template-help .is-dark_executive small { color: #cbd5e1; } .project-template-card.is-training_manual i, .project-template-help .is-training_manual i { background: #16a34a; } .project-automation-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; } .project-metric { display: grid; gap: 4px; min-height: 62px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-align: left; } .project-metric span { color: var(--muted); font-size: 12px; } .project-metric strong { font-size: 18px; } .project-metric.is-success { border-color: rgba(52, 199, 89, 0.22); background: rgba(52, 199, 89, 0.06); } .project-metric.is-warning { border-color: rgba(245, 158, 11, 0.22); background: rgba(245, 158, 11, 0.06); } .project-metric.is-danger { border-color: rgba(255, 69, 58, 0.22); background: rgba(255, 69, 58, 0.06); } .project-brief-meter, .project-plan-score { display: grid; grid-template-columns: auto auto minmax(120px, 1fr); align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-plan-score { margin: 0; } .project-brief-meter span, .project-plan-score span { color: var(--muted); font-size: 12px; } .project-brief-meter strong, .project-plan-score strong { font-size: 13px; } .project-brief-meter i, .project-plan-score i { height: 6px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); overflow: hidden; } .project-brief-meter b, .project-plan-score b { display: block; height: 100%; width: 0; border-radius: inherit; background: #f59e0b; transition: width 0.2s ease; } .project-brief-meter.is-good b, .project-plan-score.is-good b { background: #10b981; } .project-plan-score.is-bad b { background: var(--danger); } .project-brief-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; } .project-brief-check { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-brief-check strong { font-size: 12px; } .project-brief-check span { color: var(--muted); font-size: 12px; line-height: 1.45; } .project-brief-check.is-good { border-color: rgba(52, 199, 89, 0.24); background: rgba(52, 199, 89, 0.08); } .project-brief-check.is-warn { border-color: rgba(245, 158, 11, 0.24); background: rgba(245, 158, 11, 0.08); } .project-inline-check { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 12px; white-space: nowrap; } .project-action-drawer { z-index: 120; } .project-drawer-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-elev); } .project-form-drawer { display: grid; gap: 14px; } .project-template-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .project-template-help span { min-height: 72px; padding: 10px 10px 10px 14px; } .project-form-drawer label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } .project-form-drawer input, .project-form-drawer select { width: 100%; } .project-confirm-message { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); line-height: 1.7; } .project-create-preflight { display: grid; gap: 10px; } .project-create-preflight-card { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-create-preflight-card.is-warn { border-color: rgba(245, 158, 11, 0.24); background: rgba(245, 158, 11, 0.08); } .project-create-preflight-card span { color: var(--muted); font-size: 12px; line-height: 1.5; } .project-detail-section { display: grid; gap: 10px; margin-bottom: 18px; } .project-detail-section h3 { margin: 0; font-size: 13px; color: var(--muted); } .project-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .project-detail-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-detail-card span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; } .project-version-list, .project-review-list { display: grid; gap: 8px; } .project-automation-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .project-automation-summary > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-automation-summary span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; } .project-next-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid rgba(10, 132, 255, 0.18); border-radius: var(--radius-sm); background: rgba(10, 132, 255, 0.06); } .project-next-card span, .project-next-card strong { display: block; } .project-next-card span { margin-bottom: 4px; color: var(--muted); font-size: 12px; } .project-next-card strong { line-height: 1.45; } .project-next-card.is-success { border-color: rgba(52, 199, 89, 0.24); background: rgba(52, 199, 89, 0.08); } .project-next-card.is-warning { border-color: rgba(245, 158, 11, 0.24); background: rgba(245, 158, 11, 0.08); } .project-next-card.is-danger { border-color: rgba(255, 69, 58, 0.24); background: rgba(255, 69, 58, 0.08); } .project-automation-timeline { display: grid; gap: 8px; } .project-automation-step { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-automation-step i { width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: var(--primary); } .project-automation-step.is-failed i { background: var(--danger); } .project-automation-step.is-fallback i { background: #f59e0b; } .project-automation-step strong, .project-automation-step span { display: block; } .project-automation-step span { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; } .project-run-history { display: grid; gap: 8px; } .project-run-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-run-item i { width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: var(--primary); } .project-run-item.is-completed i { background: #10b981; } .project-run-item.is-failed i { background: var(--danger); } .project-run-item.is-partial i { background: #f59e0b; } .project-run-item strong, .project-run-item span { display: block; } .project-run-item span { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; } .project-plan-preview { display: grid; gap: 14px; } .project-plan-brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .project-plan-brief > div, .project-plan-knowledge { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-plan-brief span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; } .project-plan-steps { display: grid; gap: 8px; } .project-plan-step { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-plan-step i { width: 8px; height: 8px; margin-top: 5px; border-radius: 999px; background: var(--primary); } .project-plan-step.is-fallback i { background: #f59e0b; } .project-plan-step.is-blocked i { background: var(--danger); } .project-plan-step span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; } .project-plan-knowledge ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; } .project-automation-cell { display: grid; gap: 4px; align-items: start; } .project-automation-cell small { color: var(--muted); font-size: 12px; white-space: nowrap; } .project-next-hint { display: block; max-width: 220px; color: var(--muted); font-size: 11px; line-height: 1.35; } .project-next-hint.is-success { color: #047857; } .project-next-hint.is-warning { color: #92400e; } .project-next-hint.is-danger { color: #b91c1c; } .project-next-action { justify-self: start; min-height: 28px; padding: 0 8px; font-size: 12px; } .project-batch-plan { display: grid; gap: 14px; } .project-queue { display: grid; gap: 14px; } .project-queue-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .project-queue-summary > div, .project-queue-group { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-queue-summary > div { padding: 10px 12px; } .project-queue-summary span, .project-queue-summary strong { display: block; } .project-queue-summary span { margin-bottom: 4px; color: var(--muted); font-size: 12px; } .project-queue-summary strong { font-size: 18px; } .project-queue-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .project-queue-list { display: grid; gap: 10px; } .project-queue-group { overflow: hidden; } .project-queue-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-elev); } .project-queue-group-head strong, .project-queue-group-head span { display: block; } .project-queue-group-head span { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; } .project-queue-items { display: grid; gap: 8px; padding: 10px 12px; } .project-queue-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-elev); } .project-queue-item strong, .project-queue-item span { display: block; } .project-queue-item span { margin-top: 3px; color: var(--muted); font-size: 12px; } .project-batch-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .project-batch-summary > div, .project-batch-plan-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .project-batch-summary span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; } .project-batch-summary .is-risk-low { border-color: rgba(52, 199, 89, 0.22); background: rgba(52, 199, 89, 0.06); } .project-batch-summary .is-risk-medium { border-color: rgba(245, 158, 11, 0.22); background: rgba(245, 158, 11, 0.06); } .project-batch-summary .is-risk-high { border-color: rgba(255, 69, 58, 0.22); background: rgba(255, 69, 58, 0.06); } .project-batch-plan-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; } .project-batch-risk-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .project-batch-risk-filters button.is-active { border-color: rgba(10, 132, 255, 0.28); background: rgba(10, 132, 255, 0.1); color: var(--primary); } .project-batch-preflight-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .project-batch-plan-item { display: grid; gap: 4px; } .project-batch-plan-item.is-blocked { border-color: rgba(255, 69, 58, 0.24); background: rgba(255, 69, 58, 0.05); } .project-batch-plan-item.is-risk-low { border-left: 3px solid #10b981; } .project-batch-plan-item.is-risk-medium { border-left: 3px solid #f59e0b; } .project-batch-plan-item.is-risk-high { border-left: 3px solid var(--danger); } .project-batch-plan-item em { display: inline-flex; align-items: center; min-height: 20px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); color: var(--muted); font-style: normal; font-size: 11px; } .project-batch-plan-item span, .project-batch-plan-item small { color: var(--muted); font-size: 12px; } .project-preflight-fixes { display: grid; gap: 6px; margin-top: 4px; } .project-preflight-fixes span { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.04); line-height: 1.45; } .project-preflight-fixes b { flex: 0 0 auto; color: var(--text); } .project-preflight-fixes .is-blocker { background: rgba(255, 69, 58, 0.08); color: #991b1b; } .project-preflight-fixes .is-fallback { background: rgba(245, 158, 11, 0.1); color: #92400e; } .project-preflight-fixes .is-ok { background: rgba(52, 199, 89, 0.08); color: #047857; } .project-preflight-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .project-preflight-row-actions button { min-height: 30px; padding: 0 9px; font-size: 12px; } .project-progress { display: grid; gap: 6px; min-width: 180px; } .project-progress span { font-size: 12px; color: var(--muted); } .project-progress-bar { height: 6px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); overflow: hidden; } .project-progress-bar > i { display: block; height: 100%; width: 0; background: var(--primary); transition: width 0.2s ease; } .leads-page .lead-actions-head, .leads-page .lead-actions-cell { text-align: left; } .leads-page .lead-row-actions { justify-content: flex-start; align-items: center; gap: 8px; max-width: 160px; } .leads-page .lead-row-actions button { min-width: 68px; } .projects-page .project-actions-head, .projects-page .project-actions-cell { text-align: left; white-space: nowrap; } .projects-page .project-row-actions { justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 196px; } .projects-page .project-row-actions button { min-width: 54px; } /* 全站旧弹窗统一右侧抽屉化。保留原 DOM/JS 行为，只改呈现方式。 */ .modal-backdrop, .modal-mask { display: flex !important; align-items: stretch !important; justify-content: flex-end !important; padding: 0 !important; background: rgba(15, 23, 42, 0.24) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); overflow: hidden !important; } .modal-backdrop[hidden], .modal-mask[hidden] { display: none !important; } .modal-backdrop > .modal, .modal-backdrop > .modal-card, .modal-mask > .modal, .modal-mask > .modal-card { width: min(560px, calc(100vw - 28px)) !important; max-width: none !important; height: 100vh !important; max-height: none !important; margin: 0 !important; border-radius: 16px 0 0 16px !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; box-shadow: -18px 0 48px rgba(15, 23, 42, 0.18) !important; overflow: auto !important; animation: app-dialog-drawer-in 0.18s ease-out; } .modal-backdrop > .modal-card, .modal-mask > .modal-card { align-content: start; } .modal-backdrop > .modal.cmdk, .modal-mask > .modal.cmdk { width: min(640px, calc(100vw - 28px)) !important; } .video-table strong { display: block; color: var(--text); line-height: 1.35; } .video-table .item-actions { gap: 6px; flex-wrap: nowrap; justify-content: flex-start; } .video-table .item-actions button, .video-table .item-actions a { min-height: 26px; padding: 0 8px; font-size: 11px; } .video-sort-head { min-height: 22px; padding: 0; display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: inherit; box-shadow: none; font-size: inherit; font-weight: inherit; white-space: nowrap; } .video-sort-icon { display: inline-flex; align-items: center; justify-content: center; width: 13px; color: var(--muted-2); font-size: 10px; line-height: 1; opacity: 0.7; } .video-sort-head:hover, .video-sort-head.is-active { color: var(--primary); filter: none; transform: none; } .video-sort-head:hover .video-sort-icon, .video-sort-head.is-active .video-sort-icon { color: var(--primary); opacity: 1; } .video-table .badge { padding: 2px 8px; font-size: 11px; } .video-table .badge, .video-item .badge, .video-board-card .badge, .video-inspector-badges .badge { border: 1px solid rgba(100, 116, 139, 0.16); background: rgba(100, 116, 139, 0.08); color: #475569; } .video-table .badge.success, .video-item .badge.success, .video-board-card .badge.success, .video-inspector-badges .badge.success { border-color: rgba(22, 163, 74, 0.18); background: rgba(22, 163, 74, 0.10); color: #15803d; } .video-table .badge.warning, .video-item .badge.warning, .video-board-card .badge.warning, .video-inspector-badges .badge.warning { border-color: rgba(217, 119, 6, 0.20); background: rgba(217, 119, 6, 0.10); color: #92400e; } .video-table .badge.danger, .video-item .badge.danger, .video-board-card .badge.danger, .video-inspector-badges .badge.danger { border-color: rgba(220, 38, 38, 0.18); background: rgba(220, 38, 38, 0.09); color: #b91c1c; } .video-table-error { display: block; margin-top: 4px; color: #b91c1c; line-height: 1.4; } .video-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; } .video-board-col { min-width: 220px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(248, 250, 252, 0.68); padding: 10px; } .video-board-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--text); } .video-board-head span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; } .video-board-list { display: grid; gap: 10px; } .video-board-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-elev); box-shadow: var(--shadow-sm); } .video-board-card.is-selected { border-color: rgba(10, 132, 255, 0.46); box-shadow: 0 12px 30px rgba(10, 132, 255, 0.10); } .video-board-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .video-board-card .item-actions { justify-content: flex-start; } .video-item { display: grid; gap: 8px; border-left: 3px solid rgba(10, 132, 255, 0.35); cursor: default; } .video-item .item-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; } .video-item .item-actions { max-width: 260px; } .video-item.is-completed { border-left-color: #30d158; } .video-item.is-failed { border-left-color: #ff453a; } .video-item.is-active { border-left-color: #ff9f0a; } .video-item.is-selected { border-color: rgba(10, 132, 255, 0.46); border-left-color: #0a84ff; box-shadow: 0 12px 30px rgba(10, 132, 255, 0.10); } .video-row-check { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; } .video-row-check input { width: 15px; height: 15px; margin: 0; } .video-item-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .video-progress { position: relative; height: 14px; border-radius: 8px; background: #eef2f7; overflow: hidden; } .video-progress-bar { height: 100%; background: linear-gradient(90deg, #16a34a, #0f766e); transition: width 0.4s ease; } .video-progress span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #0f172a; letter-spacing: 0.04em; } .video-detail-grid { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr); gap: 18px; } .video-steps { display: grid; gap: 8px; } .video-step { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(15, 23, 42, 0.03); } .video-step.is-done { border-color: rgba(48, 209, 88, 0.28); background: rgba(48, 209, 88, 0.10); } .video-step.is-running { border-color: rgba(255, 159, 10, 0.30); background: rgba(255, 159, 10, 0.10); } .video-step.is-failed { border-color: rgba(255, 69, 58, 0.30); background: rgba(255, 69, 58, 0.10); } .step-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 12px; } .video-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .video-thumb { min-height: 72px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: linear-gradient(135deg, rgba(10, 132, 255, 0.18), rgba(20, 184, 166, 0.12)), #fff; display: flex; align-items: flex-end; padding: 8px; } .video-thumb small { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.80); color: var(--text); font-weight: 700; } .video-player-wrap video { width: 100%; max-height: 420px; border-radius: var(--radius-md); background: #020617; } .video-inspector-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .video-inspector-title h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.35; } .video-inspector-title p { margin: 0; } .video-inspector-badges { margin-top: 10px; } .video-inspector-section { display: grid; gap: 8px; margin-top: 16px; } .video-inspector-section h3 { margin: 0; font-size: 14px; } .video-quality-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: rgba(15, 23, 42, 0.025); } .video-quality-repair { grid-column: 2; justify-self: start; } .video-quality-card.is-ok { border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.06); } .video-quality-card.is-warn { border-color: rgba(245, 158, 11, 0.38); background: rgba(245, 158, 11, 0.07); } .video-quality-score { display: grid; place-items: center; gap: 2px; min-height: 72px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(15, 23, 42, 0.08); text-align: center; } .video-quality-score strong { font-size: 28px; line-height: 1; } .video-quality-score span { color: var(--muted); font-size: 11px; } .video-quality-copy { display: grid; align-content: center; gap: 8px; min-width: 0; } .video-quality-copy ul, .video-quality-copy p { margin: 0; } .video-quality-copy ul { padding-left: 18px; color: var(--text); font-size: 12px; line-height: 1.5; } .video-inspector-actions { margin-top: 14px; } .video-empty-box { display: grid; place-items: center; min-height: 86px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.025); color: var(--muted); font-size: 12px; } .video-readiness-panel { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.72); } .video-readiness-head { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; align-items: center; } .video-readiness-head h3 { margin: 0 0 3px; font-size: 15px; } .video-readiness-head p { margin: 0; } .video-readiness-score { display: grid; place-items: center; min-height: 68px; border-radius: var(--radius-sm); border: 1px solid rgba(15, 23, 42, 0.08); background: rgba(245, 158, 11, 0.10); } .video-readiness-score.is-ready { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.28); } .video-readiness-score.is-blocked { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.28); } .video-readiness-score strong { font-size: 26px; line-height: 1; } .video-readiness-score span { color: var(--muted); font-size: 11px; } .video-readiness-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .video-readiness-check { display: grid; gap: 3px; padding: 9px; border-radius: var(--radius-sm); border: 1px solid rgba(245, 158, 11, 0.28); background: rgba(245, 158, 11, 0.06); } .video-readiness-check.is-ok { border-color: rgba(34, 197, 94, 0.26); background: rgba(34, 197, 94, 0.06); } .video-readiness-check strong { font-size: 12px; } .video-readiness-check span { color: var(--muted); font-size: 12px; line-height: 1.45; } .video-readiness-actions { display: flex; gap: 8px; flex-wrap: wrap; } .video-autopilot-status { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr); gap: 10px; padding: 10px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.025); } .video-autopilot-status > div, .video-autopilot-events { display: grid; gap: 4px; } .video-autopilot-status strong { font-size: 12px; } .video-autopilot-status span { color: var(--muted); font-size: 12px; line-height: 1.45; } .video-batch-brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .video-batch-brief > div, .video-batch-job { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.025); } .video-batch-brief strong, .video-batch-job strong { font-size: 12px; } .video-batch-brief span, .video-batch-job span { color: var(--muted); font-size: 12px; line-height: 1.45; } .video-batch-jobs { display: grid; gap: 8px; } .video-batch-job { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .video-readiness-ok { margin: 0; } @media (max-width: 1100px) { .video-workbench, .video-detail-grid { grid-template-columns: 1fr; } .video-flow-steps, .video-resource-grid, .video-metrics-grid, .video-readiness-checks, .video-autopilot-status { grid-template-columns: repeat(2, minmax(0, 1fr)); } .video-metric-wide { grid-column: span 2; } .video-preview-card { grid-template-columns: 1fr; } } @media (max-width: 720px) { .video-top-refresh { position: static; width: fit-content; } .video-hero, .video-flow-guide-head, .panel-head { align-items: stretch; flex-direction: column; } .video-flow-steps, .video-resource-grid, .video-metrics-grid { grid-template-columns: 1fr; } .video-metric-wide { grid-column: span 1; } .video-hero-actions, .video-list-controls, .video-list-toolbar, .video-bulkbar { justify-content: flex-start; } .video-list-toolbar { align-items: stretch; flex-direction: column; grid-template-columns: 1fr; grid-template-areas: "controls" "actions"; } .video-toolbar-left { justify-content: flex-start; flex-wrap: wrap; } .video-credits-pill { margin-left: 0; } .video-list-controls { grid-template-columns: 1fr; width: 100%; } .video-list-controls input, .video-list-controls select { flex: 1; } .video-bulkbar { align-items: stretch; flex-direction: column; } .video-bulk-actions { justify-content: flex-start; } .video-pagination, .video-page-actions { align-items: stretch; flex-direction: column; justify-content: flex-end; } .video-form-grid, .video-stats { grid-template-columns: 1fr; } .video-list-controls input { min-width: 0; width: 100%; } .video-list-controls select, .video-toolbar-left button, .video-bulk-actions button { width: 100%; } .video-view-switch { width: 100%; } .video-view-switch button { flex: 1; } .video-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .video-item .item-head { grid-template-columns: auto minmax(0, 1fr); } .video-item .item-actions { grid-column: 2; justify-content: flex-start; max-width: none; } } /* ========================================================================= * 左右双列布局：左侧会话列表（固定宽），右侧详情（自适应） * ========================================================================= */ .conv-shell { display: grid; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; min-height: calc(100vh - 200px); } /* 左列：自身独立滚动，工具栏紧凑布局 */ .conv-list-panel { position: sticky; top: 16px; max-height: calc(100vh - 48px); overflow: hidden; display: grid; grid-template-rows: auto auto auto auto 1fr; padding: 14px; } .conv-list-panel .panel-head { flex-direction: column; align-items: stretch; gap: 8px; } .conv-list-panel .conv-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .conv-list-panel .conv-toolbar > select, .conv-list-panel .conv-toolbar > input[type="search"] { width: 100%; min-width: 0; padding: 6px 8px; min-height: 30px; font-size: 12px; } .conv-list-panel .conv-toolbar > input[type="search"], .conv-list-panel .conv-toolbar > details, .conv-list-panel .conv-toolbar > #refreshConversationsBtn { grid-column: 1 / -1; } .conv-list-panel .conv-toolbar > label { font-size: 11px; } .conv-list-panel #conversationsKeyboardHint { font-size: 11px; line-height: 1.5; } .conv-list-panel .quick-filter-chips { gap: 4px; } .conv-list-panel .quick-filter-chip { font-size: 11px; padding: 3px 8px; min-height: 24px; } .conv-list-panel .bulk-bar { flex-direction: column; gap: 6px; align-items: stretch; padding: 8px; } .conv-list-panel .bulk-bar button { width: 100%; padding: 6px 8px; font-size: 12px; min-height: 28px; } .conv-list-panel .list { overflow-y: auto; min-height: 200px; padding-right: 4px; margin-right: -4px; } .conv-list-panel .conv-item .item-actions { gap: 4px; } .conv-list-panel .conv-item .item-actions button { padding: 4px 8px; font-size: 11px; min-height: 26px; } /* 左列里 pin-toggle 紧凑 */ .conv-list-panel .pin-toggle { min-height: 26px; padding: 0 6px; } /* 右列：独立滚动，chat thread 占满高度 */ .conv-detail-panel { position: sticky; top: 16px; max-height: calc(100vh - 48px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; } .conv-detail-panel .panel-head { flex-wrap: wrap; gap: 8px; } .conv-detail-panel .chat-thread-wrap { display: flex; min-height: 0; position: relative; } .conv-detail-panel .chat-thread { flex: 1; max-height: none !important; min-height: 220px; height: 100%; overflow-y: auto; } /* 右列内的可滚动中间区域：把 header / summary / visitor 等卡片 + chat thread + 回复 form 三段分配 */ .conv-detail-panel > #conversationHeaderCard, .conv-detail-panel > #conversationManageRow, .conv-detail-panel > #conversationTagsEditor, .conv-detail-panel > #slaStrip, .conv-detail-panel > #conversationSummaryCard, .conv-detail-panel > #visitorInfoCard, .conv-detail-panel > #conversationNoteBox, .conv-detail-panel > #conversationAuditPanel, .conv-detail-panel > .msg-search-row { grid-column: 1; } /* 把所有"中间内容"合并到一个可滚动容器是更优解，但为最小改动，让 detail-panel 自身可滚 */ .conv-detail-panel { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .conv-detail-panel .chat-thread-wrap { flex: 1; min-height: 240px; } /* 提示文案：左侧 -> 不再说"上方列表" */ /* 让右侧粘性回复栏停留在 detail-panel 内部底部 */ .conv-detail-panel #conversationReplyForm { position: sticky; bottom: -12px; background: var(--surface); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; z-index: 3; } html[data-theme="dark"] .conv-detail-panel #conversationReplyForm { background: var(--surface); } /* 窄屏：回退为上下堆叠 */ @media (max-width: 960px) { .conv-shell { grid-template-columns: 1fr; min-height: 0; } .conv-list-panel, .conv-detail-panel { position: static; max-height: none; overflow: visible; } .conv-list-panel .conv-toolbar { grid-template-columns: 1fr 1fr; } } /* ========================================================================= * 会话统计仪表盘（/conversations）专属 * ========================================================================= */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .kpi-card { border: 1px solid var(--border); border-radius: var(--radius-md, 12px); padding: 12px 14px; background: var(--surface, #fff); display: grid; gap: 2px; } .kpi-card .kpi-label { font-size: 12px; color: var(--muted); } .kpi-card strong { font-size: 22px; font-weight: 700; } .kpi-card.warn { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb 0%, var(--surface, #fff) 60%); } .kpi-card.success { border-color: #99f6e4; background: linear-gradient(180deg, #ecfdf5 0%, var(--surface, #fff) 60%); } .bar-grid { display: grid; gap: 6px; } .bar-row { display: grid; grid-template-columns: 140px 1fr 56px; gap: 10px; align-items: center; font-size: 13px; } .bar-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-value { color: var(--muted); text-align: right; } .bar { height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary, #0a84ff), var(--primary-2, #5e5ce6)); border-radius: 999px; transition: width 240ms ease; } html[data-theme="dark"] .bar { background: #1f2937; } .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } .ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .ranking li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface, #fff); font-size: 13px; } .awaiting-list .awaiting-link { display: flex; justify-content: space-between; gap: 12px; width: 100%; background: transparent; padding: 0; } .activity-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 180px; align-items: end; } .activity-chart .day-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; position: relative; height: 100%; } .activity-chart .day-bar { width: 60%; min-height: 2px; background: linear-gradient(180deg, var(--primary, #0a84ff), var(--primary-2, #5e5ce6)); border-radius: 6px 6px 0 0; transition: height 240ms ease; } .activity-chart .day-label { font-size: 11px; color: var(--muted); } .activity-chart .day-count { font-size: 11px; color: var(--text); font-weight: 600; } /* 会话列表页面：v12 自动注入的 metricsRow / agent-stats-strip 不再展示（已搬到 /conversations 仪表盘） */ body.has-conv-shell #metricsRow, body.has-conv-shell .agent-stats-strip, .conv-shell #metricsRow, .conv-shell .agent-stats-strip { display: none !important; } /* ========================================================================= * 会话详情区"重新排版" * 目标：聊天为主，元信息/工具收纳，回复区紧凑 * ========================================================================= */ /* 详情面板：明确的纵向布局，chat thread 必须占满剩余高度 */ .conv-shell .conv-detail-panel { display: flex !important; flex-direction: column; gap: 8px !important; padding: 12px !important; overflow: hidden !important; } /* 顶部 header：标题 + 操作按钮 → 一行，按钮区允许横向滚动 */ .conv-shell .conv-detail-panel > .panel-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: nowrap; } .conv-shell .conv-detail-panel > .panel-head > div:first-child h2 { font-size: 15px; margin: 0; } .conv-shell .conv-detail-panel > .panel-head > div:first-child p { font-size: 11px; margin: 2px 0 0; } .conv-shell .conv-detail-panel #conversationDetailActions { display: flex !important; gap: 4px !important; flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%; scrollbar-width: thin; padding-bottom: 2px; } .conv-shell .conv-detail-panel #conversationDetailActions::-webkit-scrollbar { height: 4px; } .conv-shell .conv-detail-panel #conversationDetailActions button, .conv-shell .conv-detail-panel #conversationDetailActions label { flex: 0 0 auto; font-size: 11px; padding: 4px 8px; min-height: 26px; white-space: nowrap; } /* 元信息卡：横向单行 chip 而不是上下两栏键值对 */ .conv-shell .conv-detail-panel #conversationHeaderCard { padding: 8px 10px !important; font-size: 12px; } .conv-shell .conv-detail-panel #conversationHeaderCard .conv-meta-grid { display: flex !important; flex-wrap: wrap; gap: 4px 14px !important; } .conv-shell .conv-detail-panel #conversationHeaderCard .conv-meta-row { flex-direction: row !important; gap: 4px !important; align-items: baseline; font-size: 12px; } .conv-shell .conv-detail-panel #conversationHeaderCard .conv-meta-row > .muted { font-size: 11px !important; } /* 指派 + 搁置 + 标签：合并到一行紧凑 strip */ .conv-shell .conv-detail-panel #conversationManageRow, .conv-shell .conv-detail-panel #conversationTagsEditor, .conv-shell .conv-detail-panel #slaStrip { padding: 6px 10px !important; font-size: 12px; } .conv-shell .conv-detail-panel #conversationTagsEditor { display: flex !important; align-items: center; gap: 8px; } .conv-shell .conv-detail-panel #conversationTagsEditor strong { font-size: 11px; color: var(--muted); } .conv-shell .conv-detail-panel #conversationTagsEditor input { flex: 1; min-width: 120px; padding: 4px 8px; min-height: 26px; } /* "更多信息" 折叠：默认隐藏次级卡（用户开关后再显示） */ .conv-shell .conv-detail-panel:not(.show-extras) #conversationHeaderCard, .conv-shell .conv-detail-panel:not(.show-extras) #conversationManageRow, .conv-shell .conv-detail-panel:not(.show-extras) #conversationTagsEditor, .conv-shell .conv-detail-panel:not(.show-extras) #slaStrip, .conv-shell .conv-detail-panel:not(.show-extras) #conversationSummaryCard, .conv-shell .conv-detail-panel:not(.show-extras) #visitorInfoCard, .conv-shell .conv-detail-panel:not(.show-extras) #conversationNoteBox, .conv-shell .conv-detail-panel:not(.show-extras) #relatedEntitiesCard, .conv-shell .conv-detail-panel:not(.show-extras) #conversationAuditPanel { display: none !important; } /* 折叠时显示一个轻量摘要条 */ .conv-detail-summary-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; flex-wrap: wrap; } .conv-detail-summary-bar .toggle-extras { margin-left: auto; background: transparent; color: var(--info, #2563eb); border: 0; cursor: pointer; font-size: 12px; font-weight: 600; padding: 2px 6px; } .conv-detail-summary-bar .toggle-extras:hover { background: #e0f2fe; border-radius: 4px; } /* 聊天线程：占满剩余高度 */ .conv-shell .conv-detail-panel .chat-thread-wrap { flex: 1 1 auto; min-height: 220px; position: relative; display: flex; } .conv-shell .conv-detail-panel .chat-thread { flex: 1; height: auto; max-height: none !important; min-height: 0; border: 1px solid var(--border); border-radius: 8px; overflow-y: auto; } /* 回复区：用 details 隐藏快捷回复 / 变量 / AI 改写 chip 行 */ .conv-shell .conv-detail-panel #conversationReplyForm { position: sticky; bottom: 0; background: var(--surface, #fff); border-top: 1px solid var(--border); padding: 8px 0 0; margin: 0; display: grid; gap: 6px; z-index: 3; } .conv-shell .conv-detail-panel #conversationReplyForm > .form-grid:first-child { grid-template-columns: 1fr auto; gap: 6px; } .conv-shell .conv-detail-panel #conversationReplyForm input[name="conversation_id"] { display: none; /* 用户不需要看到，readonly UUID */ } .conv-shell .conv-detail-panel #conversationReplyForm input[name="sender_name"] { padding: 4px 8px; min-height: 26px; font-size: 12px; max-width: 200px; } /* 默认折叠快捷回复 / 变量插入 / AI 改写 / v13extras 这些"高级"行 */ .conv-shell .conv-detail-panel #conversationReplyForm:not(.show-toolbar) #quickReplies, .conv-shell .conv-detail-panel #conversationReplyForm:not(.show-toolbar) #varInsertChips, .conv-shell .conv-detail-panel #conversationReplyForm:not(.show-toolbar) #toneChips, .conv-shell .conv-detail-panel #conversationReplyForm:not(.show-toolbar) #v13ExtrasRow { display: none !important; } /* 紧凑底部操作行：内部备注 / Enter 直接发送 / AI 合规 等 label 紧凑 */ .conv-shell .conv-detail-panel #conversationReplyForm > .form-grid:last-child { grid-template-columns: 1fr !important; display: flex !important; flex-wrap: wrap; gap: 6px !important; align-items: center; } .conv-shell .conv-detail-panel #conversationReplyForm > .form-grid:last-child > * { flex: 0 0 auto; } .conv-shell .conv-detail-panel #conversationReplyForm > .form-grid:last-child > small, .conv-shell .conv-detail-panel #conversationReplyForm > .form-grid:last-child > #replyHint { flex: 1 1 100%; font-size: 11px; } .conv-shell .conv-detail-panel #conversationReplyForm > .form-grid:last-child > label { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: #f1f5f9; } .conv-shell .conv-detail-panel #conversationReplyForm > .form-grid:last-child > button { padding: 6px 12px; min-height: 30px; font-size: 13px; } .conv-shell .conv-detail-panel #conversationReplyForm textarea[name="body"] { min-height: 60px; padding: 8px 10px; font-size: 13px; } /* 回复"展开高级工具"按钮（注入的 toggle 链接） */ .reply-toolbar-toggle { background: transparent; border: 0; color: var(--info, #2563eb); font-size: 11px; cursor: pointer; padding: 0 4px; } .reply-toolbar-toggle:hover { text-decoration: underline; } /* 究极收尾样式：依赖 / 已读 / 进度条 / Markdown / 拖拽 / canned 弹出 / dark polish */ .dep-list { display: grid; gap: 4px; font-size: 12px; margin-top: 8px; } .dep-list h4 { margin: 4px 0; font-size: 12px; color: var(--muted); } .dep-item a { color: var(--info); text-decoration: none; } .ticket-item.is-unread::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; background: var(--info); border-radius: 0 3px 3px 0; } .ticket-item { position: relative; } .bulk-progress { height: 4px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-top: 6px; } .bulk-progress span { display: block; height: 100%; background: var(--primary); transition: width 0.2s; } .attach-drop-zone { margin-top: 8px; padding: 14px; border: 2px dashed var(--border); border-radius: 6px; text-align: center; color: var(--muted); font-size: 12px; } .attach-drop-zone.is-dragover { background: #ecfdf5; border-color: var(--success); color: var(--success); } .markdown-rendered code { background: #eef2f7; padding: 1px 4px; border-radius: 3px; font-size: 90%; } .markdown-rendered pre { background: #f8fafc; padding: 8px; border-radius: 4px; overflow-x: auto; } .markdown-rendered a { color: var(--info); } body[data-theme="dark"] .markdown-rendered code { background: #1f2937; color: #fde047; } body[data-theme="dark"] .markdown-rendered pre { background: #0b1220; color: #cbd5e1; } .canned-popover { position: absolute; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(15,23,42,0.12); z-index: 80; min-width: 220px; max-height: 220px; overflow-y: auto; padding: 4px; } .canned-popover-item { padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } .canned-popover-item:hover, .canned-popover-item.is-focus { background: #f1f5f9; } .canned-popover-item small { color: var(--muted); margin-left: 6px; } .cf-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-top: 4px; } .cf-row input { padding: 4px 6px; font-size: 12px; } body[data-theme="dark"] .modal-card { background: #111827; } .work-report-modal { width: min(620px, 95vw); } .work-report-body { display: grid; gap: 12px; } .work-report-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .work-report-summary > div { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: #f9fafb; display: grid; gap: 4px; } .work-report-summary strong { font-size: 22px; line-height: 1.1; } .work-report-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 8px; } .work-report-table { width: 100%; border-collapse: collapse; font-size: 13px; } .work-report-table th, .work-report-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; } .work-report-table th { color: var(--muted); background: #f9fafb; font-weight: 700; } .work-report-table tr:last-child td { border-bottom: 0; } body[data-theme="dark"] .breakdown-bar span { background: var(--info); } body[data-theme="dark"] .timer-row code { background: #1f2937; color: #fef3c7; } .metric-extra-bar { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); } .unread-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--info); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; } /* ===== 知识库 v10：A/B 徽章 / 服务端关注 / 移动端 ===== */ @media (max-width: 720px) { .knowledge-item .item-actions { flex-direction: column; align-items: flex-end; gap: 4px; } .knowledge-item .item-actions button { padding: 4px 8px; font-size: 11px; } .knowledge-filters { grid-template-columns: 1fr !important; } .quick-filters { overflow-x: auto; flex-wrap: nowrap; } .saved-views { flex-wrap: wrap; } .bulk-bar { flex-direction: column; align-items: stretch; } .bulk-bar .row-gap { flex-wrap: wrap; } .topbar .org-box { width: 100%; margin-top: 8px; } } [data-v10-toolbar] { display: inline-flex; gap: 6px; flex-wrap: wrap; } /* ========================================================================= * conversations_list SaaS 工作台重排 * 左侧：会话收件箱；右侧：客服处理台。避免 sticky 覆盖顶栏，修正筛选控件密度。 * ========================================================================= */ input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; box-shadow: none; } body:has(.conv-shell) .main { padding-bottom: 24px; } body:has(.conv-shell) .topbar { min-height: 72px; } body:has(.conv-shell) .topbar-extras { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } body:has(.conv-shell) .ui-prefs { display: inline-flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: #fff; } body:has(.conv-shell) .ui-prefs .mini, body:has(.conv-shell) .ui-prefs select { min-height: 30px; padding: 4px 8px; font-size: 12px; } .conv-shell { grid-template-columns: minmax(420px, 460px) minmax(0, 1fr) !important; gap: 16px !important; align-items: stretch !important; min-height: auto !important; height: calc(100vh - 118px); } .conv-list-panel, .conv-detail-panel { position: static !important; max-height: none !important; min-height: 0; height: 100%; border-radius: 8px; overflow: hidden !important; } .conv-list-panel { display: flex !important; flex-direction: column; gap: 12px; padding: 14px !important; } .conv-list-panel > .panel-head { display: grid !important; grid-template-columns: 1fr; gap: 12px !important; align-items: stretch !important; min-height: 0; } .conv-list-panel > .panel-head > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .conv-list-panel > .panel-head h2 { white-space: nowrap; } .conv-list-panel > .panel-head p { margin: 0; text-align: right; } .conv-list-panel .conv-toolbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #f9fafb; } .conv-list-panel .conv-toolbar > select, .conv-list-panel .conv-toolbar > input[type="search"], .conv-list-panel .conv-toolbar > button, .conv-list-panel .conv-toolbar > details { width: 100%; min-width: 0; min-height: 34px; font-size: 12px; } .conv-list-panel .conv-toolbar > input[type="search"] { grid-column: 1 / -1; order: -1; } .conv-list-panel .conv-toolbar > #conversationViewsSelect, .conv-list-panel .conv-toolbar > details, .conv-list-panel .conv-toolbar > #refreshConversationsBtn { grid-column: auto !important; } .conv-list-panel .conv-toolbar > label { min-height: 30px; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--muted); font-size: 12px !important; } .filter-popout { position: relative; } .filter-popout .as-button { justify-content: center; width: 100%; min-height: 34px; padding: 7px 10px; } .filter-popout-body { right: auto; left: 0; width: min(420px, 82vw); padding: 12px; } .quick-filter-chips { padding: 0 2px; } .conv-list-panel .quick-filter-chips { display: flex; gap: 6px !important; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; } .conv-list-panel .quick-filter-chips > .muted { flex: 0 0 auto; align-self: center; } .conv-list-panel .quick-filter-chip { flex: 0 0 auto; min-height: 28px !important; padding: 5px 10px !important; border-radius: 999px; font-size: 12px !important; white-space: nowrap; } .conv-list-panel #activeFilterChips { max-height: 64px; overflow: auto; } .conv-list-panel #conversationsKeyboardHint { margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #f9fafb; color: var(--muted); font-size: 11px !important; line-height: 1.65 !important; } .conv-list-panel .bulk-bar { flex: 0 0 auto; } .conv-list-panel .list { flex: 1 1 auto; min-height: 0 !important; overflow-y: auto; padding: 2px 4px 2px 0; margin-right: -4px; } .conv-list-panel .empty-state { flex: 0 0 auto; } .conv-list-panel .conv-item { padding: 12px; border-radius: 8px; background: #fff; } .conv-list-panel .conv-item + .conv-item { margin-top: 8px; } .conv-list-panel .conv-item-title { min-width: 0; } .conv-list-panel .conv-item-title strong, .conv-list-panel .conv-item p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .conv-list-panel .conv-item-title strong { -webkit-line-clamp: 1; } .conv-list-panel .conv-item p { -webkit-line-clamp: 2; } .conv-list-panel .item-head { align-items: flex-start; } .conv-list-panel .item-actions { flex: 0 0 auto; } .conv-detail-panel { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 14px !important; background: #fff; } .conv-shell .conv-detail-panel > .panel-head { flex: 0 0 auto; display: grid !important; grid-template-columns: 1fr; align-items: start; gap: 8px !important; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .conv-shell .conv-detail-panel > .panel-head > div:first-child h2 { font-size: 16px; } .conv-shell .conv-detail-panel > .panel-head > div:first-child p { max-width: 560px; font-size: 12px; } .conv-shell .conv-detail-panel #conversationDetailActions { justify-content: flex-start; width: 100%; max-width: 100%; padding-bottom: 4px; } .conv-shell .conv-detail-panel #conversationDetailActions button, .conv-shell .conv-detail-panel #conversationDetailActions label { min-height: 30px; border-radius: 6px; font-size: 12px; } .conv-detail-summary-bar { flex: 0 0 auto; background: #f9fafb; } .conv-shell .conv-detail-panel .chat-thread-wrap { flex: 1 1 auto; min-height: 280px; } .conv-shell .conv-detail-panel .chat-thread { min-height: 100%; padding: 14px; background: #f8fafc; } .conv-shell .conv-detail-panel #conversationReplyForm { flex: 0 0 auto; bottom: 0; margin: 0 -14px -14px; padding: 10px 14px 14px; background: #fff; box-shadow: 0 -1px 0 var(--border); } .conv-shell .conv-detail-panel #conversationReplyForm textarea[name="body"] { min-height: 74px; resize: vertical; } .conv-shell .conv-detail-panel #conversationReplyForm > .form-grid:last-child > label { background: #f9fafb; border: 1px solid var(--border); } .conv-shell .conv-detail-panel #conversationReplySubmit { margin-left: auto; } .chat-bubble { border-radius: 8px; } .modal-backdrop { backdrop-filter: blur(4px); } @media (max-width: 1280px) { .conv-shell { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important; } .conv-shell .conv-detail-panel #conversationDetailActions { max-width: 44vw; } } @media (max-width: 960px) { .conv-shell { height: auto; grid-template-columns: 1fr !important; } .conv-list-panel, .conv-detail-panel { height: auto; overflow: visible !important; } .conv-list-panel .list { max-height: 520px; } .conv-shell .conv-detail-panel > .panel-head { grid-template-columns: 1fr; } .conv-shell .conv-detail-panel #conversationDetailActions { max-width: 100%; justify-content: flex-start; } } @media (max-width: 640px) { .conv-list-panel .conv-toolbar { grid-template-columns: 1fr; } .conv-list-panel .conv-toolbar > input[type="search"], .conv-list-panel .conv-toolbar > #conversationViewsSelect, .conv-list-panel .conv-toolbar > details, .conv-list-panel .conv-toolbar > #refreshConversationsBtn { grid-column: 1 !important; } } /* conversations_list clean SaaS refactor */ .conv-clean-shell { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important; height: calc(100vh - 112px); min-height: 660px; gap: 14px !important; } .conv-clean-shell .conv-list-panel, .conv-clean-shell .conv-detail-panel { border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .conv-list-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 2px; } .conv-list-header h2 { margin: 0; font-size: 17px; } .conv-list-header p { margin: 4px 0 0; font-size: 12px; } .conv-header-actions { display: flex; gap: 6px; flex: 0 0 auto; } .conv-filter-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(248, 250, 252, 0.92); } .conv-primary-controls { display: grid; grid-template-columns: minmax(0, 1fr) 128px auto; gap: 8px; align-items: center; } .conv-primary-controls input, .conv-primary-controls select, .conv-primary-controls button { width: 100%; min-height: 34px; font-size: 12px; } .conv-advanced-panel { border-top: 1px dashed var(--border); padding-top: 8px; } .conv-advanced-panel > summary, .conv-keyboard-help > summary, .reply-tools > summary { width: max-content; cursor: pointer; color: var(--primary); font-size: 12px; font-weight: 700; list-style: none; } .conv-advanced-panel > summary::-webkit-details-marker, .conv-keyboard-help > summary::-webkit-details-marker, .reply-tools > summary::-webkit-details-marker, .conv-more-actions > summary::-webkit-details-marker { display: none; } .conv-secondary-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .conv-secondary-controls > * { min-width: 0; width: 100%; min-height: 32px; font-size: 12px; } #awaitingFilterSlot { display: flex; align-items: center; } #awaitingFilterSlot label { min-height: 32px; width: 100%; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; } .conv-inline-check { display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap; } .conv-clean-shell .quick-filter-chips { margin: 0; padding: 0 2px 2px; display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; } .conv-clean-shell .quick-filter-chip { flex: 0 0 auto; min-height: 27px !important; padding: 4px 10px !important; border-radius: 999px; font-size: 12px !important; } .conv-stats-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .agent-stat-card { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; } .agent-stat-card strong { display: block; font-size: 18px; line-height: 1.1; color: var(--text); } .agent-stat-card span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agent-stat-card.danger { border-color: #fecaca; background: #fff7f7; } .agent-stat-card.warning { border-color: #fed7aa; background: #fffaf0; } .agent-stat-card.success { border-color: #bbf7d0; background: #f0fdf4; } .conv-keyboard-help { margin: -2px 0 0; } .conv-keyboard-help p { margin: 6px 0 0 !important; padding: 8px 10px !important; border-radius: 8px; } .conv-clean-shell .saas-bulkbar { display: grid; grid-template-columns: 1fr; position: static; padding: 8px; box-shadow: none; align-items: center; gap: 8px; max-height: 172px; overflow: auto; } .conv-clean-shell .saas-bulkbar .row-gap { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .conv-clean-shell .saas-bulkbar button { flex: 0 0 auto; width: auto !important; min-height: 32px; white-space: nowrap; } .bulk-mini-input, .bulk-mini-select { flex: 0 0 auto; width: 116px !important; min-height: 32px; font-size: 12px; } .bulk-mini-select { width: 128px !important; } .conv-clean-shell #conversationsList { border: 1px solid var(--border); border-radius: 8px; background: #fff; } .conv-clean-shell .conv-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0 !important; padding: 12px 14px; } .conv-clean-shell .conv-item:last-child { border-bottom: 0; } .conv-clean-shell .conv-item:hover, .conv-clean-shell .conv-item.is-selected, .conv-clean-shell .conv-item.is-bulk-checked { background: rgba(10, 132, 255, 0.06); } .conv-clean-shell .conv-detail-panel { padding: 0 !important; gap: 0 !important; position: static !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; border-left: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: var(--shadow-sm) !important; animation: none !important; } .conv-clean-shell .conv-detail-panel > .panel-head { padding: 16px 18px 12px; background: #fff; } .conv-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100% !important; max-width: none !important; justify-content: flex-start !important; } .conv-detail-actions button, .conv-detail-actions label, .conv-more-actions > summary { min-height: 32px; font-size: 12px; } .conv-more-actions { position: relative; } .conv-more-actions > summary { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; } .conv-more-actions-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 178px; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: var(--shadow-md); } .conv-more-actions:not([open]) .conv-more-actions-menu { display: none; } .conv-more-actions-menu button { width: 100%; justify-content: flex-start; } .conv-clean-shell #conversationHeaderCard, .conv-clean-shell .conv-manage-row, .conv-clean-shell .tags-editor, .conv-clean-shell .summary-card, .conv-clean-shell .visitor-info, .conv-clean-shell .related-card, .conv-clean-shell .conv-note-box, .conv-clean-shell .audit-panel, .conv-clean-shell .msg-search-row { margin: 10px 18px 0; } .conv-clean-shell .visitor-info { padding: 12px; } .conv-clean-shell .visitor-info-head { align-items: flex-start; } .visitor-score { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); background: #f8fafc; font-size: 12px; font-weight: 700; } .visitor-score.success { color: #047857; border-color: #bbf7d0; background: #ecfdf5; } .visitor-score.warning { color: #b45309; border-color: #fed7aa; background: #fff7ed; } .conv-clean-shell .visitor-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-reply-suggestion { border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; padding: 10px; } .ai-reply-suggestion-head, .ai-reply-suggestion-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ai-reply-suggestion-head strong { font-size: 13px; } .ai-reply-suggestion-body { margin-top: 8px; padding: 10px; border: 1px solid rgba(96, 165, 250, 0.45); border-radius: 8px; background: #fff; color: var(--text); font-size: 13px; line-height: 1.65; max-height: 160px; overflow: auto; } .ai-reply-suggestion-actions { justify-content: flex-end; margin-top: 8px; } .conv-clean-shell .chat-thread-wrap { margin: 12px 18px; min-height: 300px !important; } .conv-clean-shell .chat-thread { border-radius: 8px; border: 1px solid var(--border); } .conv-clean-shell #conversationReplyForm { margin: auto 0 0 !important; padding: 12px 18px 16px !important; border-top: 1px solid var(--border); box-shadow: none !important; } .conv-clean-shell #conversationReplyForm > .form-grid:first-child { grid-template-columns: minmax(0, 1fr) 180px; } .reply-tools { display: inline-block; margin-right: 12px; } .reply-tools[open] { display: block; margin: 4px 0; } .reply-tools .quick-replies { margin-top: 6px; } .reply-submit-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .reply-submit-row #replyHint { margin-right: auto; flex: 1 1 240px; } .reply-submit-row button { min-height: 32px; font-size: 12px; } @media (max-width: 1180px) { .conv-clean-shell { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important; } .conv-secondary-controls { grid-template-columns: 1fr; } .conv-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .conv-clean-shell { height: auto; min-height: 0; grid-template-columns: 1fr !important; } .conv-primary-controls { grid-template-columns: 1fr; } .conv-stats-strip, .conv-clean-shell .visitor-info-grid { grid-template-columns: 1fr; } } /* ========================================================================= * 后台菜单 IA 重构 * 让侧栏从"功能清单"变成 SaaS 后台导航：核心工作台优先，系统设置后置。 * ========================================================================= */ .sidebar { padding: 16px 12px; } .brand { position: sticky; top: 0; z-index: 2; margin: 0; padding: 2px 8px 14px; background: #0f172a; } .sidebar-hide-btn { margin-left: auto; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid rgba(147, 197, 253, 0.22); border-radius: 6px; background: rgba(37, 99, 235, 0.14); color: rgba(191, 219, 254, 0.90); box-shadow: none; display: inline-grid; place-items: center; } .sidebar-hide-btn:hover { background: rgba(37, 99, 235, 0.26); filter: none; box-shadow: none; } .sidebar-hide-btn svg, .sidebar-restore-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sidebar-restore-btn { position: fixed; left: 6px; top: 10px; bottom: auto; z-index: 90; width: 44px; height: 40px; min-height: 40px; padding: 0; border-radius: 8px; background: rgba(37, 99, 235, 0.14); color: rgba(226, 232, 240, 0.82); border: 1px solid rgba(147, 197, 253, 0.22); box-shadow: none; flex-direction: column; align-items: center; justify-content: center; gap: 0; pointer-events: none; opacity: 0; transform: translateX(-64px); transition: opacity var(--transition), transform var(--transition); } .sidebar-restore-btn .mark { display: none; } .sidebar-restore-btn svg { width: 20px; height: 20px; } .sidebar-restore-btn:hover { background: rgba(37, 99, 235, 0.26); filter: none; box-shadow: none; } body.sidebar-hidden .sidebar { width: 56px; padding: 10px 6px 12px; transform: none; pointer-events: auto; overflow: visible; } body.sidebar-hidden .sidebar .brand { display: none; } body.sidebar-hidden .sidebar-restore-btn { display: inline-flex; pointer-events: auto; opacity: 1; transform: translateX(0); } body.sidebar-hidden .sidebar-nav { display: flex; align-items: center; gap: 6px; width: 44px; height: 100vh; margin: 0; padding: 48px 0 14px; overflow-x: visible; overflow-y: auto; } body.sidebar-hidden .nav-group { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 44px; padding: 0; border: 0; background: transparent; } body.sidebar-hidden .nav-group-label { display: none; } body.sidebar-hidden .nav-group nav, body.sidebar-hidden .nav-group.is-collapsed nav { display: flex; flex-direction: column; gap: 4px; width: 44px; } body.sidebar-hidden .nav-item, body.sidebar-hidden nav a { width: 40px; min-width: 40px; height: 40px; min-height: 40px; justify-content: center; padding: 0; border-radius: 8px; } body.sidebar-hidden .nav-item span { display: none; } body.sidebar-hidden .nav-item .nav-icon { width: 17px; height: 17px; flex: 0 0 17px; } body.sidebar-hidden .nav-item::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; z-index: 130; max-width: 180px; padding: 7px 9px; border-radius: 7px; background: rgba(15, 23, 42, 0.96); color: #ffffff; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.24); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(0, -50%) scale(0.96); transition: opacity var(--transition), transform var(--transition); } body.sidebar-hidden .nav-item:hover::after { opacity: 1; transform: translate(0, -50%) scale(1); } body.sidebar-hidden .nav-group:first-child { border: 0; background: transparent; } body.sidebar-hidden .main { margin-left: 56px; } .sidebar-nav { gap: 10px; padding: 2px 4px 14px 0; } .nav-group { gap: 2px; padding: 0 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .nav-group:last-child { border-bottom: 0; padding-bottom: 0; } .nav-group-label { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px 4px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: rgba(203, 213, 225, 0.58); font-size: 11px; font-weight: 700; letter-spacing: 0.08em !important; text-align: left; cursor: pointer; } .nav-group-label::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: rgba(96, 165, 250, 0.72); } .nav-group-label:hover { background: rgba(148, 163, 184, 0.08); color: rgba(226, 232, 240, 0.82); filter: none; box-shadow: none; } .nav-group-label > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-group-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.72; transition: transform var(--transition); } .nav-group.is-collapsed .nav-group-caret { transform: rotate(-45deg); } .nav-group.is-collapsed nav { display: none; } .nav-item, nav a { min-height: 32px; padding: 7px 10px; border-radius: 7px; color: rgba(226, 232, 240, 0.74); font-size: 13px; font-weight: 500; } .nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item .nav-icon { width: 15px; height: 15px; flex-basis: 15px; color: rgba(148, 163, 184, 0.82); } .nav-item:hover, nav a:hover { background: rgba(148, 163, 184, 0.10); color: #ffffff; } .nav-item:hover .nav-icon { color: rgba(191, 219, 254, 0.96); } .nav-item.is-active, nav a.active { background: #1d4ed8; color: #ffffff; box-shadow: none; } .nav-item.is-active .nav-icon { color: #ffffff; } .nav-group:first-child { padding: 8px; border: 1px solid rgba(96, 165, 250, 0.16); border-radius: 10px; background: rgba(15, 23, 42, 0.48); } .nav-group:first-child .nav-group-label { padding-top: 0; } .nav-group:first-child .nav-item { min-height: 36px; } .nav-group:first-child .nav-item.is-active { background: linear-gradient(135deg, #2563eb, #0f766e); } @media (max-width: 920px) { .brand { position: static; } .sidebar-nav { max-height: none; } .nav-group { border-bottom: 0; } }