/* Companion stages use a restrained "liquid glass": clear pills over the world,
   milky panels with dark text, a static light rim and soft volume. The practice
   (session) and onboarding screens keep their own styles. */
:root {
  --lg-rim: linear-gradient(135deg, #fff 0%, #ffffff47 28%, #ffffff0f 52%, #ffffff38 78%, #ffffffbf 100%);
  --lg-volume: linear-gradient(180deg, #ffffff33 0%, #ffffff00 48%, #ffffff0d 100%);
  --lg-edge: inset 0 1.5px 1px #ffffffbf, inset 0 -1px 1px #ffffff40, inset 0 0 26px #ffffff1a, 0 12px 30px -12px #00000059;
  --lg-panel-tint: #fafcf86b;
  --lg-pill-tint: #ffffff29;
  --lg-green: #386c4c94;
}
/* Panels, the invite and the scene caption are already fixed/absolute; buttons need a box for the rim. */
body:not([data-stage=session]):not([data-stage=onboarding]) :is(
  .site-header .nav-button, .site-header .voice-entry, .site-header .round-button,
  .companion-picker #avatar-library-open, .landing-actions .primary-button, .conversation .primary-button
) { position: relative; }
body:not([data-stage=session]):not([data-stage=onboarding]) :is(
  .site-header .nav-button, .site-header .voice-entry, .site-header .round-button, .avatar-invite,
  .landing-actions, .conversation, .greeting-bubble, .companion-picker #avatar-library-open, .landing-actions .primary-button, .conversation .primary-button
), body[data-stage=landing] #scene-picker-open { isolation: isolate; }
body:not([data-stage=session]):not([data-stage=onboarding]) :is(
  .site-header .nav-button, .site-header .voice-entry, .site-header .round-button,
  .avatar-invite, .landing-actions, .conversation, .greeting-bubble,
  .companion-picker #avatar-library-open, .landing-actions .primary-button, .conversation .primary-button, .lg-thumb
)::before, body[data-stage=landing] #scene-picker-open::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 1;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Clear pills floating over the world: white text. */
body:not([data-stage=session]):not([data-stage=onboarding]) :is(.site-header .nav-button, .site-header .voice-entry, .site-header .round-button, .avatar-invite),
body[data-stage=landing] #scene-picker-open {
  border: 0; color: #fff;
  background: var(--lg-volume), linear-gradient(var(--lg-pill-tint), var(--lg-pill-tint));
  box-shadow: var(--lg-edge);
  -webkit-backdrop-filter: blur(10px) saturate(170%) brightness(1.1); backdrop-filter: var(--lg-lens,) blur(10px) saturate(170%) brightness(1.1);
}

/* Milky panels: dark text for legibility. */
body:not([data-stage=session]):not([data-stage=onboarding]) :is(.landing-actions, .conversation, .greeting-bubble) {
  border: 0; color: #1e2b23; border-radius: 30px;
  background: linear-gradient(180deg, #ffffff38 0%, #ffffff00 48%, #ffffff12 100%), linear-gradient(var(--lg-panel-tint), var(--lg-panel-tint));
  box-shadow: var(--lg-edge);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(1.08); backdrop-filter: blur(18px) saturate(170%) brightness(1.08);
}

/* Segmented 小屿 / 小岚 with a sliding glass thumb (inserted by liquid-glass.js). */
.landing-actions .companion-picker.lg-seg { position: relative; isolation: isolate; }
.landing-actions .companion-picker.lg-seg::after {
  content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: 0; height: var(--lg-seg-h, 48px); border-radius: 99px;
  background: #1e322614; box-shadow: inset 0 1px 3px #0000002e, inset 0 -1px 1px #ffffff40;
}
.landing-actions .companion-picker.lg-seg button[data-avatar-choice] {
  background: none; border: 0; box-shadow: none; border-radius: 99px; min-height: 48px; color: #1e2b23; position: relative; z-index: 2;
}
.landing-actions .companion-picker.lg-seg button[data-avatar-choice].selected { background: none; color: #1e2b23; }
.landing-actions .companion-picker .lg-thumb {
  position: absolute; isolation: isolate; z-index: 0; left: 0; top: 0; width: 0; height: var(--lg-seg-h, 48px); border-radius: 99px; pointer-events: none;
  background: var(--lg-volume), linear-gradient(#ffffffbf, #ffffffbf);
  box-shadow: inset 0 1.5px 1px #ffffffe6, inset 0 -1px 1px #ffffff59, 0 3px 10px -2px #00000040;
  transform-origin: center; will-change: transform; transition: opacity .25s;
}
.landing-actions .companion-picker .lg-thumb[data-hidden] { opacity: 0; }

/* "我的人偶" row. */
body[data-stage=landing] .companion-picker #avatar-library-open {
  border: 0; border-radius: 22px; min-height: 50px; color: #1e2b23;
  background: var(--lg-volume), linear-gradient(#ffffff59, #ffffff59);
  box-shadow: inset 0 1.5px 1px #ffffffbf, inset 0 -1px 1px #ffffff40, 0 6px 16px -10px #00000040;
}
body[data-stage=landing] .companion-picker #avatar-library-open.selected { background: var(--lg-volume), linear-gradient(#ffffffbf, #ffffffbf); color: #1e2b23; }

/* Prominent action: tinted green glass capsule. */
body:not([data-stage=session]):not([data-stage=onboarding]) :is(.landing-actions, .conversation) :is(.primary-button, #start):not(:disabled) {
  border: 0; border-radius: 99px; min-height: 54px; color: #fff; font-weight: 600; letter-spacing: 1.5px; text-shadow: 0 1px 6px #0000003d;
  background: linear-gradient(180deg, #ffffff47 0%, #ffffff00 48%, #ffffff12 100%), linear-gradient(var(--lg-green), var(--lg-green));
  box-shadow: inset 0 1.5px 1px #ffffffa6, inset 0 -2px 6px #0a28143d, inset 0 0 22px #ffffff1a, 0 14px 30px -12px #143c238c;
  -webkit-backdrop-filter: blur(6px) saturate(170%) brightness(1.08); backdrop-filter: var(--lg-lens,) blur(6px) saturate(170%) brightness(1.08);
}
body:not([data-stage=session]):not([data-stage=onboarding]) :is(.landing-actions, .conversation) :is(.primary-button, #start):hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff52 0%, #ffffff00 48%, #ffffff12 100%), linear-gradient(#2f6444a8, #2f6444a8);
}
body:not([data-stage=session]):not([data-stage=onboarding]) :is(.landing-actions, .conversation) .primary-button:disabled { border-radius: 99px; }

/* Pressed glass swells slightly instead of shrinking (driven by liquid-glass.js). */
.lg-press { transform: scale(var(--lg-sx, 1), var(--lg-sy, 1)); }
#scene-picker-open.lg-press { transform: scale(var(--lg-sx, 1), var(--lg-sy, 1)); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not([data-stage=session]):not([data-stage=onboarding]) :is(.landing-actions, .conversation, .greeting-bubble) { background: #eef3ebf2; }
  body:not([data-stage=session]):not([data-stage=onboarding]) :is(.site-header .nav-button, .site-header .voice-entry, .site-header .round-button, .avatar-invite) { background: #233f30cf; }
}
@media (prefers-reduced-transparency: reduce) {
  body:not([data-stage=session]):not([data-stage=onboarding]) :is(.landing-actions, .conversation, .greeting-bubble) { background: #eef3ebf5; -webkit-backdrop-filter: none; backdrop-filter: none; }
}