/* ==========================================================================
   RelationshipAI — design system
   ========================================================================== */

:root {
  --bg: #17130f;
  --bg-elevated: #1f1911;
  --surface: #241d14;
  --surface-hover: #2c2318;
  --border: rgba(250, 235, 215, 0.09);
  --border-strong: rgba(250, 235, 215, 0.18);
  --text: #f6efe4;
  --text-muted: #b6a795;
  /* Lightened from the original #7d7062 — that shade only hit 3.4-3.8:1
     against --bg/--surface, below WCAG AA (4.5:1), and it's what disclaimer
     and fine-print copy across the app is set in (footer, summary/insights
     disclaimers, pricing/compare notes, partner context) — text meant to be
     actually read, not truly decorative, so it needs to actually pass. */
  --text-faint: #9c8d7c;

  --accent-1: #d1a05a;
  --accent-2: #a8455c;
  --accent-grad: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  /* --accent-2 itself is too dark against --bg to pass WCAG AA (3.2:1) as
     standalone text — fine for a gradient stop, a border or a background
     tint, but not for the tag/label/link text that was using it directly.
     Same hue, lightened, used only where --accent-2 is doing double duty
     as body-readable text. */
  --accent-2-text: #cf6a82;

  --success: #8bab6f;
  --danger: #c1655a;
  --danger-bg: rgba(193, 101, 90, 0.14);
  /* Lighter than --danger, for error/warning text set directly on
     --danger-bg (needs to read clearly on that tinted background) — was
     duplicated as a raw hex in two separate places. */
  --danger-text: #e59089;

  /* Near-black used wherever something sits on a light/accent-colored
     surface (text on a gold gradient button/badge, a dark button on the
     light CTA banner) — one token instead of the same hex retyped ~16
     times, which had drifted into two different near-blacks by mistake. */
  --ink: #1a140d;

  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 9px;
  /* Two different values (100px and 999px) were used interchangeably for
     "fully round" pill shapes — same visual result at these element sizes,
     just accidental drift. One token now. */
  --radius-pill: 999px;

  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

  --max-width: 1120px;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  font-family: var(--font-body);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 16px;
  color: var(--text-muted);
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

.text-muted {
  color: var(--text-muted);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-gradient {
  background: var(--accent-grad);
  color: var(--ink);
}

.btn-gradient:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn-primary {
  background: var(--accent-1);
  color: var(--ink);
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--surface-hover);
}

.btn-danger {
  background: transparent;
  border-color: rgba(193, 101, 90, 0.4);
  color: var(--danger-text);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 9px 16px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------- */
/* Nav                                                                     */
/* ---------------------------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 24px;
  position: relative;
  z-index: 20;
}

.brand {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand span {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14.5px;
}

.nav-links a:not(.btn) {
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.nav-links a:not(.btn):hover {
  color: var(--text);
}

/* The two flagship features (Coach Chat, Partner Practice) get more visual
   weight than the rest of the nav, so wherever you are in the app it's
   always clear which two things are the point and which are extras — see
   the matching treatment on .mode-tab / .sidebar-tools below (chat.html's
   own sidebar, not this shared nav). */
.nav-links a.nav-primary {
  color: var(--text);
  font-weight: 600;
}

.nav-links .nav-sep {
  width: 1px;
  height: 16px;
  background: var(--border-strong);
}

/* Marks which nav item is the page you're currently on, so the nav also
   works as a "you are here" — not just a list of places to go. */
.nav-links a.nav-current {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 24px 40px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}

.hero h1 {
  font-size: clamp(34px, 5.5vw, 60px);
  font-weight: 500;
  max-width: 900px;
  margin: 0 auto 20px;
}

.hero h1 .grad {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  max-width: 640px;
  margin: 0 auto 32px;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hero-note {
  font-size: 13px;
  color: var(--text-faint);
}

.hero-mock {
  max-width: 720px;
  margin: 56px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.hero-mock .mock-row {
  display: flex;
  margin: 10px 0;
}

.hero-mock .mock-row.user {
  justify-content: flex-end;
}

.hero-mock .bubble {
  max-width: 75%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14px;
}

.hero-mock .mock-row.user .bubble {
  background: var(--accent-1);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}

.hero-mock .mock-row.ai .bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

/* ---------------------------------------------------------------------- */
/* Sections                                                                 */
/* ---------------------------------------------------------------------- */

section {
  padding: 80px 0;
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

.section-tag {
  color: var(--accent-2-text);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  display: block;
}

/* Features */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.feature-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--ink);
}

.feature-card h3 {
  font-size: 17px;
}

.feature-card p {
  font-size: 14.5px;
  margin: 0;
}

/* How it works */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 8px;
}

.step .step-number {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-2-text);
  margin-bottom: 10px;
}

.step h3 {
  font-size: 18px;
}

.step p {
  font-size: 14.5px;
}

/* Pricing */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.price-card.featured {
  border-color: var(--accent-1);
  background: linear-gradient(180deg, rgba(209, 160, 90, 0.14), var(--surface) 40%);
}

.price-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--accent-grad);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.price-persona {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.price-card.featured .price-persona {
  color: var(--accent-2-text);
}

.price-card h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.price-value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  margin: 10px 0 4px;
}

.price-value span {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}

.price-desc {
  font-size: 14px;
  margin-bottom: 22px;
}

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  flex: 1;
}

.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
  padding: 7px 0;
}

.price-features li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  stroke: var(--success);
}

.pricing-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 32px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-guarantee svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--accent-2);
}

.pricing-note {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-faint);
  margin-top: 14px;
}

/* FAQ */

.faq {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 18px 4px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 12px 0 0;
  font-size: 14.5px;
}

/* CTA banner */

.cta-banner {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--accent-grad);
  border-radius: var(--radius-lg);
  padding: 56px 32px;
  text-align: center;
}

.cta-banner h2 {
  color: var(--ink);
  font-size: 30px;
}

.cta-banner p {
  color: rgba(26, 20, 13, 0.75);
}

.cta-banner .btn {
  background: var(--ink);
  color: var(--text);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 24px;
  text-align: center;
}

.footer-disclaimer {
  max-width: 640px;
  margin: 0 auto 16px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.footer-copy {
  font-size: 13px;
  color: var(--text-faint);
}

.footer-copy a {
  color: var(--text-faint);
  text-decoration: underline;
}

.footer-copy a:hover {
  color: var(--text);
}

/* Hero stats strip */

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
  margin: 8px auto 0;
}

.hero-stat {
  text-align: center;
}

.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
}

.hero-stat span {
  display: block;
  font-size: 11.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  max-width: 120px;
  margin: 2px auto 0;
}

/* Compare table */

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 14px;
}

.compare-table th,
.compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.compare-table td:first-child {
  color: var(--text-muted);
  white-space: normal;
}

.compare-table .compare-highlight {
  background: rgba(209, 160, 90, 0.1);
}

.compare-table th.compare-highlight {
  color: var(--accent-1);
}

.compare-table .yes {
  color: var(--success);
  font-weight: 600;
}

.compare-table .no {
  color: var(--text-faint);
}

.compare-table .partial {
  color: var(--text-muted);
}

.compare-table .na {
  color: var(--text-faint);
}

/* Icon prefixes so the table reads at a glance, not just by parsing words. */
.compare-table .yes::before {
  content: "✓";
  display: inline-block;
  margin-right: 7px;
  color: var(--success);
  font-weight: 700;
}

.compare-table .no::before {
  content: "✕";
  display: inline-block;
  margin-right: 7px;
  color: var(--danger);
  font-weight: 700;
}

.compare-table .partial::before {
  content: "±";
  display: inline-block;
  margin-right: 7px;
  color: var(--accent-1);
  font-weight: 700;
}

.compare-note {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-faint);
  max-width: 560px;
  margin: 24px auto 0;
}

/* Approach / mission */

.mission-block {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.mission-block .section-tag {
  display: block;
  margin-bottom: 10px;
}

.mission-signature {
  margin-top: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--text-muted);
}

/* Our Method page */

.method-block {
  max-width: 720px;
  margin: 0 auto 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.method-block:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.method-block h3 {
  font-size: 21px;
  margin-bottom: 12px;
}

.method-sources {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}

.method-sources a {
  color: var(--accent-1);
}

.method-honesty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
}

.method-honesty h3 {
  margin-bottom: 12px;
}

/* Trust row */

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.trust-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-icon svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent-1);
}

.trust-item h3 {
  font-size: 14.5px;
  margin-bottom: 2px;
}

.trust-item p {
  font-size: 13px;
  margin: 0;
}

/* Mission / approach block */

.mission-block {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.mission-block .section-tag {
  display: inline-block;
}

.mission-block p {
  font-size: 16px;
}

/* ---------------------------------------------------------------------- */
/* Therapist summary export                                                */
/* ---------------------------------------------------------------------- */

.summary-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.summary-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.summary-actions-right {
  display: flex;
  gap: 10px;
}

.summary-paper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}

.summary-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.summary-brand {
  display: inline-block;
  margin-bottom: 14px;
}

.summary-header h1 {
  font-size: 26px;
  margin-bottom: 6px;
}

.summary-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.summary-loading,
.summary-generated-at {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 20px;
}

.summary-section {
  font-size: 16px;
  margin: 26px 0 8px;
}

.summary-section:first-child {
  margin-top: 0;
}

#summary-state p {
  font-size: 15px;
  color: var(--text);
  margin: 0 0 10px;
}

#summary-state ul {
  margin: 0 0 10px;
  padding-left: 20px;
}

#summary-state li {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 6px;
}

.summary-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.summary-disclaimer {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 0;
}

@media print {
  .no-print,
  .site-nav,
  .sidebar,
  .site-footer {
    display: none !important;
  }

  body {
    background: #fff;
    color: var(--ink);
  }

  .summary-shell {
    max-width: 100%;
    padding: 0;
  }

  .summary-paper {
    background: #fff;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .summary-header,
  .summary-footer {
    border-color: #ddd;
  }

  .summary-subtitle,
  .summary-loading,
  .summary-generated-at,
  .summary-disclaimer {
    color: #555;
  }

  .summary-section,
  #summary-state p,
  #summary-state li,
  .summary-header h1 {
    color: var(--ink);
  }

  .brand span {
    -webkit-text-fill-color: var(--ink);
    background: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Auth pages                                                               */
/* ---------------------------------------------------------------------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-brand {
  margin-bottom: 28px;
  font-size: 23px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.auth-card h1 {
  font-size: 23px;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.auth-card label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 10px;
}

.auth-card input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.15s ease;
}

.auth-card input:focus {
  border-color: var(--accent-1);
}

.auth-card .btn {
  margin-top: 18px;
}

.auth-switch {
  text-align: center;
  font-size: 14px;
  margin: 18px 0 0;
}

.auth-switch a {
  color: var(--accent-2-text);
  font-weight: 600;
}

.auth-forgot {
  text-align: right;
  margin: 6px 0 0;
}

.auth-forgot a {
  font-size: 12.5px;
  color: var(--text-faint);
}

.auth-forgot a:hover {
  color: var(--text-muted);
}

.form-error {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid rgba(193, 101, 90, 0.35);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-top: 14px;
}

/* Modifier for a .form-error that also carries an action button (e.g. the
   composer's "daily limit reached" notice with an Upgrade button) — lays
   the message and button out side by side instead of stacking oddly. */
.form-error.form-error-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.form-error-with-action .btn {
  flex-shrink: 0;
}

.success-banner {
  background: rgba(139, 171, 111, 0.14);
  color: var(--success);
  border: 1px solid rgba(139, 171, 111, 0.35);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 16px;
}

.billing-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------- */
/* App shell (chat)                                                        */
/* ---------------------------------------------------------------------- */

.app-shell {
  display: flex;
  height: 100vh;
  width: 100%;
}

.sidebar {
  width: 270px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

/* Sidebar conversation search (task #95) — plain client-side title filter.
   Sits directly above the conversation list itself (below Tools, not
   above it) since it only ever filters .sidebar-history, not the Tools
   links. Native type="search" gives a built-in clear (✕) affordance in
   most browsers for free. */
.history-search {
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
}

.history-search:focus {
  border-color: var(--accent-1);
}

.sidebar-history {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* "Tools" group — every mode and secondary page one click away from the
   chat (Coach, Practice, Insights, Daily question, Share with partner),
   gathered under one labeled section near the top of the sidebar (above
   the conversation history) so they read as a set instead of being
   scattered across the old topbar pill (Coach/Practice/Insights) and the
   bottom of the sidebar (Share/Daily question used to live in
   .sidebar-bottom next to My account/Log out, which are account-level,
   not modes/tools). Same drawer markup serves the ≤640px off-canvas
   sidebar too, so this shows up consistently on mobile as well — and
   since it's always present here, the old topbar-only pill and the
   mobile-only sidebar-modes nav were retired in favor of this one list. */
.sidebar-tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 4px 10px 6px;
}

/* Coach/Practice live in this same vertical list now, styled to match the
   plain .sidebar-link rows around them (full-width, left-aligned) rather
   than their old horizontal pill shape — .mode-tab still supplies the
   color/weight/active logic (and chat.js's data-mode wiring), this just
   overrides layout for the vertical context. */
.sidebar-tools .mode-tab {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: 13.5px;
}

.sidebar-tools .mode-tab.active {
  background: var(--accent-grad);
  color: var(--ink);
}

/* Recency section headers ("Today", "Yesterday", …) above each group of
   .chat-item rows — see historyBucketLabel/renderHistory in chat.js. */
.history-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 12px 12px 4px;
}

.history-group-label:first-child {
  padding-top: 4px;
}

.chat-item {
  padding: 10px 6px 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.chat-item.active {
  background: var(--surface-hover);
  color: var(--text);
  border-left: 2px solid var(--accent-2);
}

/* Mode icon (💬 Coach / 🎭 Practice) prefixing each history row — task
   #95's replacement for the old plain color dot, matching the mode tabs
   right below this list and dashboard.js's own conversation list. */
.chat-item-icon {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
}

.chat-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pin indicator (task #97) — small muted pushpin shown next to the icon of
   any conversation the user has pinned from the "⋮" menu below. Pinned
   conversations are also grouped into their own "📌 Pinned" section above
   the date buckets — see appendHistoryGroups in chat.js. */
.chat-item-pin-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--accent-2);
  opacity: 0.85;
}

.chat-item-pin-icon svg {
  width: 11px;
  height: 11px;
}

/* "⋮" per-conversation options trigger (task #97), replacing the old
   always-a-trash-can button — reveals Pin/Rename/Delete in an anchored
   popover (.chat-item-menu below) styled to match the rest of the app
   rather than copying Claude.ai's own chrome. Same hover-reveal shape as
   the button it replaces; kept subtle since every row has one. */
.chat-item-menu-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.chat-item:hover .chat-item-menu-btn,
.chat-item:focus-within .chat-item-menu-btn,
.chat-item-menu-btn[aria-expanded="true"] {
  opacity: 1;
}

.chat-item-menu-btn:hover,
.chat-item-menu-btn[aria-expanded="true"] {
  background: var(--surface-hover);
  color: var(--text);
}

.chat-item-menu-btn svg {
  width: 15px;
  height: 15px;
}

/* Anchored popover opened by .chat-item-menu-btn — appended to <body> and
   positioned by chat.js's openHistoryMenu() (fixed, computed from the
   trigger's bounding rect) rather than living inside .sidebar-history, so it
   is never clipped by that container's overflow-y: auto. */
.chat-item-menu {
  position: fixed;
  z-index: 110;
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-item-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.chat-item-menu-item:hover,
.chat-item-menu-item:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.chat-item-menu-item svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
}

.chat-item-menu-item-danger {
  color: var(--danger-text);
}

.chat-item-menu-item-danger svg {
  color: var(--danger);
}

.chat-item-menu-item-danger:hover,
.chat-item-menu-item-danger:focus-visible {
  background: var(--danger-bg);
}

/* "View all conversations" link (task #97) — the sidebar itself only shows
   pinned + the most recent HISTORY_SIDEBAR_RECENT_LIMIT conversations (see
   renderHistory in chat.js) to keep it short and scannable; this opens
   history-modal-overlay below for the full, searchable list. */
.history-view-all-btn {
  width: 100%;
  margin-top: 2px;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.history-view-all-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.history-empty {
  font-size: 13px;
  color: var(--text-faint);
  padding: 10px 12px;
}

/* "View all conversations" modal (task #97) — same .modal-overlay backdrop
   as every other dialog in the app, a wider/taller card so a long history
   has real room, laid out as header + search (fixed) above a scrolling
   list, reusing the exact same row markup (buildHistoryItem) and "⋮" menu
   as the sidebar. */
.history-modal-card {
  max-width: 540px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
}

.history-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.history-modal-header h3 {
  font-size: 17px;
  margin: 0;
}

.history-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.history-modal-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.history-modal-search {
  margin-top: 0;
  flex-shrink: 0;
}

.history-modal-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.sidebar-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
}

.sidebar-link:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* Off-canvas drawer chrome — hidden on desktop, where the sidebar is
   always visible in the flex row. Only the 640px media query below turns
   these on and gives the sidebar its fixed-position drawer behavior. */

.sidebar-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.sidebar-toggle:hover {
  background: var(--surface-hover);
}

.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

.sidebar-close-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.sidebar-backdrop {
  display: none;
}

.chat-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.chat-topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  gap: 16px;
}

.user-label {
  font-size: 13.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.topbar-account {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Was relying on .chat-topbar's justify-content: space-between to push
     this to the right against the mode-tabs pill that used to sit beside
     it — now that Coach/Practice moved into the sidebar (see
     .sidebar-tools) this is often the only visible child of .chat-topbar
     (sidebar-toggle is display:none above 640px), and a lone flex child
     under space-between sits at the start, not the end. margin-left: auto
     pins it to the right regardless of what else is in the bar. */
  margin-left: auto;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.plan-badge:hover {
  border-color: var(--accent-1);
  transform: translateY(-1px);
}

.plan-badge.plan-badge-paid {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--ink);
}

/* Free-plan daily AI usage counter ("5/8 today") next to the plan badge —
   hidden entirely for Pro/Premium (see renderUsageBadge in chat.js), since
   they have no daily cap to track. Turns to the "near/at limit" color once
   there's 1 message left or none, as an early warning before the hard stop
   the person would otherwise only discover by hitting send and failing. */
.usage-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-faint);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.usage-badge:hover {
  border-color: var(--accent-1);
  color: var(--text-muted);
}

.usage-badge.usage-badge-low {
  border-color: rgba(193, 101, 90, 0.4);
  color: var(--danger);
}

/* Mode switcher — Coach/Practice, now living as rows inside .sidebar-tools
   (see the .sidebar-tools .mode-tab override above for the vertical
   layout); these three rules still supply the shared color/weight/active
   look and the hover state that chat.js's setActiveTab() toggles. */

.mode-tab {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.mode-tab:hover {
  color: var(--text);
}

.mode-tab.active {
  background: var(--accent-grad);
  color: var(--ink);
}

.chat-messages {
  width: 100%;
  max-width: 768px;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  overflow-y: auto;
}

.empty-chat {
  margin: auto;
  text-align: center;
  max-width: 420px;
}

.empty-chat h2 {
  font-size: 23px;
}

/* Dismissible "more detail = more specific advice" tip (task #97) shown in
   Coach Chat's empty state — see renderEmptyState/DETAIL_TIP_DISMISSED_KEY
   in chat.js. */
.empty-chat-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
}

.empty-chat-tip span {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

#empty-chat-tip-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#empty-chat-tip-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.message-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 10px 0;
}

.message-row.ai,
.message-row.partner {
  align-items: flex-start;
}

.message-row.user {
  align-items: flex-end;
}

.message-role-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin: 0 4px 4px;
}

.user-msg {
  background: var(--accent-1);
  color: var(--ink);
  padding: 11px 15px;
  border-radius: 18px 18px 4px 18px;
  max-width: 72%;
  display: inline-block;
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 14.5px;
}

.ai-msg {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 15px;
  border-radius: 18px 18px 18px 4px;
  max-width: 72%;
  display: inline-block;
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 14.5px;
}

.partner-msg {
  background: linear-gradient(160deg, rgba(168, 69, 92, 0.22), var(--surface) 60%);
  border: 1px solid rgba(168, 69, 92, 0.35);
  color: var(--text);
  padding: 11px 15px;
  border-radius: 18px 18px 18px 4px;
  max-width: 72%;
  display: inline-block;
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 14.5px;
}

.input-area {
  width: 100%;
  max-width: 768px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}

.input-area textarea {
  flex: 1;
  resize: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  outline: none;
  font-family: var(--font-body);
  font-size: 14.5px;
  max-height: 140px;
}

.input-area textarea:focus {
  border-color: var(--accent-1);
}

.attach-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.attach-btn:hover {
  border-color: var(--accent-1);
  color: var(--text);
}

.attach-btn svg {
  width: 18px;
  height: 18px;
}

.mic-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mic-btn:hover {
  border-color: var(--accent-1);
  color: var(--text);
}

.mic-btn svg {
  width: 18px;
  height: 18px;
}

.mic-btn.listening {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
  animation: mic-pulse 1.4s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(193, 101, 90, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(193, 101, 90, 0);
  }
}

/* Mic button sits beside the textarea as its own control (same pattern as
   the chat composer's .composer-row) rather than floating on top of it —
   nothing to overlap the text you're typing. */
.textarea-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.textarea-row textarea {
  flex: 1;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mic-btn.listening {
    animation: none;
  }
}

/* Named for the voice-mode orb this was originally built for (since
   removed) — kept because .speak-btn.loading below still uses it for its
   fetch-while-waiting pulse. */
@keyframes voice-orb-fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.attachment-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* Shown above the composer while editing & resending the last Coach Chat
   message (see startEditLastMessage in chat.js) — same slot .attachment-preview
   uses, so it stacks the same way when both happen to be visible. */
.edit-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.edit-mode-banner #cancel-edit-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 4px;
  text-decoration: underline;
}

.edit-mode-banner #cancel-edit-btn:hover {
  color: var(--text);
}

.attachment-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 5px 10px 5px 5px;
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 220px;
}

.attachment-chip-thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-hover);
}

.attachment-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-chip-remove {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px;
  flex-shrink: 0;
}

.attachment-chip-remove:hover {
  color: var(--danger);
}

/* Attachments rendered inside a sent/received message bubble */

.message-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.msg-text:empty + .message-attachments,
.msg-text[style*="display: none"] + .message-attachments {
  margin-top: 0;
}

.attachment-image-link img {
  max-width: 240px;
  max-height: 240px;
  border-radius: 12px;
  display: block;
  border: 1px solid var(--border);
}

.attachment-video-wrap video {
  max-width: 260px;
  max-height: 260px;
  border-radius: 12px;
  display: block;
  background: #000;
}

.attachment-file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  max-width: 240px;
}

.attachment-file-chip .attachment-file-meta {
  overflow: hidden;
}

.attachment-file-chip .attachment-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  display: block;
}

.attachment-file-chip .attachment-file-size {
  font-size: 11px;
  color: var(--text-faint);
}

.chat-disclaimer {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 14px;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Practice mode — partner profile setup                                   */
/* ---------------------------------------------------------------------- */

.practice-setup {
  margin: 28px auto 40px;
  width: 100%;
  max-width: 520px;
  text-align: left;
}

.practice-setup-intro {
  text-align: center;
  margin-bottom: 26px;
}

.practice-setup-intro h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.practice-setup-intro p {
  max-width: 420px;
  margin: 0 auto;
}

/* Free-plan lifetime-rehearsal counter on the Practice setup screen (task
   #92) — see renderPracticeLimitBanner in chat.js. Neutral/informational
   while rehearsals remain; the .practice-limit-banner-exhausted modifier
   (once used up) borrows the same danger-toned look as .form-error so the
   "you're out, upgrade to Pro" state reads as clearly as any other blocked
   action, with its Upgrade button laid out the same way as
   .form-error-with-action. */
.practice-limit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.practice-limit-banner.practice-limit-banner-exhausted {
  background: var(--danger-bg);
  border-color: rgba(193, 101, 90, 0.35);
  color: var(--danger-text);
}

.practice-limit-banner .btn {
  flex-shrink: 0;
}

.partner-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
  text-align: left;
}

.partner-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.partner-card:hover {
  border-color: var(--accent-2);
}

.partner-card .partner-name {
  font-weight: 600;
  font-size: 14.5px;
}

.partner-card-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.partner-card-info {
  min-width: 0;
  flex: 1;
}

.partner-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.partner-card-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.partner-card-icon-btn:hover {
  opacity: 1;
}

.partner-card-icon-btn svg {
  width: 15px;
  height: 15px;
}

.partner-card-delete:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.partner-card-edit:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.partner-form-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.partner-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.partner-learn-row {
  padding: 0 4px;
}

.partner-learn-meta {
  font-size: 12px;
  color: var(--text-faint);
}

.partner-learn-toggle {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
}

.partner-learned-box {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  line-height: 1.45;
  white-space: pre-line;
}

.partner-import-row {
  margin-top: 2px;
}

.partner-import-form {
  margin-top: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.partner-import-textarea {
  width: 100%;
  min-height: 100px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  resize: none;
  margin-bottom: 8px;
}

.partner-import-textarea:focus {
  border-color: var(--accent-1);
}

.partner-import-submit {
  margin-top: 2px;
}

.partner-card .partner-context {
  font-size: 12.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-form {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.partner-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 14px 0 6px;
}

.partner-form label:first-child {
  margin-top: 0;
}

.partner-form input,
.partner-form textarea,
.partner-form select {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  resize: none;
}

.partner-form input:focus,
.partner-form textarea:focus,
.partner-form select:focus {
  border-color: var(--accent-1);
}

.partner-style-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-2-text);
  background: rgba(168, 69, 92, 0.14);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Practice setup: a single grouped card (scenario, intensity, role-swap)
   instead of loose fields floating directly on the page background — see
   .practice-setup-partners below for the separate "who with" step. */
.practice-setup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 22px;
}

.practice-setup-field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.practice-setup-field input[type="text"] {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
}

.practice-setup-field input[type="text"]:focus {
  border-color: var(--accent-1);
}

.scenario-library-toggle {
  display: inline-block;
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-1);
  cursor: pointer;
  font-family: var(--font-body);
}

.scenario-library-toggle:hover {
  text-decoration: underline;
}

.scenario-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.scenario-chip {
  font-size: 12.5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}

.scenario-chip:hover {
  border-color: var(--accent-1);
  color: var(--text);
}

.practice-setup-divider {
  height: 1px;
  background: var(--border);
  margin: 22px 0;
}

/* Intensity: two selectable cards instead of a plain <select> — the actual
   value lives on a hidden #practice-intensity <select> (see chat.js), kept
   in sync by the buttons, so the rest of the code just reads .value as
   before. */
.intensity-toggle {
  display: flex;
  gap: 8px;
}

.intensity-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.intensity-option:hover {
  border-color: var(--accent-1);
}

.intensity-option.is-active {
  border-color: var(--accent-1);
  background: rgba(209, 160, 90, 0.12);
}

.intensity-option-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.intensity-option-desc {
  font-size: 11.5px;
  color: var(--text-faint);
}

/* Role swap: a proper on/off switch (built on a real checkbox — see
   chat.js) instead of a small native checkbox crammed next to two lines of
   wrapped label text. */
.role-swap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  cursor: pointer;
}

.role-swap-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.role-swap-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.role-swap-desc {
  font-size: 11.5px;
  color: var(--text-faint);
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 23px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch input:checked ~ .switch-track {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.switch input:checked ~ .switch-track .switch-thumb {
  transform: translateX(17px);
  background: var(--ink);
}

.switch input:focus-visible ~ .switch-track {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}

.practice-setup-partners .practice-setup-field-label {
  margin-bottom: 10px;
}

@media (max-width: 420px) {
  .intensity-toggle {
    flex-direction: column;
  }
}

.speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px;
  margin-top: 6px;
  line-height: 1;
}

.speak-btn svg {
  width: 15px;
  height: 15px;
}

.speak-btn:hover {
  color: var(--accent-1);
}

.speak-btn.speaking {
  color: var(--accent-1);
}

/* Brief fetch-while-waiting state (POST /api/voice/speak) before natural
   TTS audio is ready to play — didn't exist for the old instant-start
   browser speechSynthesis version. Reuses the same fade pulse as the voice
   mode orb's "thinking"/"speaking" states for a consistent feel. */
.speak-btn.loading {
  color: var(--accent-1);
  animation: voice-orb-fade 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .speak-btn.loading {
    animation: none;
    opacity: 0.7;
  }
}

.feedback-buttons {
  display: flex;
  gap: 2px;
  margin-top: 6px;
}

/* Copy button(s) for a coach reply's drafted, ready-to-send message — see
   extractDraftedMessages in chat.js. Sits between the reply text and the
   feedback thumbs, small and ghost-styled so it reads as a utility action,
   not another piece of the coaching content. */
.copy-draft-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.copy-draft-btn {
  font-size: 12.5px;
  padding: 5px 12px;
}

.feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
}

.feedback-btn svg {
  width: 14px;
  height: 14px;
}

.feedback-btn:hover {
  color: var(--text-muted);
  background: var(--surface-hover);
}

.feedback-btn-up.active {
  color: var(--success);
}

.feedback-btn-down.active {
  color: var(--danger);
}

/* "✏️ Edit" affordance on the last user message in Coach Chat (see
   refreshEditAffordance in chat.js) — right-aligned under the bubble to
   match .message-row.user's align-items: flex-end, ghost-styled like
   .speak-btn/.feedback-btn so it doesn't compete with the message itself. */
.edit-msg-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.edit-msg-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 3px 4px;
  font-size: 12px;
  line-height: 1;
}

.edit-msg-btn:hover {
  color: var(--accent-1);
}

.partner-banner {
  width: 100%;
  max-width: 768px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(120deg, rgba(168, 69, 92, 0.16), var(--surface));
  border: 1px solid rgba(168, 69, 92, 0.3);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 10px 20px 0;
  font-size: 13px;
}

.partner-banner strong {
  color: var(--text);
}

.partner-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.partner-banner-scenario {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-banner-tags {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-2-text);
}

.coach-tag-bar {
  width: 100%;
  max-width: 768px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 16px;
  margin: 8px 20px 0;
  font-size: 12.5px;
}

.coach-tag-label {
  color: var(--text-faint);
  white-space: nowrap;
}

.coach-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coach-tag-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.coach-tag-chip:hover {
  border-color: var(--accent-2);
}

.coach-tag-chip.active {
  background: rgba(168, 69, 92, 0.14);
  border-color: var(--accent-2);
  color: var(--text);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Tool pages (Share, Insights, Together/daily question)                  */
/* ---------------------------------------------------------------------- */

.tool-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.tool-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 36px;
}

.tool-header h1 {
  font-size: 30px;
}

/* Safety notice card — fixed crisis resources, shown alongside (never
   instead of) an AI reply. Used on chat.html. */

.safety-notice {
  max-width: 640px;
  margin: 10px auto 18px;
  padding: 16px 20px;
  background: var(--danger-bg);
  border: 1px solid rgba(193, 101, 90, 0.35);
  border-radius: var(--radius);
}

.safety-notice-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--danger);
  margin-bottom: 8px;
}

.safety-notice-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-line;
}

/* Practice debrief card — a short AI-generated readout (what went well,
   what to watch for, one tip) after a Partner Practice rehearsal. Used on
   chat.html; see POST /api/conversations/:id/debrief in server.js. */

.practice-debrief-card {
  max-width: 640px;
  margin: 10px auto 18px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.practice-debrief-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 12px;
}

.practice-debrief-section {
  margin-bottom: 12px;
}

.practice-debrief-section:last-of-type {
  margin-bottom: 0;
}

.practice-debrief-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.practice-debrief-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

/* Thumbs up/down row on the debrief card (task #93) — reuses .feedback-buttons'
   button styling (same look as Coach Chat's per-message feedback) but adds
   a leading label and its own spacing, since here it sits inside a card's
   content flow rather than tucked under a chat bubble. */
.practice-debrief-feedback {
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}

.practice-debrief-feedback-label {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-right: 2px;
}

.practice-debrief-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Connection-score trend chart (Insights page) */

.trend-tooltip {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.trend-tooltip strong {
  color: var(--text);
  font-size: 13px;
}

.trend-tooltip span {
  color: var(--text-faint);
}

.trend-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 10px;
}

.trend-list-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.trend-list-row:last-child {
  border-bottom: none;
}

/* ---------------------------------------------------------------------- */
/* Modes hub (grid of entry points, shown on dashboard)                    */
/* ---------------------------------------------------------------------- */

.modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.mode-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.mode-card:hover {
  border-color: var(--accent-1);
  transform: translateY(-2px);
}

.mode-card .mode-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.mode-card .mode-card-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink);
}

.mode-card h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.mode-card p {
  font-size: 13px;
  margin: 0;
}

.mode-card .mode-card-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-2-text);
  margin-bottom: 6px;
}

/* Coach Chat and Partner Practice are the two flagship features — this
   modifier gives their cards a bit more visual weight (accent border, tag
   color) than Insights/Share/Together get, everywhere .mode-card is used
   (landing page and the dashboard's "Explore" grid alike). */
.mode-card.mode-card-flagship {
  border-color: var(--accent-1);
}

.mode-card.mode-card-flagship .mode-card-tag {
  color: var(--accent-1);
}

/* Feature split (therapist export, and any future single-feature deep-dive) */

.feature-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}

.feature-split-text .section-tag {
  display: block;
  margin-bottom: 10px;
}

.feature-split-text h2 {
  margin-bottom: 14px;
}

.feature-split-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 26px;
}

.feature-split-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-muted);
  padding: 6px 0;
}

.feature-split-list li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  stroke: var(--success);
}

.feature-split-visual .mini-summary {
  padding: 26px;
  font-size: 13px;
  transform: scale(1);
}

.feature-split-visual .mini-summary .summary-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
}

.feature-split-visual .mini-summary .summary-header h1 {
  font-size: 20px;
}

.feature-split-visual .mini-summary .summary-section {
  font-size: 14px;
  margin: 18px 0 6px;
}

.feature-split-visual .mini-summary p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .feature-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Check-in card */

.checkin-card {
  background: linear-gradient(120deg, rgba(209, 160, 90, 0.14), var(--surface));
  border: 1px solid var(--border);
}

.checkin-question {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 6px 0 16px;
}

.checkin-answer textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  resize: none;
  margin-bottom: 10px;
}

.checkin-answer textarea:focus {
  border-color: var(--accent-1);
}

.checkin-done {
  font-size: 14px;
  color: var(--text-muted);
}

.checkin-score-done {
  font-size: 13px;
  color: var(--accent-1);
  font-weight: 600;
  margin: 0 0 6px;
}

.checkin-score-row {
  margin-bottom: 14px;
}

.checkin-score-row > label {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.checkin-score-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkin-score-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent-1);
  height: 4px;
  cursor: pointer;
}

.checkin-score-value {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--accent-1);
  min-width: 18px;
  text-align: right;
}

.checkin-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------------------------------------------------------------------- */
/* Dashboard                                                                */
/* ---------------------------------------------------------------------- */

.dashboard {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.dashboard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* Account deletion — deliberately understated (border color only, not a
   filled danger background) until the person actually opens it; the real
   warning weight lands on the confirm step below, not on the card itself. */
.danger-zone {
  border-color: rgba(193, 101, 90, 0.3);
}

.danger-zone h2 {
  color: var(--danger-text);
}

.danger-zone-confirm {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(193, 101, 90, 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.danger-zone-confirm label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.danger-zone-confirm input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
}

.danger-zone-confirm input:focus {
  border-color: var(--danger);
}

.danger-zone-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.danger-zone-actions .btn {
  flex: 1;
}

.profile-meta {
  display: flex;
  gap: 32px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.profile-meta .label {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.attachment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
}

.usage-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.usage-box .label {
  color: var(--text-muted);
}

.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
}

.conversation-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  border-radius: var(--radius-sm);
}

.conversation-row:hover {
  background: var(--surface-hover);
}

.conversation-row-link {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 9px 0;
  font-size: 14px;
  color: inherit;
}

.conversation-row-link span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-row-delete {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.conversation-row:hover .conversation-row-delete,
.conversation-row-delete:focus {
  opacity: 1;
}

.conversation-row-delete:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.conversation-row-delete svg {
  width: 15px;
  height: 15px;
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                               */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .feature-grid,
  .steps,
  .pricing-grid,
  .modes-grid {
    grid-template-columns: 1fr;
  }

  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stats {
    gap: 28px 36px;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links.open {
    display: flex;
    position: absolute;
    top: 64px;
    left: 16px;
    right: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    box-shadow: var(--shadow-lg);
  }

  .sidebar {
    width: 220px;
  }

  .profile-meta {
    gap: 20px;
    flex-wrap: wrap;
  }
}

/* The in-app pages (chat, insights, share, together, dashboard) carry a longer
   nav — Coach/Practice + 3 more links + account + logout — than the
   marketing/auth pages' short one, so it needs to switch to the hamburger
   sooner (at a wider viewport) to avoid crowding/overflow in the
   900-1060px range that the shorter nav is fine down to. Higher specificity
   than the plain .nav-links rule above, so it wins in the overlap range. */
@media (max-width: 1060px) {
  .site-nav-app .nav-links {
    display: none;
  }

  .site-nav-app .nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  /* Every text input/textarea on the site is sized under 16px for a tight
     visual fit (14-15px) — but iOS Safari auto-zooms the whole page in
     whenever a field smaller than 16px is focused, which is jarring on a
     phone and has to be manually zoomed back out. Forcing 16px here (and
     only here, on mobile) kills the auto-zoom without touching any of the
     tuned desktop sizing. !important is deliberate: there are a dozen
     differently-scoped input/textarea rules across this file and this
     needs to win over all of them uniformly. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* The chat composer's textarea is narrow on a phone (the attach/mic/send
     buttons take up real width), so even the shortened mobile placeholder
     (see chat.js's composerPlaceholder()) can still wrap onto a second
     line on the narrowest screens. A safety-net min-height + line-height
     here means a wrapped line is fully shown instead of clipped off —
     belt-and-suspenders alongside the shorter text. */
  .input-area textarea {
    min-height: 68px;
    line-height: 1.3;
  }

  section {
    padding: 56px 0;
  }

  .trust-row {
    grid-template-columns: 1fr;
  }

  .pricing-guarantee {
    flex-direction: column;
    text-align: center;
    border-radius: var(--radius);
    padding: 14px 18px;
  }

  .app-shell {
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
  }

  /* ChatGPT-style off-canvas drawer: the sidebar is pulled fully off-screen
     by default and slides in over the chat (never squishes it) when opened
     via the hamburger button. A tap on the dimmed backdrop, the close (✕)
     button, or picking anything inside the drawer closes it again. */

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    z-index: 60;
    border-right: 1px solid var(--border);
    border-bottom: none;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-toggle,
  .sidebar-close-btn {
    display: inline-flex;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 14, 8, 0.55);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .chat-messages,
  .input-area,
  .partner-banner {
    max-width: 100%;
  }

  .user-msg,
  .ai-msg,
  .partner-msg {
    max-width: 85%;
  }

  .chat-topbar {
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
  }

  .topbar-account {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .partner-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 10px;
  }
}

/* ---------------------------------------------------------------------- */
/* Floating CTA (landing page only)                                       */
/* ---------------------------------------------------------------------- */

.floating-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent-grad);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.15s ease;
}

.floating-cta:hover {
  filter: brightness(1.08);
}

.floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 640px) {
  .floating-cta {
    /* Stays a compact pill (not a full-width bar) even on mobile — full
       width made it big enough to fully obscure section headings as it
       scrolled past them, which is a worse trade than a slightly smaller
       tap target. */
    right: 16px;
    bottom: 16px;
    padding: 12px 20px;
    font-size: 13.5px;
  }
}

/* ---------------------------------------------------------------------- */
/* Scroll reveal (progressive enhancement — see landing.js)               */
/* Default state is fully visible; JS only hides-then-reveals when it     */
/* successfully initializes, so a page with JS disabled/blocked never     */
/* gets stuck invisible.                                                  */
/* ---------------------------------------------------------------------- */

body.js-reveal .reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

body.js-reveal .reveal-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.js-reveal .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------- */
/* Share with partner                                                      */
/* ---------------------------------------------------------------------- */

.share-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.share-card-main h3 {
  font-size: 16px;
  margin-bottom: 2px;
}

.share-card-main p {
  margin: 0;
  font-size: 13px;
}

.share-pending-banner {
  background: rgba(209, 160, 90, 0.12);
  border: 1px solid rgba(209, 160, 90, 0.35);
  color: var(--accent-1);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 14px;
}

.share-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 10px;
  flex-wrap: wrap;
}

.share-title-input {
  flex: 1;
  min-width: 200px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  padding: 4px 2px;
  outline: none;
}

.share-title-input:hover,
.share-title-input:focus {
  border-bottom-color: var(--border-strong);
}

.share-detail-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.share-danger-btn {
  color: var(--danger);
}

.share-revoked-note {
  color: var(--danger);
  font-size: 13.5px;
  margin: 0 0 14px;
}

.share-link-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 24px;
}

.share-link-box span {
  font-size: 13px;
  color: var(--text-muted);
  overflow-x: auto;
  white-space: nowrap;
}

.share-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.share-item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.share-item-row-readonly {
  background: var(--surface);
}

.share-item-body {
  min-width: 0;
}

.share-item-type {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.share-item-text {
  margin: 0;
  font-size: 14.5px;
  color: var(--text);
  white-space: pre-wrap;
}

.share-item-delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 13px;
}

.share-item-delete:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.share-composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.share-composer h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 14px;
}

.share-composer textarea {
  width: 100%;
  min-height: 110px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14.5px;
  outline: none;
  resize: none;
}

.share-composer textarea:focus {
  border-color: var(--accent-1);
}

.share-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.share-composer-row select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
}

@media (max-width: 640px) {
  .share-card {
    flex-direction: column;
    align-items: stretch;
  }

  .share-link-box {
    flex-direction: column;
    align-items: stretch;
  }

  .share-link-box span {
    white-space: normal;
    word-break: break-all;
  }

  .summary-paper {
    padding: 22px;
  }

  .dashboard-card {
    padding: 18px;
  }

  .modal-card {
    padding: 20px;
  }

  .modal-overlay {
    padding: 14px;
  }
}

/* ---------------------------------------------------------------------- */
/* Together — couple linking + daily shared question (task #98)           */
/* ---------------------------------------------------------------------- */

.couple-intro-card,
.couple-invite-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

.couple-intro-card p,
.couple-invite-card p {
  margin: 0 0 18px;
}

.couple-invite-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.couple-intro-card .share-link-box {
  text-align: left;
  margin: 18px 0;
}

.couple-linked-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.couple-danger-btn {
  color: var(--danger);
}

.couple-question-card {
  max-width: 640px;
  margin: 0 auto 20px;
}

.couple-partner-note {
  font-size: 13px;
  color: var(--accent-1);
  margin: -8px 0 14px;
}

.couple-answer-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}

.couple-answer-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  min-width: 0;
}

.couple-answer-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.couple-answer-text {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.couple-answer-waiting {
  color: var(--text-muted);
  font-style: italic;
}

.couple-history-toggle {
  text-align: center;
  margin-bottom: 16px;
}

.couple-history-entry {
  max-width: 640px;
  margin: 0 auto 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.couple-history-date {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .couple-answer-pair {
    grid-template-columns: 1fr;
  }

  .couple-linked-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

/* ---------------------------------------------------------------------- */
/* Share a whole conversation — transcript + picker modal                  */
/* ---------------------------------------------------------------------- */

.transcript {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px;
}

.transcript-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.transcript-msg.role-user {
  align-self: flex-end;
  background: var(--accent-grad);
  color: var(--ink);
}

.transcript-msg.role-assistant {
  align-self: flex-start;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
}

.transcript-empty {
  color: var(--text-faint);
  font-size: 13.5px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

.modal-card h2 {
  font-size: 20px;
  margin-bottom: 6px;
}

.modal-close-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

/* showAppAlert/showAppConfirm (task #94, shared.js) — built on the same
   .modal-overlay/.modal-card as everything else, just narrower (these are
   one short sentence, not a whole preview) and without a heading. */
.dialog-card {
  max-width: 420px;
}

.dialog-message {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

/* showAppPrompt's text input (task #97) — same visual language as
   .history-search rather than an unstyled native input, which on a dark
   page defaults to a jarring white box with a plain blue focus ring. */
.dialog-input {
  width: 100%;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}

.dialog-input:focus {
  border-color: var(--accent-1);
}

.conversation-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.conversation-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
}

.conversation-pick-row:hover {
  border-color: var(--border-strong);
}

.conversation-pick-meta {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

.share-conversation-warning {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid rgba(193, 101, 90, 0.35);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin: 14px 0;
}

@media (max-width: 640px) {
  .modal-card {
    padding: 20px;
  }

  .transcript-msg {
    max-width: 95%;
  }
}

/* ---------------------------------------------------------------------- */
/* Streaks, email preferences, referrals                                   */
/* ---------------------------------------------------------------------- */

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(209, 160, 90, 0.14);
  border: 1px solid rgba(209, 160, 90, 0.35);
  color: var(--accent-1);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.email-prefs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.email-prefs .label {
  font-size: 12px;
  color: var(--text-faint);
}

.email-pref-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
}

.email-pref-toggle input {
  accent-color: var(--accent-1);
  width: 15px;
  height: 15px;
}

.email-pref-toggle input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pref-upgrade-hint {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-1);
  text-decoration: none;
  white-space: nowrap;
}

.pref-upgrade-hint:hover {
  text-decoration: underline;
}

.referral-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 14px;
}

.referral-box span {
  font-size: 13px;
  color: var(--text-muted);
  overflow-x: auto;
  white-space: nowrap;
}

.referral-stats {
  margin: 12px 0 0;
  font-size: 13px;
}

@media (max-width: 640px) {
  .referral-box {
    flex-direction: column;
    align-items: stretch;
  }

  .referral-box span {
    white-space: normal;
    word-break: break-all;
  }
}

/* Admin / growth dashboard ------------------------------------------------ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.stat-tile-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
}

.stat-tile-label {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.stat-tile-sub {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 6px;
}

.admin-chart {
  position: relative;
  width: 100%;
  margin-top: 8px;
}

.admin-chart-svg {
  width: 100%;
  height: 160px;
  display: block;
  overflow: visible;
}

.chart-baseline {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.chart-axis-label {
  fill: var(--text-faint);
  font-size: 10px;
}

.chart-bar {
  transition: opacity 0.12s ease;
}

.chart-bar:hover {
  opacity: 0.78;
  cursor: pointer;
}

.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

.plan-bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 36px;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.plan-bar-row:first-child {
  margin-top: 4px;
}

.plan-bar-label {
  font-size: 12.5px;
  color: var(--text-muted);
}

.plan-bar-track {
  height: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.plan-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

.plan-bar-count {
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: right;
}

.downvote-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.downvote-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.downvote-item-meta {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.downvote-item-text {
  font-size: 13px;
  color: var(--text-muted);
  white-space: pre-wrap;
}


/* Registration consent checkbox (register.html) */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  cursor: pointer;
}

.auth-card .consent-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--accent-1);
  flex-shrink: 0;
}

.consent-row a {
  color: var(--accent-2-text);
  font-weight: 600;
}

/* "Verify your email" notice (shared.js renderVerifyBanner) */
.verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 8px 16px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.verify-banner strong {
  color: var(--text);
}