:root {
  --fog: #e3e8ee;      /* studio backdrop */
  --slate: #9aaabb;    /* backdrop falloff */
  --ink: #16202b;
  --muted: #5e6c7a;
  --cobalt: #2b50e0;
  --surface: #ffffff;
  --line: #d3dae2;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--surface); }

.app { display: grid; grid-template-columns: 1fr minmax(320px, 400px); height: 100%; }

/* Portrait-studio backdrop: light center, falloff to the edges */
.stage {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 42%, var(--fog) 0%, var(--fog) 35%, var(--slate) 100%);
}
#avatar { position: absolute; inset: 0; }
.status {
  position: absolute; left: 24px; bottom: 20px; margin: 0;
  padding: 6px 12px 6px 26px; border-radius: 999px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(6px);
  font-size: .875rem; font-weight: 500; color: var(--ink);
}
.status::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px;
  margin-top: -4px; border-radius: 50%; background: var(--muted);
}
.status[data-state="listening"]::before { background: #d23c3c; }
.status[data-state="thinking"]::before  { background: #c98a12; }
.status[data-state="speaking"]::before  { background: var(--cobalt); }

.chat { display: flex; flex-direction: column; border-left: 1px solid var(--line); min-height: 0; }
.chat-head { padding: 24px 24px 12px; }
.chat-head h1 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.chat-head p { margin: 4px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.4; }

.log { list-style: none; margin: 0; padding: 8px 24px 16px; flex: 1; overflow-y: auto; }
.log li { margin: 0 0 18px; line-height: 1.5; font-size: 1rem; max-width: 62ch; }
.log .user { color: var(--muted); padding-left: 12px; border-left: 2px solid var(--line); }
.log .bot { color: var(--ink); }
.log .bot.pending { color: var(--muted); }
.log .err { color: #b3261e; }

.composer { display: flex; gap: 8px; align-items: center; padding: 16px 24px 24px; border-top: 1px solid var(--line); }
.composer input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; font: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.composer input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(43,80,224,.18); }
.send, .stop {
  height: 44px; padding: 0 18px; font: inherit; font-weight: 600; border-radius: 10px; cursor: pointer;
  border: 0; background: var(--ink); color: #fff;
}
.stop { background: #b3261e; }
.lang {
  flex: none; width: 44px; height: 44px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
}

/* The one bold element: the mic, whose ring reflects the conversation state */
.mic {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--cobalt); cursor: pointer; display: grid; place-items: center;
}
.mic svg { width: 24px; height: 24px; fill: #fff; }
.mic::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--cobalt); opacity: 0; transition: opacity .2s;
}
.mic.on { background: #d23c3c; }
.mic.on::after { border-color: #d23c3c; opacity: 1; animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }

button:focus-visible, input:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 52vh 1fr; }
  .chat { border-left: 0; border-top: 1px solid var(--line); }
  .chat-head { padding: 14px 16px 4px; }
  .chat-head p { display: none; }
  .log { padding: 8px 16px; }
  .composer { padding: 12px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .mic.on::after { animation: none; } }