:root{
  --bg:#05070c; --fg:#dff3ff; --dim:#7f95a8;
  --cyan:#38e1ff; --amber:#ffb347; --red:#ff5f6d;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body{overflow:hidden}

/* the face fills the screen; everything else floats over it */
#face{position:fixed;inset:0;width:100%;height:100%;border:0;
  pointer-events:none;z-index:0}
#shade{position:fixed;inset:0;background:rgba(2,5,10,.72);z-index:4;
  opacity:0;pointer-events:none;transition:opacity .18s}
#shade.on{opacity:1;pointer-events:auto}

header{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;
  align-items:center;gap:8px;padding:calc(var(--safe-top) + 10px) 14px 10px;
  background:linear-gradient(#05070ccc,#05070c00);font-size:13px;color:var(--dim)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.dot.ok{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.dot.live{background:var(--red);box-shadow:0 0 10px var(--red);
  animation:pulse 1.1s infinite}
.dot.busy{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.dot.bad{background:var(--red)}
@keyframes pulse{50%{opacity:.35}}
header .out{margin-left:auto;color:var(--dim);text-decoration:none;
  font-size:17px;padding:4px 6px}

#log{position:fixed;left:0;right:0;z-index:2;
  top:calc(var(--safe-top) + 44px);bottom:calc(var(--safe-bot) + 148px);
  overflow-y:auto;padding:6px 16px;
  -webkit-mask-image:linear-gradient(#0000,#000 22px,#000 92%,#0000);
          mask-image:linear-gradient(#0000,#000 22px,#000 92%,#0000)}
#log p{margin:7px 0;padding:9px 13px;border-radius:15px;max-width:82%;
  white-space:pre-wrap;word-wrap:break-word;backdrop-filter:blur(7px)}
#log .me{margin-left:auto;background:#14324a;color:#eaf8ff;
  border-bottom-right-radius:5px}
#log .bot{background:#0d1a26cc;border:1px solid #1d3547;
  border-bottom-left-radius:5px}
#log .err{background:#3a1420;border:1px solid #6b2233;color:#ffd7dd;max-width:100%}

footer{position:fixed;left:0;right:0;bottom:0;z-index:3;text-align:center;
  padding:14px 0 calc(var(--safe-bot) + 20px);
  background:linear-gradient(#05070c00,#05070ce6 42%)}
#talk{width:88px;height:88px;border-radius:50%;border:2px solid #24506b;
  background:radial-gradient(circle at 50% 38%,#0d2233,#081420 70%);
  color:var(--cyan);display:grid;place-items:center;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .12s,box-shadow .18s,border-color .18s;
  box-shadow:0 0 0 0 rgba(56,225,255,.35)}
#talk:active{transform:scale(.94)}
#talk.live{border-color:var(--red);color:#fff;
  background:radial-gradient(circle at 50% 38%,#3a1220,#1a0a12 70%);
  box-shadow:0 0 26px 4px rgba(255,95,109,.45)}
#hint{margin:10px 0 0;font-size:12px;color:var(--dim);letter-spacing:.06em;
  text-transform:uppercase}

/* permission sheet */
.sheet{position:fixed;z-index:5;left:12px;right:12px;
  bottom:calc(var(--safe-bot) + 16px);background:#0b1622;
  border:1px solid #24405a;border-radius:18px;padding:18px 18px 14px;
  box-shadow:0 18px 50px #000a}
.sheet h2{margin:0 0 6px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber)}
.sheet p{margin:0 0 8px}
.sheet pre{margin:0 0 12px;padding:9px 11px;background:#050b12;
  border:1px solid #1b2f42;border-radius:10px;font-size:12px;
  color:#9fd7ee;white-space:pre-wrap;word-break:break-all;max-height:34vh;
  overflow:auto}
.sheet .row{display:flex;gap:10px}
.sheet button{flex:1;padding:13px;border-radius:12px;border:1px solid #24405a;
  background:#122436;color:var(--fg);font-size:15px;font-weight:600;
  cursor:pointer}
.sheet .allow{background:#0f3a2a;border-color:#1d6b4d;color:#b6ffe0}
.sheet .deny{background:#3a1420;border-color:#6b2233;color:#ffd7dd}

/* login */
body.login{display:grid;place-items:center;padding:24px}
body.login form{display:flex;flex-direction:column;gap:14px;width:min(340px,100%)}
body.login .chip{text-align:center;font-size:22px;letter-spacing:.34em;
  color:var(--cyan);text-shadow:0 0 22px rgba(56,225,255,.5);margin-bottom:6px}
body.login input{padding:15px;border-radius:12px;border:1px solid #24405a;
  background:#0b1622;color:var(--fg);font-size:16px}
body.login button{padding:15px;border-radius:12px;border:0;
  background:var(--cyan);color:#03131b;font-size:16px;font-weight:700;
  cursor:pointer}
body.login .err{color:var(--red);text-align:center;margin:0;font-size:14px}