:root{
    --bg:#03050a;
    --cyan:#4fd8ff;
    --cyan-dim:#1a5f75;
    --text:#cfefff;
    --muted:#5c7c8c;
    --bolt:#e8fbff;
    --panel:#050c12;
}

  *{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
  }

  html,body{
    margin:0;
    height:100%;
    width:100%;
    background:
      radial-gradient(
        ellipse at center,
        #061018 0%,
        #020306 75%
      );
    color:var(--text);
    font-family:'Courier New',ui-monospace,monospace;
    overflow:hidden;
    user-select:none;
  }

  /* ================= APP ================= */

  #app{
    position:relative;
    height:100vh;
    width:100vw;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    padding:28px 20px 34px;
  }

  header{
    position:relative;
    width:100%;
    text-align:center;
    letter-spacing:6px;
    font-size:13px;
    color:var(--muted);
    text-transform:uppercase;
  }

  header b{
    color:var(--cyan);
    font-weight:600;
    letter-spacing:8px;
  }

  /* ================= SETTINGS BUTTON ================= */

  #gearBtn{
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--cyan-dim);
    border-radius:8px;
    background:#041016;
    color:var(--cyan);
    font-size:14px;
    cursor:pointer;
  }

  #gearBtn:active{
    transform:translateY(-50%) scale(.92);
  }

  /* ================= STAGE ================= */

  #stage{
    position:relative;
    flex:1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
  }

  canvas{
    display:block;
    position:absolute;
  }

  #matrix{
    opacity:.55;
  }

  #globe{
    z-index:2;
  }

  #fx{
    z-index:3;
    pointer-events:none;
  }

  #status{
    position:absolute;
    bottom:6px;
    left:50%;
    transform:translateX(-50%);
    font-size:11px;
    letter-spacing:3px;
    color:var(--muted);
    text-transform:uppercase;
    white-space:nowrap;
    z-index:4;
  }

  /* ================= TRANSCRIPT ================= */

  #transcript{
    width:100%;
    max-width:560px;
    min-height:64px;
    max-height:22vh;

    overflow-y:auto;

    font-size:14px;
    line-height:1.6;
    color:var(--text);

    padding:4px 10px;

    text-align:center;

    scrollbar-width:thin;
    scrollbar-color:var(--cyan-dim) transparent;
  }

  #transcript::-webkit-scrollbar{
    width:4px;
  }

  #transcript::-webkit-scrollbar-track{
    background:transparent;
  }

  #transcript::-webkit-scrollbar-thumb{
    background:var(--cyan-dim);
    border-radius:999px;
  }

  #transcript .you{
    color:var(--muted);
    margin-bottom:10px;
    word-break:break-word;
  }

  #transcript .ai{
    color:var(--cyan);
    margin-bottom:12px;
    word-break:break-word;
  }

  /* ================= OVERLAY ================= */

  #overlay{
    position:fixed;
    inset:0;

    background:rgba(2,4,8,.72);
    backdrop-filter:blur(2px);

    display:none;
    align-items:center;
    justify-content:center;

    z-index:50;
  }

  #overlay.open{
    display:flex;
  }

  #panel{
    width:min(92vw,380px);

    max-height:86vh;
    overflow-y:auto;

    background:var(--panel);
    border:1px solid var(--cyan-dim);
    border-radius:14px;

    padding:20px;

    box-shadow:
      0 0 30px rgba(79,216,255,.12);

    scrollbar-width:thin;
    scrollbar-color:var(--cyan-dim) transparent;
  }

  #panel::-webkit-scrollbar{
    width:4px;
  }

  #panel::-webkit-scrollbar-thumb{
    background:var(--cyan-dim);
    border-radius:999px;
  }

  #panel h3{
    margin:0 0 16px;

    font-size:13px;
    letter-spacing:3px;

    color:var(--cyan);
    text-transform:uppercase;
  }

  .field{
    margin-bottom:18px;
  }

  .field label{
    display:block;

    font-size:10px;
    letter-spacing:1.5px;

    color:var(--muted);

    text-transform:uppercase;

    margin-bottom:6px;
  }

  /* ================= API KEY ================= */

  .keyBox{
    display:flex;
    gap:6px;
  }

  #apiKey{
    flex:1;
    min-width:0;

    background:#041016;
    border:1px solid var(--cyan-dim);

    color:var(--text);

    font-family:monospace;
    font-size:12px;

    padding:9px 10px;

    border-radius:6px;
    outline:none;
  }

  #apiKey:focus{
    border-color:var(--cyan);
  }

  #toggleKey{
    width:42px;

    background:#041016;
    border:1px solid var(--cyan-dim);

    border-radius:6px;

    color:var(--cyan);

    cursor:pointer;
  }

  #toggleKey:active{
    transform:scale(.95);
  }

  #keyHint{
    font-size:10px;
    color:var(--muted);

    margin-top:6px;
    line-height:1.5;
  }

  #keyStatus{
    margin-top:5px;

    font-size:10px;
    color:var(--cyan-dim);
  }

  /* ================= MODE SWITCH ================= */

  .modeTitle{
    font-size:10px;
    letter-spacing:1.5px;
    color:var(--muted);
    text-transform:uppercase;
    margin-bottom:9px;
  }

  .modeSwitch{
    display:flex;
    gap:6px;
  }

  .modeBtn{
    flex:1;

    padding:10px 6px;

    background:#041016;
    border:1px solid var(--cyan-dim);
    border-radius:7px;

    color:var(--muted);

    font-family:inherit;
    font-size:10px;
    letter-spacing:1px;

    cursor:pointer;
  }

  .modeBtn.active{
    background:#0a2530;
    border-color:var(--cyan);
    color:var(--cyan);

    box-shadow:
      0 0 10px rgba(79,216,255,.12);
  }

  .modeDescription{
    margin-top:7px;

    color:var(--muted);
    font-size:10px;
    line-height:1.5;
  }

  /* ================= ACTIONS ================= */

  #panelActions{
    display:flex;
    gap:10px;
    margin-top:8px;
  }

  #saveKey,
  #closePanel{
    flex:1;

    background:#0a2530;
    border:1px solid var(--cyan-dim);

    color:var(--cyan);

    font-size:12px;
    letter-spacing:1px;

    padding:10px 0;

    border-radius:6px;

    cursor:pointer;
  }

  #closePanel{
    background:transparent;
    color:var(--muted);
  }

  #saveKey:active,
  #closePanel:active{
    transform:scale(.97);
  }

  /* ================= STARTUP ================= */

  #startup{
    position:fixed;
    inset:0;

    background:#020306;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    z-index:100;

    transition:
      opacity .5s ease;
  }

  #startup.hidden{
    opacity:0;
    pointer-events:none;
  }

  #startupTitle{
    color:var(--cyan);

    font-size:18px;
    letter-spacing:8px;

    margin-bottom:12px;
  }

  #startupText{
    color:var(--muted);

    font-size:10px;
    letter-spacing:2px;

    text-align:center;
  }

  /* ================= MIC ================= */

  #mic{
    position:fixed;

    bottom:22px;
    left:50%;

    transform:translateX(-50%);

    width:64px;
    height:64px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
      radial-gradient(
        circle at 35% 30%,
        #103042,
        #041016 70%
      );

    border:1px solid var(--cyan-dim);

    color:var(--cyan);

    font-size:22px;

    cursor:pointer;

    z-index:10;

    box-shadow:
      0 0 0 0 rgba(79,216,255,.5);

    transition:
      box-shadow .2s ease,
      border-color .2s ease,
      transform .15s ease;
  }

  #mic.listening{
    border-color:var(--cyan);

    box-shadow:
      0 0 18px 4px rgba(79,216,255,.35);

    animation:breathe 1.4s ease-in-out infinite;
  }

  #mic.manual-active{
    border-color:var(--cyan);

    box-shadow:
      0 0 26px 8px rgba(79,216,255,.55);
  }

  @keyframes breathe{
    0%,100%{
      box-shadow:
        0 0 18px 4px rgba(79,216,255,.25);
    }

    50%{
      box-shadow:
        0 0 26px 8px rgba(79,216,255,.55);
    }
  }

  #mic:active{
    transform:translateX(-50%) scale(.94);
  }

  /* ================= MOBILE ================= */

  @media(max-height:650px){
    #app{
      padding-top:18px;
      padding-bottom:20px;
    }

    #transcript{
      max-height:18vh;
    }

    #mic{
      bottom:12px;
    }
  }