@font-face{font-family:ui-face;src:local(Inter)}*{box-sizing:border-box}html,body{min-height:100%;margin:0;overflow:hidden}body{font-family:ui-face,Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.face-page{color:#1a1a1a;background:radial-gradient(circle at 18% 12%,#d977572e,#0000 32%),radial-gradient(circle at 82% 8%,#5f8a5f24,#0000 30%),linear-gradient(135deg,#f7f4ea 0%,#f0eee5 100%);grid-template-rows:auto minmax(150px,1fr) auto auto auto auto;gap:clamp(8px,1.6vh,16px);height:100dvh;min-height:100dvh;padding:clamp(12px,2.4vw,26px);display:grid;overflow:hidden}.face-topbar,.face-composer,.reply-panel,.history-drawer,.capability-row,.settings-card{width:min(1040px,100%);margin-inline:auto}.face-topbar{grid-template-columns:1fr auto auto;align-items:center;gap:12px;display:grid}.brand-kicker{color:#d97757;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;font-weight:900}.face-topbar h1{margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.35rem,3vw,2.4rem);line-height:1}.connection-pill{background:#ffffffa6;border:1px solid #1a1a1a14;border-radius:999px;align-items:center;gap:8px;max-width:min(48vw,360px);padding:9px 12px;font-weight:800;display:inline-flex;box-shadow:0 12px 30px #1a1a1a12}.connection-pill .dot{background:#5f8a5f;border-radius:999px;width:10px;height:10px;box-shadow:0 0 0 5px #5f8a5f1f}.connection-pill.state-offline .dot,.connection-pill.state-error .dot{background:#b94a48;box-shadow:0 0 0 5px #b94a481f}.connection-pill small{text-overflow:ellipsis;white-space:nowrap;color:#666;font-weight:650;overflow:hidden}.icon-button,.capability-row button,.face-composer button,.settings-actions button,.settings-close{cursor:pointer;color:#1a1a1a;background:#ffffffa6;border:0;transition:transform .14s,background .14s,opacity .14s;box-shadow:0 10px 24px #1a1a1a14}.icon-button:hover,.capability-row button:hover,.face-composer button:hover,.settings-actions button:hover{transform:translateY(-1px)}.icon-button{border-radius:16px;place-items:center;width:44px;height:44px;display:grid}.face-stage{align-self:stretch;place-items:center;width:min(760px,100%);min-height:0;margin-inline:auto;display:grid;position:relative}.ambient-ring{aspect-ratio:1;background:radial-gradient(circle,#d9775726,#d9775708 62%,#0000 65%);border-radius:999px;width:min(56vh,460px);animation:4.8s ease-in-out infinite idle-breathe;position:absolute}.face-card{aspect-ratio:1.9;background:linear-gradient(145deg,#ffffffb8,#ffffff61),#ffffffa6;border:1px solid #1a1a1a14;border-radius:clamp(32px,8vw,72px);place-items:center;width:min(520px,72vw);min-width:260px;animation:5.4s ease-in-out infinite idle-float;display:grid;position:relative;box-shadow:inset 0 1px #ffffffe6,0 30px 70px #1a1a1a1f}.eyes{gap:clamp(36px,8vw,78px);display:flex;transform:translateY(-10px)}.eye{transform-origin:50%;background:#1a1a1a;border-radius:46% 46% 42% 42%;width:clamp(62px,12vw,108px);height:clamp(62px,12vw,108px);animation:7s infinite blink;position:relative;overflow:hidden;box-shadow:inset 0 -10px #ffffff14}.pupil{background:#ffffff94;border-radius:50%;width:22%;height:22%;position:absolute;top:26%;left:28%}.mouth{gap:7px;display:flex;position:absolute;bottom:22%;left:50%;transform:translate(-50%)}.mouth span{background:#1a1a1a;border-radius:999px;width:44px;height:8px;display:block}.mouth span:nth-child(2),.mouth span:nth-child(3){display:none}.status-line{color:#666;background:#ffffff94;border-radius:999px;padding:8px 14px;font-weight:800;position:absolute;bottom:max(2px,1vh);box-shadow:0 10px 30px #1a1a1a0f}.listening-waves{pointer-events:none;display:none;position:absolute;inset:-14px}.listening-waves i{border-radius:inherit;border:2px solid #d9775747;animation:1.5s ease-out infinite wave;position:absolute;inset:0}.listening-waves i:nth-child(2){animation-delay:.25s}.listening-waves i:nth-child(3){animation-delay:.5s}.state-listening .listening-waves{display:block}.state-listening .eye{transform:scale(1.08)}.state-thinking .pupil{animation:1.2s ease-in-out infinite look-around}.state-thinking .mouth span{width:12px;height:12px;animation:1s ease-in-out infinite dots;display:block}.state-thinking .mouth span:nth-child(2){animation-delay:.15s}.state-thinking .mouth span:nth-child(3){animation-delay:.3s}.state-speaking .mouth span:first-child{border-radius:8px 8px 22px 22px;width:72px;height:26px;animation:.28s ease-in-out infinite alternate talk}.state-error .face-card{box-shadow:inset 0 0 0 2px #b94a482e,0 30px 70px #b94a481f}.state-offline .face-card{opacity:.72;filter:saturate(.55)}.state-offline .eye{border-radius:0 0 48% 48%;height:clamp(26px,5vw,44px);transform:translateY(18px)}.emotion-happy .eye{border-radius:50% 50% 42% 42%;transform:scaleY(.74)rotate(-1deg)}.emotion-happy .mouth span:first-child{border-radius:0 0 40px 40px;width:74px;height:26px}.emotion-confused .left-eye{transform:rotate(-7deg)scaleY(.86)}.emotion-confused .right-eye{transform:rotate(7deg)scaleY(1.08)}.emotion-sleepy .eye{height:clamp(32px,6vw,48px);transform:translateY(12px)}.emotion-surprised .eye{border-radius:50%;transform:scale(1.14)}.emotion-surprised .mouth span:first-child{border-radius:50%;width:30px;height:30px}.emotion-concerned .eye{border-radius:40% 40% 52% 52%;transform:scaleY(.82)}.reply-panel{background:#ffffffa6;border:1px solid #1a1a1a14;border-radius:28px;min-height:clamp(68px,12vh,120px);max-height:16vh;padding:clamp(12px,2vw,18px) clamp(16px,3vw,24px);overflow:auto;box-shadow:0 18px 42px #1a1a1a14}.reply-label{color:#d97757;letter-spacing:.08em;margin-bottom:6px;font-size:.78rem;font-weight:900}.reply-panel p{margin:0;font-size:clamp(1rem,2vw,1.35rem);line-height:1.55}.history-drawer{color:#666;font-size:.9rem}.history-drawer summary{cursor:pointer;font-weight:850}.history-drawer div{background:#ffffff6b;border-radius:18px;gap:4px;max-height:72px;margin-top:6px;padding:10px 12px;display:grid;overflow:auto}.history-drawer p{margin:0}.face-composer{background:#ffffffa6;border:1px solid #1a1a1a14;border-radius:28px;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:10px;display:grid;box-shadow:0 18px 42px #1a1a1a14}.face-composer input{color:#1a1a1a;background:#ffffffbd;border:1px solid #1a1a1a14;border-radius:18px;outline:none;min-width:0;height:48px;padding:0 16px;font-size:1rem}.face-composer button{border-radius:18px;justify-content:center;align-items:center;gap:7px;min-height:48px;padding:0 15px;font-weight:850;display:inline-flex}.voice-button.active{color:#fff;background:#d97757}.send-button{color:#f7f4ea!important;background:#1a1a1a!important}.send-button:disabled{opacity:.38;cursor:not-allowed}.stop-button{color:#b94a48!important;background:#b94a4824!important}.hidden{display:none!important}.capability-row{color:#666;justify-content:space-between;align-items:center;gap:10px;font-size:.86rem;display:flex}.capability-row button{border-radius:999px;padding:9px 12px;font-weight:800}.settings-backdrop{z-index:80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a1a38;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.settings-card{background:#f7f4ea;border-radius:30px;gap:14px;max-width:540px;padding:24px;display:grid;position:relative;box-shadow:0 30px 90px #1a1a1a38}.settings-card h2{margin:0;font-family:Georgia,Times New Roman,serif;font-size:1.7rem}.settings-card label{gap:7px;font-weight:780;display:grid}.settings-card input:not([type=checkbox]){background:#ffffffbd;border:1px solid #1a1a1a21;border-radius:15px;height:46px;padding:0 13px}.settings-card .toggle{color:#444;grid-template-columns:auto 1fr;align-items:center}.settings-card .toggle input{accent-color:#d97757;width:20px;height:20px}.settings-close{border-radius:14px;width:38px;height:38px;font-size:22px;position:absolute;top:16px;right:16px}.settings-actions{justify-content:flex-end;gap:10px;display:flex}.settings-actions button{border-radius:15px;min-height:44px;padding:0 16px;font-weight:850}.settings-actions button[type=submit]{color:#fff;background:#d97757}@keyframes idle-breathe{0%,to{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}@keyframes idle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes blink{0%,93%,to{scale:1}95%{scale:1 .08}97%{scale:1}}@keyframes look-around{0%,to{transform:translate(-4px)}50%{transform:translate(15px)}}@keyframes dots{0%,to{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(-8px)}}@keyframes talk{0%{transform:translate(-50%)scaleY(.65)}to{transform:translate(-50%)scaleY(1.15)}}@keyframes wave{0%{opacity:.55;transform:scale(.96)}to{opacity:0;transform:scale(1.12)}}@media (width<=860px){.face-page{grid-template-rows:auto minmax(118px,1fr) auto auto auto auto;gap:7px;padding:10px 12px}.face-topbar h1{font-size:1.35rem}.connection-pill{max-width:42vw;padding:7px 9px}.connection-pill small{display:none}.face-card{width:min(430px,68vw);min-width:238px}.reply-panel{border-radius:22px;min-height:58px;max-height:14vh;padding:10px 14px}.reply-panel p{font-size:.96rem;line-height:1.42}.history-drawer{display:none}.face-composer{border-radius:22px;grid-template-columns:auto 1fr auto;padding:8px}.stop-button{display:none!important}.face-composer button span{display:none}.face-composer button{min-width:48px;padding:0 12px}.status-line{padding:6px 11px;font-size:.86rem;bottom:0}}@media (height<=520px) and (orientation:landscape){.face-page{grid-template-rows:auto minmax(104px,1fr) 50px 54px;gap:5px;height:100dvh;min-height:0;padding:8px 12px}.history-drawer,.capability-row{display:none}.face-topbar{gap:8px}.brand-kicker{font-size:.64rem}.face-topbar h1{font-size:1.18rem}.icon-button{border-radius:14px;width:38px;height:38px}.connection-pill{padding:6px 9px}.face-card{border-radius:44px;width:min(300px,50vw);min-width:230px}.ambient-ring{width:min(52vh,250px)}.eye{width:clamp(42px,7vw,60px);height:clamp(42px,7vw,60px)}.eyes{gap:clamp(34px,7vw,56px);transform:translateY(-8px)}.mouth{bottom:17%}.mouth span{width:34px;height:7px}.status-line{padding:5px 10px;font-size:.78rem}.reply-panel{border-radius:18px;min-height:0;max-height:none;padding:7px 12px}.reply-label{display:none}.reply-panel p{font-size:.88rem;line-height:1.28}.face-composer{border-radius:18px;padding:6px}.face-composer input{border-radius:14px;height:40px}.face-composer button{border-radius:14px;min-width:44px;min-height:40px}}