:root {
  --bg: #030712;
  --panel: rgba(9, 18, 34, .72);
  --text: #f3f9ff;
  --muted: #8797aa;
  --cyan: #54e9ff;
  --blue: #3588ff;
  --gold: #ffc866;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-family: Manrope, "Noto Sans SC", sans-serif; overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }

#ambient { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .65; }
.app-shell { position: relative; z-index: 1; width: min(100%, 520px); height: 100dvh; margin: auto; display: flex; flex-direction: column; overflow: hidden; }
.app-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 35%, rgba(25,118,181,.1), transparent 35%), linear-gradient(180deg, rgba(0,0,0,.04), rgba(2,8,18,.58)); }

.topbar { position: relative; z-index: 5; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: var(--safe-top) 18px 8px; }
.identity { text-align: center; letter-spacing: .2em; }
.identity strong { display: block; font-size: 12px; font-weight: 700; }
.identity span { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.identity i { width: 5px; height: 5px; border-radius: 50%; background: #59ffc5; box-shadow: 0 0 8px #59ffc5; }
.icon-button { width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.04); backdrop-filter: blur(12px); cursor: pointer; }
#menuButton { gap: 6px; align-content: center; }
#menuButton span { width: 17px; height: 1.5px; background: #c8d3df; border-radius: 2px; }
#menuButton span:last-child { width: 11px; transform: translateX(-3px); }
.sound-button svg { width: 20px; fill: none; stroke: #c8d3df; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound-button.muted { opacity: .45; }

.presence { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 0; }
.face-stage { position: relative; width: min(86vw, 380px); aspect-ratio: 1 / 1.16; cursor: pointer; }
#faceCanvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 22px rgba(38,185,255,.42)); }
.halo { position: absolute; inset: 10% -2% 12%; border: 1px solid rgba(80,220,255,.11); border-radius: 48%; filter: blur(.3px); animation: orbit 16s linear infinite; }
.halo::before, .halo::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.halo::before { top: 8%; left: 18%; }.halo::after { bottom: 12%; right: 14%; }
.halo-b { inset: 14% 6% 17%; opacity: .5; animation-direction: reverse; animation-duration: 11s; }
.scanline { position: absolute; left: 16%; right: 16%; height: 1px; top: 20%; background: linear-gradient(90deg, transparent, rgba(100,235,255,.5), transparent); box-shadow: 0 0 8px rgba(100,235,255,.6); opacity: .35; animation: scan 5s ease-in-out infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes scan { 0%,100% { top: 18%; opacity: 0; } 30%,70% { opacity: .4; } 50% { top: 78%; } }

.state-copy { position: relative; z-index: 2; width: 90%; text-align: center; margin-top: -28px; transition: .3s ease; }
.state-label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid rgba(109,225,255,.13); border-radius: 99px; color: #8eb9ca; background: rgba(3,12,22,.44); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.state-label span { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.state-copy h1 { margin: 12px 0 6px; font-family: "Noto Sans SC", sans-serif; font-size: clamp(21px, 6vw, 28px); font-weight: 500; letter-spacing: -.03em; }
.state-copy p { margin: 0; color: var(--muted); font-size: 12px; }

.conversation { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 7px; max-height: 116px; overflow-y: auto; padding: 4px 22px 10px; scrollbar-width: none; mask-image: linear-gradient(transparent, black 18%); }
.conversation:has(.message:nth-child(2)) { padding-top: 22px; }
.message { max-width: 84%; padding: 9px 12px; border-radius: 15px; font-family: "Noto Sans SC", sans-serif; font-size: 12px; line-height: 1.5; animation: messageIn .35s ease; }
.ai-message { align-self: flex-start; color: #bfd2e4; background: rgba(21,39,58,.64); border: 1px solid rgba(130,205,255,.09); border-bottom-left-radius: 4px; }
.user-message { align-self: flex-end; color: #031119; background: linear-gradient(135deg, #68eaff, #7dcdff); border-bottom-right-radius: 4px; }
@keyframes messageIn { from { opacity: 0; transform: translateY(8px); } }

.controls { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; padding: 4px 20px var(--safe-bottom); }
.composer { height: 42px; grid-column: 1 / 4; display: flex; align-items: center; padding: 0 4px 0 15px; margin-bottom: 13px; border: 1px solid rgba(126,192,226,.13); border-radius: 18px; background: rgba(9,20,34,.66); backdrop-filter: blur(16px); }
.composer input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-family: "Noto Sans SC", sans-serif; font-size: 13px; }
.composer input::placeholder { color: #64758a; }
.composer button { width: 35px; height: 35px; border: 0; border-radius: 13px; display: grid; place-items: center; background: rgba(83,225,255,.1); cursor: pointer; }
.composer svg { width: 18px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mic-button { position: relative; grid-column: 2; width: 64px; height: 64px; margin: auto; border: 1px solid rgba(141,241,255,.42); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 32%, #6ef0ff, #137eb4 65%, #07314f); box-shadow: 0 0 0 8px rgba(47,185,225,.06), 0 0 34px rgba(41,194,245,.33), inset 0 1px 1px rgba(255,255,255,.7); cursor: pointer; transition: transform .2s ease, background .3s ease; }
.mic-button:active { transform: scale(.94); }
.mic-button svg { width: 25px; fill: none; stroke: white; stroke-width: 1.6; stroke-linecap: round; }
.pulse-ring { position: absolute; inset: -11px; border: 1px solid rgba(84,233,255,.22); border-radius: inherit; }
.listening .pulse-ring { animation: pulse 1.3s ease-out infinite; }
.listening .mic-button { background: radial-gradient(circle at 40% 32%, #ffd38a, #e98234 62%, #5e2716); border-color: rgba(255,210,129,.7); box-shadow: 0 0 34px rgba(255,144,54,.42); }
@keyframes pulse { to { transform: scale(1.35); opacity: 0; } }
.hint { grid-column: 1 / 4; margin: 9px 0 0; color: #596a7f; font-size: 9px; letter-spacing: .08em; text-align: center; }

.drawer { position: fixed; z-index: 20; inset: 0; visibility: hidden; background: rgba(0,5,12,0); transition: .35s ease; }
.drawer.open { visibility: visible; background: rgba(0,5,12,.7); backdrop-filter: blur(8px); }
.drawer-panel { width: min(86%, 390px); height: 100%; padding: calc(var(--safe-top) + 12px) 24px 28px; background: linear-gradient(150deg, #0b1727, #040a13 75%); border-right: 1px solid rgba(100,220,255,.12); transform: translateX(-102%); transition: .35s cubic-bezier(.2,.8,.2,1); }
.drawer.open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.drawer-head small { color: var(--cyan); font-size: 8px; letter-spacing: .24em; }.drawer-head h2 { margin: 3px 0 0; font-size: 26px; letter-spacing: .16em; }
#closeMenu { font-size: 28px; font-weight: 200; }
.drawer-panel > p { color: #8fa2b5; font-family: "Noto Sans SC", sans-serif; font-size: 13px; line-height: 1.8; margin-bottom: 28px; }
.drawer-action { width: 100%; display: flex; justify-content: space-between; padding: 17px 2px; border: 0; border-bottom: 1px solid rgba(142,203,232,.1); background: none; color: #d6e5f2; text-align: left; cursor: pointer; }
.drawer-action span { color: var(--cyan); }
.memory-panel { margin-top: 25px; padding: 15px; border: 1px solid rgba(92,211,255,.12); border-radius: 15px; background: rgba(22,82,112,.09); }
.memory-panel > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.memory-panel small { color: var(--cyan); font-size: 7px; letter-spacing: .17em; }
.memory-panel strong { color: #8ba7b9; font-size: 9px; font-weight: 500; }
.memory-list { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 10px; }
.memory-list span { overflow: hidden; padding: 7px 9px; border-radius: 8px; color: #b9d2e2; background: rgba(100,215,255,.06); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.memory-panel p { margin: 0; color: #60798a; font-family: "Noto Sans SC", sans-serif; font-size: 8px; line-height: 1.6; }
.privacy { position: absolute; left: 24px; right: 24px; bottom: calc(var(--safe-bottom) + 12px); display: flex; gap: 11px; align-items: center; padding: 14px; border-radius: 14px; color: #66ddcd; background: rgba(53,206,180,.07); }
.privacy div { display: flex; flex-direction: column; gap: 2px; }.privacy strong { color: #a5c9c8; font-size: 11px; }.privacy small { color: #657f82; font-size: 9px; }

@media (min-height: 800px) { .face-stage { width: min(90vw, 410px); } .conversation { max-height: 132px; } }
@media (max-height: 680px) { .face-stage { width: min(60vw, 250px); } .state-copy { margin-top: -32px; } .state-copy p { display: none; } .conversation { max-height: 80px; } .controls { padding-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }