:root{--ink:#181818;--muted:#737373;--line:#e8e8e8;--soft:#f7f7f8;--bubble:#f4f4f5;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#f7f7f8}
button,input,textarea{font:inherit}
body{overflow:hidden}
.app-shell{height:100dvh;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;background:#fff;border-left:1px solid #ececec;border-right:1px solid #ececec}
.topbar{height:68px;flex:0 0 68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:rgba(255,255,255,.96)}
.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:36px;height:36px;border-radius:11px;background:#181818;color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}.brand-name{font-size:15px;font-weight:700;letter-spacing:-.2px}.brand-sub{font-size:11px;color:var(--muted);margin-top:2px}.online{font-size:12px;color:#666;display:flex;align-items:center;gap:7px}.online span{width:7px;height:7px;border-radius:50%;background:#27a269;box-shadow:0 0 0 3px #eaf7f0}
.chat{flex:1;min-height:0;overflow:auto;padding:30px 22px 26px;scroll-behavior:smooth}.message-row{display:flex;margin:0 auto 20px;max-width:820px;width:100%}.message-row.user{justify-content:flex-end}.message{max-width:min(78%,720px);font-size:15px;line-height:1.65;letter-spacing:-.08px}.message.ai{padding-top:2px}.message.user{background:#181818;color:#fff;padding:11px 15px;border-radius:20px 20px 6px 20px;white-space:pre-wrap;overflow-wrap:anywhere}.message.ai p{margin:0 0 11px}.message.ai p:last-child{margin-bottom:0}.message.ai strong{font-weight:700}.message.ai ul,.message.ai ol{margin:7px 0 11px;padding-left:24px}.message.ai li{margin:4px 0}.message.ai a{color:#2563eb;text-decoration:none}.message.ai a:hover{text-decoration:underline}.message.ai code{font-size:.92em;background:#f0f0f1;border:1px solid #e5e5e5;border-radius:6px;padding:1px 5px}
.status-row{display:flex;max-width:820px;margin:0 auto 18px}.status{display:inline-flex;align-items:center;gap:9px;color:#7a7a7a;font-size:13px;padding:4px 0}.dots{display:flex;gap:3px}.dots i{width:5px;height:5px;border-radius:50%;background:#888;animation:dot 1.15s infinite ease-in-out}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.composer-wrap{padding:10px 18px max(13px,env(safe-area-inset-bottom));background:#fff}.composer{position:relative;max-width:820px;margin:auto;border:1px solid #d9d9da;border-radius:25px;min-height:54px;display:flex;align-items:flex-end;gap:4px;padding:7px 7px 7px 8px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.045);transition:border-color .18s,box-shadow .18s}.composer:focus-within{border-color:#bdbdbd;box-shadow:0 4px 18px rgba(0,0,0,.07)}textarea{border:0;outline:0;resize:none;flex:1;min-width:0;max-height:140px;min-height:38px;padding:9px 7px;background:transparent;line-height:20px;font-size:15px;color:var(--ink)}textarea::placeholder{color:#999}
.icon-btn,.send-btn{border:0;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}.icon-btn{width:38px;height:38px;border-radius:50%;background:#f3f3f4;color:#555}.icon-btn:hover{background:#eaeaec}.send-btn{width:38px;height:38px;border-radius:50%;background:#181818;color:#fff}.send-btn:hover{background:#000}.send-btn:disabled{opacity:.35;cursor:not-allowed}.icon-btn.recording{background:#f4e9e9;color:#b42318}.icon-btn svg,.send-btn svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.file-chip{position:absolute;left:48px;right:48px;bottom:58px;display:flex;align-items:center;gap:7px;width:max-content;max-width:calc(100% - 96px);background:#f2f2f3;border:1px solid #e6e6e6;padding:7px 9px;border-radius:10px;font-size:12px;color:#555;box-shadow:0 5px 18px rgba(0,0,0,.05)}.file-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-chip button{border:0;background:transparent;color:#777;padding:2px;display:grid;place-items:center;cursor:pointer}.file-chip svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.composer-note{max-width:820px;margin:7px auto 0;text-align:center;font-size:10px;color:#a0a0a0}.welcome-fallback{display:flex}
@media(max-width:700px){body{background:#fff}.app-shell{border:0}.topbar{height:60px;flex-basis:60px;padding:0 15px}.chat{padding:22px 14px 18px}.message{max-width:90%;font-size:14.5px}.composer-wrap{padding:8px 10px max(10px,env(safe-area-inset-bottom))}.composer{border-radius:23px}.composer-note{font-size:9.5px}.brand-mark{width:33px;height:33px;border-radius:10px}.online{font-size:11px}.file-chip{left:48px;right:48px;max-width:calc(100% - 96px)}}

/* ChatGPT-style voice recording state */
.recorder-ui{display:flex;align-items:center;gap:12px;flex:1;min-width:0;height:40px;padding:0 2px}.wave-track{height:34px;display:flex;align-items:center;gap:3px;flex:1;min-width:0;overflow:hidden}.wave-bar{display:block;width:3px;height:3px;min-height:3px;border-radius:999px;background:#9a9a9a;opacity:.7;transform-origin:center;animation:voiceWave 850ms ease-in-out infinite;animation-delay:calc(var(--i) * -23ms)}.wave-bar:nth-child(3n){animation-duration:720ms}.wave-bar:nth-child(4n){animation-duration:980ms}.wave-bar:nth-child(5n){animation-duration:640ms}@keyframes voiceWave{0%,100%{height:3px;opacity:.38}50%{height:27px;opacity:.92}}.record-timer{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:14px;color:#555;min-width:38px;text-align:center}.record-action{width:38px;height:38px;flex:0 0 38px;border:0;background:transparent;color:#181818;display:grid;place-items:center;cursor:pointer;border-radius:50%}.record-action:hover{background:#f2f2f2}.record-action svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.confirm-record{font-size:0}.confirm-record svg{width:25px;height:25px;stroke-width:2.1}.confirm-record.loading{opacity:.5;pointer-events:none}.composer.recording-mode{align-items:center;padding-top:7px;padding-bottom:7px}.composer.recording-mode .icon-btn{background:transparent}.composer.recording-mode .icon-btn:hover{background:#f2f2f2}.composer.recording-mode .icon-btn svg{width:24px;height:24px}.composer.recording-mode .recorder-ui{animation:recorderIn .18s ease-out}@keyframes recorderIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@media(max-width:700px){.recorder-ui{gap:8px}.wave-track{gap:2px}.wave-bar{width:2.5px}.record-timer{font-size:13px;min-width:34px}.record-action{width:36px;height:36px;flex-basis:36px}.record-action svg{width:22px;height:22px}}