:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #120b26;
  color: #f4edff;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 1.25rem 1.25rem calc(1.25rem + var(--call-bar-height, 0px)); }
main {
  max-width: 32rem;
  margin: min(10vh, 4rem) auto;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  background: #20143a;
  border: 1px solid #70459f;
  border-radius: 1rem;
}
.eyebrow { color: #73f3fa; font-size: .75rem; font-weight: 800; letter-spacing: .15em; }
h1 { font-size: clamp(2rem, 9vw, 3rem); margin: .25em 0; }
h2 { font-size: 1rem; }
p, li { line-height: 1.5; }
ul { padding-inline-start: 1.25rem; }
.people { list-style: none; padding: 0; margin: .5rem 0; }
.people li { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; padding: .25rem 0; }
.people li span:last-child { text-align: end; color: #d2c4e5; font-size: .82rem; }
.people li[data-speaking="true"] span:last-child { color: #73f3fa; font-weight: 700; }
.audio-status { display: flex; gap: .4rem; flex-wrap: wrap; }
.audio-status span { padding: .2rem .45rem; border: 1px solid #70459f; border-radius: .4rem; font-size: .82rem; }
button {
  font: inherit;
  font-weight: 700;
  min-height: 3rem;
  padding: .65rem 1rem;
  border: 1px solid #9476be;
  border-radius: .55rem;
  background: #291d44;
  color: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #73f3fa; outline-offset: 3px; }
button:disabled { cursor: default; opacity: .55; }
#join, #ask, #send-ask, #sound, #reconnect-bot { background: #73f3fa; color: #111325; border-color: transparent; }
#reconnect-bot { width: 100%; }
#ask { touch-action: none; user-select: none; }
#ask[data-holding="true"] { background: #ff89d9; }
.call-bar {
  position: fixed;
  z-index: 1;
  inset: auto 0 0;
  padding: .75rem max(1rem, env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: #20143a;
  border-top: 1px solid #70459f;
}
.call-bar-inner { max-width: 32rem; margin: auto; }
.turn-status { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
#bot-status { margin: 0; overflow-wrap: anywhere; }
#capture-clock { color: #ffb7e7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.turn-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.turn-actions button { min-height: 3.5rem; padding-inline: .5rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
#leave { margin-inline-start: auto; border-color: #ff89d9; color: #ffb7e7; }
#sound { flex: 1 0 100%; order: -1; }
.notice { color: #d2c4e5; font-size: .85rem; }
@media (max-height: 650px) {
  main:has(#room:not([hidden])) { margin-top: 0; }
  main:has(#room:not([hidden])) #intro { display: none; }
}
[hidden] { display: none !important; }