@import url("./assistants/storybook/style.css");
:root{color-scheme:dark;--bg:#171918;--panel:#202321;--text:#ebe9e1;--muted:#a0a69e;--line:#343a34;--accent:#dd876e;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{transition:background .2s,transform .2s}button:hover{filter:brightness(1.13)}[hidden]{display:none!important}header{height:88px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--text);font-size:15px;letter-spacing:-.6px}.brand-mark{font-family:Georgia,serif;font-style:italic;letter-spacing:-6px;font-size:29px;width:35px;color:var(--accent)}.brand-mark span{color:var(--text)}.header-actions{display:flex;gap:24px;align-items:center}.connection{font-size:11px;color:var(--muted)}.connection:before{content:'';display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;margin-right:8px}.icon-button{background:none;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;font-size:22px}.companion-pill{display:flex;align-items:center;gap:10px;margin:10px auto 0;border:1px solid var(--line);border-radius:30px;padding:10px 16px;background:#202320;font-size:12px}.little-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}.pill-caption{color:var(--muted);border-left:1px solid #495048;padding-left:10px;font-size:11px}main{max-width:980px;margin:auto;position:relative;padding:0 24px 24px}.presence{text-align:center;position:relative;padding-top:12px}.ambient{position:absolute;left:50%;top:-15px;transform:translateX(-50%);width:min(560px,100%);height:350px;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 9%,transparent),transparent 68%);pointer-events:none}#avatar{width:300px;height:280px;margin:auto;position:relative;z-index:1}.companion{width:100%;height:100%}.companion svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 20px 25px #0003)}.body{animation:float 5s ease-in-out infinite;transform-origin:160px 180px}.eyes{fill:#33352e;transform-origin:160px 160px;animation:blink 7s infinite}.mouth{fill:#664b49;transform-box:fill-box;transform-origin:center}.face{transition:transform .5s}.ground{height:8px;width:106px;background:#0005;border-radius:50%;filter:blur(6px);margin:-25px auto 25px}.companion-pip .body{animation-duration:3.7s}.companion-lumi .body{animation-duration:6s}.companion[data-state=listening] .body{animation:listen 2s ease-in-out infinite}.companion[data-state=thinking] .face{transform:translate(6px,-3px)}.companion[data-state=thinking] .body{animation:ponder 3s ease-in-out infinite}.companion[data-state=speaking] .mouth{animation:talk .25s ease-in-out infinite alternate}.companion[data-state=error]{opacity:.7}@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}@keyframes blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}@keyframes talk{to{transform:scale(1.2,3)}}@keyframes listen{50%{transform:translateY(-5px) rotate(-4deg)}}@keyframes ponder{50%{transform:translateY(-7px) rotate(4deg)}}.eyebrow{font-size:9px;letter-spacing:2.4px;color:var(--muted);line-height:1.8}h1{font:normal clamp(30px,4vw,43px)/1.18 Georgia,serif;letter-spacing:-1.3px;margin:14px 0}#invitation{font-size:13px;line-height:1.8;color:var(--muted);margin:0}.conversation{max-width:620px;margin:0 auto}#messages:empty{display:none}#messages{max-height:260px;overflow:auto;padding:15px 5px;scrollbar-width:thin;scrollbar-color:#52594f transparent}.message{font-size:14px;line-height:1.75;padding:10px 14px;margin:10px 0;border-radius:15px;overflow-wrap:anywhere}.message p{white-space:pre-wrap;margin:4px 0}.message small{font-size:9px;letter-spacing:1.5px;color:var(--accent)}.message.user{margin-left:60px;background:#252b26}.message.user small{color:var(--muted)}.message.error{border:1px solid #9d6b5d}.message details{font-size:11px;margin:8px 0;border:0;padding:0}.interaction{max-width:590px;margin:30px auto 0;text-align:center}.state-line{font-size:11px;letter-spacing:.3px;color:var(--muted);display:flex;justify-content:center;gap:8px;align-items:center;min-height:20px}#state-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.voice-actions{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:15px}.talk-button{border:1px solid #e8ecce33;background:#dfe5ca;color:#292e25;border-radius:30px;padding:15px 25px;font-size:13px;display:flex;align-items:center;gap:12px;box-shadow:0 5px 20px #0002}.talk-button.active{background:#343d32;color:#e1e8d7;border-color:#819275}.subtle-button{border:1px solid var(--line);border-radius:25px;padding:13px 18px;background:transparent;font-size:12px}.voice-hint{font-size:10px;color:var(--muted);margin:12px 0 24px;min-height:15px}#chat{display:flex;align-items:center;gap:12px;background:#202420;border:1px solid #394137;border-radius:18px;padding:9px 10px 9px 18px;text-align:left}textarea{width:100%;resize:none;max-height:120px;min-height:28px;border:0;background:transparent;color:var(--text);font-size:12px;line-height:1.7;padding:4px 0}textarea::placeholder{color:#9ba395}#send{flex:none;width:33px;height:33px;border:1px solid #4a5345;border-radius:50%;background:#30392d;font-size:20px}.footer-note{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#8c9588;margin-top:16px}.footer-note span:last-child{font-size:8px;letter-spacing:1.5px;white-space:nowrap}dialog{color:var(--text);background:#202420;border:1px solid #434b40;border-radius:24px;width:min(800px,calc(100% - 32px));padding:30px;max-height:90dvh;overflow:auto}dialog::backdrop{background:#080c09b8;backdrop-filter:blur(9px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.dialog-top h2{font-size:23px}h2{font:normal 30px/1.2 Georgia,serif;letter-spacing:-.5px;margin:20px 0 10px}.dialog-description,.hint{font-size:12px;line-height:1.8;color:var(--muted)}#companion-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:25px 0}.companion-option{padding:12px 14px 22px;border:1px solid #424c3d;border-radius:18px;background:#272e26;text-align:left}.companion-option[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#272e26)}.companion-option .preview{height:155px;width:100%}.companion-option strong{display:block;font:normal 24px Georgia,serif;margin-bottom:8px}.companion-option small{color:var(--muted);font-size:11px;line-height:1.6;display:block}.drawer{margin:12px 12px 12px auto;width:min(460px,calc(100% - 24px));height:calc(100dvh - 24px);max-height:none;border-radius:22px;padding:24px}.setting{display:flex;align-items:center;justify-content:space-between;font-size:13px;border-block:1px solid var(--line);padding:17px 0;margin:22px 0 10px}.setting small{display:block;color:var(--muted);font-size:11px;margin-top:6px}input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}.secondary-button{font-size:12px;border:1px solid #495343;border-radius:10px;background:#2c3429;padding:10px 14px}details{padding:20px 0;border-bottom:1px solid var(--line);margin:8px 0}summary{cursor:pointer;font-size:13px}#models{font-size:11px;margin:14px 0}.model{padding:10px 0;display:flex;gap:15px;justify-content:space-between}.model span{color:var(--muted);overflow-wrap:anywhere}.model strong{text-transform:capitalize}#scene label{font-size:11px;display:block;margin:16px 0}input:not([type=checkbox]){width:100%;margin-top:8px;background:#171d17;border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--text)}pre{font:11px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(min-height:850px){.presence{padding-top:35px}.interaction{margin-top:45px}#avatar{height:315px;width:330px}}@media(max-width:600px){header{height:70px;padding:0 22px}.header-actions{gap:12px}.connection{font-size:9px}main{padding-inline:20px}#avatar{height:250px;width:270px}.presence{padding-top:5px}.interaction{margin-top:25px}.footer-note{font-size:8px}.footer-note span:last-child{display:none}#companion-options{grid-template-columns:1fr;gap:10px}.companion-option{display:grid;grid-template-columns:100px 1fr;align-items:center;padding:4px 12px}.companion-option .preview{height:110px;grid-row:span 2}.companion-option strong{align-self:end;margin-bottom:5px}.companion-option small{align-self:start}dialog{padding:22px}h2{font-size:27px}.pill-caption{font-size:10px}}@media(prefers-reduced-motion:reduce){*:not(.companion[data-action] .pet-motion),*:before,*:after{animation:none!important}*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
@media(max-height:800px) and (min-width:601px){header{height:68px}.presence{padding-top:0}#avatar{width:255px;height:235px}.ground{margin-bottom:12px}.interaction{margin-top:20px}h1{margin:10px 0}.voice-hint{margin:10px 0 16px}}
.person-control{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 16px;font-size:11px;color:var(--muted)}select{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 30px 8px 10px;max-width:230px}select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#person-help{font-size:9px}.memory-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0}.memory-tier h3{font-size:10px;letter-spacing:1.7px;text-transform:uppercase;color:var(--accent);margin:28px 0 12px}.memory-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:#191e19;margin:10px 0}.memory-card>summary{list-style:none;display:flex;flex-direction:column;gap:7px}.memory-card>summary:after{content:'Explore ↗';font-size:10px;color:var(--accent)}.memory-card[open]>summary:after{content:'Close ↙'}.memory-card summary small{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}.memory-card summary span{line-height:1.6;overflow-wrap:anywhere}.memory-card time{font-size:10px;color:var(--muted)}.record-details{padding:12px 0;margin:0}.record-details summary{font-size:11px}.record-details pre{max-height:350px;overflow:auto}.memory-link{display:block;background:none;border:0;color:var(--accent);padding:4px 0;text-align:left;font-size:10px;overflow-wrap:anywhere}.context-request{border-left:2px solid var(--line);padding:7px 12px;margin:12px 0}.context-request strong{font-size:11px}#remember-text{background:var(--bg);border-radius:10px;padding:12px;margin:12px 0}.drawer{width:min(540px,calc(100% - 24px))}#memory-list{font-size:12px;line-height:1.7}.model{flex-direction:column;gap:4px}button:disabled{cursor:not-allowed}@media(max-width:600px){#person-help{display:none}.person-control{margin-bottom:12px}.connection{max-width:140px}.footer-note{flex-wrap:wrap}}
@media(max-height:800px) and (min-width:601px){header{height:56px}.person-control{margin-bottom:8px}.companion-pill{margin-top:0;padding:8px 14px}#avatar{width:220px;height:200px}.voice-actions{margin-top:9px}.talk-button{padding:12px 22px}.voice-hint{margin:8px 0 14px}.footer-note{margin-top:10px}}
.memory-window{width:calc(100vw - 32px);max-width:1600px;height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);padding:0;border-radius:18px;overflow:hidden;background:var(--bg)}
.memory-window[open]{display:flex;flex-direction:column}
.explorer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--panel)}
.explorer-bar h2{font:600 16px ui-sans-serif,-apple-system,sans-serif;margin:0}
.explorer-bar p{margin:6px 0 0;font-size:11px;color:var(--muted)}
#memory-frame{width:100%;flex:1;min-height:0;border:0;background:var(--bg)}
@media(max-width:600px){.header-actions{gap:10px}.header-actions .connection{display:none}.memory-window{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.explorer-bar{padding:12px;gap:8px}.explorer-bar p{max-width:180px;line-height:1.5}.explorer-bar .secondary-button{font-size:11px}}

/* Petting layers remain independent of conversation-state animation. */
.companion{position:relative}.pet-motion{transform-origin:160px 180px;transform:translate(var(--pet-x,0px),var(--pet-y,0px)) rotate(var(--pet-tilt,0deg));transition:transform .25s ease-out}
.pet-target{position:absolute;left:24%;top:23%;width:52%;height:61%;border:0;border-radius:46%;background:transparent!important;padding:0;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M10%2017V8c0-3%204-3%204%200v6-9c0-3%204-3%204%200v9-7c0-3%204-3%204%200v9-4c0-3%204-3%204%200v10c0%206-4%209-9%209-4%200-6-2-8-5l-5-7c-2-3%201-5%203-3l3%203Z%22%20fill%3D%22%23f5cfad%22%20stroke%3D%22%23704c40%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13%2023q4-3%208%200%22%20fill%3D%22none%22%20stroke%3D%22%23d89380%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 14 6, grab}
.pet-target:active{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M10%2017V8c0-3%204-3%204%200v6-9c0-3%204-3%204%200v9-7c0-3%204-3%204%200v9-4c0-3%204-3%204%200v10c0%206-4%209-9%209-4%200-6-2-8-5l-5-7c-2-3%201-5%203-3l3%203Z%22%20fill%3D%22%23f5cfad%22%20stroke%3D%22%23704c40%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13%2023q4-3%208%200%22%20fill%3D%22none%22%20stroke%3D%22%23d89380%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 14 6, grab}.pet-target:focus-visible{outline:2px dashed var(--accent);outline-offset:8px}.pet-target:hover{filter:none}
.pet-smile,.pet-smile-eyes{display:none}.companion[data-petted=true] .pet-smile-eyes{display:block}.companion[data-petted=true] .eyes{visibility:hidden}.companion[data-petted=true]:not([data-state=speaking]):not([data-audible=true]) .pet-smile{display:block}.companion[data-petted=true]:not([data-state=speaking]):not([data-audible=true]) .mouth{visibility:hidden}
.pet-hearts{pointer-events:none;position:absolute;inset:0;opacity:0;color:var(--accent);transition:opacity .2s}.pet-hearts i{position:absolute;font-style:normal;font-size:17px;top:28%;left:25%}.pet-hearts i:nth-child(2){left:72%;top:24%;font-size:13px}.pet-hearts i:nth-child(3){left:60%;top:15%;font-size:10px}.companion[data-petted=true] .pet-hearts{opacity:1}.companion[data-petted=true] .pet-hearts i{animation:pet-heart 1.4s ease-in-out infinite}.companion[data-petted=true] .pet-hearts i:nth-child(2){animation-delay:.2s}.companion[data-petted=true] .pet-hearts i:nth-child(3){animation-delay:.4s}
.pet-hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.3px;color:var(--muted);pointer-events:none;opacity:0;transition:opacity .2s}.companion:has(.pet-target:hover) .pet-hint,.companion:focus-within .pet-hint,.companion[data-petted=true] .pet-hint{opacity:1}
@keyframes pet-heart{50%{transform:translateY(-9px) rotate(10deg);opacity:.55}}
@media(prefers-reduced-motion:reduce){.companion:not([data-action]) .pet-motion{transform:none!important}.pet-hearts i{animation:none!important}}
.pet-hint{bottom:14px}

/* Gaze moves outside the blink group so each motion composes cleanly. */
.eye-gaze{transform:translate(var(--gaze-x,0px),var(--gaze-y,0px));transition:transform .16s ease-out}
@media(prefers-reduced-motion:reduce){.eye-gaze{transform:none!important}}

.camera-control{display:flex;gap:12px;align-items:center;justify-content:center;margin:0 auto 16px;font-size:12px;color:var(--muted,#aaa);max-width:680px}
.camera-control #camera-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:380px}
.camera-panel{display:flex;align-items:center;gap:14px;max-width:540px;margin:0 auto 20px;padding:10px;border:1px solid #ffffff18;border-radius:16px;background:#ffffff06;text-align:left}
.camera-panel[hidden]{display:none}.camera-panel video{width:144px;max-height:100px;object-fit:contain;border-radius:10px;background:#111;transform:scaleX(-1)}
.camera-panel strong{font-size:12px}.camera-panel p{font-size:11px;line-height:1.5;color:var(--muted,#aaa);margin:6px 0 0}
.setting select{max-width:145px;background:#242525;color:#eee;border:1px solid #ffffff28;border-radius:8px;padding:8px}
@media(max-width:600px){.camera-control{flex-wrap:wrap;gap:6px}.camera-control #camera-status{max-width:90vw}.camera-panel{margin-inline:10px}.camera-panel video{width:110px}}

/* Audio-driven mouths use the level of the sound actually being played. */
.companion[data-audio-driven=true] .mouth{animation:none!important;transform:none}
/* Lip sync communicates audible speech, including when decorative motion is reduced. */

/* Opt-in perception inspector: independent of companion styling and conversation state. */
.debug-window{--debug-line:#303035;--debug-muted:#a2a2ad;color:#f3f1f2;background:#141416;width:calc(100vw - 40px);max-width:1440px;height:calc(100dvh - 40px);max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--debug-line);border-radius:18px;overflow:hidden}
.debug-window[open]{display:flex;flex-direction:column}.debug-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--debug-line);flex-shrink:0}.debug-eyebrow{color:#e36c7d;font-size:9px;letter-spacing:.18em;margin:0 0 4px}.debug-bar h2{margin:0;font:600 22px ui-sans-serif,-apple-system,sans-serif}.debug-actions{display:flex;align-items:center;gap:10px}.debug-window .secondary-button{color:#f3f1f2;border:1px solid #404047;background:#242428;padding:9px 13px;font-size:12px}.debug-window .secondary-button[aria-pressed=true]{border-color:#e36c7d;color:#ffacb8}.debug-window .icon-button{color:#f3f1f2}.debug-scroll{padding:20px 24px;overflow:auto;min-height:0}.debug-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.debug-feed{min-width:0}.debug-feed-top{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.06em;color:var(--debug-muted);margin-bottom:10px}.debug-feed-top label{display:flex;align-items:center;gap:6px}.debug-window input{accent-color:#e36c7d}.debug-stage{min-height:250px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:#09090b;border:1px solid var(--debug-line);border-radius:10px;overflow:hidden}.debug-stage canvas{display:block;width:100%;height:100%;object-fit:contain}.debug-window [hidden]{display:none!important}.debug-stage p{color:var(--debug-muted);font-size:13px;padding:24px;text-align:center}.debug-caption{font-size:11px;color:var(--debug-muted);line-height:1.6;margin:10px 0}.debug-legend{display:flex;gap:13px;flex-wrap:wrap;margin-top:13px;font-size:10px;color:var(--debug-muted)}.debug-legend span:before{content:'';display:inline-block;vertical-align:middle;margin-right:5px;width:7px;height:7px;border:1.5px solid currentColor;border-radius:2px}.debug-legend .person{color:#f4f2ed}.debug-legend .pose{color:#b4a4e3}.debug-legend .appearance{color:#e36c7d}.debug-legend .selected{color:#69d69b}.debug-legend .passed{color:#f4b16c}.debug-legend .rejected{color:#8a8e94}.debug-window h3{font:600 13px ui-sans-serif,-apple-system,sans-serif;margin:0 0 12px}.debug-summary>p,.debug-section>p{font-size:12px;color:var(--debug-muted);line-height:1.6}.debug-metrics>div{display:flex;justify-content:space-between;font-size:11px;padding:9px 0;border-bottom:1px solid #25252b;gap:12px}.debug-metrics span{color:var(--debug-muted)}.debug-metrics strong{font-weight:500;font-variant-numeric:tabular-nums}.debug-section{margin-top:22px;padding-top:18px;border-top:1px solid var(--debug-line)}.debug-tier{display:flex;justify-content:space-between;gap:14px;font-size:11px;margin:11px 0}.debug-tier strong{font-weight:500;white-space:nowrap}.debug-tier span{color:var(--debug-muted);text-align:right}.debug-freshness{color:#f4b16c;font-size:11px;line-height:1.6}.debug-freshness.fresh{color:#69d69b}.debug-section-heading{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px}.debug-section-heading h3{margin:0}.debug-section-heading span{color:var(--debug-muted);font-size:11px}.debug-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:14px}.debug-person{border:1px solid var(--debug-line);background:#1b1b1f;border-radius:12px;padding:16px;min-width:0}.debug-person-title{display:flex;align-items:center;gap:12px;justify-content:space-between}.debug-person-title h4{font-size:15px;margin:0}.debug-person-title span{font-size:9px;color:var(--debug-muted);letter-spacing:.08em}.debug-decision{font-size:12px;color:#d4d1d8;margin:10px 0;line-height:1.6}.debug-crops{display:flex;gap:10px;overflow-x:auto;margin:14px 0}.debug-crop{--crop-color:#404047;flex:0 0 118px;margin:0;font-size:10px}.debug-crop canvas{display:block;width:116px;height:118px;object-fit:contain;background:#0b0b0e;border:1.5px solid var(--crop-color);border-radius:7px}.debug-crop figcaption{line-height:1.5;margin-top:7px}.debug-crop strong{display:block;font-weight:500}.debug-crop small{display:block;color:var(--debug-muted);font-size:10px;margin-top:3px}.debug-window details{border-top:1px solid var(--debug-line);padding:10px 0 0;margin-top:10px}.debug-window summary{cursor:pointer;font-size:11px;font-weight:500;color:#d5d1db}.debug-window pre{max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.65 ui-monospace,monospace;color:#bbb5c4;background:#101013;border-radius:6px;padding:10px}.debug-summary{min-width:0}.debug-window .debug-actions button:focus-visible,.debug-window summary:focus-visible{outline:2px solid #e36c7d;outline-offset:3px}
@media(max-width:800px){.debug-layout{grid-template-columns:1fr}.debug-summary{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.debug-summary>h3,.debug-summary>p,.debug-summary>.debug-metrics{grid-column:1/-1}.debug-stage{min-height:180px}.debug-scroll{padding:16px}.debug-bar{padding:14px 16px}.debug-window{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}.debug-actions{gap:5px}.debug-window .secondary-button{font-size:11px;padding:8px}.debug-bar h2{font-size:18px}}

/* The home screen stays focused on the companion; text and diagnostics are optional. */
:root{--bg:#141416;--panel:#1c1c20;--text:#f0edef;--muted:#a6a0a9;--line:#363238}
body{background:var(--bg)}
header{height:76px;padding:0 4vw}
.header-actions{gap:18px}
.header-actions .icon-button{border:0}
.icon-button svg{width:21px;height:21px;vertical-align:middle}
.quiet-button{border:0;background:transparent;padding:10px 6px;color:var(--muted);font-size:12px;border-radius:8px}
.quiet-button:hover{color:var(--text);background:#ffffff05}
main{max-width:960px;min-height:calc(100svh - 76px);padding:0 24px 20px;display:flex;flex-direction:column;align-items:center}
.companion-pill{margin:6px auto 0;padding:9px 15px;background:transparent;border-color:var(--line);gap:11px}
.presence{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;padding:24px 0 0;text-align:center}
#avatar{width:clamp(270px,36vh,360px);height:clamp(250px,34vh,340px);flex-shrink:0}
.ambient{top:calc(50% - 210px);height:390px;width:min(520px,100%);opacity:.85}
.ground{flex-shrink:0;margin:-14px auto 26px;width:90px;opacity:.65}
h1{font:normal clamp(28px,3.6vw,38px)/1.25 Georgia,serif;letter-spacing:-.9px;margin:0 0 6px}
.interaction{flex-shrink:0;width:100%;max-width:560px;margin:28px auto 0;padding-bottom:4px}
.state-line{font-size:11px;letter-spacing:0;min-height:18px}
.voice-actions{margin-top:14px}
.talk-button{background:#db8493;color:#211215;border:1px solid #eda5b1;border-radius:30px;padding:15px 27px;min-width:176px;justify-content:center;box-shadow:0 5px 24px #0003;font-size:13px}
.talk-button svg{width:18px;height:18px;flex-shrink:0}
.talk-button.active{background:#512632;color:#fae8ed;border-color:#96556a}
.voice-hint{margin:11px 0 14px;font-size:11px;min-height:16px}
.conversation-tools{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:2px}
.camera-switch{display:flex;align-items:center;gap:7px}
.tool-divider{height:11px;width:1px;background:var(--line)}
/* A small live view stays out of the companion's interaction area. */
.camera-view{position:fixed;top:100px;left:20px;z-index:3;width:100px;margin:0;padding:0;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-align:center;box-shadow:0 6px 24px #0003}
.camera-view video{display:block;width:100%;height:100px;object-fit:contain;background:#09090b}
.camera-view video[data-facing="user"]{transform:scaleX(-1)}
.camera-view strong{display:block;padding:6px 3px;font-size:9px;line-height:1.3;font-weight:500}.camera-view .icon-button{position:absolute;top:3px;right:3px;width:28px;height:28px;font-size:18px;background:#141416bb;border:0;color:#fff}.camera-view #camera-flip{right:auto;left:3px;padding:6px}.camera-view #camera-flip svg{width:16px;height:16px}.camera-view #camera-flip:disabled{opacity:.4}
.tips-dialog{width:min(480px,calc(100vw - 32px));padding:28px}.tips-dialog h2{margin:6px 0 0}.tips-intro{margin:22px 0 14px;color:var(--muted);font-size:13px;line-height:1.6}.companion-prompts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}.companion-prompts button{min-height:104px;padding:13px;border:1px solid var(--line);border-radius:12px;background:#191b1a;color:var(--text);text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}.companion-prompts button:hover,.companion-prompts button:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 56%,var(--line));background:color-mix(in srgb,var(--accent) 8%,#191b1a);outline:none}.companion-prompts b,.companion-prompts span,.companion-prompts em{display:block}.companion-prompts b{font-size:13px;font-weight:550}.companion-prompts span{margin-top:4px;color:var(--muted);font-size:11px}.companion-prompts em,.tips-sleep em{margin-top:8px;color:color-mix(in srgb,var(--accent) 78%,white);font-size:10px;font-style:normal}.tips-sleep{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--accent) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}.tips-sleep b{font-size:13px}.tips-sleep p,.tips-footnote{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.65}.tips-sleep button{flex:0 0 auto;padding:9px 11px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--text);font:inherit;font-size:12px;cursor:pointer}.tips-sleep button:hover,.tips-sleep button:focus-visible{background:color-mix(in srgb,var(--accent) 24%,var(--panel));outline:none}.tips-sleep button em{margin-top:3px;font-size:9px}.tips-footnote{margin-top:18px}@media(max-width:450px){.tips-dialog{padding:22px}.companion-prompts{grid-template-columns:1fr}.tips-sleep{align-items:flex-start;flex-direction:column}.tips-sleep button{width:100%}.tips-dialog .dialog-top h2{font-size:27px}}
@media(max-width:600px){.camera-view{width:78px;left:12px;top:80px}.camera-view video{height:78px}}

.voice-connection{display:flex;align-items:center;gap:13px;text-align:left;width:min(350px,100%);margin:0 auto 16px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.voice-connection strong{font-size:13px;font-weight:500}.voice-connection p{font-size:11px;line-height:1.65;margin:5px 0 0;color:var(--muted)}
.connection-spinner{flex:none;width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:connecting 1s linear infinite}
@keyframes connecting{to{transform:rotate(360deg)}}
.inline-notice{font-size:12px;line-height:1.6;color:#f0adb9;background:#49232b55;border:1px solid #79424b77;border-radius:10px;padding:10px 14px;margin:14px auto;max-width:480px}
dialog{background:var(--panel);border-color:var(--line)}
.drawer{background:var(--panel);border-color:var(--line)}
.drawer .dialog-top h2{font:600 22px ui-sans-serif,-apple-system,sans-serif;letter-spacing:-.4px;margin:0}
.drawer .setting{margin:12px 0 0;border-top:0;gap:18px}
.drawer .secondary-button{background:#29262d;border-color:#49414d}
.drawer .setting+button{margin-top:22px;margin-bottom:10px}
.drawer select{color:var(--text);background:#28252c;border:1px solid #49414d;border-radius:8px;padding:8px;max-width:150px}
.conversation-drawer[open]{display:flex;flex-direction:column;overflow:hidden;padding:22px;width:min(480px,calc(100% - 24px))}
.conversation-drawer .dialog-top{flex-shrink:0;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.conversation-drawer .dialog-top .hint{margin:7px 0 0;font-size:11px}
.conversation-drawer #messages{flex:1;min-height:0;max-height:none;padding:16px 0}
.empty-conversation{flex:1;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:12px}
.conversation-drawer .message{font-size:13px;line-height:1.75;padding:10px 12px;margin:10px 0}
.conversation-drawer .message.user{margin-left:25px;background:#2b272f}
.conversation-composer{flex-shrink:0;padding-top:12px;border-top:1px solid var(--line)}
.conversation-composer #chat{background:#252229;border-color:#403846;border-radius:13px}
.conversation-composer #send{background:#42303c;border-color:#725665}
.conversation-composer #interrupt{display:block;margin:0 auto 12px;font-size:11px;padding:8px 12px}
@media(max-height:720px){header{height:60px}main{min-height:calc(100svh - 60px)}.presence{padding-top:12px}#avatar{width:240px;height:220px}.ground{margin-bottom:16px}.interaction{margin-top:16px}h1{font-size:28px}}
@media(max-width:600px){header{padding:0 20px}.header-actions{gap:12px}.brand{font-size:13px;gap:10px}.brand-mark{font-size:27px}.presence{padding-top:18px}main{padding-inline:20px}.conversation-tools{gap:16px}.quiet-button{font-size:11px}.conversation-drawer[open]{width:calc(100vw - 16px);height:calc(100dvh - 16px);margin:8px;padding:18px}.talk-button{font-size:13px}}

/* Each imported companion supplies its own restrained performance defaults. */
.companion .body{animation:companion-float var(--float-seconds,5s) ease-in-out infinite}
.companion[data-state=listening] .body{animation:companion-listen var(--listen-seconds,2s) ease-in-out infinite}
.companion[data-state=thinking] .body{animation:ponder var(--float-seconds,5s) ease-in-out infinite}
.companion[data-state=sleep] .body{animation:companion-sleep 4.8s ease-in-out infinite}.companion[data-state=sleep] .eyes{visibility:hidden}.companion[data-state=sleep] .pet-smile-eyes{display:block}.companion[data-state=sleep] .mouth{visibility:hidden}.sleep-marks{display:none;position:absolute;left:70%;top:12%;z-index:3;width:18%;height:31%;pointer-events:none;color:#d7b7e8;text-shadow:0 0 9px #b784d888;font:italic clamp(13px,6vw,18px)/1 Georgia,serif}.companion[data-state=sleep] .sleep-marks{display:block}.sleep-marks i{position:absolute;left:0;bottom:0;font-style:inherit;opacity:0;animation:sleep-mark 3.6s ease-out infinite}.sleep-marks i:nth-child(2){left:.72em;font-size:.78em;animation-delay:-1.2s}.sleep-marks i:nth-child(3){left:1.44em;font-size:.61em;animation-delay:-2.4s}
.companion-state-label{position:absolute;z-index:4;top:7%;left:50%;transform:translateX(-50%);padding:7px 12px;border:1px solid #ffffff18;border-radius:999px;background:#211d26cc;color:#d9bedf;font-size:11px;letter-spacing:.04em;white-space:nowrap;box-shadow:0 8px 24px #0003;backdrop-filter:blur(8px)}
.companion[data-transition=waking] .body{animation:companion-waking 2.8s ease-in-out infinite}.companion[data-transition=waking] .eyes{visibility:visible;animation:waking-eyes 2.8s ease-in-out infinite}.companion[data-transition=waking] .pet-smile-eyes{display:none}.companion[data-transition=waking] .mouth{visibility:visible;animation:waking-mouth 2.8s ease-in-out infinite}.companion[data-transition=waking] .sleep-marks{display:none}
.companion[data-transition=preparing] .body{animation:companion-preparing 1.8s ease-in-out infinite}.companion[data-transition=preparing] .face{transform:translate(3px,-2px)}.companion[data-transition=preparing] .eyes{animation:preparing-eyes 2.6s ease-in-out infinite}.companion[data-transition=preparing] .mouth{transform:scale(.9,.75)}
.companion[data-transition=failure] .body{animation:companion-failure .8s ease-in-out 2}.companion[data-transition=failure] .eyes{animation:failure-eyes .8s ease-in-out 2}.companion[data-transition=failure] .companion-state-label{top:0;width:min(230px,80%);white-space:normal;text-align:center;line-height:1.4;padding:13px 17px;border-radius:24px;background:#554b63e8;color:#fff;box-shadow:0 8px 26px #0005,0 0 24px #c2a9cf44}.companion[data-transition=failure] .companion-state-label:before,.companion[data-transition=failure] .companion-state-label:after{content:'';position:absolute;border-radius:50%;background:#554b63e8}.companion[data-transition=failure] .companion-state-label:before{width:12px;height:12px;bottom:-11px;left:27%}.companion[data-transition=failure] .companion-state-label:after{width:6px;height:6px;bottom:-21px;left:23%}
.companion[data-action] .pet-motion{transform-origin:50% 70%;transform-box:fill-box}
.companion[data-action=hop] .pet-motion{animation:companion-hop .72s cubic-bezier(.25,.8,.35,1) both}
.companion[data-action=flip] .pet-motion{transform-origin:50% 50%;animation:companion-flip var(--action-duration,1600ms) linear both}
.companion[data-action=stretch] .pet-motion{animation:companion-stretch .85s ease-in-out both}
.companion[data-action=shake] .pet-motion{animation:companion-shake .65s ease-in-out both}
.companion[data-action=play] .pet-motion{animation:companion-play 1.2s ease-in-out both}
.companion .eye-gaze{transition-duration:var(--gaze-seconds,.16s)}
.companion-pip[data-petted=true] .sprout{transform-origin:164px 100px;animation:sprout-wiggle .8s ease-in-out infinite}
.companion-lumi[data-petted=true] svg{filter:drop-shadow(0 0 18px #b9aedb55)}
.companion-momo[data-petted=true] .body{animation:momo-nestle 2s ease-in-out infinite}
@keyframes companion-float{50%{transform:translateY(calc(-1 * var(--float-height,10px))) rotate(var(--float-tilt,2deg))}}
@keyframes companion-listen{50%{transform:translateY(-4px) rotate(var(--listen-tilt,-4deg))}}
@keyframes companion-sleep{50%{transform:translateY(3px) scale(1.018,.982)}}
@keyframes companion-waking{0%,100%{transform:translateY(3px) scale(1.02,.98)}45%{transform:translateY(-5px) scale(.97,1.05)}70%{transform:translateY(-2px) rotate(2deg)}}
@keyframes companion-preparing{0%,100%{transform:translateY(0) scale(1)}38%{transform:translateY(-5px) scale(1.015) rotate(-1deg)}72%{transform:translateY(-3px) scale(1.01) rotate(1deg)}}
@keyframes companion-failure{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(-5px) rotate(-3deg)}65%{transform:translateX(5px) rotate(3deg)}}
@keyframes failure-eyes{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.35)}}
@keyframes preparing-eyes{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.12)}}
@keyframes waking-eyes{0%,18%{transform:scaleY(.1)}48%,88%,100%{transform:scaleY(1)}92%{transform:scaleY(.08)}}
@keyframes waking-mouth{0%,25%,100%{transform:scale(1)}48%,72%{transform:scale(.9,1.8)}}
@keyframes companion-hop{0%,100%{transform:translateY(0) scale(1)}16%{transform:translateY(5px) scale(1.06,.92)}42%{transform:translateY(-42px) scale(.97,1.04)}54%{transform:translateY(-44px) scale(1)}78%{transform:translateY(5px) scale(1.08,.9)}90%{transform:translateY(-2px) scale(.99,1.02)}}
@keyframes companion-flip{0%{transform:translateY(0) rotate(0) scale(1)}12%{transform:translateY(5px) rotate(0) scale(1.06,.92)}22%{transform:translateY(-24px) rotate(0) scale(1)}36%{transform:translateY(-48px) rotate(90deg) scale(1)}50%{transform:translateY(-56px) rotate(180deg) scale(1)}64%{transform:translateY(-48px) rotate(270deg) scale(1)}78%{transform:translateY(-24px) rotate(360deg) scale(1)}88%{transform:translateY(5px) rotate(360deg) scale(1.08,.9)}100%{transform:translateY(0) rotate(360deg) scale(1)}}
@keyframes companion-stretch{0%,100%{transform:scale(1)}18%{transform:translateY(3px) scale(1.04,.96)}48%,62%{transform:translateY(-6px) scale(.94,1.12)}84%{transform:translateY(2px) scale(1.02,.98)}}
@keyframes companion-shake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-5px) rotate(-6deg)}30%{transform:translateX(5px) rotate(6deg)}45%{transform:translateX(-4px) rotate(-5deg)}60%{transform:translateX(3px) rotate(4deg)}75%{transform:translateX(-2px) rotate(-2deg)}88%{transform:translateX(1px) rotate(1deg)}}
@keyframes companion-play{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-11px,-13px) rotate(-8deg)}40%{transform:translate(8px,-3px) rotate(6deg)}62%{transform:translate(-5px,-20px) rotate(-4deg)}82%{transform:translate(8px,1px) rotate(5deg)}}
@keyframes sleep-mark{0%{opacity:0;transform:translate(0,.28em) scale(.7)}20%{opacity:.8}80%{opacity:.45}100%{opacity:0;transform:translate(.9em,-3.4em) scale(1.2)}}
@keyframes sprout-wiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes momo-nestle{50%{transform:translateY(3px) scale(1.025,.975) rotate(-2deg)}}

.mic-meter{display:inline-flex;align-items:center;gap:2px;width:14px;height:14px;--level:0}
.mic-meter i{width:3px;height:calc(3px + var(--level)*9px);border-radius:3px;background:var(--accent);transition:height 80ms linear}
.mic-meter i:nth-child(2){height:calc(4px + var(--level)*10px)}
.voice-actions{position:relative}
#send-audio{position:absolute;left:calc(50% + 104px);top:50%;transform:translateY(-50%);padding:8px;font-size:11px;white-space:nowrap}
#microphone-note{max-width:210px;overflow-wrap:anywhere}
@media(max-width:380px){#send-audio{position:static;transform:none;font-size:10px}.voice-actions{gap:8px}}

/* Personality is available beside selection, without adding another primary action. */
.companion-identity{display:flex;justify-content:center;align-items:center;gap:9px;margin:6px auto 0}.companion-identity .companion-pill{margin:0}
.personality-info{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);padding:0}.personality-info span{font:italic 17px Georgia,serif}.personality-info:hover{color:var(--text);border-color:var(--accent);background:var(--panel)}
.companion-tips{position:absolute;z-index:2;left:50%;top:50%;width:34px;height:34px;margin:66px 0 0 min(162px,30vw);display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--panel) 88%,transparent);color:var(--muted);padding:0;box-shadow:0 4px 16px #0002;backdrop-filter:blur(8px)}.companion-tips span{font:italic 16px Georgia,serif}.companion-tips:hover{color:var(--text);border-color:var(--accent);background:var(--panel)}@media(max-width:600px){.companion-tips{margin:57px 0 0 min(126px,32vw)}}
.personality-dialog{width:min(510px,calc(100% - 28px));padding:28px;max-height:90dvh}.personality-kind{font-size:11px;color:var(--accent);margin:25px 0 8px}.personality-dialog h2{font:normal 38px/1.15 Georgia,serif;margin:0 0 16px}.personality-traits{display:flex;gap:7px;flex-wrap:wrap}.personality-traits span{font-size:10px;padding:6px 9px;border:1px solid var(--line);border-radius:20px;color:var(--muted)}.personality-about{font-size:14px;line-height:1.8;margin:20px 0 25px}.personality-dialog section{margin:22px 0}.personality-dialog h3{font-size:12px;font-weight:600;margin:0 0 7px}.personality-dialog section p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.personality-example{margin:24px 0;padding:17px 20px;border-left:2px solid var(--accent);background:var(--panel);border-radius:0 12px 12px 0}.personality-example figcaption{font-size:10px;color:var(--muted)}.personality-example blockquote{font:normal 20px/1.55 Georgia,serif;margin:10px 0}.personality-example small{font-size:9px;color:var(--muted)}.personality-interaction{font-size:11px;line-height:1.7;color:var(--muted)}.personality-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:17px;margin-top:22px}.personality-footer p{font-size:10px;color:var(--muted);line-height:1.7;margin:0}.personality-footer button{flex:none}@media(max-width:420px){.personality-dialog{padding:22px}.personality-footer{align-items:flex-start;flex-direction:column}}

.voice-actions{width:min(100%,360px);margin-inline:auto;gap:10px;align-items:stretch}
.voice-actions .talk-button{flex:1 1 auto;min-width:0;min-height:54px;padding:12px 16px;white-space:nowrap}
#interrupt-live{display:inline-flex;align-items:center;justify-content:center;flex:0 0 132px;min-height:54px;margin:0;padding:10px 12px;border-radius:28px;font-size:13px;font-weight:550}
#interrupt-live:not(:disabled):hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
@media(max-width:360px){.voice-actions{gap:8px}.voice-actions .talk-button{padding:10px;font-size:12px;gap:7px}.voice-actions .talk-button svg{width:16px;height:16px}#interrupt-live{flex-basis:110px;padding:8px;font-size:12px}}

.create-companion-link{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 0;padding:16px;border:1px dashed #7c6574;border-radius:14px;color:#e6b4c7;text-decoration:none;font-size:13px}.create-companion-link:hover{background:#e6b4c70b}.create-companion-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.home-loading main{visibility:hidden}.history-divider{text-align:center;font-size:10px;color:var(--muted);margin:24px 0 14px}.library-entry{display:block;text-align:center;color:#d4b0cf;font-size:12px;margin:18px 0;text-decoration:none}

/* One toolbar, a generous companion stage, and voice controls below. */
.header-actions .icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted)}
.header-actions .icon-button:hover{background:#ffffff08;color:var(--text)}
.header-actions .camera-switch{position:relative}
#avatar{width:min(440px,calc(100vw - 48px));height:clamp(300px,48svh,430px)}
.companion-about{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 0;margin:10px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left}
.companion-about strong{font-size:15px;font-weight:500}.companion-about small{display:block;margin-top:6px;color:var(--muted);font-size:12px}
@media(max-width:600px){#avatar{width:min(350px,calc(100vw - 40px));height:clamp(280px,45svh,380px)}}
@media(max-height:580px){#avatar{width:260px;height:240px}}
@media(prefers-reduced-motion:reduce){.companion[data-state=sleep] .sleep-marks i{animation:sleep-mark 3.6s ease-out infinite!important}.companion[data-state=sleep] .sleep-marks i:nth-child(2){animation-delay:-1.2s!important}.companion[data-state=sleep] .sleep-marks i:nth-child(3){animation-delay:-2.4s!important}}
@media(prefers-reduced-motion:reduce){.companion[data-transition=waking] .eyes{transform:scaleY(.65)}.companion[data-transition=waking] .mouth{transform:scale(.95,1.3)}}
@media(prefers-reduced-motion:reduce){.companion[data-transition=failure] .body,.companion[data-transition=failure] .eyes{animation:none}}
/* Requested moves keep their named choreography; reduced-motion rules above
   still suppress passive pointer movement and decorative effects. */

/* Permission guidance belongs with the camera controls, not in the voice flow. */
.media-help{position:fixed;z-index:8;top:76px;right:4.5vw;width:min(360px,calc(100vw - 40px));margin:0;padding:12px 38px 12px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 94%,#000);box-shadow:0 12px 30px #0005;backdrop-filter:blur(14px);text-align:left;font-size:12px}.media-help:before{content:'';position:absolute;top:-6px;right:13px;width:10px;height:10px;background:inherit;border-top:1px solid var(--line);border-left:1px solid var(--line);transform:rotate(45deg)}.media-help p{margin:0 0 9px;line-height:1.5}.media-help button{margin-right:8px;font-size:11px}.media-help-close{position:absolute;top:7px;right:7px;width:24px;height:24px;margin:0!important;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:18px!important;line-height:1}.media-help-close:hover{color:var(--text);background:#ffffff0d}.media-help-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.media-help-actions button{margin-right:4px}.media-help-instructions{padding-top:10px!important;margin-top:9px!important;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.6!important}@media(max-width:600px){.media-help{top:62px;right:20px;width:min(330px,calc(100vw - 24px))}.media-help:before{right:13px}}

/* Conversation is a full phone surface: messages scroll while the composer stays reachable. */
.conversation-drawer .message-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.conversation-drawer .message-meta time{color:var(--muted);font-size:10px;letter-spacing:0;white-space:nowrap}.conversation-drawer .message p{margin-top:6px}.conversation-drawer .message.user .message-meta time{color:#b6adb8}@media(max-width:600px){.conversation-drawer[open]{inset:0;width:100dvw;height:100dvh;max-width:none;max-height:none;margin:0;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));border-radius:0}.conversation-drawer .dialog-top{padding-bottom:12px}.conversation-drawer #messages{padding:12px 0}.conversation-drawer .message{font-size:14px;line-height:1.65;padding:12px;margin:9px 0}.conversation-drawer .message.user{margin-left:32px}.conversation-composer{padding-top:10px}.conversation-composer #chat{padding:9px 10px 9px 14px}.conversation-composer textarea{font-size:16px}.conversation-drawer .empty-conversation{padding:24px}}

/* The question mark reveals a compact, non-modal play tray; the companion stays visible and touchable. */
.tips-dialog{position:fixed;inset:clamp(130px,25svh,220px) max(18px,calc((100vw - 1050px)/2)) auto auto;z-index:12;width:clamp(210px,calc((100vw - 440px)/2 - 20px),300px);max-height:min(65dvh,360px);margin:0;padding:16px;border-radius:18px;box-shadow:0 16px 45px #0008;overflow:auto}
.tips-dialog .dialog-top h2{font:normal 21px/1.2 Georgia,serif;margin:0}
.tips-dialog .dialog-top .icon-button{width:30px;height:30px;flex:none;font-size:20px}
.tips-dialog .tips-intro{margin:8px 0 13px;font-size:11px;line-height:1.4}
.tips-dialog .companion-prompts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tips-dialog .companion-prompts button{min-height:46px;padding:9px 11px;font-size:13px;line-height:1.3;text-align:center}
.tips-dialog .companion-prompts button small{display:block;margin-top:2px;color:var(--muted);font-size:9px}
.tips-dialog:focus{outline:none}
@media(max-width:899px){.tips-dialog{position:fixed;inset:clamp(150px,53svh,calc(100dvh - 215px)) auto auto 50%;width:min(320px,calc(100vw - 24px));max-height:min(44dvh,220px);margin:0;transform:translateX(-50%)}.tips-dialog .companion-prompts{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The artwork floats while each cloud's full touch target stays still. */
.companion-tips{display:grid;place-items:center}.companion-tips .play-paw{width:23px;height:23px}.companion-tips .play-close{display:none;font-size:25px;line-height:1}.companion-tips[aria-expanded=true] .play-paw{display:none}.companion-tips[aria-expanded=true] .play-close{display:block}
.tips-dialog{width:318px;max-height:none;padding:8px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;filter:drop-shadow(0 8px 14px #0007)}
.tips-dialog .dialog-top{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tips-dialog .companion-prompts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
.tips-dialog .companion-prompts button{position:relative;min-height:52px;padding:0;border:0;background:transparent;color:var(--text);font-size:12px;line-height:1.2;text-align:center;outline-offset:2px}
.tips-dialog .companion-prompts button .cloud-face{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-height:52px;padding:8px 5px;border:0;background:transparent;animation:play-cloud-float 3.9s ease-in-out infinite}
.tips-dialog .companion-prompts button .cloud-face::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(145deg,#5a4268,#382b43);filter:drop-shadow(0 5px 8px #0006);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M22 53C11 53 4 46 4 37c0-8 6-14 14-15 1-9 9-15 19-14 6-6 17-6 25 0 10-3 20 1 25 9 11-2 20 5 22 14 8 2 10 11 4 17-3 4-8 6-15 6H22Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M22 53C11 53 4 46 4 37c0-8 6-14 14-15 1-9 9-15 19-14 6-6 17-6 25 0 10-3 20 1 25 9 11-2 20 5 22 14 8 2 10 11 4 17-3 4-8 6-15 6H22Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.tips-dialog .companion-prompts button:nth-child(2) .cloud-face{animation-delay:-1.2s}.tips-dialog .companion-prompts button:nth-child(3) .cloud-face{animation-delay:-2.6s}.tips-dialog .companion-prompts button:nth-child(4) .cloud-face{animation-delay:-2s}.tips-dialog .companion-prompts button:nth-child(5) .cloud-face{animation-delay:-.7s}.tips-dialog .companion-prompts button:nth-child(5) .cloud-face::before{background:linear-gradient(145deg,#79548b,#52345f)}.tips-dialog .companion-prompts button:nth-child(6) .cloud-face{animation-delay:-3.1s}
.tips-dialog .companion-prompts button i{font-style:normal;font-size:19px;line-height:1;color:color-mix(in srgb,var(--accent) 70%,white)}.tips-dialog .companion-prompts button .action-label{display:inline;margin:0;color:inherit;font-size:inherit}
.tips-dialog .companion-prompts button:hover .cloud-face::before,.tips-dialog .companion-prompts button:focus-visible .cloud-face::before{background:linear-gradient(145deg,#815b91,#543a62)}.tips-dialog .companion-prompts button:focus-visible{outline:2px solid var(--accent)}
.tips-dialog .tips-intro{margin:13px 0 0;text-align:center;color:var(--muted);font-size:11px;line-height:1.3}
@keyframes play-cloud-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media(max-width:899px){.tips-dialog{inset:clamp(150px,53svh,calc(100dvh - 215px)) auto auto 50%;width:min(330px,calc(100vw - 24px));max-height:none;padding:8px;overflow:visible}.tips-dialog .companion-prompts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.tips-dialog .companion-prompts .cloud-face{animation:none}}

.live-captions{margin:0 auto 18px;max-width:42ch;min-height:3em;text-wrap:balance;overflow-wrap:anywhere;font-size:15px;line-height:1.5;text-align:center;color:var(--text)}
#pause-microphone .microphone-slash,#camera-toggle .camera-slash{display:none}
#pause-microphone[aria-pressed=true],#camera-toggle[aria-pressed=false]{color:var(--accent);background:#ffffff0b}
#pause-microphone[aria-pressed=true] .microphone-slash,#camera-toggle[aria-pressed=false] .camera-slash{display:block}

.media-help[data-mode=connection]{background:#352329;border-color:#a65d6b;color:#f5dfe4;padding:16px 38px 16px 16px;box-shadow:0 12px 30px #0005}
.media-help[data-mode=connection]:before{display:none}
.media-help-error-title{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:14px;color:#ffc0cb}
.media-help-error-title svg{width:20px;height:20px;flex-shrink:0}
.media-help[data-mode=connection] #media-help-retry{background:#f0b3c0;color:#351d25;border:1px solid #f0b3c0;border-radius:8px;padding:7px 12px}
.media-help[data-mode=connection] #media-help-dismiss,.media-help[data-mode=connection] .media-help-close{color:#e3bcc5}
@media(max-width:420px){body:not(.website-embedded)>header{height:auto;min-height:70px;flex-wrap:wrap;gap:4px;padding-block:8px}body:not(.website-embedded) .header-actions{margin-left:auto;gap:4px}}

/* Debug-only controls share the existing stage and companion runtime. */
.actions-debug{position:fixed;z-index:30;right:16px;top:72px;bottom:16px;width:320px;overflow:auto;padding:22px;background:var(--panel,#211e25);border:1px solid #ffffff20;border-radius:18px;box-shadow:0 20px 70px #0004;text-align:left}
.actions-debug h2{margin:5px 0 0;font-size:24px}.actions-debug h3{font-size:12px;font-weight:500;margin:22px 0 10px}.actions-debug .hint{font-size:11px;line-height:1.65}.actions-debug label{display:block;font-size:12px;color:var(--muted);margin:16px 0 10px}.actions-debug select{display:block;width:100%;margin-top:8px;padding:9px;background:var(--bg);color:var(--text);border:1px solid #ffffff25;border-radius:8px}.actions-debug input{display:block;width:100%;margin-top:12px;accent-color:var(--accent)}.actions-debug .companion-prompts{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:8px 0;gap:6px}.actions-debug .companion-prompts button{min-height:34px;text-align:center;font-size:11px;padding:8px 10px}.actions-debug [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.actions-debug button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.action-debug-open>main{margin-right:350px}.action-debug-open .header-actions{opacity:.5}
@media(max-width:700px){body.action-debug-open>main{margin-right:0;padding-bottom:45dvh}.actions-debug{top:auto;bottom:0;right:0;width:100%;height:43dvh;border-radius:18px 18px 0 0}.action-debug-open .presence{min-height:0}.action-debug-open #avatar{width:min(230px,60vw);height:min(230px,60vw)}}

/* Generated appendages retain their motion when promoted into the shared catalog. */
.companion .part-sway,.companion .part-flutter{transform-box:fill-box;transform-origin:center 85%;animation:part-sway 3.4s ease-in-out infinite alternate}
.companion .part-flutter{animation-duration:1.6s}
@keyframes part-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.companion .part-sway,.companion .part-flutter{animation:none}}

/* Shared v2 action staging: ground stays fixed while the artwork moves. */
.companion-action-shadow{opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.companion[data-action] .companion-action-shadow{opacity:.22}
.companion[data-action] .body{animation:none!important;transform:none}
.companion[data-action=hop] .companion-action-shadow{animation:companion-hop-shadow var(--action-duration,1100ms) ease-in-out both}
.companion[data-action=flip] .companion-action-shadow{animation:companion-flip-shadow var(--action-duration,1600ms) linear both}
.companion[data-action=play] .companion-action-shadow{animation:companion-play-shadow var(--action-duration,2000ms) ease-in-out both}
@keyframes companion-hop-shadow{0%,100%{opacity:0;transform:scaleX(1)}16%,78%{opacity:.28;transform:scaleX(1.08)}42%,54%{opacity:.1;transform:scaleX(.58)}90%{opacity:.22;transform:scaleX(.95)}}
@keyframes companion-flip-shadow{0%,100%{opacity:0;transform:scaleX(1)}12%,88%{opacity:.28;transform:scaleX(1.08)}22%,78%{opacity:.17;transform:scaleX(.8)}36%,64%{opacity:.1;transform:scaleX(.6)}50%{opacity:.08;transform:scaleX(.5)}}
@keyframes companion-play-shadow{0%,100%{opacity:0;transform:scaleX(1)}20%,62%{opacity:.1;transform:scaleX(.7)}40%,82%{opacity:.26;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
.companion[data-action] .companion-action-shadow{animation:none!important;opacity:.22}
/* Requested actions still complete normally, with restrained movement. */
@keyframes companion-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes companion-flip{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes companion-stretch{0%,100%{transform:scale(1)}50%{transform:scale(1,1.01)}}
@keyframes companion-shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-1px)}60%{transform:translateX(1px)}}
@keyframes companion-play{0%,100%{transform:translateY(0)}35%,70%{transform:translateY(-2px)}}
}

/* Imagining is a transition shared by authored and generated companions. */
.companion[data-transition=imagining] .body{animation:companion-imagining 4.5s ease-in-out infinite}.companion[data-transition=imagining] .eye-gaze{transform:translate(3px,-4px)!important}.companion[data-transition=imagining] .companion-state-label{top:0;padding:12px 20px;letter-spacing:0;border-radius:22px;background:#65586de6;color:#fff0ff}.companion[data-transition=imagining] .companion-state-label:before,.companion[data-transition=imagining] .companion-state-label:after{content:'';position:absolute;background:#65586de6;border-radius:50%;left:25%;bottom:-12px;width:10px;height:10px}.companion[data-transition=imagining] .companion-state-label:after{left:20%;bottom:-23px;width:6px;height:6px}
@keyframes companion-imagining{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}@keyframes thought-breathe{0%,100%{opacity:.35}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){.companion[data-transition=imagining] .body{animation:none!important}}

/* Attention is animated locally in every renderer, including generated
   creatures. It never requests a trick or changes conversation state. */
.companion[data-state=listening] .body {
  animation: companion-attentive calc(var(--listen-seconds, 2s) * 2.4) ease-in-out infinite;
}
@keyframes companion-attentive {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2px) rotate(clamp(-1.5deg, var(--listen-tilt, -1deg), 1.5deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .companion[data-state=listening] .body { animation: none !important; }
}

/* Startup is conveyed by the creature; diagnostics live in Debug. */
.companion[data-transition=waking] .companion-state-label,
.companion[data-transition=preparing] .companion-state-label { display: none; }

/* Awake curiosity stays around the creature's spot, outside requested motions. */
.companion[data-state=idle]:not([data-action]):not([data-transition]):not([data-petted=true]) .body {
  animation: companion-idle-curious calc(var(--float-seconds, 5s) * 2.4) ease-in-out infinite;
}
@keyframes companion-idle-curious {
  0%, 38%, 52%, 100% { transform: translate(0, 0) rotate(0); }
  13%, 25% { transform: translate(-7px, calc(var(--float-height, 10px) * -.35)) rotate(-1.6deg); }
  65%, 78% { transform: translate(8px, calc(var(--float-height, 10px) * -.6)) rotate(1.8deg); }
  89% { transform: translate(2px, -2px) rotate(.5deg); }
}
.companion[data-state=idle]:not([data-action]):not([data-transition]):not([data-petted=true]) .eye-attention {
  animation: companion-look-around 12s ease-in-out infinite;
}
@keyframes companion-look-around {
  0%, 38%, 52%, 100% { transform: translate(0, 0); }
  13%, 25% { transform: translate(-5px, -1.5px); }
  65%, 78% { transform: translate(5px, -2.5px); }
  89% { transform: translate(1px, 1px); }
}
@media (prefers-reduced-motion: reduce) {
  .companion[data-state=idle] .body, .companion .eye-attention { animation: none !important; }
}