:root{--visitor-viewport-height: 100vh;color:#1f2937;background:#eef2f6;font-family:Inter,PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@supports (height: 100dvh){:root{--visitor-viewport-height: 100dvh}}html{width:100%;min-height:100%}*{box-sizing:border-box}body{width:100%;min-width:320px;min-height:100vh;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled,input:disabled,textarea:disabled{cursor:not-allowed}#app{min-height:100vh}.chat-shell{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px;background:linear-gradient(180deg,#ffffffbd,#eef2f6eb),#eef2f6}.chat-panel{display:flex;flex-direction:column;width:min(920px,100%);height:min(760px,calc(100vh - 32px));min-height:560px;overflow:hidden;border:1px solid #d8dee7;border-radius:8px;background:#fff;box-shadow:0 18px 50px #1f293724}.chat-header{display:flex;min-width:0;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #e5eaf1;background:#fff}.header-copy{min-width:0}.header-copy h1{overflow:hidden;margin:0;color:#111827;font-size:18px;font-weight:700;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.connection-text{margin:3px 0 0;color:#6b7280;font-size:13px;line-height:1.35}.connection-text--connected{color:#087466}.connection-text--error,.connection-text--disconnected{color:#b42318}.notice{margin:12px 16px 0;padding:10px 12px;border:1px solid #ffd7a8;border-radius:8px;background:#fff8ed;color:#7a3f00;font-size:13px;line-height:1.5}.notice--error{border-color:#fecaca;background:#fff1f2;color:#b42318}.privacy-box{margin:12px 16px 0;padding:10px 12px;border:1px solid #dbe7de;border-radius:8px;background:#f5fbf7;color:#34513e;font-size:12px;line-height:1.55}.messages{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px 16px 8px;background:#f8fafc}.system-message,.empty-state{width:fit-content;max-width:min(620px,92%);margin:0 auto 14px;padding:8px 12px;border-radius:8px;background:#e9eef5;color:#566174;font-size:13px;line-height:1.55;text-align:center}.empty-state{margin-top:24px}.message-row{display:flex;gap:8px;align-items:flex-end;margin:0 0 14px}.message-row--visitor{justify-content:flex-end}.message-row--agent{justify-content:flex-start}.message-row--system{justify-content:center}.message-bubble{max-width:min(74%,560px);min-width:96px;padding:10px 12px 7px;border-radius:8px;background:#fff;color:#1f2937;box-shadow:0 1px 2px #1f293714}.message-row--visitor .message-bubble{background:#0f8f7d;color:#fff}.message-row--system .message-bubble{background:#e9eef5;color:#566174;text-align:center}.message-bubble--emoji{min-width:64px;padding:8px 12px 7px}.message-bubble--emoji p{font-size:30px;line-height:1.2}.message-bubble--image{max-width:min(74%,420px);padding:5px 5px 7px}.message-image-link{display:block;overflow:hidden;border-radius:6px;line-height:0}.message-image{display:block;width:auto;max-width:100%;max-height:360px;object-fit:contain}.message-bubble p{overflow-wrap:anywhere;margin:0;white-space:pre-wrap;line-height:1.55}.message-bubble footer{display:flex;min-width:0;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-top:5px;color:#1f29378f;font-size:11px;line-height:1.3}.message-row--visitor .message-bubble footer{color:#ffffffc7}.message-status--failed{color:#fecaca}.retry-button{flex:0 0 auto;border:0;border-radius:8px;background:transparent;color:#b42318;font-size:12px}.typing-line{min-height:28px;padding:4px 18px;background:#f8fafc;color:#6b7280;font-size:13px}.offline-form{display:grid;gap:10px;padding:12px 16px 14px;border-top:1px solid #e5eaf1;background:#fff}.offline-form__title{color:#334155;font-size:13px;line-height:1.45}.offline-form__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.offline-form input,.offline-form textarea{width:100%;border:1px solid #cdd6e3;border-radius:8px;padding:10px 11px;color:#111827;outline:none;line-height:1.45}.offline-form textarea{resize:vertical}.offline-form input:focus,.offline-form textarea:focus{border-color:#0f8f7d;box-shadow:0 0 0 3px #0f8f7d29}.offline-form__actions{display:flex;min-height:36px;align-items:center;justify-content:space-between;gap:10px;color:#087466;font-size:13px}.offline-form__actions button{min-width:96px;height:36px;border:0;border-radius:8px;background:#0f8f7d;color:#fff;font-weight:700}.offline-form__actions button:disabled{background:#b8c4cf}.emoji-picker{display:grid;grid-template-columns:repeat(12,32px);gap:6px;padding:10px 16px;border-top:1px solid #e5eaf1;background:#fff}.emoji-option{display:grid;width:32px;height:32px;place-items:center;border:1px solid transparent;border-radius:8px;background:#f8fafc;font-size:20px;line-height:1}.emoji-option:hover,.emoji-option:focus{border-color:#0f8f7d;background:#eefaf7;outline:none}.composer{display:grid;grid-template-columns:44px 44px 1fr auto;gap:10px;align-items:end;width:100%;min-width:0;padding:14px 16px 16px;border-top:1px solid #e5eaf1;background:#fff}.emoji-toggle{width:44px;height:44px;border:1px solid #cdd6e3;border-radius:8px;background:#fff;color:#334155;font-size:20px}.image-toggle{width:44px;height:44px;border:1px solid #cdd6e3;border-radius:8px;background:#fff;color:#334155;font-size:18px}.image-toggle:disabled{background:#f1f5f9;color:#94a3b8}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.emoji-toggle:disabled{background:#f1f5f9;color:#94a3b8}.composer textarea{width:100%;min-width:0;min-height:44px;max-height:128px;resize:vertical;border:1px solid #cdd6e3;border-radius:8px;padding:11px 12px;color:#111827;outline:none;line-height:1.45}.composer textarea:focus{border-color:#0f8f7d;box-shadow:0 0 0 3px #0f8f7d29}.send-button{min-width:76px;height:44px;padding:0 14px;border:0;border-radius:8px;background:#0f8f7d;color:#fff;font-weight:700;white-space:nowrap}.send-button:disabled{background:#b8c4cf}@media(max-width:640px){html,body,#app{height:var(--visitor-viewport-height);min-height:var(--visitor-viewport-height);overflow:hidden}.chat-shell{width:100%;height:var(--visitor-viewport-height);min-height:var(--visitor-viewport-height);align-items:stretch;justify-content:flex-start;overflow:hidden;padding:0}.chat-panel{width:100%;height:var(--visitor-viewport-height);min-height:0;max-height:var(--visitor-viewport-height);border-width:0;border-radius:0;box-shadow:none}.chat-header{flex:0 0 auto;padding:calc(14px + env(safe-area-inset-top)) 14px 14px}.messages{flex:1 1 auto;min-height:0;padding:14px 12px 6px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.message-bubble{max-width:84%}.composer{position:relative;display:grid;flex:0 0 auto;grid-template-columns:42px 42px minmax(0,1fr);align-items:flex-end;gap:8px;overflow:hidden;padding:10px 92px calc(10px + env(safe-area-inset-bottom)) 12px}.emoji-picker{grid-template-columns:repeat(8,32px);padding:10px 12px}.emoji-toggle,.image-toggle{width:42px;height:44px}.composer textarea{width:100%;max-width:100%;min-width:0;resize:none}.send-button{position:absolute;z-index:2;display:grid;place-items:center;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));width:72px;min-width:72px;max-width:72px;padding:0 10px;white-space:nowrap}.offline-form__grid{grid-template-columns:1fr}}