/* Hand-written, no build step. Dark because the phone is used at night. */
:root {
  --bg: #111;
  --fg: #eee;
  --dim: #888;
  --accent: #4a9;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, sans-serif;
  /* The home-screen PWA runs under the notch. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

main {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1rem;
}

header { display: flex; align-items: center; gap: 1rem; }
h1 { font-size: 1.1rem; font-weight: 600; flex: 1; }

select, input, button {
  font: inherit;
  color: inherit;
  background: #1c1c1c;
  border: 1px solid #333;
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
}

#transcript { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
#transcript p { margin: 0 0 0.75rem; white-space: pre-wrap; }
.said { color: var(--dim); }
.said::before { content: "› "; }
.error { color: #d66; }

footer { padding: 0.5rem 0 1.5rem; text-align: center; }
#status { color: var(--dim); font-size: 0.8rem; margin: 0 0 0.75rem; min-height: 1.2em; }

#bell { line-height: 1; }
#bell.on { border-color: var(--accent); }

#compose { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
#typed { flex: 1; min-width: 0; }
#send { width: 2.75rem; }
#send:disabled, #typed:disabled { color: var(--dim); }

#ptt {
  width: 100%;
  padding: 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: #041;
  font-weight: 600;
  /* Holding the button must not select text or trigger the iOS callout. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
#ptt:disabled { background: #333; color: var(--dim); }
/* Amber while the capture device opens, red once bytes are actually
   arriving. Distinct on purpose: speaking during amber is speaking into a
   microphone that is not yet recording, which is the bug this replaces. */
#ptt.opening { background: #a86; color: #fff; }
#ptt.recording { background: #d55; color: #fff; }

dialog { background: #1c1c1c; color: var(--fg); border: 1px solid #333; border-radius: 0.75rem; }
dialog form { display: grid; gap: 0.75rem; }

/* ---------------------------------------------------------- inspector
   A second page, not a second app: same variables, same shell, wider
   because a turn is a table and a conversation is not (F27). */

body.inspect main { max-width: 64rem; height: auto; min-height: 100dvh; }
body.inspect #back { color: var(--dim); text-decoration: none; font-size: 1.2rem; }

.turn { border-bottom: 1px solid #222; padding: 0.35rem 0; }
.turn > summary {
  display: flex; gap: 0.75rem; align-items: baseline;
  cursor: pointer; list-style: none;
}
.turn > summary::-webkit-details-marker { display: none; }
.turn[open] > summary { color: var(--accent); }

.when, .ms, .rid, .model, .counts { color: var(--dim); font-size: 0.85rem; }
.when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.agent { font-size: 0.85rem; }
.asked { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vendors { display: flex; gap: 0.4rem; white-space: nowrap; }

.vendor {
  font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 0.4rem;
  font-variant-numeric: tabular-nums;
}
/* Two vendors, two colours, never one total. */
.vendor.anthropic { background: #1e2f2a; color: #7ec8b0; }
.vendor.elevenlabs { background: #2f2418; color: #d8a765; }

.flag {
  font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 0.4rem;
  background: #3a2020; color: #e08c8c;
}

.turn .body { padding: 0.5rem 0 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; }

.work { min-width: 6rem; font-size: 0.85rem; }
.cost { margin-left: auto; font-size: 0.85rem; }
.counts { flex: 1; }
.event-line .kind { min-width: 6rem; color: var(--dim); font-size: 0.85rem; }

.failure { color: #e08c8c; font-size: 0.85rem; padding: 0.1rem 0.5rem; }
.dim { color: var(--dim); font-size: 0.85rem; }

@media (max-width: 40rem) {
  .turn > summary, .call-line, .event-line { flex-wrap: wrap; gap: 0.4rem; }
  .asked { flex-basis: 100%; white-space: normal; }
}

/* One timeline of steps, each openable. The summary is the line that was
   there before; the body is what it would not fit. */
.step > summary { list-style: none; cursor: pointer; }
.step > summary::-webkit-details-marker { display: none; }
.step[open] > summary { color: var(--accent); }

.call-line, .event-line {
  display: flex; gap: 0.75rem; align-items: baseline;
  padding: 0.2rem 0.5rem; border-radius: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.call-line { background: #171717; }
.step.anthropic .call-line { border-left: 3px solid #7ec8b0; }
.step.elevenlabs .call-line { border-left: 3px solid #d8a765; }
.event-line { border-left: 3px solid #333; }
.event-line .detail { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.step-body { padding: 0.3rem 0 0.5rem 1rem; }
.payload {
  margin: 0 0 0.3rem; padding: 0.5rem 0.7rem; background: #0d0d0d;
  border-radius: 0.4rem; font-size: 0.85rem; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow-y: auto;
}
.step-body .dim { margin: 0; }