:root { --eye: #ff1a0a; --bg: #07070a; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #55585f;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Push-to-talk moves the eye to the top and puts the button at the bottom. */
html[data-mode="ptt"] body { justify-content: space-between; padding: 12dvh 0 8dvh; }

.eye {
  width: min(46vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  /*
   * Every ring is derived from --eye. They used to be hardcoded reds, so
   * choosing blue left a red halo around a blue pupil.
   */
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--eye) 22%, #fff) 0 6%,
    var(--eye) 12% 34%,
    color-mix(in srgb, var(--eye) 42%, #000) 46%,
    color-mix(in srgb, var(--eye) 12%, #000) 62%,
    #000 78%);
  box-shadow: 0 0 calc(48px + var(--level, 0) * 70px) 8px
              color-mix(in srgb, var(--eye) 34%, transparent),
              inset 0 0 30px 6px rgba(0, 0, 0, .85);
  transition: filter .3s ease, transform .3s ease;
}

/* The eye IS the state indicator. There is no other chrome. */
.eye[data-state="idle"]      { filter: brightness(.4) saturate(.7); }
.eye[data-state="listening"] { animation: breathe 3.2s ease-in-out infinite; }
.eye[data-state="thinking"]  { animation: pulse 1.1s ease-in-out infinite; }

/*
 * Speaking is driven frame by frame from the audio actually coming out of the
 * speaker. The .3s transition above would smear that into a flat glow, so it is
 * cut right down here — this is the difference between an eye that flickers
 * with the voice and one that just sits there lit.
 */
.eye[data-state="speaking"] {
  transition: filter .05s linear, transform .05s linear;
  filter: brightness(calc(.72 + var(--level, 0) * var(--glow, .75)))
          saturate(calc(1 + var(--level, 0) * .5));
  transform: scale(calc(1 + var(--level, 0) * .05));
}

@keyframes breathe {
  0%, 100% { filter: brightness(.85); }
  50%      { filter: brightness(1.25); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   filter: brightness(.7); }
  50%      { transform: scale(.93); filter: brightness(1.1); }
}

#ptt {
  display: none;
  padding: 1.4rem 3.5rem;
  border: 1px solid color-mix(in srgb, var(--eye) 25%, #000);
  border-radius: 999px;
  background: color-mix(in srgb, var(--eye) 8%, #000);
  color: color-mix(in srgb, var(--eye) 70%, #c3c6cc);
  font: inherit;
  letter-spacing: .18em;
  text-transform: uppercase;
  touch-action: none;
}
html[data-mode="ptt"] #ptt { display: block; }
#ptt:active {
  background: color-mix(in srgb, var(--eye) 18%, #000);
  color: color-mix(in srgb, var(--eye) 85%, #fff);
}

#hint {
  position: fixed;
  bottom: 1.5rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-align: center;
  padding: 0 1rem;
}

#latency {
  position: fixed;
  top: 1.15rem;
  right: 5.6rem;
  font-size: .65rem;
  color: #3a3d44;
  letter-spacing: .08em;
}

/* The fly on the lens — the only affordance besides the eye itself. */
#fly {
  position: fixed; top: 1rem; right: 1rem;
  background: none; border: 0; padding: .4rem;
  color: #43464e; cursor: pointer; line-height: 0;
  transition: color .25s ease, transform .25s ease;
}
#fly:hover { color: var(--eye); transform: rotate(-8deg) scale(1.15); }

#setfly {
  position: fixed; bottom: 1rem; left: 1rem;
  background: none; border: 0; padding: .4rem;
  color: #43464e; cursor: pointer; line-height: 0;
  transition: color .25s ease, transform .25s ease;
}
#setfly:hover { color: #6fd0a8; transform: rotate(-8deg) scale(1.15); }

#setpanel {
  position: fixed; inset: 0; background: #07070a; z-index: 10;
  display: flex; flex-direction: column;
  /* Generous sides: a focused select draws its ring outside its own box and
     was being clipped against the panel edge. */
  padding: 1rem max(1.5rem, env(safe-area-inset-left)) 1rem max(1.5rem, env(safe-area-inset-right));
}
#setpanel[hidden] { display: none; }
#setpanel header {
  width: 100%; max-width: 640px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--eye); padding-bottom: .8rem; border-bottom: 1px solid #16171c;
}
#setpanel button {
  background: none; border: 0; color: #55585f; font: inherit;
  letter-spacing: .15em; text-transform: uppercase; cursor: pointer;
}
#setbody { overflow-y: auto; flex: 1; padding-top: 1rem; font-size: .8rem; width: 100%; max-width: 640px; margin: 0 auto; }
#setbody .row {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: .85rem .25rem; border-bottom: 1px solid #101116; color: #9aa0a8;
}
#setbody input[type="range"] { flex: 1; max-width: 55%; accent-color: var(--eye); }
#setbody input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--eye); flex: none;
}
#s-note[data-saving="1"]::after { content: ' saving\2026'; color: var(--eye); }
#setbody .row > span:first-child { display: flex; flex-direction: column; }
#setbody em {
  font-style: normal; color: #4a4d55; font-size: .68rem; padding-top: .2rem;
}
#setbody input[type="text"], #setbody select {
  flex: 1; max-width: 55%; min-width: 0; background: #101116; color: #c3c6cc;
  border: 1px solid #23252c; border-radius: 4px; padding: .5rem .6rem;
  font: inherit; font-size: .78rem;
}
#setbody input:focus, #setbody select:focus { outline: 1px solid var(--eye); }
.swatches { display: flex; gap: .55rem; flex-wrap: wrap; }
.swatches button {
  width: 22px; height: 22px; border-radius: 50%; padding: 0;
  border: 0; cursor: pointer; position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.swatches button:hover { transform: scale(1.15); }
/* Selection has to be unmistakable — a faint border on a coloured dot is not. */
.swatches button[aria-pressed="true"] {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px #07070a, 0 0 0 4px #c3c6cc;
}
#s-note { color: #4a4d55; font-size: .7rem; padding-top: 1rem; line-height: 1.6; }

/* On a phone the label and its control need the full width each. */
@media (max-width: 520px) {
  #setbody .row { flex-direction: column; align-items: stretch; gap: .55rem; }
  #setbody input[type="text"], #setbody select { max-width: 100%; }
  .swatches { justify-content: space-between; }
}

#ideasfly {
  position: fixed; top: 1rem; left: 1rem;
  background: none; border: 0; padding: .4rem;
  color: #43464e; cursor: pointer; line-height: 0;
  transition: color .25s ease, transform .25s ease;
}
#ideasfly:hover { color: #c08cff; transform: rotate(8deg) scale(1.15); }

#ideaspanel {
  position: fixed; inset: 0; background: #07070a; z-index: 10;
  display: flex; flex-direction: column; padding: 1rem;
}
#ideaspanel[hidden] { display: none; }
#ideaspanel header {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: #c08cff; padding-bottom: .8rem; border-bottom: 1px solid #16171c;
}
#ideaspanel header span { flex: 1; text-align: center; }
#ideaspanel button {
  background: none; border: 0; color: #55585f; font: inherit;
  letter-spacing: .15em; text-transform: uppercase; cursor: pointer;
}
#ideasbody { overflow-y: auto; flex: 1; padding-top: .8rem; }
#ideasbody .idea {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: .7rem .2rem; border: 0; border-bottom: 1px solid #101116;
  background: none; color: #c3c6cc; font: inherit;
}
#ideasbody .idea .title { display: block; color: #e6e8ec; }
#ideasbody .idea .meta { display: block; font-size: .68rem; color: #55585f; padding-top: .2rem; }
#ideasbody .st { text-transform: uppercase; letter-spacing: .1em; }
#ideasbody .st-ripe { color: #ffcf5c; }
#ideasbody .st-built { color: #6fd0a8; }
#ideasbody .st-killed { color: #6b6e76; }
#ideasbody .st-brainstorming { color: #7ab8ff; }
#ideasbody .st-spec-review { color: #ffcf5c; }
#ideasbody .st-planning { color: #7ab8ff; }
#ideasbody .st-plan-review { color: #ffcf5c; }
#ideasbody .st-building { color: #c792ea; }
#ideasbody .note { white-space: pre-wrap; word-break: break-word; line-height: 1.65; }
#ideasbody .note h3 { color: #e6e8ec; font-size: .95rem; margin: 1.1rem 0 .3rem; }
#ideasbody .note strong { color: #e6e8ec; }
#ideasbody .note code { color: #ffcf5c; }

#logpanel {
  position: fixed; inset: 0; background: #07070a; z-index: 10;
  display: flex; flex-direction: column; padding: 1rem;
}
#logpanel[hidden] { display: none; }
#logpanel header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--eye); padding-bottom: .8rem; border-bottom: 1px solid #16171c;
}
#logpanel button {
  background: none; border: 0; color: #55585f; font: inherit;
  letter-spacing: .15em; text-transform: uppercase; cursor: pointer;
}
#usagebar {
  display: flex; flex-wrap: wrap; gap: .2rem 1.4rem;
  padding: .7rem 0 .1rem; color: #7a7d85; font-size: .72rem; line-height: 1.7;
  border-bottom: 1px solid #16171c;
}
#usagebar b { color: #c3c6cc; font-weight: 400; }
#usagebar .warn b { color: #ffcf5c; }
#logbody { overflow-y: auto; flex: 1; padding-top: .8rem; }
#logbody .row { display: flex; gap: .7rem; padding: .35rem 0; border-bottom: 1px solid #101116; }
#logbody .t { color: #4a4d55; white-space: nowrap; }
#logbody .k { white-space: nowrap; text-transform: uppercase; font-size: .65rem; letter-spacing: .1em; padding-top: .15rem; }
#logbody .d { white-space: pre-wrap; word-break: break-word; flex: 1; }
#logbody .turn .k { color:#7fb3ff; }
#logbody .brief .k { color:#ffcf5c; }
#logbody .director .k { color: var(--eye); }
#logbody .tool .k { color:#6fd0a8; }
#logbody .error .k, #logbody .brief-refused .k { color:#ff6b6b; }
#logbody .session .k { color:#7a7d85; }
#logbody .pass .k { color:#4a4d55; }
#logbody .pass .d { color:#4a4d55; }
#logbody .idea .k { color:#c08cff; }