/* Planning Block Choice Buttons Styling */

/* Composer choice type scale (rev-f9kno.7). ONE token drives the choice
   title, the pros/cons detail, and the Send label so they cannot drift apart:
   the operator's requirement is that ALL choice-text — composer rows AND the
   in-story planning-block buttons — render at the SAME size as the narrative
   prose (`#story-content p`, `font-size: 16px` inherited from <body>). The
   token lives at 1rem (== 16px) so this stays a single source of truth; if
   you ever need to step it down again, change ONLY this line. Historically
   this was set to 12.8px to make the composer row feel compact against the
   textarea; the operator reversed that decision on 2026-08-18 ("planning
   block and custom action text too small — make it same size as narrative
   text"), so the value is back at the body baseline. */
:root {
  --composer-choice-font: 1rem;
}


/* Thinking text paragraph styling */
.planning-block-thinking {
  margin-bottom: 0.5rem;
}

/* Aggressively collapse vertical space below planning block choices */
.planning-block-choices {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.planning-block-choices + div,
.planning-block-choices + form,
.planning-block-choices + input,
.planning-block-choices + .form-group,
.planning-block-choices + .input-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove margin from parent if present */
.planning-block-choices:parent {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Individual choice button */
.choice-button {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem;
  text-align: left;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
  color: #212529;
  box-shadow: none;
}

.choice-button:last-child {
  margin-bottom: 0.1rem;
}

/* Per-row disclosure (E1a, rev-f9kno.6, supersedes C4's always-expanded
   compact pros/cons line from rev-f9kno.2): each choice defaults to ONE
   line (title only); a sibling chevron button reveals pros/cons for THAT
   row only, independent of the others (ARIA APG Disclosure pattern, not
   the stricter exclusive-open Accordion -- multiple rows may be open at
   once). Unscoped so history and the composer -- which render the SAME
   markup via parsePlanningBlocks -- both get it; the inline-choices
   rules (.inline-choices .choice-row ...) handle the
   width/divider differences, same pattern the old
   .choice-body block used. */
.choice-row {
  margin-bottom: 0.5rem;
}

.choice-row:last-child {
  margin-bottom: 0.1rem;
}


.choice-head {
  display: flex;
  align-items: center;
}

/* The title button keeps the existing .choice-button visual language
   (background/hover/active/focus/disabled from the base rule below and the
   composer override further down) -- only its width changes, from 100% to
   flex:1, since it now shares its row with .chev-btn. */
.choice-row .choice-select {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-bottom: 0;
}

.ctitle {
  font-size: var(--composer-choice-font, 1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* When expanded, line-wrap the choice title so long choice texts are not cutoff */
.choice-row.open .ctitle {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.chev-btn {
  flex: 0 0 auto;
  width: 34px;
  align-self: stretch;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted, #8a86a8);
  cursor: pointer;
  font-size: 11px;
}

.chev-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #f0ecff);
}

.chev-btn i {
  transition: transform 0.15s;
  display: inline-block;
}

.choice-row.open .chev-btn i {
  transform: rotate(180deg);
}

.choice-detail {
  display: none;
  padding: 0 12px 9px 40px;
  /* PARITY with the choice title (rev-f9kno.7) — same token, never a literal. */
  font-size: var(--composer-choice-font, 1rem);
  color: var(--text-muted, #8a86a8);
}

.choice-row.open .choice-detail {
  display: block;
}

.choice-detail b {
  color: var(--text-secondary, #b8b4cf);
  font-weight: 600;
}

.choice-detail .pro {
  color: #86efac;
}

.choice-detail .con {
  color: #fca5a5;
}

.choice-button:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.choice-button:active {
  background: #dee2e6;
}

/* Choice ID styling */
.choice-id {
  font-weight: bold;
  color: #0d6efd;
  margin-right: 0.5rem;
  font-family: 'Courier New', monospace;
}

/* Choice description */
.choice-description {
  color: #495057;
}

/* Disabled state when waiting for response */
.choice-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #e9ecef;
}

/* Custom choice button styling */
.choice-button-custom {
  background: linear-gradient(135deg, #f0f4ff 0%, #e0e8ff 100%);
  border-color: #6c757d;
  border-style: dashed;
}

.choice-button-custom:hover {
  background: linear-gradient(135deg, #e0e8ff 0%, #d0d8ff 100%);
  border-color: #495057;
}

.choice-button-custom .choice-id {
  color: #6c757d;
}

.choice-button-custom .choice-description {
  font-style: italic;
  color: #6c757d;
}

/* Custom action button - always shown at bottom of planning block choices */
.custom-action-button {
  background: transparent;
  border-style: dashed;
  border-color: #adb5bd;
  color: #6c757d;
  font-style: italic;
  margin-top: 0.25rem;
}

.custom-action-button:hover {
  background: #f8f9fa;
  border-color: #6c757d;
  color: #495057;
}

/* Error state for planning blocks */
.planning-block-error {
  background-color: #fff3cd;
  border: 1px solid #ffecb5;
  color: #856404;
  padding: 1rem;
  margin: 0.5rem 0;
  border-radius: 0.25rem;
}

.planning-block-error pre {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 0.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Styling for malformed content within error blocks */
.malformed-content {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  margin: 0.5rem 0;
  border-radius: 0.25rem;
  border-left: 4px solid #ffecb5;
  font-family: monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Responsive design */
@media (max-width: 768px) {
  .choice-button {
    padding: 0.08rem 0.25rem;
    font-size: var(--composer-choice-font, 1rem);
    margin-right: 0.25rem;
    margin-bottom: 0.15rem;
  }

  .choice-id {
    font-size: var(--composer-choice-font, 1rem);
  }

  .planning-block-choices {
    padding: 0.15rem;
  }
}



/* Collapsed (no live choices this turn): no border, no background — the
   input-group underneath falls back to its normal Bootstrap look, byte-for-
   byte what shipped before this feature existed. */
.composer-row {
  margin-bottom: 0.35rem;
}

.composer-row > .composer-stack {
  margin-bottom: 0;
}

/* E1a action bar (rev-f9kno.5, supersedes C4's Send-only full-width-below-
   dock row from rev-f9kno.1): Send now lives with the avatar + mode toggles
   in one bar, separate from the auto-submit numbered choices above -- see
   the HTML comment above #composer-avatar-slot in index.html for the full
   rationale. Segmented-pill toggle CSS below matches the confirmed E1a mock
   (Claude Design project 386f01e8, e1-variations.html), adapted to real
   radio inputs via Bootstrap's own .btn-check pattern instead of the mock's
   plain <button> toggles. */
.action-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
}

.toggle-group {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color, rgba(168, 85, 247, 0.25));
  border-radius: 10px;
  padding: 0;
  gap: 2px;
}

.toggle-group .toggle-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  padding: 0 0.6rem;
  border: none;
  background: transparent;
  color: var(--text-muted, #8a86a8);
  font-size: 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}

.toggle-group .btn-check:checked + .toggle-pill {
  background: rgba(168, 85, 247, 0.3);
  color: var(--text-primary, #f0ecff);
  font-weight: 700;
}

.toggle-group .btn-check:focus-visible + .toggle-pill {
  outline: 2px solid rgba(155, 89, 255, 0.55);
  outline-offset: 1px;
}

.composer-send {
  flex: 0 0 auto;
  margin-left: 0;
  min-height: 44px;
  height: 44px;
  padding: 0 1.2rem;
  font-size: var(--composer-choice-font, 1rem);
  font-weight: 700;
  border-radius: 10px;
}

#interaction-form .composer-send {
  position: static;
  overflow: visible;
}

.composer-send:disabled {
  opacity: 0.45;
}

.composer-stack {
  display: block;
  margin-bottom: 0.35rem;
  position: relative;
  border: 1px solid rgba(168, 85, 247, .45);
  border-radius: 12px;
  background: rgba(22, 26, 53, .9);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .45);
}

/* Docked (choices present): ONE bordered surface around choices + textarea.
   Uses --border-color (not --accent-color): the approved Claude Design mock
   ("Real WorldAI fantasy-theme tokens, lifted from themes/fantasy.css") used
   rgba(168,85,247,.35) for this outer border -- the theme file's own comment
   is explicit: "Gold for text/links. Purple for borders, glows, button bg." */
.composer-stack.composer-stack--has-choices {
  border: 1px solid rgba(168, 85, 247, .45);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(22, 26, 53, .9);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .45);
}

/* ---------- 2. Read-only history choices ---------- */
/* A wrapper holding only history adds no inset: the list sits on the entry's left edge. */
.planning-block:has(> .past-choices:only-child) {
  padding: 0;
  margin: 0;
  border-left-width: 0;
  border-radius: 10px;
}
.past-choices {
  margin: .25rem 0 .5rem;
  padding: .5rem .75rem;
  white-space: normal;
  border: 1px dashed rgba(168, 85, 247, .25);
  border-radius: 10px;
}
.past-choices .past-label {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #8a86a8);
  margin-bottom: .3rem;
}
.past-choice {
  font-size: .88rem;
  color: var(--text-muted, #8a86a8);
  padding: .15rem 0;
  display: flex;
  gap: .45rem;
  align-items: baseline;
}
.past-choice.taken {
  color: var(--text-primary, #f0ecff);
  font-weight: 600;
}
.past-choice .pc-mark {
  width: 1rem;
  flex: 0 0 auto;
  color: var(--accent-color, #d4a843);
}

/* ---------- 3. Your move: inline, always-visible choices ---------- */
.your-move {
  margin-top: 0;
  margin-bottom: 0;
}
.turn-end {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .75rem 0 .5rem;
  color: var(--accent-color, #d4a843);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.turn-end::before, .turn-end::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(212, 168, 67, .4);
}
.your-move-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #f0ecff);
  margin: 0 0 .15rem;
}
.your-move-sub {
  font-size: .85rem;
  color: var(--text-secondary, #b8b4cf);
  margin: 0 0 .6rem;
}
.inline-choices {
  border: 1px solid rgba(168, 85, 247, .45);
  border-radius: 12px;
  background: rgba(22, 26, 53, .75);
  overflow: hidden;
  counter-reset: ch;
}
.inline-choices .choice-row {
  margin: 0;
  display: block;
}
.inline-choices .choice-row:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.inline-choices .choice-head {
  display: flex;
  align-items: stretch;
}
.inline-choices .choice-button {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  width: auto;
  min-width: 0;
  min-height: 52px;
  padding: .55rem .75rem .55rem 2.6rem;
  border: 0;
  background: transparent;
  color: var(--text-primary, #f0ecff);
  font-size: var(--composer-choice-font, 1rem);
  text-align: left;
  cursor: pointer;
  counter-increment: ch;
  position: relative;
  white-space: pre-wrap;
  margin-bottom: .5rem;
}
.inline-choices .choice-button::before {
  content: counter(ch);
  position: absolute;
  left: .75rem;
  top: .7rem;
  width: 1.35rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(168, 85, 247, .3);
  color: #e9d5ff;
  font-size: .78rem;
  font-weight: 800;
}
.inline-choices .choice-button:hover:not(:disabled) {
  background: rgba(168, 85, 247, .15);
}
#your-move .inline-choices .choice-button:disabled {
  opacity: .45;
}
.inline-choices .choice-button.sending .ctitle::after {
  content: "  Sending…";
  font-weight: normal;
  font-style: italic;
  opacity: 0.85;
}
.inline-choices .ctitle {
  font-weight: 700;
  color: #f0ecff;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  font-size: .98rem;
}
.inline-choices .cdesc {
  font-size: .84rem;
  color: var(--text-secondary, #b8b4cf);
  display: block;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.inline-choices .chev-btn {
  flex: 0 0 44px;
  width: 44px;
  height: auto;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .07);
  background: transparent;
  color: var(--text-muted, #8a86a8);
  cursor: pointer;
}
.inline-choices .chev-btn:hover {
  color: #fff;
  background: rgba(168, 85, 247, .15);
}
.inline-choices .choice-detail {
  display: none;
  padding: 0 .9rem .7rem 2.6rem;
  background: transparent;
  font-size: .84rem;
  color: var(--text-secondary, #b8b4cf);
  border-top: 0;
}
.choice-row.open .choice-detail {
  display: block;
}
.write-own-hint {
  font-size: .85rem;
  color: var(--text-secondary, #b8b4cf);
  margin: .6rem 0 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.write-own-hint__cta {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 44px;
  padding: .55rem .8rem;
  border: 1px dashed var(--accent-color, #d4a843);
  border-radius: 10px;
  background: rgba(212, 168, 67, .08);
  color: var(--text-primary, #f0ecff);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: text;
}
.write-own-hint__cta:hover,
.write-own-hint__cta:focus-visible {
  border-style: solid;
  background: rgba(212, 168, 67, .16);
}
.write-own-hint__cta .bi {
  flex: 0 0 auto;
  color: var(--accent-color, #d4a843);
  font-size: 1.15rem;
}
.write-own-hint__cta .bi-arrow-down {
  margin-left: auto;
}
.mode-off-hint {
  display: none;
  font-size: .85rem;
  color: var(--accent-color, #d4a843);
  margin: 0 0 1rem;
  background: rgba(212, 168, 67, .1);
  padding: 0;
  border-radius: 0;
  white-space: pre-wrap;
}
#first-turn-coach-dismiss {
  min-width: 44px;
  min-height: 44px;
}
.details-toggle {
  min-height: 44px;
  margin: 0 0 .35rem auto;
  padding: .45rem .75rem;
  border: 1px solid rgba(168, 85, 247, .35);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #b8b4cf);
  align-items: center;
  justify-content: center;
}
.sub-keys { display: none; }
@media (max-width: 1099px) {
  .details-toggle { display: none; }
}
@media (min-width: 1100px) {
  .sub-touch { display: none; }
  .sub-keys { display: inline; }
  /* Desktop exposes each choice's disclosure control. */
  #your-move .inline-choices .chev-btn { display: block; }
  #your-move .details-toggle { display: none; }
  #your-move .choice-row .ctitle {
    align-self: stretch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }
}
body.mode-off .your-move:not(.has-mode-keeping-choice) .mode-off-hint {
  display: block;
}

@media (min-width: 768px) {
  :root {
    --read-col: 62rem;
  }
  /* One centred reading column: the scroller's content box and the composer
     are the same width inside same-width boxes, so their left edges meet. */
  #story-content {
    padding-inline: max(1rem, (100% - 2px - var(--read-col)) / 2);
  }
  #interaction-form {
    box-sizing: border-box;
    width: calc(100% - 2rem - 2px);
    max-width: var(--read-col);
    margin-inline: auto;
  }
  .story-md, .your-move, .past-choices, .options-pending, .story-entry > * {
    max-width: var(--read-col);
  }
  .inline-choices .choice-button {
    min-height: 52px;
  }
  .toggle-group {
    flex: 0 0 auto;
  }
  .toggle-group .toggle-pill {
    flex: 0 0 auto;
    padding: 0 0.9rem;
  }
  .action-bar .spacer {
    flex: 1 1 auto;
  }
}

/* --- R2a Scroll-Gated Choices Peek Strip --- */
/* The "?" affordance beside each mode pill. Deliberately small and low-contrast
   so it reads as secondary to the pill itself, and deliberately a SEPARATE hit
   target so hovering or tapping a mode never summons a tooltip over the choice
   rows below it (rev-f9kno.15, Slack 2026-08-18). */
.toggle-group .toggle-help {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 0.25rem;
  background: transparent;
  border: 0;
  color: var(--text-muted, #8a86a8);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.toggle-group .toggle-help:hover,
.toggle-group .toggle-help:focus-visible {
  color: var(--text-primary, #f0ecff);
}



/* The seam between the LAST choice row and the textarea below: the same
   hairline divider, plus the input-group loses its own top border/radius so
   there is no visible double border where the two surfaces meet. */
.composer-stack--has-choices .composer-stack__input-group {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.composer-stack--has-choices .composer-stack__input-group #user-input {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 6px;
}

#interaction-form .composer-stack__input-group .own-action-label {
  position: absolute;
  left: .75rem;
  top: .75rem;
  z-index: 1;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(212, 168, 67, .22);
  color: var(--accent-color, #d4a843);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

/* The textarea is the free-form option. Keep its pencil marker in the same
   left gutter as the numbered choice badges. */
/* The composer's placeholder is the ONLY thing naming the free-form option, so
   it has to be readable. Bootstrap's default `.form-control::placeholder` is
   rgba(33,37,41,.75) — a LIGHT-theme dark grey — and nothing in the dark theme
   overrides it for #user-input (themes/fantasy.css only covers .campaign-wizard
   and .search-box). Composited on this surface that measures 1.05:1, i.e.
   invisible: the placeholder text has never actually been legible here, for
   either "What do you do?" or the custom-action wording. Set explicitly, scoped
   to the game input, so the label the operator asked for is something a player
   can actually read. */
#user-input::placeholder {
  color: rgba(226, 217, 243, 0.72);
  opacity: 1; /* Firefox lowers placeholder opacity by default */
  font-size: inherit;
  font-weight: inherit;
}

.composer-stack--has-choices #user-input::placeholder {
  color: rgba(233, 213, 255, 0.82);
}

/* The custom-action textarea starts compact and the input handler grows it up
   to 30% of the visual viewport. */
#user-input {
  height: 57px;
  min-height: 48px;
  max-height: 30svh;
  resize: none;
  font-size: var(--composer-choice-font, 1rem);
  line-height: 1.45;
  overflow-y: auto;
  position: static;
  background-image: none;
}

/* .composer-stack #user-input zeroes the textarea border, so the stack owns the ring. */
.composer-stack:focus-within {
  border-color: rgba(168, 85, 247, 0.85);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .45), 0 0 0 0.2rem rgba(168, 85, 247, 0.28);
}

#user-input:focus {
  /* The pencil marker is an unscaled absolute sibling. */
  transform: none;
  border-color: rgba(168, 85, 247, 0.85);
  box-shadow: 0 0 0 0.2rem rgba(168, 85, 247, 0.28);
  outline: none;
}

/* Fine-pointer devices use the same 57px starting height. The input handler
   resets this height while autogrowing, and style.css still permits manual
   vertical resizing. */
@media (hover: hover) and (pointer: fine) {
  #user-input {
    height: 57px;
    min-height: 48px;
  }
}

.composer-stack #user-input {
  font-size: var(--composer-choice-font, 1rem);
  /* The composer surface stays dark in every theme, so its text does too. */
  color: #f0ecff;
  caret-color: #f0ecff;
  padding: 0.7rem 0.75rem 0.7rem 2.6rem;
  flex: 0 1 auto;
  width: 100%;
  margin-left: 0;
  background-color: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  background-image: none;
  background-repeat: no-repeat, no-repeat;
  background-position:
    0.95rem 0.72rem,
    0.75rem 0.55rem;
  background-size:
    0.7rem 0.7rem,
    1.125rem 1.125rem;
}

/* While a turn runs the textarea is disabled, so Cancel takes its right edge:
   a full touch target where the player's next action would be typed. */
#interaction-form .composer-cancel {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  z-index: 2;
  transform: translateY(-50%);
  min-height: 44px;
  padding: 0 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(196, 160, 255, 0.7);
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.32);
  color: #f3e8ff;
  font-size: max(16px, var(--composer-choice-font, 1rem));
  font-weight: 700;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
  cursor: pointer;
}

#interaction-form .composer-cancel:hover {
  background: rgba(168, 85, 247, 0.45);
}

#interaction-form .composer-cancel:focus-visible {
  outline: 2px solid #e9d5ff;
  outline-offset: 2px;
}

#interaction-form .composer-stack--cancelable #user-input {
  padding-right: 8.5rem;
}



/* ====================================================================== */
/* Mobile composer: cap choices height                                    */
/*                                                                        */
/* Send-below-dock + full-width is now the default at every viewport (see */
/* the C4 .composer-row/.composer-send rules above) -- PR #8952 originally */
/* shipped that pattern gated to <=576px only; it no longer needs a       */
/* viewport-conditional override here. Phones still need their own       */
/* choices height cap: the dock is too tall to leave room for the rest of */
/* the page when a 4-option planning block is live.                       */
/* ====================================================================== */

@media (max-width: 576px) {
  .composer-row {
    gap: 0.375rem;
  }

  .toggle-group .toggle-pill {
    padding: 0 0.35rem;
    font-size: calc(var(--composer-choice-font, 1rem) * 0.85);
  }

  .composer-send {
    padding: 0 0.9rem;
  }

  #your-move .inline-choices .choice-button {
    min-height: 48px;
    padding-top: .45rem;
    padding-bottom: .45rem;
    margin-bottom: .15rem;
  }


  /* Keep the pencil gutter and placeholder readable on narrow screens. */
  .composer-stack #user-input {
    padding-left: 2.6rem;
    /* 16px is a HARD platform floor here, not a style choice. iOS Safari
       auto-zooms the viewport whenever a focused input's font-size is under
       16px, and it does not zoom back out — so tapping Custom Action zoomed
       the page in, and the reader then had to pinch out to read the next
       narration (operator report, Slack 2026-08-18). Historically the R1
       type scale (--composer-choice-font: 12.8px) is what dropped it under
       the floor. Consume the token so the type-scale contract holds, and
       wrap with max(16px, ...) so a future token drop cannot re-break iOS
       zoom. */
    font-size: max(16px, var(--composer-choice-font, 1rem));
    background-position:
      0.8125rem 0.9rem,
      0.6rem 0.72rem;
  }

  /* Mobile: word-wrap in-history .planning-block-choices so long LLM-authored
     choice strings ("Submit and Ask for Instruction: Acknowledge the signal...")
     no longer bleed past the planning-block's right border.

     The default .ctitle rule above is `white-space: nowrap; overflow: hidden;
     text-overflow: ellipsis` — but that ellipsis only fires when the parent
     has a defined width AND the span's overflow actually clips. On a 393px
     iPhone the button's content (a single unbreakable string) overflows the
     parent instead, escaping the `overflow: hidden` and visibly bleeding past
     the right edge. Mirror the desktop `.choice-row.open .ctitle` rules
     (lines 109-114) here so collapsed rows wrap mid-word at narrow widths. */
  .planning-block-choices {
    min-width: 0;
    max-width: 100%;
  }

  .choice-button {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .ctitle {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Wide desktop has room to spare, so controls drop the phone touch sizing
   while staying at least 32px tall. */
@media (min-width: 1100px) {
  .toggle-group .toggle-pill {
    min-height: 34px;
    padding: 0 0.75rem;
    font-size: calc(var(--composer-choice-font, 1rem) * 0.85);
  }
  .composer-send {
    min-height: 34px;
    height: 34px;
    padding: 0 1rem;
    font-size: calc(var(--composer-choice-font, 1rem) * 0.9);
  }
  .write-own-hint__cta {
    min-height: 34px;
    padding: 0.35rem 0.7rem;
    font-size: 0.9rem;
  }
  #your-move .inline-choices .choice-button {
    min-height: 40px;
    padding: 0.4rem 0.65rem 0.4rem 2.4rem;
    margin-bottom: 0.25rem;
  }
  #your-move .inline-choices .choice-button::before {
    top: 0.5rem;
  }
  #your-move .inline-choices .cdesc {
    font-size: 0.8rem;
  }
  #your-move .inline-choices .chev-btn {
    flex-basis: 36px;
    width: 36px;
  }
  #user-input {
    height: 44px;
    min-height: 40px;
  }
  .composer-stack #user-input {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
}