/* Ether — v1.4.0 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{--ec-r:0;--ec-g:210;--ec-b:255;--ec:rgb(var(--ec-r),var(--ec-g),var(--ec-b));}

body.ether-body{
  background:#03050a;
  width:100vw;height:100vh;
  overflow:hidden;
  font-family:'Space Mono','Courier New',monospace;
  user-select:none;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Desktop: hide cursor */
@media(pointer:fine){body.ether-body{cursor:none;}}

/* ── Glow ─────────────────────────────────────────── */
#eg-glow{position:fixed;top:55%;left:50%;transform:translate(-50%,-50%);width:900px;height:500px;background:radial-gradient(ellipse at center,rgba(var(--ec-r),var(--ec-g),var(--ec-b),0.04) 0%,transparent 70%);pointer-events:none;z-index:0;transition:background 3s;}

/* ── Speaker cards ────────────────────────────────── */
#eg-speakers-row{
  position:fixed;top:0;left:0;right:0;
  height:130px;
  display:flex;
  align-items:stretch;
  z-index:10;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#eg-speakers-row::-webkit-scrollbar{display:none;}

.eg-spk-card{
  flex:0 0 calc(100% / var(--spk-count, 4));
  min-width:90px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:10px 8px 8px;
  border-right:1px solid rgba(255,255,255,0.04);
  transition:background 0.5s;
  position:relative;overflow:hidden;
}
.eg-spk-card:last-child{border-right:none;}
.eg-spk-card.active{background:rgba(255,255,255,0.025);}
.eg-spk-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;transition:background 0.5s,box-shadow 0.5s;}
.eg-spk-card.active::after{background:var(--spk-color,rgba(255,255,255,0.2));box-shadow:0 0 12px var(--spk-color,rgba(255,255,255,0.1));}

.eg-spk-num{font-size:7px;letter-spacing:0.25em;color:rgba(255,255,255,0.18);text-transform:uppercase;margin-bottom:2px;}
.eg-spk-name{font-size:8px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.25);text-align:center;margin-bottom:2px;transition:color 0.4s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eg-spk-card.active .eg-spk-name{color:var(--spk-color,rgba(255,255,255,0.9));}
.eg-spk-role{font-size:6px;letter-spacing:0.06em;color:rgba(255,255,255,0.12);text-align:center;margin-bottom:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic;}
.eg-spk-vis{width:100%;height:32px;display:block;}
.eg-spk-text{margin-top:4px;font-size:9px;line-height:1.4;text-align:center;max-width:100%;height:28px;overflow:hidden;transition:color 0.3s,opacity 0.5s;color:rgba(255,255,255,0.15);opacity:0.6;}
.eg-spk-card.active .eg-spk-text{opacity:1;}

/* ── Stage ────────────────────────────────────────── */
#eg-stage{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-46%);
  width:min(1000px,96vw);
  display:flex;flex-direction:column;align-items:center;
  z-index:5;
}
.eg-rule{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(var(--ec-r),var(--ec-g),var(--ec-b),0.15),transparent);}
#eg-canvas{display:block;width:100%;}
#eg-label{margin-top:16px;font-size:10px;letter-spacing:0.65em;padding-right:0.65em;color:rgba(255,255,255,0.08);text-transform:uppercase;}
#eg-sublabel{margin-top:5px;font-size:7px;letter-spacing:0.4em;padding-right:0.4em;color:rgba(255,255,255,0.03);text-transform:uppercase;}

/* ── Ether response ───────────────────────────────── */
#eg-ether-response{
  position:fixed;bottom:160px;left:50%;transform:translateX(-50%);
  width:min(800px,90vw);text-align:center;pointer-events:none;z-index:12;
  opacity:0;transition:opacity 0.6s;
}
#eg-ether-response.visible{opacity:1;}
#eg-ether-response-label{font-size:8px;letter-spacing:0.5em;text-transform:uppercase;color:rgba(0,210,255,0.4);margin-bottom:8px;}
#eg-ether-response-text{font-size:18px;color:rgba(0,210,255,0.85);line-height:1.6;letter-spacing:0.04em;text-shadow:0 0 30px rgba(0,210,255,0.3);}

/* ── Transcript ───────────────────────────────────── */
#eg-transcript-bar{
  position:fixed;bottom:155px;left:50%;transform:translateX(-50%);
  width:min(900px,92vw);text-align:center;z-index:10;pointer-events:none;
}
#eg-interim-line{font-size:14px;color:rgba(255,255,255,0.45);font-style:italic;letter-spacing:0.04em;min-height:22px;line-height:1.5;transition:color 0.3s;}

/* ── Status ───────────────────────────────────────── */
#eg-status{position:fixed;bottom:20px;right:18px;display:flex;align-items:center;gap:8px;opacity:0.2;z-index:20;transition:opacity 0.4s;}
#eg-status:hover{opacity:0.7;}
#eg-dot{width:5px;height:5px;border-radius:50%;background:var(--ec);animation:pulse 3s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.35;transform:scale(0.6);}}
#eg-state-txt{font-size:7px;letter-spacing:0.4em;text-transform:uppercase;color:rgba(255,255,255,0.5);padding-right:0.4em;}

/* ── Mic indicator ────────────────────────────────── */
#eg-mic-ind{position:fixed;top:140px;right:18px;font-size:7px;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,80,80,0.7);display:none;z-index:20;animation:blink 1.5s ease-in-out infinite;}
#eg-mic-ind.on{display:block;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* ── Desktop controls ─────────────────────────────── */
#eg-controls{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;opacity:0;transition:opacity 0.4s;pointer-events:none;z-index:20;
}
#eg-controls.visible{opacity:1;pointer-events:all;}
.ec-btn{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.3);font-family:'Space Mono',monospace;font-size:7px;letter-spacing:0.2em;padding:7px 11px;cursor:pointer;text-transform:uppercase;transition:all 0.25s;white-space:nowrap;}
.ec-btn:hover{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.7);}
.ec-btn.active{border-color:rgba(var(--ec-r),var(--ec-g),var(--ec-b),0.5);color:var(--ec);}
.ec-btn.mic-on{border-color:rgba(255,80,80,0.5);color:rgba(255,120,120,0.9);}

/* ── MOBILE CONTROL BAR ───────────────────────────── */
#eg-mobile-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:90px;
  background:rgba(3,5,10,0.96);
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;
  align-items:stretch;
  z-index:25;
}

.mob-btn{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:4px;
  background:transparent;
  border:none;border-right:1px solid rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.35);
  font-family:'Space Mono',monospace;
  cursor:pointer;
  padding:8px 4px;
  transition:background 0.15s,color 0.15s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  min-height:44px;
}
.mob-btn:last-child{border-right:none;}
.mob-btn:active{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.8);}

.mob-icon{font-size:18px;line-height:1;}
.mob-lbl{font-size:7px;letter-spacing:0.1em;text-transform:uppercase;}

.mob-mic-btn.mic-on{color:rgba(255,100,100,0.9);border-color:rgba(255,80,80,0.3);}
.mob-btn.mob-provoked:active{color:#ff1c37;}
.mob-btn.mob-reflective:active{color:#9bd7ff;}

/* Mobile speaker quick-select */
#eg-mobile-spk{
  display:none;
  position:fixed;bottom:90px;left:0;right:0;
  height:48px;
  background:rgba(3,5,10,0.94);
  border-top:1px solid rgba(255,255,255,0.04);
  flex-direction:row;
  align-items:stretch;
  z-index:24;
}
.mob-spk-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Space Mono',monospace;font-size:8px;letter-spacing:0.1em;
  color:rgba(255,255,255,0.25);border-right:1px solid rgba(255,255,255,0.04);
  text-transform:uppercase;background:transparent;border-top:none;border-bottom:none;border-left:none;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background 0.15s,color 0.15s;
  padding:4px 2px;gap:2px;
}
.mob-spk-btn:last-child{border-right:none;}
.mob-spk-btn.active{background:rgba(255,255,255,0.04);}
.mob-spk-btn span:first-child{font-size:10px;}

/* ── Text box ─────────────────────────────────────── */
#eg-text-box{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);width:min(600px,90vw);display:none;flex-direction:column;z-index:30;}
#eg-text-box.open{display:flex;}
.etb-lbl{font-size:7px;letter-spacing:0.35em;text-transform:uppercase;color:rgba(255,255,255,0.2);padding:7px 12px 5px;background:rgba(0,0,0,0.8);border:1px solid rgba(255,255,255,0.08);border-bottom:none;}
#eg-text-input{background:rgba(0,0,0,0.9);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.85);font-family:'Space Mono',monospace;font-size:14px;padding:12px 13px;outline:none;caret-color:var(--ec);}

/* ── Hint ─────────────────────────────────────────── */
#eg-hint{position:fixed;bottom:5px;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.04);white-space:nowrap;z-index:5;}

/* ── Attention ring ───────────────────────────────── */
#eg-ring{position:fixed;top:50%;left:50%;width:0;height:0;border-radius:50%;border:1px solid transparent;transform:translate(-50%,-50%);pointer-events:none;z-index:1;}
#eg-ring.active{animation:ringPulse 2.8s ease-in-out infinite;border-color:rgba(var(--ec-r),var(--ec-g),var(--ec-b),0.07);}
@keyframes ringPulse{0%{width:400px;height:400px;opacity:0;}25%{opacity:1;}100%{width:700px;height:700px;opacity:0;}}

#eg-attention-ring{position:fixed;top:50%;left:50%;width:280px;height:280px;border-radius:50%;border:1px solid rgba(var(--ec-r),var(--ec-g),var(--ec-b),0);transform:translate(-50%,-50%);pointer-events:none;z-index:6;transition:border-color 0.4s;}
#eg-attention-ring.active{border-color:rgba(var(--ec-r),var(--ec-g),var(--ec-b),0.25);animation:attPulse 1.2s ease-in-out infinite;}
@keyframes attPulse{0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(0.95);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05);}}

/* ── Config warning ───────────────────────────────── */
#eg-config-warn{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:rgba(220,50,50,0.15);border:1px solid rgba(220,50,50,0.3);color:rgba(255,120,120,0.8);font-size:9px;letter-spacing:0.25em;text-transform:uppercase;padding:8px 18px;pointer-events:none;display:none;}
#eg-config-warn.visible{display:block;}

/* ── Setup modal ──────────────────────────────────── */
#eg-setup-modal{position:fixed;inset:0;background:rgba(3,5,10,0.92);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px);}
#eg-setup-modal.hidden{display:none;}
#eg-setup-box{width:min(700px,95vw);background:#080c14;border:1px solid rgba(255,255,255,0.1);padding:32px 24px;}
.egs-title{font-size:10px;letter-spacing:0.6em;text-transform:uppercase;color:var(--ec);margin-bottom:8px;}
.egs-sub{font-size:9px;letter-spacing:0.2em;color:rgba(255,255,255,0.3);margin-bottom:24px;}
.egs-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.egs-spk-label{font-size:8px;letter-spacing:0.25em;text-transform:uppercase;min-width:140px;}
.egs-select{flex:1;min-width:200px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.7);font-family:'Space Mono',monospace;font-size:9px;padding:10px;outline:none;cursor:pointer;min-height:44px;}
.egs-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap;}
.egs-btn{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);font-family:'Space Mono',monospace;font-size:8px;letter-spacing:0.25em;text-transform:uppercase;padding:12px 22px;cursor:pointer;transition:all 0.25s;min-height:44px;touch-action:manipulation;}
.egs-btn:hover{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.9);}
.egs-btn-primary{border-color:rgba(var(--ec-r),var(--ec-g),var(--ec-b),0.4);color:var(--ec);}

/* ── MOBILE OVERRIDES ─────────────────────────────── */
@media (hover:none) and (pointer:coarse) {
  /* Show mobile bar, hide desktop controls */
  #eg-mobile-bar { display:flex !important; }
  #eg-mobile-spk { display:flex !important; }
  #eg-controls   { display:none !important; }
  #eg-hint        { display:none; }

  /* Push content up to make room for mobile bar */
  #eg-stage       { transform:translate(-50%,-52%); }
  #eg-ether-response { bottom:160px; }
  #eg-transcript-bar { bottom:155px; }
  #eg-status      { bottom:100px; }
  #eg-mic-ind     { top:138px; }
  #eg-text-box    { bottom:150px; }
  #eg-config-warn { bottom:150px; }

  /* Speaker cards scroll horizontally */
  .eg-spk-card    { flex:0 0 130px; min-width:130px; }
  .eg-spk-name    { font-size:9px; }
  .eg-spk-text    { font-size:9px; }

  /* Ether response larger on mobile */
  #eg-ether-response-text { font-size:16px; }
  #eg-interim-line        { font-size:13px; }

  /* Canvas height */
  #eg-canvas { height:120px !important; }
}

@media (max-width:380px) {
  .mob-lbl  { display:none; }
  .mob-icon { font-size:20px; }
  #eg-mobile-bar { height:70px; }
  #eg-mobile-spk { bottom:70px; }
}