/* ============================================================
   RockMouse Storyboard Design Assistant — styles.css
   Phase 1 prototype. Brand tokens, layout, components.
   ============================================================ */

:root {
  /* Brand palette */
  --rm-mint: #00D090;
  --rm-mint-dark: #006B48;
  --rm-deep: #005080;
  --rm-mid-teal: #00A0A0;
  --rm-header-bg: #0A3A5C;
  --rm-header-dark: #212121;        /* matches logo backdrop */

  /* Editorial palette (Anthropic-influenced) */
  --rm-text: #1F1B16;               /* warm charcoal, not pure black */
  --rm-text-muted: #6B635A;         /* warm muted */
  --rm-form-text: #3E2A14;          /* dark brown — for form input/textarea text only */
  --rm-bg: #F4EFE6;                 /* warm cream — replaces cool grey */
  --rm-surface: #FFFFFF;            /* white surfaces still pop on cream */
  --rm-surface-warm: #FAF6EE;       /* warmer surface for cards in editorial contexts */
  --rm-border: #E5DDD0;             /* warm hairline */
  --rm-rose: #C77A75;               /* italic accent — used sparingly */
  --rm-rose-dark: #A55B57;
  --rm-rose-bright: #E89D98;        /* brighter rose for use on dark bg (topbar) */
  --rm-warn: #C77A2C;
  --rm-warn-bg: #F8EDDC;
  --rm-error: #B14545;
  --rm-error-bg: #F4E2E0;

  /* Layout */
  --rm-topbar-h: 120px;
  --rm-sidebar-w: 180px;
  --rm-radius: 14px;
  --rm-radius-sm: 8px;

  /* Typography */
  --rm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rm-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --rm-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--rm-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rm-text);
  background: var(--rm-bg);
}

a { color: var(--rm-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Top bar
   ============================================================ */
.rm-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--rm-topbar-h);
  /* Near-black on the left (bleeds with logo) → navy on the right */
  background: linear-gradient(90deg, var(--rm-header-dark) 0%, var(--rm-header-dark) 30%, var(--rm-header-bg) 100%);
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-bottom: 3px solid var(--rm-mint);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.rm-topbar__logo {
  height: 96px;
  width: 253px; /* matches the 2.64:1 aspect ratio of the logo file */
  margin-right: 22px;
  margin-top: -20px; /* lift logo up 20px in the topbar */
  flex-shrink: 0;
  display: block;
  /* No object-fit — the file's intrinsic aspect already matches the box */
}

.rm-topbar__title {
  font-family: var(--rm-font-serif);
  font-size: 36px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  margin: 0;
  margin-left: 50px;
  flex: 1;
  line-height: 1.1;
}
.rm-topbar__title__accent {
  font-style: italic;
  color: var(--rm-rose-bright);
  font-weight: 500;
}

.rm-topbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rm-keybadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

.rm-keybadge--ok { color: var(--rm-mint); border-color: rgba(0, 208, 144, 0.5); }
.rm-keybadge--missing { color: #FFD27A; border-color: rgba(244, 163, 0, 0.5); }
.rm-keybadge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.rm-topbar__keystack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.rm-topbar__version {
  font-family: var(--rm-font);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  user-select: none;
  cursor: default;
}

.rm-topbar__link {
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  line-height: 1;
  height: auto;
  /* Match the badge's overall height by aligning to the badge's flex
     parent. The keystack adds the version line underneath; we want the
     Setup pill to align with the BADGE, so we pin to the keystack's top. */
  align-self: flex-start;
}
.rm-topbar__link:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }

/* Fullscreen toggle — round icon button styled to match the Setup pill's
   height and visual weight. The icon is an inline SVG data-URI background;
   the class flip switches between outward-pointing arrows (enter) and
   inward-pointing arrows (exit). */
.rm-topbar__fs {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6 V2 H6'/><path d='M14 6 V2 H10'/><path d='M2 10 V14 H6'/><path d='M14 10 V14 H10'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  align-self: flex-start;
  flex: 0 0 auto;
  transition: background-color 120ms ease;
}
.rm-topbar__fs:hover { background-color: rgba(255, 255, 255, 0.08); }
.rm-topbar__fs:focus-visible {
  outline: 2px solid var(--rm-mint);
  outline-offset: 2px;
}
.rm-topbar__fs--exit {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 V6 H2'/><path d='M10 2 V6 H14'/><path d='M6 14 V10 H2'/><path d='M10 14 V10 H14'/></svg>");
}

/* Fullscreen restore toast — appears after a cross-page navigation if the
   user was in fullscreen on the previous page. Browsers exit fullscreen on
   navigation as a security measure; this toast lets the user one-click back
   into fullscreen instead of hunting for the topbar button. */
.rm-fs-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  background: var(--rm-header-dark);
  color: #FFFFFF;
  padding: 10px 16px 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  animation: rm-fs-toast-in 200ms ease-out;
}
.rm-fs-toast__close {
  background: transparent;
  border: 0;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
}
.rm-fs-toast__close:hover { opacity: 1; }
@keyframes rm-fs-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================
   App shell — sidebar + content
   ============================================================ */
.rm-shell {
  display: flex;
  min-height: calc(100vh - var(--rm-topbar-h));
}

.rm-sidebar {
  width: var(--rm-sidebar-w);
  flex-shrink: 0;
  background: var(--rm-surface);
  border-right: 1px solid var(--rm-border);
  padding: 26px 14px 26px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rm-sidebar__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
  margin: 0 6px 10px 6px;
}

.rm-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--rm-radius-sm);
  color: var(--rm-text);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  text-align: left;
  width: 100%;
}
.rm-step:hover:not(.rm-step--disabled) { background: var(--rm-bg); text-decoration: none; }
.rm-step--current {
  background: rgba(0, 80, 128, 0.06);
  border-color: rgba(0, 80, 128, 0.2);
  color: var(--rm-deep);
}
.rm-step--disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.rm-step__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rm-bg);
  color: var(--rm-text-muted);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--rm-border);
}
.rm-step--done .rm-step__num { background: var(--rm-mint); color: #FFFFFF; border-color: var(--rm-mint); }
.rm-step--current .rm-step__num { background: var(--rm-deep); color: #FFFFFF; border-color: var(--rm-deep); }

.rm-sidebar__spacer { flex: 1; }

.rm-sidebar__danger {
  font-size: 12px;
  font-weight: 600;
  color: var(--rm-error);
  background: transparent;
  border: 1px dashed rgba(208, 72, 72, 0.4);
  padding: 8px 10px;
  border-radius: var(--rm-radius-sm);
  cursor: pointer;
  margin-top: 10px;
}
.rm-sidebar__danger:hover { background: var(--rm-error-bg); }

/* ============================================================
   Main content
   ============================================================ */
.rm-main {
  flex: 1;
  padding: 12px 36px 60px 36px;
  min-width: 0;
}

.rm-page-h1 {
  font-family: var(--rm-font-serif);
  font-size: 29px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 4px 0;
  color: var(--rm-text);
  letter-spacing: -0.02em;
}
.rm-page-h1__accent {
  font-style: italic;
  color: var(--rm-rose);
  font-weight: 500;
}
.rm-page-eyebrow {
  font-family: var(--rm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-mint-dark);
  margin: 0 0 3px 0;
}
.rm-page-lede {
  font-family: var(--rm-font);
  color: var(--rm-text-muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 8px 0;
  max-width: 820px;
}
/* Compact lede — fits on one line on most desktop viewports, with reduced
   vertical space above the form/editor. Used on step1 to leave more form
   visible without scrolling. */
.rm-page-lede--compact {
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 8px 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* On narrow viewports, fall back to wrapping (don't truncate). */
@media (max-width: 1100px) {
  .rm-page-lede--compact {
    white-space: normal;
    text-overflow: clip;
  }
}

.rm-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(20, 40, 60, 0.04);
  margin-bottom: 8px;
}
.rm-card--feature { border-left: 4px solid var(--rm-mint); }
.rm-card__title { font-size: 16px; font-weight: 700; margin: 0 0 12px 0; color: var(--rm-deep); }

/* ============================================================
   Forms
   ============================================================ */
.rm-form-shell {
  display: grid;
  grid-template-columns: 1fr var(--rm-notes-w, 320px);
  gap: 18px;
  align-items: start;
}

/* Wraps the form-toolbar + form-grid on Step 1 so the chat panel still sits
   in the right column of .rm-form-shell. */
.rm-form-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Step 1 form toolbar — Expand all / Collapse all buttons row above the
   six collapsible containers. */
.rm-form-toolbar {
  display: flex;
  gap: 8px;
  padding: 0 4px;
}

/* Step 1 form layout — six full-width collapsible containers stacked
   vertically. Inside each, fields are arranged in a 3-column sub-grid.
   Uses native <details>/<summary> for collapse — open by default. */
.rm-form-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-form-col {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 0;
  min-width: 0;
}
.rm-form-col[open] {
  padding: 0 16px 14px;
}

/* The clickable summary row holding heading + status indicator. */
.rm-form-col__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
.rm-form-col[open] > .rm-form-col__summary {
  border-bottom-color: var(--rm-border);
  margin-bottom: 10px;
}
/* Hide native marker (Firefox uses ::-webkit-details-marker; Chrome ignores it,
   but list-style:none handles Chrome). */
.rm-form-col__summary::-webkit-details-marker { display: none; }
.rm-form-col__summary::marker { content: ""; }

/* Custom chevron, rotates when open. */
.rm-form-col__chev {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--rm-deep);
  border-bottom: 2px solid var(--rm-deep);
  transform: rotate(-45deg);
  transition: transform 160ms ease;
  flex: 0 0 auto;
  margin-left: 2px;
}
.rm-form-col[open] > .rm-form-col__summary .rm-form-col__chev {
  transform: rotate(45deg);
}

.rm-form-col__heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rm-deep);
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
}

/* Status indicator: "N of M filled". A small red asterisk appears when
   the container has unmet required fields. */
.rm-form-col__status {
  font-size: 11px;
  font-weight: 600;
  color: var(--rm-text-muted);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.rm-form-col__status--complete { color: var(--rm-mint-dark); }
.rm-form-col__status-required {
  color: var(--rm-error);
  margin-left: 4px;
  font-weight: 800;
}

/* Inner 3-column sub-grid for fields. */
.rm-form-col__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 10px;
}

.rm-field { display: flex; flex-direction: column; gap: 4px; }
.rm-field__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rm-text);
}
.rm-field__label .rm-required { color: var(--rm-error); margin-left: 3px; }
.rm-field__hint {
  font-size: 11.5px;
  color: var(--rm-text-muted);
  margin: 0;
  line-height: 1.35;
}
/* Inline advice that appears under specific fields based on their value
   (e.g. "consider Free-form structure" when suggestedTime is short).
   Mint left rule, small body, sits between the input and the next field. */
.rm-field__advice {
  margin: 8px 0 0 0;
  padding: 8px 10px;
  background: rgba(0, 208, 144, 0.08);
  border-left: 3px solid var(--rm-mint);
  border-radius: 0 var(--rm-radius-sm) var(--rm-radius-sm) 0;
  font-size: 12px;
  color: var(--rm-text);
  line-height: 1.45;
}
.rm-field__advice strong { color: var(--rm-mint-dark); }

/* Flash animation for fields auto-filled from chat (Step 1 only).
   ~2.4s mint pulse with a subtle background tint and glowing border. */
.rm-field--flash {
  animation: rm-field-flash 2.4s ease-out;
}
.rm-field--flash .rm-field__label {
  animation: rm-field-label-flash 2.4s ease-out;
}
@keyframes rm-field-flash {
  0%   { background: rgba(0, 208, 144, 0.0); }
  10%  { background: rgba(0, 208, 144, 0.20); box-shadow: 0 0 0 3px rgba(0, 208, 144, 0.20); }
  60%  { background: rgba(0, 208, 144, 0.16); box-shadow: 0 0 0 3px rgba(0, 208, 144, 0.16); }
  100% { background: rgba(0, 208, 144, 0.0); box-shadow: 0 0 0 0 rgba(0, 208, 144, 0); }
}
@keyframes rm-field-label-flash {
  0%, 100% { color: var(--rm-text); }
  10%, 70% { color: var(--rm-mint-dark); }
}

/* ============================================================
   Step 1 uploads container — Get Started block
   ============================================================ */
.rm-uploads-container {
  background: var(--rm-surface-warm);
  border: 1.5px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 6px 12px 8px 12px;
  margin-bottom: 8px;
}
.rm-uploads-eyebrow {
  font-family: var(--rm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-mint-dark);
  margin: 0 0 5px 0;
}
.rm-uploads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.rm-uploads-grid--three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) {
  .rm-uploads-grid--three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .rm-uploads-grid { grid-template-columns: 1fr; }
  .rm-uploads-grid--three { grid-template-columns: 1fr; }
}
.rm-upload-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 6px 10px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rm-upload-card__title {
  font-family: var(--rm-font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--rm-deep);
  margin: 0 0 2px 0;
  line-height: 1.2;
  text-align: center;
}
.rm-upload-card__hint {
  font-size: 11px;
  color: var(--rm-text-muted);
  line-height: 1.35;
  margin: 0 0 2px 0;
}
.rm-upload-card .rm-btn {
  align-self: flex-start;
}

/* Side-by-side button row inside an upload card (used on Step 1's "Save
   your brief?" card to host Download + Share without stacking vertically). */
.rm-upload-card__btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.rm-upload-card__btn-row .rm-btn {
  align-self: auto;
}

/* Knowledge files list (chips) inside the upload card */
.rm-knowledge-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.rm-knowledge-list:empty { display: none; }
.rm-knowledge-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 208, 144, 0.08);
  border: 1px solid rgba(0, 208, 144, 0.3);
  border-radius: 999px;
  padding: 4px 4px 4px 12px;
  font-size: 12px;
}
.rm-knowledge-chip__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--rm-text);
}
.rm-knowledge-chip__size {
  font-size: 10.5px;
  color: var(--rm-text-muted);
  flex-shrink: 0;
}
.rm-knowledge-chip__remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: var(--rm-text-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rm-knowledge-chip__remove:hover {
  background: var(--rm-error-bg);
  color: var(--rm-error);
}

/* Actions row beneath the uploads container — separates download/clear/generate */
.rm-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 18px;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  margin-bottom: 18px;
}
.rm-field__input,
.rm-field__textarea {
  font-family: var(--rm-font);
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  background: #FFFFFF;
  color: var(--rm-form-text);
  width: 100%;
  resize: vertical;
}
.rm-field__select {
  font-family: var(--rm-font);
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  background: #FFFFFF;
  color: var(--rm-form-text);
  width: 100%;
  cursor: pointer;
}
.rm-field__select:focus {
  outline: none;
  border-color: var(--rm-deep);
  box-shadow: 0 0 0 3px rgba(0, 80, 128, 0.12);
}
.rm-field__other {
  margin-top: 8px;
}
.rm-field__input:focus,
.rm-field__textarea:focus {
  outline: none;
  border-color: var(--rm-deep);
  box-shadow: 0 0 0 3px rgba(0, 80, 128, 0.12);
}
.rm-field__textarea { min-height: 70px; line-height: 1.45; }
.rm-field__textarea--tall { min-height: 320px; }

/* ============================================================
   Buttons
   ============================================================ */
.rm-btn {
  font-family: var(--rm-font);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--rm-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.rm-btn:hover { text-decoration: none; }
.rm-btn:active { transform: translateY(1px); }
.rm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.rm-btn--primary {
  background: var(--rm-mint);
  color: var(--rm-mint-dark);
  border-color: var(--rm-mint);
}
.rm-btn--primary:hover { background: #00E69E; box-shadow: 0 4px 12px rgba(0, 208, 144, 0.3); }

.rm-btn--secondary {
  background: var(--rm-deep);
  color: #FFFFFF;
  border-color: var(--rm-deep);
}
.rm-btn--secondary:hover { background: #006496; }

.rm-btn--ghost {
  background: #FFFFFF;
  color: var(--rm-text);
  border-color: var(--rm-border);
}
.rm-btn--ghost:hover { background: var(--rm-bg); border-color: var(--rm-text-muted); }

.rm-btn--danger {
  background: #FFFFFF;
  color: var(--rm-error);
  border-color: rgba(208, 72, 72, 0.4);
}
.rm-btn--danger:hover { background: var(--rm-error-bg); }

/* Slimmer ghost variant — used for in-page toolbar buttons (Expand all,
   Collapse all). Slightly smaller font and padding so they sit lighter
   than the page-level CTAs. */
.rm-btn--small {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
}

/* Per-session "clicked" tick — appears inside action buttons (upload,
   download, share) after the first click. Persists until page reload. Drawn
   as a small green check via ::before so the button width stays stable. */
.rm-btn--ticked::before {
  content: "✓";
  color: var(--rm-mint-dark);
  font-weight: 800;
  margin-right: 4px;
  font-size: 0.95em;
}

.rm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rm-border);
}
.rm-actions--right { justify-content: flex-end; }

/* ============================================================
   Editor (Steps 2, 3, 4)
   ============================================================ */
.rm-editor-shell {
  display: grid;
  grid-template-columns: 1fr var(--rm-notes-w, 320px);
  gap: 18px;
  align-items: start;
}
.rm-editor-shell--solo { grid-template-columns: 1fr; }

/* Editor column: tabs row + textarea + preview pane stacked vertically.
   Sits in column 1 of .rm-editor-shell. The chat host occupies column 2. */
.rm-editor-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rm-editor-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--rm-border);
}
.rm-editor-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 8px 16px;
  font-family: var(--rm-font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rm-text-muted);
  cursor: pointer;
  border-radius: var(--rm-radius-sm) var(--rm-radius-sm) 0 0;
  transition: color 0.12s ease, background 0.12s ease;
  position: relative;
  top: 1px;
}
.rm-editor-tab:hover { color: var(--rm-deep); }
.rm-editor-tab--active {
  color: var(--rm-deep);
  background: var(--rm-surface);
  border-color: var(--rm-border);
  border-bottom-color: var(--rm-surface);
}

.rm-editor {
  font-family: var(--rm-font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  width: 100%;
  min-height: 70vh;
  padding: 18px 20px;
  border: 1px solid var(--rm-border);
  border-top: none;
  border-radius: 0 var(--rm-radius) var(--rm-radius) var(--rm-radius);
  background: var(--rm-surface);
  color: var(--rm-text);
  resize: vertical;
}
.rm-editor:focus {
  outline: none;
  border-color: var(--rm-deep);
  box-shadow: 0 0 0 3px rgba(0, 80, 128, 0.1);
}

/* Read-only rich-text preview. Same min-height as the editor so the
   page doesn't jump when toggling tabs. Renders Markdown-derived prose
   in the body font (not mono). Custom typography for headings, lists,
   tables, code, blockquotes, links. */
.rm-editor-preview {
  font-family: var(--rm-font);
  font-size: 14.5px;
  line-height: 1.6;
  width: 100%;
  min-height: 70vh;
  padding: 24px 28px;
  border: 1px solid var(--rm-border);
  border-top: none;
  border-radius: 0 var(--rm-radius) var(--rm-radius) var(--rm-radius);
  background: var(--rm-surface);
  color: var(--rm-text);
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}
.rm-editor-preview__loading,
.rm-editor-preview__error {
  color: var(--rm-text-muted);
  font-style: italic;
}
.rm-editor-preview__error { color: var(--rm-error); font-style: normal; }

.rm-editor-preview h1,
.rm-editor-preview h2,
.rm-editor-preview h3,
.rm-editor-preview h4,
.rm-editor-preview h5,
.rm-editor-preview h6 {
  font-family: var(--rm-font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rm-deep);
  line-height: 1.2;
  margin: 24px 0 8px 0;
}
.rm-editor-preview h1:first-child,
.rm-editor-preview h2:first-child,
.rm-editor-preview h3:first-child { margin-top: 0; }
.rm-editor-preview h1 { font-size: 28px; }
.rm-editor-preview h2 { font-size: 22px; }
.rm-editor-preview h3 { font-size: 18px; color: var(--rm-text); }
.rm-editor-preview h4 { font-size: 15.5px; color: var(--rm-text); }
.rm-editor-preview h5,
.rm-editor-preview h6 { font-size: 14px; color: var(--rm-text-muted); }

.rm-editor-preview p { margin: 0 0 12px 0; }
.rm-editor-preview p:last-child { margin-bottom: 0; }
.rm-editor-preview strong { font-weight: 700; color: var(--rm-text); }
.rm-editor-preview em { font-style: italic; }
.rm-editor-preview a {
  color: var(--rm-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.rm-editor-preview a:hover { color: var(--rm-mint-dark); }

.rm-editor-preview ul,
.rm-editor-preview ol {
  margin: 0 0 14px 0;
  padding-left: 24px;
}
.rm-editor-preview li { margin-bottom: 4px; }
.rm-editor-preview li > ul,
.rm-editor-preview li > ol { margin: 4px 0; }

.rm-editor-preview blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--rm-mint);
  background: rgba(0, 208, 144, 0.06);
  color: var(--rm-text);
  font-style: italic;
}

.rm-editor-preview code {
  font-family: var(--rm-font-mono);
  font-size: 0.9em;
  background: rgba(0, 80, 128, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--rm-deep);
}
.rm-editor-preview pre {
  margin: 14px 0;
  padding: 14px 16px;
  background: #FAF7F0;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  overflow-x: auto;
}
.rm-editor-preview pre code {
  background: transparent;
  padding: 0;
  font-size: 13px;
  color: var(--rm-text);
}

.rm-editor-preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  font-size: 13.5px;
}
.rm-editor-preview th,
.rm-editor-preview td {
  border: 1px solid var(--rm-border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.rm-editor-preview th {
  background: var(--rm-surface-warm);
  font-weight: 700;
  color: var(--rm-deep);
}

.rm-editor-preview hr {
  border: none;
  border-top: 1px solid var(--rm-border);
  margin: 20px 0;
}

.rm-editor-preview del { color: var(--rm-text-muted); }

/* ============================================================
   Mode selection modal (Step 1 first-load)
   ============================================================ */
.rm-modal {
  position: fixed;
  inset: 0;
  background: rgba(31, 27, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
  padding: 20px;
}
.rm-modal__box {
  background: var(--rm-surface);
  border-radius: var(--rm-radius);
  padding: 32px 36px 28px 36px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
}
.rm-modal__eyebrow {
  font-family: var(--rm-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-mint-dark);
  margin: 0 0 8px 0;
}
.rm-modal__title {
  font-family: var(--rm-font-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 8px 0;
  color: var(--rm-text);
}
.rm-modal__title em {
  font-style: italic;
  color: var(--rm-rose);
  font-weight: 500;
}
.rm-modal__lede {
  color: var(--rm-text-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px 0;
}
.rm-modal__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.rm-modal__choice {
  background: var(--rm-surface-warm);
  border: 1.5px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-family: var(--rm-font);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.rm-modal__choice:hover {
  border-color: var(--rm-mint);
  background: rgba(0, 208, 144, 0.04);
}
.rm-modal__choice:active { transform: translateY(1px); }
.rm-modal__choice--disabled,
.rm-modal__choice[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--rm-bg);
  border-style: dashed;
}
.rm-modal__choice--disabled:hover,
.rm-modal__choice[disabled]:hover {
  background: var(--rm-bg);
  border-color: var(--rm-border);
  transform: none;
}
.rm-modal__choice--disabled a,
.rm-modal__choice[disabled] a {
  color: var(--rm-deep);
  font-weight: 700;
  pointer-events: auto; /* the inner setup link must remain clickable */
}
.rm-modal__choice-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--rm-text);
}
.rm-modal__choice-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--rm-text-muted);
}
.rm-modal__skip {
  font-size: 12.5px;
  color: var(--rm-text-muted);
  margin: 0;
  text-align: center;
}
.rm-modal__skip a {
  color: var(--rm-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.rm-modal__skip a:hover { color: var(--rm-text); }

@media (max-width: 600px) {
  .rm-modal__choices { grid-template-columns: 1fr; }
}

/* Share Document modal — reuses .rm-modal overlay + .rm-modal__box panel,
   with a tighter, form-oriented layout for the share dialog. */
.rm-share-box {
  max-width: 480px;
}
.rm-share-box__notice {
  background: var(--rm-warn-bg);
  color: var(--rm-warn);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: 0.01em;
}
.rm-share-box__hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--rm-text-muted);
  margin: 0 0 18px 0;
}
.rm-share-box__hint-inline {
  font-weight: 500;
  color: var(--rm-text-muted);
  font-size: 12px;
}
.rm-share-box__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rm-text);
}
.rm-share-box__input,
.rm-share-box__textarea {
  width: 100%;
  font-family: var(--rm-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--rm-form-text);
  background: var(--rm-bg);
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  padding: 9px 12px;
  line-height: 1.4;
  box-sizing: border-box;
}
.rm-share-box__textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--rm-font);
}
.rm-share-box__input:focus,
.rm-share-box__textarea:focus {
  outline: 2px solid var(--rm-mint);
  outline-offset: -1px;
  border-color: var(--rm-mint);
}
.rm-share-box__error {
  font-size: 12px;
  color: var(--rm-error);
  background: var(--rm-error-bg);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.rm-share-box__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* ============================================================
   Resize handle (used on chat panel and form-shell)
   ============================================================ */
.rm-resize-handle {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rm-resize-handle::before {
  content: "";
  width: 3px;
  height: 36px;
  background: var(--rm-border);
  border-radius: 2px;
  transition: background 0.15s ease;
}
.rm-resize-handle:hover::before { background: var(--rm-mint); }
.rm-resize-handle--active::before { background: var(--rm-mint); }

/* ============================================================
   Designer's Chat panel (Steps 2, 3, 4)
   Replaces the old Designer's Notes panel. Standing directions
   pile sits at the top in a collapsed strip; expands on click.
   ============================================================ */
.rm-chat-panel {
  position: sticky;
  top: calc(var(--rm-topbar-h) + 18px);
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-left: 4px solid var(--rm-mint);
  border-radius: var(--rm-radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--rm-topbar-h) - 36px);
  min-height: 480px;
  overflow: hidden;
}

/* Wrapper that holds the chat panel and its resize handle */
.rm-chat-wrap {
  position: relative;
  align-self: stretch;
}
.rm-chat-wrap .rm-resize-handle {
  left: -10px;
}
.rm-chat-panel__header {
  padding: 14px 18px 10px 22px;
  border-bottom: 1px solid var(--rm-border);
  flex-shrink: 0;
  position: relative;
}
.rm-chat-panel__heading {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--rm-deep);
  margin: 0 0 8px 0;
  line-height: 1.2;
}

/* Header row keeps heading + TTS toggle on one line with the toggle
   pushed to the right. */
.rm-chat-panel__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.rm-chat-panel__header-row .rm-chat-panel__heading {
  margin: 0;
}

/* Voice-output (TTS) toggle button. Default state is "off" (outlined
   speaker glyph in muted colour). When on, it gains the mint accent. */
.rm-chat-tts {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--rm-border);
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B635A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6 V10 H6 L10 13 V3 L6 6 Z'/><path d='M12 5 Q14 8 12 11'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.rm-chat-tts:hover { background-color: var(--rm-bg); border-color: var(--rm-text-muted); }
.rm-chat-tts:disabled { opacity: 0.4; cursor: not-allowed; }
.rm-chat-tts--on {
  border-color: var(--rm-mint);
  background-color: rgba(0, 208, 144, 0.08);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23006B48' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6 V10 H6 L10 13 V3 L6 6 Z' fill='%23006B48' fill-opacity='0.18'/><path d='M12 5 Q14 8 12 11'/></svg>");
}
.rm-chat-tts:focus-visible {
  outline: 2px solid var(--rm-mint);
  outline-offset: 2px;
}

/* Voice button group — TTS toggle + settings gear, kept compact together. */
.rm-chat-voicegroup {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Settings gear button next to the TTS toggle. Opens the voice picker
   popover with voice/rate/pitch sliders and a test button. */
.rm-chat-voicegear {
  width: 24px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B635A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='2'/><path d='M8 1 V3 M8 13 V15 M1 8 H3 M13 8 H15 M3.5 3.5 L4.9 4.9 M11.1 11.1 L12.5 12.5 M3.5 12.5 L4.9 11.1 M11.1 4.9 L12.5 3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.rm-chat-voicegear:hover { background-color: var(--rm-bg); }
.rm-chat-voicegear:disabled { opacity: 0.4; cursor: not-allowed; }
.rm-chat-voicegear--open { background-color: var(--rm-bg); border-color: var(--rm-border); }
.rm-chat-voicegear:focus-visible {
  outline: 2px solid var(--rm-mint);
  outline-offset: 2px;
}

/* Voice settings popover — floats over the chat panel when the gear is
   clicked. Positioned absolutely so it doesn't push the chat header down
   and clip the messages area. Has its own scroll if its content exceeds
   the available vertical space. */
.rm-voice-popover {
  position: absolute;
  top: 100%;
  left: 14px;
  right: 14px;
  margin-top: 8px;
  padding: 12px 14px 12px 14px;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 20;
  max-height: calc(100vh - var(--rm-topbar-h) - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}
.rm-voice-popover__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rm-voice-popover__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-deep);
  margin: 0 0 2px 0;
}
.rm-voice-popover__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rm-text);
}
.rm-voice-popover__label span em {
  font-style: normal;
  font-weight: 500;
  color: var(--rm-text-muted);
  margin-left: 6px;
}
.rm-voice-popover__select {
  width: 100%;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 6px;
  background: var(--rm-surface);
  color: var(--rm-form-text);
  font-family: var(--rm-font);
}
.rm-voice-popover__select:focus { outline: 2px solid var(--rm-mint); outline-offset: -1px; border-color: var(--rm-mint); }
.rm-voice-popover__select option { padding: 3px 6px; }
.rm-voice-popover__select optgroup { font-style: normal; font-weight: 700; }

.rm-voice-popover__search {
  width: 100%;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--rm-border);
  border-radius: 6px;
  background: var(--rm-surface);
  color: var(--rm-form-text);
  font-family: var(--rm-font);
  box-sizing: border-box;
}
.rm-voice-popover__search:focus { outline: 2px solid var(--rm-mint); outline-offset: -1px; border-color: var(--rm-mint); }
.rm-voice-popover__label input[type="range"] {
  width: 100%;
  accent-color: var(--rm-mint);
}
.rm-voice-popover__hint {
  font-size: 11px;
  color: var(--rm-text-muted);
  line-height: 1.45;
  margin: 2px 0 0 0;
  background: var(--rm-bg);
  border-radius: 4px;
  padding: 6px 8px;
}
.rm-voice-popover__hint--empty {
  color: var(--rm-warn);
  background: var(--rm-warn-bg);
}
.rm-voice-popover__actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

/* Diagnostic raw-list of every voice the browser reports. Collapsed by
   default; helps the designer find a voice that isn't where they expect
   it (or confirm it's not exposed at all by their browser). */
.rm-voice-popover__debug {
  border-top: 1px dashed var(--rm-border);
  padding-top: 8px;
  margin-top: 2px;
}
.rm-voice-popover__debug summary {
  font-size: 11px;
  font-weight: 700;
  color: var(--rm-text-muted);
  cursor: pointer;
  letter-spacing: 0.02em;
  padding: 2px 0;
  list-style: revert;
}
.rm-voice-popover__debug summary:hover { color: var(--rm-text); }
.rm-voice-popover__debug-list {
  margin-top: 6px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--rm-border);
  border-radius: 4px;
  background: var(--rm-bg);
  padding: 4px 0;
}
.rm-voice-popover__debug-item {
  font-family: var(--rm-font-mono, ui-monospace), monospace;
  font-size: 11px;
  padding: 3px 8px;
  line-height: 1.4;
  color: var(--rm-text);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: baseline;
}
.rm-voice-popover__debug-item strong {
  font-weight: 600;
  word-break: break-word;
}
.rm-voice-popover__debug-item span {
  color: var(--rm-text-muted);
  font-size: 10px;
  white-space: nowrap;
}
.rm-voice-popover__debug-item--empty {
  font-style: italic;
  color: var(--rm-text-muted);
  justify-content: center;
}

.rm-chat-panel__hint {
  font-size: 11.5px;
  color: var(--rm-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Inner body wrapper for the Steps 2/3/4 chat panel — swaps between
   chat view and proposals view without re-rendering the outer chrome. */
.rm-chat-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@keyframes rm-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* ----- Chat messages ----- */
.rm-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.rm-chat-empty {
  color: var(--rm-text-muted);
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
  padding: 30px 8px;
  line-height: 1.5;
}

.rm-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
}
.rm-msg__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rm-msg__role {
  color: var(--rm-deep);
}
.rm-msg__role--user { color: var(--rm-mint-dark); }
.rm-msg__time {
  color: var(--rm-text-muted);
  font-weight: 500;
  font-size: 10px;
}
.rm-msg__body {
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.rm-msg--user .rm-msg__body {
  background: rgba(0, 208, 144, 0.08);
  border: 1px solid rgba(0, 208, 144, 0.2);
}
.rm-msg--assistant .rm-msg__body {
  background: var(--rm-bg);
  border: 1px solid var(--rm-border);
}

/* Status messages — system-style notes that appear after an Assistant turn
   reporting which Step 1 fields were auto-updated. Compact, no speaker label,
   no timestamp, no copy button. Mint check followed by muted field name. */
.rm-msg--status {
  padding: 0 4px;
  margin: -2px 0 0;
}
.rm-msg-status__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rm-msg-status__list li {
  font-size: 12px;
  line-height: 1.4;
  color: var(--rm-text-muted);
  font-style: italic;
}
.rm-msg-status__check {
  display: inline-block;
  color: var(--rm-mint-dark);
  font-weight: 800;
  font-style: normal;
  margin-right: 4px;
}
.rm-msg__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-top: 2px;
}
.rm-msg:hover .rm-msg__actions { opacity: 1; }
.rm-msg__action-btn {
  font-family: var(--rm-font);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--rm-border);
  background: #FFFFFF;
  color: var(--rm-text-muted);
  cursor: pointer;
}
.rm-msg__action-btn:hover {
  color: var(--rm-mint-dark);
  border-color: var(--rm-mint);
  background: rgba(0, 208, 144, 0.08);
}
.rm-msg__action-btn--accent {
  color: var(--rm-mint-dark);
  border-color: var(--rm-mint);
  background: rgba(0, 208, 144, 0.10);
}
.rm-msg__action-btn--accent:hover {
  background: rgba(0, 208, 144, 0.20);
}
.rm-msg--pending .rm-msg__body {
  color: var(--rm-text-muted);
  font-style: italic;
}
/* "Thinking…" wipe-and-reveal: a hard-edge mask sweeps left-to-right
   across the text, hiding it; then sweeps left-to-right again, revealing
   it. 2-second loop total: 1s wipe-out (hide), 1s wipe-in (reveal).
   The trick: a linear gradient with a hard stop, sized 300% wide, slides
   from left (text hidden) to right (text shown), animated continuously.
   We use background-clip:text so the gradient actually IS the text. */
.rm-thinking {
  display: inline-block;
  font-style: italic;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 33.33%,
    var(--rm-deep) 33.34%,
    var(--rm-deep) 66.66%,
    transparent 66.67%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: rm-thinking-wipe 2s linear infinite;
}
@keyframes rm-thinking-wipe {
  /* The gradient slides from right (visible block over text) to left (visible
     block past text). Total slide distance = full background-size width. */
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* "Awaiting response…" — same fade-right wipe as Thinking, but slower and
   in a muted tone. Sits at the bottom of the most recent finished Assistant
   message as a passive hint that the Assistant is waiting for the designer. */
.rm-msg__awaiting {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rm-border);
}
.rm-awaiting {
  display: inline-block;
  font-size: 11px;
  font-style: italic;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 33.33%,
    var(--rm-text-muted) 33.34%,
    var(--rm-text-muted) 66.66%,
    transparent 66.67%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: rm-thinking-wipe 6s linear infinite;
}

/* ----- Step 1 proposal tiles (PENDING only — resolved use .rm-prop-summary) ----- */
.rm-prop-tiles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 8px;
}
.rm-prop-tile {
  background: var(--rm-surface-warm);
  border: 1px solid var(--rm-border);
  border-left: 3px solid var(--rm-mint);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rm-prop-tile__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.rm-prop-tile__label {
  font-weight: 700;
  color: var(--rm-text);
  font-size: 11.5px;
}
.rm-prop-tile__status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
}
.rm-prop-tile__value {
  font-size: 12px;
  line-height: 1.5;
  color: var(--rm-text);
  white-space: pre-wrap;
  word-break: break-word;
  background: #FFFFFF;
  border-radius: 5px;
  padding: 6px 9px;
  border: 1px solid var(--rm-border);
}
.rm-prop-tile__actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.rm-prop-tile__actions .rm-chat-btn {
  font-size: 11.5px;
  padding: 5px 10px;
}

/* ----- Step 1 proposal summaries (resolved: accepted/rejected one-liners) ----- */
.rm-prop-summaries {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.rm-prop-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px;
  font-size: 11.5px;
  line-height: 1.4;
  border-radius: 4px;
  border: 1px solid transparent;
}
.rm-prop-summary--accepted {
  background: rgba(0, 208, 144, 0.08);
  border-color: rgba(0, 208, 144, 0.25);
  color: var(--rm-mint-dark);
}
.rm-prop-summary--rejected {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--rm-border);
  color: var(--rm-text-muted);
}
.rm-prop-summary__icon {
  font-weight: 800;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.rm-prop-summary__text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--rm-text);
}
.rm-prop-summary--rejected .rm-prop-summary__text { color: var(--rm-text-muted); }
.rm-prop-summary__val {
  color: var(--rm-text);
  font-weight: 500;
}
.rm-prop-summary--rejected .rm-prop-summary__val { color: var(--rm-text-muted); }
.rm-prop-summary__undo {
  font-family: var(--rm-font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--rm-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.rm-prop-summary__undo:hover {
  color: var(--rm-deep);
  background: #FFFFFF;
  border-color: var(--rm-border);
}

/* ----- Chat composer ----- */
.rm-chat-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--rm-border);
  padding: 10px 14px 12px 14px;
  background: #FAFCFD;
}
.rm-chat-input {
  font-family: var(--rm-font);
  font-size: 13px;
  line-height: 1.45;
  width: 100%;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 8px 10px;
  resize: vertical;
  min-height: 64px;
  background: #FFFFFF;
}
.rm-chat-input:focus {
  outline: none;
  border-color: var(--rm-mint);
  box-shadow: 0 0 0 3px rgba(0, 208, 144, 0.15);
}
.rm-chat-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rm-chat-actions .rm-spacer { flex: 1; }
.rm-chat-btn {
  font-family: var(--rm-font);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--rm-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}
.rm-chat-btn--go {
  background: var(--rm-mint);
  color: var(--rm-mint-dark);
  border-color: var(--rm-mint);
}
.rm-chat-btn--go:hover { background: #00E69E; }
.rm-chat-btn--go:disabled { opacity: 0.5; cursor: not-allowed; }
.rm-chat-btn--directive {
  background: #FFFFFF;
  color: var(--rm-mint-dark);
  border-color: var(--rm-mint);
}
.rm-chat-btn--directive:hover { background: rgba(0, 208, 144, 0.08); }
.rm-chat-btn--ghost {
  background: transparent;
  color: var(--rm-text-muted);
  border-color: var(--rm-border);
}
.rm-chat-btn--ghost:hover { color: var(--rm-text); border-color: var(--rm-text-muted); }

/* Voice-input (mic) button. Shows a microphone glyph plus a "Speak"/"Stop"
   label. While recording, the icon gains a soft mint pulse so the designer
   knows it's live. */
.rm-chat-btn--mic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rm-chat-btn__micicon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B635A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2' width='4' height='8' rx='2'/><path d='M4 8 V9 a4 4 0 0 0 8 0 V8'/><path d='M8 13 V14'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  flex: 0 0 auto;
}
.rm-chat-btn--mic-active {
  background: rgba(0, 208, 144, 0.10);
  border-color: var(--rm-mint);
  color: var(--rm-mint-dark);
}
.rm-chat-btn--mic-active .rm-chat-btn__micicon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23006B48' stroke='%23006B48' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2' width='4' height='8' rx='2'/><path d='M4 8 V9 a4 4 0 0 0 8 0 V8' fill='none'/><path d='M8 13 V14' fill='none'/></svg>");
  animation: rm-mic-pulse 1.4s ease-in-out infinite;
}
.rm-chat-btn--mic-unsupported { opacity: 0.4; cursor: not-allowed; }
@keyframes rm-mic-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* ============================================================
   Steps 2/3/4 — Summarise Proposed Changes button row
   (Sits below the regular chat composer; primary CTA for the
   chat → list flow.)
   ============================================================ */
.rm-chat-summarise {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--rm-border);
}
.rm-chat-summarise__btn {
  flex: 1;
  min-width: 200px;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 14px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rm-chat-summarise__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   Steps 2/3/4 — Proposed-Changes checklist (list view)
   ============================================================ */
.rm-proposals-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rm-proposal {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rm-proposal:hover {
  border-color: var(--rm-mint);
  background: rgba(0, 208, 144, 0.04);
}
.rm-proposal__check {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--rm-mint);
  cursor: pointer;
}
.rm-proposal__body {
  flex: 1;
  min-width: 0;
}
.rm-proposal__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--rm-text);
  font-weight: 500;
}
.rm-proposal__note {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--rm-text-muted);
  font-style: italic;
}
.rm-proposals-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--rm-text-muted);
}

/* ============================================================
   Alerts & overlays
   ============================================================ */
.rm-alert {
  padding: 12px 16px;
  border-radius: var(--rm-radius-sm);
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.rm-alert--warn { background: var(--rm-warn-bg); border-color: var(--rm-warn); color: #6B4900; }
.rm-alert--error { background: var(--rm-error-bg); border-color: var(--rm-error); color: #6B1A1A; }
.rm-alert--info { background: rgba(0, 80, 128, 0.06); border-color: rgba(0, 80, 128, 0.2); color: var(--rm-deep); }
.rm-alert--success { background: rgba(0, 208, 144, 0.08); border-color: var(--rm-mint); color: var(--rm-mint-dark); }

/* ============================================================
   Truncation banner — surfaces incomplete documents
   Sits above the editor on Steps 2/3/4 when stop_reason was max_tokens.
   Designed to be visually louder than .rm-alert so the designer
   notices an incomplete doc immediately on page load.
   ============================================================ */
.rm-trunc-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: var(--rm-warn-bg);
  border: 2px solid var(--rm-warn);
  border-radius: var(--rm-radius-sm);
  color: #6B4900;
  box-shadow: 0 2px 8px rgba(214, 158, 0, 0.18);
}
.rm-trunc-banner__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rm-warn);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.rm-trunc-banner__body {
  flex: 1;
  min-width: 0;
}
.rm-trunc-banner__title {
  font-weight: 800;
  font-size: 14.5px;
  color: #5A3A00;
  margin-bottom: 4px;
}
.rm-trunc-banner__msg {
  font-size: 13px;
  line-height: 1.45;
  color: #6B4900;
}
.rm-trunc-banner__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 140px;
}
.rm-trunc-banner__retry,
.rm-trunc-banner__dismiss {
  font-size: 12.5px;
  padding: 8px 12px;
}

/* Stack the banner vertically on narrow viewports */
@media (max-width: 760px) {
  .rm-trunc-banner { flex-direction: column; }
  .rm-trunc-banner__actions { flex-direction: row; }
}

.rm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 58, 92, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.rm-overlay--visible { display: flex; }

.rm-overlay__box {
  background: #FFFFFF;
  border-radius: var(--rm-radius);
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 280px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.rm-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--rm-border);
  border-top-color: var(--rm-mint);
  border-radius: 50%;
  animation: rm-spin 0.9s linear infinite;
}
@keyframes rm-spin { to { transform: rotate(360deg); } }

.rm-overlay__msg {
  font-size: 14px;
  color: var(--rm-text);
  font-weight: 600;
}

/* Rich overlay variant: wider box, two-line head, fact card */
.rm-overlay__box--rich {
  width: min(560px, calc(100vw - 48px));
  min-width: 0;
  padding: 26px 28px 24px 28px;
  align-items: stretch;
  gap: 18px;
}

/* Streaming overlay variant: wider still, scrollable live-text panel.
   Used when generation is streaming text into the overlay. */
.rm-overlay__box--stream {
  width: min(820px, calc(100vw - 48px));
  min-width: 0;
  padding: 22px 26px 22px 26px;
  align-items: stretch;
  gap: 14px;
}
.rm-overlay__box--stream .rm-overlay__row {
  align-items: center;
}
.rm-overlay__stream-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--rm-mint-dark);
  letter-spacing: 0.02em;
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
.rm-overlay__stream {
  background: var(--rm-bg);
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--rm-font-mono, ui-monospace), monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rm-text);
  white-space: pre-wrap;
  word-break: break-word;
  height: min(420px, 50vh);
  overflow-y: auto;
  scroll-behavior: smooth;
}
.rm-overlay__row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.rm-overlay__head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rm-overlay__box--rich .rm-overlay__msg {
  font-size: 15px;
  font-weight: 700;
  color: var(--rm-deep);
}
.rm-overlay__timer {
  font-size: 12.5px;
  color: var(--rm-text-muted);
  font-variant-numeric: tabular-nums;
}
.rm-overlay__timer--over {
  color: var(--rm-warn);
  font-weight: 600;
}
.rm-overlay__fact-card {
  background: var(--rm-surface-warm, #F8F6F0);
  border: 1px solid var(--rm-border);
  border-left: 3px solid var(--rm-mint);
  border-radius: var(--rm-radius-sm);
  padding: 14px 18px 16px 18px;
  min-height: 100px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.rm-overlay__fact-card--in {
  opacity: 1;
  transform: translateY(0);
}
.rm-overlay__fact-eyebrow {
  text-align: center;
  font-family: var(--rm-font);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rm-mint-dark);
  margin-bottom: 6px;
}
.rm-overlay__fact-title {
  text-align: center;
  font-family: var(--rm-font);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--rm-deep);
  margin-bottom: 8px;
  line-height: 1.25;
}
.rm-overlay__fact-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--rm-text);
}
.rm-overlay__factmeta {
  font-size: 11px;
  color: var(--rm-text-muted);
  font-style: italic;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ============================================================
   Empty states
   ============================================================ */
.rm-empty {
  background: var(--rm-surface);
  border: 1.5px dashed var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 48px 32px;
  text-align: center;
  color: var(--rm-text-muted);
}
.rm-empty h3 { color: var(--rm-text); margin: 0 0 8px 0; }
.rm-empty p { margin: 0 0 18px 0; }

/* ============================================================
   Setup page
   ============================================================ */
.rm-setup {
  max-width: 580px;
  margin: 60px auto;
  padding: 0 24px;
}

/* ============================================================
   Landing page
   ============================================================ */
.rm-landing {
  max-width: 880px;
  margin: 24px auto;
  padding: 0 24px;
}
.rm-landing__hero {
  text-align: center;
  margin-bottom: 16px;
}
.rm-landing__hero h1 {
  font-family: var(--rm-font-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 8px 0;
}
.rm-landing__hero h1 em {
  font-style: italic;
  color: var(--rm-rose);
  font-weight: 500;
}
.rm-landing__hero p {
  font-family: var(--rm-font);
  font-size: 14px;
  color: var(--rm-text-muted);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.5;
}
.rm-landing__steps {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}
.rm-landing__step {
  flex: 1 1 0;
  min-width: 0;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 12px;
  cursor: default;
}
.rm-landing__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--rm-mint);
  user-select: none;
  width: 14px;
}
.rm-landing__step h4 { margin: 6px 0 3px 0; font-size: 13px; color: var(--rm-deep); }
.rm-landing__step p { font-size: 12px; color: var(--rm-text-muted); margin: 0; line-height: 1.4; }
.rm-landing__step-num {
  display: inline-flex;
  width: 22px;
  height: 22px;
  background: var(--rm-mint);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 12px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.rm-landing__cta {
  text-align: center;
  margin-top: 12px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .rm-form-col__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .rm-form-shell {
    grid-template-columns: 1fr !important;
  }
  .rm-editor-shell {
    grid-template-columns: 1fr !important;
  }
  .rm-chat-panel { position: static; max-height: none; }
  .rm-resize-handle { display: none; }
}

@media (max-width: 760px) {
  :root { --rm-topbar-h: 84px; }
  .rm-topbar__title { font-size: 22px; margin-left: 16px; }
  .rm-topbar__logo { height: 60px; width: 158px; margin-right: 12px; margin-top: -10px; }
  .rm-topbar__right { gap: 8px; }
  .rm-keybadge { font-size: 11px; padding: 5px 10px; }
  .rm-sidebar { display: none; }
  .rm-main { padding: 22px 18px 60px 18px; }
  .rm-form-col__fields { grid-template-columns: 1fr !important; }
  .rm-landing__steps {
    flex-direction: column;
    align-items: stretch;
  }
  .rm-landing__arrow {
    width: auto;
    height: 22px;
    transform: rotate(90deg);
  }
  .rm-landing__hero h1 { font-size: 28px; }
}