@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#090d1b;--panel:#10182b;--line:#273451;--text:#eef2ff;--muted:#8998ba;--blue:#6378ff;--cyan:#65ddff;--purple:#aa91ff}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 50% 5%,#17254b 0,transparent 40%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.app{width:min(100%,680px);min-height:100dvh;margin:auto;padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}
.topbar{display:flex;align-items:center;gap:12px}
.brand-mark{height:45px;width:45px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#7185ff,#916bff);font-weight:800;font-size:24px;box-shadow:0 0 24px #657bff55}
.brand-copy{flex:1}.brand-copy h1{margin:0;font-size:22px;letter-spacing:.5px}.brand-copy p{margin:4px 0 0;color:var(--muted);font-size:9px;letter-spacing:1.5px;font-weight:700}
.status{font-size:11px;color:#8be9c4;display:flex;align-items:center;gap:6px}.status i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.hero{text-align:center;padding:14px 0 4px}
.orb-wrap{height:180px;width:180px;position:relative;margin:0 auto 12px;display:grid;place-items:center}
.orb{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#d5c8ff 0,#8a7bff 17%,#4b50c9 45%,#111b4a 76%);box-shadow:0 0 25px #8176ff80,0 0 65px #5e72ff45,inset 0 0 25px #c4caff55;animation:float 4s ease-in-out infinite}
.orb span{font-size:43px;color:#fff;text-shadow:0 0 20px white}
.orb-ring{position:absolute;border:1px solid #7586ff5c;border-radius:50%;inset:5px;animation:rotate 16s linear infinite}
.ring-two{inset:19px;border-color:#a38aff66;animation-direction:reverse;animation-duration:11s}
.hero h2{font-size:21px;margin:0 0 8px}.hero p{margin:0;color:var(--muted);font-size:13px}
.chat-panel{background:linear-gradient(150deg,#121c32e8,#0e1528e8);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-height:210px;max-height:34dvh}
.chat-heading{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid #25314c;color:#a6b3d1;font-size:10px;font-weight:800;letter-spacing:1.4px}
.text-button{background:transparent;color:#a6b3d1;border:0;font-size:11px;padding:4px}
.chat{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.bubble{max-width:92%;padding:12px 13px;border-radius:14px;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.bubble p{margin:4px 0 0}.bubble .speaker{font-size:9px;font-weight:800;letter-spacing:1px;opacity:.8}
.bubble.tony{align-self:flex-start;background:#1a2540;border:1px solid #2b3b61;border-bottom-left-radius:5px}
.bubble.user{align-self:flex-end;background:linear-gradient(135deg,#465bce,#7256d4);border-bottom-right-radius:5px}
.composer{margin-top:auto}.input-row{display:flex;gap:9px}
input{min-width:0;flex:1;background:#10182b;border:1px solid #2b3958;border-radius:14px;padding:15px;color:var(--text);outline:none;font-size:14px}
input:focus{border-color:#7b83ff;box-shadow:0 0 0 3px #7583ff20}
.send-btn{width:50px;border:0;border-radius:14px;color:white;font-size:20px;background:linear-gradient(135deg,#627bff,#916bff)}
.mic-btn{margin-top:10px;width:100%;border:1px solid #7d80ff66;border-radius:15px;padding:15px;background:linear-gradient(100deg,#3548a9,#6547bd);color:white;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;box-shadow:0 7px 22px #4c4ecb2b}
.mic-btn.listening{background:linear-gradient(100deg,#8c335f,#5a40bc);animation:pulse 1.3s infinite}
.mic-icon{font-size:19px}.hint{text-align:center;color:#7583a4;font-size:10px;line-height:1.5;margin:10px 12px 0}
footer{text-align:center;color:#53617f;font-size:9px;letter-spacing:1.5px;font-weight:700;padding-top:2px}footer span{color:#8e83ff;padding:0 5px}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.025)}}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes pulse{50%{filter:brightness(1.2);box-shadow:0 0 22px #9c66ff55}}
body[data-state="listening"] .orb{box-shadow:0 0 30px #65ddffb0,0 0 85px #65ddff55,inset 0 0 25px #c4caff55}
body[data-state="thinking"] .orb{filter:hue-rotate(25deg);animation:float 1s ease-in-out infinite}
body[data-state="speaking"] .orb{box-shadow:0 0 35px #aa91ffb0,0 0 90px #aa91ff66}
@media(min-height:800px){.hero{padding-top:25px}.orb-wrap{height:210px;width:210px}.orb{width:136px;height:136px}.chat-panel{max-height:38dvh}}