:root{--ink:#202943;--muted:#8992a9;--primary:#5561e9;--primary-dark:#424dcc;--line:#e9edf5;--soft:#f4f6fc;--green:#28b991;--orange:#e8a346;--app-height:100dvh;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;font-synthesis:none;color:var(--ink);background:#f5f7fd}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,label.upload-label{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #aab1ff;outline-offset:3px}button,svg{flex-shrink:0}svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}a{color:inherit;text-decoration:none}button{border:0}button,input,textarea{color:var(--ink)}[hidden]{display:none!important}.page{max-width:1420px;padding:34px 68px 20px;margin:auto;min-height:100vh}.brand{display:flex;align-items:center;gap:18px;min-height:40px}.brand a{display:flex;align-items:center;gap:11px;font-weight:750;font-size:20px;letter-spacing:1px}.brand-logo{width:39px;height:39px}.brand-caption{font-size:10px;letter-spacing:3px;color:#a0a8be;border-left:1px solid #dfe4f0;padding:4px 0 4px 18px}.experience{display:grid;grid-template-columns:minmax(330px,1fr) minmax(420px,570px);align-items:center;gap:60px;min-height:calc(100vh - 145px);padding:24px 0}.intro{max-width:480px;padding:10px 0 24px}.intro-eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:700;color:#7c86a7;display:flex;align-items:center;gap:9px;margin-bottom:27px}.intro-eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--primary)}h1{font-size:clamp(34px,3.3vw,48px);line-height:1.48;letter-spacing:-1px;margin:0;font-weight:750}h1>span{color:var(--primary)}.intro-description{font-size:14px;line-height:2;color:#8b94aa;margin:24px 0 0}.support-illustration{position:relative;height:218px;width:310px;margin:14px 0 18px}.orb{position:absolute;border-radius:50%;background:linear-gradient(135deg,#e8ebff,#f7f8ff)}.orb-one{width:174px;height:174px;left:54px;top:21px}.orb-two{width:86px;height:86px;left:192px;top:102px;background:linear-gradient(135deg,#edf0ff,#f1f7ff)}.illustration-card{position:absolute;top:58px;left:5px;display:flex;align-items:center;gap:13px;background:#ffffffeb;padding:19px 21px;border:1px solid white;border-radius:21px;box-shadow:0 16px 35px #6e78b512;transform:rotate(-6deg);width:243px;height:90px}.illustration-card img{width:49px;height:49px;border-radius:16px}.illustration-line{display:block;height:7px;border-radius:10px;background:#e2e6f2}.illustration-line.long{width:99px;margin-bottom:11px}.illustration-line.short{width:62px;background:#f0f2f8}.illustration-dot{width:8px;height:8px;background:#42c5a4;border-radius:50%;align-self:flex-start;margin-top:5px}.floating-message{position:absolute;background:var(--primary);height:52px;width:80px;right:7px;top:125px;border-radius:17px 17px 17px 3px;display:flex;align-items:center;justify-content:center;gap:6px;transform:rotate(8deg);box-shadow:0 12px 25px #5864da2b}.floating-message span{width:6px;height:6px;background:white;border-radius:50%;opacity:.85}.tiny-spark{position:absolute;right:14px;top:39px;font-size:28px;color:#bbc4ef}.intro-note{display:flex;align-items:center;gap:9px;font-size:11px;color:#9da6bc;line-height:1.8}.intro-note svg{width:18px;height:18px;color:#9ba6c8}.chat-card{height:min(760px,calc(100vh - 150px));min-height:570px;background:white;border:1px solid #e5eaf6;border-radius:24px;box-shadow:0 18px 65px #455b9b0d;display:flex;flex-direction:column;overflow:hidden;position:relative}.chat-header{height:92px;min-height:92px;padding:21px 25px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:13px}.agent-avatar-wrap{position:relative}.agent-avatar-wrap img{width:48px;height:48px;border-radius:16px;object-fit:cover;display:block}.presence-dot{width:11px;height:11px;border:2px solid #fff;position:absolute;right:-2px;bottom:0;background:#b1b8c8;border-radius:50%}.presence-dot.online,.status-dot.online{background:var(--green)}.presence-dot.away,.presence-dot.busy,.status-dot.away,.status-dot.busy{background:var(--orange)}.agent-heading h2{font-size:15px;font-weight:700;margin:0 0 7px}.agent-heading p{font-size:11px;color:var(--muted);margin:0;display:flex;align-items:center;gap:6px}.status-dot{width:5px;height:5px;border-radius:50%;background:#b1b8c8}.chat-header>.icon-button{margin-left:auto}.icon-button{height:34px;width:34px;background:transparent;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;color:#949eb5;padding:6px;cursor:pointer}.icon-button:hover{background:#f0f3fc;color:var(--primary)}.icon-button svg{width:20px;height:20px}.conversation-notice{background:#fff8ed;color:#aa813e;font-size:12px;line-height:1.6;padding:9px 22px;border-bottom:1px solid #f7ebd3}.messages{padding:15px 25px 20px;flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:#e3e7f0 transparent;background:linear-gradient(180deg,#fbfcff 0%,#fff 150px)}.welcome-note{text-align:center;padding:16px 8px 24px}.welcome-mark{display:inline-flex;align-items:center;justify-content:center;background:#f0f2ff;border:1px solid #e6e9fc;color:#7d86db;width:43px;height:43px;border-radius:15px;margin-bottom:11px}.welcome-mark svg{width:22px;height:22px}.welcome-note h3{font-size:13px;margin:0 0 9px;font-weight:600}.welcome-note p{font-size:12px;line-height:1.85;color:#a0a8bb;margin:0;white-space:pre-wrap;word-break:break-word}.message-row{display:flex;gap:9px;margin:13px 0 19px;align-items:flex-start}.message-avatar{width:30px;height:30px;border-radius:10px;object-fit:cover;flex-shrink:0}.message-row.own{flex-direction:row-reverse}.message-body{max-width:80%;min-width:0}.message-meta{font-size:10px;color:#a5adbf;line-height:1.6;margin-bottom:4px}.own .message-meta{text-align:right}.message-bubble{padding:11px 14px;background:#f0f3f9;border:1px solid #eef1f6;border-radius:3px 14px 14px 14px;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.own .message-bubble{background:var(--primary);border-color:var(--primary);color:white;border-radius:14px 3px 14px 14px}.message-bubble.image{padding:5px;background:#f2f4fb}.message-image{max-width:100%;width:auto;max-height:260px;border-radius:9px;display:block;cursor:zoom-in;object-fit:contain}.message-read{font-size:9px;text-align:right;color:#a8b0c2;padding-top:4px}.message-retry{display:block;background:#fff0ed;color:#c86d59;border-radius:5px;font-size:10px;padding:5px 7px;margin:6px 0 0 auto}.message-row.failed .message-bubble{opacity:.6}.text-button{color:var(--primary);background:none;padding:8px;font-size:12px;line-height:1.5}.text-button:hover{text-decoration:underline}.load-older{display:block;margin:0 auto 8px;color:#99a2ba;font-size:10px}.gate{position:absolute;inset:92px 0 29px;background:#ffffffef;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 34px;z-index:2;backdrop-filter:blur(5px)}.gate-symbol{width:72px;height:72px;background:#f1f3ff;border:1px solid #e8ebff;border-radius:24px;display:flex;align-items:center;justify-content:center;color:#7781de;margin-bottom:22px}.gate-symbol svg{width:34px;height:34px;stroke-width:1.4}.gate h3{font-size:20px;line-height:1.6;margin:0 0 12px;letter-spacing:.4px}.gate p{font-size:13px;line-height:1.9;color:#949db2;margin:0 0 23px;max-width:310px;white-space:pre-wrap;overflow-wrap:anywhere}.primary-button{padding:12px 24px;min-width:160px;background:var(--primary);color:white;border-radius:10px;font-size:13px;line-height:1.5;font-weight:500;box-shadow:0 5px 13px #5763df1b}.primary-button:hover{background:var(--primary-dark)}.gate>.text-button{margin-top:12px;font-size:11px;color:#99a1b8}.composer{border-top:1px solid var(--line);padding:9px 20px 13px;background:white;flex-shrink:0}.composer-tools{display:flex;align-items:center;gap:9px;height:28px}.composer-tools .icon-button{width:30px;height:28px}.composer-tools>span{font-size:9px;color:#b0b8c9}.composer-tools>.char-count{margin-left:auto;font-size:9px;white-space:nowrap}.composer textarea{resize:none;width:100%;background:transparent;border:0;outline:none!important;box-shadow:none;font-size:13px;line-height:1.7;padding:9px 6px 5px;min-height:59px;max-height:130px;display:block;scrollbar-width:thin}.composer textarea::placeholder{color:#b1b8c9}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 4px 0}.keyboard-hint{font-size:9px;color:#b2b9ca}.send-button{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--primary);color:#fff;font-size:12px;border-radius:8px;min-width:87px;height:34px;padding:5px 13px}.send-button svg{width:15px;height:15px}.send-button:hover{background:var(--primary-dark)}.chat-footer{height:29px;min-height:29px;display:flex;align-items:center;justify-content:center;gap:6px;background:#fbfcff;border-top:1px solid #f2f4f9;color:#b7bed0;font-size:8px}.chat-footer img{width:12px;height:12px;opacity:.45;filter:grayscale(.7)}.footer-divider{height:7px;width:1px;background:#dce1ee;margin:0 3px}.page-footer{color:#b1b9cf;font-size:9px;letter-spacing:1px}.toast{position:fixed;left:50%;bottom:35px;transform:translateX(-50%);z-index:30;border:1px solid #e7eaf5;border-radius:11px;background:#fff;box-shadow:0 8px 38px #27335526;padding:12px 20px;color:#5e6c8d;font-size:13px;max-width:calc(100% - 32px);text-align:center;line-height:1.6}.modal-backdrop{position:fixed;inset:0;z-index:40;background:#26314d45;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);padding:20px;overflow:auto}.profile-panel{width:420px;max-width:100%;max-height:calc(var(--app-height) - 40px);overflow-y:auto;border-radius:23px;background:white;box-shadow:0 20px 80px #18213d2b;padding:34px;position:relative}.modal-close{position:absolute;right:14px;top:14px}.panel-eyebrow{font-size:9px;letter-spacing:1.8px;color:#939cc5}.profile-panel h2{font-size:21px;letter-spacing:.2px;margin:12px 0 8px}.profile-panel>p{font-size:11px;line-height:1.9;color:#99a3b9;margin:0 0 22px}.profile-panel form{display:grid;gap:14px}.profile-panel label{display:grid;gap:7px;font-size:11px;color:#7e88a0}.profile-panel input{border:1px solid #e3e8f3;border-radius:9px;padding:11px 12px;font-size:12px;background:#fbfcff;min-width:0;width:100%}.profile-panel input::placeholder{color:#b9bfd0}.profile-panel .primary-button{margin-top:6px}.form-error{font-size:11px;color:#c35b60;line-height:1.5}.image-modal{position:fixed;inset:0;background:#12192deb;z-index:50;display:flex;align-items:center;justify-content:center;padding:56px 24px}.image-modal>img{max-width:100%;max-height:100%;object-fit:contain}.image-modal>.icon-button{position:absolute;right:20px;top:16px;color:white;background:#ffffff12;width:38px;height:38px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1500px){.experience{gap:100px}.chat-card{height:760px}.page{padding-top:46px}}@media(max-width:1100px){.page{padding:26px 35px 18px}.experience{gap:32px;grid-template-columns:minmax(270px,1fr) minmax(390px,1.3fr)}h1{font-size:35px}.intro-description{font-size:12px}.support-illustration{transform:scale(.9);transform-origin:left center;width:290px}.chat-card{height:calc(100vh - 140px);min-height:540px}}@media(max-width:800px){.page{padding:22px;max-width:640px}.brand{margin-bottom:12px}.intro{display:none}.experience{display:block;min-height:0;padding:0}.chat-card{height:calc(100dvh - 118px);min-height:460px}.page-footer{padding-top:13px;font-size:8px;text-align:center}.brand-caption{margin-left:auto}.brand a{font-size:17px}.brand-logo{width:33px;height:33px}}@media(max-width:520px){:root{background:#fff}.page{padding:0;margin:0;min-height:0}.brand,.page-footer{display:none}.experience{padding:0;min-height:0}.chat-card{width:100%;height:var(--app-height);height:var(--app-height,100dvh);min-height:0;border:0;border-radius:0;box-shadow:none}.chat-header{height:78px;min-height:78px;padding:calc(14px + env(safe-area-inset-top)) 19px 14px;height:calc(78px + env(safe-area-inset-top));min-height:calc(78px + env(safe-area-inset-top));gap:11px}.agent-avatar-wrap img{width:43px;height:43px;border-radius:14px}.agent-heading h2{font-size:14px}.messages{padding:12px 16px 18px;background:linear-gradient(180deg,#f8faff,#fff 190px)}.welcome-note{padding:20px 10px 24px}.message-body{max-width:81%}.message-bubble{font-size:14px;padding:9px 12px}.message-row{gap:8px}.message-avatar{width:29px;height:29px}.composer{padding:8px 13px 10px}.composer textarea{font-size:16px;min-height:59px;line-height:1.6}.composer-tools>span{font-size:9px}.composer-tools>.char-count{font-size:8px}.keyboard-hint{font-size:8px}.chat-footer{height:calc(27px + env(safe-area-inset-bottom));min-height:calc(27px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}.gate{inset:calc(78px + env(safe-area-inset-top)) 0 calc(27px + env(safe-area-inset-bottom));padding:26px}.gate h3{font-size:20px}.gate p{font-size:13px}.profile-panel{padding:31px 24px;border-radius:19px}.profile-panel input{font-size:16px}.toast{bottom:calc(25px + env(safe-area-inset-bottom));font-size:12px}.conversation-notice{padding:8px 17px;font-size:11px}.send-button{height:35px}.primary-button{padding:13px 26px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
