/* Public page. The painting is the interface; everything else stays out of the
   way. Sized so the whole thing fits one screen without scrolling on a phone,
   which is why the canvas is capped by viewport HEIGHT rather than width. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #0b0d11;
  --ink: #e8e6e1;
  --dim: #8b8f99;
  --line: #23262e;
  --gold: #d8a43c;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 ui-sans-serif, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: max(14px, env(safe-area-inset-top)) 14px
           max(14px, env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- painting */

.frame {
  position: relative;
  /* 4:5, driven from WIDTH so aspect-ratio always holds. The height limit that
     keeps the input bar on screen is expressed as its equivalent width
     (72vh x 4/5); setting `height` and then clamping with max-width instead
     leaves the two fighting, and on a narrow phone the painting stretches. */
  width: min(100%, calc(72vh * 4 / 5), 640px);
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

#stage {
  display: block;
  width: 100%;
  height: 100%;
  background: #0b0d11;
}

#boot {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  text-align: center;
  background: var(--bg);
  color: var(--dim);
  font-size: 14px;
  transition: opacity .5s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }

/* What he just said. One line, then it goes -- no transcript: a scrolling log
   turns him into a chat window instead of someone who just spoke. */
#line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 44px 20px 18px;
  font-size: clamp(15px, 2.1vh, 19px);
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .9);
  background: linear-gradient(to top, rgba(6, 8, 12, .92), rgba(6, 8, 12, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
#line.show { opacity: 1; transform: none; }

/* -------------------------------------------------------------------- bar */

.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(560px, 100%);
}

.bar input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;              /* < 16px makes iOS Safari zoom on focus */
  color: var(--ink);
  background: #141720;
  border: 1px solid var(--line);
  border-radius: 22px;
  outline: none;
  transition: border-color .2s;
}
.bar input::placeholder { color: #5d616b; }
.bar input:focus { border-color: #3a3f4b; }

.bar button {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  color: var(--dim);
  background: #141720;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.bar button:hover { color: var(--ink); border-color: #3a3f4b; }
.bar button svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
#mic.on {
  color: #12141a;
  background: var(--gold);
  border-color: var(--gold);
}

#hint {
  margin: 0;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--dim);
  opacity: 0;
  transition: opacity .3s;
}
#hint.show { opacity: 1; }

footer {
  margin: 0;
  font-size: 12px;
  color: #4c505a;
  text-align: center;
}

/* Short screens (landscape phones): drop the credit line, tighten everything. */
@media (max-height: 560px) {
  main { gap: 10px; }
  .frame { width: min(100%, calc(62vh * 4 / 5), 640px); }
  footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #line, #boot, #hint { transition: none; }
}