:root { color-scheme: light; --paper: #f7f3ec; --panel: #fffcf6; --panel-soft: #fbf8f2; --line: #e7dccd; --line-strong: #d8c4ad; --ink: #2f2a24; --muted: #8b8174; --brand: #7a4e2d; --brand-soft: #efe4d4; --card: var(--panel); --chip: var(--brand-soft); --ink-soft: var(--muted); --warn: #e8a33d; --danger: #d8503a; --brand-ink: #fff; } /* 跟随网页版「个人中心」主题：手机与网页同域，共享 localStorage 的 app-theme。 各手机页 脚本读取并设 html[data-theme]。warm = 默认 :root（暖色）； 其余浅色主题覆盖核心变量。深色 xai 待二期处理硬编码颜色后再开放。 */ html[data-theme="claude"] { --paper: #ece8e0; --panel: #faf8f4; --panel-soft: #f3eee6; --line: #e4ddce; --line-strong: #d8cdb8; --ink: #2a2724; --muted: #6f6a60; --brand: #c96442; --brand-soft: #f4e3da; } html[data-theme="gemini"] { --paper: #f6f8fc; --panel: #ffffff; --panel-soft: #f1f4fa; --line: #e6ebf3; --line-strong: #d4dcea; --ink: #1f1f24; --muted: #5f6368; --brand: #4285f4; --brand-soft: #e8f0fe; } html[data-theme="openai"] { --paper: #ffffff; --panel: #f7f7f8; --panel-soft: #f0f0f3; --line: #e6e6eb; --line-strong: #d6d6dd; --ink: #0d0d0d; --muted: #6e6e80; --brand: #0d0d0d; --brand-soft: #ececf1; } /* 玫瑰粉软拟态:粉灰底 + 蕾丝玫瑰 */ html[data-theme="rose"] { --paper: #f2eaec; --panel: #fbf6f7; --panel-soft: #f6eef1; --line: #e8d8dd; --line-strong: #d8c2c9; --ink: #3d2e34; --muted: #8d7680; --brand: #b56880; --brand-soft: #f0dde3; } /* 鼠尾草绿软拟态:灰调绿底 */ html[data-theme="sage"] { --paper: #e8ece4; --panel: #f4f7f1; --panel-soft: #eef2ea; --line: #dbe2d5; --line-strong: #c5d0bc; --ink: #2f3b2c; --muted: #7c8874; --brand: #6b8f5c; --brand-soft: #dde6d6; } /* xAI 深色:近黑底 + 深祖母绿(品牌底配白字对比足够) */ html[data-theme="xai"] { color-scheme: dark; --brand-ink: #11210a; --paper: #06080c; --panel: #0d131d; --panel-soft: #121a28; --line: #1e2a3d; --line-strong: #2b3a52; --ink: #e9eff8; --muted: #8da3bf; --brand: #b6f24a; --brand-soft: #1c2a12; } /* 黑金奢华:曜石黑底 + 香槟金 */ html[data-theme="gold"] { color-scheme: dark; --brand-ink: #1a1503; --paper: #0b0b0d; --panel: #141417; --panel-soft: #17171b; --line: #2a2a30; --line-strong: #3a3a42; --ink: #ece9e0; --muted: #9b968a; --brand: #d4af37; --brand-soft: #241d08; } * { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; } .mobile-chat-page { height: 100vh; height: 100dvh; overflow: hidden; } button, input, textarea { font: inherit; } button { border: 0; } .choice-shell { min-height: 100vh; padding: 28px 18px; display: flex; align-items: center; } .choice-card { width: 100%; padding: 28px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 18px 50px rgba(95, 68, 43, 0.12); } .eyebrow { margin: 0 0 10px; color: var(--brand); font-size: 13px; font-weight: 700; } .choice-card h1 { margin: 0; font-size: 30px; } .choice-copy { margin: 14px 0 24px; color: var(--muted); line-height: 1.7; } .choice-actions { display: grid; gap: 12px; } .primary-action, .ghost-action { min-height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; } .primary-action { color: var(--panel-soft); background: var(--brand); } .ghost-action { color: var(--brand); background: var(--brand-soft); border: 1px solid var(--line-strong); } .chat-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .mobile-topbar { flex: 0 0 auto; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; background: var(--panel-soft); border-bottom: 1px solid var(--line); } .mobile-topbar strong, .mobile-topbar small { display: block; } .mobile-topbar small { margin-top: 3px; color: var(--muted); font-size: 12px; } #debugText { max-width: 58vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-pill { max-width: 38vw; padding: 8px 13px; border-radius: 999px; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--line-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-top-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; max-width: 58vw; flex-wrap: wrap; } .top-action-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--brand) !important; color: var(--brand-ink) !important; border-color: var(--brand) !important; } .top-action-button { flex: 0 0 auto; min-height: 34px; min-width: 34px; padding: 0 9px; border-radius: 999px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px; -webkit-overflow-scrolling: touch; } .message { display: flex; margin-bottom: 12px; } .message.user { justify-content: flex-end; } .bubble { max-width: 82%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); line-height: 1.65; white-space: pre-wrap; } .message.user .bubble { color: var(--panel-soft); background: var(--brand); border-color: var(--brand); } .typing-bubble { min-width: 0; max-width: 160px; padding: 8px 11px; border-radius: 999px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; } .typing-title { margin-bottom: 0; font-size: 12px; line-height: 1.2; white-space: nowrap; } .typing-dots { display: flex; align-items: center; gap: 4px; height: 10px; } .typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: 0.34; animation: typingPulse 1.05s infinite ease-in-out; } .typing-dots span:nth-child(2) { animation-delay: 0.16s; } .typing-dots span:nth-child(3) { animation-delay: 0.32s; } @keyframes typingPulse { 0%, 80%, 100% { transform: translateY(0); opacity: 0.34; } 40% { transform: translateY(-3px); opacity: 1; } } .bubble img { display: block; width: min(64vw, 260px); max-height: 320px; object-fit: cover; margin-top: 10px; border-radius: 10px; cursor: zoom-in; } body.preview-open { overflow: hidden; } .image-preview-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); background: rgba(15, 16, 18, 0.94); } .image-preview-overlay[hidden] { display: none; } .image-preview-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; } .composer { flex: 0 0 auto; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--panel-soft); border-top: 1px solid var(--line); } .composer textarea { width: 100%; min-height: 58px; max-height: 150px; resize: none; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: var(--panel); outline: none; } .composer-actions { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; } .tool-group { display: flex; gap: 8px; } .tool-button { width: 34px; height: 34px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--line-strong); font-size: 14px; font-weight: 700; } .send-button { min-width: 82px; height: 36px; border-radius: 999px; color: var(--panel-soft); background: var(--brand); font-weight: 700; } .attachment-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; } .attachment-card { flex: 0 0 230px; display: flex; gap: 9px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); } .attachment-media { position: relative; width: 58px; height: 58px; flex: 0 0 auto; } .attachment-media img, .file-mark { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: var(--brand-soft); } .file-mark { display: flex; align-items: center; justify-content: center; color: var(--brand); font-weight: 800; } .attachment-index { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 999px; color: var(--panel-soft); background: rgba(47, 42, 36, 0.78); font-size: 11px; } .attachment-info { flex: 1; min-width: 0; } .attachment-head { display: flex; align-items: center; gap: 6px; } .attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; } .attachment-remove { width: 24px; height: 24px; border-radius: 50%; color: var(--panel-soft); background: var(--brand); line-height: 20px; font-weight: 800; } .attachment-note { width: 100%; height: 28px; margin-top: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); outline: none; font-size: 12px; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 78vh; display: flex; flex-direction: column; border-top-left-radius: 20px; border-top-right-radius: 20px; background: var(--panel); box-shadow: 0 -18px 60px rgba(95, 68, 43, 0.18); } .sheet[hidden] { display: none; } .sheet-head { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .sheet-head button, .library-search-row button, .library-pager button { padding: 7px 12px; border-radius: 999px; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--line-strong); } .project-list { overflow-y: auto; } .project-item { width: 100%; padding: 14px 16px; text-align: left; background: transparent; border-bottom: 1px solid var(--line); } .project-item.active { background: var(--brand-soft); } .project-item strong, .project-item span { display: block; } .project-item span { margin-top: 4px; color: var(--muted); font-size: 13px; } .library-sheet { height: 78vh; } .library-search-row { display: flex; gap: 10px; padding: 12px 16px; } .library-search-row input { flex: 1; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel-soft); } .library-grid { flex: 1; overflow-y: auto; padding: 0 16px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .library-card { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); } .library-card img { width: 100%; height: 120px; border-radius: 10px; object-fit: cover; background: var(--brand-soft); } .library-title { margin-top: 7px; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .library-meta { height: 18px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .library-card button { width: 100%; margin-top: 7px; height: 30px; border-radius: 999px; color: var(--panel-soft); background: var(--brand); } .library-pager { padding: 10px 16px 14px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); } /* ====== 消息长按浮动菜单 ====== */ .message, .message * { -webkit-user-select: text; user-select: text; } .message { -webkit-touch-callout: none; } .message-selecting { -webkit-touch-callout: default !important; background: rgba(59, 110, 247, 0.06); outline: 2px dashed rgba(59, 110, 247, 0.5); outline-offset: 2px; border-radius: 8px; } .msg-menu { position: fixed; z-index: 9999; display: flex; flex-direction: column; min-width: 168px; padding: 6px; background: var(--panel); border: 1px solid #e5e5ec; border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08); font-size: 15px; user-select: none; -webkit-user-select: none; animation: msgMenuPop 0.13s ease-out; } @keyframes msgMenuPop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .msg-menu[hidden] { display: none; } .msg-menu button { appearance: none; background: transparent; border: none; text-align: left; padding: 12px 16px; font-size: 15px; color: var(--ink); border-radius: 10px; cursor: pointer; font-family: inherit; } .msg-menu button:active { background: rgba(59, 110, 247, 0.1); } .msg-menu button.danger { color: #c64545; } .msg-menu button.danger:active { background: rgba(220, 90, 90, 0.1); } /* ====== 智能体设置 sheet 内的 tab 切换 ====== */ .sheet-tabs { display: flex; gap: 8px; padding: 8px 16px 4px; border-bottom: 1px solid var(--line, #e8e2d6); } .sheet-tab { flex: 1; appearance: none; background: transparent; border: none; padding: 10px 0; font-size: 15px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; font-family: inherit; } .sheet-tab:active { opacity: 0.7; } .sheet-tab.active { color: var(--ink); border-bottom-color: var(--brand); } .sheet-empty { padding: 24px 16px; text-align: center; color: var(--muted, var(--muted)); font-size: 14px; } /* ====== 客户详情页(模仿口袋助理) ====== */ .customer-page { background: var(--paper); margin: 0; min-height: 100vh; } .customer-shell { max-width: 720px; margin: 0 auto; padding-bottom: 92px; } .customer-topbar { display: flex; align-items: center; padding: 14px 16px; position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 10; } .customer-topbar strong { flex: 1; text-align: center; font-size: 17px; color: var(--ink); } .cust-back { background: transparent; border: none; font-size: 24px; width: 36px; height: 36px; color: var(--ink); cursor: pointer; } .cust-top-right { display: flex; gap: 4px; } .cust-icon-btn { background: transparent; border: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--brand); text-decoration: none; cursor: pointer; border-radius: 50%; } .cust-icon-btn:active { background: rgba(90, 133, 238, 0.1); } .customer-body { padding: 14px; } .cust-loading, .cust-error, .cust-empty { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.7; } .cust-error { color: #c64545; } .cust-name-row { display: flex; justify-content: space-between; align-items: flex-start; background: var(--panel); padding: 14px 16px; border-radius: 12px; margin-bottom: 12px; } .cust-name { font-size: 18px; font-weight: 600; color: var(--ink); margin-right: 8px; } .cust-stage { display: inline-block; padding: 2px 10px; font-size: 12px; background: rgba(59, 110, 247, 0.1); color: var(--brand); border-radius: 999px; vertical-align: middle; } .cust-room { display: inline-block; padding: 2px 9px; font-size: 12px; background: rgba(34, 174, 110, 0.12); color: #1f8e57; border-radius: 999px; vertical-align: middle; margin-left: 6px; } .cust-stage[data-stage="签约"], .cust-stage[data-stage="已购"] { background: rgba(34, 174, 110, 0.12); color: #1f8e57; } .cust-stage[data-stage="战败"] { background: rgba(220, 90, 90, 0.12); color: #c64545; } .cust-phone { color: var(--muted); font-size: 13px; margin-top: 4px; } /* 数据卡 5 格 */ .cust-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: linear-gradient(180deg, #5a85ee, #4c75dd); border-radius: 12px; padding: 14px 8px 18px; margin-bottom: 12px; } .cust-stat { text-align: center; color: #fff; } .cust-stat strong { display: block; font-size: 22px; font-weight: 600; line-height: 1.2; } .cust-stat span { font-size: 12px; opacity: 0.88; } .cust-stat.single { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 10px; margin-top: 6px; display: flex; align-items: baseline; justify-content: center; gap: 8px; } .cust-stat.single strong { display: inline; font-size: 18px; } /* 客户标签 */ .cust-labels { background: var(--panel); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; } .cust-labels h4 { margin: 0 0 10px; font-size: 14px; color: var(--ink); font-weight: 500; } .cust-label-list { display: flex; flex-wrap: wrap; gap: 8px; } .cust-label { display: inline-block; padding: 5px 12px; font-size: 12px; background: rgba(90, 133, 238, 0.1); color: var(--brand); border-radius: 999px; word-break: break-all; } .cust-label-empty { color: var(--muted); font-size: 12px; } .cust-label-add { width: 32px; height: 28px; font-size: 16px; background: rgba(0, 0, 0, 0.04); color: var(--muted); border: 1px dashed #c8cad0; border-radius: 999px; cursor: pointer; } .cust-label-add:active { background: rgba(0, 0, 0, 0.08); } /* 待办提示条（回访提醒+待办计划，有才显示，点击跳计划） */ .cust-todo { display: block; width: 100%; text-align: left; background: var(--brand-soft, var(--brand-soft)); color: var(--brand, var(--brand)); border: 1px solid var(--line, var(--line)); border-radius: 10px; padding: 11px 14px; font-size: 14px; font-family: inherit; margin: 0 0 12px; } .cust-todo:active { opacity: .85; } /* 客户画像（突出身份信息，一眼回想客户） */ .cust-portrait { background: var(--panel, var(--panel)); border: 1px solid var(--line, var(--line)); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .cust-portrait-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .cust-portrait-head h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink, var(--ink)); } .cust-portrait-head .cust-label-add { width: auto; height: 28px; padding: 0 12px; font-size: 12px; white-space: nowrap; border-radius: 999px; } .cust-portrait-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; } .cust-pf { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cust-pf-k { font-size: 11px; color: var(--muted, var(--muted)); } .cust-pf-v { font-size: 14px; color: var(--ink, var(--ink)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 跟进记录/计划弹窗里的 AI 辅助按钮行（生成话术/计划建议 + 截图识别） */ .cust-ai-row { display: flex; gap: 8px; margin-bottom: 12px; } .cust-ai-btn { flex: 1; padding: 11px; border: 1px solid var(--brand, var(--brand)); border-radius: 10px; background: var(--brand-soft, var(--brand-soft)); color: var(--brand, var(--brand)); font-size: 14px; font-family: inherit; } .cust-ai-btn:active { opacity: .85; } /* 客户画像关键词标签（只显示值；虚线=自定义可长按删除） */ .cust-chips { display: flex; flex-wrap: wrap; gap: 7px; } .cust-chip { display: inline-block; padding: 5px 11px; background: var(--brand-soft, var(--brand-soft)); color: var(--brand, var(--brand)); border-radius: 999px; font-size: 13px; } .cust-chip.removable { border: 1px dashed var(--line-strong, var(--line-strong)); -webkit-touch-callout: none; } .cust-chip-tip { font-size: 11px; color: var(--muted, var(--muted)); margin-top: 8px; } /* 跟进记录的微信截图多图选择器（圆框 + ＋ + 识别） */ .cust-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: center; } .cust-shot { position: relative; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line, var(--line)); } .cust-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .cust-shot-del { position: absolute; top: 0; right: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 18px; text-align: center; } .cust-shot-add { width: 54px; height: 54px; border-radius: 50%; border: 1px dashed var(--line-strong, var(--line-strong)); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--muted, var(--muted)); flex-shrink: 0; cursor: pointer; overflow: hidden; } .cust-shot-add input { display: none !important; } .cust-shot-go { width: 100%; margin-top: 8px; padding: 10px; border: none; border-radius: 10px; background: var(--brand, var(--brand)); color: var(--brand-ink); font-size: 14px; font-family: inherit; } .cust-shot-go:disabled { opacity: .6; } /* Tab */ .cust-tabs { display: flex; gap: 0; background: var(--panel); border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--line); margin-bottom: 0; } .cust-tab { flex: 1; appearance: none; background: transparent; border: none; padding: 14px 0; font-size: 15px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; } .cust-tab.active { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; } /* Feed / 跟进项 */ .cust-feed { background: var(--panel); border-radius: 0 0 12px 12px; padding: 0 14px; } .cust-feed-item { padding: 14px 0; border-bottom: 1px solid var(--panel-soft); } .cust-feed-item:last-child { border-bottom: none; } .cust-feed-item header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .cust-feed-author { font-size: 14px; font-weight: 500; color: var(--ink); } .cust-feed-item header small { font-size: 12px; color: var(--muted); } .cust-feed-text { font-size: 14px; color: var(--ink); line-height: 1.65; white-space: pre-wrap; word-break: break-all; } .cust-feed-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .cust-feed-img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; background: var(--panel-soft); } .cust-feed-item footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .cust-feed-type { display: inline-block; padding: 2px 8px; font-size: 11px; background: var(--panel-soft); color: var(--muted); border-radius: 4px; } .cust-feed-action { border: 1px solid var(--brand); background: var(--panel); color: var(--brand); padding: 4px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit; } .cust-feed-action.primary { background: var(--brand); color: var(--brand-ink); } .cust-feed-delete { background: transparent; border: none; color: #c64545; font-size: 12px; cursor: pointer; padding: 4px 6px; font-family: inherit; } .cust-feed-item.plan-done { opacity: 0.6; } .cust-feed-item.plan-canceled { opacity: 0.45; } /* 底部 CTA */ .customer-cta { position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); z-index: 5; } .cust-cta-row { display: flex; gap: 10px; } .cust-cta-screenshot { appearance: none; width: 100%; padding: 12px; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; font-family: inherit; color: #fff; background: linear-gradient(135deg, #7c5cff 0%, var(--brand) 100%); box-shadow: 0 6px 18px rgba(86, 92, 247, 0.32); cursor: pointer; } .cust-cta-screenshot:active { transform: scale(0.98); } .cust-cta-screenshot:disabled { opacity: 0.7; } .cust-cta-btn { flex: 1; appearance: none; background: var(--panel); border: 1px solid var(--brand); color: var(--brand); padding: 12px 0; font-size: 15px; font-weight: 500; border-radius: 10px; cursor: pointer; font-family: inherit; } .cust-cta-btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .cust-cta-btn:active { opacity: 0.85; } /* Modal */ .cust-modal-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; z-index: 999; } .cust-modal-mask[hidden] { display: none; } .cust-modal { background: var(--panel); width: 100%; border-radius: 16px 16px 0 0; max-height: 88vh; display: flex; flex-direction: column; animation: custModalUp 0.18s ease-out; } @keyframes custModalUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .cust-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; font-size: 16px; } .cust-modal-close { background: transparent; border: none; font-size: 22px; color: var(--muted); width: 32px; height: 32px; cursor: pointer; } .cust-modal-body { padding: 8px 18px 14px; overflow-y: auto; flex: 1; } .cust-modal-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 14px; } .cust-modal-label select, .cust-modal-label input, .cust-modal-label textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px; color: var(--ink); background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; font-family: inherit; } .cust-modal-label textarea { resize: vertical; min-height: 80px; } .cust-modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 10px; border-top: 1px solid var(--panel-soft); } .cust-modal-foot button { flex: 1; padding: 11px 0; font-size: 15px; background: var(--panel-soft); border: none; border-radius: 10px; color: var(--ink); cursor: pointer; font-family: inherit; } .cust-modal-foot button.primary { background: var(--brand); color: var(--brand-ink); } .cust-modal-foot button:disabled { opacity: 0.5; } /* Toast */ .cust-toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: rgba(31, 31, 36, 0.92); color: #fff; padding: 8px 18px; border-radius: 999px; font-size: 13px; z-index: 9998; } .cust-toast[hidden] { display: none; } /* ====== 客户列表页 ====== */ .mobile-customers-page { background: var(--paper); min-height: 100vh; } .customer-list-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--paper); border-bottom: 1px solid var(--line); } .customer-list-topbar strong { flex: 1; font-size: 16px; text-align: center; } .customer-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 22px; color: var(--ink); text-decoration: none; border-radius: 50%; } .customer-back:active { background: rgba(0,0,0,0.05); } .customer-topbar-action { appearance: none; background: transparent; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink); font-family: inherit; } .customer-list-meta { padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 6px; } .customer-list-project { font-size: 14px; color: var(--muted); } .customer-list-counters { display: flex; gap: 12px; font-size: 12px; color: var(--muted); } .customer-list-counters strong { color: var(--ink); font-weight: 600; } .customer-list-counters strong.warn { color: #c64545; } .customer-list-filters { padding: 0 14px 10px; } .customer-search-row { display: flex; gap: 8px; align-items: center; } .customer-search-row input { flex: 1; min-width: 0; box-sizing: border-box; padding: 10px 14px; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font-family: inherit; } .customer-filter-toggle { flex: 0 0 auto; padding: 9px 16px; font-size: 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-family: inherit; } .customer-filter-toggle.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .customer-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .customer-filter-row[hidden] { display: none; } .customer-filter-sel { flex: 0 0 auto; padding: 7px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-family: inherit; max-width: 46%; } .customer-filter-clear { padding: 7px 14px; font-size: 13px; border: 1px solid #e0533a; color: #e0533a; background: var(--panel); border-radius: 8px; font-family: inherit; } .customer-list-wrap { padding: 0 12px 100px; display: flex; flex-direction: column; gap: 8px; } .customer-list-empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.7; } .customer-row { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; transition: background 0.12s ease; } .customer-row:active { background: rgba(0,0,0,0.03); } .customer-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .customer-row-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); } .customer-row-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; background: rgba(59, 110, 247, 0.1); color: var(--brand); } .customer-row-tag.intent-A { background: rgba(34, 174, 110, 0.14); color: #1f8e57; } .customer-row-tag.intent-B { background: rgba(59, 110, 247, 0.12); color: var(--brand); } .customer-row-tag.intent-C { background: rgba(245, 180, 60, 0.16); color: #b87800; } .customer-row-tag.intent-D { background: rgba(150, 150, 165, 0.18); color: #686878; } .customer-row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); } .customer-row-meta .customer-overdue { color: #c64545; font-weight: 500; } .customer-row-sub { margin-top: 4px; font-size: 12px; color: #a89f90; } .view-list { display: flex; flex-direction: column; } .view-item { display: block; width: 100%; text-align: left; padding: 13px 10px; border: none; border-bottom: 1px solid var(--line); background: none; font-size: 15px; color: var(--ink); } .view-item.active { color: var(--brand); font-weight: 600; } .customer-tabs { display: flex; gap: 18px; padding: 6px 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .customer-tabs::-webkit-scrollbar { display: none; } .customer-tab { flex: 0 0 auto; white-space: nowrap; border: none; background: none; font-size: 16px; color: var(--muted); padding: 6px 2px; border-bottom: 2px solid transparent; } .customer-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } /* ── 楼座视图(手机·一次一栋) ── */ .fv-wrap { padding: 12px 14px 24px; } .fv-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .fv-chips::-webkit-scrollbar { display: none; } .fv-chip { flex: 0 0 auto; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font-size: 14px; } .fv-chip.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 600; } .fv-sub { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 10px; } .fv-legend { display: flex; gap: 12px; } .fv-leg { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .fv-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .fv-count { font-size: 13px; color: var(--muted); } .fv-count b { color: #3fae5a; } .fv-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--panel); } .fv-grid { display: inline-block; min-width: 100%; } .fv-row { display: flex; gap: 4px; margin-bottom: 4px; } .fv-row:last-child { margin-bottom: 0; } .fv-corner { flex: 0 0 34px; width: 34px; position: sticky; left: 0; z-index: 2; background: var(--panel); } .fv-unit-head { flex: 0 0 auto; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink); padding-bottom: 2px; } .fv-floor { flex: 0 0 34px; width: 34px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); position: sticky; left: 0; z-index: 1; background: var(--panel); } .fv-cell { flex: 0 0 64px; width: 64px; height: 30px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 500; border-radius: 5px; white-space: nowrap; } .fv-empty { background: transparent !important; } /* 点房详情底部弹层 */ .fv-sheet-mask { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .42); display: flex; align-items: flex-end; } .fv-sheet-mask[hidden] { display: none; } /* [hidden] 默认 display:none 会被上面的 flex 盖掉,显式补回,否则点关闭关不掉 */ .fv-sheet { width: 100%; background: var(--panel); border-radius: 16px 16px 0 0; padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); } .fv-sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .fv-sheet-head strong { flex: 1; font-size: 17px; color: var(--ink); display: flex; align-items: center; gap: 8px; } .fv-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } .fv-sheet-tag { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--chip); color: var(--muted); font-weight: normal; } #fvSheetClose { border: none; background: none; font-size: 26px; line-height: 1; color: var(--muted); padding: 0 4px; } .fv-sheet-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; } .fv-sheet-line { font-size: 15px; color: var(--ink); padding: 6px 0; border-top: 1px solid var(--line); } .fv-sheet-line:first-of-type { border-top: none; } .pool-claim-btn { flex-shrink: 0; align-self: center; padding: 7px 16px; border: none; border-radius: 16px; background: var(--brand); color: var(--brand-ink); font-size: 14px; } .customer-row-arrow { font-size: 22px; color: #c8c0b3; flex-shrink: 0; } .customer-fab { position: fixed; bottom: 28px; right: 20px; z-index: 10; appearance: none; padding: 14px 22px; background: var(--brand); color: var(--brand-ink); border: none; border-radius: 999px; font-size: 15px; font-weight: 600; font-family: inherit; box-shadow: 0 8px 24px rgba(59, 110, 247, 0.35); cursor: pointer; } .customer-fab:active { transform: scale(0.96); } /* 项目选择 + 新增客户的模态(继承 customer-modal-* 已有的) */ .customer-modal-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.42); display: flex; align-items: center; justify-content: center; padding: 16px; } .customer-modal-overlay[hidden] { display: none; } .customer-modal { width: 100%; max-width: 460px; max-height: 86vh; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); } .customer-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px solid var(--line); } .customer-modal-head strong { font-size: 16px; font-weight: 600; color: var(--ink); } .customer-modal-head button, .customer-modal-head [data-close-modal] { appearance: none; border: none; background: transparent; color: var(--muted); font-size: 14px; font-family: inherit; padding: 4px 6px; margin: -4px -6px -4px 0; cursor: pointer; } .customer-modal-head button:active { color: var(--brand); } .customer-modal--project { max-height: 70vh; overflow-y: auto; } .customer-project-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 18px; } .customer-project-item { text-align: left; appearance: none; background: var(--panel); padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; display: flex; flex-direction: column; gap: 4px; } .customer-project-item strong { font-size: 14px; color: var(--ink); } .customer-project-item span { font-size: 12px; color: var(--muted); } .customer-project-item.active { border-color: var(--brand); background: rgba(59, 110, 247, 0.06); } .customer-new-form { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; } .customer-new-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); } .customer-new-form input, .customer-new-form select, .customer-new-form textarea { padding: 8px 12px; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; } .customer-new-form textarea { resize: vertical; min-height: 60px; } .customer-form-actions { display: flex; justify-content: flex-end; padding-top: 6px; } .customer-form-submit { appearance: none; padding: 10px 28px; background: var(--brand); color: var(--brand-ink); border: none; border-radius: 999px; font-size: 14px; font-weight: 500; font-family: inherit; } .customer-form-submit:active { opacity: 0.85; } /* 新增客户·独立整页表单 */ .customer-new-page-form { padding: 14px 16px 96px; } .customer-new-page-form .cf-field { margin-bottom: 14px; } /* 新增客户·完整表单(旧弹窗,保留兜底) */ .customer-modal--form { max-height: 86vh; display: flex; flex-direction: column; } .customer-modal--form .customer-new-form { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 18px; } .cf-loading { padding: 28px 8px; text-align: center; color: var(--muted); font-size: 14px; } .cf-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .cf-label { font-size: 13px; color: var(--muted); } .cf-req { color: #e0533a; font-style: normal; } .cf-field input, .cf-field select, .cf-field textarea { padding: 9px 12px; font-size: 15px; background: var(--panel); border: 1px solid var(--line, var(--line)); border-radius: 9px; font-family: inherit; width: 100%; box-sizing: border-box; } .cf-field textarea { resize: vertical; min-height: 56px; } .customer-modal--form .customer-form-actions { position: sticky; bottom: 0; background: var(--panel); padding: 10px 16px 14px; margin-top: 4px; border-top: 1px solid var(--line); justify-content: stretch; } .customer-modal--form .customer-form-submit { width: 100%; } /* 状态选择 + 房源关联选择器 */ .cust-stage { cursor: pointer; } .cust-stage::after { content: " ▾"; font-size: 11px; opacity: .6; } .cust-modal-hint { font-size: 13px; color: var(--muted); padding: 4px 2px 12px; line-height: 1.6; } .cust-pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; } .cust-stage-opt { appearance: none; text-align: left; padding: 13px 16px; font-size: 15px; background: var(--panel); border: 1px solid var(--line, var(--line)); border-radius: 10px; font-family: inherit; } .cust-stage-opt.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; } .cust-stage-opt:active { background: var(--panel-soft); } .cust-unit-search { width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 14px; margin-bottom: 10px; border: 1px solid var(--line, var(--line)); border-radius: 9px; font-family: inherit; } .cust-unit-opt { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 14px; background: var(--panel); border: 1px solid var(--line, var(--line)); border-radius: 10px; font-family: inherit; text-align: left; } .cust-unit-opt small { color: #1f8e57; flex: 0 0 auto; } .cust-unit-opt:active { background: var(--panel-soft); } /* 手机端历史编辑记录 */ .cust-history-item { padding: 12px 2px; border-bottom: 1px solid #eee; } .cust-history-item:last-child { border-bottom: none; } .cust-history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .cust-history-head strong { font-size: 14px; } .cust-history-head span { font-size: 12px; color: var(--muted); } .cust-history-body { font-size: 13px; color: var(--muted); line-height: 1.7; } /* 成交类状态未关联房源 提醒条 */ .cust-deal-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 16px 12px; padding: 12px 14px; background: #fff7 e6; background: #fff6e5; border: 1px solid #f0c879; border-radius: 12px; font-size: 13px; color: #8a5a00; } .cust-deal-banner button { flex: 0 0 auto; padding: 8px 16px; border: none; border-radius: 999px; background: #f5a623; color: #fff; font-size: 13px; font-weight: 600; font-family: inherit; } .cust-deal-banner button:active { opacity: .85; } /* 客户列表 加载更多 */ .customer-load-more { display: block; width: 100%; padding: 14px; margin: 6px 0 12px; background: var(--panel); border: 1px solid var(--line, var(--line)); border-radius: 12px; font-size: 14px; color: var(--brand); font-family: inherit; } .customer-load-more:active { background: var(--panel-soft); } .customer-list-end { text-align: center; padding: 14px; color: #b0a89a; font-size: 13px; } /* 成交大脑 C1:AI 话术/跟进 */ .cust-cta-btn.ai { background: linear-gradient(90deg,#7c5cff,var(--brand)); color:#fff; } .coach-out { white-space:pre-wrap; line-height:1.65; background:var(--panel-soft); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:14px; color:var(--ink); max-height:50vh; overflow-y:auto; min-height:60px; } .cust-modal-input { padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; } /* 手机端 批量/查重/字段 */ .customer-list-actions { display:flex; gap:8px; padding:6px 12px 0; } .cust-act-btn { flex:1; padding:7px 0; border:1px solid var(--line); background:var(--panel); border-radius:8px; font-size:13px; color:var(--ink); } .cust-act-btn.active { background:var(--brand-soft); border-color:color-mix(in srgb, var(--brand) 45%, transparent); color:var(--brand); font-weight:600; } .customer-row.batch { display:flex; align-items:center; gap:10px; text-decoration:none; } .customer-row.batch.sel { background:var(--brand-soft); } .cust-cb { width:20px; height:20px; flex-shrink:0; pointer-events:none; } .cust-extra { color:#7a8aa0; margin-right:10px; } .customer-batch-bar { position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--panel); border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:10px 12px; box-shadow:0 -2px 10px rgba(0,0,0,.06); } .customer-batch-bar[hidden] { display:none; } /* 非批量模式隐藏,否则常驻底部挡住「新增客户」FAB */ .batch-selall { display:flex; align-items:center; gap:4px; font-size:13px; color:var(--ink); white-space:nowrap; } #batchCount { font-size:13px; color:var(--brand); font-weight:600; white-space:nowrap; } .batch-bar-acts { margin-left:auto; display:flex; gap:6px; } .batch-bar-acts button { padding:8px 12px; border:none; border-radius:8px; background:var(--brand-soft); color:var(--brand); font-size:13px; font-weight:600; } .batch-bar-acts button.danger { background:color-mix(in srgb, #d9362b 14%, var(--panel)); color:#e2564a; } .sheet-body { padding:14px 16px 4px; max-height:58vh; overflow-y:auto; } .cust-modal-label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink); margin-bottom:12px; } .cust-modal-label select, .cust-modal-label input { padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; } .dedup-result-m { margin-top:6px; } .dedup-hd { font-size:13px; color:var(--muted); margin:8px 0 6px; } .dedup-none { padding:18px; text-align:center; color:#1f9d57; } .dedup-item { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; text-decoration:none; color:var(--ink); background:var(--panel); } .dedup-item:active { background:var(--brand-soft); border-color:var(--brand); } .dedup-item span { font-size:12px; color:var(--muted); } .fld-hint { font-size:12px; color:var(--muted); margin-bottom:8px; } .fld-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .fld-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; } /* AI 多方案可选卡片 */ .coach-opt { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; cursor:pointer; transition:border-color .15s, background .15s; } .coach-opt:hover { border-color:color-mix(in srgb, var(--brand) 45%, transparent); } .coach-opt.sel { border-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, var(--panel)); } .coach-opt-head { display:flex; align-items:center; gap:8px; margin-bottom:5px; } .coach-opt-radio { color:var(--brand); font-size:15px; } .coach-opt-body { white-space:pre-wrap; line-height:1.6; font-size:13.5px; color:var(--ink); } .coach-tip { font-size:12px; color:var(--muted); margin-bottom:8px; } /* ───── 语音输入「按住说话」按钮 ───── */ .cust-voice-mic { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: -6px 0 14px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-soft); color: var(--ink); font-size: 15px; font-weight: 600; font-family: inherit; line-height: 1.2; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; transition: background .15s, box-shadow .15s, transform .08s; } .cust-voice-mic:active { transform: scale(.99); } .cust-voice-mic.recording { background: #e8453c; border-color: #e8453c; color: #fff; animation: vmPulse 1.15s ease-in-out infinite; } @keyframes vmPulse { 0%,100%{ box-shadow:0 0 0 3px rgba(232,69,60,.20) } 50%{ box-shadow:0 0 0 9px rgba(232,69,60,.05) } } /* 语音波形图标(豆包风:竖向 3 条圆头波形,中间高;录音时像均衡器跳动)*/ .vm-wave { display:inline-flex; align-items:center; gap:3px; height:18px; } .vm-wave i { display:block; width:3px; height:7px; border-radius:99px; background:currentColor; transform-origin:center; } .vm-wave i:nth-child(2){ height:16px; } .recording .vm-wave i { animation: vmWaveBar .8s ease-in-out infinite; } .recording .vm-wave i:nth-child(2){ animation-delay:.16s; } .recording .vm-wave i:nth-child(3){ animation-delay:.32s; } @keyframes vmWaveBar { 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1.3); } } textarea.voice-loading { background:var(--brand-soft) !important; border-color:var(--brand) !important; } /* 对话 composer 里的麦克风工具按钮:录音中变红脉冲 */ .voice-mic-btn { touch-action: none; -webkit-user-select: none; user-select: none; } .tool-button.recording, .voice-mic-btn.recording { background:#e8453c !important; border-color:#e8453c !important; color:#fff !important; animation: vmPulse 1.15s ease-in-out infinite; } /* ── 全站统一打磨(20260702):选区/焦点/滚动条/动效偏好 ── */ ::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent); outline-offset: 2px; } ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 34%, transparent); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } body { -webkit-font-smoothing: antialiased; } button:active:not(:disabled) { transform: scale(.985); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================ 暗夜绿茵(xai)手机端对比度修正: 柠檬绿(--brand:#b6f24a)是亮色,凡 brand 当底的元素文字必须用深绿 #11210a,白字在柠檬上色差过小看不清。其它主题 brand 是深色不受影响。 ============================================================ */ html[data-theme="xai"] .primary-action, html[data-theme="xai"] .top-action-link, html[data-theme="xai"] .message.user .bubble, html[data-theme="xai"] .send-button, html[data-theme="xai"] .library-card button, html[data-theme="xai"] .cust-feed-action.primary, html[data-theme="xai"] .cust-cta-btn.primary, html[data-theme="xai"] .cust-modal-foot button.primary, html[data-theme="xai"] .customer-filter-toggle.active, html[data-theme="xai"] .customer-fab, html[data-theme="xai"] .customer-form-submit, html[data-theme="xai"] .cust-shot-go { color: #11210a !important; font-weight: 700; } /* 紫→brand 渐变按钮:xai 改为 蓝→柠檬 球场渐变 + 深字 */ html[data-theme="xai"] .cust-cta-screenshot, html[data-theme="xai"] .cust-cta-btn.ai { background: linear-gradient(135deg, #58b0ff 0%, var(--brand) 100%); color: #0a1420 !important; font-weight: 700; } /* 内联样式的 brand 底按钮(deal.js/customer.js 动态生成)兜底 */ html[data-theme="xai"] [style*="background:var(--brand"], html[data-theme="xai"] [style*="background: var(--brand"] { color: #11210a !important; } html[data-theme="xai"] [style*="linear-gradient(135deg,var(--brand"] { color: #11210a !important; } /* 表单控件文字色:跟主题墨色走(此前未设,xai 深面板上会是 UA 默认黑字) */ .customer-new-form input, .customer-new-form select, .customer-new-form textarea, .cust-modal-body input, .cust-modal-body select, .cust-modal-body textarea, .customer-new-page-form input, .customer-new-page-form select, .customer-new-page-form textarea { color: var(--ink); } html[data-theme="xai"] .customer-new-form input, html[data-theme="xai"] .customer-new-form select, html[data-theme="xai"] .customer-new-form textarea, html[data-theme="xai"] .customer-new-page-form input, html[data-theme="xai"] .customer-new-page-form select, html[data-theme="xai"] .customer-new-page-form textarea { background: var(--panel-soft); border-color: var(--line-strong); color: var(--ink); } /* 旧硬编码蓝残留 → 跟 brand 走 */ .customer-project-item.active { background: color-mix(in srgb, var(--brand) 8%, transparent); } html[data-theme="xai"] .attachment-remove { color: #11210a; } /* 暗夜绿茵:警示条/浅橙块的深色版本(浅橙底在深色页面上过于刺眼) */ html[data-theme="xai"] .cust-deal-banner { background: color-mix(in srgb, #f5a623 14%, var(--panel)); border-color: color-mix(in srgb, #f5a623 40%, transparent); color: #f0c879; } html[data-theme="xai"] .cust-deal-banner button { color: #241600; } /* 暗夜绿茵:数据统计卡从亮蓝渐变改为藏青面板+柠檬数值(球场记分牌) */ html[data-theme="xai"] .cust-stats { background: linear-gradient(180deg, #121a28, #0d131d); border: 1px solid rgba(151, 178, 216, 0.15); } html[data-theme="xai"] .cust-stat { color: var(--muted); } html[data-theme="xai"] .cust-stat strong { color: var(--brand); } html[data-theme="xai"] .pool-claim-btn { color: #11210a; font-weight: 700; } /* ============================================================ 黑金奢华(gold)手机端对比度修正: 香槟金(--brand:#d4af37)是亮色,凡 brand 当底的元素文字必须用深金 #1a1503,白字在金色上色差过小看不清。处理方式与暗夜绿茵一致。 ============================================================ */ html[data-theme="gold"] .primary-action, html[data-theme="gold"] .top-action-link, html[data-theme="gold"] .message.user .bubble, html[data-theme="gold"] .send-button, html[data-theme="gold"] .library-card button, html[data-theme="gold"] .cust-feed-action.primary, html[data-theme="gold"] .cust-cta-btn.primary, html[data-theme="gold"] .cust-modal-foot button.primary, html[data-theme="gold"] .customer-filter-toggle.active, html[data-theme="gold"] .customer-fab, html[data-theme="gold"] .customer-form-submit, html[data-theme="gold"] .cust-shot-go { color: #1a1503 !important; font-weight: 700; } html[data-theme="gold"] .cust-cta-screenshot, html[data-theme="gold"] .cust-cta-btn.ai { background: linear-gradient(135deg, #b08d57 0%, var(--brand) 100%); color: #1a1503 !important; font-weight: 700; } html[data-theme="gold"] [style*="background:var(--brand"], html[data-theme="gold"] [style*="background: var(--brand"] { color: #1a1503 !important; } html[data-theme="gold"] [style*="linear-gradient(135deg,var(--brand"] { color: #1a1503 !important; } html[data-theme="gold"] .customer-new-form input, html[data-theme="gold"] .customer-new-form select, html[data-theme="gold"] .customer-new-form textarea, html[data-theme="gold"] .customer-new-page-form input, html[data-theme="gold"] .customer-new-page-form select, html[data-theme="gold"] .customer-new-page-form textarea { background: var(--panel-soft); border-color: var(--line-strong); color: var(--ink); } html[data-theme="gold"] .attachment-remove { color: #1a1503; } html[data-theme="gold"] .cust-deal-banner { background: color-mix(in srgb, #f5a623 14%, var(--panel)); border-color: color-mix(in srgb, #f5a623 40%, transparent); color: #f0c879; } html[data-theme="gold"] .cust-deal-banner button { color: #241600; } html[data-theme="gold"] .cust-stats { background: linear-gradient(180deg, #18181c, #121215); border: 1px solid rgba(214, 205, 182, 0.15); } html[data-theme="gold"] .cust-stat { color: var(--muted); } html[data-theme="gold"] .cust-stat strong { color: var(--brand); } html[data-theme="gold"] .pool-claim-btn { color: #1a1503; font-weight: 700; } /* 待跟进提醒横幅(四期:秘书/经理→顾问) */ .reminder-banner { margin: 8px 12px; padding: 10px 12px; background: var(--brand-soft); border: 1px solid var(--line-strong); border-left: 3px solid var(--brand); border-radius: 12px; } .reminder-banner-title { font-weight: 700; color: var(--brand); font-size: 13px; margin-bottom: 6px; } .reminder-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); } .reminder-item:first-of-type { border-top: none; } .reminder-item-main { flex: 1; min-width: 0; } .reminder-item-proj { font-size: 11px; color: var(--muted); } .reminder-item-note { font-size: 12px; color: var(--ink-soft); margin-top: 2px; } .reminder-item-ok { flex: 0 0 auto; padding: 5px 12px; border: 1px solid var(--brand); background: transparent; color: var(--brand); border-radius: 8px; font-size: 12px; }