/* Warm, calm styling for the coaching companion. Mobile-first, local only -
   no external fonts or CDNs. Soft palette, readable type. */

:root {
  --bg: #f7f4ef;
  --surface: #ffffff;
  --ink: #33302b;
  --muted: #857f76;
  --accent: #7c9885;      /* soft sage */
  --accent-ink: #ffffff;
  --client: #e8eef0;      /* client bubble */
  --assistant: #efe8dd;   /* warm assistant bubble */
  --line: #e7e1d8;
  --error: #b4544a;
  --chip: #dce7df;
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.screen { min-height: 100%; }
[hidden] { display: none !important; }

/* --- Cards (connect / expired) ------------------------------------------- */
.card {
  max-width: 26rem;
  margin: 12vh auto;
  padding: 1.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(80, 70, 55, 0.08);
}
.card h1 { margin-top: 0; font-weight: 600; }
.card label {
  display: block;
  margin: 1rem 0 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.card input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1rem;
  background: #fbf9f5;
}
.muted { color: var(--muted); }
.error { color: var(--error); margin-top: 0.75rem; }
/* First-run consent copy: preserve the paragraph breaks in the server text and
   keep it comfortably readable on a small screen. */
.consent-text {
  white-space: pre-line;
  line-height: 1.5;
  margin-top: 0.75rem;
}

/* --- Buttons ------------------------------------------------------------- */
button {
  cursor: pointer;
  font: inherit;
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.2rem;
  background: var(--accent);
  color: var(--accent-ink);
  transition: filter 0.15s ease;
}
button:hover { filter: brightness(1.05); }
button:disabled { opacity: 0.5; cursor: default; }
.card button { width: 100%; margin-top: 1.25rem; }
button.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* --- App shell ----------------------------------------------------------- */
#app {
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.topbar {
  padding: 1rem 1rem 0;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 2;
}
.topbar h1 { font-size: 1.15rem; margin: 0 0 0.75rem; font-weight: 600; }
.tabs { display: flex; gap: 0.4rem; }
.tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border-radius: 12px 12px 0 0;
  padding: 0.55rem;
  font-size: 0.95rem;
}
.tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 -2px 8px rgba(80, 70, 55, 0.05);
}

.panel { display: none; flex: 1; padding: 1rem; }
.panel.is-active { display: flex; flex-direction: column; }
.panel h2 { font-weight: 600; margin: 0.25rem 0 0.25rem; }

/* --- Chat ---------------------------------------------------------------- */
.messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.5rem 0 0.75rem;
  overflow-y: auto;
}
.bubble {
  max-width: 82%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bubble.assistant {
  align-self: flex-start;
  background: var(--assistant);
  border-bottom-left-radius: 4px;
}
.bubble.client {
  align-self: flex-end;
  background: var(--client);
  border-bottom-right-radius: 4px;
}
.bubble.referral {
  align-self: stretch;
  max-width: 100%;
  background: #fbeee9;
  border: 1px solid #ecccc3;
  color: #7a3a30;
  font-weight: 500;
}
.chip {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  background: var(--chip);
  color: #3f5c48;
  border-radius: 999px;
}
.closing-note {
  align-self: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.5rem 0;
  text-align: center;
}

.typing {
  display: flex;
  gap: 4px;
  padding: 0 0.5rem 0.4rem;
}
.typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
  animation: blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 0.8; } }

.composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.6rem 0;
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 0.6rem;
  margin: 0 -1rem -1rem;
}
.composer textarea {
  flex: 1;
  resize: none;
  max-height: 8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 1rem;
  background: #fbf9f5;
}
.pause { background: #d9bd7d; color: #4a3a12; }
.send { flex-shrink: 0; }

/* --- Check-in ------------------------------------------------------------ */
.checkin { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.5rem 0; }
.checkin .q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
}
.checkin .q .toggle { display: flex; gap: 0.3rem; }
.checkin .q .toggle button {
  padding: 0.35rem 0.9rem;
  background: #efeae1;
  color: var(--ink);
}
.checkin .q .toggle button.on { background: var(--accent); color: #fff; }
.result {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--surface);
  border-radius: 12px;
}

/* --- My week ------------------------------------------------------------- */
.week { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.75rem; }
.week .band {
  font-size: 1.25rem;
  font-weight: 600;
}
.week .metrics { display: flex; gap: 0.75rem; }
.week .metric {
  flex: 1;
  background: var(--surface);
  border-radius: 12px;
  padding: 0.9rem;
  text-align: center;
}
.week .metric .n { font-size: 1.6rem; font-weight: 600; display: block; }
.week .metric .l { color: var(--muted); font-size: 0.85rem; }
.week .insight {
  background: var(--surface);
  border-radius: 12px;
  padding: 1rem;
}
.week .insight .prompt { margin-top: 0.6rem; color: var(--accent); font-weight: 500; }

/* --- My journey (inner-work map) ---------------------------------------- */
/* A warm vertical timeline: a continuous line runs down the left, each event
   hangs a marker off it, and belief work reads as a before -> after in the
   client's own words. Newest is at the top (the list is rendered reversed). */
.journey { margin-top: 0.75rem; }
.journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* The spine of the timeline. */
.journey-list::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--line);
}
.journey-event {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding: 0 0 1.1rem 0;
}
.journey-marker {
  flex: 0 0 1.7rem;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.journey-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.85rem;
  box-shadow: 0 0 0 4px var(--bg, #fff);
}
/* Per-kind accents - all warm, none reads as a grade. */
.journey-event.kind-belief_surfaced .journey-icon { background: #c9a26b; }
.journey-event.kind-reframe_completed .journey-icon { background: var(--accent); }
.journey-event.kind-band_change .journey-icon { background: #7c9885; }
.journey-event.kind-pause_milestone .journey-icon { background: #6d5c8a; }
.journey-event.kind-practice .journey-icon { background: #6d5c8a; }
.journey-event.kind-first_checkin .journey-icon { background: #b08968; }
.journey-event.kind-streak_milestone .journey-icon { background: #cc7a51; }
.journey-card {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
}
.journey-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.journey-kind {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.journey-date { font-size: 0.78rem; color: var(--muted); }
.journey-title { margin-top: 0.25rem; color: var(--ink); font-weight: 500; }
.journey-transform {
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: #faf7f1;
  border-radius: 10px;
}
.journey-from, .journey-to { display: flex; gap: 0.5rem; align-items: baseline; }
.journey-from { color: var(--muted); }
.journey-to { color: #3f5c48; font-weight: 500; }
.journey-tag {
  flex: 0 0 2.4rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.journey-arrow {
  color: var(--accent);
  text-align: center;
  margin: 0.15rem 0;
  font-size: 0.9rem;
}
.journey-detail { margin-top: 0.4rem; color: var(--muted); font-size: 0.9rem; }

/* --- Practice (roleplay) ------------------------------------------------- */
/* A deliberately distinct accent (deep plum) so practice is never mistaken for
   the sage coaching chat. The banner is persistent and always names the role. */
:root {
  --practice: #6d5c8a;        /* deep plum, distinct from the sage accent */
  --practice-soft: #efe9f4;   /* practice counterpart bubble */
  --practice-client: #e5ddf0; /* practice client bubble */
}

.rp-intro, .rp-scenario, .rp-live, .rp-debrief { flex: 1; }
.rp-live { display: flex; flex-direction: column; }

.rp-banner {
  background: var(--practice);
  color: #fff;
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
#rp-banner-text { flex: 1; }

.rp-card { margin: 0.5rem 0 1rem; }
.rp-card dt {
  color: var(--practice);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.75rem;
}
.rp-card dd { margin: 0.15rem 0 0; }

/* Practice bubbles: plum accent, so the eye never confuses them with chat. */
.rp-bubble.counterpart {
  align-self: flex-start;
  background: var(--practice-soft);
  border-bottom-left-radius: 4px;
  border-left: 3px solid var(--practice);
}
.rp-bubble.client {
  align-self: flex-end;
  background: var(--practice-client);
  border-bottom-right-radius: 4px;
}
.rp-bubble.referral {
  align-self: stretch;
  max-width: 100%;
  background: #fbeee9;
  border: 1px solid #ecccc3;
  color: #7a3a30;
  font-weight: 500;
}

/* Wrap-up now lives in the banner: a compact, always-visible secondary action
   (styled as a ghost button but tuned to read as secondary against the plum
   banner) so it never scrolls out of reach on mobile or desktop. */
.rp-wrapup {
  flex-shrink: 0;
  margin: 0;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.rp-wrapup:hover { filter: brightness(1.1); }

.rp-debrief .rp-section { margin: 0.75rem 0; }
.rp-debrief .rp-section strong { color: var(--practice); }
.rp-debrief ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.rp-debrief li { margin: 0.25rem 0; }
.rp-edge {
  background: var(--surface);
  border-left: 3px solid var(--practice);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin: 0.75rem 0;
}
.rp-edge strong { color: var(--practice); display: block; margin-bottom: 0.2rem; }
.rp-encourage { color: var(--practice); font-weight: 500; margin-top: 0.75rem; }

/* --- Voice (pilot preview) ---------------------------------------------- */
/* The gate lives in the top bar; the mic sits in the composer; the stop-speaking
   control floats in only while a reply is read aloud. All strictly opt-in. */
.voice-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  padding: 0.5rem 0 0.15rem;
  font-size: 0.82rem;
}
.voice-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink);
  font-weight: 500;
}
.voice-switch input { accent-color: var(--accent); }
.voice-note { color: var(--muted); }

.mic {
  flex-shrink: 0;
  background: #efeae1;
  color: var(--ink);
  padding: 0.6rem 0.8rem;
  line-height: 1;
}
.mic.listening {
  background: var(--error);
  color: #fff;
  animation: mic-pulse 1.2s infinite ease-in-out;
}
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.mic-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
}

.voice-stop {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  z-index: 5;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  box-shadow: 0 4px 16px rgba(80, 70, 55, 0.25);
}

/* --- Space of Choice ----------------------------------------------------- */
/* The entry point: a calm, full-width invitation above the chat, deliberately
   larger and softer than the small composer Pause button so it never reads as
   the same action. */
.soc-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin: 0.25rem 0 0.5rem;
  background: linear-gradient(135deg, #7c9885, #6f8fa0);
  color: #fff;
  box-shadow: 0 4px 16px rgba(80, 70, 55, 0.12);
}
.soc-entry-title { font-size: 1.05rem; font-weight: 600; }
.soc-entry-sub { font-size: 0.85rem; opacity: 0.92; font-weight: 400; }

/* The full-screen takeover: a still, uncluttered field with one step at a
   time. A gentle wash so the app behind it is fully covered. */
.soc-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: radial-gradient(circle at 50% 35%, #eef3ee, #e3e9ea 70%);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}
.soc-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  padding: 0.4rem 0.7rem;
}
.soc-close:hover { filter: none; color: var(--ink); }

.soc-stage, .soc-done {
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.soc-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #3f5c48;
}
.soc-text {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
}
.soc-hint { font-size: 0.85rem; margin: 0.5rem 0 0; }

/* Step dots: quiet progress, filling as the practice moves. */
.soc-dots { display: flex; gap: 0.4rem; }
.soc-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
}
.soc-dots span.on { background: var(--accent); }

/* Breathing cue: a CSS-only pulsing orb, on the breathe step only. The 15s
   step gives roughly two slow expand/contract cycles to breathe along with. */
.soc-breath { height: 120px; display: flex; align-items: center; justify-content: center; }
.soc-orb {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #a7c4b0, #7c9885);
  box-shadow: 0 0 40px rgba(124, 152, 133, 0.5);
  animation: soc-breathe 7.5s ease-in-out infinite;
}
.soc-orb-still { animation: none; transform: scale(1); }
@keyframes soc-breathe {
  0%, 100% { transform: scale(0.7); opacity: 0.75; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .soc-orb { animation: none; }
}

.soc-done-text { font-size: 1.15rem; line-height: 1.6; margin: 0; }

@media (min-width: 42rem) {
  body { font-size: 16px; }
}

/* --- Growth sparkline + line chart + momentum (pure inline SVG) ---------- */
/* The roster sparkline sits beside the score chip: a small dated trend line. */
.spark {
  vertical-align: middle;
  margin-left: 0.5rem;
}
.spark-line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.spark-dot { fill: var(--accent); }

/* The drill-in growth plot: cumulative, earned, never-decaying trend. */
.growth-plot {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  margin: 0.4rem 0 0.9rem;
}
.growth-chart { display: block; }
.growth-line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.growth-dot { fill: var(--accent); }
.growth-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* Momentum: rhythm, never a grade. Framed warmly and set apart from growth. */
.momentum {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.6rem 0.85rem;
  margin: 0.75rem 0;
}
.momentum-title {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.momentum-value {
  display: block;
  font-weight: 600;
  margin-top: 0.15rem;
}
.momentum-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
/* A quiet week is de-saturated, not alarmed - never a red "failure" cue. */
.momentum-quiet { border-left-color: #b9b2a6; }
.momentum-building { border-left-color: #c2a86a; }
.momentum-strong { border-left-color: var(--accent); }

/* Weekly engagement: one point per engaged day, 0..7, plotted week over week.
   Concrete and warm - a short bar is that week's rhythm, never a low grade. */
.weekly-engagement {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  margin: 0.4rem 0 0.9rem;
}
.weekly-bars { display: block; }
.weekly-bar { fill: var(--accent); }
.weekly-labels {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.15rem 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.weekly-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
/* Roster engagement cell: concrete points/7, quietly emphasized. */
.engaged-cell { font-variant-numeric: tabular-nums; }