* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; max-width: 100%; height: 100%; overflow: hidden; background: #020916; }
body { min-width: 0; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; font: inherit; }
.home {
  --orb: clamp(205px, 53vw, 290px);
  --sat: clamp(60px, 18vw, 82px);
  --side: 8%;
  --left: max(var(--side), env(safe-area-inset-left));
  --right: max(var(--side), env(safe-area-inset-right));
  --top: max(6%, env(safe-area-inset-top));
  --bottom: max(6%, env(safe-area-inset-bottom));
  width: 100%; max-width: 100%; height: 100dvh; overflow: hidden; position: relative;
  background: radial-gradient(circle at 50% 51%, #0755f5 0 8%, #041a50 30%, #020916 70%);
}
.decor { position: absolute; inset: 38% 0; background: linear-gradient(155deg, transparent 32%, #116dff99 50%, transparent 68%); filter: blur(18px); }
button { color: #fff; border: 1px solid #79b8ff77; background: radial-gradient(circle at 35% 25%, #24549b, #061426); border-radius: 50%; position: absolute; z-index: 2; }
.mic { left: 50%; top: 52%; transform: translate(-50%, -50%); width: var(--orb); height: var(--orb); box-shadow: 0 0 65px #1265ff, inset 0 0 50px #0571ff; }
.mic span { position: absolute; inset: -16%; border: 1px solid #73d8ff; border-radius: 50%; box-shadow: 0 0 15px #16a1ff; }
.mic svg { width: 45%; stroke: #fff; stroke-width: 5; fill: none; stroke-linecap: round; }
.home nav button { width: var(--sat); height: var(--sat); }
.home nav svg, .profile svg, .settings svg { width: 48%; height: 48%; stroke: #fff; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.home nav button:nth-child(1) { left: var(--left); top: 30%; }
.home nav button:nth-child(2) { left: 50%; top: 19%; transform: translateX(-50%); }
.home nav button:nth-child(3) { right: var(--right); top: 30%; }
.home nav button:nth-child(4) { right: var(--right); top: 68%; }
.home nav button:nth-child(5) { left: 50%; top: 77%; transform: translateX(-50%); }
.profile, .settings { top: var(--top); width: clamp(54px, 15vw, 64px); height: clamp(54px, 15vw, 64px); }
.profile { left: var(--left); }
.settings { right: var(--right); }
#end { bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); border-radius: 20px; padding: 10px 16px; min-height: 44px; white-space: nowrap; }
.sr { position: absolute; clip: rect(0, 0, 0, 0); }
[data-state=listening] .mic span { animation: b 2s infinite; }
[data-state=speaking] .decor { animation: w .5s infinite; }
[data-state=tool] .mic { filter: brightness(1.3); }
@keyframes b { 50% { transform: scale(1.12); opacity: .4; } }
@keyframes w { 50% { transform: scaleY(1.3); } }
@media (max-height: 700px) { .home { --orb: clamp(190px, 51vw, 245px); --sat: 60px; } .home nav button:nth-child(5) { top: 79%; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
#module-back, #mail-back { position: sticky !important; top: max(0px, env(safe-area-inset-top)); display: inline-flex; align-items: center; z-index: 20; }
#camera-view{position:fixed;inset:0;z-index:30;background:#000;overflow:hidden;color:#fff}#camera-view[hidden]{display:none}#camera-preview{width:100%;height:100%;object-fit:cover}#camera-state{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));margin:0;padding:10px 14px;border-radius:14px;background:#000a;overflow-wrap:anywhere}.camera-controls{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.camera-controls button{min-height:52px;max-width:100%;padding:12px 18px;border:2px solid #fff;border-radius:18px;background:#07152bdd;color:#fff;font:700 17px system-ui}