@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap");

/* Avata chat skin: white + grey, cinematic. Loaded by functions/[[path]].js */
#chat {
  --mc: #e9e9e9;
  --c-bg: #141414; --c-surface: #1e1e1e; --c-raise: #2a2a2a; --c-line: #303030;
  --c-text: #ececec; --c-dim: #9a9a9a;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  background: linear-gradient(to bottom, rgba(8,8,8,.35), rgba(8,8,8,.15) 40%, rgba(8,8,8,.55)) !important;
  isolation: isolate;
}
body.gl #chat { background: linear-gradient(to bottom, rgba(8,8,8,.35), rgba(8,8,8,.12) 40%, rgba(8,8,8,.55)) !important; }
#chat .av-mirror, #chat .msg.user { text-shadow: 0 1px 12px rgba(0,0,0,.55); }

/* slow drifting grey light behind everything */
#chat::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 25% 20%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(42% 34% at 80% 75%, rgba(255,255,255,.05), transparent 70%);
  animation: avDrift 18s ease-in-out infinite alternate;
}
@keyframes avDrift { to { transform: translate3d(6%, -4%, 0) rotate(8deg); } }

/* header: quiet and minimal */
#chat .chathead { background: transparent !important; border-bottom: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 14px 14px 6px; }
#chat .chathead .iconbtn { border: 0; color: var(--c-text); }
#chat .chathead .iconbtn:hover { background: var(--c-raise); color: var(--c-text); }
#chat #voiceBtn, #chat #newChat { display: none; }
#chat .orb { width: 26px; height: 26px; background: radial-gradient(circle at 35% 30%, #fff, #a9a9a9 55%, #2a2a2a 100%) !important; box-shadow: 0 0 16px rgba(255,255,255,.22) !important; }
#chat .chattitle b { font-weight: 600; letter-spacing: -.01em; color: var(--c-text); }
#chat .chattitle span { color: var(--c-dim); }

/* thread */
#chat #thread { padding: 18px 20px 28px; gap: 26px; }
#chat .msg { animation: avIn 1.3s cubic-bezier(.16,1,.3,1) both; }
@keyframes avIn { from { opacity: 0; transform: translateY(12px); filter: blur(8px); } }

#chat .msg.user {
  max-width: 82%; background: rgba(42,42,42,.62) !important; color: var(--c-text) !important; border: 1px solid rgba(255,255,255,.08);
  padding: 11px 16px; border-radius: 20px; font-size: 1.02rem; line-height: 1.45;
  transform-origin: bottom right; animation: avUser 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes avUser { from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(5px); } }

#chat .msg.bot { max-width: 100%; width: 100%; }
#chat .msg.bot .who { display: none !important; }
#chat .msg.bot .body { display: none !important; }
#chat .msg.bot .av-mirror { position: relative; font: 400 1.16rem/1.55 var(--serif); color: var(--c-text); letter-spacing: .002em; white-space: pre-wrap; overflow-wrap: anywhere; }
#chat .msg.bot.av-p .av-mirror { color: var(--c-dim); animation: avShimmer 1.8s linear infinite; background: linear-gradient(90deg, #6f6f6f 0%, #f2f2f2 45%, #6f6f6f 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#chat .av-mirror .w { animation: avWord 1.4s cubic-bezier(.33,0,.2,1) both; }
@keyframes avWord { from { opacity: 0; } }
#chat .msg.bot.av-live .av-mirror::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.8); vertical-align: 1px; animation: avCaret 1.3s ease-in-out infinite alternate; }
@keyframes avCaret { to { opacity: .35; transform: scale(.7); } }

/* Avata's mark above each reply */
#chat .av-mark { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 .6rem var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--c-dim); }
#chat .av-mark b { font-weight: 500; transition: color .6s; }
#chat .av-mark i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9a9a9a 60%, #2a2a2a); box-shadow: 0 0 10px rgba(255,255,255,.25); }
#chat .av-mark i::before, #chat .av-mark i::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); opacity: 0; }
#chat .msg.bot.av-p .av-mark i, #chat .msg.bot.av-live .av-mark i { animation: avMarkBreathe 2s ease-in-out infinite; }
#chat .msg.bot.av-p .av-mark i::before, #chat .msg.bot.av-live .av-mark i::before { animation: avMarkRing 2.6s cubic-bezier(.25,.1,.25,1) infinite; }
#chat .msg.bot.av-p .av-mark i::after, #chat .msg.bot.av-live .av-mark i::after { animation: avMarkRing 2.6s 1.3s cubic-bezier(.25,.1,.25,1) infinite; }
#chat .msg.bot.av-p .av-mark b, #chat .msg.bot.av-live .av-mark b { color: var(--c-text); }
@keyframes avMarkBreathe { 50% { transform: scale(.88); box-shadow: 0 0 16px rgba(255,255,255,.45); } }
@keyframes avMarkRing { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

/* light line while she writes, light sweep when she finishes */
#chat .av-line { height: 1px; margin: 10px 0 0; background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.08) 60%, transparent); transform-origin: left; transform: scaleX(0); opacity: 0; transition: opacity 1.6s cubic-bezier(.25,.1,.25,1); }
#chat .msg.bot.av-live .av-line { opacity: 1; animation: avGrow 4s cubic-bezier(.25,.1,.25,1) forwards; }
@keyframes avGrow { to { transform: scaleX(1); } }
#chat .msg { position: relative; flex-shrink: 0; }
#chat .msg.user { overflow: hidden; }
#chat .msg.av-glint::after, #chat .msg.user::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); background-size: 250% 100%; background-position: 130% 0;
  mix-blend-mode: screen; animation: avSweep 2.4s .4s cubic-bezier(.25,.1,.25,1) both; }
@keyframes avSweep { from { background-position: 130% 0; } to { background-position: -30% 0; opacity: 0; } }
@keyframes avShimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
#chat .msg.error .body { color: var(--c-dim); }

/* action row under Avata's replies */
#chat .av-acts { display: flex; gap: 4px; margin: 0 0 0 -8px; }
#chat .av-acts button {
  width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--c-dim);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; transform: translateY(6px); transition: opacity .9s cubic-bezier(.25,.1,.25,1), transform .9s cubic-bezier(.16,1,.3,1), background .25s, color .25s;
}
#chat .av-acts button svg { width: 19px; height: 19px; }
#chat .av-acts button:active { background: var(--c-raise); color: var(--c-text); transform: scale(.9); }
#chat .msg.bot:not(.av-p):not(.av-live) .av-acts button { opacity: 1; transform: none; }
#chat .msg.bot:not(.av-p):not(.av-live) .av-acts button:nth-child(2) { transition-delay: .1s; }
#chat .msg.bot:not(.av-p):not(.av-live) .av-acts button:nth-child(3) { transition-delay: .2s; }
#chat .av-acts button.done { color: var(--c-text); }

/* composer: one rounded card */
#chat #composer {
  display: grid !important; grid-template-columns: auto auto 1fr auto auto;
  grid-template-areas: "box box box box box" "plus chip . mic send";
  gap: 8px 8px; align-items: center;
  margin: 0 12px calc(12px + env(safe-area-inset-bottom)); padding: 8px 10px 10px;
  background: rgba(24,24,24,.58) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 28px;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important; backdrop-filter: blur(14px) saturate(1.2) !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  transition: border-color .4s, box-shadow .6s;
}
#chat #composer:focus-within { border-color: #4a4a4a !important; box-shadow: 0 -10px 40px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.04); }
#chat:not(.off) #composer { animation: avRise 1.1s .2s cubic-bezier(.16,1,.3,1) both; }
#chat:not(.off) .chathead { animation: avDrop 1s .05s cubic-bezier(.16,1,.3,1) both; }
@keyframes avRise { from { opacity: 0; transform: translateY(40px); filter: blur(8px); } }
@keyframes avDrop { from { opacity: 0; transform: translateY(-16px); filter: blur(6px); } }

#chat #box { grid-area: box; background: transparent !important; border: 0 !important; border-radius: 0; padding: 8px 8px 2px; font-size: 1.06rem; color: var(--c-text); }
#chat #box::placeholder { color: #7d7d7d; }

#chat .av-plus, #chat #talkBtn, #chat #send {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: transform .25s cubic-bezier(.16,1,.3,1), background .3s, box-shadow .5s, opacity .3s;
}
#chat .av-plus:active, #chat #talkBtn:active, #chat #send:active { transform: scale(.88); }
#chat .av-plus { grid-area: plus; border: 0; background: rgba(255,255,255,.08); color: var(--c-text); }
#chat .av-plus svg { width: 20px; height: 20px; }
#chat .av-chip {
  grid-area: chip; height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: rgba(255,255,255,.08);
  color: var(--c-text); font: 500 .95rem var(--font-body); display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
}
#chat .av-chip i { font-style: normal; color: var(--c-dim); }
#chat .av-chip.off i { text-decoration: line-through; }

#chat #talkBtn { grid-area: mic; border: 0 !important; background: rgba(255,255,255,.08); color: var(--c-text); }
#chat #talkBtn[aria-pressed="true"] { background: #f2f2f2 !important; color: #111 !important; box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 0 28px rgba(255,255,255,.35) !important; }

#chat #send {
  grid-area: send; border: 0; font-size: 0; color: transparent;
  background: #f2f2f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 20px no-repeat;
}
#chat #send:disabled { opacity: 1; background-color: #3a3a3a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
#chat #send.av-stop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='7' width='10' height='10' rx='2' fill='%23111'/%3E%3C/svg%3E"); animation: avBreath 1.6s ease-in-out infinite; }
@keyframes avBreath { 50% { box-shadow: 0 0 0 7px rgba(255,255,255,.1); } }

#chat .talkhint { color: var(--c-dim); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  #chat *, #chat::before { animation: none !important; transition: none !important; }
}

/* keep everything grey while chatting */
#chat .wave { filter: grayscale(1) brightness(1.4); }
body:has(#chat:not(.off)) .corners i { border-color: rgba(255,255,255,.22) !important; }

/* ---------- Call screen ---------- */
.av-call {
  --cb: #0e0e0e; --ct: #ececec; --cd: #8f8f8f; --craise: rgba(255,255,255,.08); --cline: rgba(255,255,255,.12);
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--cb); color: var(--ct); font-family: "DM Sans", system-ui, -apple-system, sans-serif; overflow: hidden; isolation: isolate;
  opacity: 0; visibility: hidden; transform: scale(1.04); filter: blur(10px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1), visibility 0s linear 1.1s;
}
.av-call.open { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
.av-call::before { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(35% 28% at 50% 42%, rgba(255,255,255,.08), transparent 70%), radial-gradient(40% 30% at 20% 85%, rgba(255,255,255,.04), transparent 70%);
  animation: avcDrift 16s ease-in-out infinite alternate; }
@keyframes avcDrift { to { transform: translate3d(3%, -3%, 0) rotate(6deg); } }

.avc-top { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.avc-name { font: 600 1.15rem/1.2 "DM Sans", system-ui, sans-serif; letter-spacing: -.01em; }
.avc-time { font: 500 .7rem "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .2em; color: var(--cd); font-variant-numeric: tabular-nums; }

.avc-stage { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; position: relative; }
.avc-orb { position: relative; width: min(52vw, 220px); aspect-ratio: 1; max-width: 100%; }
.avc-core { position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffffff, #cfcfcf 30%, #6d6d6d 68%, #1c1c1c 100%);
  box-shadow: 0 0 60px rgba(255,255,255,.18), inset -10px -14px 30px rgba(0,0,0,.45);
  transform: scale(calc(1 + var(--lvl, 0) * .06)); transition: transform .35s cubic-bezier(.25,.1,.25,1), box-shadow .8s; }
.avc-halo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,.05) 45%, transparent 68%); opacity: .7; transition: opacity .8s; }
.avc-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); opacity: 0; }
.avc-spin { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid transparent; border-top-color: rgba(255,255,255,.55); border-right-color: rgba(255,255,255,.12); opacity: 0; transition: opacity .6s; }

.av-call.listening .avc-core { animation: avcBreathe 3.2s ease-in-out infinite; }
.av-call.listening .avc-ring { animation: avcRing 3.6s cubic-bezier(.25,.1,.25,1) infinite; }
.av-call.listening .avc-ring:nth-child(3) { animation-delay: 1.2s; }
.av-call.listening .avc-ring:nth-child(4) { animation-delay: 2.4s; }
.av-call.thinking .avc-core { transform: scale(.86); box-shadow: 0 0 30px rgba(255,255,255,.1), inset -10px -14px 30px rgba(0,0,0,.5); }
.av-call.thinking .avc-spin { opacity: 1; animation: avcSpin 1.4s linear infinite; }
.av-call.speaking .avc-core { animation: avcTalk 1.1s cubic-bezier(.45,0,.55,1) infinite alternate; }
.av-call.speaking .avc-halo { opacity: 1; animation: avcGlow 1.1s cubic-bezier(.45,0,.55,1) infinite alternate; }
.av-call.muted .avc-core { filter: grayscale(1) brightness(.55); animation: none; }
@keyframes avcBreathe { 50% { transform: scale(calc(.96 + var(--lvl, 0) * .06)); } }
@keyframes avcRing { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.65); } }
@keyframes avcSpin { to { transform: rotate(360deg); } }
@keyframes avcTalk { from { transform: scale(.97); } to { transform: scale(1.06); box-shadow: 0 0 90px rgba(255,255,255,.28), inset -10px -14px 30px rgba(0,0,0,.4); } }
@keyframes avcGlow { to { transform: scale(1.08); } }

.avc-bc { position: absolute; left: 50%; top: 8%; transform: translate(-50%, 8px); padding: 7px 14px; border-radius: 999px; background: var(--craise); border: 1px solid var(--cline);
  font: italic 400 1rem "Source Serif 4", Georgia, serif; color: var(--ct); opacity: 0; pointer-events: none; white-space: nowrap; }
.avc-bc.show { animation: avcBc 1.8s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes avcBc { 15% { opacity: 1; transform: translate(-50%, 0); } 70% { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -8px); } }

.avc-status { font: 500 .68rem "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--cd); min-height: 1.2em; transition: color .6s; }
.av-call.speaking .avc-status, .av-call.listening .avc-status { color: var(--ct); }

.avc-caps { width: 100%; max-width: 520px; min-height: 7.5em; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; margin: 14px 0 22px; text-align: center; }
.avc-you { font: 400 1rem/1.45 "DM Sans", system-ui, sans-serif; color: var(--cd); transition: opacity .6s; }
.avc-her { font: 400 1.22rem/1.5 "Source Serif 4", Georgia, serif; color: var(--ct); transition: opacity .6s; max-height: 4.5em; overflow: hidden; scroll-behavior: smooth; }
.avc-her.over { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.2em); mask-image: linear-gradient(to bottom, transparent, #000 1.2em); }
.avc-you:empty, .avc-her:empty { opacity: 0; }
.avc-caps .w { animation: avcWord 1.4s cubic-bezier(.33,0,.2,1) both; }
@keyframes avcWord { from { opacity: 0; } }

.avc-btns { display: flex; align-items: center; justify-content: center; gap: 22px; }
.avc-btns button { width: 62px; height: 62px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--craise); color: var(--ct);
  transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s, color .3s; }
.avc-btns button:active { transform: scale(.88); }
.avc-btns button svg { width: 24px; height: 24px; }
.avc-btns button[aria-pressed="true"] { background: #f2f2f2; color: #111; }
.avc-btns .avc-end { width: 72px; height: 72px; background: #f2f2f2; color: #111; }
.avc-btns .avc-end svg { width: 28px; height: 28px; }
.avc-lbls { display: flex; justify-content: center; gap: 22px; margin-top: 8px; }
.avc-lbls span { width: 62px; text-align: center; font: 500 .62rem "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--cd); }
.avc-lbls span:nth-child(2) { width: 72px; }
.av-call button:focus-visible { outline: 2px solid #f2f2f2; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .av-call, .av-call * , .av-call::before { animation: none !important; transition: none !important; } }

/* no scanlines */
.scan { display: none !important; }

/* ---------- Home: cleaner and lighter ---------- */
.hudcore canvas { inset: -4%; width: 108%; height: 108%; }
.hud { padding-top: 2px; }
.readout { gap: 10px; }
.readout div { animation: none; }
.tile.on { background: #f2f2f2 !important; color: #111 !important; border-color: #f2f2f2 !important; }
.tile.on svg { color: #111; }
.hero { padding-top: 4px; }
.detail { min-height: 0; padding-top: 10px; }
.homefoot { padding-block: 12px 14px; }
.ambient { transition: none !important; }
#sheet { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(0,0,0,.78) !important; }

/* ---------- New home: chat list, Start sheet, cinematic galaxy ---------- */
body.avh-on { background: #030303; }
body.avh-on #cosmos, body.avh-on #flare, body.avh-on #fx, body.avh-on .ambient, body.avh-on .vignette, body.avh-on .corners, body.avh-on #boot, body.avh-on #home { display: none !important; }
.avh-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.avh-shade { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 110%, rgba(0,0,0,.85), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,.35), transparent 30%); }
.avh-home, .avh-drawer, .avh-sheetwrap, .avh-toast, .avh-intro { --a-text: #ececec; --a-dim: #969696; --a-faint: #5c5c5c; --a-white: #f2f2f2; --a-raise: rgba(255,255,255,.08); --a-raise2: rgba(255,255,255,.14); --a-line: rgba(255,255,255,.1);
  --a-sans: "DM Sans", system-ui, -apple-system, sans-serif; --a-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --a-ease: cubic-bezier(.16,1,.3,1); --a-soft: cubic-bezier(.25,.1,.25,1);
  color: var(--a-text); font-family: var(--a-sans); }
.avh-home *, .avh-drawer *, .avh-sheetwrap * { box-sizing: border-box; }
.avh-home button, .avh-drawer button, .avh-sheetwrap button { font: inherit; color: inherit; }

/* home view */
.avh-home { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; max-width: 760px; margin: 0 auto;
  transition: opacity .8s var(--a-soft), transform .9s var(--a-ease), filter .8s var(--a-soft), visibility 0s linear 0s; }
.avh-home.off { opacity: 0; transform: scale(.97); filter: blur(10px); pointer-events: none; visibility: hidden; transition: opacity .6s var(--a-soft), transform .7s var(--a-ease), filter .6s var(--a-soft), visibility 0s linear .7s; }
.avh-top { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 6px; }
.avh-mark { flex: 1; text-align: center; font: 600 .78rem var(--a-mono); letter-spacing: .4em; padding-left: .4em; }
.avh-icon { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; transition: background .25s; }
.avh-icon:hover { background: var(--a-raise); }
.avh-icon svg { width: 20px; height: 20px; }
.avh-pd { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--a-raise2); background: transparent; display: grid; place-items: center; font: 600 .78rem var(--a-sans); cursor: pointer; flex: none; }
.avh-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 0 20px; text-align: center; }
.avh-orb { position: relative; width: min(42vw, 180px); aspect-ratio: 1; max-width: 100%; }
.avh-orb b { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff, #cfcfcf 30%, #6d6d6d 68%, #1c1c1c 100%); box-shadow: 0 0 60px rgba(255,255,255,.18), inset -10px -14px 30px rgba(0,0,0,.45); animation: avhBreathe 4s ease-in-out infinite; }
.avh-orb i { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); animation: avhRing 4.5s var(--a-soft) infinite; opacity: 0; }
.avh-orb i:nth-child(2) { animation-delay: 1.5s; } .avh-orb i:nth-child(3) { animation-delay: 3s; }
@keyframes avhBreathe { 50% { transform: scale(.96); } }
@keyframes avhRing { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.avh-eye { font: 500 .66rem var(--a-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--a-dim); }
.avh-greet { margin: 6px 0 0; font: 400 clamp(2rem, 9vw, 3.2rem)/1.04 var(--a-sans); letter-spacing: -.03em; text-wrap: balance; }
.avh-greet strong { font-weight: 700; display: block; }
.avh-start { height: 56px; padding: 0 44px; border: 0; border-radius: 28px; background: var(--a-white); color: #111 !important; font-weight: 600 !important; font-size: 1.05rem !important; cursor: pointer; box-shadow: 0 0 40px rgba(255,255,255,.18); transition: transform .3s var(--a-ease); }
.avh-start:active { transform: scale(.95); }
.avh-recent { width: 100%; max-width: 520px; margin: 0 auto; padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.avh-recent h4 { margin: 0 4px 8px; font: 500 .62rem var(--a-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--a-faint); }
.avh-rows { display: flex; flex-direction: column; gap: 8px; }
.avh-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--a-line); border-radius: 16px; background: rgba(26,26,26,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: left; cursor: pointer; transition: transform .3s var(--a-ease); }
.avh-card:active { transform: scale(.98); }
.avh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a-white); box-shadow: 0 0 10px rgba(255,255,255,.6); flex: none; }
.avh-t { flex: 1; min-width: 0; }
.avh-t b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avh-card .avh-t span { font-size: .8rem; color: var(--a-dim); }
.avh-card svg { width: 16px; height: 16px; color: var(--a-dim); flex: none; }

.avh-st { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.avh-home:not(.off) .avh-st { animation: avhUp 1.4s var(--a-ease) 1.9s forwards; }
.avh-home:not(.off) .avh-s2 { animation-delay: 2.1s; } .avh-home:not(.off) .avh-s3 { animation-delay: 2.3s; } .avh-home:not(.off) .avh-s4 { animation-delay: 2.5s; }
.avh-home.seen:not(.off) .avh-st { animation-delay: .05s; } .avh-home.seen:not(.off) .avh-s2 { animation-delay: .2s; } .avh-home.seen:not(.off) .avh-s3 { animation-delay: .35s; } .avh-home.seen:not(.off) .avh-s4 { animation-delay: .5s; }
@keyframes avhUp { to { opacity: 1; transform: none; filter: none; } }

/* opening shot */
.avh-intro { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none; background: #000; animation: avhIntroFade 2.6s 1.2s var(--a-soft) forwards; }
.avh-intro b { font: 600 .9rem var(--a-mono); letter-spacing: 1.4em; padding-left: 1.4em; color: #fff; opacity: 0; animation: avhIntroWord 2.8s .2s var(--a-ease) forwards; }
.avh-intro.quick { animation-duration: .8s; animation-delay: 0s; } .avh-intro.quick b { display: none; }
@keyframes avhIntroFade { to { opacity: 0; visibility: hidden; } }
@keyframes avhIntroWord { 0% { opacity: 0; letter-spacing: .2em; filter: blur(8px); } 45% { opacity: 1; filter: blur(0); } 100% { opacity: 0; letter-spacing: 1.4em; } }

/* chat list drawer */
.avh-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(84vw, 320px); z-index: 50; display: flex; flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(18,18,18,.88); border-right: 1px solid var(--a-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transform: translateX(-104%); transition: transform .7s var(--a-ease); }
.avh-drawer.open { transform: none; }
.avh-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .6s cubic-bezier(.25,.1,.25,1); }
.avh-scrim.on { opacity: 1; pointer-events: auto; }
.avh-dhead { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
.avh-dhead b { font: 600 .78rem var(--a-mono); letter-spacing: .32em; }
.avh-dx { margin-left: auto; }
.avh-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--a-raise); color: var(--a-dim); }
.avh-search svg { width: 16px; height: 16px; flex: none; }
.avh-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--a-text); font: 400 .95rem var(--a-sans); }
.avh-search input:focus { outline: none; }
.avh-new { margin: 10px 0 6px; height: 46px; border: 0; border-radius: 12px; background: var(--a-white); color: #111 !important; font-weight: 600 !important; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.avh-new svg { width: 18px; height: 18px; }
.avh-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.avh-group { font: 500 .62rem var(--a-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--a-faint); padding: 16px 8px 6px; }
.avh-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; cursor: pointer; transition: background .25s; animation: avhItemIn .7s var(--a-ease) both; }
.avh-item:hover, .avh-item.on { background: var(--a-raise); }
.avh-item .avh-t b { font-size: .95rem; }
.avh-item .avh-t span { display: block; font: 500 .6rem var(--a-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a-dim); }
.avh-more { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--a-dim) !important; display: grid; place-items: center; cursor: pointer; }
.avh-more svg { width: 16px; height: 16px; }
@keyframes avhItemIn { from { opacity: 0; transform: translateX(-10px); } }
.avh-empty { color: var(--a-dim); font-size: .9rem; padding: 18px 8px; }
.avh-dfoot { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--a-line); margin-top: 8px; cursor: pointer; }
.avh-dfoot b { display: block; font-weight: 600; font-size: .92rem; line-height: 1.2; }
.avh-dfoot span { font-size: .78rem; color: var(--a-dim); }
.avh-menu { position: absolute; right: 16px; z-index: 5; min-width: 160px; padding: 6px; border-radius: 12px; background: #1d1d1d; border: 1px solid var(--a-line); box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: avhPop .35s var(--a-ease) both; }
.avh-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.avh-menu button:hover { background: var(--a-raise); }
.avh-menu button.danger { color: #ff8a80 !important; }
@keyframes avhPop { from { opacity: 0; transform: scale(.94); } }
.avh-rename { width: 100%; background: #262626; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: #ececec; font: inherit; padding: 2px 6px; }

/* Start sheet */
.avh-sheetwrap { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .5s cubic-bezier(.25,.1,.25,1); }
.avh-sheetwrap.on { opacity: 1; pointer-events: auto; }
.avh-sheet { width: 100%; max-width: 560px; max-height: 86%; overflow-y: auto; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #141414; border: 1px solid var(--a-line); border-bottom: 0; transform: translateY(100%); transition: transform .8s var(--a-ease); }
.avh-sheetwrap.on .avh-sheet { transform: none; }
.avh-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--a-raise2); margin: 2px auto 14px; }
.avh-sheet h3 { margin: 0 0 4px; font: 600 1.35rem var(--a-sans); letter-spacing: -.01em; }
.avh-sheet p { margin: 0 0 14px; color: var(--a-dim); font-size: .92rem; }
.avh-sec { font: 500 .62rem var(--a-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--a-faint); margin: 18px 2px 8px; }
.avh-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avh-mode { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid var(--a-line); border-radius: 16px; background: var(--a-raise); text-align: left; cursor: pointer; transition: transform .3s var(--a-ease), background .3s; min-width: 0; }
.avh-mode:active { transform: scale(.97); }
.avh-mode b { font-weight: 600; font-size: .98rem; }
.avh-mode span { font-size: .78rem; color: var(--a-dim); line-height: 1.35; }
.avh-mode.big { grid-column: 1 / -1; background: var(--a-white); color: #111 !important; border-color: var(--a-white); }
.avh-mode.big span { color: #555; }
.avh-mode:last-child:nth-child(even) { grid-column: 1 / -1; }

.avh-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 90; transform: translate(-50%, 20px); padding: 10px 16px; border-radius: 999px; background: #1f1f1f; border: 1px solid var(--a-line); font-size: .88rem; opacity: 0; transition: opacity .4s, transform .6s var(--a-ease); pointer-events: none; }
.avh-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* chat header gets the chat-list button */
#chat .avh-chatmenu { border: 0; color: var(--c-text, #ececec); }
.avh-home button:focus-visible, .avh-drawer button:focus-visible, .avh-sheetwrap button:focus-visible, .avh-item:focus-visible { outline: 2px solid #f2f2f2; outline-offset: 2px; }

@media (min-width: 900px) {
  .avh-drawer { transform: none; }
  body.avh-on .avh-home, body.avh-on .stage { margin-left: max(320px, calc((100vw - 760px) / 2)); }
  .avh-scrim, .avh-dx, [data-avh-drawer], .avh-chatmenu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .avh-home *, .avh-drawer *, .avh-sheetwrap *, .avh-intro, .avh-intro * { animation: none !important; transition: none !important; } .avh-st { opacity: 1; transform: none; filter: none; } .avh-intro { display: none; } }