*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--gold:#d9b45d;--text:#f4e6c1;--dark:#050302}
html,body{width:100%;height:100%;overflow:hidden;background:var(--dark);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text)}

/* TWO-ZONE LAYOUT: stage top, zone-below bottom */
.app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;
  overflow:hidden;background:var(--dark);
}

/* STAGE: image + hotspots only. Never touched by panel. */
.stage{
  position:relative;flex-shrink:0;
  width:min(100vw, calc(100dvh * 1208 / 1302));
  height:min(100dvh, calc(100vw * 1302 / 1208));
}
.source{width:100%;height:100%;object-fit:contain;display:block;user-select:none;pointer-events:none}

/* HOTSPOTS */
.hotspot{
  position:absolute;border:none;background:transparent;
  -webkit-appearance:none;appearance:none;
  box-shadow:none;outline:none;padding:0;cursor:pointer;border-radius:14px;
}
.hotspot:active{background:rgba(217,180,93,.18)}
body.debug .hotspot{outline:2px solid rgba(255,0,0,.7);background:rgba(255,0,0,.15)!important}

.menu{left:0%;   top:0%;     width:12%;  height:10%; border-radius:999px}
.now {left:79%;  top:0%;     width:21%;  height:11%; border-radius:12px}
.mic {left:42.65%;top:57.4%; width:20%;  height:15%; border-radius:999px}
.rev {left:29%;  top:73%;    width:14%;  height:12%}
.play{left:43%;  top:73%;    width:14%;  height:12%}
.fwd {left:57%;  top:73%;    width:14%;  height:12%}
.read{left:38%;  top:73%;    width:11%;  height:9%}
.kbrd{left:48%;  top:73%;    width:11%;  height:9%}
.pray{left:57%;  top:73%;    width:11%;  height:9%}

/* RECORDING DOT */
@keyframes rec-blink{0%,100%{opacity:1}50%{opacity:.2}}
.rec-dot{
  position:absolute;
  left:52.65%;top:64.9%;
  transform:translate(-50%,-50%);
  width:14px;height:14px;
  background:#e02020;border-radius:50%;
  box-shadow:0 0 10px rgba(220,0,0,.9);
  animation:rec-blink 1s ease-in-out infinite;
  pointer-events:none;z-index:25;
}
.rec-dot[hidden]{display:none}

/* MIC ACTIVE STATE — red glow on mic button when recording */
.mic.recording{
  background:rgba(220,32,32,.15) !important;
  box-shadow:0 0 0 3px rgba(220,32,32,.5);
  border-radius:50%;
}

/* ZONE-BELOW: panel's permanent home */
.zone-below{
  width:min(100vw, calc(100dvh * 1208 / 1302));
  flex:1;
  position:relative;
  background:linear-gradient(180deg,#0d0805 0%,var(--dark) 100%);
  border-top:1px solid rgba(217,180,93,.25);
  overflow:hidden;
}

/* IDLE STATE */
.zone-idle{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px 20px;text-align:center;gap:10px;
  transition:opacity .2s ease;
}
.zone-idle.hidden{opacity:0;pointer-events:none}
.zone-title{font-family:Georgia,serif;font-size:.85rem;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
.zone-hint{font-size:.78rem;color:rgba(244,230,193,.6);line-height:1.5}
.zone-legal{font-size:.68rem;color:rgba(244,230,193,.35);margin-top:2px}
.zone-credential{font-family:'Playfair Display',Georgia,serif;font-size:.7rem;color:rgba(217,180,93,.55);letter-spacing:.08em;margin-top:2px}
.zone-copy{font-size:.65rem;color:rgba(244,230,193,.25);margin-top:2px}

/* PANEL: lives in zone-below, fades in — no position tricks */
.context-panel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:rgba(5,3,2,.97);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.context-panel.open{opacity:1;pointer-events:auto}

/* PANEL HEADER: fixed, never scrolls */
.panel-header{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 8px;
  border-bottom:1px solid rgba(217,180,93,.15);
}
.panel-header h2{
  font-family:Georgia,serif;color:var(--gold);
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  flex:1;padding-right:10px;
}
.close{
  flex-shrink:0;width:44px;height:44px;
  background:rgba(0,0,0,.4);border:1px solid rgba(217,180,93,.3);
  color:var(--gold);border-radius:50%;font-size:22px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.close:active{background:rgba(217,180,93,.2)}

/* PANEL BODY: scrollable */
.panel-scrollable{
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 14px 14px;
}
.panel-body{
  font-family:Georgia,serif;font-size:.95rem;
  line-height:1.5;color:var(--text);
  margin-bottom:8px;white-space:pre-wrap;
}
.input-area{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.input-area textarea{
  width:100%;min-height:68px;resize:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(217,180,93,.4);
  color:var(--text);border-radius:8px;padding:8px;font-size:.9rem;font-family:inherit;
}
.send{
  align-self:flex-end;min-height:44px;padding:10px 20px;
  background:rgba(217,180,93,.18);border:1px solid rgba(217,180,93,.5);
  color:var(--gold);border-radius:8px;font-size:.9rem;cursor:pointer;
}
.send:active{background:rgba(217,180,93,.35)}
.panel-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.panel-actions button{
  min-height:36px;padding:7px 11px;
  background:rgba(217,180,93,.09);border:1px solid rgba(217,180,93,.35);
  color:var(--text);border-radius:8px;font-size:.78rem;cursor:pointer;
}
.panel-actions .audio-transport{display:flex;gap:6px;width:100%;margin-bottom:4px}
.panel-actions .audio-transport button{
  flex:1;background:rgba(217,180,93,.14);
  border:1px solid rgba(217,180,93,.45);color:var(--gold);
  font-size:.85rem;font-weight:600;min-height:38px;border-radius:8px;cursor:pointer;
}
.panel-actions .audio-transport button.play-btn{flex:2;background:rgba(217,180,93,.24)}
.panel-actions button:active{background:rgba(217,180,93,.3)}

/* MENU: compact dropdown */
.menu-panel{
  position:fixed;top:3.5%;left:1%;
  width:min(48vw,170px);
  background:rgba(8,5,3,.96);
  border:1px solid rgba(217,180,93,.35);
  border-radius:14px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:60;padding:6px;
  opacity:0;pointer-events:none;
  transform:translateY(-8px) scale(.97);
  transform-origin:top left;
  transition:opacity .2s ease,transform .2s ease;
}
.menu-panel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.menu-item{
  display:block;width:100%;
  min-height:40px;text-align:left;padding:9px 14px;
  background:transparent;border:none;
  border-bottom:1px solid rgba(217,180,93,.1);
  color:var(--text);font-size:.9rem;cursor:pointer;
}
.menu-item:last-child{border-bottom:none}
.menu-item:active{background:rgba(217,180,93,.12)}
.shade{
  position:fixed;inset:0;background:rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:55;
}
.shade.open{opacity:1;pointer-events:auto}