:root{--green:#95ec69;--ink:#1f2a37;--muted:#98a2b3;--line:#e5e7eb;--blue:#1677ff}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;background:#e9edf1;color:var(--ink)}
button,textarea{font:inherit}
button{cursor:pointer}
.service{height:100%;width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;background:#f1f3f5;box-shadow:0 0 32px rgba(27,43,57,.12)}
.chat-header{position:relative;z-index:60;height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:rgba(248,249,250,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.chat-header button{width:36px;height:36px;border:0;background:transparent;color:#243342;font-size:26px;line-height:1}
.header-back{font-size:34px!important;font-weight:300}.header-more{font-size:22px!important;letter-spacing:2px}
.header-title{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:17px}.header-title span{font-size:11px;color:#758090;font-weight:400}.header-title i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#26c281;margin:0 4px 1px 0}
.msg-box{position:relative;z-index:1;flex:1;overflow:auto;padding:18px 14px 14px;scroll-behavior:smooth;background:#f1f3f5}
.welcome-card{display:flex;align-items:center;gap:10px;width:max-content;max-width:92%;margin:0 auto 18px;padding:9px 13px;border-radius:12px;background:#e4e8ec;color:#5c6875}.welcome-card img{width:34px;height:34px;border-radius:9px;object-fit:cover}.welcome-card b{display:block;font-size:13px;font-weight:500;color:#3f4d5c}.welcome-card small{display:block;margin-top:3px;font-size:11px;color:#8c97a3}
#msgzone{display:flex;flex-direction:column;gap:12px}
.msg{display:flex;align-items:flex-start;gap:9px;max-width:86%;animation:msg-in .18s ease-out}.msg.on{align-self:flex-end;flex-direction:row-reverse}.msg-avatar{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:none}.bubble{position:relative;padding:10px 13px;border-radius:4px 14px 14px 14px;background:#fff;line-height:1.5;min-height:22px;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.03);font-size:15px}.msg.on .bubble{background:var(--green);border-radius:14px 4px 14px 14px}.bubble:before{content:"";position:absolute;top:12px;left:-6px;border-width:5px 6px 5px 0;border-style:solid;border-color:transparent #fff transparent transparent}.msg.on .bubble:before{left:auto;right:-6px;border-width:5px 0 5px 6px;border-color:transparent transparent transparent var(--green)}.chat-image{display:block;max-width:230px;max-height:300px;object-fit:cover;border-radius:8px}.chat-audio{display:block;width:190px;height:36px}.chat-file{display:inline-flex;align-items:center;gap:5px;color:#2667b1;text-decoration:none;font-size:14px;padding:4px 7px;border-radius:6px;background:#f4f7fb}.chat-file:before{content:"▤";color:#5a7ca5}.composer{position:relative;z-index:50;display:flex;align-items:center;gap:8px;min-height:72px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#f8f9fa;border-top:1px solid var(--line);flex:none}.tool-btn{width:38px;height:38px;flex:none;border:0;border-radius:50%;background:transparent;color:#526171;font-size:27px;display:grid;place-items:center;padding:0}.voice-icon{font-size:23px;line-height:1;display:block}.plus-btn{font-size:34px;font-weight:300}.input-wrap{min-width:0;flex:1;display:flex;align-items:flex-end;gap:4px;min-height:42px;padding:0 4px 0 11px;border-radius:10px;background:#fff;border:1px solid #e0e5ea}.input-wrap textarea{width:100%;max-height:104px;min-height:38px;padding:9px 0;border:0;outline:0;resize:none;line-height:20px;background:transparent;font-size:15px;color:#243342}.send-inline{width:52px;height:32px;margin-bottom:3px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-size:21px;line-height:1;display:block}.emoji-panel,.plus-menu{position:absolute;z-index:30;bottom:70px;right:52px;display:none;padding:10px;border:1px solid #e0e5ea;border-radius:14px;background:#fff;box-shadow:0 12px 34px rgba(32,53,75,.18)}.emoji-panel.open,.plus-menu.open{display:grid}.emoji-panel{grid-template-columns:repeat(8,34px);gap:3px;max-width:300px}.emoji-panel button{width:34px;height:34px;border:0;border-radius:8px;background:transparent;font-size:21px;padding:0}.emoji-panel button:hover{background:#f1f4f7}.plus-menu{right:8px;grid-template-columns:repeat(3,76px);gap:8px}.plus-menu button{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:8px 4px;border:0;background:transparent;color:#526171;font-size:12px}.plus-menu button span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#f1f4f7;color:#5e7185;font-size:24px}.plus-menu button:hover span{background:#e4f0ff;color:var(--blue)}
@keyframes msg-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:560px){.service{max-width:none;box-shadow:none}.chat-header{height:52px;padding:0 10px}.msg-box{padding:14px 10px}.msg{max-width:91%}.bubble{font-size:16px}.composer{min-height:68px;padding-left:8px;padding-right:8px}.tool-btn{width:35px}.emoji-panel{right:40px;grid-template-columns:repeat(7,34px)}.plus-menu{grid-template-columns:repeat(3,70px)}.plus-menu button{width:70px}}
.voice-btn.recording{color:#e5484d;background:#ffe8e8;animation:record-pulse 1s infinite}.voice-btn.recording .voice-icon{transform:scale(1.15)}@keyframes record-pulse{50%{box-shadow:0 0 0 7px #e5484d20}}
.emoji-face{position:relative;display:block;width:25px;height:25px;border:2px solid #526171;border-radius:50%}.emoji-face:before{content:"";position:absolute;left:5px;top:6px;width:3px;height:3px;border-radius:50%;background:#526171;box-shadow:9px 0 #526171}.emoji-face:after{content:"";position:absolute;left:6px;top:13px;width:9px;height:5px;border-bottom:2px solid #526171;border-radius:0 0 10px 10px}.tool-btn:hover .emoji-face{border-color:#1677ff}.tool-btn:hover .emoji-face:before{background:#1677ff;box-shadow:9px 0 #1677ff}.tool-btn:hover .emoji-face:after{border-color:#1677ff}.pending{opacity:.62}.pending .bubble:after{content:"…";margin-left:6px;color:#718096}
.composer{align-items:flex-end;gap:6px;background:#f7f7f7}.input-wrap{padding:0 12px;border-radius:8px;min-height:40px}.input-wrap textarea{min-height:40px;padding:10px 0;font-size:16px}.tool-btn{width:36px;height:36px;margin-bottom:2px;color:#3c3c3c}.voice-btn .icon-key{display:none}.composer.voice-mode .voice-btn .icon-mic{display:none}.composer.voice-mode .voice-btn .icon-key{display:block}.hold-talk{display:none;flex:1;height:40px;margin-bottom:2px;border:0;border-radius:8px;background:#fff;color:#1f2a37;font-size:16px;font-weight:650;letter-spacing:.04em;user-select:none;touch-action:none}.composer.voice-mode .input-wrap{display:none}.composer.voice-mode .hold-talk{display:grid;place-items:center}.hold-talk.recording{background:#dedede}.hold-talk.canceling{background:#ffd9d9;color:#d14343}.send-btn{flex:none;height:36px;min-width:58px;margin:0 0 2px 2px;padding:0 12px;border:0;border-radius:6px;background:#e3e6ea;color:#b0b7c0;font-size:15px;font-weight:650}.send-btn.ready{background:#07c160;color:#fff}.send-btn.ready:active{background:#06ad56}.send-btn:disabled{cursor:default}.voice-hud{position:fixed;left:50%;bottom:118px;z-index:80;transform:translateX(-50%);min-width:168px;padding:16px 18px 14px;border-radius:12px;background:rgba(38,38,38,.88);color:#fff;text-align:center}.voice-hud[hidden]{display:none!important}.voice-hud.cancel{background:rgba(176,42,42,.92)}.voice-hud b{display:block;font-size:14px;font-weight:500}.voice-waves{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:28px;margin-bottom:8px}.voice-waves i{display:block;width:4px;height:8px;border-radius:3px;background:#fff;animation:voice-wave .9s infinite ease-in-out}.voice-waves i:nth-child(2){animation-delay:.12s}.voice-waves i:nth-child(3){animation-delay:.24s}.voice-waves i:nth-child(4){animation-delay:.36s}.voice-waves i:nth-child(5){animation-delay:.48s}@keyframes voice-wave{50%{height:26px}}
@media(max-width:560px){.send-btn{min-width:52px;padding:0 10px;font-size:14px}.hold-talk{font-size:15px}.emoji-panel{right:8px}}