/*
 * The one stylesheet every page in this tool loads.
 *
 * Before this file, index.html and calls.html each carried their own copy of
 * the same token block and the same .msg rules, and they had already drifted.
 * A two-page internal tool does not need a build step, but it does need one
 * source of truth: tokens, reset, and the component set live here, and a page
 * adds only what is genuinely its own.
 *
 * Paper and ink, with a single action colour: the project's purple. It is
 * spent only on things you can act on or things that are live. Everything else is ink at three weights. If two things on a screen carry
 * it and only one of them is the action, the screen is wrong.
 *
 * Dark by default, because of the use scene rather than the category: this is
 * run in long sessions, often at night, next to a phone on speaker. Light is
 * one attribute away and follows the system when nobody has chosen.
 */

/*
 * The face is the platform's own sans: SF on macOS, Segoe on Windows.
 *
 * Not a fallback and not laziness. This is an operating tool that lives on the
 * same machines all day, and a self-hosted face buys character it has nowhere
 * to spend: there is no hero type here, only labels, numbers and transcript.
 * What it costs is real, though, and paid on every load: a file to fetch, a
 * swap to flash, and one more thing that can 404 in the middle of a call.
 * Personality in this tool comes from the palette and the spacing.
 */

:root {
  color-scheme: dark;

  /* Ink and surfaces. Three ink weights, and never a fourth: fg is what you
     read, muted is what labels it, faint is what you are allowed to ignore. */
  --bg: #0d0d0c;
  --fg: #f6f6f4;
  --muted: #b5b0a6;
  --faint: #8f8a80;
  --card: #171614;
  --raised: #1f1d1a;
  --line: #2e2c29;
  --line-soft: #211f1d;

  /* The single action colour, and the only hue in the system. */
  --accent: #9147f3;
  --accent-deep: #a366f6;
  --accent-tint: #1e1430;
  --accent-fg: #ffffff;

  /* Status. Deliberately desaturated so they read as state, not as brand. */
  --ok: #7fc698;
  --ok-bg: #14251a;
  --warn: #d8a657;
  --warn-bg: #241d10;
  --bad: #f0a196;
  --bad-bg: #2c1512;

  /* 4px base. Every gap on every page comes from this scale. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  /* Type. Small, because this is a dense operating surface read up close. */
  --t-xs: 0.75rem;    /* 12px, chips and captions */
  --t-sm: 0.8125rem;  /* 13px, labels and secondary rows */
  --t-base: 0.875rem; /* 14px, body and transcript */
  --t-lg: 1rem;       /* 16px, panel titles */
  --t-xl: 1.375rem;   /* 22px, page heading */
  --t-num: 2rem;      /* 32px, the one measurement that gets to be big */

  --radius-chip: 6px;
  --radius-field: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  /* One control height for every input, select and button, so a row never
     stacks three different ones. */
  --control-h: 34px;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-btn: 0 2px 8px -2px rgba(145, 71, 243, 0.45);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
          Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light follows the system until someone picks, and the picker wins both ways. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff;
    --fg: #0d0d0c;
    --muted: #565143;
    --faint: #6b675e;
    --card: #ffffff;
    --raised: #f6f6f4;
    --line: #e5e3db;
    --line-soft: #f0efe9;
    --accent-deep: #7b32dd;
    --accent-tint: #f1e9fe;
    --ok: #2f8a4d;
    --ok-bg: #e8f2eb;
    --warn: #8a6410;
    --warn-bg: #f7f1e3;
    --bad: #d5453b;
    --bad-bg: #fbecea;
    --shadow: 0 1px 2px rgba(13, 13, 12, 0.04), 0 6px 20px rgba(13, 13, 12, 0.06);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #0d0d0c;
  --muted: #565143;
  --faint: #6b675e;
  --card: #ffffff;
  --raised: #f6f6f4;
  --line: #e5e3db;
  --line-soft: #f0efe9;
  --accent-deep: #7b32dd;
  --accent-tint: #f1e9fe;
  --ok: #2f8a4d;
  --ok-bg: #e8f2eb;
  --warn: #8a6410;
  --warn-bg: #f7f1e3;
  --bad: #d5453b;
  --bad-bg: #fbecea;
  --shadow: 0 1px 2px rgba(13, 13, 12, 0.04), 0 6px 20px rgba(13, 13, 12, 0.06);
}

/* --- reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-chip);
}

/* Numbers that sit in a column, or that change while you watch them, must not
   reflow. Tabular figures do that without dressing the page as a terminal. */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* --- app shell --- */
.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s7);
}
@media (max-width: 640px) {
  .app { padding: var(--s4) var(--s4) var(--s6); }
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
/* The wordmark, in words only. The phone glyph next to it was saying the same
   thing as the phone on the call button, and the one on the button is the one
   that means something. */
.brand {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  flex: none;
  padding-right: var(--s3);
  margin-right: var(--s1);
  border-right: 1px solid var(--line);
}
/* Wraps, because a fifth item on a phone otherwise runs off the edge with the
   active pill half outside the screen. */
.topbar nav { display: flex; flex-wrap: wrap; gap: var(--s1); flex: 1; }
.topbar nav a {
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-chip);
  color: var(--muted);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  transition: color 0.14s, background 0.14s;
}
.topbar nav a:hover { color: var(--fg); background: var(--line-soft); }
.topbar nav a[aria-current="page"] { color: var(--fg); background: var(--raised); }
/* The nav carries the journey, so the step you are on reads as a step. */
.topbar nav a[aria-current="page"]::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: var(--s2);
}
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; }
  .topbar nav { order: 3; flex-basis: 100%; }
}

h1 {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.lede {
  color: var(--muted);
  max-width: 68ch;
  margin-top: var(--s2);
}

/* --- panel --- */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
}
.panel + .panel { margin-top: var(--s4); }
.panel > h2 {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  margin-bottom: var(--s4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.panel > h2 .aside { font-weight: 400; color: var(--faint); font-size: var(--t-xs); }

/* --- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--control-h);
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--raised);
  color: var(--fg);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, border-color 0.14s, color 0.14s, opacity 0.14s;
}
.btn:hover:not(:disabled) { border-color: var(--faint); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn-danger { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.btn-danger:hover:not(:disabled) { background: var(--bad); color: var(--bg); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--line-soft); color: var(--fg); border-color: transparent; }

.btn-sm { height: 28px; padding: 0 var(--s3); font-size: var(--t-xs); }
.btn-icon { width: var(--control-h); padding: 0; }
.btn-icon.btn-sm { width: 28px; }

/* --- fields --- */
.field { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.field > label {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}
.field > label .val { color: var(--fg); font-variant-numeric: tabular-nums; }

.input, .select, .textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  color: var(--fg);
  font-size: var(--t-sm);
  transition: border-color 0.14s;
}
.input, .select { height: var(--control-h); padding: 0 var(--s3); }
.textarea { padding: var(--s3); min-height: 84px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); }
.select:disabled, .input:disabled { opacity: 0.45; cursor: not-allowed; }

.select {
  appearance: none;
  cursor: pointer;
  padding-right: var(--s6);
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b5b0a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
  background-size: 11px;
}
:root[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b675e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

.range {
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  margin: calc((var(--control-h) - 4px) / 2) 0;
}
.range::-webkit-slider-thumb {
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.range::-moz-range-thumb {
  width: 14px; height: 14px;
  border: 0; border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* --- switch --- */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.switch input {
  appearance: none;
  width: 32px; height: 18px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  cursor: pointer;
  margin: 0;
  flex: none;
  transition: background 0.16s;
}
.switch input::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--faint);
  transition: transform 0.16s var(--ease), background 0.16s;
}
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(14px); background: #fff; }
.switch:hover { color: var(--fg); }

/* --- status --- */
.status { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.live { background: var(--accent); animation: breathe 1.8s ease-in-out infinite; }
.dot.ok { background: var(--ok); }
@keyframes breathe { 50% { opacity: 0.35; } }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 1px var(--s2);
  border-radius: var(--radius-chip);
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 500;
  white-space: nowrap;
}
.badge.accent { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.badge.ok { border-color: transparent; background: var(--ok-bg); color: var(--ok); }
.badge.warn { border-color: transparent; background: var(--warn-bg); color: var(--warn); }
.badge.bad { border-color: transparent; background: var(--bad-bg); color: var(--bad); }

/* --- rows and stats --- */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.row:last-child { border-bottom: 0; }
.row .k { color: var(--muted); }
.row .v { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

.stat { display: flex; flex-direction: column; gap: var(--s1); }
.stat .n {
  font-size: var(--t-num);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat .n.good { color: var(--ok); }
.stat .n.ok { color: var(--warn); }
.stat .n.bad { color: var(--bad); }
.stat .c { font-size: var(--t-xs); color: var(--faint); }

/* --- transcript --- */
.thread { display: flex; flex-direction: column; gap: var(--s3); }
.msg {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  max-width: 82%;
  border: 1px solid var(--line);
  animation: rise 0.24s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
  .dot.live { animation: none; }
}
.msg .who {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--faint);
  margin-bottom: var(--s1);
}
.msg.caller { background: var(--raised); align-self: flex-end; border-bottom-right-radius: var(--s1); }
.msg.agent { background: var(--card); align-self: flex-start; border-bottom-left-radius: var(--s1); }
:root[data-theme="light"] .msg.agent, :root:not([data-theme="dark"]) .msg.agent { background: var(--line-soft); }
.msg.partial { opacity: 0.55; }
/* The half of the sentence the fast voice said while the thinker was thinking. */
.msg .front { color: var(--warn); }
/* A turn that was cut off, shown exactly as the model recorded it. */
.msg.cut { border-style: dashed; }
.msg .mark { color: var(--faint); }
/* A turn nobody spoke: machinery, not speech. */
.msg.synthetic { opacity: 0.7; border-style: dashed; }

/* --- notes and errors --- */
.note {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-sm);
}
.note b { color: var(--fg); font-weight: 500; }
.hint { font-size: var(--t-xs); color: var(--faint); }
.err {
  color: var(--bad);
  font-size: var(--t-sm);
  min-height: 1.2em;
}
.empty {
  color: var(--faint);
  font-size: var(--t-sm);
  padding: var(--s5) 0;
  text-align: center;
}

/* --- table --- */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: var(--s3);
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  white-space: nowrap;
}
.table td.strong { color: var(--fg); font-weight: 500; }
.table tbody tr { cursor: pointer; transition: background 0.12s; }
.table tbody tr:hover td { background: var(--line-soft); color: var(--fg); }
.table tbody tr[aria-selected="true"] td { background: var(--accent-tint); color: var(--fg); }
.table-scroll { overflow-x: auto; }

/* --- layout helpers --- */
.grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s4);
}
.cluster { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.spacer { flex: 1; }