 :root{color-scheme:dark;--bg:#0b1220;--panel:#111b2e;--panel-soft:#152139;--line:rgba(184,201,232,.12);--text:#edf2ff;--muted:#8d9ab4;--accent:#a995ff;--accent-bright:#c2b4ff;--cyan:#86e3e2;--green:#67dfb4;--red:#ff9caa;--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--display:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{min-width:320px;min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font-family:var(--font);font-size:14px;background:radial-gradient(ellipse at 47% -20%,rgba(104,91,189,.2),transparent 46%),linear-gradient(140deg,#0b1220,#10192b 58%,#0c1522)}
button,input,textarea{font:inherit}
button{color:inherit}
.app-shell{max-width:1440px;min-height:100vh;margin:auto;padding:0 54px;display:flex;flex-direction:column}
.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(177,157,255,.65);border-radius:12px;color:var(--accent-bright);font:800 19px var(--display);box-shadow:inset 0 0 18px rgba(153,127,255,.14),0 0 24px rgba(129,106,231,.1)}
.brand strong,.brand small{display:block;letter-spacing:.16em}.brand strong{font:700 13px var(--display)}.brand small{font-size:8px;color:var(--muted);margin-top:3px}
.connection{display:flex;align-items:center;gap:9px;color:#acb7cc;font-size:12px}.connection-dot,.status-dot{height:7px;width:7px;border-radius:50%;background:#e4b76b;box-shadow:0 0 11px currentColor}.connection-dot.is-online{background:var(--green);color:var(--green)}.connection-dot.is-offline{background:#ff8997;color:#ff8997}
.settings-button,.secondary-button,.primary-button{border:1px solid var(--line);border-radius:9px;padding:10px 15px;cursor:pointer;font-weight:600;transition:background .2s,border-color .2s,transform .2s}.settings-button{background:rgba(255,255,255,.035);color:#d6dbee;font-size:12px}.settings-button span{color:var(--accent-bright);font-size:16px;margin-right:5px}.settings-button:hover,.secondary-button:hover{border-color:rgba(188,174,255,.48);background:rgba(169,149,255,.09)}
.main-layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:72px;padding:44px 0 28px;align-items:start}
.chat-column{width:100%;max-width:790px;margin:0 auto;min-width:0}
.intro{display:flex;align-items:center;gap:26px;min-height:158px;margin-bottom:13px}.intro h1{font:600 clamp(27px,3vw,35px)/1.25 var(--display);letter-spacing:-.045em;margin:10px 0 7px}.intro h1 span{color:var(--accent-bright)}.intro p{margin:0;color:#a0acc2;font-size:14px}
.eyebrow{display:flex;align-items:center;gap:8px;color:#8795ae;font:700 9px var(--display);letter-spacing:.16em}.spark{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.orbit{position:relative;width:112px;height:112px;flex:0 0 112px;display:grid;place-items:center}.orbit-ring{position:absolute;inset:4px;border:1px solid rgba(169,149,255,.25);border-radius:50%;box-shadow:0 0 22px rgba(146,124,236,.09)}.orbit-ring:before,.orbit-ring:after{content:"";position:absolute;inset:9px;border:1px solid rgba(134,227,226,.2);border-radius:50%;transform:rotateX(63deg) rotate(-24deg) scaleX(1.23)}.orbit-ring:after{transform:rotateX(63deg) rotate(35deg) scaleX(1.23);border-color:rgba(169,149,255,.3)}.core{position:relative;width:55px;height:55px;border:1px solid rgba(191,177,255,.8);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#403b67,#171e35 72%);box-shadow:0 0 25px rgba(170,149,255,.34),inset 0 0 15px rgba(190,175,255,.2);color:#e3deff;font:700 20px var(--display)}.orbit-point{position:absolute;width:7px;height:7px;border-radius:50%;right:11px;top:17px;background:var(--cyan);box-shadow:0 0 11px var(--cyan)}
.conversation{min-height:264px;max-height:calc(100vh - 470px);overflow:auto;padding:12px 2px 16px;scrollbar-color:#34405a transparent;scrollbar-width:thin}.message{display:flex;align-items:flex-start;gap:13px;margin:17px 0;animation:appear .25s ease-out}.message:first-child{margin-top:7px}.avatar{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:50%;font:700 10px var(--display)}.assistant-avatar{border:1px solid rgba(177,157,255,.4);background:rgba(169,149,255,.1);color:var(--accent-bright)}.user-message{flex-direction:row-reverse}.user-avatar{background:rgba(134,227,226,.12);border:1px solid rgba(134,227,226,.3);color:var(--cyan)}.bubble-wrap{max-width:min(680px,calc(100% - 45px))}.speaker{display:block;margin:1px 0 6px;color:#8592aa;font:700 9px var(--display);letter-spacing:.11em}.user-message .speaker{text-align:right}.bubble{padding:12px 15px;border:1px solid var(--line);border-radius:4px 14px 14px 14px;background:rgba(23,34,55,.9);color:#e0e7f5;font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.user-message .bubble{border-color:rgba(134,227,226,.16);border-radius:14px 4px 14px 14px;background:rgba(69,108,122,.17);color:#e4f5f5}.pending-message .bubble{width:82px;color:#a8b0c4}.typing-indicator:after{content:"";display:inline-block;width:17px;height:10px;margin-left:4px;background:radial-gradient(circle,var(--accent) 1.5px,transparent 2px) 0 center/7px 7px repeat-x;animation:dots 1s steps(3) infinite}.bubble a{color:var(--cyan)}
@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes dots{to{background-position:7px center}}
.composer-card{padding:15px 16px 10px;border:1px solid rgba(168,186,221,.16);border-radius:14px;background:linear-gradient(160deg,rgba(24,36,58,.97),rgba(17,26,44,.96));box-shadow:0 18px 48px rgba(0,0,0,.16)}.voice-controls{display:flex;align-items:center;gap:13px;margin-bottom:12px}.voice-button{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(169,149,255,.4);border-radius:8px;padding:8px 11px;background:rgba(169,149,255,.09);color:#d9d0ff;cursor:pointer;font-size:11px;font-weight:600;transition:.2s}.voice-button:hover,.voice-button.is-active{border-color:var(--accent-bright);background:rgba(169,149,255,.2)}.voice-button.is-active{box-shadow:0 0 16px rgba(169,149,255,.12)}.mic-icon{display:grid;place-items:center}.mic-icon svg{width:15px;height:15px;fill:currentColor}.voice-status{color:#8794ab;font-size:11px}.voice-status[data-state="listening"]{color:var(--cyan)}.voice-status[data-state="thinking"]{color:var(--accent-bright)}.voice-status[data-state="speaking"]{color:var(--green)}.voice-status[data-state="error"]{color:var(--red)}
.message-form{display:flex;align-items:flex-end;gap:10px;padding:8px 8px 8px 12px;border:1px solid rgba(178,193,221,.13);border-radius:10px;background:rgba(6,12,23,.34)}.message-form:focus-within{border-color:rgba(169,149,255,.55);box-shadow:0 0 0 3px rgba(169,149,255,.07)}.message-form textarea{width:100%;min-height:25px;max-height:130px;resize:vertical;border:0;outline:0;background:transparent;color:var(--text);font-size:13px;line-height:1.6;padding:3px 0}.message-form textarea::placeholder{color:#68768f}.send-button{width:35px;height:35px;flex:0 0 35px;display:grid;place-items:center;border:0;border-radius:8px;background:linear-gradient(135deg,#a996ff,#8978e0);color:#17172c;cursor:pointer;transition:transform .2s,opacity .2s}.send-button:hover{transform:translateY(-1px)}.send-button:disabled{opacity:.5;cursor:wait}.send-button svg{width:17px;height:17px;fill:currentColor}.composer-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px;color:#65728a;font-size:10px}.clear-button,.inline-link{border:0;background:transparent;color:#aaa1d9;cursor:pointer;font-size:11px}.clear-button:hover,.inline-link:hover{color:#d5cbff;text-decoration:underline}.privacy-note{margin:9px 2px;color:#67748c;font-size:10px;line-height:1.5}
.side-column{display:flex;flex-direction:column;gap:13px;padding-top:10px}.side-card{border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,rgba(21,32,53,.84),rgba(16,26,44,.88));padding:19px}.about-card{position:relative;padding-top:53px}.card-icon{position:absolute;top:17px;right:17px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font-size:14px}.card-icon.violet{background:rgba(169,149,255,.13);color:var(--accent-bright)}.about-card h2{font:600 18px/1.3 var(--display);margin:11px 0 8px;letter-spacing:-.03em}.about-card p{margin:0;color:#96a3ba;font-size:12px;line-height:1.65}.inline-link{margin-top:15px;padding:0;text-align:left}.inline-link span{margin-left:5px}.side-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.side-heading h3{margin:0;color:#8b98b1;font:700 9px var(--display);letter-spacing:.14em}.system-icon,.prompt-spark{color:var(--cyan);font-size:16px}.status-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(184,201,232,.08);font-size:11px;color:#9ba8be}.status-row strong{font-size:10px;font-weight:600;color:#c6cee0;text-align:right}.status-row strong.good{color:var(--green)}.status-row strong.bad{color:#f2a2ac}.setup-hint{margin:12px 0 0;padding:10px;border-radius:7px;background:rgba(255,170,119,.08);color:#edc2a1;font-size:10px;line-height:1.55}.prompt{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 0;border:0;border-top:1px solid rgba(184,201,232,.08);background:transparent;color:#bac5d9;text-align:left;font-size:11px;cursor:pointer}.prompt:hover{color:white}.prompt b{color:#8478b6;font-size:14px;font-weight:400}
.footer{display:flex;justify-content:space-between;gap:14px;padding:17px 0 20px;border-top:1px solid var(--line);color:#63718a;font-size:9px;letter-spacing:.03em}.footer span:first-child{letter-spacing:.12em}.footer i{color:var(--accent)}
.modal-backdrop{position:fixed;z-index:10;inset:0;display:grid;place-items:center;padding:18px;background:rgba(4,8,16,.76);backdrop-filter:blur(8px)}.modal-backdrop[hidden]{display:none}.settings-modal{width:min(530px,100%);max-height:min(92vh,800px);overflow:auto;padding:26px 28px 20px;border:1px solid rgba(182,169,250,.24);border-radius:16px;background:#111b2d;box-shadow:0 28px 100px rgba(0,0,0,.5)}.modal-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.modal-heading h2{margin:8px 0 0;font:600 22px var(--display);letter-spacing:-.04em}.close-button{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04);color:#aeb8cb;font-size:23px;line-height:1;cursor:pointer}.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:15px 12px}.settings-form>label:not(.slider-label){display:flex;flex-direction:column;gap:7px;color:#acb7cb;font-size:11px}.settings-form input[type=text],.settings-form textarea{width:100%;border:1px solid rgba(184,201,232,.15);border-radius:8px;padding:10px;background:rgba(6,12,23,.42);color:var(--text);outline:none}.settings-form input[type=text]:focus,.settings-form textarea:focus{border-color:rgba(169,149,255,.58)}.settings-form input::placeholder,.settings-form textarea::placeholder{color:#627089}.slider-label{grid-column:1/-1;display:grid;grid-template-columns:1fr minmax(90px,170px) 31px;gap:12px;align-items:center;padding:7px 0;border-top:1px solid rgba(184,201,232,.07)}.slider-label span b,.slider-label span small{display:block}.slider-label span b{font-size:12px;font-weight:600;color:#d7ddef}.slider-label span small{margin-top:3px;color:#7e8ca5;font-size:10px}.slider-label input{accent-color:#aa96ff}.slider-label output{color:var(--accent-bright);font-size:11px;text-align:right}.full-label{grid-column:1/-1}.settings-form textarea{resize:vertical}.modal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.secondary-button{background:transparent;color:#bdc5d8;font-size:11px}.primary-button{border-color:transparent;background:linear-gradient(135deg,#aa96ff,#8372da);color:#141629;font-size:11px}.primary-button:hover{filter:brightness(1.1)}.modal-note{margin:14px 0 0;color:#738099;font-size:10px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1050px){.app-shell{padding:0 30px}.main-layout{grid-template-columns:minmax(0,1fr) 270px;gap:32px}}
@media(max-width:760px){.app-shell{padding:0 20px}.topbar{height:70px}.connection{display:none}.main-layout{display:flex;flex-direction:column;gap:23px;padding-top:27px}.chat-column{max-width:none}.intro{gap:14px;min-height:128px}.orbit{width:78px;height:78px;flex-basis:78px}.core{width:43px;height:43px;font-size:17px}.orbit-ring{inset:1px}.intro h1{font-size:27px}.intro p{font-size:12px}.conversation{max-height:none;min-height:220px}.side-column{width:100%;display:grid;grid-template-columns:1fr 1fr;padding-top:0}.about-card{grid-column:1/-1}.footer{font-size:8px}.footer span:last-child{text-align:right}}
@media(max-width:500px){.app-shell{padding:0 14px}.brand-mark{width:32px;height:32px}.brand strong{font-size:11px}.settings-button{padding:8px 10px;font-size:10px}.settings-button span{font-size:14px}.intro{align-items:flex-start;padding-top:8px}.orbit{width:61px;height:61px;flex-basis:61px;margin-top:9px}.core{width:37px;height:37px}.orbit-ring:before,.orbit-ring:after{display:none}.orbit-point{right:2px;top:8px}.intro h1{font-size:24px}.intro p{max-width:245px;line-height:1.55}.eyebrow{font-size:8px}.composer-card{padding:12px 11px 8px}.voice-controls{gap:9px}.voice-button{font-size:10px;padding:8px}.voice-status{font-size:10px}.composer-footer{font-size:9px}.side-column{grid-template-columns:1fr}.about-card{grid-column:auto}.footer{flex-direction:column}.footer span:last-child{text-align:left}.settings-modal{padding:22px 18px 17px}.modal-heading h2{font-size:19px}.settings-form{grid-template-columns:1fr}.settings-form>label,.slider-label,.full-label,.modal-actions{grid-column:1}.slider-label{grid-template-columns:1fr minmax(72px,120px) 28px;gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
