/* Circle — thread and goals.
 *
 * The screen itself carries no side padding: the header, the scrolling panel,
 * the player and the composer each hold their own 18px inset, so the player bar
 * can keep its own margins without fighting a shared gutter.
 */

.ro-circle {
  background: var(--color-bg);
  padding: 66px 0 10px;
}

/* — header — */

.ro-circle-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 18px 12px;
}

.ro-circle-headrow {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ro-circle-headtext {
  flex: 1;
  min-width: 0;
}

.ro-circle-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  line-height: 1.1;
}

.ro-circle-sub {
  font-size: 11px;
  color: var(--color-neutral-700);
  margin-top: 3px;
}

.ro-circle-target {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  display: grid;
  place-items: center;
  flex: none;
}
.ro-circle-target:hover { background: var(--color-neutral-200); }
.ro-circle-target:active { background: var(--color-neutral-300); }

.ro-circle-tabs { align-self: stretch; }
.ro-circle-tabs .seg-opt {
  flex: 1;
  justify-content: center;
  min-height: 42px;
}

/* — the one scrolling panel, whichever tab owns it — */

.ro-circle-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.ro-circle-goals {
  gap: 12px;
  padding: 0 18px 14px;
}

.ro-circle-thread {
  gap: 16px;
  padding: 6px 18px 10px;
}

/* — goals — */

.ro-circle-card {
  border-radius: 28px;
  padding: 19px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.ro-circle-card--workouts { background: var(--color-accent-2-100); }
.ro-circle-card--cushion { background: var(--color-accent-200); }

.ro-circle-cardhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ro-circle-cardtitle {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 18px;
  line-height: 1.15;
  flex: 1;
}
.ro-circle-card--workouts .ro-circle-cardtitle { color: var(--color-accent-2-900); }
.ro-circle-card--cushion .ro-circle-cardtitle { color: var(--color-accent-900); }

.ro-circle-cardval { font: 600 13px var(--font-body); }
.ro-circle-card--workouts .ro-circle-cardval { color: var(--color-accent-2-800); }
.ro-circle-card--cushion .ro-circle-cardval { color: var(--color-accent-800); }

.ro-circle-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ro-circle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ro-circle-who {
  font-size: 12px;
  width: 58px;
  flex: none;
  color: var(--color-accent-2-900);
}
.ro-circle-who--mine { font: 600 12px var(--font-body); }

.ro-circle-count {
  font: 600 11px var(--font-body);
  color: var(--color-accent-2-800);
  flex: none;
}
.ro-circle-count--mine { color: var(--color-accent-800); }

.ro-circle-cushionnote {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-accent-800);
}

.ro-circle-goalbtn {
  height: 46px;
  font-size: 14px;
}
.ro-circle-goalbtn--workouts {
  background: var(--color-accent-2-700);
  color: var(--color-accent-2-100);
}
.ro-circle-goalbtn--workouts:hover { background: var(--color-accent-2-800); }
.ro-circle-goalbtn--workouts:active { background: var(--color-accent-2-900); }

.ro-circle-goalbtn--cushion {
  background: var(--color-accent-700);
  color: var(--color-bg);
}
.ro-circle-goalbtn--cushion:hover { background: var(--color-accent-800); }
.ro-circle-goalbtn--cushion:active { background: var(--color-accent-900); }

/* — thread — */

.ro-circle-msg {
  display: flex;
  gap: 10px;
}
.ro-circle-msg--mine { flex-direction: row-reverse; }

.ro-circle-body {
  flex: 1;
  min-width: 0;
}
.ro-circle-body--mine {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ro-circle-meta {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin-bottom: 5px;
}

/* A bubble is a 22px pill with the corner nearest its speaker pulled in to 8px. */
.ro-circle-bubble {
  background: var(--color-surface);
  border-radius: 22px;
  border-bottom-left-radius: 8px;
  padding: 14px 15px;
}
.ro-circle-bubble--voice {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ro-circle-bubble--text {
  font-size: 14px;
  line-height: 1.55;
}
.ro-circle-bubble--mine {
  background: var(--color-accent-200);
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 8px;
}
.ro-circle-bubble--mine.ro-circle-bubble--voice { width: 100%; }
.ro-circle-bubble--mine.ro-circle-bubble--text { color: var(--color-accent-900); }

.ro-circle-play {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--color-accent-2-600);
  display: grid;
  place-items: center;
  flex: none;
}
button.ro-circle-play:hover { background: var(--color-accent-2-700); }
button.ro-circle-play:active { background: var(--color-accent-2-800); }
.ro-circle-play--mine { background: var(--color-accent-600); }

.ro-circle-len {
  font: 600 11px var(--font-body);
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  flex: none;
}
.ro-circle-len--mine { color: var(--color-accent-800); }

.ro-circle-caption {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  margin-top: 6px;
  padding-left: 4px;
}

/* — the player bar: sage, with the waveform running — */

.ro-circle-player {
  margin: 0 18px 10px;
  background: var(--color-accent-2-700);
  border-radius: 22px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.ro-circle-stop {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 22%, transparent);
  display: grid;
  place-items: center;
  flex: none;
}
.ro-circle-stop:hover { background: color-mix(in srgb, var(--color-bg) 32%, transparent); }
.ro-circle-stop:active { background: color-mix(in srgb, var(--color-bg) 42%, transparent); }
.ro-circle-stop i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--color-bg);
}

.ro-circle-playing {
  flex: 1;
  min-width: 0;
}

.ro-circle-playinglabel {
  font: 600 12px var(--font-body);
  color: var(--color-bg);
}

/* Faster than a recording's own bars — this one is already running. */
.ro-circle-player .ro-wave--live b { animation-duration: .9s; }

.ro-circle-playingtag {
  font: 600 11px var(--font-body);
  color: color-mix(in srgb, var(--color-accent-2-100) 70%, transparent);
  flex: none;
}

/* — composer row — */

.ro-circle-composer {
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.ro-circle-say {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 13px 18px;
  font-size: 13.5px;
  color: var(--color-neutral-700);
}

.ro-circle-mic {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-accent);
  display: grid;
  place-items: center;
  flex: none;
}
.ro-circle-mic:hover { background: var(--color-accent-600); }
.ro-circle-mic:active { background: var(--color-accent-700); }

/* Said in the player bar, not just the README: a sample answer has no audio. */
.ro-circle-playingsilent {
  font-size: 10.5px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-accent-2-100) 72%, transparent);
  margin-top: 3px;
}

/* — a circle that is genuinely empty —
   Distinct from loading on purpose: "nobody has answered" is the normal state
   of a circle started an hour ago, and a spinner would make it look broken. */
.ro-circle-quiet {
  margin: auto;
  max-width: 260px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ro-circle-retry {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

/* Three men with names, answers and timestamps, none of whom exist. The thread
   is the screen where that is least obvious, so it is stated at the top of it. */
.ro-circle-sample {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--color-accent-200);
  border: 1.5px solid var(--color-accent-400);
}
.ro-circle-sampletext {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-accent-900);
}
.ro-circle-sampletext b { font-weight: 800; }
.ro-circle-sample:hover { background: var(--color-accent-300); }