:root{font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif;color:#182332;background:#eef2f5;font-synthesis:none;--teal:#0c9b8d;--border:#e5e9ee}*{box-sizing:border-box}body{margin:0}.customer-app{width:100%;max-width:520px;height:100dvh;margin:auto;background:#f6f8fa;display:grid;grid-template-rows:58px 34px 1fr auto;box-shadow:0 0 40px #14263714}header{background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 12px 0}header button{border:0;background:none;width:38px;height:38px}header>div{text-align:center;display:flex;flex-direction:column;gap:3px}header strong{font-size:16px}header span{font-size:10px;color:#748194}header span i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#12ad86;margin-right:4px}.safe-strip{background:#f1fbf8;color:#397268;font-size:10px;display:flex;align-items:center;justify-content:center;gap:6px;border-bottom:1px solid #dcefeb}main{overflow:auto;padding:18px 14px}.loading{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#6e7b8e;font-size:12px}.loading i{width:28px;height:28px;border:3px solid #d4e5e2;border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.welcome{text-align:center;padding:8px 0 18px}.logo,.agent-logo{background:linear-gradient(145deg,#17384e,#0c9b8d);color:#fff;display:grid;place-items:center;font-weight:800}.logo{width:48px;height:48px;border-radius:15px;margin:0 auto 10px;font-size:20px}.welcome h1{font-size:19px;margin:0}.welcome p{color:#8490a0;font-size:11px}.topic-panel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 15px;margin-bottom:18px}.topic-panel h2{font-size:13px;margin:0 0 6px}.topic-panel button{border:0;border-top:1px solid #edf0f3;background:#fff;width:100%;height:43px;text-align:left;font-size:13px;display:flex;justify-content:space-between;align-items:center}.topic-panel button:first-of-type{border-top:0}.topic-panel span{color:#a1abb8;font-size:20px}.message{display:flex;margin:13px 0;gap:8px;align-items:flex-start}.message.customer{justify-content:flex-end}.agent-logo{width:32px;height:32px;border-radius:10px;font-size:12px;flex:0 0 auto}.bubble{max-width:78%;background:#fff;border:1px solid #e0e5ea;border-radius:4px 12px 12px;padding:10px 12px;font-size:13px;line-height:1.55}.customer .bubble{background:#dff5f1;border-color:#bde4dd;border-radius:12px 4px 12px 12px}.bubble small{display:flex;align-items:center;justify-content:flex-end;gap:3px;color:#8d98a7;font-size:9px;margin-top:4px}footer{background:#fff;border-top:1px solid var(--border);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}.quick-actions{display:flex;gap:15px;margin-bottom:7px}.quick-actions button{border:0;background:#fff;display:flex;align-items:center;gap:4px;color:#657286;font-size:11px;padding:3px}.input-row{display:flex;align-items:flex-end;gap:8px}.input-row textarea{flex:1;border:1px solid #dbe1e7;background:#f7f8fa;border-radius:18px;resize:none;padding:10px 13px;outline:0;max-height:80px;font-size:13px}.input-row textarea:focus{border-color:var(--teal)}.input-row>button{border:0;background:var(--teal);color:#fff;width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.input-row>button:disabled{background:#c5cccf}footer>p{text-align:center;color:#a06c27;font-size:9px;margin:7px 0 0}@media (min-width:521px){body{padding:20px}.customer-app{height:calc(100dvh - 40px);border-radius:16px;overflow:hidden}}@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}