@import url('./toast.css');
@import url('./outcome-card.css');
.simulation,.preview-footer,.interaction-status{display:none!important}
.companion-toolbar{position:fixed;inset:0 0 auto;z-index:80;min-height:44px;display:flex;align-items:center;gap:12px;padding:4px max(16px,env(safe-area-inset-right));background:#f8f4eeef;color:#26364a;border-bottom:1px solid #26364a14;backdrop-filter:blur(16px);font:12px 'Varela Round',sans-serif}
.companion-brand{font-weight:bold}.companion-toolbar a{margin-left:auto;color:#935073;text-decoration:none;min-height:44px;display:flex;align-items:center;white-space:nowrap}.companion-save-status{flex:1}.companion-save-status[data-error=true]{color:#9a263e}.companion-retry{display:none;min-height:44px;border:0;background:none;color:#9a263e}.companion-toolbar:has([data-error=true]) .companion-retry{display:block}
.preview-page-stage{top:53px}.preview-page-frame{height:calc(100dvh - 53px)}
.preview-chat-frame{top:53px;height:calc(100dvh - 53px)}
.embedded-preview{--companion-offset:53px}.embedded-preview.has-bottom-navigation{padding-bottom:0}.embedded-preview.home-page #surface{min-height:100dvh}
.companion-empty{padding-top:56px;max-width:560px;margin:0 auto;text-align:center;color:var(--text-primary,#26364a)}
.companion-empty h1{font-size:30px}.companion-empty p{line-height:1.7;opacity:.75}.companion-empty img{width:80px;height:80px;object-fit:contain;margin-bottom:24px}.companion-empty a{color:#9a5078;display:inline-flex;align-items:center;min-height:44px}
.companion-home-note{font-size:13px;background:#101827a8;border-radius:20px;padding:12px 18px;align-self:center;max-width:360px;text-align:center;pointer-events:auto;line-height:1.5}
.companion-chat-notice{font-size:13px;line-height:1.6;text-align:center;padding:16px 24px;color:#8b496d;background:#faf6f8;margin:0}.chat-add:disabled{opacity:.3;cursor:default}
.profile-unavailable{font-size:12px;color:#716d73}.profile-switch:disabled{opacity:.35;cursor:default}
.design-controls{position:fixed;right:16px;top:66px;z-index:75;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 32px)}.design-controls select{font:12px 'Varela Round',sans-serif;background:#fffdf9eF;color:#26364a;border:1px solid #e7dce4;border-radius:18px;padding:8px;min-height:44px;max-width:155px}
.home-page .companion-home-note{color:#fff}.voice-overlay .voice-status{display:block}.companion-storage-error{padding:80px 24px;font-family:sans-serif;text-align:center}.companion-storage-error a{display:inline-block;padding:16px;color:#935073}
@media(max-width:500px){.companion-toolbar{gap:8px;font-size:11px}.companion-brand{display:none}.companion-save-status{max-width:60%}.design-controls{top:64px}.design-controls select{max-width:136px}}
.preview-shell:not(.design-mode) .preview-page-stage{top:0}
.preview-shell:not(.design-mode) .preview-page-frame{height:100%}
.preview-shell:not(.design-mode) .preview-chat-frame{height:100dvh}
.preview-shell:not(.design-mode) .preview-chat-frame{top:0}
.connection-marker{display:inline-grid;place-items:center;vertical-align:middle;flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;color:#b09aaa;font:22px 'Varela Round',sans-serif;border-radius:50%;cursor:pointer}
.connection-marker:hover{background:#b09aaa12}
.empty-ornament{display:grid;place-items:center;margin:40px auto 24px;width:88px;height:88px;border-radius:32px;background:#ede6e840;color:#b49da9;font-size:36px;box-shadow:0 0 0 1px #d4c4cf30}
.companion-empty h2{font-size:24px;font-weight:400}.companion-empty p{font-size:15px;margin-top:12px;color:#92828b;opacity:1}.companion-empty{padding:24px}
.profile-skill-empty{border:1px dashed #c9bdc6!important;background:transparent!important;color:#a3939e!important;font-weight:400!important}.profile-section h2 .connection-marker{width:36px;height:36px;font-size:18px;margin-left:4px}.profile-switch[data-unavailable=true]{opacity:.38;cursor:pointer}
.companion-chat-notice{background:none;color:#b09aaa;padding:12px}.voice-status{font-size:12px!important;opacity:.65}
/* Safe-area belongs to the outer shell, not each nested page frame. */
.preview-shell:not(.design-mode):not([data-scene='brief']) .preview-page-stage{top:env(safe-area-inset-top,0px)}

/* One top safe area is reserved by the page stage; no per-page offset. */