/* walk-and-talk — LEVR light/editorial.
   Pure-white canvas, black-as-ink, Geist + JetBrains Mono, one reserved red
   for the live signal. The mobile translation of the Flywheel dashboard. */

:root {
  /* surfaces — layered by hairlines + soft shadow, not by darkness */
  --bg: #ffffff;
  --bg-grad-top: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --line: #e8e8e8;
  --line-soft: #efefef;
  --line-strong: #d6d6d6;
  --hover: #f3f3f3;

  /* text — near-black ink */
  --text: #111111;
  --text-2: #2a2a2a;
  --text-3: #6b6b6b;

  /* accent = solid black (the mint dies here) */
  --accent: #111111;
  --accent-dim: rgba(17, 17, 17, 0.06);
  --agent: #2a2a2a;
  --you: #111111;

  /* the one reserved hue: live / recording */
  --live: #e5484d;
  --live-dim: rgba(229, 72, 77, 0.14);
  --danger: #c0362c;
  --amber: #8b4513;

  /* motion — quiet, editorial */
  --spring: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* metrics — LEVR radii */
  --r-card: 24px;
  --r-btn: 999px;
  --r-sm: 12px;
  --r-chip: 6px;
  --pad: 20px;

  /* shadows — soft elevation off white */
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-card-hover:
    0 8px 20px rgba(17, 17, 17, 0.08), 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-sheet: 0 20px 40px rgba(17, 17, 17, 0.16);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Geist",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 15px;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) var(--pad) env(safe-area-inset-bottom);
}

section[hidden],
[hidden] {
  display: none !important;
}

/* ---------- view transitions (push / pop) ---------- */
#home,
#conversation,
#frame,
#profile {
  animation: enterFwd 0.34s var(--ease) both;
}
.nav-back #home,
.nav-back #conversation,
.nav-back #frame,
.nav-back #profile {
  animation: enterBack 0.34s var(--ease) both;
}
@keyframes enterFwd {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes enterBack {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #home,
  #conversation,
  #frame,
  #profile,
  .nav-back #home,
  .nav-back #conversation,
  .nav-back #frame,
  .nav-back #profile {
    animation: fade 0.2s ease both;
  }
  @keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ---------- typography ---------- */
.kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
h1 {
  letter-spacing: -0.02em;
}

/* ---------- buttons ---------- */
.btn {
  width: 100%;
  padding: 17px 20px;
  border: none;
  border-radius: var(--r-btn);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 0.12s var(--ease),
    opacity 0.2s,
    background 0.2s,
    box-shadow 0.2s;
  will-change: transform;
}
.btn:active {
  transform: scale(0.965);
  opacity: 0.9;
}
.btn:disabled {
  opacity: 0.45;
  transform: none;
}
.btn-primary {
  background: linear-gradient(180deg, #ffffff 0%, #ededf0 100%);
  color: #08080c;
  box-shadow: 0 8px 24px -10px rgba(255, 255, 255, 0.5);
}
.btn-ghost {
  background: var(--surface-2);
  color: var(--text);
}
.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--line);
}

/* ============ HOME ============ */
#home {
  padding-top: max(env(safe-area-inset-top), 12px);
  overflow-y: auto;
  position: relative;
}
#homeInner {
  will-change: transform;
}
.ptr {
  position: absolute;
  top: max(env(safe-area-inset-top), 12px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-top: 14px;
  opacity: 0;
  pointer-events: none;
}
.ptr-spin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
}
.ptr.spinning .ptr-spin {
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.home-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0 22px;
}
.wordmark {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.profile-link {
  background: var(--surface-2);
  border: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s var(--ease);
}
.profile-link:active {
  transform: scale(0.94);
}

/* gate */
.gate {
  padding: 28px 0;
  animation: fadeUp 0.5s var(--spring) both;
}
.gate-copy {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.text-input {
  width: 100%;
  padding: 17px;
  margin-bottom: 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 17px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.gate-err {
  color: var(--danger);
  font-size: 14px;
  margin-top: 12px;
}

/* new conversation split button */
.split-btn {
  display: flex;
  gap: 3px;
  margin-bottom: 26px;
}
.split-main {
  flex: 1;
  border-radius: var(--r-btn) 6px 6px var(--r-btn);
}
.split-caret {
  width: 58px;
  flex: none;
  border-radius: 6px var(--r-btn) var(--r-btn) 6px;
  font-size: 17px;
}

/* iOS segmented control (filter) */
.seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 16px;
  background: var(--surface);
  border-radius: 12px;
}
.seg-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 9px;
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.25s var(--ease),
    box-shadow 0.25s;
}
.seg-btn:active {
  transform: scale(0.97);
}
.seg-btn.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.25);
}
.list-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 4px 12px;
}
.history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.history-item-wrap {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  animation: fadeUp 0.5s var(--spring) both;
}
.hi-delete,
.hi-share {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56%;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hi-delete {
  right: 0;
  justify-content: flex-end;
  padding-right: 28px;
  background: var(--danger);
  color: #fff;
}
.hi-share {
  left: 0;
  justify-content: flex-start;
  padding-left: 28px;
  background: linear-gradient(90deg, #7af0dc, var(--accent));
  color: #06120f;
}
.swipe-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: scale(0.5);
  will-change: opacity, transform;
}
.swipe-ico {
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.ico-trash {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3a1 1 0 0 0-1 1v1H4v2h16V5h-4V4a1 1 0 0 0-1-1H9zm-3 6 1 11a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-11H6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3a1 1 0 0 0-1 1v1H4v2h16V5h-4V4a1 1 0 0 0-1-1H9zm-3 6 1 11a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-11H6z'/%3E%3C/svg%3E");
}
.ico-share {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 4.83 8.41 7.41 7 6l5-5 5 5-1.41 1.41L13 4.83V15h-2V4.83zM5 10h3v2H6v8h12v-8h-2v-2h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 4.83 8.41 7.41 7 6l5-5 5 5-1.41 1.41L13 4.83V15h-2V4.83zM5 10h3v2H6v8h12v-8h-2v-2h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.history-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  touch-action: pan-y;
  transition:
    transform 0.3s var(--spring),
    background 0.2s;
}
.history-item:active {
  background: var(--surface-2);
}
.sheet-msg {
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
  border-bottom: 1px solid var(--line-soft);
}
.menu-danger {
  color: var(--danger);
  font-weight: 600;
}
.hi-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.hi-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hi-meta {
  font-size: 13px;
  color: var(--text-3);
}
.hi-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  flex-shrink: 0;
}
.hi-active {
  color: var(--accent);
  background: var(--accent-dim);
}
.hi-paused {
  color: var(--amber);
  background: rgba(255, 209, 102, 0.14);
}

/* empty state — iOS ContentUnavailableView */
.empty {
  color: var(--text-3);
  font-size: 15px;
  text-align: center;
  line-height: 1.6;
  padding: 64px 24px;
  animation: fadeUp 0.5s var(--spring) both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============ TOP BAR (material) ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 calc(var(--pad) * -1);
  padding: 14px var(--pad);
  background: rgba(10, 10, 14, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}
.back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px 0 0;
  margin: -4px 0;
  transition:
    transform 0.12s var(--ease),
    opacity 0.15s;
}
.back:active {
  transform: translateX(-3px);
  opacity: 0.6;
}
.status-label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-2);
}
.share {
  margin-left: auto;
  background: var(--surface-2);
  border: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s var(--ease);
}
.share:active {
  transform: scale(0.93);
}

/* status dot */
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
body[data-state="connecting"] .dot,
body[data-state="saving"] .dot {
  background: var(--amber);
  animation: blink 1s infinite;
}
body[data-state="paused"] .dot,
body[data-state="muted"] .dot {
  background: var(--amber);
}
body[data-state="saved"] .dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}
body[data-state="error"] .dot {
  background: var(--danger);
}
@keyframes blink {
  50% {
    opacity: 0.35;
  }
}

/* live equalizer — replaces the dot when recording */
.wave {
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}
.wave i {
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: var(--accent);
  animation: eq 0.9s var(--ease) infinite;
}
.wave i:nth-child(2) {
  animation-delay: 0.15s;
}
.wave i:nth-child(3) {
  animation-delay: 0.3s;
}
.wave i:nth-child(4) {
  animation-delay: 0.45s;
}
.wave i:nth-child(5) {
  animation-delay: 0.6s;
}
@keyframes eq {
  0%,
  100% {
    height: 5px;
  }
  50% {
    height: 16px;
  }
}
body[data-state="live"] .wave {
  display: flex;
}
body[data-state="live"] .dot {
  display: none;
}
.elapsed {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.elapsed[hidden] {
  display: none;
}

/* ============ BRIEF / HEADER CONTENT ============ */
.brief {
  padding: 22px 0 14px;
  position: relative;
}
.brief-toggle {
  position: absolute;
  top: 20px;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: none;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.32s var(--spring);
}
#conversation .brief-toggle {
  display: flex;
}
.brief.collapsed {
  padding: 14px 0 10px;
}
.brief.collapsed .brief-toggle {
  transform: rotate(180deg);
}
.brief.collapsed .kicker,
.brief.collapsed .goal,
.brief.collapsed .rename-btn {
  display: none;
}
.brief.collapsed #subject {
  font-size: 19px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 44px;
}
#subject,
#frame h1,
#profile h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.goal {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
}
.rename-btn {
  margin-top: 14px;
  background: var(--surface-2);
  border: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s var(--ease);
}
.rename-btn:active {
  transform: scale(0.94);
}

/* ============ TRANSCRIPT ============ */
/* Conversation & frame fill the viewport as fixed-height columns so only the
   transcript scrolls — the top bar (and back caret) stay pinned below the
   status bar instead of sliding under it. */
#conversation:not([hidden]),
#frame:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.line {
  font-size: 17px;
  line-height: 1.5;
  max-width: 88%;
  white-space: pre-wrap;
  padding: 12px 16px;
  border-radius: 20px;
  animation: bubbleIn 0.4s var(--spring) both;
}
.line-agent {
  color: var(--text);
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 7px;
}
.line-you {
  color: #06120f;
  align-self: flex-end;
  background: linear-gradient(180deg, #7af0dc, var(--accent));
  border-bottom-right-radius: 7px;
  font-weight: 500;
}
@keyframes bubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Pending passage: a shimmer bubble that appears the moment a passage is cut,
   then gets replaced by the real transcribed text. Makes the lag legible —
   you see WHERE the upcoming text will land while it's still transcribing. */
.line-pending {
  align-self: flex-end;
  border-bottom-right-radius: 7px;
  color: var(--text-3);
  font-size: 14px;
  font-style: italic;
  background: linear-gradient(
    100deg,
    var(--surface-2) 30%,
    var(--line) 50%,
    var(--surface-2) 70%
  );
  background-size: 200% 100%;
  animation:
    bubbleIn 0.4s var(--spring) both,
    shimmer 1.4s linear infinite;
}
.line-pending .dots::after {
  content: "";
  animation: capDots 1.2s steps(4, end) infinite;
}
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes capDots {
  0% {
    content: "";
  }
  25% {
    content: "·";
  }
  50% {
    content: "··";
  }
  75% {
    content: "···";
  }
}

/* Live capture strip: shows while recording. The bar fills over one passage
   window, so the chunked cadence is something you can SEE coming. */
.capture-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  animation: fade 0.3s ease both;
}
.cap-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: capPulse 1.5s var(--ease) infinite;
}
@keyframes capPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(94, 234, 212, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(94, 234, 212, 0);
  }
}
.cap-label {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.cap-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.cap-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #7af0dc, var(--accent));
}
/* brief flash when a passage is committed */
.capture-strip.committed .cap-label {
  color: var(--accent);
}

/* ============ CONTROLS ============ */
.controls {
  padding: 16px 0 max(env(safe-area-inset-bottom), 22px);
}
.live-controls {
  display: flex;
  gap: 12px;
}
.live-controls .btn {
  flex: 1;
}
.hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ============ ACTION SHEET (the ▾ menu) ============ */
#scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  animation: fade 0.25s ease both;
}
.menu {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(env(safe-area-inset-bottom), 12px);
  z-index: 50;
  border-radius: 22px;
  background: rgba(30, 30, 36, 0.86);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--line);
  overflow: hidden;
  animation: sheetUp 0.4s var(--spring) both;
}
@keyframes sheetUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.menu-item {
  display: block;
  width: 100%;
  text-align: center;
  padding: 18px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  color: var(--accent);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}
.menu-item:last-child {
  border-bottom: none;
}
.menu-item:active {
  background: rgba(255, 255, 255, 0.06);
}

/* ============ FRAME RESULT ============ */
.frame-result {
  margin: 0 0 14px;
  padding: 18px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-card);
  background: var(--surface);
  animation: fadeUp 0.45s var(--spring) both;
}
.frame-title {
  margin: 8px 0 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.frame-actions {
  display: flex;
  gap: 10px;
}
.frame-actions .btn {
  flex: 1;
  padding: 14px;
  font-size: 16px;
}

/* ============ PROFILE ============ */
#profile:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.profile-text {
  flex: 1;
  min-height: 240px;
  resize: none;
  margin: 6px 0 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  font-family: inherit;
  -webkit-overflow-scrolling: touch;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.profile-text:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

#agentAudio {
  display: none;
}

/* ============ QUEUE — "Awaiting you" ============ */
.queue-section {
  margin-bottom: 18px;
  animation: fade 0.3s ease both;
}
.queue-count {
  color: var(--accent);
  font-weight: 600;
}
.queue-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.queue-item {
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: linear-gradient(
    180deg,
    rgba(94, 234, 212, 0.08),
    rgba(94, 234, 212, 0.03)
  );
  border: 1px solid var(--accent-dim);
  cursor: pointer;
  animation: bubbleIn 0.4s var(--spring) both;
  transition: transform 0.15s var(--ease);
}
.queue-item:active {
  transform: scale(0.985);
}
.qi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.qi-from {
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.qi-kind {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.qi-title {
  font-size: 16px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.35;
}
.qi-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 3px;
  line-height: 1.4;
}

/* send sheet */
.send-list {
  display: flex;
  flex-direction: column;
}

/* The voice sheet lists every voice the engine offers — 19 of them since
   GPT-Live — so it has to scroll inside the sheet rather than run off the top
   of a phone screen. Cancel stays put at the bottom. */
#voiceSheet:not([hidden]) {
  display: flex;
  flex-direction: column;
  max-height: 72vh;
}
#voiceSheetList {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.send-loading {
  padding: 12px 16px;
  color: var(--text-3);
  font-size: 14px;
  text-align: center;
}

/* transient toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  transform: translate(-50%, 16px);
  opacity: 0;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 14px;
  z-index: 60;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
  max-width: 80%;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============ AGENT PICKER (new-conversation menu) ============ */
.menu-label {
  margin: 4px 6px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.menu-sep {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
  opacity: 0.6;
}
.agent-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.agent-name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
}
.agent-blurb {
  font-size: 12.5px;
  color: var(--text-3);
}

/* ============ VOICE PICKER (profile) ============ */
.voice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 4px;
}
.voice-label {
  font-size: 15px;
  color: var(--text-2);
}
.voice-select {
  flex: 0 1 auto;
  min-width: 160px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
}
.voice-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ============ MEMORY TOGGLE (conversation) ============ */
.mem-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.mem-toggle .mem-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  transition: background 0.2s;
}
.mem-toggle.on {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(94, 234, 212, 0.06);
}
.mem-toggle.on .mem-dot {
  background: var(--accent);
}

/* ============ CONVERSATION SETTINGS (voice chip + memory toggle row) ============ */
.conv-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.conv-settings .mem-toggle {
  margin-top: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s,
    transform 0.12s var(--ease);
}
.chip:active {
  transform: scale(0.96);
}
.chip .chip-ico {
  font-size: 12px;
  opacity: 0.9;
}
.menu-current {
  color: var(--accent);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   LEVR REDESIGN — light/editorial override layer (v1)
   Overrides the dark-era hardcoded values. Token flip handled in :root.
   Every selector below already exists; only values change.
   ═══════════════════════════════════════════════════════════════════ */

/* mono everywhere numeric / label */
.mono,
#elapsed,
.elapsed,
.kicker,
.caption,
.hi-meta,
.qi-kind,
.menu-label,
.list-label,
.cap-label,
.lockup-sub {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

main {
  max-width: 480px;
}

.kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.kicker .num {
  color: var(--text);
  font-weight: 500;
  margin-right: 8px;
}

/* ── HOME HEADER — LEVR wordmark lockup ── */
.home-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.lockup {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.lockup-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.lockup .wordmark {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.lockup-sub {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.profile-link {
  grid-column: 3;
  justify-self: end;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-btn);
}
.profile-link:active {
  background: var(--hover);
}

/* ── BUTTONS — LEVR pills ── */
.btn {
  width: 100%;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 0.12s var(--ease),
    background 0.18s,
    box-shadow 0.18s,
    opacity 0.18s;
}
.btn:active {
  transform: scale(0.98);
  opacity: 1;
}
.btn:disabled {
  opacity: 0.4;
  transform: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-primary:active {
  background: #000;
}
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:active {
  background: var(--hover);
}
.btn-danger {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--line-strong);
}
.btn-danger:active {
  background: #fcf1f0;
}
.split-main {
  border-radius: var(--r-btn) 8px 8px var(--r-btn);
}
.split-caret {
  border-radius: 8px var(--r-btn) var(--r-btn) 8px;
  width: 54px;
  flex: none;
}

/* ── SEGMENTED FILTER ── */
.seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.seg-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 9px;
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s var(--ease);
}
.seg-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card);
}

/* ── HISTORY — ruled document list ── */
.history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.history-item-wrap {
  border-radius: 0;
  overflow: hidden;
  animation: lineIn 0.4s var(--ease) both;
}
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4px;
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.18s;
}
.history-item:active {
  background: var(--hover);
}
.hi-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hi-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hi-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-transform: uppercase;
}
/* Tenant chip — marks a conversation that came from a client dashboard, so it
   reads differently from a personal walk in the same list. `.hi-kind` is the
   same pill marking a row that is a recorded phone call, not a walk. */
.hi-tenant,
.hi-kind {
  align-self: flex-start;
  margin-top: 5px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "Started from Client: Group › Node" breadcrumb on the conversation view. */
.started-from {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}
.started-from .sf-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hi-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-chip);
  background: var(--surface-2);
  color: var(--text-3);
  flex-shrink: 0;
}
.hi-new {
  background: #f8e7d6;
  color: #8b4513;
}
.hi-active {
  background: #d7ebdd;
  color: #1f5132;
}
.hi-paused {
  background: #f8e7d6;
  color: #8b4513;
}
.hi-ended {
  background: #e6e4dc;
  color: #5c5c5c;
}
.hi-share {
  background: var(--text);
  color: #fff;
}
.hi-delete {
  background: var(--danger);
  color: #fff;
}
.empty {
  color: var(--text-3);
  font-size: 14.5px;
  padding: 56px 24px;
  line-height: 1.6;
  text-align: center;
}

/* ── QUEUE — incoming (blue taxonomy) ── */
.queue-count {
  color: var(--text);
  font-weight: 500;
  font-family: "JetBrains Mono", monospace;
}
.queue-list {
  gap: 8px;
  margin-top: 10px;
}
.queue-item {
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: #f4f8fd;
  border: 1px solid #d9e5f3;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.15s var(--ease),
    box-shadow 0.15s;
}
.queue-item:active {
  transform: scale(0.99);
}
.qi-from {
  font-size: 12.5px;
  color: #1e3a6e;
  font-weight: 600;
}
.qi-kind {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.qi-title {
  font-size: 16px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.35;
}
.qi-sub {
  font-size: 13.5px;
  color: var(--text-2);
  margin-top: 3px;
  line-height: 1.45;
}

/* ── TOPBAR ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 calc(var(--pad) * -1);
  padding: 12px var(--pad);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.back {
  background: none;
  border: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0 4px 0 0;
}
.back:active {
  transform: translateX(-2px);
  opacity: 0.55;
}
.status-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.share {
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: var(--r-btn);
  cursor: pointer;
}
.share + .share {
  margin-left: 8px;
}
.share:active {
  background: var(--hover);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
body[data-state="connecting"] .dot,
body[data-state="saving"] .dot {
  background: var(--text-3);
  animation: blink 1s infinite;
}
body[data-state="paused"] .dot,
body[data-state="muted"] .dot {
  background: var(--line-strong);
}
body[data-state="saved"] .dot {
  background: #1f5132;
  box-shadow: 0 0 0 4px rgba(31, 81, 50, 0.12);
}
body[data-state="error"] .dot {
  background: var(--danger);
}
body[data-state="live"] .dot {
  background: var(--live);
  box-shadow: 0 0 0 4px var(--live-dim);
  display: inline-block;
}
#elapsed {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

/* ── WAVE (topbar live meter) ── */
.wave {
  display: none;
  align-items: center;
  gap: 3px;
  height: 18px;
}
.wave i {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--text);
  transform-origin: bottom;
  transition: transform 0.08s linear;
}
body[data-state="live"] .wave {
  display: flex;
}
body[data-state="muted"] .wave {
  display: flex;
  opacity: 0.35;
}

/* ── BRIEF ── */
.brief {
  padding: 22px 0 16px;
}
#subject,
#frame h1,
#profile h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.goal {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 36em;
}
.brief-toggle {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rename-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
  padding: 6px 13px;
  border-radius: var(--r-btn);
}
.rename-btn:active {
  background: var(--hover);
}

/* ── CHIPS / TOGGLES ── */
.chip,
.mem-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.18s,
    border-color 0.18s,
    background 0.18s,
    transform 0.12s var(--ease);
}
.chip:active,
.mem-toggle:active {
  transform: scale(0.97);
  background: var(--hover);
}
.chip .chip-ico {
  opacity: 0.85;
  display: inline-flex;
}
.mem-toggle .mem-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
}
.mem-toggle.on {
  color: var(--text);
  border-color: var(--text);
  background: var(--accent-dim);
}
.mem-toggle.on .mem-dot {
  background: var(--text);
}
.mem-toggle .notify-ico {
  display: inline-flex;
  opacity: 0.9;
}

/* ── TRANSCRIPT — bubbles become speaker rows ── */
.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.line {
  max-width: 100%;
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.55;
  padding: 16px 0 16px 84px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
  position: relative;
  align-self: stretch;
  animation: lineIn 0.35s var(--ease) both;
}
.line:last-child {
  border-bottom: none;
}
.line::before {
  position: absolute;
  left: 0;
  top: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.line-agent {
  color: var(--text-2);
}
.line-agent::before {
  content: "AGENT";
}
.line-you {
  color: var(--text);
  font-weight: 500;
}
.line-you::before {
  content: "YOU";
  color: var(--text);
}
/* A named speaker (call transcripts: "Chase", "Tom", "(303) 555-1234"). The
   gutter is the same one YOU/AGENT use — the label just comes from the data
   instead of from a class, so any name works. Names are arbitrary and can be
   long, so it wraps INSIDE the gutter (52px = the narrow, phone-sized gutter)
   rather than running out over the words. */
.line[data-who]::before {
  content: attr(data-who);
  width: 52px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.line-pending {
  align-self: stretch;
  color: var(--text-3);
  font-style: italic;
  font-size: 15px;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(17, 17, 17, 0.04) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation:
    lineIn 0.35s var(--ease) both,
    shimmer 1.4s linear infinite;
}
.line-pending::before {
  content: "YOU";
}
@keyframes lineIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── RECORD RING — the signature live moment (#startBtn) ── */
#conversation .controls #startBtn {
  width: 132px;
  height: 132px;
  margin: 8px auto 4px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--accent);
  color: transparent;
  position: relative;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.18s;
}
#conversation .controls #startBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--live);
}
#conversation .controls #startBtn:active {
  transform: scale(0.96);
}
#conversation .controls #startBtn:focus-visible {
  box-shadow: 0 0 0 4px var(--accent-dim);
}

/* ── CAPTURE STRIP — thin LEVR meter ── */
.capture-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.cap-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  flex: none;
  animation: livePulse 1.6s var(--ease) infinite;
}
@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 var(--live-dim);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(229, 72, 77, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 72, 77, 0);
  }
}
.cap-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  transition: color 0.25s;
}
.cap-track {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.cap-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--text);
}
.capture-strip.committed .cap-label {
  color: var(--text);
}

/* ── SHEETS / MENUS ── */
#scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(17, 17, 17, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade 0.22s ease both;
}
.menu {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(env(safe-area-inset-bottom), 12px);
  z-index: 50;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
  animation: sheetUp 0.34s var(--spring) both;
}
@keyframes sheetUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.menu-item {
  display: block;
  width: 100%;
  text-align: center;
  padding: 17px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.menu-item:last-child {
  border-bottom: none;
}
.menu-item:active {
  background: var(--hover);
}
.menu-current {
  color: var(--text);
  font-weight: 600;
}
.menu-danger {
  color: var(--danger);
  font-weight: 500;
}
.menu-label,
.list-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.menu-sep {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
  opacity: 1;
}
.sheet-msg {
  color: var(--text-3);
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.agent-item {
  text-align: left;
}
.agent-name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
}
.agent-blurb {
  font-size: 12.5px;
  color: var(--text-3);
}
.send-loading {
  color: var(--text-3);
}

/* ── FRAME ── */
.frame-result {
  margin: 0 0 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.frame-result .kicker {
  color: #1f5132;
}
.frame-title {
  margin: 8px 0 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.frame-actions {
  display: flex;
  gap: 10px;
}
.frame-actions .btn {
  flex: 1;
  padding: 13px;
  font-size: 14px;
}

/* ── GATE / INPUTS / PROFILE ── */
.gate {
  padding: 28px 0;
}
.gate-copy {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.text-input,
.profile-text,
.voice-select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}
.text-input {
  width: 100%;
  padding: 15px;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
  font-size: 16px;
}
.text-input:focus,
.profile-text:focus,
.voice-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.gate-err {
  color: var(--danger);
  font-size: 13px;
}
.profile-text {
  border-radius: var(--r-card);
  font-size: 16px;
  line-height: 1.6;
  padding: 18px;
}
.voice-label {
  font-size: 14px;
  color: var(--text-2);
}
.voice-select {
  padding: 11px 34px 11px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6B6B' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.hint {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ── TOAST / PTR ── */
.toast {
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 13.5px;
  box-shadow: var(--shadow-sheet);
}
.ptr-spin {
  border: 2px solid var(--line);
  border-top-color: var(--accent);
}

/* ── a11y ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cap-dot,
  .history-item-wrap {
    animation: none;
  }
  .line-pending {
    animation: lineIn 0.2s ease both;
  }
}

/* ── DARK MODE — restrained OLED night (same design in negative) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0b;
    --surface: #141416;
    --surface-2: #1b1b1e;
    --line: #26262a;
    --line-soft: #1f1f22;
    --line-strong: #34343a;
    --hover: #1f1f22;
    --text: #f4f4f5;
    --text-2: #c8c8cc;
    --text-3: #8a8a90;
    --accent: #f4f4f5;
    --accent-dim: rgba(244, 244, 245, 0.08);
    --agent: #c8c8cc;
    --you: #f4f4f5;
    --live: #ff5a5f;
    --live-dim: rgba(255, 90, 95, 0.16);
    --danger: #ff6b66;
  }
  .btn-primary {
    color: #0a0a0b;
  }
  .btn-primary:active {
    background: #fff;
  }
  .lockup-mark {
    color: #0a0a0b;
  }
  .topbar {
    background: rgba(10, 10, 11, 0.82);
  }
  .toast {
    color: #0a0a0b;
  }
  .queue-item {
    background: #11161d;
    border-color: #1d2b40;
  }
  .qi-from {
    color: #9cc2f0;
  }
  .hi-new,
  .hi-paused {
    background: #2a2017;
    color: #d8a070;
  }
  .hi-active {
    background: #16271c;
    color: #7fc99a;
  }
  .hi-ended {
    background: #222;
    color: #999;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LEVR REDESIGN — Round 2 (critique fixes: live topbar, ring hero,
   numbered kickers, touch targets, focus, taxonomy, a11y)
   ═══════════════════════════════════════════════════════════════════ */

/* ── LIVE TOPBAR: stop the overflow / Share clip ── */
.topbar {
  gap: 8px;
}
.topbar .status-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share {
  flex: none;
  padding: 7px 13px;
}
#elapsed {
  flex: none;
}
.wave {
  gap: 2px;
}
.wave i {
  width: 2.5px;
}
/* when recording, the topbar is an instrument: drop the send/share + the
   redundant elapsed (the big ring timer below is the hero number), keep a
   red "Recording" text cue (use-of-color), wave replaces the dot. */
body[data-state="live"] #sendBtn,
body[data-state="live"] #shareBtn,
body[data-state="muted"] #sendBtn,
body[data-state="muted"] #shareBtn,
body[data-state="live"] #elapsed,
body[data-state="muted"] #elapsed,
body[data-state="live"] .dot,
body[data-state="muted"] .dot {
  display: none;
}
body[data-state="live"] .status-label::before,
body[data-state="muted"] .status-label::before {
  content: "● ";
  color: var(--live);
}

/* §10.5: the Mini's question on a paused task thread, as buttons. The
   options are ordinary ghost pills; the chip beside the title reuses the
   home list's task chip (.hi-status + tone). */
.task-ask {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 4px;
}
.task-ask-q {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}
.task-ask-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-ask-opts .btn {
  padding: 13px 18px;
  overflow-wrap: anywhere;
}
.task-ask-err {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--danger);
}
.task-note {
  display: flex;
  gap: 8px;
  margin: 10px 0 4px;
}
.task-note-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
}
.conv-settings .hi-status {
  align-self: center;
}

/* §12: the Mini's live task log, under its newest line. It sits in the
   transcript's text column (the phone gutter, 60px); steps take the quiet
   lookup-line type, the elapsed marker and the "Steps (N)" row the gutter
   labels' mono. */
.task-log {
  padding: 2px 0 14px 60px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.45;
}
.task-log:last-child {
  border-bottom: none;
}
.task-log-elapsed,
.task-log-toggle {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.task-log-elapsed {
  display: block;
  margin-bottom: 4px;
}
.task-log-toggle {
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
}
.task-log-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.task-log-live .task-log-steps li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-log-live .task-log-steps li:last-child {
  color: var(--text-2);
}
.task-log-steps li {
  overflow-wrap: anywhere;
}

/* ── RECORD RING as a deliberate anchored hero + the big mono timer ── */
#conversation .controls {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: 8px;
}
#conversation .controls #startBtn {
  margin: 22px auto 6px;
  box-shadow:
    var(--shadow-card),
    0 0 0 7px rgba(17, 17, 17, 0.018);
}
.ring-timer {
  display: none;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 46px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin: 4px 0 14px;
}
body[data-state="live"] #ringTimer,
body[data-state="muted"] #ringTimer {
  display: block;
}
body[data-state="muted"] #ringTimer {
  color: var(--text-3);
}

/* ── NUMBERED KICKER (now rendered via .num spans in HTML) ── */
.kicker .num {
  color: var(--text);
  font-weight: 500;
  margin-right: 8px;
}

/* ── SPLIT BUTTON: 1px seam + present caret, svg+label alignment ── */
.split-btn {
  display: flex;
  gap: 1px;
}
.split-main {
  flex: 1;
  border-radius: 999px 7px 7px 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.split-caret {
  width: 52px;
  flex: none;
  border-radius: 7px 999px 999px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.split-caret svg {
  width: 18px;
  height: 18px;
}

/* ── QUEUE: white card, hue rationed (no blue second-accent) ── */
.queue-item {
  background: var(--surface);
  border: 1px solid var(--line);
}
.qi-from {
  color: var(--text);
}

/* ── PAUSED reads parked/neutral, not warm (reserve warmth for new/draft) ── */
.hi-paused {
  background: var(--surface-2);
  color: var(--text-3);
}

/* ── DANGER action a touch heavier so it's glanceable mid-walk ── */
.btn-danger {
  font-weight: 600;
  color: #b02a1f;
}

/* ── TRANSCRIPT: reclaim the wide speaker gutter on phone ── */
.line {
  padding-left: 60px;
}
.line-pending {
  padding-left: 60px;
}
.line::before {
  font-size: 9.5px;
}

/* ── EMPTY STATE → LEVR ContentUnavailable card ── */
.empty {
  padding: 38px 24px;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.empty::before {
  content: "NOTHING HERE YET";
  display: block;
  margin-bottom: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* ── TOUCH TARGETS: 44px floors without growing the visual pill ── */
.seg-btn {
  padding: 13px 0;
  min-height: 44px;
}
.back {
  min-width: 44px;
  min-height: 44px;
  margin-left: -10px;
  padding: 0;
  justify-content: center;
}
.brief-toggle {
  width: 40px;
  height: 40px;
}
.chip,
.mem-toggle,
.rename-btn,
.share,
.profile-link {
  position: relative;
}
.chip::after,
.mem-toggle::after,
.rename-btn::after,
.share::after,
.profile-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ── FOCUS-VISIBLE: a real ink ring on every control ── */
:root {
  --focus-ring: rgba(17, 17, 17, 0.45);
}
.btn:focus-visible,
.seg-btn:focus-visible,
.chip:focus-visible,
.mem-toggle:focus-visible,
.share:focus-visible,
.profile-link:focus-visible,
.menu-item:focus-visible,
.back:focus-visible,
.rename-btn:focus-visible,
.brief-toggle:focus-visible,
.text-input:focus-visible,
.profile-text:focus-visible,
.voice-select:focus-visible,
#conversation .controls #startBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
@media (prefers-color-scheme: dark) {
  :root {
    --focus-ring: rgba(244, 244, 245, 0.5);
  }
}

/* ── REDUCED MOTION: steady waveform, no pulse ── */
@media (prefers-reduced-motion: reduce) {
  body[data-state="live"] .wave i,
  body[data-state="muted"] .wave i {
    transform: none !important;
  }
}

/* ── Round 2.1 — agent menu rows stack name over blurb ── */
.agent-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}
.agent-item .agent-name {
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════
   LEVR REDESIGN — Round 3 (hero waveform band, chip contrast, polish)
   ═══════════════════════════════════════════════════════════════════ */

/* ── The signature hero waveform band under the timer (live only) ── */
.ring-wave {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 36px;
  max-width: 300px;
  margin: 0 auto 16px;
}
body[data-state="live"] #ringWave,
body[data-state="muted"] #ringWave {
  display: flex;
}
body[data-state="muted"] #ringWave {
  opacity: 0.4;
}
.ring-wave i {
  width: 3px;
  height: 32px;
  border-radius: 2px;
  background: var(--text);
  transform: scaleY(0.16);
  transform-origin: center;
  animation: ringEq 1s var(--ease) infinite;
}
@keyframes ringEq {
  0%,
  100% {
    transform: scaleY(0.16);
  }
  50% {
    transform: scaleY(1);
  }
}
.ring-wave i:nth-child(3n) {
  animation-duration: 1.3s;
}
.ring-wave i:nth-child(3n + 1) {
  animation-duration: 0.78s;
}
.ring-wave i:nth-child(4n) {
  animation-duration: 1.55s;
}
.ring-wave i:nth-child(2n) {
  animation-delay: 0.18s;
}
.ring-wave i:nth-child(3n + 2) {
  animation-delay: 0.42s;
}
.ring-wave i:nth-child(5n) {
  animation-delay: 0.66s;
}
.ring-wave i:nth-child(7n) {
  animation-delay: 0.9s;
}
@media (prefers-reduced-motion: reduce) {
  .ring-wave i {
    animation: none;
    transform: scaleY(0.5);
  }
  .ring-wave i:nth-child(2n) {
    transform: scaleY(0.8);
  }
  .ring-wave i:nth-child(3n) {
    transform: scaleY(0.32);
  }
}

/* ── Status chip contrast (AA on their pastel backgrounds) ── */
.hi-new {
  background: #f8e7d6;
  color: #6e3610;
}
.hi-ended {
  background: #e6e4dc;
  color: #494949;
}

/* ── frame-result: 3 pills need a touch more height ── */
.frame-actions .btn {
  padding: 15px 12px;
}

/* ── ensure the swipe-share reveal is ink, never mint (belt + suspenders) ── */
.hi-share {
  background: var(--text);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   ARCHIVE / "DONE" — list controls, swipe two-button, multi-select
   ═══════════════════════════════════════════════════════════════════ */

/* ── list controls row (Done·N toggle / Select / select-mode header) ── */
.list-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  margin: 0 2px 8px;
}
.list-link {
  background: none;
  border: none;
  color: var(--text-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 6px;
  min-height: 40px;
  cursor: pointer;
  border-radius: 8px;
}
.list-link:active {
  background: var(--hover);
}
.list-link-active {
  color: var(--text);
  font-weight: 500;
}
.list-count {
  flex: 1;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.list-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── swipe reveals: right = Share (ink); left = [Done/Restore][Delete] ── */
.hi-share {
  left: 0;
  right: auto;
  width: 50%;
  justify-content: flex-start;
  padding-left: 26px;
  background: var(--text);
  color: #fff;
}
.hi-left {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 168px;
  display: flex;
}
.hi-left .hi-arch,
.hi-left .hi-delete {
  position: static;
  width: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.hi-arch {
  background: #1f5132;
} /* Done = green (LEVR "ready/done" taxonomy) */
.hi-arch:has(.ico-restore) {
  background: var(--text);
} /* Restore = ink */
.hi-left .hi-delete {
  background: var(--danger);
}
.ico-done {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E");
}
.ico-restore {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5V1L7 6l5 5V7a6 6 0 1 1-6 6H4a8 8 0 1 0 8-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5V1L7 6l5 5V7a6 6 0 1 1-6 6H4a8 8 0 1 0 8-8z'/%3E%3C/svg%3E");
}

/* ── select mode: leading checkbox, selected row ── */
.history-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}
.hi-check {
  width: 0;
  height: 22px;
  border-radius: 50%;
  flex: none;
  margin-right: 0;
  border: 2px solid var(--line-strong);
  transition:
    width 0.18s var(--ease),
    margin 0.18s var(--ease),
    background 0.15s,
    border-color 0.15s;
  background: var(--surface);
  box-sizing: border-box;
  overflow: hidden;
}
.history.selecting .hi-check {
  width: 22px;
  margin-right: 14px;
}
.history.selecting .history-item {
  cursor: pointer;
}
.row-selected .hi-check {
  background: var(--accent);
  border-color: var(--accent);
  -webkit-mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}
.row-selected .history-item {
  background: var(--accent-dim);
}

/* ── bottom bulk action bar ── */
.bulk-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  gap: 10px;
  padding: 14px var(--pad) max(env(safe-area-inset-bottom), 14px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border-top: 1px solid var(--line);
  animation: sheetUp 0.28s var(--spring) both;
}
.bulk-bar .btn {
  flex: 1;
}
.bulk-bar .btn-danger {
  flex: 0 0 auto;
  padding-left: 22px;
  padding-right: 22px;
}

/* ── empty state (contextual kicker + body) ── */
.empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.empty::before {
  content: none !important;
}
.empty-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.empty-body {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ── toast undo action ── */
.toast {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.toast-action {
  background: none;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 2px;
  flex: none;
}
@media (prefers-color-scheme: dark) {
  .toast-action {
    color: #0a0a0b;
  }
}

/* ── Archive fixes (round 2): opaque selected row, no checkbox sliver, bulk bar ── */
.hi-check {
  border: 0;
}
.history.selecting .hi-check {
  border: 2px solid var(--line-strong);
}
/* selected row must be OPAQUE so the swipe reveals never bleed through */
.row-selected .history-item {
  background: #f0f0f1;
}
@media (prefers-color-scheme: dark) {
  .row-selected .history-item {
    background: #20242b;
  }
}
/* bulk bar: primary fills, delete sized to content, no wrap-to-circle */
.bulk-bar .btn {
  width: auto;
  white-space: nowrap;
}
.bulk-bar #bulkPrimary {
  flex: 1 1 auto;
}
.bulk-bar #bulkDelete {
  flex: 0 0 auto;
}

/* ── Archive review fixes: ink Done reveal (hue rationing), seg state cue ── */
/* Done/Restore reveals are INK (full-bleed color is ink-only in LEVR; green
   lives in pastel chips). Red Delete stays the one color. Icon carries meaning;
   Restore gets a lighter ink so the plate differs from Done at a glance. */
.hi-left .hi-arch {
  background: var(--text);
  color: #fff;
}
.hi-left .hi-arch:has(.ico-restore) {
  background: var(--text-2);
}
/* selected filter gets a 3:1 non-text indicator (inset ink underline) */
.seg-btn.active {
  box-shadow:
    var(--shadow-card),
    inset 0 -2px 0 var(--accent);
}
/* focus-visible reveal (for any future focusable reveal action) */
.swipe-inner:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── FIX: rows indenting unevenly. `.hi-main` must fill so the title pins left
   regardless of length; the empty checkbox leaves flow when not selecting. ── */
.hi-main {
  flex: 1 1 auto;
  min-width: 0;
}
.hi-check {
  display: none;
}
.history.selecting .hi-check {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   CALLS — the team line (directory · dial pad · in-call strip)
   No new visual language: the directory is the ruled document list, the
   controls are the live-controls pill row, the state chip is the same pastel
   taxonomy as the history rows, and the one red stays on End.
   ═══════════════════════════════════════════════════════════════════ */

/* home entry point — the profile pill's twin on the other side of the lockup */
.home-head .calls-link {
  grid-column: 1;
  justify-self: start;
}

/* ── screen frame: fixed header + notice, scrolling body, docked strip ── */
#calls {
  animation: enterFwd 0.34s var(--ease) both;
}
.nav-back #calls {
  animation: enterBack 0.34s var(--ease) both;
}
#calls:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.calls-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#calls[data-incall="1"] .calls-body {
  opacity: 0.38;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}

/* ── the recording notice: quiet, mono, said once ── */
.call-notice {
  margin: 18px 0 26px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── inline notices: docked under the topbar so they never scroll away ── */
.calls-notice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
  animation: lineIn 0.3s var(--ease) both;
}

/* ── directory ── */
.dir {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.dir-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  animation: lineIn 0.4s var(--ease) both;
}
.dir-name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-call {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--text);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    background 0.18s,
    transform 0.12s var(--ease);
}
.dir-call:active {
  background: var(--hover);
  transform: scale(0.97);
}
.dir-call:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── dial pad ── */
.dial-display {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 48px;
  margin: 0 0 14px;
}
/* The hairline is the point: empty, this still reads as the field you are
   typing into rather than a gap between the label and the keys. */
.dial-digits {
  grid-column: 2;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  min-height: 34px;
  padding-bottom: 6px;
  /* deliberately short of full width — a full-bleed hairline means "divider"
     everywhere else in this stylesheet, and this one means "field" */
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text);
}
.dial-del {
  grid-column: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-3);
  border-radius: 999px;
  cursor: pointer;
}
.dial-del:active {
  background: var(--hover);
  color: var(--text);
}
.dial-del:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.dial-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.dial-key {
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 21px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.1s var(--ease);
}
.dial-key:active {
  background: var(--hover);
  border-color: var(--line-strong);
  transform: scale(0.94);
}
.dial-key:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── in-call strip ── */
.call-strip {
  flex: none;
  padding: 14px 0 max(env(safe-area-inset-bottom), 18px);
  border-top: 1px solid var(--line);
  background: var(--bg);
  animation: sheetUp 0.3s var(--spring) both;
}
.call-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.call-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
/* connecting/ringing borrows the topbar's own in-flight cue: neutral ink that
   blinks. Warmth stays rationed to new/draft, per the chip taxonomy above. */
.call-strip[data-state="connecting"] .call-dot,
.call-strip[data-state="ringing"] .call-dot {
  background: var(--text-3);
  animation: blink 1s infinite;
}
.call-strip[data-state="connected"] .call-dot {
  background: #1f5132;
  box-shadow: 0 0 0 4px rgba(31, 81, 50, 0.12);
}
.call-strip[data-state="failed"] .call-dot {
  background: var(--danger);
}
.call-peer {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call-time {
  flex: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-3);
}
.call-state {
  flex: none;
  margin-left: auto;
  padding: 4px 9px;
  border-radius: var(--r-chip);
  background: var(--surface-2);
  color: var(--text-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.call-strip[data-state="connected"] .call-state {
  background: #d7ebdd;
  color: #1f5132;
}
.call-strip[data-state="failed"] .call-state {
  color: var(--danger);
}
/* engaged toggles read as ink-filled, the same "on" cue the mem-toggle uses */
#callStrip .btn-ghost[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  #callStrip .btn-ghost[aria-pressed="true"] {
    color: #0a0a0b;
  }
  /* The "danger a touch heavier" fix above hardcodes #b02a1f, and because it was
     appended after the dark block it wins at night too — 3.0:1 on the dark
     surface, under AA. `--danger` already has a night value (#ff6b66, ~6.6:1);
     this just lets it through again. Applies to End, Stop and Delete alike, so
     the one red stays one red. */
  .btn-danger {
    color: var(--danger);
  }
  .call-strip[data-state="connected"] .call-state {
    background: #16271c;
    color: #7fc99a;
  }
  .call-strip[data-state="connected"] .call-dot {
    background: #7fc99a;
    box-shadow: 0 0 0 4px rgba(127, 201, 154, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  #calls,
  .nav-back #calls {
    animation: fade 0.2s ease both;
  }
  .call-strip,
  .calls-notice,
  .dir-row {
    animation: none;
  }
  .call-strip[data-state="connecting"] .call-dot,
  .call-strip[data-state="ringing"] .call-dot {
    animation: none;
  }
}

/* ── ATTACHMENTS — files on the record (strip + transcript lines + drop) ── */
/* The picker is the native sheet; this input is only its trigger. Kept in the
   layout flow at zero size so Safari still opens the sheet from a click. */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.attach-row {
  display: flex;
  justify-content: center;
  margin: 12px 0 0;
}
.btn-attach {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  font-size: 14px;
}
.btn-attach svg {
  flex: none;
}

/* the strip: everything attached, above the controls — a header row that
   shows or hides the scrolling list under it */
.attach-strip {
  display: flex;
  flex-direction: column;
  margin: 0 0 14px;
  border-top: 1px solid var(--line);
}
.att-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.att-head-count {
  color: var(--text);
  font-weight: 500;
}
.att-head-chev {
  flex: none;
  transition: transform 0.2s var(--spring);
}
.att-head[aria-expanded="true"] .att-head-chev {
  transform: rotate(180deg);
}
.att-head:active {
  color: var(--text);
}
.att-head:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
  border-radius: var(--r-chip);
}
.att-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 168px;
  overflow-y: auto;
}
/* the saved files sit in their own list inside the body, so the body's gap
   never reached them and their borders touched — same 6px between them */
.att-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.att {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.att-open {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
}
.att-open:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
  border-radius: 8px;
}
.att-thumb {
  flex: none;
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.att-type {
  flex: none;
  min-width: 38px;
  text-align: center;
  padding: 6px 6px;
  border-radius: var(--r-chip);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.att-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-size {
  flex: none;
  font-size: 11px;
  color: var(--text-3);
  font-family: "JetBrains Mono", monospace;
}
.att-del,
.att-retry {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--r-btn);
}
.att-retry {
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.att-del:active,
.att-retry:active {
  background: var(--hover);
}
.att-del:focus-visible,
.att-retry:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* in flight: an ink fill across the row's own progress track */
.att-pending .att-bar {
  flex: none;
  width: 84px;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.att-pending .att-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s var(--ease);
}
.att-failed {
  border-color: var(--line-strong);
}
.att-msg {
  flex: none;
  font-size: 12.5px;
  color: var(--danger);
}

/* what a file is for — a second line inside the row, under the name */
.att:has(.att-note) {
  flex-wrap: wrap;
  row-gap: 2px;
}
.att-note {
  flex: 1 0 100%;
  min-width: 0;
  padding: 0 0 2px;
}
.att-note-add,
.att-note-edit {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-chip);
}
.att-note-add {
  font-size: 12.5px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.att-note-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.att-note-add:focus-visible,
.att-note-edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.att-note-input {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-chip);
  background: var(--surface);
  color: var(--text);
  /* 16px: anything smaller and iOS Safari zooms the page on focus */
  font-size: 16px;
  font-family: inherit;
}
.att-note-input::placeholder {
  color: var(--text-3);
}
.att-note-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* the same file, in the timeline where it was added */
.line-attach {
  padding-top: 12px;
  padding-bottom: 12px;
}
.line-attach::before {
  content: "FILE";
}
.line-attach .att-open {
  gap: 10px;
}
.line-attach .att-thumb {
  width: 44px;
  height: 44px;
}
/* the file's note, under its name on the timeline */
.att-line-note {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* what the agent looked up, where it looked it up — display only, never saved.
   The label wraps inside the gutter (like a named speaker) so it fits the
   narrow phone one instead of running out over the titles. */
.line-lookup {
  color: var(--text-3);
  font-size: 14px;
}
.line-lookup::before {
  content: "LOOKED UP";
  width: 52px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* the write half: what went INTO the record, where it went in. Same line as a
   lookup (it carries .line-lookup too) — only the gutter label differs. */
.line-recorded::before {
  content: "RECORDED";
}

/* desktop drop target: never takes pointer events, never takes focus */
.drop-overlay {
  position: fixed;
  inset: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  pointer-events: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  animation: fade 0.16s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .att-pending .att-bar i,
  .att-head-chev,
  .drop-overlay {
    transition: none;
    animation: none;
  }
}