@import url("https://fonts.cdnfonts.com/css/thegoodmonolith");

:root{
  --bg:#0a0d12; --grid:rgba(255,255,255,.05);
  --pri:#f3ede9; --sec:#a9a6a2; --acc:#27e1ff; --acc2:#5e9bff;
}

*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--pri);
  font-family:"TheGoodMonolith",monospace; overflow:hidden; text-transform:uppercase;
}

/* Put this near your existing .notification styles */
.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -10px);
  background: var(--panel-bg, rgba(30,26,24,0.7));
  border: 1px solid var(--panel-border, rgba(255,78,66,0.3));
  color: var(--accent-primary, #ff4e42);
  padding: 0.625rem 1.25rem;
  border-radius: 6px;
  font: 12px/1.2 "TheGoodMonolith", monospace;
  letter-spacing: .08em;
  z-index: 2000;            /* ABOVE most UI; your preloader is 1000 */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.notification.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.notification[data-type="warn"]  { color: #ffae00; border-color: rgba(255,174,0,.35); }
.notification[data-type="error"] { color: #ff5a5a; border-color: rgba(255,90,90,.35); }
.notification[data-type="ok"]    { color: #7cffb0; border-color: rgba(124,255,176,.35); }


/* Background + overlays */
.space-background{position:fixed; inset:0;
  background: radial-gradient(1200px 800px at 50% 50%, #0e1320 0%, #05070a 60%, #000 100%);
  z-index:0}
.grid-overlay{position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

#three-container{position:fixed; inset:0; z-index:2; cursor:grab}
#three-container:active{cursor:grabbing}

/* Header */
.interface-container{position:fixed; inset:0; z-index:3; pointer-events:none; padding:1rem}
.header{display:flex; justify-content:space-between; gap:1rem; padding:1rem}
.header-item{font-size:.8rem; color:var(--sec)}
.header .middle{display:block; margin-top:4.5rem;} /* push the middle item down */
.header .header-item:nth-child(2) {
  margin-top: 12rem; /* adjust: 3rem ≈ a few inches depending on screen DPI */
  display: block;   /* ensure margin works */
  color:var(--acc)
}

/* Scanner frame */
.scanner-frame{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(48vmin,520px); height:min(48vmin,520px);
  border:1px solid rgba(39,225,255,.3); box-shadow:0 0 40px rgba(39,225,255,.1) inset;
  display:flex; align-items:center; justify-content:center; pointer-events:none}
.scanner-frame .corner-tl,.scanner-frame .corner-tr,
.scanner-frame .corner-bl,.scanner-frame .corner-br{
  position:absolute; width:22px; height:22px; border:2px solid var(--acc); opacity:.85}
.corner-tl{top:-1px; left:-1px; border-right:none; border-bottom:none}
.corner-tr{top:-1px; right:-1px; border-left:none; border-bottom:none}
.corner-bl{bottom:-1px; left:-1px; border-right:none; border-top:none}
.corner-br{bottom:-1px; right:-1px; border-left:none; border-top:none}
.scanner-id,.scanner-id-right{position:absolute; bottom:-28px; font-size:.7rem; color:var(--acc)}
.scanner-id{left:0}
.scanner-id-right{right:0}
.scanner-line{position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent, var(--acc), transparent);
  animation:scan 3.2s linear infinite}
@keyframes scan{0%{top:4%}100%{top:96%}}

/* Orb visual helpers */
.circular-visualizer{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(50vmin,560px); height:min(50vmin,560px); z-index:3; pointer-events:none}
.circular-visualizer canvas{width:100%; height:100%}
.audio-wave{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(56vmin,640px); height:min(56vmin,640px); border-radius:50%;
  border:1px solid rgba(39,225,255,.12); z-index:2; pointer-events:none}
.audio-wave::before{content:""; position:absolute; inset:-2%; border-radius:50%;
  border:1px solid rgba(39,225,255,.08); animation:pulse 4s infinite}
@keyframes pulse{0%{opacity:.5; transform:scale(1)}50%{opacity:0; transform:scale(1.12)}100%{opacity:.4; transform:scale(1)}}

/* Floating DOM particles layer */
.floating-particles{position:fixed; inset:0; z-index:2; pointer-events:none}

/* Preloader */
.loading-overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#05070a; z-index:10; transition:opacity .45s}
.preloader-canvas-container{width:180px; height:180px}
.loading-text{margin-top:1rem; color:var(--acc); letter-spacing:2px; font-size:.85rem}

/* Mic instruction (left-center) */
.mic-instruction{
  position:fixed; inset:0; display:grid; align-items:center; justify-items:start;
  padding:2rem 2rem 2rem 2.25rem; z-index:9; pointer-events:none;
  background: radial-gradient(ellipse at 60% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
  animation:hudFadeIn .4s ease-out both;
}
.mic-instruction .mic-chip{display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem; border:1px solid rgba(39,225,255,.35); background:rgba(8,12,18,.65);
  border-radius:999px; color:var(--acc); font-size:.72rem; letter-spacing:.12em}
.mic-instruction .mic-chip .dot{width:7px; height:7px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 10px var(--acc), 0 0 18px var(--acc2); animation:blink 1.2s infinite}
.mic-instruction .mic-big{margin-top:.75rem; font-size:1.2rem; color:#dff8ff; max-width:28ch}
.mic-instruction .mic-small{margin-top:.35rem; font-size:.72rem; color:#8fb6c2; max-width:36ch}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes hudFadeIn{from{opacity:0; filter:blur(6px)}to{opacity:1; filter:none}}

/* Transcript panel */
.transcript-panel{
  position:fixed; right:20px; bottom:20px; width:min(40ch, 46vw);
  max-height:40vh; overflow:auto; z-index:8; padding:.8rem .9rem;
  background:rgba(8,12,18,.65); border:1px solid rgba(39,225,255,.25);
  backdrop-filter: blur(8px); border-radius:8px;
}
.transcript-title{color:var(--acc); font-size:.75rem; margin-bottom:.4rem}
.transcript-stream{font-size:.85rem; color:#cfefff; line-height:1.35}
.transcript-stream .frag{opacity:.8}
.transcript-stream .final{opacity:1}

/* Accessibility helper for screen readers (hidden) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}