/* base.css — chassis, void, orb, theme chemistry, materialization states */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;color:#ddd;font-family:-apple-system,"SF Pro Display",Inter,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}

/* THEME CHEMISTRY */
[data-theme=gold]{--bg:#070709;--plate:rgba(13,13,17,.75);--rim:#E5C158;--acc:#D4AF37;--acc2:#F59E0B;--mono:#7DD3FC;--mono2:#93E9BE;--ok:#00E599;--alert:#FF1F7D;--glow:rgba(212,175,55,.45);--blur:20px}
[data-theme=neon]{--bg:#050505;--plate:rgba(9,9,13,.8);--rim:#FF1F7D;--acc:#FF1F7D;--acc2:#12D9DE;--mono:#12D9DE;--mono2:#00E599;--ok:#00E599;--alert:#FF1F7D;--glow:rgba(255,31,125,.45);--blur:24px}

/* STUDIO VOID + TITANIUM CHASSIS */
#studio{height:100dvh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#15151b 0%,#000 70%)}
#chassis{position:relative;width:100%;height:100dvh;max-width:480px;overflow:hidden}
@media (min-width:600px){
 #chassis.framed{height:min(92dvh,940px);border-radius:48px;padding:14px;background:linear-gradient(145deg,#3a3a40,#121216 40%,#2a2a30 70%,#0c0c0f);box-shadow:0 40px 120px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 3px #08080a}
 #chassis.framed::before{content:"";position:absolute;inset:0;border-radius:48px;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.28),transparent 28%,transparent 72%,rgba(255,255,255,.14));padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
 #chassis.framed #app{border-radius:36px;padding-top:26px;padding-bottom:20px}
}

/* APP CANVAS (4-part vertical deck) */
#app{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:10% 46% 1fr auto auto;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px);transition:background .6s}
#app::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 28%,rgba(255,255,255,.04),transparent 62%)}

/* LIQUID CRYSTAL CORE — layered motion object. --amp (0..1) is driven by mic level / speech envelope from JS. */
#orb{position:absolute;left:50%;top:50%;width:var(--os,112px);height:var(--os,112px);transform:translate(-50%,-50%) scale(calc(1 + var(--amp,0)*.14));z-index:20;border-radius:50%;cursor:pointer;--amp:0;transition:top .55s cubic-bezier(.22,1.6,.36,1),width .5s,height .5s,filter .3s;will-change:transform}
#orb>*{position:absolute;border-radius:50%;pointer-events:none}
#orb .halo{inset:-45%;background:radial-gradient(circle,var(--glow) 0%,transparent 62%);opacity:calc(.55 + var(--amp,0)*.9);animation:breathe 5s ease-in-out infinite;filter:blur(2px)}
#orb .orbit{inset:-14%;border:1px solid var(--rim);opacity:.25;transform:scale(calc(1 + var(--amp,0)*.25));transition:opacity .4s}
#orb .orbit::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-top-color:var(--acc);border-right-color:var(--acc2);animation:spin 6s linear infinite;opacity:.9}
#orb .shell{inset:0;background:radial-gradient(circle at 50% 50%,transparent 58%,rgba(255,255,255,.06) 66%,rgba(0,0,0,.55) 100%);box-shadow:inset 0 -8px 22px rgba(0,0,0,.6),inset 0 6px 14px rgba(255,255,255,.08),0 0 calc(30px + var(--amp,0)*50px) var(--glow)}
#orb .caustic{inset:8%;mix-blend-mode:screen;filter:blur(7px)}
#orb .caustic.a{background:conic-gradient(from 0deg,transparent 0 10%,var(--acc2) 22%,transparent 38%,var(--mono) 58%,transparent 72%,var(--acc) 86%,transparent 100%);animation:spin 11s linear infinite;opacity:.65}
#orb .caustic.b{inset:18%;background:conic-gradient(from 180deg,transparent 0 15%,var(--mono2) 30%,transparent 48%,var(--acc2) 66%,transparent 85%);animation:spin 7s linear infinite reverse,drift 9s ease-in-out infinite;opacity:.5}
#orb .core{inset:14%;background:radial-gradient(circle at 36% 32%,rgba(255,255,255,.95) 0%,var(--acc) 22%,rgba(60,40,0,.75) 58%,rgba(0,0,0,.85) 100%);box-shadow:inset 0 0 24px rgba(255,255,255,.18),0 0 18px var(--glow);animation:breathe 4.2s ease-in-out infinite;transition:background .6s;transform:scale(calc(1 + var(--amp,0)*.1))}
[data-theme=neon] #orb .core{background:radial-gradient(circle at 36% 32%,rgba(255,255,255,.95) 0%,var(--acc) 22%,rgba(60,0,30,.75) 58%,rgba(0,0,0,.85) 100%)}
#orb .spec{left:24%;top:16%;width:26%;height:14%;background:radial-gradient(ellipse,rgba(255,255,255,.85),transparent 70%);filter:blur(1px);animation:drift 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{0%,100%{translate:0 0}33%{translate:4% -3%}66%{translate:-3% 4%}}
[data-phase=dormant] #orb .caustic.a{animation-duration:26s} [data-phase=dormant] #orb .caustic.b{animation-duration:17s}
#app:not([data-phase=dormant]):not([data-phase=dissolve]) #orb{top:var(--dock-y,56px);--os:46px}
[data-phase=wake] #orb{filter:brightness(1.9) drop-shadow(0 0 28px var(--acc)) drop-shadow(0 18px 40px var(--glow))}
/* voice states on the core: off (not yet armed) · listening · talking · muted */
#orb[data-voice=listening] .orbit{opacity:.7}
#orb[data-voice=talking] .orbit{opacity:1;border-color:var(--mono)}
#orb[data-voice=talking] .caustic.a{animation-duration:2.2s} #orb[data-voice=talking] .caustic.b{animation-duration:1.6s}
#orb[data-voice=muted] .halo{opacity:.2} #orb[data-voice=muted] .orbit{opacity:.15;border-color:var(--alert)}
#orb[data-voice=off] .halo{animation-duration:2.4s}

/* LASER ETCH LINE */
#laser{position:absolute;left:50%;top:var(--dock-y,56px);bottom:0;width:1px;background:linear-gradient(var(--rim),transparent 85%);transform:scaleY(0);transform-origin:top;opacity:0;z-index:15;pointer-events:none}
[data-phase=etch] #laser{opacity:1;transform:scaleY(1);transition:transform .3s linear}
[data-phase=condense] #laser{opacity:0;transition:opacity .3s}
[data-phase=dissolve] #laser{opacity:1;transform:scaleY(0);transition:transform .35s .3s}

/* GLASS PLATES — hairline etch then condensation */
.plate{position:relative;border-radius:14px;background:var(--plate);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));opacity:0;transition:opacity .35s,background .35s,-webkit-backdrop-filter .35s,backdrop-filter .35s}
.plate::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,var(--rim) 0%,rgba(255,255,255,.06) 55%,rgba(255,255,255,.12));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0;transform:scaleX(0);transform-origin:50% 0;transition:transform .3s linear,opacity .2s}
.plate>*{opacity:0;transition:opacity .35s}
[data-phase=etch] .plate{opacity:1;--plate:transparent;--blur:0px}
[data-phase=etch] .plate::before,[data-phase=condense] .plate::before,[data-phase=live] .plate::before{opacity:1;transform:scaleX(1)}
[data-phase=condense] .plate,[data-phase=live] .plate{opacity:1}
[data-phase=condense] .plate>*,[data-phase=live] .plate>*{opacity:1}
[data-phase=dissolve] .plate{opacity:0;transition:opacity .35s}
[data-phase=dissolve] .plate::before{transform:scaleX(0);transition:transform .3s .3s}