*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#050510;--panel:#101024;--muted:#9292b6;--cyan:#21d9ff;--purple:#a52bff;--pink:#ef3dff}
html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% 78%,#17103c 0%,#080819 38%,#04040d 78%);color:#f8f7ff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
body{min-height:100svh}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100svh;max-width:760px;margin:auto;padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom);display:flex;flex-direction:column;position:relative;overflow:hidden}
.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;z-index:2}
.brand{font-size:13px;letter-spacing:3px;font-weight:800;display:flex;align-items:center;gap:9px}.brand b{color:#b67bff}
.brand-dot{width:8px;height:8px;border-radius:50%;background:#33d9ff;box-shadow:0 0 13px #33d9ff}
.icon-button,.close{border:1px solid #ffffff20;background:#ffffff0b;color:white;border-radius:14px;width:40px;height:40px;font-size:20px}
.welcome{text-align:center;padding:30px 0 8px}
.eyebrow{font-size:10px;letter-spacing:3px;color:#aaa2d3}
h1{font-size:clamp(32px,8vw,48px);margin:10px 0 6px;letter-spacing:-1.5px}
h1 span{background:linear-gradient(90deg,#e75bff,#7a8bff,#28dfff);background-clip:text;color:transparent}
.subheading{color:#a7a4c3;font-size:14px;margin:0}
.conversation{flex:1;min-height:100px;max-height:35svh;overflow:auto;padding:16px 2px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.empty-state{text-align:center;color:#777695;font-size:12px;margin:auto}.sparkle{font-size:24px;color:#b77bff}
.bubble{max-width:88%;padding:12px 15px;border:1px solid #ffffff14;border-radius:17px;line-height:1.45;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.user{align-self:flex-end;background:linear-gradient(135deg,#43207a88,#163b6988);border-bottom-right-radius:5px}
.bubble.hunny{align-self:flex-start;background:#ffffff0b;border-bottom-left-radius:5px}
.bubble .who{font-size:9px;letter-spacing:1.5px;color:#aaa2d3;margin-bottom:5px}
.assistant-dock{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0 12px;min-height:220px}
.orb-status{font-size:9px;letter-spacing:2.5px;color:#bcb0ef;margin-bottom:4px}
.orb-button{position:relative;border:0;background:transparent;width:164px;height:164px;display:grid;place-items:center;outline:none;isolation:isolate}
.orb{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 28%,#a7eaff 0%,#5c62ff 12%,#4b12b7 32%,#08051f 68%,#02020a 100%);box-shadow:0 0 16px #8a38ff,0 0 40px #5525ff99,inset -13px -12px 24px #01010c,inset 8px 6px 18px #ffffff65;animation:orbFloat 4.8s ease-in-out infinite}
.orb:before{content:"";position:absolute;inset:-20%;border-radius:50%;background:conic-gradient(from 15deg,transparent 0 15%,#22cfff 22%,#8e43ff 34%,transparent 43%,#f14bff 56%,#245eff 70%,transparent 82%);filter:blur(8px);opacity:.9;animation:spin 7s linear infinite}
.orb:after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid #c6f4ff99;box-shadow:inset 0 0 22px #36caff66,0 0 12px #9d4aff99}
.orb-core{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,#d4f8ff55,transparent 35%),radial-gradient(circle,#07103c 0%,#080522 65%,transparent 70%);z-index:1}
.orb-ribbon{position:absolute;z-index:2;width:150%;height:48%;left:-25%;top:25%;border:3px solid transparent;border-top-color:#ec60ff;border-bottom-color:#20d7ff;border-radius:50%;filter:drop-shadow(0 0 5px #7a4dff);transform:rotate(-28deg);animation:ribbon 5s ease-in-out infinite}
.ribbon-b{transform:rotate(48deg) scale(.83);border-top-color:#32dfff;border-bottom-color:#9a4cff;animation-delay:-1.7s}
.ribbon-c{transform:rotate(88deg) scale(.67);border-top-color:#c85cff;border-bottom-color:#21aaff;animation-delay:-3.1s}
.orb-glint{position:absolute;z-index:4;width:34px;height:14px;left:24px;top:20px;border-radius:50%;background:#fff;filter:blur(10px);opacity:.8}
.orb-halo{position:absolute;width:150px;height:150px;border-radius:50%;border:1px solid #8b4bff55;box-shadow:0 0 24px #7a3cff33;animation:halo 3.4s ease-out infinite}
.halo-two{animation-delay:1.7s}
.dock-caption{font-size:11px;color:#aaa5c9;margin-top:0}
.quick-actions{display:flex;gap:8px;margin-top:15px}
.quick{border:1px solid #ffffff1c;background:#ffffff0a;color:#d7d2f4;border-radius:20px;padding:8px 13px;font-size:11px}
.composer{display:flex;gap:9px;padding:10px 0 max(12px,env(safe-area-inset-bottom));}
.composer input{flex:1;min-width:0;background:#ffffff0c;border:1px solid #ffffff20;border-radius:24px;padding:13px 16px;color:white;outline:none}
.composer button,.primary{border:0;border-radius:22px;padding:0 18px;background:linear-gradient(100deg,#8a35f5,#2679ff);color:white;font-weight:700;box-shadow:0 0 18px #713cff55}
body[data-state="listening"] .orb{box-shadow:0 0 24px #2bdcff,0 0 65px #8c35ff,inset 0 0 30px #fff5}
body[data-state="thinking"] .orb{animation:think .8s ease-in-out infinite alternate}
body[data-state="speaking"] .orb{animation:speak .55s ease-in-out infinite alternate}
body[data-state="listening"] .orb-status{color:#52e6ff}
body[data-state="thinking"] .orb-status{color:#d58cff}
body[data-state="speaking"] .orb-status{color:#9db8ff}
dialog{border:1px solid #ffffff25;border-radius:22px;background:#101022;color:white;width:min(92vw,440px);padding:0;box-shadow:0 20px 90px #000b}
dialog::backdrop{background:#02020bd9;backdrop-filter:blur(7px)}
.dialog-card{padding:20px;display:flex;flex-direction:column;gap:15px}
.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{font-size:19px;margin:0}
.dialog-card label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#c7c2e4}
.dialog-card input:not([type=checkbox]),.dialog-card select{width:100%;border:1px solid #ffffff22;background:#080817;color:white;padding:12px;border-radius:12px}
.toggle-row{flex-direction:row!important;align-items:center;justify-content:space-between}
.small-note{font-size:11px;line-height:1.5;color:#9290ae;margin:0}
.primary{padding:12px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ribbon{0%,100%{transform:rotate(-28deg) scale(1)}50%{transform:rotate(12deg) scale(.88)}}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.025)}}
@keyframes halo{0%{transform:scale(.82);opacity:.65}100%{transform:scale(1.22);opacity:0}}
@keyframes think{to{transform:scale(1.09) rotate(7deg);filter:hue-rotate(28deg)}}
@keyframes speak{to{transform:scale(1.12);filter:brightness(1.25)}}
@media(min-width:600px){.assistant-dock{min-height:260px}.orb-button{width:190px;height:190px}.orb{width:150px;height:150px}.conversation{max-height:42svh}}