/* A single DOM overlay: bounded entry/exit effects, no extra WebGL renderer. */
.stellar-echo {
  position:absolute; z-index:35; left:clamp(20px,3vw,56px); bottom:104px;
  width:min(386px,calc(100% - 40px)); color:#edfaff; isolation:isolate;
  font-family:inherit; pointer-events:auto; --echo-accent:#91f6ef;
}
.stellar-echo[hidden] { display:none!important; }
.echo-surface {
  position:relative; padding:14px 22px 13px; overflow:hidden;
  background:linear-gradient(118deg,rgba(17,48,60,.96),rgba(4,17,30,.94) 66%,rgba(9,29,43,.95));
  border:1px solid #9cf9ee40; border-radius:3px 22px 3px 22px;
  box-shadow:0 16px 48px #0006,inset 0 1px 0 #bafff81a;
  transform-origin:left center;
}
.echo-surface::before { content:""; position:absolute; left:0; top:24px; bottom:24px; width:2px; background:linear-gradient(transparent,var(--echo-accent),transparent); opacity:.8; }
.echo-header { display:flex; align-items:center; gap:9px; color:#afcfda; font-size:12px; letter-spacing:3px; line-height:1; }
.echo-title { flex:1; min-width:0; line-height:1.6; letter-spacing:.5px; overflow-wrap:anywhere; }
.echo-header > :is(.echo-mark,.echo-signal,button) { flex-shrink:0; }
.echo-mark { font-size:23px; color:var(--echo-accent); text-shadow:0 0 12px #91f6ef77; }
.echo-signal { display:flex; gap:3px; height:15px; align-items:center; margin-left:auto; opacity:.65; }
.echo-signal i { width:2px; height:5px; background:var(--echo-accent); }
.echo-signal i:nth-child(2n) { height:10px; }.echo-signal i:nth-child(3) { height:15px; }
.echo-kind { margin:13px 0 8px; color:var(--echo-accent); font-size:11px; letter-spacing:2px; }
.stellar-echo .echo-message { display:block; width:100%; min-height:76px; padding:0; margin:0; text-align:left; font-family:inherit; font-size:17px; line-height:1.95; letter-spacing:.3px; overflow-wrap:anywhere; cursor:pointer; }
.echo-reserve { display:block; visibility:hidden; }.echo-copy { position:absolute; inset:0; text-align:left; }
.echo-source { margin:13px 0 10px; font-size:11px; line-height:1.65; color:#a1bbc7; letter-spacing:.4px; overflow-wrap:anywhere; }
.echo-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #b1f8f012; padding-top:7px; }
.echo-actions a { display:flex; align-items:center; min-height:40px; color:#b4fff6; font-size:13px; text-decoration:none; cursor:pointer; }
.stellar-echo button { font-family:inherit; cursor:pointer; }
.stellar-echo :is(button,a):focus-visible { outline:2px solid #b4fff6!important; outline-offset:4px; }
.echo-actions button { font-size:11px; min-height:40px; padding:0 4px; color:#a1bbc7; }
.echo-header button { width:36px; min-height:36px; padding:0; font-size:21px; line-height:1; margin-right:-11px; margin-left:3px; }
/* Keep these quiet text actions inside the hologram, outside the global glass-button treatment. */
html[data-screen="home-usable"] #app #lifeform-stage .stellar-echo :is(button,a) {
  --v2-button-fill:transparent; --v2-button-edge:transparent; --v2-button-ink:inherit;
  background:transparent!important; border:0!important; border-radius:3px!important;
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:inherit!important;
}
html[data-screen="home-usable"] #app #lifeform-stage .stellar-echo :is(button,a)::after { display:none!important; content:none!important; }
html[data-screen="home-usable"] #app #lifeform-stage .stellar-echo .echo-message { color:#edfaff!important; font-size:17px!important; line-height:1.95!important; font-weight:400!important; }
html[data-screen="home-usable"] #app #lifeform-stage .stellar-echo .echo-actions a { color:#b4fff6!important; }
html[data-screen="home-usable"] #app #lifeform-stage .stellar-echo .echo-actions button { color:#a1bbc7!important; }
.echo-cursor { display:inline-block; width:2px; height:1em; margin-left:5px; vertical-align:-2px; background:#b4fff6; box-shadow:0 0 8px #91f6ef; }
.stellar-echo[data-phase="reading"] .echo-cursor { opacity:0; }
.echo-reading-light { position:absolute; left:22px; right:22px; bottom:0; height:1px; background:linear-gradient(90deg,transparent,#91f6ef88 35%,#b0adff44 65%,transparent); }
.echo-beam { position:absolute; top:50%; left:-10px; right:-10px; height:2px; background:#d3fffb; box-shadow:0 0 12px #91f6ef,0 0 25px #6edbdc; opacity:0; pointer-events:none; }
.echo-scan { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,#b2ffff28 49.5%,#d5fffc66 50%,transparent 51%); pointer-events:none; opacity:0; }
.echo-particles { position:absolute; inset:0; pointer-events:none; z-index:2; }
.echo-particles i { position:absolute; left:var(--x); top:var(--y); width:3px; height:2px; opacity:0; background:#affff2; box-shadow:0 0 7px #74e8f5; }
.stellar-echo[data-phase="entering"][data-motion="full"] .echo-beam { animation:echo-beam-in .8s ease-out both; }
.stellar-echo[data-phase="entering"][data-motion="full"] .echo-surface { animation:echo-materialize .72s cubic-bezier(.16,1,.3,1) both; }
.stellar-echo[data-phase="entering"][data-motion="full"] .echo-scan { animation:echo-scan-in .75s .2s ease-out both; }
.stellar-echo[data-phase="entering"][data-motion="full"] .echo-particles i { animation:echo-gather .65s var(--delay) ease-out both; }
.stellar-echo[data-phase="leaving"] { pointer-events:none; }
.stellar-echo[data-phase="leaving"][data-motion="full"] .echo-surface { animation:echo-dissolve .5s cubic-bezier(.65,0,.9,.35) both; }
.stellar-echo[data-phase="leaving"][data-motion="full"] .echo-beam { animation:echo-beam-out .6s ease-in both; }
.stellar-echo[data-phase="leaving"][data-motion="full"] .echo-particles i { animation:echo-scatter .38s var(--delay) ease-out both; }
.echo-sr { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@keyframes echo-materialize {
  0% { opacity:0; transform:translateX(-14px) scaleX(.15) scaleY(.006); clip-path:inset(0 0 0 0); }
  24% { opacity:.85; transform:translateX(0) scaleX(1) scaleY(.006); }
  65% { opacity:1; transform:scaleX(1) scaleY(1); clip-path:inset(0 0 0 0); }
  78% { clip-path:polygon(0 0,100% 0,100% 46%,96% 46%,96% 49%,100% 49%,100% 100%,0 100%); }
  100% { opacity:1; transform:none; clip-path:inset(0); }
}
@keyframes echo-beam-in { 0% { opacity:0; transform:scaleX(.02); } 25% { opacity:1; transform:scaleX(1); } 50% { opacity:.65; } 100% { opacity:0; transform:scaleX(1.05); } }
@keyframes echo-scan-in { 0% { opacity:0; transform:translateY(-65%); } 25% { opacity:1; } 100% { opacity:0; transform:translateY(65%); } }
@keyframes echo-gather { 0% { opacity:0; transform:translate(calc(var(--dx) * -.4),var(--dy)); } 40% { opacity:.7; } 100% { opacity:0; transform:translate(0,0); } }
@keyframes echo-dissolve { 0% { opacity:1; transform:none; } 30% { opacity:.85; transform:translateX(8px) skewX(-2deg); } 70% { opacity:.3; transform:translateX(26px) scaleY(.025); } 100% { opacity:0; transform:translateX(52px) scaleX(.2) scaleY(.005); } }
@keyframes echo-beam-out { 0%,30% { opacity:0; transform:scaleX(1); } 55% { opacity:.8; transform:translateX(30px) scaleX(.85); } 100% { opacity:0; transform:translateX(100px) scaleX(.02); } }
@keyframes echo-scatter { 0% { opacity:0; transform:translate(0,0); } 25% { opacity:.9; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)); } }
/* Arrival uses the same materialize / scan / dissolve motion as a stellar echo. */
#lifeform-stage.v2-universe .universe-arrival { transform-origin:left center; border-radius:3px 24px 3px 24px; border-color:#9cf9ee40; background:linear-gradient(118deg,rgba(17,48,60,.97),rgba(4,17,30,.96) 66%,rgba(9,29,43,.97)); }
.universe-arrival[data-motion="full"][data-phase="entering"] { animation:echo-materialize .72s cubic-bezier(.16,1,.3,1) both; }
.universe-arrival[data-motion="full"]::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(transparent 42%,#9effef22 49%,#c7fff58c 50%,#9effef22 51%,transparent 58%); }
.universe-arrival[data-motion="full"][data-phase="entering"]::before { animation:echo-scan-in .75s .2s ease-out both; }
.universe-arrival[data-motion="full"][data-phase="leaving"] { animation:echo-dissolve .5s cubic-bezier(.65,0,.9,.35) both; pointer-events:none; }
.universe-arrival [data-arrival-typing] { position:relative; cursor:pointer; }
.arrival-type-reserve { display:block; visibility:hidden; }
.arrival-type-ink { position:absolute; inset:0; }
.arrival-type-ink:not(:empty)::after { content:"▍"; color:#91f6ef; animation:headline-caret .8s steps(2,end) infinite; }
@media(prefers-reduced-motion:reduce) { .universe-arrival,.universe-arrival::before,.arrival-type-ink::after { animation:none!important; }.universe-arrival::before,.arrival-type-ink::after { display:none; } }
.echo-settings { margin-top:18px; border-top:1px solid #d2f5f019; padding-top:16px; }
.echo-settings h3 { margin:0 0 8px; }.echo-settings p { margin:0 0 12px; color:var(--light-muted); font-size:12px; line-height:1.7; }
#lifeform-stage.v2-universe .echo-settings h3 { display:block; font-size:14px; }
.echo-settings label { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; font-size:13px; }
.echo-settings input { accent-color:#91f6ef; width:18px; height:18px; }
.echo-settings > button { margin-top:10px; width:100%; min-height:44px; }
.echo-settings .echo-setting-status:empty { display:none; }
.v2-home.v2-clean-locked .stellar-echo,.v2-home[data-flow="true"] .stellar-echo { visibility:hidden; pointer-events:none; }
@media(max-width:700px) {
  .stellar-echo { left:16px; bottom:152px; width:calc(100% - 32px); }
  .echo-surface { padding:10px 18px 9px; }.echo-kind { margin-top:8px; }
  html[data-screen="home-usable"] #app #lifeform-stage .stellar-echo .echo-message { font-size:15px!important; line-height:1.8!important; min-height:64px; }
  .echo-source { margin:10px 0 7px; }.echo-actions { padding-top:3px; }
}
@media(max-height:520px) and (min-width:701px) {
  .stellar-echo { bottom:78px; width:340px; }.echo-surface { padding:8px 18px; }
  html[data-screen="home-usable"] #app #lifeform-stage .stellar-echo .echo-message { min-height:50px; font-size:14px!important; line-height:1.7!important; }.echo-kind { margin-top:5px; }.echo-source { margin:7px 0; }
  .echo-surface { max-height:calc(100dvh - 178px); overflow-y:auto; }
}
@media(prefers-reduced-motion:reduce) { .stellar-echo * { animation:none!important; }.echo-cursor,.echo-beam,.echo-scan,.echo-particles { display:none; } }
.stellar-echo[data-motion="still"] :is(.echo-cursor,.echo-beam,.echo-scan,.echo-particles) { display:none; }
@media(forced-colors:active) { .echo-surface { background:Canvas; color:CanvasText; border:1px solid CanvasText; }.echo-beam,.echo-scan,.echo-particles { display:none; } }
