/* Voice Recorder — one dark, high-contrast screen built for a phone held in one hand (the
   Live Translator's look). No external fonts or requests. Tap targets ≥ 44px; the live
   English line never below 21px. Works from 320 to 430 px wide, and sideways. */

:root {
  --bg: #0b0d10;
  --surface: #15181d;
  --surface-2: #1f242b;
  --line: #2c333d;
  --text: #f6f8fa;
  --muted: #aab3bf;
  --faint: #8a94a1;
  --accent: #2563eb;      /* idle big button, primary buttons (white text 5.2:1) */
  --accent-text: #8fb6ff; /* accent on dark backgrounds */
  --live: #d93036;        /* recording (white text 4.7:1) */
  --ok: #3fc4a4;
  --danger: #ff7a7a;
  --warn: #f2b84b;
  --radius: 18px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --big: clamp(150px, 48vw, 232px);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.35;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button:disabled {
  cursor: default;
  opacity: 0.45;
}

:focus-visible {
  outline: 3px solid #9cc2ff;
  outline-offset: 2px;
}

.noscript {
  padding: 24px;
  font-size: 20px;
}

/* Read out, not shown (the toast's live region). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- buttons ---------- */

.btn {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-secondary {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}

.btn-danger {
  background: var(--live);
  color: #fff;
}

.btn-wide {
  width: 100%;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}

.badge[data-tone="ok"] {
  color: var(--ok);
  border-color: rgba(63, 196, 164, 0.5);
}

.badge[data-tone="warn"] {
  color: var(--warn);
  border-color: rgba(242, 184, 75, 0.5);
}

/* ---------- screens ---------- */

.screen {
  position: fixed;
  inset: 0;
}

.main-screen {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
}

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(var(--sat) + 10px) calc(var(--sar) + 16px) 8px calc(var(--sal) + 16px);
}

.app-title {
  min-width: 0;
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-btn {
  flex: none;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 17px;
  font-weight: 750;
}

.count {
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- home ---------- */

.home {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px calc(var(--sar) + 16px) 10px calc(var(--sal) + 16px);
}

.recover-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recover-list:empty {
  display: none;
}

.card {
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.recover-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-left: 6px solid var(--warn);
}

.card-text {
  flex: 1 1 12em;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.empty {
  margin: auto 0;
  padding: 16px 8px;
  text-align: center;
  color: var(--muted);
}

.empty-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}

.empty-text {
  margin: 0 auto;
  max-width: 24em;
  font-size: 18px;
}

.storage-line {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(242, 184, 75, 0.12);
  color: var(--warn);
  font-size: 16px;
  font-weight: 650;
}

/* ---------- interruption banner ---------- */

.banner {
  flex: none;
  align-self: center;
  width: calc(100% - 24px - var(--sal) - var(--sar));
  max-width: 560px;
  min-height: 56px;
  margin: 0 calc(var(--sar) + 12px) 8px calc(var(--sal) + 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  border: 2px solid var(--warn);
  border-radius: 16px;
  background: #3a2c0c;
  color: var(--warn);
  font-size: 19px;
  font-weight: 800;
  text-align: center;
}

/* ---------- live transcript ---------- */

.live {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px calc(var(--sar) + 12px) 10px calc(var(--sal) + 12px);
}

.earlier {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--faint);
  text-align: center;
}

.segs {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.live-empty {
  margin: auto 0;
  padding: 16px 8px;
  font-size: 19px;
  color: var(--muted);
  text-align: center;
}

.seg {
  padding: 10px 14px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  background: var(--surface);
}

.seg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.seg-time {
  font-variant-numeric: tabular-nums;
}

.seg-speaker {
  color: var(--accent-text);
}

.seg-en {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.seg-orig {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.marker {
  align-self: center;
  max-width: 100%;
  margin: 2px 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--warn);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.marker[data-kind="reconnect"],
.marker[data-kind="stt"] {
  color: var(--muted);
}

.partial {
  margin: 12px 4px 2px;
  font-size: 22px;
  line-height: 1.3;
  color: var(--faint);
  overflow-wrap: anywhere;
}

.partial-text {
  color: var(--muted);
}

.partial .tag {
  margin-right: 6px;
  vertical-align: 2px;
  color: var(--muted);
}

/* "New ↓": new lines arrived while she scrolled up to re-read. */
.jump-new {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ---------- bottom controls & the big button ---------- */

.controls {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px calc(var(--sar) + 16px) calc(var(--sab) + 18px) calc(var(--sal) + 16px);
}

.keep-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--warn);
}

.status {
  min-height: 1.4em;
  max-width: 26em;
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  color: var(--muted);
  text-align: center;
}

.status[data-tone="error"] {
  color: var(--danger);
}

.status[data-tone="warn"] {
  color: var(--warn);
}

.rec-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.rec-actions:not(:has(> :not([hidden]))) {
  display: none;
}

.ctl-btn {
  min-width: 132px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 18px;
  font-weight: 750;
}

.big {
  position: relative;
  width: var(--big);
  height: var(--big);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border-radius: 50%;
  border: 3px solid transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s, transform 0.1s;
}

.big:active {
  transform: scale(0.97);
}

.big:disabled {
  opacity: 0.6;
}

.big-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 4px solid var(--live);
  opacity: 0;
  pointer-events: none;
}

.big-ico {
  flex: none;
}

.big-ico-stop {
  display: none;
}

.big-label {
  max-width: 88%;
  font-size: clamp(18px, 5vw, 21px);
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
}

.big-timer {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.big-timer:empty {
  display: none;
}

.big[data-state="starting"],
.big[data-state="busy"] {
  background: #33404f;
}

.big[data-state="starting"] .big-ico-mic {
  animation: breathe 1.2s ease-in-out infinite;
}

.big[data-state="live"],
.big[data-state="confirm"] {
  background: var(--live);
}

.big[data-state="live"] .big-ring {
  animation: ring 1.7s ease-out infinite;
}

/* "Tap again to stop": the ring stays still and bright so the second tap is obvious. */
.big[data-state="confirm"] {
  border-color: #fff;
}

.big[data-state="paused"] {
  background: #5b4210;
  border-color: var(--warn);
}

.big[data-state="live"] .big-ico-mic,
.big[data-state="confirm"] .big-ico-mic,
.big[data-state="paused"] .big-ico-mic,
.big[data-state="busy"] .big-ico-mic {
  display: none;
}

.big[data-state="live"] .big-ico-stop,
.big[data-state="confirm"] .big-ico-stop,
.big[data-state="paused"] .big-ico-stop,
.big[data-state="busy"] .big-ico-stop {
  display: block;
}

@keyframes ring {
  from {
    transform: scale(1);
    opacity: 0.75;
  }
  to {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ---------- toast ---------- */

/* A direct child of <body>, fixed at the top: above the full-screen views (20), the bottom
   sheets (30) and "Tap to continue recording" (40), so a message is never drawn behind
   what is open. Centred by its margins (the drop animation owns transform). */
.toast {
  position: fixed;
  z-index: 50;
  top: calc(var(--sat) + 8px);
  left: calc(var(--sal) + 12px);
  right: calc(var(--sar) + 12px);
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 16px;
  background: #e9edf2;
  color: #0b0d10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 17px;
  font-weight: 650;
  animation: drop 0.18s ease-out;
}

.toast-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0;
}

.toast-action {
  flex: none;
  min-height: 44px;
  min-width: 72px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: #0b0d10;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- full-screen views (a recording, the list) ---------- */

.fullsheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg);
  animation: slideup 0.2s ease-out;
}

.fullsheet-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--sat) + 10px) calc(var(--sar) + 16px) 10px calc(var(--sal) + 8px);
  border-bottom: 1px solid var(--line);
}

.back-btn {
  flex: none;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--accent-text);
  font-size: 18px;
  font-weight: 750;
}

.sheet-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
}

/* The AI title can be long: two lines, then an ellipsis. */
.detail-title {
  min-width: 0;
  font-size: 20px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.fullsheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px calc(var(--sar) + 16px) calc(var(--sab) + 24px) calc(var(--sal) + 16px);
}

.detail-meta {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 650;
  color: var(--muted);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.notice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(242, 184, 75, 0.5);
  background: rgba(242, 184, 75, 0.1);
  color: var(--warn);
  font-size: 17px;
  font-weight: 700;
}

.detail-summary {
  margin-bottom: 14px;
}

.summary {
  padding: 14px 16px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.summary-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.summary-h {
  margin: 14px 0 6px;
  font-size: 18px;
  font-weight: 800;
}

.summary-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.summary-list {
  margin: 0;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.summary-list li + li {
  margin-top: 6px;
}

.action-item {
  display: list-item;
}

.action-task {
  display: block;
  font-weight: 650;
}

.action-meta {
  display: block;
  font-size: 15px;
  color: var(--muted);
}

.summary-note {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--muted);
}

.summary-note-box {
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.summary-note-text {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
}

.summary-note-box[data-tone="warn"] .summary-note-text {
  color: var(--warn);
}

.summary-note-box[data-tone="error"] .summary-note-text {
  color: var(--danger);
}

.summary-note-text[data-busy]::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 10px;
  vertical-align: -3px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.summary-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.player {
  display: block;
  width: 100%;
  margin: 0 0 14px;
}

.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.act-btn {
  min-height: 56px;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.15;
}

.act-primary {
  grid-column: 1 / -1;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 19px;
}

.act-danger {
  color: var(--danger);
}

/* Email held long enough to change the address: it lights up; letting go opens the sheet. */
.act-btn.is-held {
  border-color: var(--accent-text);
  background: var(--accent);
  color: #fff;
}

.section-h {
  margin: 4px 0 10px;
  font-size: 19px;
  font-weight: 800;
}

.detail-transcript {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-transcript .seg-en {
  font-size: 19px;
  font-weight: 650;
}

.detail-transcript .seg-orig {
  font-size: 15px;
}

.more-btn {
  margin-top: 12px;
}

.list-empty {
  margin: 24px 0;
  font-size: 19px;
  color: var(--muted);
  text-align: center;
}

.rec-rows {
  display: flex;
  flex-direction: column;
}

.rec-row {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
}

.rec-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rec-row-title {
  font-size: 19px;
  font-weight: 750;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.rec-row-meta {
  font-size: 15px;
  color: var(--muted);
}

.rec-row-side {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Summary state: a dot (its words are the aria-label). */
.sum-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--line);
}

.sum-dot[data-state="ok"] {
  background: var(--ok);
}

.sum-dot[data-state="pending"],
.sum-dot[data-state="limit"],
.sum-dot[data-state="locked"],
.sum-dot[data-state="relogin_required"],
.sum-dot[data-state="unavailable"] {
  background: var(--warn);
}

.sum-dot[data-state="error"] {
  background: var(--danger);
}

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

/* ---------- bottom sheets (email address, code, delete) ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
}

.sheet {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px calc(var(--sar) + 16px) calc(var(--sab) + 10px) calc(var(--sal) + 16px);
  border-radius: 22px 22px 0 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  animation: slideup 0.2s ease-out;
}

/* A short sheet (its height is its content), lifted above the iOS keyboard by app.js;
   capped to the room left, so sideways it scrolls inside instead of running off the top. */
.sheet-compact {
  height: auto;
  max-height: min(88vh, 560px);
  max-height: min(88dvh, 560px);
  max-height: min(88dvh, 560px, 100%);
  overflow-y: auto;
  gap: 12px;
  padding-top: 18px;
}

.field {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 18px; /* ≥16px so iOS does not zoom */
  -webkit-appearance: none;
  appearance: none;
}

.field:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.code-input {
  font-size: 24px;
  letter-spacing: 0.12em;
}

.sheet-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
}

.form-error {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--danger);
}

.form-error:empty {
  display: none;
}

.sheet-actions {
  display: flex;
  gap: 10px;
}

.sheet-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 14px;
  text-wrap: balance;
}

/* ---------- tap to continue recording ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(var(--sat) + 24px) calc(var(--sar) + 20px) calc(var(--sab) + 24px) calc(var(--sal) + 20px);
  background: rgba(11, 13, 16, 0.96);
  text-align: center;
}

.overlay-text {
  margin: 0;
  max-width: 22em;
  font-size: 19px;
  color: var(--muted);
}

.big-resume {
  --big: clamp(170px, 55vw, 240px);
  background: var(--live);
}

/* "Stop and save": plainly second to "Tap to continue recording"; its first tap turns it
   into "Tap again to stop and save", like the big Stop button. */
.resume-stop {
  min-width: min(220px, 100%);
}

.resume-stop[data-state="confirm"] {
  background: var(--live);
  border-color: #fff;
  color: #fff;
}

/* ---------- small / short / sideways screens ---------- */

@media (max-height: 640px) {
  :root {
    --big: clamp(136px, 43vw, 180px);
  }
  .empty-title {
    font-size: 21px;
  }
  .empty-text {
    font-size: 16px;
  }
}

/* Phones: the title and "Recordings (3)" share one row. */
@media (max-width: 400px) {
  .topbar {
    padding-left: calc(var(--sal) + 12px);
    padding-right: calc(var(--sar) + 12px);
  }
  .app-title {
    font-size: 19px;
  }
  .top-btn {
    gap: 6px;
    padding: 0 10px;
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .app-title {
    font-size: 17px;
  }
  .top-btn svg {
    display: none;
  }
  .seg-en {
    font-size: 21px;
  }
}

@media (max-width: 340px) {
  /* 320 px phones: the circle is ~137 px; keep icon + label + timer inside it */
  .big-ico {
    width: 32px;
    height: 32px;
  }
  .big-label {
    font-size: 16px;
  }
  .detail-actions {
    grid-template-columns: 1fr;
  }
}

/* Upright but short (Safari's page zoom: e.g. 260 x 443 at 150 %): the column layout stays,
   with the sideways circle size, so the banner, the status lines, Pause and Stop still fit. */
@media (max-height: 480px) and (orientation: portrait) {
  :root {
    --big: 112px;
  }
  .big-ico {
    width: 30px;
    height: 30px;
  }
  .big-label {
    font-size: 15px;
  }
  .big-timer {
    font-size: 15px;
  }
}

/* Phone sideways. Only in landscape: an upright phone with Safari's page zoom (aA) can have
   a viewport this short too (e.g. 260 x 443 at 150 %), and there the side columns would
   push the big Stop button off the right edge. The side columns can shrink to nothing
   (the hint wraps), so the big button's column always fits. */
@media (max-height: 480px) and (orientation: landscape) {
  /* keep the transcript readable; Pause sits left of the big button */
  :root {
    --big: 112px;
  }
  .controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      "hint status status"
      "actions big side";
    align-items: center;
    justify-items: center;
    column-gap: 16px;
    row-gap: 4px;
  }
  .keep-open {
    grid-area: hint;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }
  .status {
    grid-area: status;
  }
  .rec-actions {
    grid-area: actions;
    justify-self: end;
  }
  .big {
    grid-area: big;
  }
  .big-ico {
    width: 30px;
    height: 30px;
  }
  .big-label {
    font-size: 15px;
  }
  .big-timer {
    font-size: 15px;
  }
  .empty-text {
    display: none;
  }
  .seg-en {
    font-size: 21px;
  }
  /* "Tap to continue recording" + its text + "Stop and save" in 320-414 px of height */
  .overlay {
    gap: 12px;
    padding-top: calc(var(--sat) + 12px);
    padding-bottom: calc(var(--sab) + 12px);
  }
  .big-resume {
    --big: clamp(96px, 34vh, 150px);
  }
  .overlay-text {
    font-size: 17px;
  }
}

@media (hover: hover) {
  .btn:hover,
  .top-btn:hover,
  .act-btn:hover,
  .ctl-btn:hover,
  .rec-row:hover {
    filter: brightness(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .big[data-state="live"] .big-ring {
    opacity: 1;
    transform: scale(1.06);
  }
  .summary-note-text[data-busy]::after {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.5;
  }
}