:root {
  color-scheme: light dark;
  /* Playpen Sans draws Latin and Cyrillic; it has no Hebrew, so Hebrew falls
     through to Rubik. */
  font-family: "Playpen Sans", "Rubik", system-ui, sans-serif;
}

body {
  max-width: 1120px;
  margin: 48px auto;
  padding: 0 32px;
}

.layout {
  display: grid;
  gap: 8px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 1.85rem;
  letter-spacing: -0.03em;
}

.page-title-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #2563eb18;
  color: #2563eb;
}

.page-title-icon svg {
  width: 24px;
  height: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.picker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.picker select {
  font: inherit;
  min-width: 120px;
  padding: 7px 10px;
  border: 1px solid #8886;
  border-radius: 9px;
  background: Canvas;
  color: CanvasText;
}

.picker button {
  padding: 7px 11px;
  border: 1px solid #8886;
  border-radius: 9px;
  background: Canvas;
  color: CanvasText;
  cursor: pointer;
}

.actions {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.practice {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
}

.practice .page-title {
  justify-content: center;
  text-align: center;
}

.talk-stage {
  display: grid;
  justify-items: center;
  gap: 20px;
  margin: 20px 0 0;
  text-align: center;
}

.talk-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 10px 24px #2563eb40;
}

.talk-button:focus {
  outline: none;
}

.talk-button:focus-visible {
  outline: 2px solid CanvasText;
  outline-offset: 6px;
}

.talk-button:hover:not(:disabled) {
  filter: brightness(1.06);
}

.talk-button svg {
  width: 34px;
  height: 34px;
}

.talk-icon.live {
  display: none;
}

.talk-pulse {
  display: none;
  position: absolute;
  inset: -8px;
  z-index: 0;
  border: 2px solid #e11d48;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.talk-icon {
  position: relative;
  z-index: 1;
  display: grid;
}

.talk-wave {
  width: min(100%, 280px);
  height: 72px;
  margin-top: 4px;
  color: #60a5fa;
}

.talk-wave path {
  fill: currentColor;
  fill-opacity: 0.2;
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  transition: opacity 0.2s ease, fill-opacity 0.2s ease;
}

.talk-stage[data-state="connecting"] .talk-wave,
.talk-stage[data-state="ending"] .talk-wave {
  animation: wave-wait 1.2s ease-in-out infinite;
}

.talk-stage[data-state="live"] .talk-wave path {
  opacity: 0.92;
  fill-opacity: 0.26;
}

.talk-stage[data-speaking="true"] .talk-wave {
  color: #93c5fd;
}

.talk-stage[data-speaking="true"] .talk-wave path {
  opacity: 1;
  fill-opacity: 0.34;
}

.talk-timer {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  opacity: 0.82;
}

.talk-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  min-height: 1.5em;
  opacity: 0.78;
}

.talk-live-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e11d48;
}

.talk-stage[data-state="connecting"] .talk-button,
.talk-stage[data-state="ending"] .talk-button {
  opacity: 0.7;
}

.talk-stage[data-state="live"] .talk-button {
  background: #e11d48;
  box-shadow: 0 10px 24px #e11d4840;
}

.talk-stage[data-state="live"] .talk-icon.idle {
  display: none;
}

.talk-stage[data-state="live"] .talk-icon.live {
  display: grid;
}

.talk-stage[data-state="live"] .talk-pulse {
  display: block;
  animation: talk-pulse 1.6s ease-out infinite;
}

.talk-stage[data-state="live"] .talk-live-dot {
  display: block;
  animation: talk-dot 1.2s ease-in-out infinite;
}

@keyframes talk-pulse {
  from {
    transform: scale(0.92);
    opacity: 0.5;
  }

  to {
    transform: scale(1.12);
    opacity: 0;
  }
}

@keyframes talk-dot {
  50% {
    opacity: 0.35;
  }
}

@keyframes wave-wait {
  50% {
    opacity: 0.55;
    transform: scaleX(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .talk-stage[data-state="live"] .talk-pulse,
  .talk-stage[data-state="live"] .talk-live-dot,
  .talk-stage[data-state="connecting"] .talk-wave,
  .talk-stage[data-state="ending"] .talk-wave {
    animation: none;
  }
}

.talk-audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

button {
  font: inherit;
  padding: 10px 18px;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

#status {
  min-height: 1.5em;
}

#analysis-status.loading::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}

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

audio {
  width: 100%;
  margin-top: 16px;
}

#issues {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.conversation {
  margin: 0;
  border: 1px solid #8884;
  border-radius: 14px;
  background: #8881;
  padding: 4px 14px 12px;
}

.conversation summary {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-weight: 750;
  list-style: none;
}

.conversation summary::marker,
.conversation summary::-webkit-details-marker {
  display: none;
  content: "";
}

.conversation summary::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  background: center / 28px 28px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='1' y='1' width='26' height='26' rx='8' fill='%23fffaf4' stroke='%23423c36' stroke-width='1.3'/%3E%3Cpath d='m11 8 6 6-6 6' fill='none' stroke='%23423c36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: none;
  transition: transform 0.18s ease;
}

.conversation[open] summary::before {
  transform: rotate(90deg);
}

html[dir="rtl"] .conversation:not([open]) summary::before {
  transform: rotate(180deg);
}

.conversation-meta {
  font-weight: 500;
  font-size: 0.82rem;
  opacity: 0.72;
}

.conversation-issues {
  display: grid;
  gap: 16px;
  padding: 4px 0 8px;
  list-style: none;
  margin: 0;
}

.issue-card {
  border: 1px solid #8884;
  border-radius: 14px;
  padding: 16px;
  background: Canvas;
}

.conversation-note {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #2563eb40;
  border-radius: 12px;
  background: #3b82f60d;
  line-height: 1.5;
}

.summary-panel {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid #2563eb40;
  border-radius: 14px;
  background: #3b82f60d;
}

.summary-panel h2 {
  margin: 0 0 14px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.summary-stat {
  padding: 12px;
  border: 1px solid #2563eb30;
  border-radius: 10px;
  background: Canvas;
}

.summary-stat span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.82rem;
  opacity: 0.72;
}

.summary-stat strong {
  display: block;
  font-size: 1.45rem;
}

.summary-focus {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 0;
  padding: 11px 12px;
  border-radius: 10px;
  background: #2563eb12;
}

.summary-focus span {
  font-size: 0.85rem;
  opacity: 0.72;
}

.summary-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.summary-chip {
  padding: 5px 9px;
  border: 1px solid #8884;
  border-radius: 999px;
  background: Canvas;
  font-size: 0.82rem;
}

.patterns-panel {
  margin: 22px 0 28px;
  padding: 14px 18px;
  border: 1px solid #7c3aed40;
  border-radius: 14px;
  background: #8b5cf610;
}

.patterns-panel summary {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 750;
  font-size: 1.05rem;
  list-style: none;
}

.patterns-panel summary::marker,
.patterns-panel summary::-webkit-details-marker {
  display: none;
  content: "";
}

.patterns-panel summary::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  vertical-align: middle;
  background: center / 28px 28px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect x='1' y='1' width='26' height='26' rx='8' fill='%23fffaf4' stroke='%23423c36' stroke-width='1.3'/%3E%3Cpath d='m11 8 6 6-6 6' fill='none' stroke='%23423c36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: none;
  transition: transform 0.18s ease;
}

.patterns-panel[open] summary::before {
  transform: rotate(90deg);
}

html[dir="rtl"] .patterns-panel:not([open]) summary::before {
  transform: rotate(180deg);
}

.patterns-intro {
  margin: 10px 0 14px;
  opacity: 0.72;
  font-size: 0.9rem;
}

#patterns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pattern-card {
  padding: 12px;
  border: 1px solid #8b5cf645;
  border-radius: 10px;
  background: Canvas;
}

.pattern-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 750;
}

.pattern-count {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: #8b5cf620;
  color: #6d28d9;
  font-size: 0.78rem;
}

.pattern-description {
  margin: 7px 0;
  font-size: 0.9rem;
  opacity: 0.78;
}

.pattern-example {
  direction: ltr;
  text-align: left;
  font-size: 0.84rem;
  color: #166534;
}

.issue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.category {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: #6b728020;
}

.severity {
  font-size: 0.82rem;
  opacity: 0.75;
}

.comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.sentence-box {
  border: 1px solid;
  border-radius: 10px;
  padding: 12px;
}

.sentence-box.wrong {
  background: #fff1f2;
  border-color: #fda4af;
  color: #4c0519;
}

.sentence-box.right {
  background: #f0fdf4;
  border-color: #86efac;
  color: #052e16;
}

.box-label {
  display: block;
  direction: rtl;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 750;
  margin-bottom: 8px;
  opacity: 0.78;
}

.sentence {
  direction: ltr;
  text-align: left;
  line-height: 1.65;
  font-size: 1.02rem;
}

.change {
  border-radius: 4px;
  padding: 1px 3px;
  font-weight: 750;
}

.wrong .change {
  background: #fecdd3;
  color: #9f1239;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #e11d48;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.right .change {
  background: #bbf7d0;
  color: #166534;
}

.arrow {
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  opacity: 0.55;
}

.explanation {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: #3b82f610;
  line-height: 1.5;
}

.explanation strong {
  margin-left: 5px;
}

@media (prefers-color-scheme: dark) {
  .conversation-note {
    background: #1e3a8a40;
    border-color: #3b82f6;
    color: #dbeafe;
  }

  .sentence-box.wrong {
    background: #4c051955;
    color: #ffe4e6;
    border-color: #be123c;
  }

  .sentence-box.right {
    background: #052e1655;
    color: #dcfce7;
    border-color: #15803d;
  }

  .wrong .change {
    background: #9f1239;
    color: #fff1f2;
  }

  .right .change {
    background: #166534;
    color: #f0fdf4;
  }
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: 36px;
    align-items: center;
  }

  .saved-issues {
    grid-column: 1 / -1;
  }

  .insights .summary-panel {
    margin-top: 0;
  }

  .insights .summary-grid {
    grid-template-columns: 1fr;
  }

  .insights .patterns-panel {
    margin-bottom: 8px;
  }

  .insights #patterns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body {
    max-width: 720px;
    margin: 64px auto;
    padding: 0 20px;
  }
}

@media (max-width: 620px) {
  body {
    margin-top: 24px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  #patterns {
    grid-template-columns: 1fr;
  }

  .comparison {
    grid-template-columns: 1fr;
  }

  .arrow {
    transform: rotate(90deg);
    min-height: 20px;
  }
}

/* Flat learning-studio visual system */
:root {
  color-scheme: light;
  --page-bg: #fdfaf4;
  --surface: #fffefa;
  --surface-soft: #fbf9f5;
  --surface-raised: #fffefa;
  --text: #302c28;
  --muted: #70675e;
  --border: #bcb1a4;
  --line: #423c36;
  --brand: #5f806c;
  --brand-strong: #4b6a57;
  --brand-soft: #fbf9f5;
  --title-wash: #eef5f7;
  --accent: #5f806c;
  /* Something waits for you: the orange dot of the app icon. */
  --signal: #d66b48;
  --sage: #fbf9f5;
  --sky: #fbf9f5;
  --butter: #fbf9f5;
  --shadow-sm: none;
  --shadow-lg: none;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--page-bg);
  /* A phone's browser flashes blue over anything tapped; the buttons show a press themselves. */
  -webkit-tap-highlight-color: transparent;
}

body {
  position: relative;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 26px 32px 24px;
  color: var(--text);
  background: var(--page-bg);
}

.topbar {
  align-items: center;
  margin-bottom: 28px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 15px 12px 16px 11px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.picker {
  color: var(--muted);
  font-weight: 650;
}

.picker select,
.picker button {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.picker select:hover,
.picker button:hover {
  border-color: var(--brand);
}

.picker select:focus-visible,
.picker button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

.layout {
  gap: 24px;
}

.practice {
  min-height: 430px;
  align-content: center;
  padding: 42px 28px 34px;
  border: 1.5px solid var(--line);
  border-radius: 23px 17px 21px 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.practice-kicker {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-kicker {
  margin: 0 0 6px;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.practice .page-title {
  margin-bottom: 0;
  font-size: clamp(1.9rem, 4vw, 2.65rem);
}

.page-title-icon {
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 15px 11px 14px 10px;
  background: var(--butter);
  color: var(--brand-strong);
  box-shadow: none;
}

.talk-stage {
  gap: 14px;
  margin-top: 30px;
}

.talk-button {
  width: 112px;
  height: 112px;
  border: 1.5px solid var(--line);
  background: var(--brand);
  box-shadow: 3px 4px 0 rgb(66 60 54 / 18%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.talk-button:hover:not(:disabled) {
  filter: none;
  background: var(--brand-strong);
  transform: translate(-1px, -2px);
  box-shadow: 4px 6px 0 rgb(66 60 54 / 18%);
}

.talk-button:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 2px 0 rgb(66 60 54 / 16%);
}

.talk-stage[data-state="live"] .talk-button {
  background: var(--live-button, #97ad9f);
  box-shadow: none;
}

.talk-stage[data-state="live"] .talk-pulse {
  border-color: var(--live-accent, #4b6a57);
}

.talk-live-dot {
  background: var(--live-accent, #4b6a57);
}

.talk-wave {
  height: 58px;
  color: var(--brand-strong);
}

.talk-status {
  min-height: 1.5em;
  color: var(--text);
  font-weight: 700;
}

.talk-hint {
  max-width: 360px;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.summary-panel,
.patterns-panel {
  border: 1.5px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.summary-panel {
  margin: 0;
  padding: 24px;
  border-radius: 19px 14px 20px 15px;
}

.summary-panel h2 {
  margin-bottom: 18px;
  font-size: 1.45rem;
}

.summary-stat {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px 10px 12px 9px;
  background: var(--title-wash);
}

.summary-stat:nth-child(2) {
  background: var(--title-wash);
}

.summary-stat span,
.summary-focus span {
  color: var(--muted);
  opacity: 1;
}

.summary-stat strong {
  color: var(--text);
  font-size: 1.7rem;
}

.summary-focus {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px 13px 10px 12px;
  background: var(--title-wash);
}

.summary-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 650;
}

.patterns-panel {
  margin: 16px 0 0;
  padding: 16px 20px;
  border-radius: 15px 11px 16px 12px;
  background: var(--title-wash);
}

.pattern-card {
  border-color: var(--line);
  border-radius: 11px 9px 12px 8px;
  background: var(--surface);
}

.pattern-count {
  border: 1px solid var(--border);
  background: var(--butter);
  color: var(--text);
}

.patterns-panel summary,
.conversation summary {
  border-radius: 10px;
}

.patterns-panel summary:hover,
.conversation summary:hover {
  color: inherit;
}

.saved-issues {
  margin-top: 22px;
  padding-top: 34px;
  border-top: 1.5px solid var(--line);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.section-heading #analysis-status {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

#issues {
  gap: 14px;
}

.conversation {
  overflow: hidden;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 15px 11px 16px 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.conversation:hover {
  background: #fdfbf7;
  box-shadow: 3px 5px 0 rgb(66 60 54 / 14%);
  transform: translateY(-1px) rotate(-0.08deg);
}

.conversation>summary {
  padding: 17px 18px;
  background: var(--title-wash);
}

.conversation[open]>summary {
  border-bottom: 1px solid var(--line);
  background: var(--title-wash);
}

.conversation-meta {
  color: var(--muted);
  opacity: 1;
}

.conversation-issues {
  gap: 12px;
  padding: 16px;
}

.issue-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px 10px 12px 9px;
  background: var(--surface-raised);
}

.category {
  border: 1px solid var(--border);
  background: var(--brand-soft);
  color: var(--text);
}

.severity {
  color: var(--muted);
  opacity: 1;
}

/* Importance: three rising bars, filled and colored by how much it matters. */
.severity {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 15px;
  /* Bars always rise left to right, like a signal meter, in any language. */
  direction: ltr;
  cursor: help;
}

.severity i {
  width: 4.5px;
  border-radius: 1.5px;
  background: var(--border);
  opacity: 0.55;
}

.severity i:nth-child(1) {
  height: 6px;
}

.severity i:nth-child(2) {
  height: 10px;
}

.severity i:nth-child(3) {
  height: 15px;
}

.severity i.filled {
  background: var(--muted);
  opacity: 1;
}

.severity[data-level="2"] i.filled {
  background: #d9a441;
}

.severity[data-level="3"] i.filled {
  background: #c95f56;
}

.sentence-box {
  border-radius: 12px;
}

.sentence-box.wrong {
  border-color: #c95f56;
  background: #f9e5df;
  color: #512720;
}

.sentence-box.right {
  position: relative;
  border-color: #548364;
  background: #e1eee2;
  color: #203d2a;
}

/* Speaker button: reads the corrected sentence aloud. It sits in the corner
   above the start of the English sentence, across from the label. */
.speak-button {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.speak-button svg {
  width: 17px;
  height: 17px;
}

.speak-button:hover {
  background: #54836433;
  opacity: 1;
}

.speak-button.loading,
.speak-button.speaking {
  background: #54836433;
  opacity: 1;
}

/* Waiting for the audio: the icon breathes. Playing: the two sound waves of
   the icon go out one after the other. */
.speak-button.loading svg {
  animation: speak-loading 0.7s ease-in-out infinite alternate;
}

.speak-button.speaking svg path:nth-child(n + 2) {
  animation: speak-wave 1s ease-in-out infinite;
}

.speak-button.speaking svg path:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes speak-loading {
  to {
    opacity: 0.3;
  }
}

@keyframes speak-wave {
  0%,
  100% {
    opacity: 0.15;
  }
  45%,
  70% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .speak-button.loading svg,
  .speak-button.speaking svg path:nth-child(n + 2) {
    animation: none;
  }

  .speak-button.speaking {
    background: #548364;
    color: #fff;
  }
}

.speak-button:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

/* No reading aloud during a talk: the mic would pick it up. */
.talk-stage:not([data-state="idle"]) .speak-button {
  opacity: 0.3;
  pointer-events: none;
}

.wrong .change {
  background: #edb6ad;
  color: #7a2f27;
  text-decoration-color: #b84d43;
}

.right .change {
  background: #aed0b5;
  color: #244d31;
}

.explanation {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--sky);
}

.conversation-note {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text);
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    column-gap: 28px;
    align-items: stretch;
  }

  .insights {
    align-self: stretch;
  }

  .insights .summary-panel {
    height: auto;
  }
}

@media (max-width: 760px) {
  body {
    margin: 0 auto;
    padding: 18px 18px 56px;
  }

  .topbar {
    align-items: stretch;
    margin-bottom: 18px;
  }

  .settings-panel {
    max-width: calc(100vw - 48px);
  }

  .picker select {
    flex: 1;
  }

  .practice {
    min-height: 390px;
    padding: 34px 20px 28px;
    border-radius: 22px;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 620px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-stat {
    padding: 12px 8px;
    text-align: center;
  }

  .summary-stat span {
    min-height: 2.4em;
  }

  .summary-focus {
    align-items: start;
    flex-direction: column;
  }

  .conversation>summary {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Rough.js replaces these fallback borders with stable hand-drawn SVG paths. */
.topbar,
.practice,
.summary-panel,
.patterns-panel,
.conversation,
.pattern-card,
.issue-card,
.page-title-icon,
.gate,
.welcome {
  position: relative;
  border-color: var(--line);
  isolation: isolate;
}

.topbar.rough-border-ready,
.practice.rough-border-ready,
.summary-panel.rough-border-ready,
.patterns-panel.rough-border-ready,
.conversation.rough-border-ready,
.pattern-card.rough-border-ready,
.issue-card.rough-border-ready,
.page-title-icon.rough-border-ready,
.gate.rough-border-ready,
.welcome.rough-border-ready {
  border-color: transparent;
}

.rough-border-svg {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Disclosure motion: an unhurried damped spring (one soft ~4% overshoot that
   settles without a snap back). No scaling, so text stays crisp. */
:root {
  interpolate-size: allow-keywords;
  --ease-spring: linear(0, 0.031, 0.107, 0.211, 0.328, 0.446, 0.559, 0.662, 0.751, 0.827,
      0.889, 0.937, 0.974, 1.001, 1.019, 1.03, 1.036, 1.038, 1.038, 1.035, 1.031, 1.027,
      1.022, 1.018, 1.014, 1.01, 1.007, 1.005, 1.003, 1.001, 1, 0.999, 0.999, 0.999,
      0.999, 0.999, 1);
}

.details-motion {
  block-size: 0;
  opacity: 0;
  overflow: clip;
  transform: translateY(-8px);
  transition:
    block-size 650ms var(--ease-spring),
    opacity 260ms ease-out,
    transform 650ms var(--ease-spring);
  will-change: block-size, opacity, transform;
}

details[open].details-expanded > .details-motion {
  block-size: auto;
  opacity: 1;
  transform: none;
}

.details-motion-inner {
  min-block-size: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .details-motion {
    transition-duration: 0.01ms;
    transform: none;
  }
}

/* Calm summary: the practice focus leads, the numbers stay quiet. */
.summary-focus {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  background: var(--title-wash);
}

.summary-focus strong {
  font-size: 1.35rem;
}

.summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 14px;
}

.summary-stat,
.summary-stat:nth-child(2) {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
}

.summary-stat span {
  min-height: 0;
  margin: 0;
  font-size: 0.85rem;
}

.summary-stat strong {
  font-size: 1rem;
}

.summary-breakdown {
  gap: 4px 12px;
  margin-top: 6px;
}

.summary-chip {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
}

/* Category breakdown: one bar split by type, with a small legend. */
.summary-breakdown {
  --cat-grammar: #6f9bb5;
  --cat-natural_wording: #5f806c;
  --cat-vocabulary: #d9a441;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.summary-bar {
  display: flex;
  gap: 3px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}

.summary-bar[hidden] {
  display: none;
}

.summary-bar span {
  min-width: 6px;
}

.summary-bar [data-category="grammar"],
.summary-legend [data-category="grammar"]::before {
  background: var(--cat-grammar);
}

.summary-bar [data-category="natural_wording"],
.summary-legend [data-category="natural_wording"]::before {
  background: var(--cat-natural_wording);
}

.summary-bar [data-category="vocabulary"],
.summary-legend [data-category="vocabulary"]::before {
  background: var(--cat-vocabulary);
}

.summary-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.summary-legend .summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.summary-legend .summary-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Talk and feedback live on separate tabs. */
.view-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-raised);
}

.view-tab {
  padding: 6px 16px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.view-tab[aria-selected="true"] {
  background: var(--title-wash);
  color: var(--text);
}

.topbar {
  z-index: 10;
}

.settings-menu {
  position: relative;
}

.settings-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.settings-menu summary::-webkit-details-marker {
  display: none;
}

.settings-menu summary:hover,
.settings-menu[open] summary {
  border-color: var(--brand);
}

.settings-menu summary svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

/* The bar stays on one row, also on a phone: a long account name is cut
   short instead of pushing the settings under the tabs. */
.topbar {
  flex-wrap: nowrap;
}

.view-tabs {
  flex: none;
}

.settings-menu,
.settings-menu summary {
  min-width: 0;
}

#settings-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.settings-panel .picker {
  justify-content: space-between;
  white-space: nowrap;
}

/* The account in the settings menu: which Google account it is, and the way
   out. Only there when the site has sign-in. */
.settings-panel .account {
  gap: 14px;
}

.picker[hidden] {
  display: none;
}

/* Installing the site as an app: a button, or on an iPhone the steps under
   the label. */
.settings-panel .install {
  display: grid;
  gap: 6px;
}

.settings-panel .install[hidden] {
  display: none;
}

/* The steps wrap to the width of the other rows instead of widening the
   panel, which would run off a phone's screen. */
.install-steps {
  width: 0;
  min-width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

#account-name {
  overflow: hidden;
  max-width: 220px;
  text-overflow: ellipsis;
}

/* On a phone the panel spans the bar, with the page's own margins on both
   sides, and each label sits above its list, which takes the full width: a
   long option (a tester's address) can no longer push the lists past the
   panel's edge. */
@media (max-width: 620px) {
  .topbar {
    position: relative;
  }

  .settings-menu {
    position: static;
  }

  .settings-panel {
    inset-inline: 0;
    width: auto;
    max-width: none;
  }

  .settings-panel label.picker {
    display: grid;
    justify-content: stretch;
    gap: 4px;
  }

  .settings-panel .picker select {
    width: 100%;
    min-width: 0;
  }

  .settings-panel .picker {
    min-width: 0;
  }

  #account-name {
    min-width: 0;
    max-width: none;
  }
}

/* For the admin: an orange dot on the gear while someone waits for approval,
   the same orange as the dot of the app icon. */
.settings-menu summary {
  position: relative;
}

.waiting-dot {
  position: absolute;
  top: 4px;
  inset-inline-start: 26px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
}

.waiting-dot[hidden] {
  display: none;
}

/* The accounts that wait, each on its row: the name with the address under
   it, and the approve button. A long name or address is cut short instead of
   widening the panel past a phone's screen. */
.waiting-accounts {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.waiting-accounts[hidden] {
  display: none;
}

.waiting-title {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.waiting-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings-panel .waiting-account {
  gap: 14px;
}

.waiting-who {
  display: grid;
  min-width: 0;
  max-width: 220px;
  color: var(--text);
}

.waiting-who > * {
  overflow: hidden;
  text-overflow: ellipsis;
}

.waiting-who small {
  color: var(--muted);
  font-weight: 400;
  text-align: start;
}

.settings-panel .waiting-account button {
  flex: none;
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.settings-panel .waiting-account button:hover {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
}

.settings-panel .waiting-account button:disabled {
  opacity: 0.6;
  cursor: default;
}

.waiting-failed {
  color: var(--signal);
  font-size: 0.85rem;
}

/* The gate: shown instead of the app while the account loads, before sign-in,
   and while the account waits for approval. */
body[data-gate] .layout,
body[data-gate] .view-tabs {
  display: none;
}

/* With the tabs gone, the settings menu keeps its end of the bar. */
body[data-gate] .topbar {
  justify-content: flex-end;
}

.gate {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 540px;
  margin: 9vh auto 0;
  padding: 46px 34px 38px;
  border: 1.5px solid var(--line);
  border-radius: 23px 17px 21px 15px;
  background: var(--surface);
  text-align: center;
}

.gate[hidden],
.gate [hidden] {
  display: none;
}

.gate-title {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

/* Before sign-in: a small line and three steps, each with its icon. */
.gate-intro {
  display: grid;
  justify-items: center;
  gap: 14px;
}

/* While waiting, the steps sit between the status line and the account. */
body[data-gate="waiting"] .gate-intro {
  margin-block: 10px 12px;
}

.gate-lead {
  margin: 0;
  color: var(--brand-strong);
  font-size: 1.15rem;
  font-weight: 650;
}

.gate-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.gate-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.02rem;
  line-height: 1.45;
}

.gate-step-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 13px 10px 12px 9px;
  background: var(--title-wash);
  color: var(--brand-strong);
}

.gate-step-icon svg {
  width: 19px;
  height: 19px;
}

.gate-text {
  max-width: 34ch;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
}

.gate-text:empty {
  display: none;
}

.gate-sign-in {
  margin-top: 8px;
  padding: 12px 28px;
  border: 1.5px solid var(--line);
  border-radius: 15px 12px 16px 11px;
  background: var(--brand);
  color: var(--surface);
  font-size: 1.05rem;
  font-weight: 700;
  transition: background-color 0.18s ease;
}

.gate-sign-in:hover {
  background: var(--brand-strong);
}

/* Google draws its own button in a frame; this keeps its place while it
   loads, so the note under it does not jump. */
.gate-google {
  display: grid;
  place-items: center;
  min-height: 44px;
  margin-top: 8px;
}

.gate-note,
.gate-account {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.gate-sign-out {
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
}

.gate-sign-out:hover {
  border-color: var(--brand);
}

.gate-sign-in:focus-visible,
.gate-sign-out:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .gate {
    margin-top: 4vh;
    padding: 34px 20px 28px;
  }
}

/* The "let's meet" card: once after the first sign-in, instead of the app.
   Small and quiet: one question at a time, dots for the steps, pill buttons;
   the picked one is filled in the brand color. */
.welcome {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 400px;
  margin: 10vh auto 40px;
  padding: 22px 22px 14px;
  border: 1.5px solid var(--line);
  border-radius: 19px 14px 20px 15px;
  background: var(--surface);
  text-align: center;
}

.welcome[hidden],
.welcome [hidden] {
  display: none;
}

.welcome-dots {
  display: flex;
  gap: 2px;
}

/* A dot with room around it to tap; only the steps already seen lead back. */
.welcome-dot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.welcome-dot::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  content: "";
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.welcome-dot[aria-current="step"]::before {
  background: var(--brand);
  transform: scale(1.25);
}

.welcome-dot:disabled {
  cursor: default;
}

.welcome-step {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .welcome-step {
    animation: welcome-step-in 0.28s ease-out;
  }
}

@keyframes welcome-step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.welcome-question {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.welcome-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.welcome-list {
  display: grid;
  gap: 6px;
  width: 100%;
}

.welcome-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 15px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

/* A level: a row with its emoji, and its name over a small line. */
.welcome-list .welcome-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 0;
  padding: 7px 14px;
  border-radius: 13px 10px 14px 11px;
  text-align: start;
}

.welcome-list .welcome-emoji {
  grid-row: span 2;
}

.welcome-choice:hover {
  border-color: var(--brand);
}

.welcome-choice[aria-checked="true"] {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
}

.welcome-choice:focus-visible,
.welcome-dot:focus-visible,
.welcome-start:focus-visible,
.welcome-skip:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.welcome-emoji {
  font-size: 1.05rem;
  line-height: 1;
}

.welcome-name {
  font-weight: 700;
}

.welcome-line {
  color: var(--muted);
  font-size: 0.85rem;
}

.welcome-start {
  padding: 8px 24px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--brand);
  color: var(--surface);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.welcome-start:hover {
  background: var(--brand-strong);
}

.welcome-skip {
  padding: 4px 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 620px) {
  .welcome {
    margin-top: 6vh;
    padding: 20px 16px 12px;
  }
}

/* The admin looking at another account: its feedback only, read only. A line
   on top says whose data this is and leads back; everything that would act
   for the other account is gone. */
.viewing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px dashed var(--line);
  border-radius: 14px 11px 15px 10px;
  background: var(--title-wash);
  font-weight: 650;
}

.viewing-banner[hidden] {
  display: none;
}

.viewing-banner button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
}

.viewing-banner button:hover {
  border-color: var(--brand);
}

.viewing-banner button:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

body[data-viewing] .view-tab[data-view="talk"],
body[data-viewing] .delete-button,
body[data-viewing] .practice-try,
body[data-viewing] .explain-more:not([data-ready]) {
  display: none;
}

.view-tab:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

.layout {
  view-transition-name: page-view;
}

::view-transition-group(page-view) {
  animation: none;
}

::view-transition-old(page-view),
::view-transition-new(page-view) {
  mix-blend-mode: normal;
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  animation-fill-mode: both;
}

::view-transition-old(page-view) {
  animation-name: view-out;
}

::view-transition-new(page-view) {
  animation-name: view-in;
  animation-duration: 0.48s;
}

/* Feedback sits after Talk: moving forward slides in from the reading-end side. */
:root[dir="rtl"][data-view-direction="forward"],
:root[dir="ltr"][data-view-direction="back"] {
  --view-side: -1;
}

:root[dir="rtl"][data-view-direction="back"],
:root[dir="ltr"][data-view-direction="forward"] {
  --view-side: 1;
}

@keyframes view-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateX(calc(var(--view-side, 0) * -100vw));
  }
}

/* Slides past the resting spot slightly, then settles back. */
@keyframes view-in {
  0% {
    opacity: 1;
    transform: translateX(calc(var(--view-side, 0) * 100vw));
    animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  }
  72% {
    transform: translateX(calc(var(--view-side, 0) * -14px));
    animation-timing-function: cubic-bezier(0.33, 0, 0.3, 1);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.layout[data-view="talk"] .insights,
.layout[data-view="talk"] .saved-issues,
.layout[data-view="feedback"] .practice {
  display: none;
}

.layout[data-view="talk"],
.layout[data-view="feedback"] {
  grid-template-columns: minmax(0, 1fr);
}

.layout[data-view="talk"] .practice {
  width: 100%;
  max-width: 760px;
  justify-self: center;
}

.layout[data-view="feedback"] .saved-issues {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 900px) {
  .layout[data-view="feedback"] .insights {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .layout[data-view="feedback"] .insights .patterns-panel {
    margin: 0;
  }
}

.feedback-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.feedback-notice[hidden] {
  display: none;
}

/* Newest conversation under the talk card. */
.latest-conversation {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  justify-self: center;
}

.latest-conversation[hidden],
.layout[data-view="feedback"] .latest-conversation {
  display: none;
}

#latest-issues {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#latest-issues[hidden] {
  display: none;
}

.all-conversations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border: 1.5px solid var(--line);
  border-radius: 16px 12px 15px 13px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.all-conversations-text {
  display: grid;
  gap: 2px;
}

.all-conversations-text strong {
  font-size: 1.1rem;
}

#all-conversations-meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.all-conversations-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  transition: transform 0.18s ease;
}

.all-conversations-arrow svg {
  width: 20px;
  height: 20px;
}

html[dir="ltr"] .all-conversations-arrow svg {
  transform: scaleX(-1);
}

.all-conversations:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.all-conversations:hover .all-conversations-arrow {
  transform: translateX(-3px);
}

html[dir="ltr"] .all-conversations:hover .all-conversations-arrow {
  transform: translateX(3px);
}

.all-conversations:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

/* Buddy: a cartoon blob peeking over the bottom edge of the talk card. */
.buddy {
  --buddy-body: #8fb09a;
  /* The face keeps its warm colors in both modes. */
  --buddy-cheek: #d66b48;
  --buddy-mouth: #ad4f34;
  --voice: 0;
  --look-x: 0px;
  --look-y: 0px;
  --buddy-width: 112px;
  position: absolute;
  /* Puts the clip line (y=91 of 100) exactly on the card's bottom edge. */
  bottom: calc(var(--buddy-width) * -0.075);
  inset-inline-start: 26px;
  width: var(--buddy-width);
  pointer-events: none;
}

.buddy svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: visible;
}

/* Above the card's rough border (z-index 4), so the hands grip over it. */
.buddy .buddy-hands {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.buddy-shape,
.buddy-hand,
.buddy-eyes {
  pointer-events: auto;
  cursor: pointer;
}

.buddy-eyes,
.buddy-mouth,
.buddy-grin {
  transform-box: fill-box;
}

.buddy-shape,
.buddy-white,
.buddy-hand,
.buddy-mouth,
.buddy-grin {
  stroke: var(--line);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.buddy-shape,
.buddy-hand {
  fill: var(--buddy-body);
}

.buddy-hair,
.buddy-smile,
.buddy-happy {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.buddy-white {
  fill: #fffefa;
}

.buddy-pupil {
  fill: var(--line);
}

.buddy-shine {
  fill: #fffefa;
}

.buddy-cheek {
  fill: var(--buddy-cheek);
  opacity: 0.35;
}

.buddy-mouth,
.buddy-grin {
  fill: var(--buddy-mouth);
  opacity: 0;
  transform-origin: 50% 0%;
  transform: scale(0.4);
  transition: transform 0.18s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.12s ease;
}

/* Lift and body pivot on the card edge (y≈91), since the body runs far below it. */
.buddy-lift,
.buddy-body {
  transform-box: view-box;
  transform-origin: 60px 91px;
}

.buddy-lift {
  transform: translateY(calc(var(--voice) * -14px)) scale(calc(1 - var(--voice) * 0.04), calc(1 + var(--voice) * 0.08));
  transition: transform 0.12s ease-out;
}

.buddy-body {
  animation: buddy-breathe 3.2s ease-in-out infinite;
}

.buddy-look {
  transform: translate(var(--look-x), var(--look-y));
  transition: transform 0.3s cubic-bezier(0.34, 1.6, 0.64, 1);
}

.buddy-eyes {
  transform-origin: 50% 50%;
  animation: buddy-blink 4.8s infinite;
}

.buddy-happy {
  stroke-width: 3.4;
  opacity: 0;
}

/* Connecting: glances up, wobbling while it waits. */
.talk-stage[data-state="connecting"] .buddy-look {
  transform: translate(3px, -4px);
}

.talk-stage[data-state="connecting"] .buddy-body {
  animation: buddy-wobble 0.7s ease-in-out infinite;
}

/* Live: bobs along; while you speak it stretches up with an "o" mouth. */
.talk-stage[data-state="live"] .buddy-body {
  animation: buddy-bob 1.4s ease-in-out infinite;
}

.talk-stage[data-speaking="true"] .buddy-smile {
  opacity: 0;
}

.talk-stage[data-speaking="true"] .buddy-mouth {
  opacity: 1;
  transform: none;
}

/* After a conversation: bouncy hops with a big grin. */
.talk-stage[data-state="ending"] .buddy-eye,
.buddy[data-cheer] .buddy-eye,
.talk-stage[data-state="ending"] .buddy-smile,
.buddy[data-cheer] .buddy-smile {
  opacity: 0;
}

.talk-stage[data-state="ending"] .buddy-happy,
.buddy[data-cheer] .buddy-happy,
.talk-stage[data-state="ending"] .buddy-grin,
.buddy[data-cheer] .buddy-grin {
  opacity: 1;
  transform: none;
}

.buddy[data-cheer] .buddy-body {
  animation: buddy-hop 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) 3;
}

@keyframes buddy-breathe {
  50% {
    transform: scale(1.04, 0.96);
  }
}

@keyframes buddy-blink {
  0%,
  93%,
  99%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.08);
  }
}

@keyframes buddy-wobble {
  25% {
    transform: rotate(-5deg) scale(1.02, 0.98);
  }
  75% {
    transform: rotate(5deg) scale(1.02, 0.98);
  }
}

@keyframes buddy-bob {
  0%,
  100% {
    transform: scale(1.03, 0.97);
  }
  50% {
    transform: translateY(-5px) scale(0.98, 1.03);
  }
}

@keyframes buddy-hop {
  0% {
    transform: scale(1.12, 0.86);
  }
  45% {
    transform: translateY(-22px) scale(0.92, 1.1);
  }
  85% {
    transform: translateY(0) scale(1.1, 0.9);
  }
}

/* Click reactions: one at a time, picked at random. */
.talk-stage .buddy[data-poke="boing"] .buddy-body {
  animation: buddy-poke-boing 0.75s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.talk-stage .buddy[data-poke="giggle"] .buddy-body {
  animation: buddy-poke-giggle 0.8s ease-in-out;
}

.talk-stage .buddy[data-poke="surprise"] .buddy-body {
  animation: buddy-poke-surprise 0.9s cubic-bezier(0.34, 1.6, 0.64, 1);
}

.buddy[data-poke="giggle"] .buddy-eye,
.buddy[data-poke="giggle"] .buddy-smile,
.buddy[data-poke="surprise"] .buddy-smile {
  opacity: 0;
}

.buddy[data-poke="giggle"] .buddy-happy,
.buddy[data-poke="giggle"] .buddy-grin,
.buddy[data-poke="surprise"] .buddy-mouth {
  opacity: 1;
  transform: none;
}

.buddy[data-poke="surprise"] .buddy-eyes {
  animation: none;
  transform: scale(1.25);
  transition: transform 0.15s cubic-bezier(0.34, 1.6, 0.64, 1);
}

/* Excited while the pointer hovers the start button. */
.talk-stage[data-state="idle"]:has(.talk-button:hover) .buddy:not([data-poke], [data-cheer]) .buddy-body {
  animation: buddy-excited 0.5s ease-in-out infinite;
}

.talk-stage[data-state="idle"]:has(.talk-button:hover) .buddy:not([data-poke], [data-cheer]) .buddy-smile {
  opacity: 0;
}

.talk-stage[data-state="idle"]:has(.talk-button:hover) .buddy:not([data-poke], [data-cheer]) .buddy-grin {
  opacity: 1;
  transform: none;
}

.talk-stage[data-state="idle"]:has(.talk-button:hover) .buddy:not([data-poke], [data-cheer]) .buddy-eyes {
  animation: none;
  transform: scale(1.14);
  transition: transform 0.15s cubic-bezier(0.34, 1.6, 0.64, 1);
}

@keyframes buddy-excited {
  0%,
  100% {
    transform: scale(1.04, 0.96);
  }
  50% {
    transform: translateY(-7px) scale(0.97, 1.04);
  }
}

/* Thumbs up: the edge hand lets go and pops up beside the body. */
.buddy-thumb {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(56px);
  opacity: 0;
}

.buddy-fingers {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
  stroke-linecap: round;
}

.buddy-hand-end {
  transition: opacity 0.1s ease;
}

.buddy[data-poke="like"] .buddy-thumb,
.buddy[data-cheer] .buddy-thumb {
  animation: buddy-poke-like 1.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.buddy[data-poke="like"] .buddy-hand-end,
.buddy[data-cheer] .buddy-hand-end {
  animation: buddy-hand-away 1.5s linear;
}

.buddy[data-poke="like"] .buddy-eye,
.buddy[data-poke="like"] .buddy-smile {
  opacity: 0;
}

.buddy[data-poke="like"] .buddy-happy,
.buddy[data-poke="like"] .buddy-grin {
  opacity: 1;
  transform: none;
}

.talk-stage .buddy[data-poke="like"] .buddy-body {
  animation: buddy-lean 1.5s ease-in-out;
}

@keyframes buddy-poke-like {
  0% {
    opacity: 1;
    transform: translateY(56px) rotate(-20deg);
  }
  22% {
    transform: translateY(-6px) rotate(10deg);
  }
  32%,
  52% {
    transform: translateY(0) rotate(0deg);
  }
  42% {
    transform: translateY(-3px) rotate(-8deg);
  }
  78% {
    transform: translateY(0) rotate(0deg);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(56px) rotate(-10deg);
  }
}

@keyframes buddy-hand-away {
  0%,
  100% {
    opacity: 1;
  }
  6%,
  94% {
    opacity: 0;
  }
}

@keyframes buddy-lean {
  25%,
  75% {
    transform: rotate(-4deg);
  }
}

@keyframes buddy-poke-boing {
  0% {
    transform: scale(1.18, 0.8);
  }
  35% {
    transform: translateY(-34px) scale(0.88, 1.14);
  }
  70% {
    transform: translateY(0) scale(1.14, 0.86);
  }
  85% {
    transform: scale(0.96, 1.04);
  }
}

@keyframes buddy-poke-giggle {
  0%,
  100% {
    transform: none;
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-6deg) translateY(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: rotate(6deg);
  }
}

@keyframes buddy-poke-surprise {
  0% {
    transform: none;
  }
  20% {
    transform: translateY(-16px) scale(0.94, 1.1);
  }
  45% {
    transform: translateY(0) scale(1.08, 0.94);
  }
}

/* Wave hello: the left edge hand lets go and waves from the wrist. */
.buddy-wave {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(56px);
  opacity: 0;
}

.buddy[data-poke="wave"] .buddy-wave {
  animation: buddy-poke-wave 1.7s ease-in-out;
}

.buddy[data-poke="wave"] .buddy-hand-start {
  animation: buddy-hand-away 1.7s linear;
}

.buddy[data-poke="wave"] .buddy-smile,
.buddy[data-poke="wink"] .buddy-smile {
  opacity: 0;
}

.buddy[data-poke="wave"] .buddy-grin,
.buddy[data-poke="wink"] .buddy-grin {
  opacity: 1;
  transform: none;
}

@keyframes buddy-poke-wave {
  0% {
    opacity: 1;
    transform: translateY(56px) rotate(0deg);
  }
  18% {
    transform: translateY(0) rotate(-16deg);
  }
  30%,
  54% {
    transform: translateY(0) rotate(20deg);
  }
  42%,
  66% {
    transform: translateY(0) rotate(-16deg);
  }
  80% {
    transform: translateY(0) rotate(0deg);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(56px) rotate(0deg);
  }
}

/* Wink: one eye closes while the head tilts toward it. */
.buddy-wink {
  opacity: 0;
}

.buddy-wink-line,
.buddy-sleepy {
  fill: none;
  stroke: var(--line);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.buddy[data-poke="wink"] .buddy-wink {
  opacity: 1;
}

.buddy[data-poke="wink"] .buddy-eye-right {
  opacity: 0;
}

.talk-stage .buddy[data-poke="wink"] .buddy-body {
  animation: buddy-poke-wink 1.1s ease-in-out;
}

@keyframes buddy-poke-wink {
  20%,
  70% {
    transform: translateY(-3px) rotate(6deg);
  }
}

/* Yawn (bored): stretches up, squints, big round mouth. */
.buddy-yawn {
  fill: var(--buddy-mouth);
  stroke: var(--line);
  stroke-width: 2.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.buddy[data-poke="yawn"] .buddy-yawn {
  animation: buddy-yawn-mouth 2.2s ease-in-out;
}

.buddy[data-poke="yawn"] .buddy-smile {
  animation: buddy-hidden 2.2s;
}

.buddy[data-poke="yawn"] .buddy-eyes {
  animation: buddy-squint 2.2s ease-in-out;
}

.talk-stage .buddy[data-poke="yawn"] .buddy-body {
  animation: buddy-poke-yawn 2.2s ease-in-out;
}

@keyframes buddy-yawn-mouth {
  0% {
    opacity: 1;
    transform: scale(0.3);
  }
  30%,
  65% {
    transform: none;
  }
  95% {
    opacity: 1;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
  }
}

@keyframes buddy-hidden {
  0%,
  95% {
    opacity: 0;
  }
}

@keyframes buddy-squint {
  30%,
  65% {
    transform: scaleY(0.25);
  }
}

@keyframes buddy-poke-yawn {
  30%,
  65% {
    transform: translateY(-6px) scale(0.97, 1.07);
  }
  80% {
    transform: scale(1.03, 0.97);
  }
}

/* Look around (bored): eyes dart side to side with a small head turn. */
.buddy[data-poke="lookaround"] .buddy-look {
  animation: buddy-poke-look 2.4s ease-in-out;
}

.talk-stage .buddy[data-poke="lookaround"] .buddy-body {
  animation: buddy-lookaround-body 2.4s ease-in-out;
}

@keyframes buddy-poke-look {
  15%,
  35% {
    transform: translate(-4px, -1px);
  }
  50%,
  70% {
    transform: translate(4px, -1px);
  }
  85% {
    transform: translate(0, -3px);
  }
}

@keyframes buddy-lookaround-body {
  15%,
  35% {
    transform: rotate(-3deg);
  }
  50%,
  70% {
    transform: rotate(3deg);
  }
}

/* Asleep after a minute alone: closed eyes, slow snore, floating z's. */
.buddy[data-sleep] .buddy-eye,
.buddy[data-sleep] .buddy-smile {
  opacity: 0;
}

.buddy-sleepy {
  opacity: 0;
}

.buddy[data-sleep] .buddy-sleepy {
  opacity: 1;
}

.buddy[data-sleep] .buddy-eyes {
  animation: none;
}

.buddy[data-sleep] .buddy-mouth {
  opacity: 1;
  transform: scale(0.6);
}

.talk-stage .buddy[data-sleep]:not([data-poke]) .buddy-body {
  animation: buddy-snore 3.4s ease-in-out infinite;
}

.buddy-zzz text {
  font: 800 21px system-ui, sans-serif;
  fill: var(--line);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.buddy[data-sleep] .buddy-zzz text {
  animation: buddy-zzz 3s ease-in-out infinite;
}

.buddy[data-sleep] .buddy-zzz text:nth-child(2) {
  animation-delay: 1s;
}

.buddy[data-sleep] .buddy-zzz text:nth-child(3) {
  animation-delay: 2s;
}

@keyframes buddy-snore {
  50% {
    transform: scale(1.05, 0.95);
  }
}

@keyframes buddy-zzz {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(0.6);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(6px, -8px) scale(1.1);
  }
}

/* ---- More buddy moods: scratch, drum, blush, dance, grumpy, star. ---- */
.buddy-face,
.buddy-cheek,
.buddy-scratch,
.buddy-star,
.buddy-notes text,
.buddy-anger {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.buddy-brows {
  fill: none;
  stroke: var(--line);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}

.buddy-scratch,
.buddy-star {
  transform: translateY(70px);
  opacity: 0;
}

.buddy-star {
  transform-origin: 50% 100%;
}

.buddy-star-shape {
  fill: #f2c14e;
  stroke: var(--line);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.buddy-notes text {
  font: 800 17px system-ui, sans-serif;
  fill: var(--line);
  opacity: 0;
}

.buddy-anger {
  fill: none;
  stroke: var(--buddy-mouth);
  stroke-width: 2.8;
  stroke-linecap: round;
  opacity: 0;
}

/* Happy face (closed arc eyes, big grin) for blush, dance and star. */
.buddy[data-poke="blush"] .buddy-eye,
.buddy[data-poke="dance"] .buddy-eye,
.buddy[data-poke="star"] .buddy-eye,
.buddy[data-poke="dance"] .buddy-smile,
.buddy[data-poke="star"] .buddy-smile,
.buddy[data-poke="grumpy"] .buddy-smile {
  opacity: 0;
}

.buddy[data-poke="blush"] .buddy-happy,
.buddy[data-poke="dance"] .buddy-happy,
.buddy[data-poke="star"] .buddy-happy,
.buddy[data-poke="dance"] .buddy-grin,
.buddy[data-poke="star"] .buddy-grin {
  opacity: 1;
  transform: none;
}

/* Scratch (bored): a hand rubs the side of the head, which tilts; the hair reacts. */
.buddy[data-poke="scratch"] .buddy-scratch {
  animation: buddy-scratch-hand 2s ease-in-out;
}

.buddy[data-poke="scratch"] .buddy-hand-start {
  animation: buddy-hand-away 2s linear;
}

.talk-stage .buddy[data-poke="scratch"] .buddy-body {
  animation: buddy-poke-scratch 2s ease-in-out;
}

.buddy[data-poke="scratch"] .buddy-look {
  transform: translate(-3px, -3px);
}

@keyframes buddy-scratch-hand {
  0% {
    opacity: 1;
    transform: translate(0, 70px);
  }
  22% {
    transform: translate(0, 0) rotate(0deg);
  }
  32%,
  52%,
  72% {
    transform: translate(3px, -3px) rotate(-12deg);
  }
  42%,
  62% {
    transform: translate(-2px, 2px) rotate(10deg);
  }
  84% {
    transform: translate(0, 0) rotate(0deg);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, 70px);
  }
}

@keyframes buddy-poke-scratch {
  22% {
    transform: rotate(-5deg);
  }
  32%,
  52%,
  72% {
    transform: translateY(-1px) rotate(-7deg);
  }
  42%,
  62% {
    transform: rotate(-4deg);
  }
  84% {
    transform: rotate(-2deg);
  }
}

/* Drum (bored): fingers tap the card edge in turn, eyes half shut. */
.buddy[data-poke="drum"] .buddy-hand-start,
.buddy[data-poke="dance"] .buddy-hand-start {
  animation: buddy-drum-tap 0.3s ease-in-out 6;
}

.buddy[data-poke="drum"] .buddy-hand-end,
.buddy[data-poke="dance"] .buddy-hand-end {
  animation: buddy-drum-tap 0.3s ease-in-out 0.15s 6;
}

.talk-stage .buddy[data-poke="drum"] .buddy-body {
  animation: buddy-poke-drum 1.9s ease-in-out;
}

.buddy[data-poke="drum"] .buddy-eyes {
  animation: buddy-bored-lids 1.9s ease-in-out;
}

.buddy[data-poke="drum"] .buddy-look {
  transform: translate(-3px, 1px);
}

@keyframes buddy-drum-tap {
  50% {
    transform: translateY(-3px);
  }
}

@keyframes buddy-poke-drum {
  10%,
  90% {
    transform: scale(1.02, 0.97);
  }
}

@keyframes buddy-bored-lids {
  10%,
  90% {
    transform: scaleY(0.55);
  }
}

/* Blush (click): red puffy cheeks, shy squash and sway. */
.buddy[data-poke="blush"] .buddy-cheek {
  animation: buddy-blush-cheeks 1.6s ease-in-out;
}

.talk-stage .buddy[data-poke="blush"] .buddy-body {
  animation: buddy-poke-blush 1.6s ease-in-out;
}

@keyframes buddy-blush-cheeks {
  15%,
  80% {
    fill: #e8907c;
    opacity: 0.6;
    transform: scale(1.25, 1.15);
  }
}

@keyframes buddy-poke-blush {
  15%,
  80% {
    transform: translateY(5px) scale(1.03, 0.95);
  }
  30%,
  60% {
    transform: translateY(5px) scale(1.03, 0.95) rotate(-3deg);
  }
  45% {
    transform: translateY(5px) scale(1.03, 0.95) rotate(3deg);
  }
}

/* Dance (click): side-to-side bops with notes; the star pose dances twice. */
.talk-stage .buddy[data-poke="dance"] .buddy-body {
  animation: buddy-poke-dance 1.6s ease-in-out;
}

.talk-stage .buddy[data-poke="star"] .buddy-body {
  animation: buddy-poke-dance 1.6s ease-in-out 2;
}

.buddy[data-poke="dance"] .buddy-notes text,
.buddy[data-poke="star"] .buddy-notes text {
  animation: buddy-note 1.1s ease-out infinite;
}

.buddy[data-poke="dance"] .buddy-notes text:nth-child(2),
.buddy[data-poke="star"] .buddy-notes text:nth-child(2) {
  animation-delay: 0.35s;
}

.buddy[data-poke="dance"] .buddy-notes text:nth-child(3),
.buddy[data-poke="star"] .buddy-notes text:nth-child(3) {
  animation-delay: 0.7s;
}

@keyframes buddy-poke-dance {
  0%,
  50%,
  100% {
    transform: none;
  }
  12.5%,
  62.5% {
    transform: translateY(-7px) rotate(-9deg);
  }
  25%,
  75% {
    transform: scale(1.05, 0.95);
  }
  37.5%,
  87.5% {
    transform: translateY(-7px) rotate(9deg);
  }
}

@keyframes buddy-note {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.6);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(4px, -12px) rotate(12deg) scale(1.1);
  }
}

/* Star (a conversation with no new points): holds up a star while dancing. */
.buddy[data-poke="star"] .buddy-star {
  animation: buddy-star-hold 3.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.buddy[data-poke="star"] .buddy-hand-end {
  animation: buddy-hand-away 3.2s linear;
}

@keyframes buddy-star-hold {
  0% {
    opacity: 1;
    transform: translateY(70px) rotate(-20deg);
  }
  15% {
    transform: translateY(-4px) rotate(10deg);
  }
  22%,
  88% {
    transform: none;
  }
  35%,
  55%,
  75% {
    transform: rotate(-10deg);
  }
  45%,
  65% {
    transform: rotate(10deg);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(70px);
  }
}

/* Grumpy (3 quick clicks): puffed cheeks and angry brows, then it turns its
   back for a moment (the face slides away) with an anger mark, and turns back. */
.talk-stage .buddy[data-poke="grumpy"] .buddy-body {
  animation: buddy-poke-grumpy 2s ease-in-out;
}

.buddy[data-poke="grumpy"] .buddy-face {
  animation: buddy-turn-away 2s;
}

.buddy[data-poke="grumpy"] .buddy-brows {
  opacity: 1;
}

.buddy[data-poke="grumpy"] .buddy-cheek {
  animation: buddy-puff 2s ease-in-out;
}

.buddy[data-poke="grumpy"] .buddy-mouth {
  opacity: 1;
  transform: scale(0.5);
}

.buddy[data-poke="grumpy"] .buddy-anger {
  animation: buddy-anger 2s ease-in-out;
}

@keyframes buddy-puff {
  5%,
  30% {
    fill: #e8907c;
    opacity: 0.6;
    transform: scale(1.3, 1.2);
  }
}

/* A quick full spin: the face slides off one side and comes straight back
   round from the other, so the back only flashes by. */
@keyframes buddy-turn-away {
  0%,
  40% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  50% {
    opacity: 0;
    transform: translateX(-34px) scaleX(0.5);
  }
  51% {
    opacity: 0;
    transform: translateX(34px) scaleX(0.5);
    animation-timing-function: ease-out;
  }
  64%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes buddy-poke-grumpy {
  8%,
  38% {
    transform: scale(1.03, 0.985);
  }
  14%,
  26% {
    transform: translateX(-0.8px) scale(1.03, 0.985);
  }
  20%,
  32% {
    transform: translateX(0.8px) scale(1.03, 0.985);
  }
  46%,
  56% {
    transform: scaleX(0.92);
  }
  70% {
    transform: none;
  }
}

@keyframes buddy-anger {
  0%,
  8%,
  48%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
  14%,
  40% {
    opacity: 0.9;
    transform: scale(0.85);
  }
  22%,
  32% {
    opacity: 0.9;
    transform: scale(0.93);
  }
}

@media (max-width: 620px) {
  .buddy {
    --buddy-width: 78px;
    inset-inline-start: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buddy-body,
  .buddy-eyes {
    animation: none !important;
  }

  .buddy-lift,
  .buddy-look {
    transition: none;
  }
}

/* Practice: a short, friendly round around one point. */
.practice-target {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  max-width: 420px;
  margin: 4px 0 8px;
  padding: 14px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  text-align: center;
}

.practice-target[hidden],
.practice-result[hidden],
.practice-back[hidden] {
  display: none;
}

.practice-target-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.practice-target-text {
  font-size: 1.25rem;
}

.practice-go {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.practice-go:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.practice-back {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.practice-result {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.practice-result-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
}

.practice-result-uses {
  display: grid;
  gap: 6px;
  width: min(380px, 100%);
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  list-style: none;
  color: var(--text);
  font-weight: 500;
}

.practice-result-uses[hidden] {
  display: none;
}

.practice-result-uses li {
  display: flex;
  gap: 8px;
  text-align: left;
}

.practice-result-uses li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
}

/* The end of a round: a row for each point. */
.practice-result-points {
  display: grid;
  gap: 8px;
  width: min(460px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.practice-result-points[hidden] {
  display: none;
}

.practice-result-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  text-align: left;
}

.result-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: #fff;
}

.practice-result-points li[data-right] .result-mark {
  border-color: var(--accent);
  background: var(--accent);
}

.result-mark svg {
  width: 14px;
  height: 14px;
}

.result-text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.result-sentence {
  font-weight: 600;
}

.result-note {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: left;
}

.practice-result-points li[data-right] .result-note {
  color: var(--accent);
  font-weight: 700;
}

.practice-result-points .level-dots {
  flex: none;
}

.practice[data-result] .talk-status {
  display: none;
}

.practice-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.practice-go:focus-visible,
.practice-back:focus-visible,
.practice-try:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.issue-practice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.practice-chip {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--title-wash);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.practice-chip.mastered {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.practice-try {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.practice-try:hover {
  background: var(--accent);
  color: #fff;
}

/* "Practice this conversation", above the conversation's points. */
.practice-conversation {
  display: flex;
  width: fit-content;
  margin: 12px auto 4px;
  padding: 6px 16px;
  font-size: 0.9rem;
}

.pattern-clean {
  margin-top: 6px;
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 650;
}

/* Two modes in one card: free conversation and point practice. */
.mode-switch {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}

.mode-tab {
  position: relative;
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 1.05rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mode-tab[aria-selected="true"] {
  color: #fff;
}

.mode-tab:disabled:not([aria-selected="true"]) {
  opacity: 0.45;
  cursor: default;
}

.mode-tab:focus-visible {
  outline: 3px solid var(--line);
  outline-offset: 2px;
}

.mode-dot {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.mode-dot[hidden] {
  display: none;
}

/* Practice mode takes the calm blue: tab, mic and wave follow --brand, and
   the round's controls follow --accent. */
.practice[data-mode="practice"] {
  --accent: #4f7a94;
  --brand: var(--accent);
  --brand-strong: #3b6079;
  --live-button: #9db4c2;
  --live-accent: #3b6079;
  background: #f4f8fa;
  transition: background-color 0.3s ease;
}

.mode-tab svg {
  width: 20px;
  height: 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The switch sits pinned to the top of the card, so it never moves between modes. */
.practice {
  min-height: 0;
  align-content: start;
  padding-top: 88px;
}

.practice .mode-switch {
  position: absolute;
  top: 22px;
  left: 50%;
  translate: -50% 0;
  margin: 0;
}

/* The tip is a speech bubble from the buddy, next to it on the card's bottom edge. */
.practice:has(.talk-tip:not([hidden])) {
  padding-bottom: 152px;
}

.talk-tip {
  position: absolute;
  bottom: 34px;
  inset-inline-start: 148px;
  z-index: 5;
  max-width: min(300px, calc(100% - 172px));
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 16px 16px 16px 16px;
  border-end-start-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: start;
  transform-origin: bottom left;
  transition: opacity 0.35s ease, scale 0.35s ease;
  animation: talk-tip-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

html[dir="rtl"] .talk-tip {
  transform-origin: bottom right;
}

/* Tail pointing back at the buddy. */
.talk-tip::before {
  content: "";
  position: absolute;
  bottom: 8px;
  inset-inline-start: -8px;
  width: 12px;
  height: 12px;
  border-bottom: 1.5px solid var(--line);
  border-inline-start: 1.5px solid var(--line);
  background: var(--surface);
  rotate: 45deg;
}

html[dir="rtl"] .talk-tip::before {
  rotate: -45deg;
}

.talk-tip[hidden] {
  display: none;
}

/* After a free talk with new points: the one way into a round on them,
   centered low on the card, where the buddy points at it. In practice's blue,
   since that is where it leads, with the mic button's offset shadow. Hover
   never moves the button itself: a moving edge slips out from under the
   pointer and back, and a half-pixel shift makes the icon shimmer. */
.practice:has(.practice-talk:not([hidden])) {
  padding-bottom: 112px;
}

/* What the button will practice: a clear title and the corrected sentences. */
.talk-points {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(460px, 100%);
  margin: 2px 0 0;
}

.talk-points[hidden] {
  display: none;
}

.talk-points-title {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.talk-points-list {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Up to two lines each, so a long sentence keeps its changed words in view. */
.talk-points-list li {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, #aed0b5 22%, var(--surface));
  font-size: 1.02rem;
  line-height: 1.45;
  text-align: center;
}

.talk-points-list .change {
  background: #aed0b5;
  color: #244d31;
}

.talk-points-list .talk-points-more {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.88rem;
}

@media (max-width: 620px) {
  .talk-points-title {
    font-size: 0.98rem;
  }

  .talk-points-list li {
    padding: 6px 10px;
    font-size: 0.94rem;
  }
}

.practice-talk {
  position: absolute;
  bottom: 26px;
  inset-inline: 152px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: calc(100% - 304px);
  margin-inline: auto;
  padding-block: 8px;
  padding-inline: 8px 24px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #4f7a94;
  box-shadow: 3px 4px 0 rgb(66 60 54 / 22%);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
  animation: talk-tip-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.practice-talk:hover {
  background: #3b6079;
  box-shadow: 4px 6px 0 rgb(66 60 54 / 22%);
}

.practice-talk:active {
  box-shadow: 1px 2px 0 rgb(66 60 54 / 18%);
}

.practice-talk:focus-visible {
  outline: 3px solid #4f7a94;
  outline-offset: 3px;
}

/* A round white badge with a play sign: press and it starts. */
.practice-talk-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #4f7a94;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.practice-talk-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  /* The triangle's weight sits on its left; this centers it by eye. Like any
     player's, it points right in both directions. */
  translate: 1.5px 0;
}

.practice-talk:hover .practice-talk-icon {
  transform: scale(1.12);
}

/* Now and then a soft shine sweeps across it. */
.practice-talk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgb(255 255 255 / 28%) 50%,
    transparent 65%
  );
  translate: -110% 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .practice-talk::after {
    animation: practice-talk-shine 4.5s ease-in-out 1.2s infinite;
  }
}

@keyframes practice-talk-shine {
  0% {
    translate: -110% 0;
  }
  30%,
  100% {
    translate: 110% 0;
  }
}

.practice-talk[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .practice:has(.practice-talk:not([hidden])) {
    padding-bottom: 100px;
  }

  /* Beside the buddy, centered in the room it leaves. */
  .practice-talk {
    bottom: 18px;
    inset-inline: 104px 12px;
    gap: 7px;
    max-width: calc(100% - 116px);
    padding-block: 5px;
    padding-inline: 5px 12px;
    font-size: 0.9rem;
    text-wrap: balance;
  }

  .practice-talk-icon {
    width: 30px;
    height: 30px;
  }

  .practice-talk-icon svg {
    width: 14px;
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .practice-talk {
    animation: none;
  }

  .practice-talk-icon {
    transition: none;
  }
}

/* The buddy points at it: the hand on the button's side lets go of the edge
   and points along it. Eager hops when the button shows up, then a point now
   and then. The hand is drawn on the left (the buddy sits on the right in
   RTL); in LTR it turns around the body's middle to point right. */
.buddy-point {
  --point-dir: 1;
  transform-box: view-box;
  transform-origin: 60px 41px;
  opacity: 0;
}

html[dir="ltr"] .buddy-point {
  --point-dir: -1;
  scale: -1 1;
}

.buddy[data-point]:not([data-poke], [data-cheer]) .buddy-point {
  opacity: 1;
}

html:not([dir="ltr"]) .buddy[data-point]:not([data-poke], [data-cheer]) .buddy-hand-start,
html[dir="ltr"] .buddy[data-point]:not([data-poke], [data-cheer]) .buddy-hand-end {
  opacity: 0;
}

.buddy[data-point]:not([data-poke], [data-cheer]) .buddy-smile {
  opacity: 0;
}

.buddy[data-point]:not([data-poke], [data-cheer]) .buddy-grin {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .buddy[data-point="eager"]:not([data-poke], [data-cheer]) .buddy-point {
    animation: buddy-point-jab 0.55s ease-in-out infinite;
  }

  .talk-stage .buddy[data-point="eager"]:not([data-poke], [data-cheer]) .buddy-body {
    animation: buddy-hop 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
  }

  .buddy[data-point="calm"]:not([data-poke], [data-cheer]) .buddy-point {
    animation: buddy-point-now 7s ease-in-out infinite;
  }

  html:not([dir="ltr"]) .buddy[data-point="calm"]:not([data-poke], [data-cheer]) .buddy-hand-start,
  html[dir="ltr"] .buddy[data-point="calm"]:not([data-poke], [data-cheer]) .buddy-hand-end {
    animation: buddy-point-grip 7s linear infinite;
  }
}

@keyframes buddy-point-jab {
  50% {
    translate: calc(-5px * var(--point-dir)) 0;
  }
}

/* Calm: the hand comes out, points twice, and goes back to the edge. */
@keyframes buddy-point-now {
  0%,
  72%,
  100% {
    opacity: 0;
    translate: calc(14px * var(--point-dir)) 22px;
  }
  76%,
  80%,
  88%,
  96% {
    opacity: 1;
    translate: 0 0;
  }
  84%,
  92% {
    opacity: 1;
    translate: calc(-5px * var(--point-dir)) 0;
  }
}

@keyframes buddy-point-grip {
  0%,
  73%,
  99%,
  100% {
    opacity: 1;
  }
  75%,
  97% {
    opacity: 0;
  }
}

@media (max-width: 620px) {
  .mode-tab {
    padding: 8px 14px;
    font-size: 0.95rem;
  }

  .talk-tip {
    bottom: 26px;
    inset-inline-start: 104px;
    max-width: calc(100% - 120px);
    font-size: 0.9rem;
  }

  .practice:has(.talk-tip:not([hidden])) {
    padding-bottom: 148px;
  }
}

.buddy[data-sleep] ~ .talk-tip {
  opacity: 0;
  scale: 0.85;
}

@keyframes talk-tip-pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .talk-tip {
    animation: none;
  }
}

/* Practice target: a label, the familiar issue card, and one line on what happens. */
.practice-target {
  gap: 10px;
  width: min(560px, 100%);
  max-width: none;
  padding: 0;
  background: none;
}

.practice-target-card {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.practice-target-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}

.practice-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.practice-switch svg {
  width: 16px;
  height: 16px;
}

.practice-switch:hover {
  background: var(--accent);
  color: #fff;
}

.practice-switch:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.practice-target-footer {
  align-items: center;
}

/* The shuffle arrows follow the reading direction. */
html[dir="rtl"] .practice-switch svg {
  transform: scaleX(-1);
}

/* Practice carousel: arrows on both sides, the card can be dragged. */
.practice-carousel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.practice-carousel .practice-target-card {
  flex: 1;
  min-width: 0;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.practice-carousel .practice-target-card:active {
  cursor: grabbing;
}

.practice-target-card > li {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.practice-target-card > li.slide-in {
  animation: card-slide-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes card-slide-in {
  from {
    opacity: 0;
    transform: translateX(var(--slide-from, 0)) rotate(var(--slide-tilt, 0));
  }
}

.carousel-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.carousel-arrow[hidden] {
  display: none;
}

.carousel-arrow svg {
  width: 22px;
  height: 22px;
}

html[dir="ltr"] .carousel-arrow svg {
  transform: scaleX(-1);
}

.carousel-arrow:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  transform: scale(1.06);
}

.carousel-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.carousel-arrow:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.carousel-count {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
}

.carousel-count:empty {
  display: none;
}

@media (max-width: 620px) {
  .practice-carousel {
    gap: 4px;
  }

  .carousel-arrow {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .practice-target-card > li.slide-in {
    animation: none;
  }
}

.latest-title {
  justify-self: start;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

/* While idle, the flat wave and the "ready" status only take space. */
.talk-stage[data-state="idle"] .talk-wave,
.talk-stage[data-state="idle"][data-status-ready] .talk-status {
  display: none;
}

/* How to allow the microphone, when the browser refused it: a few short
   steps under the line that says so. */
.mic-help {
  display: grid;
  gap: 6px;
  max-width: 36ch;
  margin: 0 auto;
  padding-inline-start: 1.5em;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: start;
}

.mic-help[hidden] {
  display: none;
}

/* Practice: the round on screen is one card. Each point is folded to its
   corrected sentence; opening one shows what was said and why. */
.round-card {
  padding: 4px 14px;
}

.round-point + .round-point {
  border-top: 1.5px dashed var(--border);
}

.round-point > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  list-style: none;
  cursor: pointer;
}

.round-point > summary::-webkit-details-marker {
  display: none;
}

.round-point > summary:focus-visible {
  border-radius: 8px;
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

.round-point > summary .sentence {
  flex: 1;
  min-width: 0;
}

.round-point > summary .level-dots {
  flex: none;
}

.round-point > summary .speak-button {
  position: static;
  flex: none;
}

/* Trades the point on this row for another one. */
.swap-button {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.swap-button svg {
  width: 16px;
  height: 16px;
}

.swap-button:hover {
  background: #54836433;
  opacity: 1;
}

.swap-button:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

/* The round is fixed once the talk starts. */
.talk-stage:not([data-state="idle"]) .swap-button {
  opacity: 0.3;
  pointer-events: none;
}

.round-point.swap-in > summary {
  animation: round-point-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes round-point-in {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

.round-point-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: rotate 0.2s ease;
}

.round-point[open] .round-point-chevron {
  rotate: 180deg;
}

/* On a phone the sentence gets the row's whole width, and the level and the
   buttons move to a short line of their own under it. Side by side they left
   the sentence a column a few words wide. */
@media (max-width: 620px) {
  .round-point > summary {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas:
      "sentence sentence sentence chevron"
      "level . speak swap";
    gap: 2px 8px;
  }

  .round-point > summary .sentence {
    grid-area: sentence;
  }

  .round-point > summary .level-dots {
    grid-area: level;
    justify-self: start;
  }

  .round-point > summary .speak-button {
    grid-area: speak;
  }

  .round-point > summary .swap-button {
    grid-area: swap;
  }

  .round-point-chevron {
    grid-area: chevron;
    align-self: start;
    justify-self: end;
    margin-top: 5px;
  }
}

.round-point-body {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
}

/* A point opens and closes smoothly; the card grows with it. */
.round-point::details-content {
  block-size: 0;
  opacity: 0;
  overflow: clip;
  transition:
    block-size 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease,
    content-visibility 0.28s allow-discrete;
}

.round-point[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .round-point::details-content,
  .round-point-chevron {
    transition: none;
  }

  .round-point.swap-in > summary {
    animation: none;
  }
}

/* A pill slides under the selected mode tab and takes the mode's color. */
.mode-switch::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--pill-w, 0);
  border-radius: 999px;
  background: var(--brand);
  translate: var(--pill-x, 0) 0;
}

.mode-switch[data-pill-ready]::before {
  transition:
    translate 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
    width 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
    background-color 0.3s ease;
}

.mode-tab {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mode-switch[data-pill-ready]::before {
    transition: none;
  }
}

/* A thin, quiet scrollbar with reserved room, so content never jumps when it appears. */
html {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #d8cfc4 transparent;
}

/* "Explain more": a small text button under the short "why". The longer
   explanation opens below it, inside the same box. */
.explain-more {
  margin-top: 6px;
}

/* The summary sits inside a conversation card, so the card's own summary
   styles (spacing, boxed arrow) are reset here. */
.explanation .explain-more > summary {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.explanation .explain-more > summary::-webkit-details-marker {
  display: none;
}

.explanation .explain-more > summary::before {
  content: none;
}

.explanation .explain-more > summary:hover,
.explanation .explain-more[open] > summary {
  color: var(--text);
}

.explanation .explain-more > summary:focus-visible {
  border-radius: 6px;
  outline: 3px solid var(--butter);
  outline-offset: 3px;
}

.explanation .explain-more > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 0.2s ease;
}

.explanation .explain-more[open] > summary::after {
  rotate: 225deg;
  translate: 0 2px;
}

/* Waiting for the explanation: the label breathes, like the speaker icon. */
.explanation .explain-more.loading > summary {
  cursor: progress;
  animation: speak-loading 0.7s ease-in-out infinite alternate;
}

.explain-more::details-content {
  block-size: 0;
  opacity: 0;
  overflow: clip;
  transition:
    block-size 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease,
    content-visibility 0.28s allow-discrete;
}

.explain-more[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.explain-more-body {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.explain-more-body p {
  margin: 0;
}

.explain-more-failed {
  color: var(--muted);
}

/* The two sentences to compare, one under the other. */
.explain-more-examples {
  display: grid;
  gap: 2px;
  margin: 2px 0 0;
  padding: 8px 12px;
  border-inline-start: 3px solid var(--accent);
  border-radius: 4px 10px 10px 4px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 1.02rem;
  line-height: 1.65;
  list-style: none;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .explanation .explain-more > summary,
  .explanation .explain-more > summary::after,
  .explain-more::details-content {
    transition: none;
  }

  .explanation .explain-more.loading > summary {
    animation: none;
    opacity: 0.5;
  }
}

/* A quick press flash on the carousel arrows. */
.carousel-arrow.pressed {
  animation: arrow-press 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes arrow-press {
  0% {
    background: var(--surface);
    color: var(--accent);
    transform: scale(1);
  }
  35% {
    background: var(--accent);
    color: #fff;
    transform: scale(0.84);
  }
  100% {
    background: var(--surface);
    color: var(--accent);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-arrow.pressed {
    animation-duration: 0.01s;
  }
}

/* Arrows stay at a fixed height from the top, so they don't jump as card heights change. */
.practice-carousel {
  align-items: flex-start;
}

.carousel-arrow {
  margin-top: 64px;
}

/* On a phone the arrows at the card's sides cost it a third of its width. There
   they sit under the card instead, at both ends of the line that counts the
   rounds, and the card runs the full width. */
@media (max-width: 620px) {
  .practice-carousel {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
  }

  .practice-carousel .practice-target-card {
    order: -1;
    flex: 0 0 100%;
  }

  .carousel-arrow {
    width: 36px;
    height: 36px;
    margin-top: 0;
  }

  /* The counter moves up into the arrows' line: their height, and the gap
     that .practice-target leaves between its rows. The space under the line
     keeps the arrows clear of the buddy's head at the card's corner. */
  .practice-carousel:has(.carousel-arrow:not([hidden])) + .practice-target-footer {
    min-height: 36px;
    margin-top: calc(-36px - 10px);
    margin-bottom: 18px;
    pointer-events: none;
  }
}

/* Full card width, so the practice card and its arrows don't shift sideways with content. */
.practice .talk-stage {
  justify-self: stretch;
}

/* Wrap-up between the end of a talk and its result. */
.talk-stage[data-wrapup] :is(.talk-timer, .talk-status, .talk-wave, .feedback-notice, .practice-target) {
  display: none;
}

.talk-wrapup {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  animation: wrapup-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.talk-wrapup[hidden] {
  display: none;
}

.wrapup-duration {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
}

.wrapup-working {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  color: var(--muted);
}

.wrapup-dots {
  display: inline-flex;
  gap: 3px;
}

.wrapup-dots i,
.buddy-thought i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: wrapup-dot 1.2s ease-in-out infinite;
}

.wrapup-dots i:nth-child(2),
.buddy-thought i:nth-child(2) {
  animation-delay: 0.15s;
}

.wrapup-dots i:nth-child(3),
.buddy-thought i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes wrapup-dot {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes wrapup-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* The buddy thinks it over: eyes up, a small thought bubble. */
.buddy-thought {
  position: absolute;
  z-index: 3;
  bottom: 100%;
  inset-inline-end: -6px;
  display: none;
  gap: 4px;
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}

.talk-stage[data-wrapup] .buddy-thought {
  display: inline-flex;
}

.talk-stage[data-wrapup] .buddy-look {
  transform: translate(3px, -5px);
}

@media (prefers-reduced-motion: reduce) {
  .wrapup-dots i,
  .buddy-thought i,
  .talk-wrapup {
    animation: none;
  }
}

/* Confetti layer: fills the talk card, behind everything in it. */
.confetti-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

/* "Practicing now: [topic ▾]" above the practice card. */
.practice-topic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* One point or a round of three: a small switch next to the topic. */
.round-size {
  display: inline-flex;
  padding: 2px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
}

.round-size button {
  padding: 3px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.round-size button[aria-checked="true"] {
  background: var(--accent);
  color: #fff;
}

.round-size button:disabled {
  opacity: 0.5;
  cursor: default;
}

.round-size button:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Conversation length, under the mic in free conversation (in the mode's color). */
.talk-limit {
  --accent: var(--brand);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.talk-limit[hidden] {
  display: none;
}

.talk-limit svg {
  width: 20px;
  height: 20px;
}

/* Pill menu: opens on a half-second hover or a click (see enhanceSelect). */
.menu {
  position: relative;
  display: inline-flex;
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.menu-trigger:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.menu-trigger:disabled {
  opacity: 0.5;
  cursor: default;
}

.menu-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 0.2s ease, translate 0.2s ease;
}

.menu-trigger[aria-expanded="true"] .menu-chevron {
  rotate: 225deg;
  translate: 0 2px;
}

.menu-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 50%;
  display: grid;
  gap: 2px;
  min-width: max-content;
  padding: 6px;
  border: 1.5px solid var(--line);
  border-radius: 15px 11px 14px 10px;
  background: var(--surface);
  box-shadow: 3px 4px 0 rgb(66 60 54 / 12%);
  translate: -50% 0;
  opacity: 1;
  transition: opacity 0.16s ease, translate 0.16s ease;
}

@starting-style {
  .menu-list {
    opacity: 0;
    translate: -50% -6px;
  }
}

.menu-list[hidden] {
  display: none;
}

.menu-option {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.menu-option:hover,
.menu-option:focus-visible {
  background: var(--title-wash);
  outline: none;
}

.menu-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.menu-option[aria-selected="true"]::before {
  content: "✓";
  margin-inline-end: 6px;
}

.menu-count {
  color: var(--muted);
  font-weight: 500;
}

.practice-try svg {
  width: 14px;
  height: 14px;
}

/* Practice level: four dots, filled as the point is used correctly. */
.level-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.level-dots i {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

.level-dots i.filled {
  background: var(--accent);
}

.level-dots i.new {
  animation: level-dot-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s backwards;
}

@keyframes level-dot-pop {
  from {
    background: transparent;
    scale: 0.4;
  }
  60% {
    scale: 1.5;
  }
}

.practice-result-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--accent);
  font-weight: 700;
}

.practice-result-level[hidden] {
  display: none;
}

.practice-result-level .level-dots i {
  width: 11px;
  height: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .level-dots i.new {
    animation: none;
  }
}

/* Delete a saved point or a whole conversation: a quiet trash button that
   shows on hover (always visible on touch screens), plus a short undo toast. */
.delete-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.delete-button svg {
  width: 16px;
  height: 16px;
}

.issue-card:hover .delete-button,
.conversation > summary:hover .delete-button,
.delete-button:focus-visible {
  opacity: 1;
}

.delete-button:hover {
  background: #edb6ad55;
  color: #9f1239;
}

.delete-button:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

@media (hover: none) {
  .delete-button {
    opacity: 0.7;
  }
}

/* The button floats in the empty middle of the row, just before the text at
   the row's end, so that text stays flush with the card edge. */
.issue-practice,
.conversation-meta {
  position: relative;
}

.issue-practice > .delete-button,
.conversation-meta > .delete-button {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(100% + 6px);
  translate: 0 -50%;
}

/* Narrow screens have no empty middle; there the button sits after the text. */
@media (max-width: 620px) {
  .issue-practice > .delete-button,
  .conversation-meta > .delete-button {
    position: static;
    translate: none;
    vertical-align: middle;
  }
}

.undo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  translate: -50% 0;
  animation: undo-toast-in 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

html[dir="rtl"] .undo-toast {
  padding: 10px 16px 10px 12px;
}

.undo-toast[hidden] {
  display: none;
}

/* A thin line along the top that runs out with the time left to undo. */
.undo-toast {
  overflow: hidden;
}

.undo-toast::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--brand);
  animation: undo-toast-time var(--undo-ms, 8s) linear forwards;
}

html[dir="rtl"] .undo-toast::before {
  transform-origin: right;
}

html[dir="ltr"] .undo-toast::before {
  transform-origin: left;
}

@keyframes undo-toast-time {
  to {
    transform: scaleX(0);
  }
}

.undo-toast button {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-raised);
  color: var(--brand-strong);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.undo-toast button:hover {
  border-color: var(--brand);
}

@keyframes undo-toast-in {
  from {
    opacity: 0;
    translate: -50% 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .undo-toast {
    animation: none;
  }
}

/* "Are you sure?" before deleting a point or a conversation. */
.confirm-dialog {
  width: min(360px, calc(100vw - 40px));
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 18px 14px 17px 13px;
  background: var(--surface);
  color: var(--text);
}

.confirm-dialog::backdrop {
  background: #302c2859;
}

.confirm-dialog[open] {
  animation: confirm-dialog-in 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.confirm-dialog p {
  margin: 0;
  padding: 22px 22px 6px;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.5;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 20px;
}

.confirm-dialog button {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.confirm-dialog button:hover {
  border-color: var(--brand);
}

.confirm-dialog button.danger {
  border-color: #b84d43;
  background: #b84d43;
  color: #fffefa;
}

.confirm-dialog button.danger:hover {
  background: #9f3f36;
}

.confirm-dialog button:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

@keyframes confirm-dialog-in {
  from {
    opacity: 0;
    scale: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-dialog[open] {
    animation: none;
  }
}