/* Roxheiris web app — DS2 presentation. Shared palettes and type live in roxheiris.css. */
:root {
  --surface-overlay: var(--surface-card);
  --text-disabled: color-mix(in srgb, var(--fg-3) 58%, var(--surface-page));
  --emotion-current: var(--emotion-neutral);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --chat-max: 680px;
  /* Text-safe danger: >= 4.5:1 on every palette surface (the raw --danger-500 is only for fills and icons). */
  --danger-text: color-mix(in srgb, var(--danger-500) 62%, var(--fg-1));
}
@property --emotion-current{syntax:"<color>";inherits:true;initial-value:#A99CCB}
:root{transition:--emotion-current 700ms var(--ease-out)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--surface-page);color:var(--fg-1)}
body{height:100dvh;font-family:var(--font-sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;caret-color:var(--brand-primary)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
svg.i{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cap{margin:0;color:var(--fg-3);font-size:12px;line-height:1.5}
.eyebrow{margin:0;color:var(--fg-2);font:700 12px/1.3 var(--font-sans)}
.eyebrow:empty{display:none}
.scrolly{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
.dot6{display:block;width:8px;height:8px;flex:none;border-radius:50%}
.edot{background:var(--emotion-current);transition:background var(--dur-slow) var(--ease-out)}

/* Primitives: Button / IconButton / Tag / Tabs / Switch / Toast. */
.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;padding:0 22px;border:2px solid transparent;border-radius:var(--radius-pill);background:var(--brand-primary);box-shadow:var(--btn-glow);color:var(--fg-on-brand);font-weight:800;line-height:1;text-decoration:none;white-space:nowrap;transition:transform var(--dur-base) var(--ease-spring),background var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.btn:hover{text-decoration:none}.btn:active:not(:disabled){transform:translate(1px,1px) scale(.98)}
.btn:disabled{cursor:default;opacity:.45}.btn.sec{border-color:var(--border-strong);background:var(--surface-card);box-shadow:var(--shadow-pop-sm);color:var(--fg-1)}
.btn.sm{min-height:44px;padding:0 17px;font-size:13px}.btn:focus-visible{outline-offset:3px}
@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled){transform:translateY(-1px);background:var(--brand-primary-hover);box-shadow:var(--shadow-glow-dawn)}.btn.sec:hover:not(:disabled){background:var(--surface-primary-tint);box-shadow:var(--shadow-pop)}}

.langs,.seg{display:flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--surface-sunken)}
.langs{justify-content:center;align-self:center;margin-top:6px}.langs button,.seg button{min-width:44px;min-height:44px;flex:1;padding:0 12px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--fg-2);font-size:12px;font-weight:800;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}
.langs button[aria-pressed="true"],.seg button[aria-pressed="true"]{background:var(--surface-card);box-shadow:var(--shadow-1);color:var(--fg-link)}
.langs button:active,.seg button:active{transform:scale(.97)}.seg button:disabled{cursor:not-allowed;opacity:.38}.seg button[aria-pressed="true"]:disabled{background:var(--surface-card);box-shadow:none;color:var(--fg-2);opacity:.62}

/* Welcome/sign-in screen. */
.login{position:relative;isolation:isolate;display:grid;height:100%;place-items:center;overflow-y:auto;padding:calc(28px + var(--sat)) 18px calc(28px + var(--sab));background:linear-gradient(165deg,var(--surface-primary-tint),var(--surface-secondary-tint) 58%,var(--surface-page))}
.login::before{content:"マオ";position:fixed;z-index:-1;top:4vh;left:-.08em;color:var(--kana-fill);font:400 clamp(140px,28vw,420px)/.82 var(--font-display);letter-spacing:-.12em;opacity:.32;-webkit-text-stroke:var(--kana-stroke);text-shadow:var(--glow-text-cyan);pointer-events:none}
.login::after{content:"";position:fixed;z-index:-2;inset:0;background:var(--pattern-dots);opacity:.42;pointer-events:none}
.lcard{width:min(100%,430px);margin:auto;padding:32px 28px 24px;border:2px solid var(--border-strong);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--surface-card) 92%,transparent);box-shadow:var(--shadow-pop-lg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);animation:cardin var(--dur-slow) var(--ease-out)}
@keyframes cardin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lcard>.eyebrow{color:var(--fg-link);font:500 10px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}.lcard .wm{margin:8px 0 4px;color:var(--fg-1);font:400 clamp(34px,10vw,48px)/1 var(--font-display);letter-spacing:.02em}.lcard .wm span,.brandlock .wm span{color:var(--brand-primary);text-shadow:var(--glow-text)}
.lcard .tag{margin:0 0 20px;color:var(--fg-2);font-size:15px}.greet{margin:0 0 14px;color:var(--fg-1);font-size:17px;font-weight:800}
#loginForm{display:flex;flex-direction:column;gap:14px}.fld{display:flex;flex-direction:column;gap:7px;color:var(--fg-1);font-size:13px;font-weight:700}
.fld input,.nameedit input{height:48px;min-width:0;padding:0 15px;border:2px solid var(--border-2);border-radius:var(--radius-md);outline:0;background:var(--surface-card);color:var(--fg-1);font-size:16px;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.fld input:focus,.nameedit input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 4px var(--surface-primary-tint)}
.ferr{margin:0;color:var(--danger-500);font-size:13px}.ferr:empty{display:none}.ferr:not(:empty){padding:10px 12px;border-radius:var(--radius-md);background:var(--danger-100)}
#loginForm .btn,#signupBtn{width:100%}.lsplit{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--fg-3);font-size:12px}.lsplit::before,.lsplit::after{content:"";height:1px;flex:1;background:var(--border-1)}
.lnote{text-align:center}.lnote a{display:inline-flex;min-height:44px;align-items:center;color:var(--fg-link);text-decoration:underline;text-underline-offset:3px}.lfoot{display:flex;flex-direction:column;gap:6px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border-1)}

/* Stage shell and top bar. */
.app{position:relative;isolation:isolate;display:flex;height:100%;flex-direction:column;overflow:hidden;background:var(--surface-page)}
.tbar{position:relative;z-index:30;display:flex;height:calc(70px + var(--sat));flex:none;align-items:center;gap:10px;padding:var(--sat) calc(12px + var(--sar)) 0 calc(18px + var(--sal));background:linear-gradient(180deg,color-mix(in srgb,var(--surface-page) 86%,transparent),transparent);pointer-events:none}
.tbar>*{pointer-events:auto}.brandlock{min-width:0}.brandlock .wm{margin:0;color:var(--fg-1);font:400 18px/1 var(--font-display);letter-spacing:.02em}.brandlock .jp{margin:5px 0 0;color:var(--fg-3);font:500 9px/1 var(--font-mono);letter-spacing:.18em}
.tbar .cn{display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:var(--fg-2);font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.tbar .d{background:var(--text-disabled)}.tbar .d.ok{background:var(--success-500)}.tbar .d.warn{background:var(--warning-500)}.tbar .d.err{background:var(--danger-500)}
.chip{display:inline-flex;min-height:44px;align-items:center;padding:0 12px;border-radius:var(--radius-pill);background:var(--sun-400);color:#15132A;font-size:11px;font-weight:900;line-height:1;text-decoration:none;text-transform:uppercase}
.acctwrap{position:relative}.acct{display:grid;width:48px;height:48px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;transition:transform var(--dur-fast) var(--ease-spring)}.acct:active{transform:scale(.94)}
.av{display:grid;width:36px;height:36px;place-items:center;flex:none;border:2px solid var(--brand-primary);border-radius:50%;background:var(--surface-card);box-shadow:var(--shadow-1);color:var(--fg-link);font-size:14px;font-weight:900;text-transform:uppercase}.av.lg{width:64px;height:64px;border-radius:18px;background:var(--surface-primary-tint);font-size:22px}

.body{position:relative;z-index:1;display:flex;min-height:0;flex:1;flex-direction:column;pointer-events:none}.stage{position:absolute;z-index:0;inset:0;overflow:hidden;--mao-x:.5;--mao-visible:.62;--mao-drop:.10;background:linear-gradient(180deg,var(--surface-secondary-tint),var(--surface-primary-tint) 58%,var(--surface-page))}
.stage::before{content:"";position:absolute;z-index:0;inset:0;background:var(--pattern-dots);opacity:.32;pointer-events:none}.stage::after{content:"";position:absolute;z-index:2;right:0;bottom:0;left:0;height:61%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surface-page) 70%,transparent) 43%,var(--surface-page) 84%);pointer-events:none}
.stage .glow{position:absolute;z-index:0;top:35%;left:50%;width:min(120vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--emotion-current) 24%,transparent),transparent 70%);opacity:.72;transition:background var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out);pointer-events:none}.stage.speaking .glow{opacity:1}
.stage-kana{position:absolute;z-index:0;top:13%;right:-.1em;color:var(--kana-fill);font:400 clamp(96px,27vw,260px)/.85 var(--font-display);letter-spacing:-.12em;opacity:.34;-webkit-text-stroke:var(--kana-stroke);text-shadow:var(--glow-text-cyan);writing-mode:vertical-rl;pointer-events:none}.stage canvas{position:absolute;z-index:1;inset:0;width:100%;height:100%;touch-action:none}
.stageinfo{position:absolute;z-index:4;top:calc(76px + var(--sat));left:calc(18px + var(--sal));display:inline-flex;min-height:36px;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--glass-border);border-radius:var(--radius-pill);background:var(--glass-bg);box-shadow:var(--shadow-1);color:var(--fg-2);font-size:12px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}.stageinfo:has(#feeling:empty){display:none}.stage-name{color:var(--fg-link);font:500 10px/1 var(--font-mono);letter-spacing:.14em}
.anote{position:absolute;z-index:4;inset:42% 20px auto;padding:10px 14px;border:1px solid var(--border-1);border-radius:var(--radius-md);background:var(--surface-card);text-align:center}

/* Floating ChatScreen. */
.chat{position:relative;z-index:3;display:flex;min-height:0;flex:1;flex-direction:column;justify-content:flex-end}.msgs,.dock{pointer-events:auto}
.msgs{display:flex;max-height:36dvh;min-height:0;flex:0 1 auto;flex-direction:column;gap:13px;padding:54px calc(max(16px,(100% - var(--chat-max))/2) + var(--sar)) 10px calc(max(16px,(100% - var(--chat-max))/2) + var(--sal));-webkit-mask-image:linear-gradient(180deg,transparent,#000 50px);mask-image:linear-gradient(180deg,transparent,#000 50px);transition:max-height var(--dur-slow) var(--ease-out)}
.app.view-chat .msgs{max-height:58dvh}.m{display:flex;max-width:86%;flex-direction:column;align-items:flex-start;gap:4px}.m.me{align-self:flex-end;align-items:flex-end}.bb{max-width:100%;padding:11px 15px;border:1.5px solid var(--border-1);border-radius:20px 20px 20px 6px;background:var(--surface-card);box-shadow:var(--shadow-1);color:var(--fg-1);font-size:15px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap;-webkit-user-select:text;user-select:text}.bb.mine{border:0;border-radius:20px 20px 6px 20px;background:var(--brand-secondary);box-shadow:none;color:var(--fg-on-secondary)}.bb.ghost{opacity:.62;font-style:italic}
.mt{display:flex;align-items:center;gap:6px;padding:0 4px;color:var(--fg-3);font:400 11px/1.3 var(--font-mono);letter-spacing:.05em}.m:not(.me) .mt{order:-1;color:var(--fg-link);text-transform:uppercase}.mt .edot{width:7px;height:7px}
.dv{align-self:center;padding:7px 12px;border-radius:var(--radius-pill);background:var(--surface-card);color:var(--fg-3);font:500 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.cur{display:inline-block;width:2px;height:17px;margin-left:2px;vertical-align:-3px;background:var(--brand-primary);animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.empty{width:min(100%,330px);align-self:center;padding:14px 18px;border:1px solid var(--glass-border);border-radius:20px 20px 20px 6px;background:var(--glass-bg);box-shadow:var(--shadow-2);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}.empty .t{margin:0 0 5px;color:var(--fg-1);font:400 20px/1.2 var(--font-display)}.empty .cap{color:var(--fg-2);font-size:13px}
@keyframes msgin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.m,.pl,.safety,.empty{animation:msgin var(--dur-base) var(--ease-out)}

.dock{display:flex;width:100%;max-width:calc(var(--chat-max) + 32px);flex:none;flex-direction:column;gap:8px;margin:0 auto;padding:6px calc(12px + var(--sar)) calc(100px + var(--sab)) calc(12px + var(--sal))}
.composer{display:flex;align-items:flex-end;gap:5px;padding:6px 7px 6px 8px;border:1.5px solid var(--border-2);border-radius:var(--radius-pill);background:var(--surface-card);box-shadow:var(--shadow-2);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)}.composer:focus-within{border-color:var(--brand-primary);box-shadow:0 0 0 4px var(--surface-primary-tint),var(--shadow-2)}
.composer textarea{min-width:0;min-height:44px;max-height:116px;flex:1;resize:none;padding:10px 6px;border:0;outline:0;background:transparent;color:var(--fg-1);font-size:15px;line-height:24px}.composer textarea::placeholder{color:var(--fg-3);opacity:1}
.mic,.send{position:relative;display:grid;width:44px;height:44px;flex:none;place-items:center;padding:0;border:0;border-radius:50%;transition:transform var(--dur-fast) var(--ease-spring),background var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}.mic{background:var(--surface-sunken);color:var(--fg-1)}.send{background:var(--brand-primary);box-shadow:var(--btn-glow);color:var(--fg-on-brand)}.mic:active:not(:disabled),.send:active:not(:disabled){transform:scale(.92)}.send:disabled{cursor:default;opacity:.34}.mic.live{background:var(--brand-primary);color:var(--fg-on-brand)}
.mic .lvl{position:absolute;inset:-5px;border:2px solid var(--brand-primary);border-radius:50%;opacity:0;transform:scale(calc(1 + var(--lvl,0) * .35));pointer-events:none}.mic.live .lvl{opacity:.65}
.composer.locked{background:var(--surface-sunken);box-shadow:none;opacity:.7}.composer.locked:focus-within{border-color:var(--border-2);box-shadow:none}.composer.locked .mic,.composer.locked .send{cursor:not-allowed;opacity:.4}.composer.locked textarea{cursor:not-allowed}
.lockcard{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px 12px;padding:14px;border:2px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-pop-sm)}.lockcard .lk{display:grid;width:44px;height:44px;place-items:center;border-radius:50%;background:var(--surface-primary-tint);color:var(--fg-link)}.lockcard .lh{margin:0;color:var(--fg-1);font-size:14px;font-weight:900;line-height:1.3}.lockcard .cap{margin-top:3px;color:var(--fg-2)}.lockcard .btn{grid-column:1/-1;width:100%}.lockcard.nudge{animation:nudge 420ms var(--ease-out)}@keyframes nudge{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--brand-primary) 18%,transparent)}}

/* Floating app TabBar. */
.tabbar{position:absolute;z-index:24;right:calc(16px + var(--sar));bottom:calc(18px + var(--sab));left:calc(16px + var(--sal));display:flex;height:64px;gap:4px;padding:6px;border:1px solid var(--glass-border);border-radius:var(--radius-pill);background:var(--glass-bg);box-shadow:var(--shadow-3);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.tabbar button{display:flex;min-width:0;min-height:44px;flex:1;align-items:center;justify-content:center;gap:7px;padding:0 14px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--fg-2);font-size:13px;font-weight:800;transition:background var(--dur-base) var(--ease-spring),color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-spring)}.tabbar button i{font-size:19px}.tabbar button span{display:none}.tabbar button[aria-pressed="true"]{background:var(--ink-900);color:var(--ink-0)}.tabbar button[aria-pressed="true"] span{display:inline}.tabbar button[aria-pressed="true"] i{color:var(--brand-primary)}.tabbar button:active{transform:scale(.96)}

/* MeScreen/settings panel. */
.menu{position:fixed;z-index:50;top:calc(68px + var(--sat));right:calc(10px + var(--sar));bottom:calc(94px + var(--sab));width:min(410px,calc(100vw - 20px));overflow-y:auto;overscroll-behavior:contain;padding:8px;border:2px solid var(--border-strong);border-radius:var(--radius-xl);background:var(--surface-page);box-shadow:var(--shadow-pop-lg);transform-origin:calc(100% - 28px) 0;animation:menuin var(--dur-base) var(--ease-out)}@keyframes menuin{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.settings-eyebrow{margin:0;padding:12px 12px 4px;color:var(--fg-link);font:500 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase}.mhead{display:flex;align-items:center;gap:14px;padding:10px 12px 16px}.mhead>div{min-width:0}.mn{margin:0;overflow-wrap:anywhere;color:var(--fg-1);font-size:19px;font-weight:900;line-height:1.25}.mhead .cap{overflow-wrap:anywhere}
.plancard,.msec{margin:0 4px 10px;padding:15px;border:1px solid var(--border-1);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-1)}.plancard{display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:2px solid var(--border-strong);box-shadow:var(--shadow-pop-sm)}.plancard .pt{margin:0;color:var(--fg-1);font-weight:900}.plancard .cap{color:var(--fg-2)}.plancard .btn{margin-top:6px}.msec{display:flex;flex-direction:column;gap:11px}
.nameedit{display:flex;gap:8px}.nameedit input{height:44px;flex:1}.nameform .cap{min-height:18px}.nameform .cap.ok{color:var(--success-500)}.nameform .cap.err{color:var(--danger-500)}.nameedit .btn{padding-inline:15px}
.section-title{display:flex;align-items:flex-start;gap:10px}.section-title>i{display:grid;width:36px;height:36px;place-items:center;flex:none;border-radius:11px;background:var(--surface-primary-tint);color:var(--fg-link);font-size:18px}.section-title .cap{margin-top:3px}.appearance-card{background:linear-gradient(145deg,var(--surface-card),var(--surface-primary-tint))}
.palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.palettes button{display:flex;min-width:0;min-height:54px;align-items:center;gap:9px;padding:6px 10px;border:1.5px solid var(--border-2);border-radius:var(--radius-md);background:var(--surface-card);color:var(--fg-2);font-size:12px;font-weight:800;text-align:left;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease-out)}.palettes button>i{display:block;width:28px;height:28px;flex:none;border:3px solid var(--surface-card);border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px var(--border-2)}.palettes button[aria-checked="true"]{border-color:var(--brand-primary);background:var(--surface-primary-tint);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-primary) 14%,transparent);color:var(--fg-1)}.palettes button:active{transform:scale(.98)}.mode-label{margin-top:2px}.night-note{padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-night);color:var(--night-muted)}
.mrow,.mi{display:flex;width:100%;min-height:48px;align-items:center;justify-content:space-between;padding:0 4px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--fg-1);text-align:left}.mi{margin-top:4px;padding:0 16px;border-top:1px solid var(--border-1);border-radius:0;color:var(--danger-text);font-weight:800}.tgl{position:relative;width:48px;height:28px;flex:none;padding:3px;border-radius:var(--radius-pill);background:var(--ink-200);transition:background var(--dur-base) var(--ease-out)}.tgl i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-spring)}[aria-checked="true"] .tgl{background:var(--brand-primary)}[aria-checked="true"] .tgl i{transform:translateX(20px)}
.credit{padding:10px 14px 8px;font-size:10px}.spend{display:flex;align-items:baseline;gap:8px}.spend .big{color:var(--fg-1);font-size:28px;font-weight:900}.bar{display:block;height:7px;overflow:hidden;border-radius:var(--radius-pill);background:var(--surface-sunken)}.bar i{display:block;height:100%;border-radius:inherit;background:var(--brand-primary);transition:width .5s var(--ease-out)}.bar.warn i{background:var(--warning-500)}.bar.err i{background:var(--danger-500)}.skel{display:flex;flex-direction:column;gap:8px}.skel i{display:block;width:60%;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--surface-sunken),var(--border-1),var(--surface-sunken));background-size:200% 100%;animation:shim 1.4s linear infinite}.skel i+i{width:38%}@keyframes shim{to{background-position:-200% 0}}

/* Dialog-like install card, safety card and Toast. */
.toasts{position:fixed;z-index:70;top:calc(74px + var(--sat));left:50%;display:flex;width:min(390px,calc(100vw - 24px));transform:translateX(-50%);flex-direction:column;gap:8px;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:10px;padding:14px 15px;border:1px solid var(--glass-border);border-radius:var(--radius-md);background:var(--surface-night);box-shadow:var(--shadow-3);color:#fff;font-size:13px;pointer-events:auto;animation:msgin var(--dur-base) var(--ease-out)}.toast::before{content:"✦";color:var(--brand-highlight)}.toast.err::before{content:"!";color:var(--danger-500);font-weight:900}.toast p{margin:0;flex:1}.toast .x{width:44px;height:44px;margin:-10px -10px -10px 0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:20px;opacity:.7}
.itip{position:fixed;z-index:60;right:16px;bottom:calc(100px + var(--sab));left:16px;max-width:430px;margin:auto;padding:20px;border:2px solid var(--border-strong);border-radius:var(--radius-xl);background:var(--surface-card);box-shadow:var(--shadow-pop-lg)}.itip p{margin:0 0 12px}.safety{display:flex;align-items:flex-start;flex-direction:column;gap:6px;padding:16px;border:2px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-pop-sm)}.safety .st{margin:0;color:var(--fg-1);font-weight:900}.safety .sb{margin:0;color:var(--fg-2);font-size:13px}.safety .btn{margin-top:6px}

@media (min-width:520px){.lockcard{grid-template-columns:44px 1fr auto}.lockcard .btn{grid-column:auto;width:auto}.tabbar{right:auto;left:50%;width:420px;transform:translateX(-50%)}}

/* Desktop keeps Mao full-screen and floats a roomy chat column at right. */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .tbar{padding-right:calc(24px + var(--sar));padding-left:calc(28px + var(--sal))}.stage{--mao-x:.32;--mao-visible:.66;--mao-drop:.06}.stage-kana{right:auto;left:3%;top:19%;font-size:clamp(110px,12.5vw,190px);writing-mode:horizontal-tb}.stage .glow{top:40%;left:32%;width:72vw}.stage::after{top:0;right:0;bottom:0;left:auto;width:min(680px,52vw);height:auto;background:linear-gradient(90deg,transparent,var(--surface-page) 30%)}.stageinfo{left:calc(28px + var(--sal))}
  .body{align-items:flex-end}.chat{width:min(680px,52vw);flex:none;height:100%}.msgs{max-height:none;flex:1 1 auto;padding-right:34px;padding-left:34px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 54px);mask-image:linear-gradient(180deg,transparent,#000 54px)}.app.view-stage .msgs{max-height:44dvh;flex:0 1 auto}.dock{padding-right:28px;padding-left:28px}.tabbar{left:auto;right:clamp(16px,calc(26vw - 210px),130px);transform:none}.menu{right:calc(18px + var(--sar))}
}

@media (max-height:590px) and (orientation:landscape){.tbar{height:calc(56px + var(--sat))}.stageinfo{top:calc(60px + var(--sat))}.stage{--mao-x:.25;--mao-visible:.72;--mao-drop:.03}.dock{padding-bottom:calc(76px + var(--sab))}.tabbar{bottom:calc(8px + var(--sab));height:58px}.menu{top:calc(56px + var(--sat))}}
@media (max-width:389px){.tbar{padding-left:calc(12px + var(--sal));gap:6px}.brandlock .wm{font-size:16px}.tbar .cn{font-size:9px}.lcard{padding:28px 20px 22px}.lockcard{padding:12px}.palettes button{padding-inline:8px}.dock{padding-right:calc(10px + var(--sar));padding-left:calc(10px + var(--sal))}}

@media (hover:hover) and (pointer:fine){.tabbar button:hover,.mrow:hover,.mi:hover{background:var(--surface-primary-tint)}.palettes button:hover{border-color:var(--brand-primary)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.btn:active,.mic:active,.send:active,.acct:active,.tabbar button:active{transform:none!important}.cur{animation:none}}
@media (forced-colors:active){.btn,.send,.mic,.lockcard,.menu{border:1px solid ButtonText}.tgl{border:1px solid ButtonText}}
/* QA v13: the Explorer lock card already says it; skip the duplicate empty-state card over Mao on the stage tab. */
.app.view-stage:has(.lockcard:not([hidden])) #convEmpty{display:none}

/* ── Step 4 features ───────────────────────────────────────────────────── */
/* Thinking bubble: the kit's typing dots + a rotating line. */
.bb.think{display:inline-flex;align-items:center;gap:11px;padding:12px 16px}
.tdots{display:inline-flex;gap:5px;padding:2px 0}
.tdots i{display:block;width:7px;height:7px;border-radius:99px;background:var(--dawn-300);animation:roxheirisDot 1s infinite var(--ease-in-out)}
.tdots i:nth-child(2){animation-delay:.15s}.tdots i:nth-child(3){animation-delay:.3s}
@keyframes roxheirisDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
.tline{min-width:15ch;color:var(--fg-2);font-size:13px;font-weight:600;white-space:nowrap;transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out),filter 150ms var(--ease-out)}
.tline.swap{opacity:0;transform:translateY(3px);filter:blur(2px)}
.m.thinking .mt{color:var(--fg-link)}

/* Tool-call pills (Tag-style): running -> done / error. */
.pl{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;height:32px;padding:0 6px 0 12px;border:1.5px solid var(--border-2);border-radius:var(--radius-pill);background:var(--surface-card);color:var(--fg-2);font:700 13px/1 var(--font-sans);user-select:none;transition:border-color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.pl .pi{font-size:14px;color:var(--fg-link)}
.pl .ps{display:grid;width:20px;height:20px;place-items:center;border-radius:50%;font-size:12px}
.pl.running{border-color:var(--brand-primary);color:var(--fg-1)}
.pl.running .ps{color:var(--brand-primary);font-size:15px;animation:spin .9s linear infinite}
.pl.done .ps{background:var(--success-500);color:#05020C;font-weight:700;animation:pillpop 260ms var(--ease-spring)}
.pl.error{border-color:var(--danger-500);background:color-mix(in srgb,var(--danger-500) 9%,var(--surface-card));color:var(--fg-1)}
.pl.error .ps{background:var(--danger-500);color:#05020C;animation:pillpop 260ms var(--ease-spring)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pillpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* Emotion glow: an edge vignette tinted by --emotion-current, breathing slowly. Neon-stronger in night/dark. */
.emoglow{--eg:.26;position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 80% at 50% 45%,transparent 52%,color-mix(in srgb,var(--emotion-current) calc(var(--eg) * 100%),transparent) 100%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--emotion-current) calc(var(--eg) * 70%),transparent),inset 0 0 60px color-mix(in srgb,var(--emotion-current) calc(var(--eg) * 55%),transparent);opacity:.8;animation:emobreathe 6s var(--ease-in-out) infinite}
.app[data-emo="neutral"] .emoglow{--eg:.1}.app.speaking .emoglow{animation-duration:2.6s}
:root[data-palette="night"] .emoglow,:root[data-theme="dark"] .emoglow{--eg:.46;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--emotion-current) calc(var(--eg) * 100%),transparent),inset 0 0 36px color-mix(in srgb,var(--emotion-current) calc(var(--eg) * 85%),transparent),inset 0 0 120px color-mix(in srgb,var(--emotion-current) calc(var(--eg) * 40%),transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]) .emoglow{--eg:.46}}
:root[data-palette="night"] .app[data-emo="neutral"] .emoglow,:root[data-theme="dark"] .app[data-emo="neutral"] .emoglow{--eg:.16}
@keyframes emobreathe{0%,100%{opacity:.62}50%{opacity:1}}
/* EmotionIndicator on the mood pill. */
.stageinfo .edot{position:relative;box-shadow:0 0 8px color-mix(in srgb,var(--emotion-current) 70%,transparent)}
.stageinfo .edot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--emotion-current);opacity:0;animation:edring 2.8s var(--ease-out) infinite}
@keyframes edring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.4);opacity:0}}
.app.speaking .stageinfo .edot::after{animation-duration:1.4s}

/* Agenda + Now Playing panels: inside the Me menu everywhere, plus a left dock on wide desktops. */
.pcard-m.ag,.pcard-m.np{gap:9px}
.pcard{padding:14px;border:1px solid var(--glass-border);border-radius:var(--radius-lg);background:var(--glass-bg);box-shadow:var(--shadow-2);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.ph{display:flex;align-items:center;gap:9px}.ph>i{display:grid;width:30px;height:30px;place-items:center;border-radius:10px;background:var(--surface-primary-tint);color:var(--fg-link);font-size:16px}
.ph h3{margin:0;flex:1;color:var(--fg-1);font:900 14px/1.2 var(--font-sans)}.ph .cnt{min-width:22px;padding:3px 7px;border-radius:var(--radius-pill);background:var(--brand-primary);color:var(--fg-on-brand);font:700 11px/1.2 var(--font-mono);text-align:center}.ph .cnt:empty{display:none}
.pe{padding:2px 2px 4px}.pm{padding-left:2px}
.tl{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.ti{display:flex;min-height:44px;align-items:center;gap:4px}
.tk{display:grid;width:44px;height:44px;flex:none;place-items:center;padding:0;border:0;background:transparent;color:inherit}
.tk .bx{display:grid;width:22px;height:22px;place-items:center;border:2px solid var(--border-strong);border-radius:7px;background:var(--surface-card);color:transparent;font-size:14px;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-spring)}
.tk:active .bx{transform:scale(.9)}
.ti.done .bx{border-color:var(--brand-primary);background:var(--brand-primary);color:var(--fg-on-brand)}
.ti.just .bx{animation:pillpop 240ms var(--ease-spring)}
.ti .tx{display:flex;min-width:0;flex:1;flex-direction:column;gap:1px;padding:4px 0}
.ti .tt{overflow-wrap:anywhere;color:var(--fg-1);font-size:14px;font-weight:700;line-height:1.35;transition:color var(--dur-base) var(--ease-out)}
.ti.done .tt{color:var(--fg-3);text-decoration:line-through;text-decoration-thickness:1.5px}
.ti .tm{color:var(--fg-3);font:500 11px/1.3 var(--font-mono);letter-spacing:.04em}.ti.late .tm{color:var(--danger-text);font-weight:500}
.np{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:4px 12px}
.np .art{display:grid;width:52px;height:52px;place-items:center;overflow:hidden;border:1.5px solid var(--border-2);border-radius:12px;background:var(--surface-primary-tint);color:var(--fg-link);font-size:22px}.np .art img{display:block;width:100%;height:100%;object-fit:cover}
.np .tx{min-width:0}.np-eb{display:flex;align-items:center;gap:7px;color:var(--fg-link);font:500 10px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.np .tt{margin:1px 0 0;overflow:hidden;color:var(--fg-1);font-size:14px;font-weight:800;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.np .ta{overflow:hidden;color:var(--fg-2);text-overflow:ellipsis;white-space:nowrap}
.np .npbar{grid-column:1/-1;height:4px;margin-top:6px}
.eq{display:inline-flex;height:11px;align-items:flex-end;gap:2px}.eq i{display:block;width:2.5px;height:35%;border-radius:2px;background:currentColor}.eq.on i{animation:eqbar 1s var(--ease-in-out) infinite}.eq.on i:nth-child(2){animation-delay:-.45s}.eq.on i:nth-child(3){animation-delay:-.2s}
@keyframes eqbar{0%,100%{height:30%}50%{height:100%}}
.eq:not(.on) i{height:30%}.eq:not(.on) i:nth-child(2){height:55%}
.sidepanels{position:absolute;z-index:6;bottom:calc(28px + var(--sab));left:calc(28px + var(--sal));display:none;width:272px;max-height:calc(100dvh - 330px);flex-direction:column;gap:10px;overflow:hidden;pointer-events:none}.sidepanels .pcard{pointer-events:auto}
@media (min-width:1100px) and (min-aspect-ratio:1/1){.sidepanels{display:flex}.menu .js-ag,.menu .js-np{display:none}}
@media (prefers-reduced-motion:reduce){
  .tdots i{animation:none!important;opacity:.75}.tline{transition:none}
  .emoglow{animation:none!important;opacity:.85}.stageinfo .edot::after{animation:none!important;opacity:0}
  .pl.running .ps{animation:none!important}.eq.on i{animation:none!important;height:70%}.eq.on i:nth-child(2){height:100%}.eq.on i:nth-child(3){height:45%}
  :root{transition:none}
}

/* v17 — full-bleed stage; the chat is a full-screen sheet you pull in from the right (press and hold the stage to talk). */
.tabbar{display:none}
.tbar{position:absolute;top:0;right:0;left:0;background:none}
.app{--pull:0;touch-action:pan-y;-webkit-touch-callout:none}
.app.view-chat{--pull:1}
.app .stage::after{display:none}
.app:not(.view-chat),.app:not(.view-chat) .stage{-webkit-user-select:none;user-select:none}
.composer .mic{display:none}
.app .chat{position:absolute;z-index:22;inset:0;display:flex;flex:none;flex-direction:column;justify-content:flex-end;width:auto;height:auto;overflow:hidden;background:linear-gradient(180deg,var(--surface-secondary-tint),var(--surface-primary-tint) 58%,var(--surface-page));box-shadow:-22px 0 48px color-mix(in srgb,var(--ink-900) calc(var(--pull) * 18%),transparent);transform:translate3d(calc((1 - var(--pull)) * 100%),0,0);transition:transform 420ms var(--ease-out),visibility 0s linear 420ms;visibility:hidden;will-change:transform}
.app.view-chat .chat,.app.dragging .chat{visibility:visible;transition:transform 420ms var(--ease-out),visibility 0s}
.app .chat::before{content:"";position:absolute;z-index:0;inset:0;background:var(--pattern-dots);opacity:.32;pointer-events:none}
.app .chat::after{content:"";position:absolute;z-index:3;top:50%;left:7px;width:5px;height:52px;margin-top:-26px;border-radius:3px;background:var(--fg-3);opacity:.4;pointer-events:none}
.app .chat .msgs{position:relative;z-index:1;max-height:none;flex:1 1 auto;padding-top:calc(104px + var(--sat));padding-bottom:12px;-webkit-user-select:text;user-select:text}
.app .chat .msgs>:first-child{margin-top:auto}
.app .chat .dock{position:relative;z-index:1;padding-bottom:calc(14px + var(--sab))}
.app .body{transform:translate3d(calc(var(--pull) * -14%),0,0);transition:transform 420ms var(--ease-out)}
.app.dragging .chat,.app.dragging .body,.app.dragging .holdhint,.app.dragging .caption{transition:none}
.holdhint{position:absolute;z-index:5;width:max-content;bottom:calc(26px + var(--sab));left:50%;max-width:calc(100% - 32px);margin:0;padding:10px 18px;border:1px solid var(--glass-border);border-radius:var(--radius-pill);background:var(--glass-bg);box-shadow:var(--shadow-1);color:var(--fg-2);font-size:12px;font-weight:700;text-align:center;opacity:calc(1 - var(--pull) * 2);transform:translateX(-50%);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.app.listening .holdhint{background:var(--brand-primary);border-color:transparent;box-shadow:var(--btn-glow);color:var(--fg-on-brand);animation:holdpulse 1.2s ease-in-out infinite}
@keyframes holdpulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--brand-primary) 22%,transparent)}}
.caption{position:absolute;z-index:6;bottom:calc(84px + var(--sab));left:50%;width:min(calc(100% - 32px),var(--chat-max));max-height:32dvh;margin:0;padding:12px 16px;overflow:hidden;border:1.5px solid var(--border-1);border-radius:20px 20px 20px 6px;background:var(--surface-card);box-shadow:var(--shadow-1);color:var(--fg-1);font-size:15px;line-height:1.5;opacity:calc(1 - var(--pull) * 2);transform:translateX(-50%);overflow-wrap:anywhere;pointer-events:none}
.caption[hidden]{display:none}.caption .tdots{display:inline-flex}
.app.view-stage:has(.lockcard:not([hidden])) #convEmpty{display:block}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .app .chat{left:auto;width:min(720px,56vw)}.app .chat .msgs{padding-right:34px;padding-left:34px}.app .body{transform:none}.caption{left:calc(50% - 20px)}
}
@media (max-height:590px) and (orientation:landscape){.holdhint{bottom:calc(12px + var(--sab))}.caption{bottom:calc(64px + var(--sab))}}

/* v18 — fill the real screen (incl. the iOS home-indicator zone) and add the "drag for chat" cue. */
body{position:fixed;inset:0;height:auto;min-height:-webkit-fill-available}
.draghint{position:absolute;z-index:25;top:calc(var(--sat) + 68px);right:calc(12px + var(--sar));display:inline-flex;min-height:36px;align-items:center;gap:4px;padding:0 14px 0 9px;border:1px solid var(--glass-border);border-radius:var(--radius-pill);background:var(--glass-bg);box-shadow:var(--shadow-1);color:var(--fg-2);font-size:12px;font-weight:800;opacity:calc(1 - var(--pull) * 2);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);transition:opacity var(--dur-base) var(--ease-out)}
.draghint svg{width:18px;height:18px;fill:none;stroke:var(--brand-primary);stroke-linecap:round;stroke-linejoin:round;stroke-width:3;animation:nudgel 1.6s ease-in-out infinite}
@keyframes nudgel{50%{transform:translateX(-4px)}}
.app.view-chat .draghint{visibility:hidden}.app.dragging .draghint{transition:none}
@media (min-width:900px) and (min-aspect-ratio:1/1){.draghint{right:calc(24px + var(--sar))}}
@media (max-height:590px) and (orientation:landscape){.draghint{top:calc(var(--sat) + 58px)}}

/* v19 — extend over the iOS home-screen bottom strip; "Drag for chat" is plain animated text. */
:root{--gapfix:0px;--sab:calc(env(safe-area-inset-bottom, 0px) + var(--gapfix))}
body{bottom:calc(-1 * var(--gapfix))}
.draghint{min-height:44px;gap:0;padding:0 10px 0 6px;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:13px;letter-spacing:.02em}
.draghint span{display:inline-block;background:linear-gradient(90deg,var(--fg-2) 35%,var(--brand-primary) 50%,var(--fg-2) 65%) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 1px 0 rgba(255,255,255,.75));animation:dragshimmer 2.4s linear infinite,dragnudge 2.4s ease-in-out infinite}
@keyframes dragshimmer{to{background-position:0 0}}
@keyframes dragnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}

/* v20 — "Drag for chat": flat gray, regular weight, small arrow; screen-metrics panel (triple-tap the ROXHEIRIS wordmark). */
.draghint{gap:3px;padding:0 10px 0 4px;color:var(--fg-2);font-size:13px;font-weight:500;letter-spacing:0}
.draghint span{background:none;-webkit-text-fill-color:currentColor;color:var(--fg-2);filter:none;animation:none;font-weight:500}
.draghint svg{display:block;width:16px;height:16px;fill:none;stroke:var(--fg-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:nudgel 1.6s ease-in-out infinite}
.brandlock{pointer-events:auto}
.metrics{position:fixed;z-index:9999;top:calc(var(--sat) + 8px);right:8px;left:8px;margin:0;padding:10px 12px;border-radius:12px;background:rgba(10,10,20,.88);color:#e9ffe9;font:11px/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap;pointer-events:auto}

/* v21 — iOS home-screen app: a scrollable root (not a fixed body) is what lets WebKit paint the whole screen, incl. the bottom 47px. */
html.ios-sa{height:auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}
html.ios-sa body{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;width:100%;height:100vh;height:100lvh;min-height:100vh;min-height:100lvh;overflow:hidden}
html.ios-sa .app{touch-action:none}
html.ios-sa .msgs{touch-action:pan-y}

/* ── Design review pass (REVIEW.md APP items) ──────────────────────────── */
/* P0 #1: no default fade (it ate the newest user bubble); a short fade only once the log is scrolled (class set in app.js). */
.msgs,.app.view-stage .msgs{-webkit-mask-image:none;mask-image:none}
.msgs.scrolled{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
.app.view-stage .msgs{max-height:42dvh}
@media (min-width:900px) and (min-aspect-ratio:1/1){.msgs,.app.view-stage .msgs{-webkit-mask-image:none;mask-image:none}.msgs.scrolled{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);mask-image:linear-gradient(180deg,transparent 0,#000 22px)}.app.view-stage .msgs{max-height:42dvh}}
/* P0 #2 + P2 #14: glass chip behind meta so it reads over Mao's art; 11px. */
.mt{padding:3px 9px;border-radius:var(--radius-pill);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:var(--fg-2);font-size:11px}
.m:not(.me) .mt{color:var(--fg-1)}.m:not(.me) .mt>span:not(.edot){color:var(--fg-link)}
.m.thinking .mt{color:var(--fg-1)}
.dv,.chip,.stage-name,.settings-eyebrow,.credit{font-size:11px}.tbar .cn,.brandlock .jp{font-size:11px}
@media (max-width:389px){.tbar .cn{font-size:11px}}
/* P1 #5: Me sheet gets a soft shadow (pop shadow made a crescent on full-height sheets) and a sunken ground so white cards separate. */
.menu{background:var(--surface-sunken);box-shadow:var(--shadow-3)}
:root[data-palette="night"] .menu{background:var(--surface-page);box-shadow:var(--shadow-pop-lg)}
/* P1 #6: no reserved caption row in the name card. */
.nameform .cap{min-height:0}.nameform .cap:empty{display:none}
/* P1 #9: usage / progress track visible on white cards. */
.bar{background:var(--ink-100);box-shadow:inset 0 0 0 1px var(--ink-200)}
:root[data-palette="night"] .bar,:root[data-theme="dark"] .bar{background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border-2)}
/* P1 #10: emotion glow is feathered (no hard 2px frame) and subtler on dark; hidden while the Me sheet is open. */
:root[data-palette="night"] .emoglow,:root[data-theme="dark"] .emoglow{--eg:.24;box-shadow:inset 0 0 70px color-mix(in srgb,var(--emotion-current) calc(var(--eg) * 85%),transparent),inset 0 0 140px color-mix(in srgb,var(--emotion-current) calc(var(--eg) * 40%),transparent)}
:root[data-palette="night"] .app[data-emo="neutral"] .emoglow,:root[data-theme="dark"] .app[data-emo="neutral"] .emoglow{--eg:.1}
.emoglow{transition:opacity var(--dur-base) var(--ease-out)}.app:has(#acctMenu:not([hidden])) .emoglow,.app.view-chat .emoglow{opacity:0}
/* P2 #16: colour swaps use ease-out; spring stays on transform only. */
.tabbar button{transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-spring)}
/* P2 #18: typing dots keep contrast on every bubble. */
.tdots i{background:var(--brand-primary)}
/* P1 #8: Explorer stage shows only the lock card; the empty-state hint card is hidden (replaces the v17 re-show above). */
.app.view-stage:has(.lockcard:not([hidden])) #convEmpty{display:none}
/* P1 #7: desktop balance. The agenda/now-playing rail sits left, so Mao is centred in the remaining space (avatar.js reads --mao-x) instead of leaving the right half empty; the caption/hint stay centred under her. */
@media (min-width:900px) and (min-aspect-ratio:1/1){.stage{--mao-x:.58;--mao-visible:.7;--mao-drop:.05}.stage-kana{left:34%;top:17%}.stage .glow{left:58%}.caption,.holdhint{left:58%}}

/* ── Round-2 fixes ─────────────────────────────────────────────────────── */
/* P1-1: Explorer stage hint is a tappable link to /subscribe (JS toggles .explorer). */
.holdhint.explorer{pointer-events:auto;cursor:pointer;color:var(--fg-1);text-decoration:none}.holdhint.explorer:focus-visible{outline:3px solid var(--brand-primary);outline-offset:3px}
.app.view-chat .holdhint.explorer{pointer-events:none}
/* P1-2: desktop chat view gives Mao the free half (stage shrinks to the area left of the chat column; avatar.js re-lays out on every resize frame). */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .stage{transition:width 420ms var(--ease-out)}
  .app.view-chat .stage{width:calc(100% - min(680px,52vw))}
  .app.view-chat .stage::after{display:none}
  .app.view-chat .stage-kana{left:6%}
}
@media (prefers-reduced-motion:reduce){.stage{transition:none}}
/* P2: Sun user bubble follows the gold palette, dark ink on gold (~9:1). */
:root[data-palette="sun"] .bb.mine{background:var(--brand-primary);color:var(--fg-on-brand)}
/* P2: no stage chrome under the open Me sheet. */
.app:has(#acctMenu:not([hidden])) .holdhint,.app:has(#acctMenu:not([hidden])) .draghint{visibility:hidden}
@media (max-width:899px){.app:has(#acctMenu:not([hidden])) .stage canvas{visibility:hidden}}
/* P2: Drag-for-chat gets a glass chip so it reads over the neon kana. */
.draghint{padding:0 12px 0 6px;border:1px solid var(--glass-border);border-radius:var(--radius-pill);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-1)}
.draghint span,:root[data-palette="night"] .draghint span{color:var(--fg-1);-webkit-text-fill-color:currentColor}
/* P2: day chip breathing room under the logo row. */
.dv{margin-top:8px}

/* 2026-10-04 Roxheiris rename: 9-letter wordmark must fit the sign-in card on phones */
.lcard h1.wm{font-size:clamp(24px,7.2vw,44px)}
.login{grid-template-columns:minmax(0,1fr)}