.demo-chat{--dc-primary:#7457ed;--dc-secondary:#19c7c2;--dc-bg:#fff;--dc-panel:#f6f7fb;--dc-text:#20283a;--dc-muted:#778196;--dc-line:#e2e7f0;position:fixed;z-index:1000;bottom:22px;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--dc-text)}
.demo-chat[data-position="left"]{left:22px}.demo-chat[data-position="right"]{right:22px}
.demo-chat[data-style="2"]{--dc-primary:#1687e5;--dc-secondary:#3bc9db;--dc-panel:#eef8ff}
.demo-chat[data-style="3"]{--dc-primary:#15966b;--dc-secondary:#65c466;--dc-panel:#effbf4}
.demo-chat[data-style="4"]{--dc-primary:#f0783c;--dc-secondary:#f3b63f;--dc-panel:#fff7ed}
.demo-chat[data-style="5"]{--dc-primary:#dd4f85;--dc-secondary:#f08da5;--dc-panel:#fff3f7}
.demo-chat[data-style="6"]{--dc-primary:#334155;--dc-secondary:#64748b;--dc-bg:#151b25;--dc-panel:#0f141d;--dc-text:#f1f5f9;--dc-muted:#9aa6b6;--dc-line:#303a49}
.demo-chat[data-style="7"]{--dc-primary:#18181b;--dc-secondary:#71717a;--dc-panel:#fafafa;--dc-line:#e4e4e7}
.demo-chat[data-style="8"]{--dc-primary:#9867e8;--dc-secondary:#ff83b7;--dc-panel:#fbf4ff}
.demo-chat[data-style="9"]{--dc-primary:#a87313;--dc-secondary:#d6a83b;--dc-panel:#fff9e9}
.demo-chat[data-style="10"]{--dc-primary:#6927d6;--dc-secondary:#00b8a9;--dc-bg:#10141d;--dc-panel:#090d14;--dc-text:#e9fdf9;--dc-muted:#89a8a3;--dc-line:#254941}
.demo-chat__launcher{position:relative;width:58px;height:58px;margin-left:auto;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--dc-primary),var(--dc-secondary));box-shadow:0 12px 35px color-mix(in srgb,var(--dc-primary) 38%,transparent);cursor:pointer;transition:.2s}
.demo-chat__launcher:hover{transform:translateY(-2px)}.demo-chat__launcher svg{width:27px;height:27px;fill:currentColor}.demo-chat__badge{position:absolute;right:-2px;top:-2px;width:13px;height:13px;background:#36cf78;border:2px solid #fff;border-radius:50%}
.demo-chat__panel{position:absolute;bottom:72px;width:min(360px,calc(100vw - 28px));height:min(540px,calc(100vh - 120px));display:flex;flex-direction:column;overflow:hidden;background:var(--dc-bg);border:1px solid var(--dc-line);border-radius:20px;box-shadow:0 24px 70px #17203330;transform:translateY(12px) scale(.97);transform-origin:bottom;opacity:0;visibility:hidden;transition:.2s}
.demo-chat[data-position="left"] .demo-chat__panel{left:0}.demo-chat[data-position="right"] .demo-chat__panel{right:0}.demo-chat.is-open .demo-chat__panel{transform:none;opacity:1;visibility:visible}
.demo-chat__header{display:flex;align-items:center;gap:11px;padding:16px 17px;color:#fff;background:linear-gradient(120deg,var(--dc-primary),var(--dc-secondary))}.demo-chat__avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#fff3;font-size:20px}.demo-chat__header strong{display:block;font-size:15px}.demo-chat__header small{display:block;opacity:.82;font-size:11px}.demo-chat__close{margin-left:auto;border:0;background:none;color:#fff;font-size:25px;cursor:pointer}
.demo-chat__notice{padding:8px 13px;text-align:center;color:var(--dc-muted);background:var(--dc-panel);border-bottom:1px solid var(--dc-line);font-size:10px}.demo-chat__messages{flex:1;overflow:auto;padding:15px;background:var(--dc-panel)}.demo-chat__message{display:flex;margin:0 0 12px}.demo-chat__message.is-user{justify-content:flex-end}.demo-chat__bubble{max-width:80%;padding:9px 12px;border:1px solid var(--dc-line);border-radius:14px 14px 14px 4px;background:var(--dc-bg);font-size:13px;line-height:1.55;overflow-wrap:anywhere}.demo-chat__message.is-user .demo-chat__bubble{color:#fff;border:0;border-radius:14px 14px 4px 14px;background:var(--dc-primary)}.demo-chat__bubble img{display:block;max-width:210px;max-height:180px;border-radius:9px;object-fit:cover}
.demo-chat__composer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:end;padding:11px;background:var(--dc-bg);border-top:1px solid var(--dc-line)}.demo-chat__image,.demo-chat__send{width:37px;height:37px;border:0;border-radius:10px;display:grid;place-items:center;cursor:pointer}.demo-chat__image{color:var(--dc-muted);background:var(--dc-panel);font-size:20px}.demo-chat__send{color:#fff;background:var(--dc-primary);font-size:18px}.demo-chat__input{width:100%;min-height:37px;max-height:88px;margin:0;padding:8px 10px;resize:none;color:var(--dc-text);background:var(--dc-panel);border:1px solid var(--dc-line);border-radius:10px;font:inherit;font-size:13px;line-height:1.45}.demo-chat__file{display:none}
/* 每个主题不仅换色，也改变窗口轮廓、标题栏、气泡和入口造型 */
.demo-chat[data-style="2"] .demo-chat__launcher{width:68px;border-radius:18px;transform:rotate(-2deg)}.demo-chat[data-style="2"] .demo-chat__panel{border-radius:30px 30px 12px 30px}.demo-chat[data-style="2"] .demo-chat__header{padding:20px;border-radius:0 0 45% 0}.demo-chat[data-style="2"] .demo-chat__bubble{border-radius:20px}
.demo-chat[data-style="3"] .demo-chat__launcher{border-radius:22px 50% 50% 50%}.demo-chat[data-style="3"] .demo-chat__panel{border-radius:28px 10px 28px 10px}.demo-chat[data-style="3"] .demo-chat__header{background:var(--dc-bg);color:var(--dc-text);border-bottom:3px solid var(--dc-primary)}.demo-chat[data-style="3"] .demo-chat__avatar{background:#dff6e8}.demo-chat[data-style="3"] .demo-chat__bubble{border-radius:5px 18px 18px}
.demo-chat[data-style="4"] .demo-chat__panel{border-radius:8px;border:2px solid var(--dc-primary);box-shadow:9px 9px 0 #f6c67b}.demo-chat[data-style="4"] .demo-chat__launcher{width:108px;height:48px;grid-template-columns:24px auto;gap:7px;border-radius:9px;box-shadow:6px 6px 0 #f6c67b}.demo-chat[data-style="4"] .demo-chat__launcher:after{content:"客服咨询";font-size:13px;font-weight:700}.demo-chat[data-style="4"] .demo-chat__launcher svg{width:23px}.demo-chat[data-style="4"] .demo-chat__header{background:var(--dc-bg);color:var(--dc-text);border-bottom:4px solid var(--dc-secondary)}.demo-chat[data-style="4"] .demo-chat__bubble,.demo-chat[data-style="4"] .demo-chat__input{border-radius:6px}
.demo-chat[data-style="5"] .demo-chat__panel{border-radius:34px}.demo-chat[data-style="5"] .demo-chat__avatar{width:45px;height:45px;border:3px solid #fff;border-radius:15px 50% 50%}.demo-chat[data-style="5"] .demo-chat__launcher{border-radius:50% 50% 15px 50%}.demo-chat[data-style="5"] .demo-chat__bubble{border-radius:22px 22px 22px 7px}.demo-chat[data-style="5"] .demo-chat__composer{padding:15px;border-radius:28px 28px 0 0}
.demo-chat[data-style="6"] .demo-chat__panel{background:#151b25e8;border-color:#ffffff24;backdrop-filter:blur(20px);box-shadow:0 30px 90px #0009}.demo-chat[data-style="6"] .demo-chat__header{background:#ffffff0b;border-bottom:1px solid #ffffff1c}.demo-chat[data-style="6"] .demo-chat__launcher{border:1px solid #ffffff40;background:#202938cc;backdrop-filter:blur(14px)}.demo-chat[data-style="6"] .demo-chat__composer{background:#111722cc}
.demo-chat[data-style="7"] .demo-chat__panel{width:min(390px,calc(100vw - 28px));border-radius:0;border:2px solid #18181b;box-shadow:none}.demo-chat[data-style="7"] .demo-chat__header{color:#18181b;background:#fff;border-bottom:2px solid #18181b}.demo-chat[data-style="7"] .demo-chat__avatar{background:#18181b;color:#fff;border-radius:0}.demo-chat[data-style="7"] .demo-chat__launcher{width:112px;height:46px;grid-template-columns:23px auto;gap:8px;border-radius:0;background:#18181b;box-shadow:none}.demo-chat[data-style="7"] .demo-chat__launcher:after{content:"在线客服";font-size:13px;letter-spacing:1px}.demo-chat[data-style="7"] .demo-chat__launcher svg{width:22px}.demo-chat[data-style="7"] .demo-chat__bubble,.demo-chat[data-style="7"] .demo-chat__input,.demo-chat[data-style="7"] .demo-chat__image,.demo-chat[data-style="7"] .demo-chat__send{border-radius:0}
.demo-chat[data-style="8"] .demo-chat__panel{border:4px solid #fff;border-radius:26px;box-shadow:0 0 0 3px #c9a8f2,0 22px 60px #9d6ee844}.demo-chat[data-style="8"] .demo-chat__launcher{border:4px solid #fff;box-shadow:0 0 0 3px #c9a8f2,0 12px 30px #9867e855;animation:demo-chat-float 2.6s ease-in-out infinite}.demo-chat[data-style="8"] .demo-chat__header{background:linear-gradient(115deg,#9867e8 0 35%,#ff83b7 35% 70%,#75d8e8 70%)}.demo-chat[data-style="8"] .demo-chat__bubble{box-shadow:0 3px 0 #e4d5f5}
.demo-chat[data-style="9"] .demo-chat__panel{width:min(400px,calc(100vw - 28px));border:1px solid #b98a2d;border-radius:3px;box-shadow:0 0 0 4px #fff,0 0 0 5px #d7b35d,0 24px 60px #60430e2e}.demo-chat[data-style="9"] .demo-chat__header{background:#25231f;border-bottom:3px double #d7b35d}.demo-chat[data-style="9"] .demo-chat__launcher{width:118px;height:48px;grid-template-columns:23px auto;gap:8px;border-radius:3px;background:#25231f;border:1px solid #d7b35d}.demo-chat[data-style="9"] .demo-chat__launcher:after{content:"专属客服";color:#f2d27d;font-size:13px;letter-spacing:1px}.demo-chat[data-style="9"] .demo-chat__launcher svg{width:22px;color:#f2d27d}.demo-chat[data-style="9"] .demo-chat__bubble{border-radius:2px}.demo-chat[data-style="9"] .demo-chat__message.is-user .demo-chat__bubble{background:#9a6d17;border-radius:2px}
.demo-chat[data-style="10"] .demo-chat__panel{border:1px solid #00e1cf;border-radius:0;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);box-shadow:0 0 30px #00d9c733}.demo-chat[data-style="10"] .demo-chat__header{background:#151126;border-bottom:1px solid #a95cff;text-transform:uppercase;letter-spacing:1px}.demo-chat[data-style="10"] .demo-chat__launcher{border-radius:0;clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);box-shadow:0 0 24px #00d9c788}.demo-chat[data-style="10"] .demo-chat__bubble{border-radius:0;border-color:#285f59}.demo-chat[data-style="10"] .demo-chat__message.is-user .demo-chat__bubble{background:#6524bd;border-left:3px solid #00e1cf}.demo-chat[data-style="10"] .demo-chat__input{border-radius:0}
.demo-chat[data-style="3"] .demo-chat__close,.demo-chat[data-style="4"] .demo-chat__close,.demo-chat[data-style="7"] .demo-chat__close{color:var(--dc-text)}
@keyframes demo-chat-float{50%{transform:translateY(-7px) rotate(2deg)}}
@media(max-width:520px){.demo-chat{bottom:max(14px,env(safe-area-inset-bottom))}.demo-chat[data-position="left"]{left:12px}.demo-chat[data-position="right"]{right:12px}.demo-chat__launcher{width:54px;height:54px}.demo-chat__panel{position:fixed;left:10px!important;right:10px!important;bottom:calc(78px + env(safe-area-inset-bottom));width:auto;height:min(520px,calc(100dvh - 105px));transform-origin:bottom center}.demo-chat__header{padding:13px 15px}.demo-chat__messages{padding:13px}.demo-chat__composer{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}.demo-chat__image,.demo-chat__send{width:42px;height:42px}.demo-chat__input{min-height:42px;font-size:16px}.demo-chat__bubble{max-width:86%}.demo-chat__bubble img{max-width:min(220px,62vw);max-height:190px}.demo-chat[data-style="2"] .demo-chat__launcher{width:62px}.demo-chat[data-style="4"] .demo-chat__panel{left:8px!important;right:14px!important}.demo-chat[data-style="8"] .demo-chat__panel{left:13px!important;right:13px!important}.demo-chat[data-style="9"] .demo-chat__panel{left:14px!important;right:14px!important}}
@media(max-width:360px){.demo-chat__panel{left:6px!important;right:6px!important}.demo-chat__notice{font-size:9px}.demo-chat__avatar{width:35px;height:35px}.demo-chat__header strong{font-size:14px}}