/* DSH v1.11.2 — customer-support conversation design.
   Intent: warm, approachable support bubbles; content-sized messages; quiet controls.
   Loaded after app.css/chat-ui.css to preserve existing markup and behavior. */
:root{
  --cx-ink:#111111;--cx-muted:#8a8a8a;--cx-soft:#f5f5f5;--cx-soft-2:#f5f5f5;
  --cx-blue:#555555;--cx-blue-soft:#f5f5f5;--cx-green:#16856b;
  --cx-line:rgba(0,0,0,.075);--cx-shadow:0 12px 34px rgba(0,0,0,.07);
}
html,body{background:#fafafa;color:var(--cx-ink)}
body{background-image:none}
.shell{grid-template-columns:252px minmax(0,1fr);background:#fff}
.side{background:#fafafa;border-right:1px solid rgba(0,0,0,.07)}
.brand .lg{background:#555555;border-radius:11px;box-shadow:0 5px 12px rgba(0,0,0,.18)}
.new-chat{border:0;background:#f5f5f5;color:#555555;border-radius:12px;box-shadow:none}
.new-chat:hover{background:#e5e5e5;color:#555555}
.conv{border-radius:10px;min-height:38px}
.conv.on{background:#e5e5e5;color:#555555}
.conv:hover{background:#f5f5f5}
.side-foot{border-top:1px solid var(--cx-line)}
.me:hover{background:#f5f5f5}
.main{background:#fff}
.topbar{height:60px;border-bottom:1px solid rgba(0,0,0,.065);background:rgba(255,255,255,.96);padding:0 25px}
.av-agent{background:#555555;border-radius:10px;box-shadow:none}
.av-agent::after{background:#20a47c}
.persona-chip{background:#f5f5f5;border:0;border-radius:999px;color:#555555}
.tbtn{border:0;border-radius:10px;color:#555555}
.tbtn:hover{background:#f5f5f5;color:#555555}
.tbtn.solid{background:#555555;color:#fff}
.tbtn.solid:hover{background:#555555}

/* Conversation: each bubble grows with its content, then wraps at a readable max width. */
.stream{background:#fff;scroll-padding-bottom:22px}
.stream-inner{width:min(100%,960px);max-width:960px;padding:34px clamp(18px,4vw,46px) 30px}
.msg{display:flex;width:100%;align-items:flex-end;gap:9px;margin:0 0 22px;animation:fadeUp .18s ease both}
.msg.user{flex-direction:row-reverse;justify-content:flex-start}
.msg .avatar{display:grid;width:27px;height:27px;flex:0 0 27px;margin:0 0 23px;border-radius:9px;font-size:11px}
.msg .avatar.a{background:#555555;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.16)}
.msg .avatar.u{display:none}
.msg-content{display:flex;flex:0 1 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:min(84%,780px);min-width:0}
.msg.user .msg-content{align-items:flex-end;max-width:min(80%,740px)}
.msg .bubble{display:block;width:fit-content;max-width:100%;min-width:0;padding:11px 15px;border:0!important;box-shadow:none!important;overflow:hidden;overflow-wrap:anywhere;word-break:normal}
.msg.assistant .bubble{background:#f5f5f5;color:#111111;border-radius:17px 17px 17px 6px;padding:12px 16px}
.msg.user .bubble{background:#f5f5f5;color:#111111;border-radius:17px 17px 6px 17px;padding:10px 15px}
.msg .body{width:auto;min-width:0;max-width:100%;font-size:14px;line-height:1.72;overflow-wrap:anywhere;word-break:normal}
.msg.user .body{white-space:pre-wrap}
.msg .body p{margin:0 0 9px}
.msg .body p:last-child{margin-bottom:0}
.msg .body h3{font-size:15px;line-height:1.45;margin:13px 0 6px;color:#111111}
.msg .body h4{font-size:13.5px;margin:11px 0 5px}
.msg .body ul,.msg .body ol{padding-left:20px;margin:4px 0 9px}
.msg .body li{padding-left:2px;margin:3px 0}
.msg .body code{background:#e5e5e5;border:0;border-radius:5px;color:#111111;padding:2px 5px}
.msg .body pre{max-width:100%;overflow:auto;border-radius:10px;background:#111111;color:#f5f5f5;padding:12px}
.msg-meta{display:flex;align-items:center;gap:7px;min-height:23px;margin-top:3px}
.msg.user .msg-meta{justify-content:flex-end}
.msg.assistant .msg-meta{justify-content:flex-start}
.msg-actions{opacity:.32;gap:2px;margin-top:0}
.msg:hover .msg-actions,.msg:focus-within .msg-actions{opacity:.9}
.act{width:26px;height:26px;border-radius:8px;color:#8a8a8a}
.act:hover{background:#f5f5f5;color:#555555}
.msg-time{font-size:10px;color:#8a8a8a;margin-top:0}
.msg-extras,.ev-slot{width:100%;max-width:100%;min-width:0}
.evidence{border:0;border-top:1px solid var(--cx-line);margin-top:9px;padding-top:8px}
.ev-item{border:0;background:#f5f5f5;border-radius:9px}
.ev-item:hover{background:#f5f5f5}
.ragbar span{border:0;background:#f5f5f5}
.auto-follow-label{font-size:10px;color:#8a8a8a;margin:0 0 4px 4px}

/* Welcome state: guide the customer instead of presenting a generic AI landing page. */
.welcome{padding:48px 0 18px}
.welcome .face{background:#555555;border-radius:17px;box-shadow:0 8px 20px rgba(0,0,0,.17)}
.welcome h1{color:#111111;font-size:25px;letter-spacing:-.4px}
.welcome .lead{color:#8a8a8a}
.welcome .lead b{color:#555555}
.suggests{max-width:720px;gap:10px}
.sg{border:0;background:#f5f5f5;border-radius:13px;min-height:70px;box-shadow:none}
.sg:hover{border:0;background:#f5f5f5;box-shadow:none;transform:translateY(-1px)}
.sg-ico{background:#e5e5e5;color:#555555}
.sg-t{color:#111111}.sg-d{color:#8a8a8a}

/* One calm composer surface; no nested outlines. */
.composer-wrap{padding:12px 22px 18px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%)}
.composer{max-width:880px}
.composer-box{border:1px solid transparent;border-radius:22px;background:#f5f5f5;box-shadow:0 2px 9px rgba(0,0,0,.045)}
.composer-box:focus-within{border-color:transparent;box-shadow:0 2px 9px rgba(0,0,0,.05)}
.composer textarea{min-height:50px;padding:14px 17px 4px;color:#111111}
.composer textarea::placeholder{color:#8a8a8a}
.composer-bar{padding:4px 8px 8px 12px}
.send{width:35px;height:35px;border-radius:12px;background:#555555;box-shadow:none}
.send:not(:disabled):hover{background:#555555}
.composer-hint{color:#8a8a8a}

/* Settings: reduce nested boxes and make actions visually predictable. */
.mask{background:rgba(0,0,0,.30);backdrop-filter:blur(5px)}
.sheet{border:0;border-radius:20px;box-shadow:0 28px 90px rgba(0,0,0,.22);background:#fff}
.sheet-head{background:#fafafa;border-right:1px solid rgba(0,0,0,.07)}
.sheet-title h2{color:#555555}
.sheet-sub{color:#8a8a8a}
.tab{border:0;background:transparent;color:#8a8a8a;border-radius:10px}
.tab:hover{background:#f5f5f5;color:#555555}
.tab.on{background:#e5e5e5;color:#111111}
.sheet-body{background:#fff}
.sheet-foot{border-top:1px solid rgba(0,0,0,.07);background:#fff}
.btn{border-radius:10px;min-height:37px}
.btn.primary{background:#555555;color:#fff}
.btn.primary:hover{background:#555555}
.btn.ghost{border:0;background:#f5f5f5;color:#555555}
.btn.ghost:hover{background:#e5e5e5;color:#111111}
.btn.danger{border:0;background:#f5f5f5;color:#555555}
.btn.danger:hover{background:#e5e5e5}
.sheet-body .field input:not([type=checkbox]):not([type=color]),.sheet-body .field textarea,.sheet-body .field select{border:1px solid #e5e5e5;border-radius:10px;background:#fafafa}
.sheet-body .field input:focus,.sheet-body .field textarea:focus,.sheet-body .field select:focus{border-color:#8a8a8a;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.sec{border:0}
.sec-title{color:#111111}
.mini,.kb-mini-btn,.site-action,.history-btn{border:0;border-radius:9px;background:#f5f5f5;color:#555555;box-shadow:none}
.mini:hover,.kb-mini-btn:hover,.site-action:hover,.history-btn:hover{border:0;background:#e5e5e5;color:#555555}
.kb-mini-btn.primary,.history-btn.primary,.site-action.primary{background:#555555;color:#fff}
.kb-mini-btn.primary:hover,.history-btn.primary:hover,.site-action.primary:hover{background:#555555}
.kb-card,.kb-search-box,.kb-editor-panel,.kb-search-result,.kb-chunk-item,.kb-table-preview{border:0;background:#fafafa;box-shadow:none}
.kb-chunk-search,.kb-chunk-textarea{border:1px solid #e5e5e5;border-radius:9px;background:#fff}
.drop{border:1px dashed #e5e5e5;background:#fafafa;border-radius:13px}
.drop:hover,.drop.over{border-color:#8a8a8a;background:#f5f5f5}
.files{border:0;background:#fafafa;border-radius:12px;overflow:hidden}
.file{border-color:rgba(0,0,0,.055)}
.file:hover{background:#f5f5f5}
.seg,.seg3{border:0;background:#f5f5f5;border-radius:10px}
.seg button,.seg3 button{border-radius:8px}
.seg button.on,.seg3 button.on{background:#fff;color:#555555;box-shadow:0 1px 4px rgba(0,0,0,.10)}
.switch.on{background:#555555}

/* Website widget preview/workbench uses the same visual language, not a clone. */
.site-workbench-card{border:0;border-radius:20px;box-shadow:0 28px 90px rgba(0,0,0,.22)}
.site-workbench-head,.site-workbench-controls{border-color:rgba(0,0,0,.07)}
.site-workbench-close,.site-workbench-back{border:0;background:#f5f5f5;color:#555555}
.site-workbench-close:hover,.site-workbench-back:hover{background:#e5e5e5;color:#555555}
.site-enable-row,.site-style-card{border-color:rgba(0,0,0,.08);box-shadow:none}
.site-style-card.on{border-color:#8a8a8a;box-shadow:inset 0 0 0 1px #8a8a8a}

@media(max-width:760px){
  .stream-inner{padding:24px 16px 22px}
  .msg-content{max-width:calc(100% - 34px)}
  .msg.user .msg-content{max-width:88%}
  .sheet{border-radius:16px}
  .sheet-head{background:#fafafa;border-right:0}
}
@media(max-width:600px){
  .topbar{padding:0 12px}
  .stream-inner{padding:18px 12px 18px}
  .msg{gap:7px;margin-bottom:17px}
  .msg .avatar{width:24px;height:24px;flex-basis:24px;border-radius:8px;margin-bottom:22px}
  .msg-content{max-width:calc(100% - 31px)}
  .msg.user .msg-content{max-width:88%}
  .msg .bubble{padding:10px 12px}
  .msg.assistant .bubble{padding:10px 13px}
  .msg .body{font-size:13.5px;line-height:1.68}
  .composer-wrap{padding:6px 10px 10px}
  .composer-box{border-radius:19px}
  .composer textarea{min-height:46px;padding:12px 13px 3px}
  .welcome{padding:28px 0 14px}
}

/* 对话输入框：去掉浏览器默认的焦点矩形 */
.composer textarea:focus,.composer textarea:focus-visible,.composer-box:focus,.composer-box:focus-visible{outline:none !important;outline-offset:0 !important}
.act.copied{color:#16a34a}

/* ============================================================
   统一规则：4 级字号 / 3 档字重 / 纯黑白灰
   11px 辅助 · 12px 次要 · 13px 正文 · 15px 标题
   400 正文 · 500 强调 · 600 标题
   ============================================================ */
.msg .bubble{font-size:13px;line-height:1.7;font-weight:400}
.composer textarea{font-size:13px;line-height:1.65}
.msg-time,.ev-head,.ragbar span,.composer-hint{font-size:11px;font-weight:400}
.top-name{font-size:14px;font-weight:600;color:#111111}
.top-meta{font-size:11.5px;font-weight:400;color:#8a8a8a}
.conv{font-size:13px;font-weight:400;color:#555555}
.conv.on{font-weight:500;color:#111111}
.msg .avatar.a{background:#111111;box-shadow:none}
.send{background:#111111}
.send:disabled{background:#e5e5e5}

/* 输入框：收窄一点、抬高一点，单行时不局促 */
.composer{max-width:760px}
.composer textarea{min-height:64px}

/* 消息区与输入框同宽同边距，视觉上一条竖线对齐 */
.stream-inner{max-width:760px;padding:32px 24px 24px}

/* 长会话标题单行截断，不撑破侧栏 */
.conv .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 输入框内的文字位置：单行时不贴顶 */
.composer textarea{padding:20px 18px 6px}

/* 头像与气泡顶部对齐（长引用展开时不至于跑到中间） */
.msg{align-items:flex-start}

/* 配色逻辑：对方的话是"白纸"，自己的话是"灰底"，不再两张灰糊在一起 */
.msg.assistant .bubble{background:#ffffff;border:1px solid #e5e5e5}
.msg.user .bubble{background:#f5f5f5;border:0}

/* 对比度修正：白纸与灰底要分得开，边框要看得见 */
.msg.assistant .bubble{background:#ffffff;border:1px solid #e0e0e0}
.msg.user .bubble{background:#ebebeb;border:0}
.ev-item{background:#f5f5f5}
.topbar{border-bottom:1px solid #e5e5e5}
#side{border-right:1px solid #e5e5e5}

/* 黑白对比：自己的话用黑底白字（强存在），对方的话是白纸黑字（稳） */
.msg.user .bubble{background:#111111;color:#ffffff;border:0}
.msg.user .bubble .body,.msg.user .bubble a{color:#ffffff}

/* AI 气泡必须有可见的底：页面是白的，气泡就用浅灰，否则等于没有 */
.msg.assistant .bubble{background:#f2f2f2;border:0}

/* 人设卡片：自适应列宽，宽屏 3 列（3+2 收尾更齐），窄屏自动落回 2 列 */
.personas{grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:10px}
/* 卡片内文字层级统一，避免每张字号看起来不一样 */
.persona .pn{font-size:13px;font-weight:600;letter-spacing:-.01em}
.persona .pd{font-size:12px;line-height:1.5}
.persona .ps{font-size:11px;line-height:1.45}
/* 卡片图标原本是内联蓝色，统一压黑 */
.persona .dot{background:#1a1a1a !important}

/* 收尾：不满一行时居中，避免右边孤零零空一格 */
.personas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch}
.persona{width:calc((100% - 20px) / 3);min-width:160px;box-sizing:border-box}
@media (max-width: 900px){ .persona{width:calc((100% - 10px) / 2)} }

/* 模板配置行单行省略，避免换行把卡片撑高、破坏等高 */
.persona .ps:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 模板配置行：字号再收一档，争取单行显示完整 */
.persona .ps:last-child{font-size:10px;letter-spacing:-.01em}

/* 设置窗口固定尺寸：知识库 / FAQ / 普通三种模式统一，切换时不再跳动 */
.sheet,
.sheet:not(.sheet-kb-mode):not(.sheet-faq-mode),
.sheet.sheet-kb-mode,
.sheet.sheet-faq-mode{
  width:min(1120px,calc(100vw - 40px));
  height:min(800px,calc(100dvh - 40px));
}
/* 内容超出时在窗口内滚动，而不是把窗口撑高 */
.sheet-body{overflow-y:auto;min-height:0}
.sheet.sheet-kb-mode .sheet-body{overflow:hidden}

/* 常见问题配图：编辑器缩略图 + 聊天里的图片 */
.faq-image-list{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.faq-image-cell{position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid #e5e5e5;background:#fafafa}
.faq-image-cell img{width:100%;height:100%;object-fit:cover;display:block}
.faq-image-del{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:12px;line-height:16px;border:0;cursor:pointer;padding:0}
.msg-images{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.msg-images img{max-width:220px;max-height:220px;border-radius:10px;cursor:zoom-in;display:block;border:1px solid #ececec}

/* 我的提示词：独立弹窗 */
.prompt-mask{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(17,17,17,.36);padding:24px;backdrop-filter:blur(2px)}
.prompt-dialog{width:min(620px,calc(100vw - 32px));background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;animation:fadeUp .18s ease both}
.prompt-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 12px}
.prompt-head-copy h3{margin:0 0 6px;font-size:15px;font-weight:600;color:#111}
.prompt-head-copy p{margin:0;font-size:12px;line-height:1.6;color:#8a8a8a}
.prompt-x{margin-left:auto;width:28px;height:28px;flex:none;border:0;border-radius:8px;background:transparent;color:#8a8a8a;font-size:20px;line-height:1;cursor:pointer}
.prompt-x:hover{background:#f5f5f5;color:#111}
.prompt-ta{margin:0 22px;min-height:220px;max-height:46vh;padding:14px 16px;border:1px solid #e5e5e5;border-radius:12px;background:#fafafa;font-size:13px;line-height:1.7;color:#1a1a1a;resize:vertical;font-family:inherit}
.prompt-ta:focus{outline:none;border-color:#d4d4d4;background:#fff}
.prompt-foot-bar{display:flex;align-items:center;gap:10px;padding:14px 22px 18px}
.prompt-count{font-size:11.5px;color:#a0a0a0;font-variant-numeric:tabular-nums}
.prompt-foot-bar .spacer{flex:1}
.prompt-foot-right{display:flex;gap:8px}
.prompt-btn{height:34px;padding:0 16px;border-radius:9px;border:1px solid #e5e5e5;background:#fff;color:#333;font-size:13px;cursor:pointer}
.prompt-btn:hover{background:#f5f5f5}
.prompt-btn.plain{border-color:transparent;background:transparent;color:#8a8a8a}
.prompt-btn.plain:hover{background:#f5f5f5;color:#111}
.prompt-btn.primary{border-color:#111;background:#111;color:#fff}
.prompt-btn.primary:hover{background:#000}
.prompt-btn:disabled{opacity:.6;cursor:default}

/* 常见问题编辑器：输入框放宽到内容区满宽、答案框加高 */
.sheet.sheet-faq-mode .faq-manager{max-width:none}
.faq-editor{max-width:none;width:100%}
.faq-field{width:100%}
.faq-answer-field{min-height:240px}

/* 常见问题配图：拖拽上传区 */
.faq-drop{display:flex;align-items:center;justify-content:center;gap:8px;min-height:76px;padding:14px;
  border:1px dashed #d4d4d4;border-radius:10px;background:#fafafa;color:#8a8a8a;font-size:12.5px;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.faq-drop:hover{border-color:#a8a8a8;background:#f5f5f5;color:#555}
.faq-drop.over{border-color:#111;background:#f0f0f0;color:#111}
.faq-drop.busy{opacity:.6;pointer-events:none}
.faq-drop b{color:#111;font-weight:500}
.faq-drop-icon{font-size:16px;line-height:1;color:#a0a0a0}

/* 消息通知：平台真实图标（官方 App Store 图标，32px PNG 内联） */
.notify-platform-icon{background:transparent;border:0;overflow:hidden;border-radius:9px}
.notify-platform-icon img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.notify-platform-icon.large{background:transparent}

/* ============================================================
   字号对齐：知识库页提到常见问题页的水准；输入类控件统一 14px
   ============================================================ */
/* 输入类控件统一：对话输入、我的提示词、常见问题、提示词弹窗 */
.composer textarea,
#user-prompt,
.prompt-ta,
.faq-field,
.faq-answer-field{font-size:14px}

/* ============================================================
   设置页排版统一：页面标题同一档，说明文字同一档
   原状：知识库 19px / 常见问题 23px / 其余 15px，差 4~8px
   ============================================================ */
.sheet:not(.sheet-kb-mode) .sheet-body h1,.sheet:not(.sheet-kb-mode) .sheet-body h2,.sheet:not(.sheet-kb-mode) .sheet-body h3{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.4}
.sheet-body h4{font-size:15px;font-weight:600;line-height:1.4}
.sheet:not(.sheet-kb-mode) .sheet-body p{font-size:12px;line-height:1.6}
.sheet:not(.sheet-kb-mode) .sheet-body .sec-title{font-size:15px;font-weight:600}
.sheet:not(.sheet-kb-mode) .sheet-body .sec-hint,.sheet:not(.sheet-kb-mode) .sheet-body small{font-size:12px;line-height:1.6}

/* 知识片段：正文放大 + 编辑弹窗 */
.kb-chunk-preview{font-size:13px;line-height:1.72}
.kb-chunk-textarea{font-size:13px;line-height:1.7}
.kb-chunk-card-meta{font-size:12px}

.chunk-mask{position:fixed;inset:0;z-index:210;display:grid;place-items:center;background:rgba(17,17,17,.38);padding:24px;backdrop-filter:blur(2px)}
.chunk-dialog{width:min(760px,calc(100vw - 32px));max-height:86vh;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.24);display:flex;flex-direction:column;overflow:hidden;animation:fadeUp .18s ease both}
.chunk-ta{margin:0 22px;flex:1;min-height:300px;max-height:58vh;padding:14px 16px;border:1px solid #e5e5e5;border-radius:12px;background:#fafafa;font-size:14px;line-height:1.75;color:#1a1a1a;resize:vertical;font-family:inherit}
.chunk-ta:focus{outline:none;border-color:#d4d4d4;background:#fff}

/* 知识库：整块工作区支持拖拽上传 */
.kb-workspace{position:relative}
.kb-drop-hint{display:none}
.kb-workspace.dragging .kb-drop-hint{
  display:flex;align-items:center;justify-content:center;
  position:absolute;inset:6px;z-index:20;
  border:2px dashed #111;border-radius:14px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(2px);
  color:#111;font-size:14px;font-weight:500;letter-spacing:.02em;
}
.kb-workspace.dragging{outline:none}


/* ============================================================
   我的要求：卡片式配置面板
   ============================================================ */
.req-panel{display:flex;flex-direction:column;gap:14px;padding-bottom:4px}

.req-card{background:#fff;border:1px solid #e9e9e9;border-radius:14px;padding:18px 20px 20px;transition:border-color .16s ease,box-shadow .16s ease}
.req-card:focus-within{border-color:#dcdcdc;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.req-card:hover{border-color:#e0e0e0}

.req-card-head{display:flex;align-items:flex-start;gap:12px}
.req-card-copy{flex:1;min-width:0}
.req-card-head .req-switch{margin-top:2px}
.req-num{width:24px;height:24px;flex:none;border-radius:50%;background:#f4f4f4;color:#666;font-size:12px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums;margin-top:1px}
.req-card-title{font-size:14px;font-weight:600;color:#111;line-height:1.5;letter-spacing:-.01em}
.req-card-head + .req-input,.req-card-head + .req-note,.req-card-head + .req-expand,.req-card-head + .req-field{margin-top:18px}
.req-card-desc{font-size:12px;color:#8a8a8a;line-height:1.65;margin-top:3px}

.req-input{width:100%;height:40px;padding:0 13px;border:1px solid #e8e8e8;border-radius:10px;background:#fafafa;font-size:14px;color:#1a1a1a;font-family:inherit;transition:border-color .15s ease,background-color .15s ease}
.req-input::placeholder{color:#b5b5b5}
.req-input:hover{border-color:#dcdcdc}
.req-input:focus{outline:none;border-color:#111;background:#fff;box-shadow:0 0 0 3px rgba(17,17,17,.05)}

/* 开关行 */
.req-inline{display:flex;align-items:center;justify-content:space-between;gap:16px}
.req-inline-label{font-size:13px;color:#333;line-height:1.5}
.req-switch{position:relative;width:44px;height:26px;flex:none;border-radius:999px;border:0;background:#e2e2e2;cursor:pointer;transition:background .18s ease}
.req-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.08);transition:transform .18s cubic-bezier(.4,0,.2,1)}
.req-switch:hover{background:#d8d8d8}
.req-switch.on{background:#111}
.req-switch.on:hover{background:#000}
.req-switch.on::after{transform:translateX(18px)}

/* 展开区 */
.req-expand{margin-top:14px;padding-top:14px;border-top:1px dashed #ededed}
.req-expand[hidden]{display:none}

.req-sub{font-size:11.5px;color:#9a9a9a;margin-bottom:10px;letter-spacing:.01em}

/* 渠道 pill */
.req-chips{display:flex;flex-wrap:wrap;gap:8px}
.req-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 12px;border-radius:10px;border:1px solid #e8e8e8;background:#fff;color:#444;font-size:13px;cursor:pointer;transition:all .15s ease}
.req-chip svg{width:15px;height:15px;flex:none;opacity:.85}
.req-chip:hover{border-color:#cfcfcf;background:#fafafa}
.req-chip.on{border-color:#111;background:#111;color:#fff}
.req-chip.on svg{opacity:1}
.req-chip.on svg *{fill:#fff;stroke:#fff}

/* 填写区 */
.req-fill{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.req-fill-row{display:flex;align-items:center;gap:12px}
.req-fill-label{width:92px;flex:none;font-size:12.5px;color:#777;display:flex;align-items:center;gap:6px}
.req-fill-label svg{width:14px;height:14px;opacity:.6}
.req-fill .req-input{height:38px;font-size:13.5px}

/* 提示词 */
.req-note{margin-top:2px}
.req-note textarea{width:100%;min-height:150px;max-height:34vh;padding:13px 15px;border:1px solid #e8e8e8;border-radius:12px;background:#fafafa;font-size:14px;line-height:1.75;color:#1a1a1a;resize:vertical;font-family:inherit;transition:border-color .15s ease,background-color .15s ease}
.req-note textarea::placeholder{color:#b5b5b5}
.req-note textarea:hover{border-color:#dcdcdc}
.req-note textarea:focus{outline:none;border-color:#111;background:#fff;box-shadow:0 0 0 3px rgba(17,17,17,.05)}
.req-note-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
.req-note-count{font-size:11.5px;color:#a8a8a8;font-variant-numeric:tabular-nums}
.req-note-count.warn{color:#c2410c}
.req-note-foot .spacer{flex:1}
.req-clear{height:26px;padding:0 10px;border-radius:7px;border:0;background:transparent;color:#9a9a9a;font-size:12px;cursor:pointer}
.req-clear:hover{background:#f4f4f4;color:#333}

/* 我的要求：自动保存提示条 */
.req-notice{display:flex;align-items:center;gap:6px;font-size:12px;color:#8a8a8a;background:#fafafa;border:1px solid #f0f0f0;border-radius:10px;padding:9px 13px;margin-bottom:2px}
.req-notice::before{content:'';width:6px;height:6px;border-radius:50%;background:#111;flex:none;opacity:.5}

/* 我的要求：字段组（称呼 / 行业） */
.req-field{display:flex;flex-direction:column;gap:8px}
.req-field + .req-field{margin-top:22px}
.req-field-label{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#555}
.req-field-limit{font-size:11.5px;color:#b0b0b0;font-variant-numeric:tabular-nums}

/* 常见问题：列表容器缺间距（官方没写 .faq-list 规则，卡片会完全贴住） */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-card + .faq-card{margin-top:0}

/* 常见问题：相似问法改成一框一条 + × 删除 */
.faq-alias-list{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.faq-alias-row{display:flex;align-items:center;gap:8px}
.faq-alias-row .faq-field,.faq-alias-input{flex:1;min-width:0}
.faq-alias-del{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid #ececec;background:#fff;color:#9a9a9a;font-size:16px;line-height:1;cursor:pointer;transition:all .14s ease}
.faq-alias-del:hover{border-color:#f0c9c9;background:#fff5f5;color:#c0392b}
.faq-alias-add{align-self:flex-start;height:30px;padding:0 12px;border-radius:8px;border:1px dashed #dcdcdc;background:#fff;color:#666;font-size:12.5px;cursor:pointer;transition:all .14s ease}
.faq-alias-add:hover{border-color:#111;color:#111;background:#fafafa}

/* 我的要求：二维码 + 自动发送 */
.req-qr-row{display:flex;align-items:center;gap:8px;padding-left:92px;margin-top:-2px}
.req-qr-thumb{width:44px;height:44px;border-radius:8px;border:1px solid #ececec;object-fit:cover;background:#fafafa;flex:none}
.req-qr-btn{height:28px;padding:0 11px;border-radius:7px;border:1px dashed #dcdcdc;background:#fff;color:#666;font-size:12px;cursor:pointer}
.req-qr-btn:hover{border-color:#111;color:#111}
.req-qr-btn:disabled{opacity:.6;cursor:default}
.req-qr-del{width:24px;height:24px;border-radius:6px;border:1px solid #ececec;background:#fff;color:#9a9a9a;font-size:14px;line-height:1;cursor:pointer;flex:none}
.req-qr-del:hover{border-color:#f0c9c9;background:#fff5f5;color:#c0392b}

.req-auto{margin-top:16px;padding-top:14px;border-top:1px dashed #ededed}
.req-auto-opts{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.req-auto-opts[hidden]{display:none}
.req-switch.sm{width:38px;height:22px}
.req-switch.sm::after{width:16px;height:16px;top:3px;left:3px}
.req-switch.sm.on::after{transform:translateX(16px)}
.req-interval-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#333}
.req-interval-input{width:62px;height:32px;padding:0 8px;border:1px solid #e8e8e8;border-radius:8px;background:#fafafa;font-size:13px;text-align:center;font-family:inherit}
.req-interval-input:focus{outline:none;border-color:#111;background:#fff}

/* 我的要求：输入框分段 —— 右侧直接拖入二维码 */
.req-fill .req-fill-row{display:none}
.req-fill-combo{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 0;border:1px solid #e8e8e8;border-radius:10px;background:#fafafa;transition:border-color .15s ease,background-color .15s ease}
.req-fill-combo:focus-within{border-color:#111;background:#fff;box-shadow:0 0 0 3px rgba(17,17,17,.05)}
.req-fill-combo .req-fill-label{width:86px;padding-left:13px;margin:0}
.req-combo-input{flex:1;min-width:0;height:100%;border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important;font-size:13.5px}
.req-combo-input:focus{outline:none;box-shadow:none !important}
.req-qr-slot{width:112px;height:32px;flex:none;border-left:1px solid #e4e4e4;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#8a8a8a;cursor:pointer;position:relative;border-radius:0 8px 8px 0;transition:background-color .15s ease,color .15s ease;padding-left:10px;box-sizing:border-box}
.req-qr-slot:hover{background:#efefef;color:#333}
.req-qr-slot.over{background:#e4e4e4;color:#111}
.req-qr-slot.busy{opacity:.6;pointer-events:none}
.req-qr-slot-img{width:26px;height:26px;object-fit:cover;border-radius:4px;display:block}
.req-qr-slot-img[hidden]{display:none}
.req-qr-slot-del{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;border:0;background:#111;color:#fff;font-size:11px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.req-qr-slot-del[hidden]{display:none}

.req-qr-slot-icon{display:flex;align-items:center;flex:none}
.req-qr-slot-icon svg{width:14px;height:14px;opacity:.75}
.req-qr-slot-icon[hidden]{display:none}
.req-qr-slot:hover .req-qr-slot-icon svg{opacity:1}
