html, body { height: 100%; margin: 0; background: #0b0b10; }
body { overflow: hidden; }
#app {
  box-sizing: border-box; min-height: 100%; padding: 48px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px;
}
#dashboard {
  width: min(1200px, calc(100vw - 96px)); display: flex;
  align-items: center; justify-content: center; gap: 36px;
}
#face {
  max-height: 72vh; width: min(42vw, 520px); border-radius: 20px;
  object-fit: contain; transition: box-shadow 180ms ease, filter 180ms ease;
  box-shadow: 0 10px 60px rgba(120,120,255,0.28);
}
#face.engaged {
  filter: saturate(1.08);
  box-shadow: 0 10px 70px rgba(56,220,130,0.46),
    0 0 0 1px rgba(96,255,170,0.25);
}
#captions {
  box-sizing: border-box; width: min(42vw, 520px); min-height: 240px;
  max-height: 64vh; display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; background: rgba(24,27,36,0.82);
  box-shadow: 0 10px 45px rgba(0,0,0,0.32);
}
.caption-header {
  padding: 16px 20px 12px; color: rgba(240,242,255,0.72);
  font: 600 13px/1.2 system-ui, sans-serif; letter-spacing: 0;
  text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1);
}
#caption-scroll {
  flex: 1; overflow-y: auto; padding: 20px 22px; display: flex;
  flex-direction: column; gap: 14px;
}
.caption-line {
  color: rgba(232,232,240,0.55); font: 400 18px/1.36 system-ui,
  sans-serif; letter-spacing: 0; overflow-wrap: anywhere;
}
.caption-placeholder {
  color: rgba(232,232,240,0.48); font: 400 18px/1.4 system-ui, sans-serif;
  letter-spacing: 0; overflow-wrap: anywhere;
}
.caption-placeholder.unavailable { color: rgba(255,210,170,0.8); }
#status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* Transient "task launched" toast, top-center, fades in/out via .show. */
#toast {
  position: fixed; top: 28px; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  max-width: min(80vw, 720px); padding: 12px 22px; border-radius: 999px;
  background: rgba(20,20,32,0.92); color: #eaeaf2;
  font: 600 18px/1.3 ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 8px 40px rgba(120,120,255,0.35),
    0 0 0 1px rgba(140,140,255,0.25);
  opacity: 0; pointer-events: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: opacity 220ms ease, transform 220ms ease;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 900px) {
  #app { padding: 24px; }
  #dashboard { width: 100%; flex-direction: column; gap: 24px; }
  #face { max-height: 44vh; width: min(70vw, 420px); }
  #captions { width: min(640px, 100%); min-height: 180px; max-height: 36vh; }
  .caption-line, .caption-placeholder { font-size: 16px; }
}
@media (max-height: 650px) {
  #app { padding: 20px; gap: 12px; }
  #dashboard { gap: 24px; }
  #face { max-height: 56vh; }
  #captions { min-height: 160px; max-height: 56vh; }
  .caption-header { padding: 12px 16px 10px; }
  #caption-scroll { padding: 16px; gap: 10px; }
  .caption-line, .caption-placeholder { font-size: 15px; }
}

/* --- Walk-in PWA (?walkin=1): big start/stop button; works on phone + desktop. */
body.walkin { overflow: hidden; }
body.walkin #app {
  padding: env(safe-area-inset-top) 18px
    calc(env(safe-area-inset-bottom) + 150px);
  justify-content: flex-start; gap: 16px;
}
/* Centered, width-capped column so it reads well on a laptop too, not just a
   phone. */
body.walkin #dashboard {
  flex-direction: column; gap: 16px; width: 100%;
  max-width: 560px; margin: 0 auto;
}
/* Shrink the portrait to a small avatar; the screen is the room's, not a Recall
   tile, so the captions do the talking. */
body.walkin #face { max-height: 26vh; width: min(60vw, 240px); margin-top: 8px; }
body.walkin #captions { width: 100%; min-height: 160px; max-height: 44vh; }
#walkin-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 16px 18px calc(env(safe-area-inset-bottom) + 20px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(to top, #0b0b10 60%, rgba(11,11,16,0));
}
#walkin-btn {
  width: 132px; height: 132px; border-radius: 50%; border: none;
  background: #e5484d; color: #fff; font: 800 24px/1 system-ui, sans-serif;
  box-shadow: 0 10px 40px rgba(229,72,77,0.45);
  transition: transform .1s ease, background .2s ease;
}
#walkin-btn:active { transform: scale(.96); }
#walkin-btn:disabled { background: #3a3f4b; box-shadow: none; }
#walkin-btn.recording {
  background: #ff5b60; animation: walkin-pulse 1.4s ease-in-out infinite;
}
@keyframes walkin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,91,96,.55); }
  50% { box-shadow: 0 0 0 24px rgba(255,91,96,0); }
}
#walkin-hint {
  margin: 0; color: rgba(232,232,240,0.72);
  font: 500 15px/1.3 system-ui, sans-serif; text-align: center;
}