:root { --glow:#65e7ff; --violet:#9277ff; --eye:#65e7ff; --eye-scale:1; --eye-glow:.55; }
body { background:radial-gradient(circle at 50% 5%,#15313b 0,#091419 38%,#050b0e 100%); overflow:hidden; }
.shell { max-width:1080px; grid-template-rows:auto auto minmax(180px,1fr) auto; }
header { position:relative; z-index:10; padding:6px 0 12px; }
.identity { gap:10px; }.brand-mark { color:var(--glow); text-shadow:0 0 14px var(--glow); font-size:1.4rem; }.local-label { font-size:.62rem; letter-spacing:.22em; color:var(--muted); }
.header-actions button { background:#0c1a1fbb; backdrop-filter:blur(8px); }
.companion-stage { min-height:310px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.ambient-ring { position:absolute; border:1px solid #58e8ff16; border-radius:50%; pointer-events:none; }.ring-one { width:310px; height:310px; animation:ringPulse 5s ease-in-out infinite; }.ring-two { width:440px; height:440px; animation:ringPulse 5s 1s ease-in-out infinite reverse; }
@keyframes ringPulse { 50% { transform:scale(1.06); opacity:.35; } }
.robot-head { width:330px; height:194px; position:relative; border-radius:54px; background:#020405; border:1px solid #9eeeff26; box-shadow:0 25px 65px #000b,0 0 calc(38px * var(--eye-glow)) color-mix(in srgb,var(--eye) 20%,transparent),inset 0 1px #fff2; display:grid; place-items:center; z-index:2; transform:perspective(700px) rotateX(-2deg); transition:transform .45s,box-shadow .45s; }
.robot-head::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(145deg,#ffffff0c,transparent 31% 74%,#65e7ff08); pointer-events:none; }
.face-screen { position:relative; width:100%; height:100%; display:grid; place-items:center; border-radius:inherit; background:radial-gradient(ellipse at 50% 42%,#0c171b 0,#020405 70%); overflow:hidden; }
.face-screen::after { content:""; position:absolute; inset:7px 24px auto; height:25%; border-radius:50%; background:linear-gradient(#ffffff0b,transparent); pointer-events:none; }
.face { width:285px; height:154px; display:flex; gap:45px; align-items:center; justify-content:center; }
.eye { width:78px; height:88px; border-radius:46% 46% 50% 50% / 43% 43% 57% 57%; background:var(--eye); position:relative; box-shadow:0 0 calc(12px * var(--eye-glow)) color-mix(in srgb,var(--eye) 80%,transparent),0 0 calc(42px * var(--eye-glow)) color-mix(in srgb,var(--eye) 45%,transparent); transform:scale(var(--eye-scale)); transform-origin:center; transition:transform .28s cubic-bezier(.2,.8,.2,1),border-radius .28s,filter .28s,width .28s,height .28s; }
.eye i,.eye b,.eye::after { display:none; }
[data-eye-style="looi"] .eye { width:76px; height:76px; border-radius:50%; }
.face.thinking .eye { animation:think 1.15s ease-in-out infinite alternate; }.face.thinking .eye:last-child { animation-delay:-.55s; }
.face.listening .eye { animation:listen .75s ease-in-out infinite alternate; }
.face.talking .eye { animation:talk .3s ease-in-out infinite alternate; }
.face.blink .eye { transform:scaleX(var(--eye-scale)) scaleY(.06); }
.face.happy .eye,.face.emotion-happy .eye { border-radius:45% 45% 70% 70% / 25% 25% 82% 82%; transform:scaleX(var(--eye-scale)) scaleY(.56) translateY(-12px); }
.face.emotion-curious .eye:first-child { transform:scale(calc(var(--eye-scale) * .82)) translateY(6px); }.face.emotion-curious .eye:last-child { transform:scale(calc(var(--eye-scale) * 1.12)) translateY(-5px); }
.face.emotion-excited .eye { transform:scale(calc(var(--eye-scale) * 1.13)); animation:excited .48s ease-in-out infinite alternate; }
.face.emotion-sleepy .eye { height:27px; border-radius:50% 50% 65% 65%; transform:scaleX(var(--eye-scale)) translateY(9px); }
.face.emotion-love .eye { border-radius:50% 50% 55% 55%; transform:rotate(45deg) scale(calc(var(--eye-scale) * .75)); }.face.emotion-love .eye::before { content:""; display:block; position:absolute; width:100%; height:100%; background:var(--eye); border-radius:50%; transform:translate(-42%,0); }.face.emotion-love .eye::after { content:""; display:block; position:absolute; width:100%; height:100%; background:var(--eye); border-radius:50%; transform:translate(0,-42%); }
.face.emotion-sad .eye:first-child { clip-path:polygon(0 20%,100% 0,100% 100%,0 100%); transform:scale(var(--eye-scale)) translateY(7px); }.face.emotion-sad .eye:last-child { clip-path:polygon(0 0,100% 20%,100% 100%,0 100%); transform:scale(var(--eye-scale)) translateY(7px); }
.face.emotion-surprised .eye { width:83px;height:100px;border-radius:50%;transform:scale(calc(var(--eye-scale) * 1.08));animation:surprise .72s ease-in-out infinite alternate; }
.face.emotion-angry .eye:first-child { clip-path:polygon(0 0,100% 24%,100% 100%,0 100%);transform:scaleX(var(--eye-scale)) scaleY(.72); }.face.emotion-angry .eye:last-child { clip-path:polygon(0 24%,100% 0,100% 100%,0 100%);transform:scaleX(var(--eye-scale)) scaleY(.72); }
.face.emotion-evil { gap:33px; }.face.emotion-evil .eye { height:62px;filter:saturate(1.3); }.face.emotion-evil .eye:first-child { clip-path:polygon(0 0,100% 35%,88% 100%,8% 80%);transform:rotate(7deg) scale(var(--eye-scale)); }.face.emotion-evil .eye:last-child { clip-path:polygon(0 35%,100% 0,92% 80%,12% 100%);transform:rotate(-7deg) scale(var(--eye-scale)); }
@keyframes think { to { transform:scale(var(--eye-scale)) translateY(7px) scaleY(.82); } } @keyframes listen { to { transform:scale(calc(var(--eye-scale) * 1.07)); } } @keyframes talk { to { transform:scaleX(var(--eye-scale)) scaleY(.82) translateY(-3px); } } @keyframes excited { to { transform:scale(calc(var(--eye-scale) * 1.2)) translateY(-6px); } } @keyframes surprise { to { transform:scale(calc(var(--eye-scale) * 1.13)); } }
.emotion-picker { display:flex; gap:5px; z-index:4; margin-top:10px; opacity:.52; transition:opacity .2s; }.emotion-picker:hover,.emotion-picker:focus-within { opacity:1; }.emotion-picker button { padding:4px 8px; font-size:.67rem; border-radius:99px; background:#071317aa; color:#a8c4c9; }
.presence { z-index:3; display:flex; align-items:center; gap:8px; min-height:30px; padding:5px 13px; border:1px solid #29434a; border-radius:99px; background:#061014cc; color:#a8c4c9; font-size:.8rem; box-shadow:0 6px 18px #0008; margin-top:-3px; }.presence-dot { width:7px; height:7px; border-radius:50%; background:var(--glow); box-shadow:0 0 10px var(--glow); }
.quick-prompts { display:flex; gap:8px; z-index:3; margin-top:9px; }.quick-prompts button { font-size:.76rem; padding:6px 11px; border-radius:99px; color:#9cb7bd; background:#0a171bb8; }
.messages { padding:14px 10px 18px; mask-image:linear-gradient(transparent 0,#000 12px,#000 100%); }.message { position:relative; line-height:1.55; box-shadow:0 8px 22px #0003; }.message.assistant { border-color:#23434b; background:linear-gradient(145deg,#0e2026,#09161a); }.speaker { display:block; color:var(--glow); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
.composer { grid-template-columns:1fr auto auto auto auto; padding:12px; margin-bottom:3px; background:#071217dd; border:1px solid #1a363e; border-radius:18px; box-shadow:0 15px 40px #0008; backdrop-filter:blur(14px); }.composer textarea { border:0; background:transparent; outline:none; }.composer button { border-radius:12px; }
.soul-head { display:flex; align-items:end; justify-content:space-between; margin-top:8px; }.soul-head .hint { margin:3px 0 0; }.soul-editor { width:100%; min-height:210px; font:13px/1.45 ui-monospace,monospace; }
.appearance-head .hint { margin:3px 0 0; }.appearance-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }.appearance-grid input[type="color"] { min-height:45px; padding:4px; }.appearance-grid input[type="range"] { padding:10px 0; accent-color:var(--eye); }
.audio-gate { position:fixed; left:50%; top:12px; transform:translateX(-50%); width:min(560px,calc(100vw - 24px)); z-index:100; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #58e8ff66; border-radius:14px; background:#071419f2; color:#c9e7eb; box-shadow:0 12px 35px #000b; backdrop-filter:blur(14px); font-size:.85rem; }.audio-gate[hidden] { display:none; }.audio-gate button { flex:none; border-color:var(--glow); color:#dffcff; }
@media(max-width:650px) { .shell { padding:8px; grid-template-rows:auto auto minmax(150px,1fr) auto; }.companion-stage { min-height:250px; }.robot-head { width:260px; height:154px; border-radius:38px; }.face-screen { width:100%; height:100%; }.face { width:220px; height:120px; gap:32px; }.eye { width:61px; height:69px; }[data-eye-style="looi"] .eye { width:60px;height:60px; }.emotion-picker button { font-size:0;width:28px;height:8px;padding:0; }.quick-prompts { display:none; }.messages { padding-top:6px; }.message { max-width:94%; }.composer { grid-template-columns:repeat(4,1fr); }.composer textarea { grid-column:1/-1; }.appearance-grid { grid-template-columns:1fr; } }