:root{--bg:#050d14;--panel:#07131d;--line:#1aa6ff;--text:#d7f2ff;--muted:#6fbfe6;}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(1200px 700px at 50% -10%,#0b2638 0%,var(--bg) 50%,#02070c 100%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout:none;}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: repeating-linear-gradient(180deg, rgba(140,230,255,.0) 0px, rgba(140,230,255,.0) 8px, rgba(140,230,255,.05) 9px);
  opacity:.22;
}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
#app{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;padding:14px;gap:12px;}
.top{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid rgba(26,166,255,.35);background:rgba(7,19,29,.6);backdrop-filter:blur(10px); position:relative; overflow:hidden;}
.top::before{content:""; position:absolute; inset:-2px; pointer-events:none; background:linear-gradient(90deg, rgba(26,166,255,.0), rgba(26,166,255,.18), rgba(26,166,255,.0)); transform:translateX(-60%); animation:scan 5.5s linear infinite; opacity:.55}
@keyframes scan{0%{transform:translateX(-60%);}100%{transform:translateX(60%);}}
.brand{font-weight:800;letter-spacing:.18em}
.brand-strong{letter-spacing:.26em}
.dot{color:var(--line);margin-left:8px;font-size:.9em}
.top-right{display:flex; align-items:center; gap:12px}
.status{font-size:.9em;color:var(--muted)}

.holo-helm{display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:14px;
  border:1px solid rgba(26,166,255,.25);
  background: radial-gradient(circle at 50% 30%, rgba(26,166,255,.12), rgba(7,19,29,.55));
  box-shadow: 0 0 0 2px rgba(26,166,255,.06) inset, 0 0 40px rgba(26,166,255,.10);
  position:relative;
}
.holo-helm::after{content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(139,229,255,.0) 0px, rgba(139,229,255,.0) 6px, rgba(139,229,255,.06) 7px);
  opacity:.55;
}
.holo-helm svg{filter: drop-shadow(0 0 10px rgba(26,166,255,.25));}

/* subtle chromatic edge */
.panel{box-shadow: 0 0 0 1px rgba(26,166,255,.10) inset, 0 0 60px rgba(26,166,255,.06);}
.status.build{font-size:.75em; letter-spacing:.10em; opacity:.75}

/* Layout: FORCE mobile-first single column (we can re-add desktop later safely) */
.hud{display:grid;grid-template-columns:1fr;gap:12px;flex:1}

/* Brutal-safe: stack panels in a single column on ALL devices */
.hud.friday-layout{display:flex; flex-direction:column; gap:12px;}

/* Mobile: put big PTT button right under transcript+answer */
@media(max-width:899px){
  .right2,.core{display:none}
  .panel{min-height: auto}

  /* Make PTT look good on phones */
  .ptt-panel{min-height: auto; overflow: visible}
  .btn-ptt{ width: min(280px, 78vw); }
  .btn-ptt::before{ inset: -10px; }
  .btn-ptt::after{ inset: 20%; }
  .ptt-hint{ text-align:center; padding: 0 12px; }
  .ptt-stop{ width: 160px; }
}

.core{grid-area: core; display:flex; align-items:center; justify-content:center; padding:10px; min-height:260px}

.core-ring{position:relative; width:min(360px, 86vw); aspect-ratio:1; border-radius:999px;
  border: 2px solid rgba(26,166,255,.55);
  box-shadow: 0 0 0 6px rgba(26,166,255,.10) inset, 0 0 60px rgba(26,166,255,.10);
  background: radial-gradient(circle at 50% 50%, rgba(26,166,255,.08) 0%, rgba(7,19,29,.25) 55%, rgba(7,19,29,.65) 100%);
  overflow:hidden;
}
.core-ring::before{content:""; position:absolute; inset:-10%; border-radius:999px;
  background:
    conic-gradient(from 180deg,
      rgba(26,166,255,.0) 0deg,
      rgba(26,166,255,.0) 40deg,
      rgba(26,166,255,.35) 60deg,
      rgba(26,166,255,.0) 90deg,
      rgba(26,166,255,.0) 160deg,
      rgba(26,166,255,.28) 190deg,
      rgba(26,166,255,.0) 220deg,
      rgba(26,166,255,.0) 360deg);
  filter: blur(0px);
}
.core-ring::after{content:""; position:absolute; inset:18%; border-radius:999px;
  border: 2px dashed rgba(26,166,255,.25);
  box-shadow: 0 0 0 2px rgba(26,166,255,.08) inset;
}
.core-inner{position:absolute; inset:28%; border-radius:999px;
  border: 1px solid rgba(26,166,255,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: rgba(5,13,20,.45);
}
.core-title{font-weight:900; letter-spacing:.22em; font-size: clamp(20px, 4.5vw, 30px)}
.core-sub{margin-top:8px; color: var(--muted); letter-spacing:.14em; font-size: 12px}

.panel{border:1px solid rgba(26,166,255,.35);background:rgba(7,19,29,.55);backdrop-filter:blur(8px);padding:10px 12px;min-height:110px}
.panel.small{min-height:0}
.panel-title{font-size:.75em;letter-spacing:.18em;color:var(--muted);margin-bottom:8px}
.panel-body{white-space:pre-wrap;line-height:1.35}
.panel-body.center{display:flex; flex-direction:column; align-items:center; gap:10px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid rgba(26,166,255,.55);background:rgba(5,13,20,.5);color:var(--text);padding:10px 12px;border-radius:10px;font-weight:650; user-select:none; -webkit-user-select:none; touch-action: manipulation; -webkit-touch-callout:none}
.btn:active{transform:translateY(1px)}
.btn-ghost{border-color:rgba(26,166,255,.2);color:var(--muted)}
.btn-talk{border-color:rgba(26,166,255,.9);box-shadow:0 0 0 2px rgba(26,166,255,.15) inset}

/* Push-to-talk: center, ring/HUD style like reference */
.ptt-panel{min-height: 360px; overflow: visible}

.btn-ptt{
  position:relative;
  width: min(340px, 82vw);
  aspect-ratio: 1;
  border-radius: 999px;
  border: 2px solid rgba(26,166,255,.65);
  background:
    radial-gradient(circle at 50% 50%, rgba(26,166,255,.10) 0%, rgba(7,19,29,.35) 55%, rgba(5,13,20,.75) 100%);
  box-shadow:
    0 0 0 10px rgba(26,166,255,.06) inset,
    0 0 0 2px rgba(26,166,255,.20) inset,
    0 0 80px rgba(26,166,255,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 18px;
  touch-action: none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
}

/* outer segmented ring */
.btn-ptt::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:999px;
  border: 2px solid rgba(26,166,255,.25);
  background:
    conic-gradient(from 220deg,
      rgba(26,166,255,0) 0deg,
      rgba(26,166,255,0) 30deg,
      rgba(26,166,255,.35) 55deg,
      rgba(26,166,255,0) 80deg,
      rgba(26,166,255,0) 150deg,
      rgba(26,166,255,.28) 190deg,
      rgba(26,166,255,0) 230deg,
      rgba(26,166,255,0) 360deg);
  box-shadow: 0 0 60px rgba(26,166,255,.10);
  transform: rotate(var(--eq-rot, 0deg));
  transition: filter 120ms linear;
}

/* animated sweep overlay */
.btn-ptt .ptt-sweep{display:none}
.btn-ptt::marker{content:""}

/* inner dashed ring */
.btn-ptt::after{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:999px;
  border: 2px dashed rgba(26,166,255,.22);
  box-shadow: 0 0 0 2px rgba(26,166,255,.06) inset;
}

.ptt-label{position:relative; z-index:2; font-size: clamp(22px, 5vw, 28px); font-weight: 950; letter-spacing:.24em; color: #ffffff; text-shadow: 0 0 14px rgba(26,166,255,.55), 0 0 2px rgba(0,0,0,.9)}
.ptt-sub{position:relative; z-index:2; font-size: 12px; letter-spacing:.32em; color: rgba(215,242,255,.85); text-shadow: 0 0 10px rgba(26,166,255,.35)}

.btn-ptt:active{transform: scale(0.995)}
.btn-ptt:focus{outline:none}

@keyframes ptt-rotate { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
@keyframes ptt-pulse { 0% { box-shadow: 0 0 0 10px rgba(26,166,255,.06) inset, 0 0 0 2px rgba(26,166,255,.20) inset, 0 0 80px rgba(26,166,255,.10);} 50% { box-shadow: 0 0 0 14px rgba(26,166,255,.10) inset, 0 0 0 2px rgba(26,166,255,.35) inset, 0 0 110px rgba(26,166,255,.28);} 100% { box-shadow: 0 0 0 10px rgba(26,166,255,.06) inset, 0 0 0 2px rgba(26,166,255,.20) inset, 0 0 80px rgba(26,166,255,.10);} }

/* Listening state (while holding) */
.btn-ptt.is-listening{animation: ptt-pulse 1.15s ease-in-out infinite; border-color: rgba(26,166,255,.95)}
.btn-ptt.is-listening::before{animation: ptt-rotate 1.8s linear infinite; border-color: rgba(26,166,255,.45)}
.btn-ptt.is-listening::after{border-color: rgba(26,166,255,.55)}

.ptt-hint{font-size:.9em; color: var(--muted); letter-spacing:.06em}
.ptt-stop{min-width: 120px}
.hint{margin-top:8px;font-size:.85em;color:var(--muted)}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;font-size:.85em;color:var(--muted)}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:16px}
.modal.hidden{display:none}
.modal-card{width:min(520px,100%);border:1px solid rgba(26,166,255,.45);background:rgba(7,19,29,.95);padding:14px 14px;border-radius:14px}
.modal-title{font-weight:800;letter-spacing:.12em;margin-bottom:10px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(26,166,255,.35);background:rgba(5,13,20,.65);color:var(--text)}