* { box-sizing: border-box; margin: 0; }
:root {
  --bg1: #16102e; --bg2: #2a1a4a; --gold: #e8c26a;
  --bot: #2d2250; --user: #4a3a7a; --text: #f2ecff;
}
html, body { height: 100%; }
body {
  font-family: Georgia, "Times New Roman", serif;
  background: radial-gradient(ellipse at top, var(--bg2), var(--bg1) 70%);
  color: var(--text);
  display: flex; flex-direction: column;
}
.stars { position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 15%, #fff, transparent),
    radial-gradient(2px 2px at 85% 60%, var(--gold), transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1px 1px at 10% 65%, var(--gold), transparent);
}
header { text-align: center; padding: 1rem .5rem .5rem; }
.orb { font-size: 2rem; }
h1 { color: var(--gold); font-size: 1.4rem; letter-spacing: .12em;
     text-transform: uppercase; }
header p { font-size: .8rem; opacity: .8; }
main { flex: 1; overflow-y: auto; padding: 1rem; display: flex;
       flex-direction: column; gap: .5rem; }
.bubble { max-width: 85%; padding: .6rem .9rem; border-radius: 1rem;
          line-height: 1.35; font-size: .95rem; }
.bubble.bot { background: var(--bot); border: 1px solid #453a6e;
              align-self: flex-start; border-bottom-left-radius: .2rem; }
.bubble.user { background: var(--user); align-self: flex-end;
               border-bottom-right-radius: .2rem; }
.bubble.typing { opacity: .6; letter-spacing: .3em; }
/* ---------------------------------------------------------------- orb stage */
/* Audio-reactive visuals ride a single custom property (--level, 0-1) set from
   JS at ~30fps. Gradients rather than canvas: cheaper on phone GPUs and battery,
   which matters when an attendee is holding this in a hot hall on 20% charge. */
#orb-stage {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 1rem 0 .5rem; --level: 0;
}
#orb {
  position: relative; width: min(46vw, 190px); aspect-ratio: 1;
  border: 0; padding: 0; border-radius: 50%; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: none; user-select: none; -webkit-user-select: none;
  transform: scale(calc(1 + var(--level) * .12));
  transition: transform 90ms ease-out;
}
.orb-core, .orb-ring { position: absolute; inset: 0; border-radius: 50%; }
.orb-core {
  background:
    radial-gradient(circle at 34% 30%, #fff 0 4%, rgba(255,255,255,.55) 12%, transparent 42%),
    radial-gradient(circle at 50% 55%, #c9a6ff 0 38%, #6d3fb5 62%, #2a1150 100%);
  box-shadow:
    0 0 calc(18px + var(--level) * 46px) rgba(178,132,255,.75),
    inset 0 0 30px rgba(255,255,255,.22);
}
.orb-ring {
  background: conic-gradient(from 0deg, transparent, rgba(232,194,106,.85), transparent 62%);
  opacity: calc(.18 + var(--level) * .35);
  animation: orb-spin 7s linear infinite; filter: blur(3px);
}
@keyframes orb-spin { to { transform: rotate(1turn); } }

#orb-stage[data-state="idle"] .orb-core { animation: orb-breathe 4.5s ease-in-out infinite; }
@keyframes orb-breathe {
  0%, 100% { box-shadow: 0 0 18px rgba(178,132,255,.55), inset 0 0 30px rgba(255,255,255,.2); }
  50%      { box-shadow: 0 0 34px rgba(178,132,255,.9),  inset 0 0 34px rgba(255,255,255,.3); }
}
#orb-stage[data-state="listening"] .orb-core {
  background:
    radial-gradient(circle at 34% 30%, #fff 0 4%, rgba(255,255,255,.6) 12%, transparent 42%),
    radial-gradient(circle at 50% 55%, #b9ffe6 0 38%, #1f8f78 62%, #06342c 100%);
  box-shadow: 0 0 calc(18px + var(--level) * 52px) rgba(120,255,214,.8),
              inset 0 0 30px rgba(255,255,255,.25);
}
#orb-stage[data-state="thinking"] .orb-ring { animation-duration: 1.1s; }
#orb-stage[data-state="speaking"] .orb-core {
  background:
    radial-gradient(circle at 34% 30%, #fff 0 4%, rgba(255,255,255,.6) 12%, transparent 42%),
    radial-gradient(circle at 50% 55%, #ffe9b0 0 38%, #d59a2b 62%, #4a2c05 100%);
  box-shadow: 0 0 calc(18px + var(--level) * 46px) rgba(232,194,106,.8),
              inset 0 0 30px rgba(255,255,255,.25);
}
#orb-stage[data-state="offline"] .orb-core { filter: grayscale(1) brightness(.55); }
#orb-stage[data-state="offline"] .orb-ring { animation: none; opacity: .1; }

#status { font-size: .85rem; opacity: .75; text-align: center; min-height: 1.2em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Phone (and short landscape): the orb leaves the hero slot and floats over the
   transcript down where the thumb already rests, so it can be held without
   shifting grip. Wider screens keep the hero layout — that's the laptop/demo
   view, where there is no thumb and the orb is the centrepiece.
   Flip `right` to `left` here if you'd rather it sat under a left thumb. */
@media (max-width: 700px), (max-height: 620px) {
  #orb-stage {
    position: fixed;
    right: 1rem;
    /* Clear of the composer by a comfortable margin: at 4.75rem the orb sat
       9px above the text field and 21px from the send button, close enough
       that a thumb aiming for the orb could pop the keyboard mid-reading. */
    bottom: calc(6rem + env(safe-area-inset-bottom));
    z-index: 5;
    padding: 0;
    gap: .4rem;
    /* The stage spans dead space around the orb; let taps and scrolls pass
       through it to the transcript underneath. The orb re-enables itself. */
    pointer-events: none;
    flex-direction: column-reverse;  /* hint pill sits above the orb */
    align-items: flex-end;
  }
  #orb {
    width: 124px;
    pointer-events: auto;
  }
  #status {
    pointer-events: none;
    font-size: .75rem;
    opacity: 1;
    padding: .2rem .6rem;
    border-radius: 1rem;
    background: rgba(22, 16, 46, .78);
    border: 1px solid #453a6e;
    backdrop-filter: blur(4px);
  }
  /* Keep the newest message clear of both the orb and its hint pill. */
  #chat { padding-bottom: 11.5rem; }
  header { padding-bottom: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .orb-ring { animation: none; }
  #orb-stage[data-state="idle"] .orb-core { animation: none; }
  #orb { transition: none; transform: none; }
}

#composer { display: flex; gap: .5rem; padding: .75rem;
            padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
#input { flex: 1; padding: .7rem 1rem; border-radius: 2rem; border: 1px solid
         #453a6e; background: #221844; color: var(--text); font-size: 1rem; }
#input:focus { outline: 2px solid var(--gold); }
button { width: 3rem; border-radius: 50%; border: none; background:
         var(--gold); color: #1a1233; font-size: 1.2rem; cursor: pointer; }