:root { color-scheme:light; background-color:#f7f9ff; --ink:#17233f; --muted:#6f7890; --line:rgba(62,111,187,.13); --violet:#6f7eee; --teal:#43a5f7; --brand-blue:#2f9df4; --brand-lilac:#ad91fa; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:radial-gradient(circle at 7% 2%,rgba(47,157,244,.13),transparent 30%),radial-gradient(circle at 92% 4%,rgba(173,145,250,.14),transparent 31%),linear-gradient(180deg,#fbfdff,#f5f7ff); color:var(--ink); font:16px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { position:relative; overflow:hidden; }
.create-page { overflow-x:hidden; overflow-y:auto; }
body::before,body::after { content:""; position:fixed; z-index:0; width:112vw; height:68vw; min-height:470px; border:1.5px solid rgba(198,224,255,.72); border-radius:50%; box-shadow:0 0 22px rgba(255,255,255,.68),0 0 64px rgba(94,158,255,.2),inset 0 0 34px rgba(255,255,255,.2); pointer-events:none; }
body::before { left:-57vw; bottom:-27vw; transform:rotate(17deg); }
body::after { right:-59vw; bottom:-21vw; transform:rotate(-19deg); }
button,input,textarea { font:inherit; }
.create-shell,.avatar-shell { width:min(1240px,calc(100% - 36px)); margin:auto; min-height:100vh; }
.create-shell,.avatar-shell { position:relative; z-index:1; }
.avatar-shell { height:100svh; min-height:620px; display:grid; grid-template-rows:72px minmax(0,1fr) 46px; }
.mvp-header { height:84px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:14px; }
.avatar-shell .mvp-header { height:72px; }
.mvp-header a { color:#26194d; text-decoration:none; }
.brand-lockup { display:flex; min-width:0; align-items:center; gap:22px; }
.brand-logo { position:relative; display:block; flex:0 0 auto; width:148px; height:44px; }
.brand-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-divider { width:1px; height:43px; flex:0 0 auto; background:linear-gradient(180deg,rgba(60,116,200,.08),rgba(60,116,200,.42),rgba(60,116,200,.08)); }
.brand-tagline { color:rgba(57,79,122,.68); font-size:clamp(15px,1.55vw,21px); font-weight:450; line-height:1.15; letter-spacing:-.025em; white-space:nowrap; }
.create-avatar-link { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 25px; border:1px solid rgba(255,255,255,.28); border-radius:16px; color:#fff!important; background:linear-gradient(125deg,#2f9df4 0%,#5e91fa 52%,#9c7bf4 100%); box-shadow:0 12px 28px rgba(62,120,235,.25),inset 0 1px 1px rgba(255,255,255,.25); font-size:15px; font-weight:750; line-height:1; white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.create-avatar-link:hover { transform:translateY(-1px); filter:saturate(1.08); box-shadow:0 16px 34px rgba(62,120,235,.32),inset 0 1px 1px rgba(255,255,255,.3); }
.create-avatar-link:focus-visible { outline:3px solid rgba(91,143,247,.4); outline-offset:3px; }
.header-actions { display:flex; align-items:center; gap:12px; }
.auth-slot { width:46px; min-width:46px; height:46px; display:flex; align-items:center; justify-content:center; }
.auth-slot[data-auth-state="loading"] { visibility:hidden; }
.auth-profile-link { overflow:hidden; flex:0 0 auto; color:#6682b5!important; text-decoration:none; }
.auth-profile-link img { display:block; width:100%; height:100%; object-fit:cover; background:transparent; }
.auth-profile-link:hover { color:#315caa!important; border-color:rgba(74,139,235,.28); background:#fff; }
.create-card { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start; padding:clamp(28px,5vw,72px); border:1px solid var(--line); border-radius:32px; background:rgba(255,255,255,.83); box-shadow:0 32px 90px rgba(45,27,86,.10); }
.create-copy { position:sticky; top:30px; }
.kicker { margin:0 0 10px; color:var(--violet); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:0 0 16px; font-size:clamp(34px,4vw,56px); line-height:1.02; letter-spacing:-.055em; }
.create-copy>p:last-child,#avatarPersona { color:var(--muted); }
form { display:grid; gap:20px; }
label,.voice-field { display:grid; gap:8px; font-weight:700; }
.file-field { display:grid; gap:8px; font-weight:700; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:15px; background:#fff; color:var(--ink); padding:14px 15px; outline:none; resize:vertical; }
input:focus,textarea:focus { border-color:rgba(47,157,244,.58); box-shadow:0 0 0 4px rgba(130,143,248,.1); }
small,.form-status,.recognition-note { color:var(--muted); font-size:13px; font-weight:400; }
.reference-script { margin:0; padding:13px 14px; color:var(--muted); border:1px solid transparent; border-radius:14px; background:rgba(255,255,255,.42); font-size:14px; font-weight:500; transition:color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease; }
.reference-script>span { display:block; margin-bottom:4px; color:var(--violet); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.reference-script.is-recording { color:var(--ink); border-color:rgba(111,126,238,.62); background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,242,255,.98)); box-shadow:0 0 0 4px rgba(111,126,238,.13),0 14px 34px rgba(62,91,184,.16); transform:translateY(-2px); }
.reference-script.is-recording>span::before { content:"●"; margin-right:6px; color:#e74b64; }
.reference-script:focus { outline:none; }
button,.secondary { border:0; border-radius:15px; padding:14px 18px; cursor:pointer; font-weight:750; }
.primary,.mic-button,.message-form button { color:#fff; background:linear-gradient(135deg,var(--brand-blue),#6b9af8 52%,var(--brand-lilac)); box-shadow:0 14px 34px rgba(75,132,235,.22); }
button:disabled { opacity:.48; cursor:not-allowed; }
.voice-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.photo-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.secondary { display:block; color:#41394f; background:#f3f1f9; border:1px solid var(--line); text-align:center; }
.file-button input { display:none; }
.optional-section { padding:18px; border:1px solid rgba(74,139,235,.12); border-radius:20px; background:linear-gradient(145deg,rgba(47,157,244,.045),rgba(173,145,250,.055)); }
.creation-visibility { display:grid; gap:9px; margin:0; padding:15px; border:1px solid rgba(74,139,235,.12); border-radius:20px; background:linear-gradient(145deg,rgba(47,157,244,.045),rgba(173,145,250,.055)); }
.creation-visibility[hidden] { display:none; }
.creation-visibility legend { padding:0 5px; color:var(--ink); font-size:14px; font-weight:780; }
.creation-visibility label { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:14px; }
.optional-section em { margin-left:7px; color:#81798e; font-size:12px; font-style:normal; font-weight:650; }
.action-button { position:relative; overflow:hidden; min-height:52px; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.action-button:hover { transform:translateY(-2px); border-color:rgba(74,139,235,.3); background:#fff; box-shadow:0 12px 28px rgba(49,91,170,.1); }
.action-button>span { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:6px; border-radius:8px; color:var(--violet); background:rgba(111,55,255,.10); font-size:13px; }
.photo-picker { display:flex; align-items:center; justify-content:center; min-height:56px; border-style:dashed; background:linear-gradient(135deg,rgba(47,157,244,.065),rgba(173,145,250,.065)); }
.camera-capture { display:grid; gap:10px; padding:10px; border:1px solid var(--line); border-radius:18px; background:rgba(15,20,35,.92); }
.camera-capture[hidden] { display:none; }
.camera-capture video { width:100%; max-height:360px; object-fit:cover; border-radius:12px; transform:scaleX(-1); }
.camera-capture>div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.photo-selection { display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; align-items:center; padding:10px; border:1px solid rgba(42,167,111,.28); border-radius:16px; background:rgba(42,167,111,.08); }
.photo-selection[hidden] { display:none; }
.photo-selection img { width:72px; height:72px; object-fit:cover; border-radius:12px; background:var(--surface); }
.photo-selection div { min-width:0; display:grid; gap:4px; }
.photo-selection strong { color:#168957; }
.photo-selection small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.create-submit { display:flex; align-items:center; justify-content:space-between; min-height:60px; padding:16px 20px 16px 24px; font-size:17px; transition:transform .2s ease,box-shadow .25s ease,filter .25s ease; }
.create-submit b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18); font-size:21px; }
.create-submit:hover { transform:translateY(-2px); filter:saturate(1.08); box-shadow:0 20px 42px rgba(111,55,255,.29); }
.conversation-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.62fr); gap:24px; min-height:0; padding-bottom:0; }
.avatar-stage { position:relative; min-height:0; height:100%; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 28px 80px rgba(54,96,177,.1); }
.renderer-host { position:absolute; inset:0; }
.renderer-host canvas { width:100%!important; height:100%!important; }
.avatar-switcher { position:absolute; z-index:6; inset:0; pointer-events:none; }
.avatar-switcher[hidden] { display:none; }
.avatar-switcher button { position:absolute; top:50%; width:clamp(52px,5.5vw,82px); height:46%; min-height:160px; padding:0; opacity:.25; transform:translateY(-50%); border:0; border-radius:0; color:#6b86aa; background:transparent; box-shadow:none; pointer-events:auto; -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent); transition:opacity .2s ease,background .2s ease; }
.avatar-switcher button:first-child { left:0; background:linear-gradient(90deg,rgba(83,139,220,.026),transparent); }
.avatar-switcher button:last-child { right:0; background:linear-gradient(-90deg,rgba(83,139,220,.026),transparent); }
.avatar-switcher button:hover,.avatar-switcher button:focus-visible,.avatar-switcher button:active { opacity:.58; outline:none; }
.avatar-switcher button:first-child:hover,.avatar-switcher button:first-child:focus-visible,.avatar-switcher button:first-child:active { background:linear-gradient(90deg,rgba(83,139,220,.065),transparent); }
.avatar-switcher button:last-child:hover,.avatar-switcher button:last-child:focus-visible,.avatar-switcher button:last-child:active { background:linear-gradient(-90deg,rgba(83,139,220,.065),transparent); }
.avatar-switcher svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; opacity:.82; filter:drop-shadow(0 1px 5px rgba(56,101,174,.14)); transition:transform .2s ease,opacity .2s ease; }
.avatar-switcher button:first-child svg { transform:translateX(-1px); }
.avatar-switcher button:last-child svg { transform:translateX(1px); }
.avatar-switcher button:first-child:hover svg,.avatar-switcher button:first-child:focus-visible svg,.avatar-switcher button:first-child:active svg { transform:translateX(-3px); opacity:1; }
.avatar-switcher button:last-child:hover svg,.avatar-switcher button:last-child:focus-visible svg,.avatar-switcher button:last-child:active svg { transform:translateX(3px); opacity:1; }
.conversation-started .avatar-switcher { visibility:hidden; opacity:0; }
.avatar-stage[data-avatar-exit] .renderer-host,.avatar-stage[data-avatar-exit] .avatar-identity,.avatar-stage[data-avatar-exit] .avatar-dialogue { opacity:0; transition:opacity .14s ease,transform .14s ease; }
.avatar-stage[data-avatar-exit="next"] .renderer-host,.avatar-stage[data-avatar-exit="next"] .avatar-identity,.avatar-stage[data-avatar-exit="next"] .avatar-dialogue { transform:translateX(-18px); }
.avatar-stage[data-avatar-exit="previous"] .renderer-host,.avatar-stage[data-avatar-exit="previous"] .avatar-identity,.avatar-stage[data-avatar-exit="previous"] .avatar-dialogue { transform:translateX(18px); }
.avatar-stage.is-avatar-swipe-dragging .renderer-host,.avatar-stage.is-avatar-swipe-dragging .avatar-identity,.avatar-stage.is-avatar-swipe-dragging .avatar-dialogue { opacity:var(--avatar-swipe-opacity,1); transform:translate3d(var(--avatar-swipe-x,0),0,0) scale(calc(1 - var(--avatar-swipe-progress,0) * .018)); transition:none; will-change:transform,opacity; }
.avatar-stage.is-avatar-swipe-returning .renderer-host,.avatar-stage.is-avatar-swipe-returning .avatar-identity,.avatar-stage.is-avatar-swipe-returning .avatar-dialogue { opacity:1; transform:translate3d(0,0,0) scale(1); transition:transform .22s cubic-bezier(.22,.72,.26,1),opacity .18s ease; will-change:transform,opacity; }
.avatar-stage.is-avatar-swipe-committing .renderer-host,.avatar-stage.is-avatar-swipe-committing .avatar-identity,.avatar-stage.is-avatar-swipe-committing .avatar-dialogue { opacity:0; transform:translate3d(var(--avatar-swipe-commit-x),0,0) scale(.98); transition:transform .15s cubic-bezier(.4,0,1,1),opacity .15s ease; will-change:transform,opacity; }
.avatar-loading { position:absolute; inset:0; display:grid; place-content:center; color:var(--muted); background:#fff; }
.avatar-loading[hidden] { display:none; }
.avatar-dialogue { position:absolute; z-index:4; left:clamp(28px,4.5vw,72px); bottom:96px; display:grid; width:min(30%,420px); height:56px; min-height:56px; place-items:center start; overflow:hidden; opacity:1; transition:opacity .18s ease; pointer-events:none; }
.avatar-dialogue[data-state="user-speaking"] { right:clamp(28px,4.5vw,72px); left:auto; }
.avatar-dialogue[data-state="idle"],.avatar-dialogue[data-subtitles-enabled="false"],.avatar-dialogue.is-clearing { opacity:0; }
.subtitle-viewport { display:grid; width:100%; height:100%; place-items:center start; padding:4px 0; background:radial-gradient(ellipse at left center,rgba(255,255,255,.15),rgba(255,255,255,.04) 56%,transparent 80%); }
.subtitle-text { display:-webkit-box; width:100%; height:2.8em; overflow:hidden; color:rgba(21,23,27,.82); font-size:clamp(17px,1.3vw,18px); font-weight:470; line-height:1.4; text-align:left; text-wrap:pretty; text-shadow:0 1px 2px rgba(255,255,255,.92),0 0 8px rgba(255,255,255,.68); -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.subtitle-text[data-speaker="user"] { color:rgba(33,39,49,.6); font-weight:420; text-align:right; }
.subtitle-text[data-speaker="system"] { color:rgba(105,38,55,.76); font-size:clamp(15px,1.15vw,16px); font-weight:480; }
.chat-panel { display:flex; flex-direction:column; min-height:0; padding:24px 4px 4px; }
.chat-panel h1 { font-size:42px; }
.intro-prompt { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin:12px 0 2px; padding:13px; border:1px solid rgba(111,55,255,.18); border-radius:18px; background:linear-gradient(135deg,rgba(111,55,255,.08),rgba(0,191,174,.08)); box-shadow:0 14px 38px rgba(45,27,86,.08); }
.intro-prompt[hidden] { display:none; }
.intro-prompt strong { display:block; font-size:14px; }
.intro-prompt p { margin:2px 0 0; color:var(--muted); font-size:12px; line-height:1.35; }
.intro-prompt button { padding:10px 13px; color:#fff; background:linear-gradient(135deg,var(--brand-blue),var(--brand-lilac)); box-shadow:0 8px 22px rgba(74,139,235,.2); }
.intro-spark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#6f37ff; background:#fff; box-shadow:0 6px 18px rgba(111,55,255,.14); animation:introSpark 2.6s ease-in-out infinite; }
.conversation-controls { display:block; margin-top:auto; }
.mic-button { position:relative; display:flex; align-items:center; justify-content:center; gap:11px; width:100%; min-height:54px; overflow:hidden; font-size:16px; transition:transform .2s ease,box-shadow .25s ease,filter .25s ease; }
.mic-button:hover { transform:translateY(-1px); }
.talk-orb { position:relative; width:20px; height:20px; flex:0 0 20px; border-radius:50%; background:rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.talk-orb i { position:absolute; inset:6px; border-radius:50%; background:#fff; }
.voice-bars { display:none; height:20px; align-items:center; gap:3px; }
.voice-bars i { width:3px; height:6px; border-radius:9px; background:#fff; transform-origin:center; }
.mic-button.active { background:linear-gradient(115deg,#2f9df4,#758ff6 48%,#ad91fa); background-size:180% 180%; box-shadow:0 18px 42px rgba(74,139,235,.28),0 0 0 5px rgba(126,143,246,.09); animation:conversationGlow 5s ease infinite; }
.mic-button.active .talk-orb::before,.mic-button.active .talk-orb::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.65); border-radius:50%; animation:talkPulse 2s ease-out infinite; }
.mic-button.active .talk-orb::after { animation-delay:1s; }
.mic-button.active .voice-bars { display:flex; }
.mic-button.active .voice-bars i { animation:voiceBar 1s ease-in-out infinite; }
.mic-button.active .voice-bars i:nth-child(2) { animation-delay:-.72s; }
.mic-button.active .voice-bars i:nth-child(3) { animation-delay:-.44s; }
.mic-button.active .voice-bars i:nth-child(4) { animation-delay:-.18s; }
.end-conversation { padding:12px 16px; color:#665f72; border:1px solid rgba(23,19,38,.12); background:rgba(255,255,255,.84); box-shadow:0 10px 28px rgba(45,27,86,.08); white-space:nowrap; }
.end-conversation:hover { color:#a33d54; border-color:rgba(163,61,84,.24); background:#fff7f9; }
.end-conversation span { margin-right:5px; color:#d65370; font-size:10px; }
@keyframes conversationGlow { 0%,100%{background-position:0 50%} 50%{background-position:100% 50%} }
@keyframes talkPulse { 0%{transform:scale(.72);opacity:.8} 100%{transform:scale(2.2);opacity:0} }
@keyframes voiceBar { 0%,100%{height:5px;opacity:.65} 50%{height:18px;opacity:1} }
@keyframes introSpark { 0%,100%{transform:rotate(-8deg) scale(.9)} 50%{transform:rotate(8deg) scale(1.12)} }
@media(prefers-reduced-motion:reduce){.mic-button.active,.mic-button.active .talk-orb::before,.mic-button.active .talk-orb::after,.mic-button.active .voice-bars i,.intro-spark{animation:none}}
.recognition-note { min-height:38px; margin:8px 3px; }
.message-form { display:grid; grid-template-columns:1fr 48px; gap:8px; }
.message-form button { padding:0; font-size:24px; }
@media(max-width:800px){.create-card{grid-template-columns:1fr;gap:28px;padding:24px}.create-copy{position:static}.mvp-header>span{display:none}.avatar-shell{width:min(100% - 20px,620px);min-height:560px;grid-template-rows:64px minmax(0,1fr) 42px}.avatar-shell .mvp-header{height:64px}.brand-logo{width:126px;height:38px}.conversation-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px}.avatar-stage{min-height:0}.chat-panel{min-height:0;padding:4px 2px 0}.chat-panel h1{margin-bottom:8px;font-size:32px}.chat-panel .kicker{margin-bottom:2px}.recognition-note{min-height:0;margin:5px 3px;font-size:11px;line-height:1.25}.voice-actions,.photo-actions{grid-template-columns:1fr}.conversation-controls{grid-template-columns:1fr}.end-conversation{min-height:46px}.intro-prompt{grid-template-columns:auto 1fr}.intro-prompt button{grid-column:1/-1;width:100%}}

.avatar-delete-footer { display:flex; align-items:center; justify-content:flex-end; }

.catalog-back { display:inline-block; margin:0 0 20px; color:var(--violet); font-size:16px; font-weight:700; text-underline-offset:4px; }

/* Public conversation — glass interface */
.avatar-shell { width:min(1480px,calc(100% - 64px)); min-height:700px; grid-template-rows:90px minmax(0,1fr) 72px; }
.avatar-shell .mvp-header { height:90px; padding:0 2px; }
.avatar-shell .brand-logo { width:164px; height:50px; }
.header-actions { display:flex; align-items:center; gap:12px; }
.round-action,.new-conversation,.sound-button,.hangup-button { display:grid; place-items:center; padding:0; color:#6682b5; background:rgba(255,255,255,.48); border:1px solid rgba(255,255,255,.7); box-shadow:0 9px 28px rgba(80,111,180,.09),inset 0 0 18px rgba(255,255,255,.7); }
.round-action { width:46px; height:46px; border-radius:50%; }
.round-action svg,.new-conversation svg,.sound-button svg,.hangup-button svg,.status-footer svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.theme-icon-sun { display:none; }
.theme-night .theme-icon-moon { display:none; }
.theme-night .theme-icon-sun { display:block; }
.new-conversation { display:flex; width:auto; height:46px; gap:22px; padding:0 18px 0 24px; border-radius:24px; color:#244478; font-weight:500; }
.new-conversation svg { width:20px; }
.conversation-layout { position:relative; display:block; min-height:0; }
.avatar-stage { height:100%; border-color:rgba(255,255,255,.82); border-radius:44px; background:radial-gradient(circle at 52% 48%,rgba(255,255,255,.92),rgba(235,246,255,.68) 50%,rgba(231,232,255,.55)); box-shadow:0 28px 90px rgba(76,109,184,.13),inset 0 0 60px rgba(255,255,255,.6); }
.favorite-action { position:absolute; z-index:7; top:14px; right:18px; }
.favorite-action[hidden] { display:none; }
.avatar-stage::before,.avatar-stage::after { content:""; position:absolute; z-index:1; width:88%; aspect-ratio:1; border:1.5px solid rgba(188,218,255,.68); border-radius:50%; box-shadow:0 0 22px rgba(255,255,255,.64),0 0 55px rgba(95,154,255,.18),inset 0 0 28px rgba(255,255,255,.18); pointer-events:none; }
.avatar-stage::before { left:-37%; top:34%; transform:rotate(10deg); }
.avatar-stage::after { right:-39%; top:24%; transform:rotate(-12deg); }
.avatar-identity { position:absolute; z-index:3; left:60px; top:48px; pointer-events:none; }
.avatar-identity .kicker { margin-bottom:5px; color:#31558c; letter-spacing:.25em; font-size:12px; }
.avatar-name-row { display:flex; align-items:center; gap:10px; }
.avatar-identity h1 { margin:0; color:#061947; background:linear-gradient(112deg,#06183f 0%,#164f9e 58%,#7166db 100%); -webkit-background-clip:text; background-clip:text; font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",Inter,ui-sans-serif,sans-serif; font-size:47px; font-weight:720; line-height:.98; letter-spacing:-.055em; text-shadow:0 8px 25px rgba(53,102,183,.12); -webkit-text-fill-color:transparent; }
.official-avatar-check { position:relative; display:grid; flex:0 0 auto; width:25px; height:25px; place-items:center; color:#fff; cursor:help; pointer-events:auto; outline:none; }
.official-avatar-check[hidden] { display:none; }
.official-avatar-check>svg { width:25px; height:25px; overflow:visible; fill:rgba(111,126,238,.2); stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 2px rgba(47,157,244,.7)) drop-shadow(0 2px 5px rgba(122,103,232,.38)) drop-shadow(0 0 5px rgba(173,145,250,.28)); }
.official-avatar-check>svg circle { stroke:#8295f6; stroke-width:1.7; }
.official-avatar-check>svg path { fill:none; stroke:#fff; stroke-width:2.8; }
.official-avatar-tooltip { position:absolute; z-index:12; top:calc(100% + 11px); left:50%; display:grid; width:min(330px,calc(100vw - 48px)); gap:7px; padding:15px 17px; visibility:hidden; opacity:0; transform:translate(-50%,-4px); border:1px solid rgba(255,255,255,.8); border-radius:16px; color:#3b5075; background:rgba(255,255,255,.96); box-shadow:0 18px 48px rgba(40,72,135,.2); font-size:12px; font-weight:450; line-height:1.4; letter-spacing:0; text-align:left; transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s; backdrop-filter:blur(18px); }
.official-avatar-tooltip strong { color:#15396f; font-size:13px; }
.official-avatar-check:hover .official-avatar-tooltip,.official-avatar-check:focus-visible .official-avatar-tooltip { visibility:visible; opacity:1; transform:translate(-50%,0); transition-delay:0s; }
.chat-panel { position:absolute; z-index:4; inset:0; padding:0; pointer-events:none; }
.chat-panel>* { pointer-events:auto; }
.chat-panel>.intro-prompt { position:absolute; left:50%; bottom:112px; width:min(620px,calc(100% - 40px)); margin:0; transform:translateX(-50%); }
.mobile-conversation-dock { display:contents; }
.mobile-conversation-dock>* { pointer-events:auto; }
.conversation-controls { position:absolute; left:50%; bottom:-34px; display:grid; grid-template-columns:52px 86px 52px; align-items:center; gap:12px; padding:7px 16px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.72); border-radius:42px; background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(232,243,255,.34) 52%,rgba(235,229,255,.38)); box-shadow:0 14px 32px rgba(72,103,178,.13),inset 0 0 24px rgba(255,255,255,.72); backdrop-filter:blur(24px) saturate(1.2); }
.start-conversation-button { position:absolute; z-index:5; left:50%; bottom:12px; min-width:220px; min-height:58px; padding:0 30px; visibility:hidden; opacity:0; pointer-events:none; transform:translate(-50%,8px) scale(.97); border:1px solid rgba(255,255,255,.8); border-radius:999px; color:#fff; background:linear-gradient(120deg,#2fb8f4,#5965f5 55%,#9479ef); box-shadow:0 16px 38px rgba(64,111,235,.3),inset 0 1px 1px rgba(255,255,255,.4); font-size:17px; font-weight:700; transition:opacity .5s ease,transform .65s cubic-bezier(.22,.8,.3,1),visibility 0s linear .65s; }
.avatar-secondary-actions { display:flex; justify-content:center; min-height:44px; margin:2px 0 12px; }
.avatar-ui-ready:not(.conversation-started) .start-conversation-button { visibility:visible; opacity:1; pointer-events:auto; transform:translate(-50%,0) scale(1); transition-delay:.12s; }
body:not(.conversation-started) .conversation-controls { display:none; }
.conversation-started .start-conversation-button { visibility:hidden; opacity:0; pointer-events:none; transform:translate(-50%,5px) scale(.98); }
.sound-button,.hangup-button { width:48px; height:48px; border-radius:50%; color:#183262; }
.sound-button svg { width:25px; height:25px; fill:none; }
.sound-button svg path:first-child { fill:currentColor; stroke:none; }
.sound-button.muted .sound-waves { opacity:.15; }
.hangup-button { color:#fff; background:linear-gradient(145deg,rgba(255,112,133,.94),rgba(255,57,96,.94)); box-shadow:0 8px 19px rgba(255,63,99,.24),inset 0 1px 1px rgba(255,255,255,.42); }
.hangup-button:disabled { opacity:.72; cursor:default; }
.mic-button { width:86px; height:86px; min-height:0; overflow:visible; border:8px solid rgba(203,230,255,.62); border-radius:50%; color:#fff; background:linear-gradient(145deg,rgba(44,182,246,.96),rgba(77,87,246,.96)); box-shadow:0 0 0 5px rgba(97,167,255,.12),0 12px 27px rgba(63,112,244,.3),inset 0 1px 2px rgba(255,255,255,.4); }
.mic-button svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mic-button.active { background:linear-gradient(145deg,#30b6f4,#555ff5); box-shadow:0 0 0 7px rgba(81,151,255,.17),0 14px 31px rgba(63,112,244,.36); animation:conversationGlow 5s ease infinite; }
html[data-recognition-pause="active"] .mic-button.active::before,html[data-recognition-pause="active"] .mic-button.active::after { content:""; position:absolute; z-index:-1; inset:-8px; border:1.5px solid rgba(76,179,255,.55); border-radius:50%; box-shadow:0 0 18px rgba(80,139,255,.18); pointer-events:none; animation:micListeningWave 2.5s cubic-bezier(.18,.62,.32,1) infinite; }
html[data-recognition-pause="active"] .mic-button.active::after { animation-delay:1.25s; }
@keyframes micListeningWave { 0%{transform:scale(.88);opacity:0} 16%{opacity:.8} 100%{transform:scale(1.72);opacity:0} }
.talk-orb,.voice-bars { display:none!important; }
.recognition-note { position:absolute; left:50%; top:-2px; width:min(560px,65vw); margin:0; transform:translateX(-50%); color:#6682b5; text-align:center; opacity:0; transition:opacity .2s; }
.chat-panel:hover .recognition-note,.mic-button[aria-busy=true]~.recognition-note { opacity:1; }
.status-footer { display:flex; align-items:center; justify-content:space-between; padding:16px 4px 0; color:rgba(81,110,159,.58); font-size:13px; }
.status-footer span { display:flex; align-items:center; gap:10px; }
.status-footer svg { width:25px; height:25px; }
.connection[data-quality="weak"] .signal-bars { clip-path:inset(0 16px 0 0); }
.connection[data-quality="offline"] .signal-bars { clip-path:inset(0 100% 0 0); }
.signal-bars { width:30px; height:25px; background:linear-gradient(to top,#6781aa 0 100%) 0 17px/4px 8px no-repeat,linear-gradient(to top,#6781aa 0 100%) 7px 12px/4px 13px no-repeat,linear-gradient(to top,#6781aa 0 100%) 14px 7px/4px 18px no-repeat,linear-gradient(to top,#6781aa 0 100%) 21px 2px/4px 23px no-repeat; transition:clip-path .2s ease; }
.avatar-delete-footer { display:none; }
html.theme-night,html.theme-night body,.theme-night { color-scheme:dark; background:radial-gradient(circle at 9% 3%,rgba(31,103,190,.26),transparent 33%),radial-gradient(circle at 91% 3%,rgba(111,72,190,.24),transparent 34%),linear-gradient(180deg,#07142f,#0a1733 58%,#081229); color:#e8f1ff; }
html.theme-night body::before,html.theme-night body::after { border-color:rgba(115,181,255,.34); box-shadow:0 0 24px rgba(193,226,255,.15),0 0 72px rgba(53,125,255,.24),inset 0 0 34px rgba(120,95,238,.08); }
.theme-night .brand-logo img { filter:brightness(0) invert(1) drop-shadow(0 0 16px rgba(88,160,255,.24)); }
.theme-night .catalog-page .brand-logo::after { content:""; position:absolute; inset:0; background:url('/avatar-rf-logo.svg?v=212') center/contain no-repeat; clip-path:inset(0 0 0 68%); filter:drop-shadow(0 0 12px rgba(50,133,255,.3)); pointer-events:none; }
.theme-night .brand-divider { background:linear-gradient(180deg,rgba(111,158,239,.08),rgba(111,158,239,.48),rgba(111,158,239,.08)); }
.theme-night .brand-tagline { color:rgba(202,218,247,.72); text-shadow:0 0 18px rgba(96,147,255,.16); }
.theme-night .create-avatar-link { color:#f4f8ff!important; border-color:rgba(72,132,232,.34); background:linear-gradient(135deg,rgba(19,48,102,.5),rgba(22,42,91,.32)); box-shadow:inset 0 0 24px rgba(53,119,230,.08),0 8px 26px rgba(0,7,32,.18); }
.theme-night .auth-profile-link { color:#d5e5ff!important; border-color:rgba(157,192,255,.16); background:rgba(46,75,132,.2); box-shadow:inset 0 0 18px rgba(112,158,255,.08); }
.theme-night .auth-profile-link:hover { color:#fff!important; border-color:rgba(110,169,255,.32); background:rgba(67,98,158,.34); }
.theme-night .round-action,.theme-night .new-conversation { color:#b9d3ff; border-color:rgba(157,192,255,.16); background:rgba(46,75,132,.2); box-shadow:0 10px 30px rgba(0,5,25,.25),inset 0 0 18px rgba(112,158,255,.08); }
.theme-night .new-conversation { color:#d8e6ff; }
.theme-night .avatar-stage { border-color:rgba(110,157,239,.18); background:radial-gradient(circle at 52% 46%,rgba(51,76,127,.38),rgba(12,29,64,.88) 57%,rgba(21,24,66,.92)); box-shadow:0 30px 90px rgba(0,4,24,.42),inset 0 0 70px rgba(62,107,190,.1); }
.theme-night .avatar-stage::before { border-color:rgba(144,199,255,.35); box-shadow:0 0 25px rgba(203,232,255,.13),0 0 62px rgba(65,135,255,.23),inset 0 0 30px rgba(132,103,242,.07); }
.theme-night .avatar-stage::after { z-index:1; inset:0; width:auto; aspect-ratio:auto; border:0; border-radius:inherit; transform:none; background:radial-gradient(ellipse 83% 76% at -4% 108%,transparent 62.7%,rgba(111,179,255,.2) 63%,rgba(225,242,255,.16) 63.3%,transparent 64%),radial-gradient(ellipse 80% 72% at 106% 96%,transparent 61.7%,rgba(123,152,255,.22) 62%,rgba(226,239,255,.14) 62.3%,transparent 63%),radial-gradient(ellipse 43% 77% at 50% 48%,transparent 0%,rgba(6,18,44,.03) 43%,rgba(7,20,49,.42) 70%,rgba(5,15,38,.78) 100%); box-shadow:inset 0 0 65px rgba(5,15,39,.2); }
.theme-night .renderer-host { filter:none; }
.theme-night .avatar-switcher button { color:#9bb3d6; }
.theme-night .avatar-switcher button:first-child { background:linear-gradient(90deg,rgba(117,172,248,.032),transparent); }
.theme-night .avatar-switcher button:last-child { background:linear-gradient(-90deg,rgba(117,172,248,.032),transparent); }
.theme-night .avatar-switcher button:first-child:hover,.theme-night .avatar-switcher button:first-child:focus-visible,.theme-night .avatar-switcher button:first-child:active { background:linear-gradient(90deg,rgba(117,172,248,.075),transparent); }
.theme-night .avatar-switcher button:last-child:hover,.theme-night .avatar-switcher button:last-child:focus-visible,.theme-night .avatar-switcher button:last-child:active { background:linear-gradient(-90deg,rgba(117,172,248,.075),transparent); }
.theme-night .avatar-dialogue { z-index:4; }
.theme-night .avatar-loading.magic-loading { color:#e8f0ff; background:transparent; }
.theme-night .avatar-loading.magic-loading.is-revealing { background:transparent; }
.theme-night .magic-copy { background:transparent; }
.theme-night .magic-detail,.theme-night .magic-note,.theme-night .magic-steps li { color:rgba(184,203,235,.58); }
.theme-night .magic-steps li::before { --step-track:rgba(134,165,218,.16); }
.theme-night .avatar-identity .kicker { color:#8fb8f5; }
.theme-night .avatar-identity h1 { color:#f2f6ff; background:linear-gradient(112deg,#f7fbff 0%,#b9dcff 58%,#b6a8ff 100%); -webkit-background-clip:text; background-clip:text; text-shadow:0 4px 26px rgba(68,139,255,.2); -webkit-text-fill-color:transparent; }
.theme-night .official-avatar-tooltip { color:rgba(218,231,255,.78); border-color:rgba(151,188,255,.22); background:rgba(16,36,75,.96); box-shadow:0 20px 52px rgba(0,5,27,.42); }
.theme-night .official-avatar-tooltip strong { color:#f0f6ff; }
.theme-night .subtitle-viewport { background:radial-gradient(ellipse at center,rgba(5,16,43,.16),rgba(5,16,43,.045) 54%,transparent 78%); }
.theme-night .subtitle-text { color:rgba(242,247,255,.84); text-shadow:0 1px 3px rgba(0,6,22,.86),0 0 9px rgba(0,6,22,.62); }
.theme-night .subtitle-text[data-speaker="user"] { color:rgba(225,235,252,.62); }
.theme-night .subtitle-text[data-speaker="system"] { color:rgba(255,224,202,.78); }
.theme-night .conversation-controls { border-color:rgba(158,192,255,.19); background:linear-gradient(145deg,rgba(52,83,145,.38),rgba(15,37,78,.48) 55%,rgba(53,41,105,.38)); box-shadow:0 21px 48px rgba(0,5,28,.34),inset 0 0 26px rgba(91,139,230,.09); }
.theme-night .start-conversation-button { border-color:rgba(176,211,255,.28); box-shadow:0 17px 42px rgba(16,68,181,.36),0 0 28px rgba(105,103,255,.16); }
.theme-night .sound-button { color:#deebff; border-color:rgba(169,199,255,.2); background:rgba(87,120,181,.18); box-shadow:inset 0 0 18px rgba(105,151,235,.09); }
html[data-recognition-pause="active"] .theme-night .mic-button.active::before,html[data-recognition-pause="active"] .theme-night .mic-button.active::after { border-color:rgba(95,205,255,.6); box-shadow:0 0 24px rgba(89,132,255,.26); }
.theme-night .status-footer { color:rgba(174,198,235,.43); }
.theme-night .signal-bars { opacity:.6; }
.theme-night .create-card { border-color:rgba(128,171,245,.18); background:linear-gradient(145deg,rgba(20,42,84,.8),rgba(12,28,61,.84) 58%,rgba(38,30,82,.72)); box-shadow:0 32px 90px rgba(0,5,28,.38),inset 0 0 48px rgba(90,139,231,.06); }
.theme-night .create-copy>p:last-child,.theme-night small,.theme-night .form-status,.theme-night .reference-script { color:rgba(190,208,237,.62); }
.theme-night .reference-script { background:rgba(5,16,43,.26); }
.theme-night .reference-script.is-recording { color:#edf5ff; border-color:rgba(140,158,255,.72); background:linear-gradient(135deg,rgba(28,49,96,.96),rgba(47,42,101,.96)); box-shadow:0 0 0 4px rgba(126,143,246,.16),0 16px 38px rgba(0,5,28,.34); }
.theme-night .photo-selection { border-color:rgba(91,216,157,.3); background:rgba(42,167,111,.12); }
.theme-night .photo-selection strong { color:#79ddb0; }
.theme-night input,.theme-night textarea { color:#edf5ff; border-color:rgba(132,171,239,.2); background:rgba(5,16,43,.5); }
.theme-night input::placeholder,.theme-night textarea::placeholder { color:rgba(190,208,237,.42); }
.theme-night .optional-section { border-color:rgba(115,165,248,.16); background:linear-gradient(145deg,rgba(47,157,244,.06),rgba(173,145,250,.08)); }
.theme-night .secondary { color:#d8e7ff; border-color:rgba(132,171,239,.18); background:rgba(54,82,137,.24); }
.theme-night .action-button:hover { border-color:rgba(110,169,255,.32); background:rgba(67,98,158,.34); box-shadow:0 12px 28px rgba(0,7,30,.22); }
.theme-night .catalog-back,.theme-night .mvp-header a { color:#c9ddff; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.delete-avatar { color:#ff9aad; background:transparent; border:1px solid rgba(255,137,162,.28); border-radius:14px; padding:10px 16px; cursor:pointer; font:inherit; }
.delete-avatar:disabled { opacity:.5; cursor:wait; }
.modal-overlay { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 42%,rgba(77,120,220,.2),rgba(10,20,50,.68)); backdrop-filter:blur(15px); }
.modal-overlay[hidden] { display:none; }
.delete-dialog { border:1px solid rgba(130,174,255,.28); border-radius:28px; padding:30px; max-width:440px; width:calc(100% - 40px); box-sizing:border-box; color:#edf5ff; background:linear-gradient(145deg,rgba(12,29,65,.96),rgba(20,38,80,.94) 56%,rgba(43,32,87,.93)); box-shadow:0 32px 105px rgba(0,7,31,.56),inset 0 0 38px rgba(88,139,241,.1); backdrop-filter:blur(28px) saturate(1.2); }
.delete-dialog h2 { margin:0 0 12px; font-size:26px; letter-spacing:-.035em; }
.delete-dialog p { line-height:1.6; color:rgba(222,234,255,.72); }
.delete-dialog input { color:#edf5ff; border-color:rgba(135,174,244,.25)!important; background:rgba(5,16,43,.56)!important; }
.delete-dialog input::placeholder { color:rgba(198,217,246,.46); }
.delete-actions { display:flex; justify-content:flex-end; gap:12px; }
.delete-actions button { min-height:42px; border:1px solid rgba(132,169,239,.22); border-radius:14px; color:#deebff; background:rgba(67,101,171,.22); box-shadow:inset 0 0 16px rgba(125,164,239,.08); }
@media(max-width:800px){
  body { min-height:var(--mobile-viewport-height,100svh); }
  .avatar-shell { width:100%; height:var(--mobile-viewport-height,100svh); min-height:0; padding:0 18px env(safe-area-inset-bottom); grid-template-rows:clamp(74px,13svh,110px) minmax(0,1fr) 0; }
  .avatar-shell .mvp-header { height:100%; align-items:flex-end; padding-bottom:14px; }
  .avatar-shell .brand-logo { width:142px; height:43px; }
  .header-actions { gap:9px; }
  .brand-divider,.brand-tagline,.page-header-label { display:none; }
  .create-avatar-link { min-height:42px; padding:0 16px; border-radius:14px; font-size:13px; }
  .round-action { width:42px; height:42px; }
  .auth-slot { width:42px; min-width:42px; height:42px; }
  .desktop-only,.new-conversation span { display:none; }
  .new-conversation { width:42px; height:42px; padding:0; justify-content:center; }
  .conversation-layout { --controls-rail-height:var(--mobile-dock-height,96px); --conversation-rail-gap:var(--mobile-message-gap,10px); --subtitle-rail-height:var(--mobile-message-zone-height,76px); display:grid; grid-template-rows:minmax(0,1fr) var(--controls-rail-height); gap:var(--conversation-rail-gap); }
  .avatar-stage,.conversation-started .avatar-stage { grid-row:1; display:grid; grid-template-rows:minmax(0,1fr); border-radius:34px; }
  .renderer-host { position:relative; inset:auto; grid-area:1/1; min-height:0; }
  .avatar-switcher button { width:64px; height:52%; min-height:180px; opacity:.3; }
  .avatar-identity { left:28px; top:48px; }
  .favorite-action { top:14px; right:14px; }
  .avatar-identity .kicker { font-size:10px; }
  .avatar-identity h1 { font-size:40px; }
  .official-avatar-check,.official-avatar-check>svg { width:23px; height:23px; }
  .official-avatar-tooltip { left:auto; right:-12px; transform:translateY(-4px); }
  .official-avatar-check:hover .official-avatar-tooltip,.official-avatar-check:focus-visible .official-avatar-tooltip { transform:translateY(0); }
  .chat-panel { position:relative; grid-row:2; display:grid; min-height:0; place-items:center; }
  .chat-panel>.intro-prompt { bottom:calc(100% + var(--subtitle-rail-height) + var(--conversation-rail-gap) + 8px); }
  .mobile-conversation-dock { position:relative; z-index:5; display:grid; width:min(calc(100vw - 36px),584px); height:var(--mobile-dock-height,96px); place-items:center; pointer-events:auto; }
  .start-conversation-button,.conversation-controls { grid-area:1/1; }
  .start-conversation-button { position:relative; left:auto; bottom:auto; width:min(100%,420px); transform:translateY(6px) scale(.97); }
  .avatar-ui-ready:not(.conversation-started) .start-conversation-button { transform:translateY(0) scale(1); }
  .conversation-started .start-conversation-button { transform:translateY(4px) scale(.98); }
  .conversation-controls { position:relative; left:auto; bottom:auto; grid-template-columns:46px 76px 46px; gap:9px; padding:6px 13px; opacity:1; transform:translateY(0) scale(1); transition:opacity .24s ease,transform .26s cubic-bezier(.22,.8,.3,1),visibility 0s linear 0s; }
  body:not(.conversation-started) .conversation-controls { display:grid; visibility:hidden; opacity:0; transform:translateY(5px) scale(.96); transition:opacity .2s ease,transform .24s ease,visibility 0s linear .24s; }
  .sound-button,.hangup-button { width:43px; height:43px; }
  .mic-button { width:76px; height:76px; border-width:7px; }
  .avatar-dialogue,.conversation-started .avatar-dialogue,.avatar-dialogue[data-state="user-speaking"] { position:absolute; right:auto; bottom:calc(var(--controls-rail-height) + var(--conversation-rail-gap)); left:50%; width:min(88%,calc(100% - 32px)); height:var(--mobile-message-zone-height,76px); min-height:var(--mobile-message-zone-height,76px); padding:0; transform:translateX(-50%); }
  .subtitle-viewport { place-items:center; padding:6px 16px; background:radial-gradient(ellipse at center,rgba(255,255,255,.15),rgba(255,255,255,.04) 56%,transparent 80%); }
  .subtitle-text { height:2.8em; font-size:16px; font-weight:460; line-height:1.4; text-align:center; }
  .subtitle-text[data-speaker="user"] { font-weight:410; text-align:center; }
  .subtitle-text[data-speaker="system"] { font-size:15px; }
  .recognition-note { display:none; }
  .avatar-shell .status-footer { display:none; }
  .delete-dialog { width:100%; padding:24px; border-radius:24px; }
}
@media(min-width:801px) and (max-width:1120px){.brand-divider,.brand-tagline{display:none}}
@media(max-width:360px){.brand-logo,.avatar-shell .brand-logo{width:100px}.create-avatar-link{padding:0 10px;font-size:12px}.header-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){html[data-recognition-pause="active"] .mic-button.active::before,html[data-recognition-pause="active"] .mic-button.active::after{animation:none;transform:scale(1.18);opacity:.35}.start-conversation-button{transition-duration:.01ms}.avatar-dialogue{transition-duration:.01ms}.avatar-stage[data-avatar-exit] .renderer-host,.avatar-stage[data-avatar-exit] .avatar-identity,.avatar-stage[data-avatar-exit] .avatar-dialogue{transform:none;transition:none}.avatar-stage.is-avatar-swipe-returning .renderer-host,.avatar-stage.is-avatar-swipe-returning .avatar-identity,.avatar-stage.is-avatar-swipe-committing .renderer-host,.avatar-stage.is-avatar-swipe-committing .avatar-identity{transition-duration:.01ms}}