/* ============================================================
   checkin-conversation.css
   css/components/checkin-conversation.css
   28 Sep 2026 v10

   v10 - SMOOTH-P1. Inline answer rows (.ci-chips) for the three-question
   check-in. Same surfaces and borders as .ci-choice, so the contrast
   measured in v9 below still holds: label #E2E8F0 on --color-bg,
   border --color-text-muted (5.59:1 on #334155, well over 3:1).
   Targets 48px high. Focus ring as .ci-choice.

   v9 - A11Y-1 landed, so v8's measurements below are now out of date and
   are corrected here rather than left to rot. --color-text-secondary is
   now #B9C6D6 and --color-text-muted #B2C0D0, which means:
     label   #E2E8F0 on #1E293B = 11.87:1  (unchanged)
     sub     #B9C6D6 on #1E293B =  8.44:1  (was 7.24)
     border  #B2C0D0 on #334155 =  5.59:1  (was 4.04)
   All still comfortably AA, and the border still carries the 1.4.11
   boundary.

   v8's reasoning is kept below because it is still WHY this component is
   shaped the way it is -- but note the failure it describes is now fixed
   at the token level, so the choice to recess rather than elevate is no
   longer forced. It stays because it is still the better call: a recessed
   surface gives the sub-line 8.44:1 instead of the ~5:1 an elevated one
   would, and the hover-must-not-lighten constraint disappears entirely.
   Do not "simplify" this back onto --color-bg-elevated without checking
   what that does to the sub-line first.

   12 Aug 2026 v8

   v8 - DIC-1, the drop-in coach question. New .ci-choice stacked choice
   buttons for the check-in panel. (Measurements in this entry were
   correct at the time and are superseded by v9 above.)

   ACCESSIBILITY NOTE, and the reason this is not a copy of
   coach-proposal.css's .cp-missed-offer__btn, which is the nearest
   existing pattern. That pattern puts --color-text-muted (#A0B0C0) on
   --color-bg-elevated (#3E4C63), which measures 3.91:1 -- below the
   4.5:1 AA floor for normal text. --color-text-secondary (#A8B8CC) on
   the same surface is 4.30:1 and also fails. bg-elevated is simply too
   light a surface for either muted token.

   So .ci-choice recesses instead of elevating: surface --color-bg
   (#1E293B) against the --color-bg-card (#334155) panel. Measured:
     label   #E2E8F0 on #1E293B = 11.87:1  (AA, AAA)
     sub     #A8B8CC on #1E293B =  7.24:1  (AA, AAA)
   The surface-to-panel step is only 1.41:1, well under 1.4.11's 3:1 for
   component boundaries, so the border carries the boundary instead:
   --color-text-muted (#A0B0C0) measures 4.04:1 against the panel.

   Hover deliberately does NOT change the background. Lightening the
   surface on hover would drop the sub-line back under 4.5:1, so hover
   moves the border only.

   11 Aug 2026 v7

   v7 - .ci-thread trailing space raised to 70vh so the newest coach
   message can actually scroll to the top of the viewport.

   04 Aug 2026 v6

   v6 — .ci-quality-chips (feeling-word selector) converted from
   flex+flex-wrap to a 2-column grid. Found via screenshot: "energised"/
   "motivated"/"confident" etc. were breaking across 3 ugly lines each
   inside a too-narrow flex:1 chip. A 2-column grid gives each chip
   roughly double the width — Graeme: "perhaps we use more lines to
   make it fit ok" — more rows, not more mid-word breaks inside one
   cramped chip. .ci-quality-chip's now-meaningless flex:1 removed.

   v5 — Pain Input Redesign. New .ci-slider-wrap--condition (compact
   per-condition variant of the Energy/Mood slider styling, since
   several stack in one panel) plus colour-coded .ci-value-label--none/
   mild/moderate/severe. .ci-pain-chip/.ci-pain-chips removed entirely —
   confirmed unused anywhere in js/ once checkin.js's slider conversion
   landed; this is the component both of today's earlier chip-overflow
   patches (v3, v4) were fixing, now retired rather than a third patch
   on top of two patches.

   v4 — Two more overflow fixes, same day, found via Graeme screenshots.
   (1) .ci-pain-chip's v3 min-width:0 fix wasn't quite complete — a
   single unbreakable word like "Moderate" has nowhere to wrap without
   overflow-wrap:break-word, so it could still overflow. Added.
   (2) .ci-quality-chip (feeling-word selector, e.g. "energise",
   "confident") had the same underlying problem but couldn't use the
   same min-width:0 fix — it deliberately sets min-width:44px for WCAG
   2.2 touch-target compliance, kept as-is. Added overflow-wrap:break-word
   there instead, which fixes the overflow without touching the
   accessibility-required minimum.

   v3 — .ci-pain-chip text-overflow fix, found on-device (screenshot,
   Graeme, testing the Home Nav Phase A threshold fix). "Moderate" was
   overflowing its pill into the neighbouring "Severe" chip instead of
   wrapping. Root cause: flex items default to min-width:auto, so a
   flex:1 chip won't shrink below the intrinsic width of an unbreakable
   word. Added min-width:0 so chips can shrink and wrap to two lines;
   .ci-pain-chips' existing align-items:stretch (flex default) keeps
   all four chips in a row the same height either way. checkin-mini.js's
   equivalent chips (.ci-quality-chip) already use flex-wrap on the
   container instead and aren't affected — confirmed, not touched.

   10 Jul 2026 v2

   v2 — checkin-mini.js styling fix. That file was rendering fully
   unstyled since checkin.js's 01 Jul conversational rewrite (see
   checkin-mini.js v2 changelog for the full explanation). Its sliders,
   pain chips, and location cards now reuse .ci-slider, .ci-quality-chip,
   and .ci-time-card directly — no new rules needed for those. The two
   genuinely new pieces added here: .checkin-step-header / .checkin-
   step-dots (a simple step-progress indicator with no existing
   equivalent anywhere in the app) and .mini-pain-list / .mini-pain-row
   layout (condition label + chip row, structurally new even though the
   chips themselves are reused). Kept deliberately minimal — reuses the
   same design tokens (--color-primary, --color-border, --space-*)
   already used throughout this file rather than introducing new values.

   01 Jul 2026 v1
   Conversational check-in thread — Option A pattern.
   Bubble colours match OB-THREAD confirmed values (Appendix G):
     Active coach:  bg #162A2A  text #E8F4F4
     Faded coach:   bg #0A1414  text #8FA8A8  (56/765 RGB diff)
     Text contrast: 7.42:1 — WCAG AA confirmed.
   All interactive elements: min 44px touch target (WCAG 2.2).
   prefers-reduced-motion: all transitions collapsed to 0ms.
   ============================================================ */

/* ── View container ─────────────────────────────────────────── */

.ci-view {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg-deep);
}

/* ── Thread scroll area ─────────────────────────────────────── */

.ci-thread {
  flex: 1;
  overflow-y: auto;

  /* SCROLL HEADROOM (11 Aug 2026). Graeme: "The coach's conversation in
     check-in sits at the bottom of the page, which means I can't read
     the top of the latest message. I have to scroll back up every time.
     I'd like to see the top of the message so I only ever scroll down."
     _scrollToNewElement() already asks for block:"start", which is
     correct. It could not deliver it: a browser can only scroll as far
     as the content allows, and with a small bottom padding there was
     nothing beneath the newest bubble to scroll against, so it settled
     at the bottom of the range instead of rising to the top.
     70vh of trailing space guarantees any new message can reach the
     top of the viewport, including the last one in the thread. The
     space is never seen -- the thread is scrolled, not read to the end. */
  /* CI-SPACE, 12 Aug 2026. Was 70vh. That guaranteed any message could
     reach the TOP of the viewport, which solved the 11 Aug complaint and
     created a new one: short messages were dragged to the ceiling with
     half a screen of nothing beneath them.
     46vh is the panel clearance -- enough for the sliding panel to open
     over empty space rather than over the conversation. checkin.js's
     PANEL_CLEARANCE must match this number; it decides per message
     whether to anchor the top or the bottom, which is what makes the
     smaller padding safe. */
  padding: var(--space-5) var(--space-4) 46vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  -webkit-overflow-scrolling: touch;
}

/* ── Ready button (11 Aug 2026) ─────────────────────────────────
   Advances the conversation on a tap rather than a timer. Aligned
   left with the coach's bubbles, because it belongs to the coach's
   turn -- it is the person saying "go on", not answering anything. */

.ci-ready {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-2);
}

.ci-ready__btn {
  min-height: 44px;                    /* WCAG 2.2 AA touch target */
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
}

/* ── Coach bubble ───────────────────────────────────────────── */

.ci-bubble {
  max-width: 85%;
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ci-bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ci-bubble--coach {
  align-self: flex-start;
  background: #162A2A;
  color: #E8F4F4;
  border-bottom-left-radius: var(--radius-sm);
}

.ci-bubble--coach p {
  margin: 0;
  line-height: var(--leading-relaxed);
  font-size: var(--text-base);
}

/* Faded past state — confirmed contrast values from Appendix G */
.ci-bubble--coach.is-past {
  background: #0A1414;
  color: #8FA8A8;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ── User bubble ────────────────────────────────────────────── */

.ci-bubble--user {
  align-self: flex-end;
  background: var(--color-primary);
  color: var(--color-bg-deep);
  border-bottom-right-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-relaxed);
}

/* User bubbles never fade — they are the permanent record. */

/* ── Action buttons (summary step) ─────────────────────────── */

.ci-actions {
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ci-actions.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Typing indicator ───────────────────────────────────────── */

.ci-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-3) var(--space-4);
  background: #162A2A;
  border-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-sm);
  align-self: flex-start;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ci-typing.is-visible {
  opacity: 1;
}

.ci-typing-dot {
  width: 7px;
  height: 7px;
  background: #4A9E9E;
  border-radius: 50%;
  animation: ci-typing-pulse 1.2s infinite ease-in-out;
}

.ci-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ci-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ci-typing-pulse {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%            { transform: scale(1);   opacity: 1;   }
}

/* ── Overlay (behind input panel) ──────────────────────────── */

.ci-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ci-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Input panel (slides up from bottom) ───────────────────── */

.ci-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: var(--color-bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-3) var(--space-5) var(--space-10);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ci-panel.is-open {
  transform: translateY(0);
}

/* Drag handle (decorative) */
.ci-panel-handle {
  width: 40px;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-5);
}

/* Panel question text */
.ci-panel-q {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0 0 var(--space-5);
  line-height: var(--leading-relaxed);
}

/* ── Slider ─────────────────────────────────────────────────── */

.ci-slider-wrap {
  margin-bottom: var(--space-5);
}

.ci-value-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ci-value-emoji {
  font-size: calc(2rem * var(--user-text-scale, 1));
  line-height: 1;
}

.ci-value-num {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  min-width: 2ch;
}

.ci-value-label {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.ci-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  outline: none;
  margin: var(--space-2) 0;
}

.ci-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(45, 212, 191, 0.45);
  transition: transform 0.15s ease;
}

.ci-slider::-webkit-slider-thumb:active { transform: scale(1.15); }

.ci-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.ci-slider:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

.ci-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── Condition pain sliders (04 Aug 2026) ───────────────────────
   Per-condition compact variant of .ci-slider-wrap/.ci-value-row above —
   multiple of these stack in one panel (one per logged condition), so
   they need less vertical weight than the single full-panel Energy/
   Mood sliders these rules were originally built for. Replaces the old
   4-button .ci-pain-chip row entirely (see checkin-conversation.css v3/
   v4 changelog for that component's history — retired, not deleted,
   in case checkin-mini.js's .ci-quality-chip pattern is ever wanted
   back for a different input). */

.ci-slider-wrap--condition {
  margin-bottom: var(--space-3);
}

.ci-slider-wrap--condition .ci-value-row {
  margin-bottom: var(--space-2);
}

.ci-slider-wrap--condition .ci-value-num {
  font-size: var(--text-xl);
}

.ci-value-label--none     { color: #10B981; font-weight: var(--font-semibold); }
.ci-value-label--mild     { color: #F59E0B; font-weight: var(--font-semibold); }
.ci-value-label--moderate { color: #F97316; font-weight: var(--font-semibold); }
.ci-value-label--severe   { color: #EF4444; font-weight: var(--font-semibold); }

/* ── Sleep adjuster ─────────────────────────────────────────── */

.ci-sleep-adjuster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.ci-sleep-btn {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.ci-sleep-btn:hover  { border-color: var(--color-primary); color: var(--color-primary); }
.ci-sleep-btn:active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg-deep); transform: scale(0.95); }

.ci-sleep-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ci-sleep-num {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  min-width: 3ch;
  text-align: center;
}

.ci-sleep-unit {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* ── Sleep quality chips ────────────────────────────────────── */

.ci-quality-wrap {
  margin-bottom: var(--space-4);
}

.ci-quality-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.ci-quality-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-3);
}
/* fix, 04 Aug 2026: was display:flex + flex-wrap with flex:1 on each
   of 6 chips — combined with the earlier overflow-wrap:break-word fix,
   the browser kept cramming all 6 onto one row and letting long words
   ("energised", "motivated", "confident") break awkwardly across 3
   lines instead of properly wrapping the layout. A 2-column grid gives
   each chip roughly double the width, so words fit in 2 lines at most
   and the break points land at sensible places. Graeme: "perhaps we
   use more lines to make it fit ok" — more rows, not more line-breaks
   within one cramped chip. */

.ci-quality-chip {
  /* flex:1 removed, 04 Aug 2026 — this is a grid item now (see
     .ci-quality-chips above), flex properties have no effect here. */
  padding: var(--space-3) var(--space-2);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 48px;
  min-width: 44px; /* WCAG 2.2 minimum touch target — kept, not reduced */
  overflow-wrap: break-word; /* fix, 04 Aug 2026: unbreakable long words
    ("energise", "confident") were overflowing past the chip's edge into
    the next chip instead of wrapping — .ci-quality-chips' flex-wrap
    wraps whole chips onto a new row fine, but flex:1 still computes a
    per-chip width too narrow for a single long word with nowhere to
    break. This lets a long word wrap mid-word within its own chip
    rather than overflow; 44px min-width preserved for touch target. */
  line-height: 1.2;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.ci-quality-chip:hover   { border-color: var(--color-primary); }
.ci-quality-chip.selected { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg-deep); }
.ci-quality-chip:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* ── Conditions ─────────────────────────────────────────────── */

.ci-condition-row {
  margin-bottom: var(--space-4);
}

.ci-condition-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

/* .ci-pain-chip / .ci-pain-chips removed 04 Aug 2026 — the 4-button
   discrete pain input they styled was replaced by the condition pain
   slider above (.ci-slider-wrap--condition), part of today's Pain
   Input Redesign. Confirmed unused anywhere in js/ before removing —
   was purely dead weight after checkin.js's conversion. */

/* ── Available time grid ────────────────────────────────────── */

.ci-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.ci-time-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 64px;
  -webkit-tap-highlight-color: transparent;
}

.ci-time-card:hover  { border-color: var(--color-primary); background: rgba(45, 212, 191, 0.08); }
.ci-time-card:active { transform: scale(0.97); }

.ci-time-card.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.ci-time-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.ci-time-card.selected .ci-time-label { color: var(--color-bg-deep); }

.ci-time-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.ci-time-card.selected .ci-time-sub { color: var(--color-bg-deep); opacity: 0.8; }
.ci-time-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* ── checkin-mini.js: step header and progress dots (v2 — new) ─────── */
/* No existing equivalent anywhere in the app — kept deliberately
   minimal, same tokens as everything else in this file. */

.checkin-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) 0;
}

.checkin-step-dots {
  display: flex;
  gap: var(--space-2);
}

.checkin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s ease;
}

.checkin-dot.active {
  background: var(--color-primary);
  transform: scale(1.2);
}

.checkin-dot.done {
  background: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .checkin-dot { transition: none; transform: none; }
}

/* ── checkin-mini.js: question wrap and pain list layout (v2 — new) ── */

.checkin-question-wrap {
  padding: var(--space-5) var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.mini-pain-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.mini-pain-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mini-pain-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ci-bubble,
  .ci-actions,
  .ci-typing,
  .ci-typing-dot,
  .ci-overlay,
  .ci-panel { transition: none !important; animation: none !important; }
}

/* ── Narrow screens ─────────────────────────────────────────── */

@media (max-width: 340px) {
  .ci-time-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   DROP-IN COACH QUESTION (DIC-1) - 12 Aug 2026 v9
   Stacked choice buttons. See the contrast working in the file
   header before changing any colour here.
   ============================================================ */

.ci-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ci-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-4);
  min-height: 64px;              /* comfortably over the 44px target floor */
  background: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.ci-choice__label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-normal);
  white-space: normal;           /* .btn sets nowrap; these labels wrap */
}

.ci-choice__sub {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  white-space: normal;
}

/* Border only. Pre-A11Y-1 this was forced: lightening the background put
   the sub-line under 4.5:1. That constraint has gone, but border-only
   hover is kept -- it is quieter, and it keeps the sub-line at 8.44:1. */
.ci-choice:hover {
  border-color: var(--color-primary);
}

.ci-choice:active {
  transform: scale(0.99);
}

.ci-choice:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ci-choice {
    transition: none;
  }
  .ci-choice:active {
    transform: none;
  }
}

/* ============================================================
   PURPOSE-ASK, 16 Sep 2026. The suggested option.

   Graeme: "Coach should make a suggestion based on all the pain
   data etc... and these are gold marked."

   Gold, matching SUGGESTED FOR TODAY on the proposal cards, so
   the same idea looks the same in both places.

   The mark is carried by the badge, the border weight AND the
   word "Suggested" — never by colour alone (1.4.1). The other
   options keep their normal styling and remain fully
   selectable: this is a recommendation, not a default.
   ============================================================ */

.ci-choice--rec {
  border-color: var(--color-warning, #fbbf24);
  border-width: 2px;
  position: relative;
}

.ci-choice__rec {
  display: inline-block;
  margin-bottom: var(--space-1);
  padding: 2px 10px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-warning, #fbbf24);
  color: #412402;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
}

@media (prefers-contrast: more) {
  .ci-choice--rec { border-width: 3px; }
}


/* ============================================================
   SMOOTH-P1, 28 Sep 2026. Inline answers: one tap answers the
   coach's question. Wraps on narrow screens; never scrolls sideways.
   ============================================================ */

.ci-chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ci-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ci-chip {
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--font-medium, 500);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.ci-chip:hover { border-color: var(--color-primary); }
.ci-chip:focus-visible,
.ci-chips__extra:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.ci-chips__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.ci-chips__extra {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--space-1);
  background: none;
  border: 0;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .ci-chip { transition: none; }
}