/* 产品皮肤（品牌显示为 Shulex）：让所有 HTML 复刻界面贴近真实产品（ai.solvea.cx）的视觉语言。
   取色自产品截图：顶栏 #131f2f · 侧栏 #f0f1f3 · 主按钮 #1777ff · 头像 #4270ff · 客户气泡 #f9f9f9 · AI 气泡 #f2f7ff
   · Human in Loop #ffefe1 · 同意 #02b52a · 拒绝 #f53f3f · 状态绿 #3ea76e。加载顺序放在所有界面样式之后。 */

:root { --sv-navy: #131f2f; --sv-side: #f0f1f3; --sv-blue: #1777ff; --sv-avatar: #4270ff; --sv-cust: #edf3ff; --sv-ai: #dbe7ff; --sv-hil: #ffefe1; --sv-hil-ink: #d4600a; --sv-ok: #02b52a; --sv-no: #f53f3f; --sv-green: #3ea76e; --sv-line: #e8eaef; --sv-ink: #1f2937; --sv-muted: #8a94a6; }

/* ===== 顶栏：深藏青 + solvea. 字标 ===== */
.ch-window > header, .lc-handoff > header, .desk-key-workbench > header, .desk-routing-ui > header, .desk-ops-ui > header, .fx-spot-head.is-bar { background: var(--sv-navy) !important; color: #fff; }
.ch-window > header .logo, .desk-key-workbench > header strong::before, .desk-routing-ui > header strong::before, .desk-ops-ui > header strong::before { background-image: url('../assets/shulex-logo-dark.png') !important; filter: brightness(0) invert(1) !important; }
.ch-window > header .logo { width: 96px; height: 22px; background-size: contain; background-position: left center; }
.lc-handoff > header { padding: 0 16px; height: 50px; }
.lc-handoff > header::before { content: ''; display: inline-block; width: 96px; height: 22px; margin-right: 12px; vertical-align: middle; background: url('../assets/shulex-logo-dark.png') left center / contain no-repeat; filter: brightness(0) invert(1); }
.lc-handoff > header b { font-weight: 600; }
.lc-handoff > header span { color: #aeb8c8; }

/* ===== 会话区：白色，客户灰气泡 + 意图标签，AI 浅蓝气泡 + 机器人头像 ===== */
.lc-handoff-chat, .fx-spot, .hd-thread, .desk-key-chat > div { background: #fff !important; }
.lc-handoff-chat .lc-msg, .fx-msg, .hd-msg, .desk-key-chat p { border-radius: 12px !important; }
.lc-handoff-chat .lc-msg.customer, .fx-msg.customer, .desk-key-chat p.customer { position: relative; margin-left: 42px !important; margin-right: 0 !important; max-width: calc(100% - 42px) !important; color: var(--sv-ink) !important; background: var(--sv-cust) !important; border: 1px solid #efefef; }
.lc-handoff-chat .lc-msg.customer::before, .fx-msg.customer::before, .desk-key-chat p.customer::before { content: 'C'; position: absolute; left: -42px; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sv-avatar); color: #fff; font-size: 12px; font-weight: 700; }
.lc-handoff-chat .lc-msg.ai, .fx-msg.ai, .hd-msg.ai, .desk-key-chat p.agent { position: relative; margin-left: 0 !important; margin-right: 42px !important; max-width: calc(100% - 42px) !important; color: var(--sv-ink) !important; background: var(--sv-ai) !important; border: 1px solid #e3ecff; }
.lc-handoff-chat .lc-msg.ai::after, .fx-msg.ai::after, .hd-msg.ai::after, .desk-key-chat p.agent::after { content: ''; position: absolute; right: -42px; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--sv-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='11' rx='3'/%3E%3Ccircle cx='9' cy='13.5' r='1.2' fill='%23fff'/%3E%3Ccircle cx='15' cy='13.5' r='1.2' fill='%23fff'/%3E%3Cpath d='M12 8V5M9 5h6'/%3E%3C/svg%3E") center / 18px no-repeat; }
.hd-msg.ai { margin-left: auto !important; }
.hd-msg .hd-who { color: var(--sv-muted); }
.lc-widget .lc-msg.customer::before, .lc-widget .lc-msg.ai::after { display: none; }

/* 意图标签：客户消息下方的小标签，样式同产品里的「意图: Troubleshooting」 */
.lc-ai-note, .fx-note, .hc-note { display: inline-flex !important; align-items: center; gap: 6px; margin: -4px 0 12px 42px !important; padding: 5px 10px; border: 1px solid #e4e7ee; border-radius: 8px; background: #fff; color: #374151 !important; font-size: 12px !important; }
.lc-ai-note::before, .fx-note::before, .hc-note::before { content: '' !important; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231777ff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%231777ff'/%3E%3Cpath d='M12 4v3M12 17v3M4 12h3M17 12h3'/%3E%3C/svg%3E") center / contain no-repeat; }
.lc-ai-note::after, .fx-note::after, .hc-note::after { content: '⌄'; color: #9aa4b5; font-size: 12px; line-height: 1; }
.hc-note { margin-left: 0 !important; }

/* ===== Human in Loop：橙色标题条 + 白色内容 + 同意 / 拒绝 ===== */
.lc-risk { padding: 0 !important; overflow: hidden; border: 1.5px solid var(--sv-hil) !important; border-radius: 12px !important; background: #fff !important; }
.lc-risk > small { display: flex !important; align-items: center; gap: 8px; padding: 10px 14px; background: var(--sv-hil); color: var(--sv-hil-ink) !important; font-size: 13px !important; font-weight: 700; }
.lc-risk > small::before { content: '!'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--sv-hil-ink); color: #fff; font-size: 11px; font-weight: 800; }
.lc-risk > b { display: block; padding: 12px 14px 4px !important; margin: 0 !important; color: var(--sv-ink) !important; font-size: 13px !important; line-height: 1.55; }
.lc-risk .tags { padding: 6px 14px 12px !important; margin: 0 !important; }
.lc-risk .tags span { border-color: #eceff4 !important; background: #f3f4f9 !important; color: #4b5563 !important; }
.sv-actions { display: flex; gap: 10px; padding: 2px 14px 14px; }
.sv-actions span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 7px 16px; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 700; }
.sv-actions .ok { background: var(--sv-ok); } .sv-actions .no { background: var(--sv-no); }
.lc-risk.is-info { border-color: #dbe6ff !important; }
.lc-risk.is-info > small { background: #eaf1ff; color: #1d4ed8 !important; }
.lc-risk.is-info > small::before { content: 'i'; background: #1d4ed8; }
.desk-key-chat .ai-transfer { border-left: 3px solid var(--sv-hil-ink); background: #fff8f0 !important; }

/* ===== 按钮、标签、表格 ===== */
.lc-handoff-side .assign { background: var(--sv-navy) !important; }
.lc-handoff-side .assign b, .lc-widget > footer b, .ap-form .submit, .hc-search em, .hd-prompt:hover, .desk-key-chat > footer b, .hc-gaps .draft .btns span.primary, .hd-actions a.primary, .lc-inline-cta .actions a.primary { background: var(--sv-blue) !important; border-color: var(--sv-blue) !important; border-radius: 6px !important; }
.hd-prompt { border-color: var(--sv-blue); color: var(--sv-blue); border-radius: 6px !important; }
.hd-prompt.is-next { border-color: var(--sv-navy); color: var(--sv-navy); }
.ch-pill { border-radius: 4px !important; font-weight: 600 !important; }
.ch-pill.ok { color: var(--sv-green) !important; background: #eaf7ef !important; }
.ch-pill.info { color: var(--sv-blue) !important; background: #eaf1ff !important; }
.ch-pill.gray { background: #f3f4f9 !important; }
.ind-table th, .em-night th, .hc-gaps th { background: #f7f8fa; }
.ind-table tr.hit td { background: #f2f7ff !important; }
.desk-key-views, .em-list, .hc-nav { background: var(--sv-side) !important; }
.desk-key-views p.active, .em-list article.active, .hc-nav p.active { background: #eaf1ff !important; color: var(--sv-blue) !important; border-left-color: var(--sv-blue) !important; }


/* ===== 会话头：白色，「来自 Live Chat · Chat ID」+ 执行日志 ===== */
.fx-spot-head { padding-bottom: 12px; }
.fx-spot-head b::before { content: '来自 '; color: var(--sv-muted); font-weight: 400; }
.hd-chat > header { background: #fff; }
.hd-status { background: var(--sv-navy) !important; border-radius: 6px !important; }
.hd-status.is-human { background: var(--sv-hil) !important; color: var(--sv-hil-ink) !important; }
.hd-status.is-human::before { background: var(--sv-hil-ink) !important; }
.hd-step.is-done::before, .hd-step.is-active::before { border-color: var(--sv-blue) !important; }
.hd-step.is-done::before { background-color: var(--sv-blue) !important; }
.hd-step.is-human.is-done::before, .hd-step.is-human.is-active::before { border-color: var(--sv-hil-ink) !important; background-color: var(--sv-hil-ink) !important; }
.hd-step .hd-feature { background: #eaf1ff; color: var(--sv-blue); }


/* 编号标注圆点改为产品蓝（与主按钮一致） */
.fx-mark::before, .fx-numbered li::before, .fx-numbered-proof span::before { background: var(--sv-blue) !important; }