/* ============================================
   Legs Guide — Dark Theme Stylesheet
   Background: #0c0c0e
   ============================================ */

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #0c0c0e;
  color: #e8e8ec;
  line-height: 1.6;
  min-height: 100vh;
}

main {
  padding: 0;
}

a {
  color: #a0a0ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Visually Hidden (accessibility) ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Navigation ── */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid #1a1a1f;
}

.nav-brand a {
  font-weight: 700;
  font-size: 1.1rem;
  color: #e8e8ec;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  font-size: 0.9rem;
  color: #a0a0b0;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #e8e8ec;
}

/* ── Hero ── */
.hero {
  padding: 5rem 2rem;
  text-align: center;
  border-bottom: 1px solid #1a1a1f;
}

.hero-content {
  max-width: 720px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7a7a88;
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: #f2f2f5;
}

.hero-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #a8a8b5;
  max-width: 480px;
  margin: 0 auto 2rem;
}

.hero-cta {
  margin-top: 0.5rem;
}

/* ── Buttons ──
   Pill shape (22 Aug 2026) to match the chat interface's send/CTA buttons —
   ruling 4 requires core component classes stay consistent site-wide. */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.1s;
}

.btn-primary {
  background: #3b3b4f;
  color: #ffffff;
}

.btn-primary:hover {
  background: #4a4a60;
}

.btn-secondary {
  background: transparent;
  color: #a0a0b0;
  border: 1px solid #2a2a35;
}

.btn-secondary:hover {
  background: #1a1a22;
  color: #e8e8ec;
}

/* ── Content Sections ── */
.content-section {
  padding: 3.5rem 2rem;
  max-width: 720px;
  margin: 0 auto;
}

.content-section.highlight {
  background: #121218;
  border-top: 1px solid #1a1a1f;
  border-bottom: 1px solid #1a1a1f;
}

.content-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #f5f5f8;
  letter-spacing: -0.01em;
}

.content-section h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #e0e0e8;
}

.content-section p {
  margin-bottom: 1rem;
  color: #b0b0c0;
  /* Reading measure — added 26 Aug 2026 per audit finding 8.1: the
     720px section width was fine for headings/cards, but let body
     text bleed too wide for comfortable reading. ~68 characters is
     the accepted comfortable line length. */
  max-width: 65ch;
}

.content-section p:last-child {
  margin-bottom: 0;
}

/* ── Pillars (Body/Work/Sobriety subsections within about-james.html) ── */
.pillar {
  padding: 1.5rem 0;
  border-top: 1px solid #1a1a1f;
}

.pillar:first-child {
  border-top: none;
}

/* ── Self-checks (self-checks.html) ──
   These classes existed in the HTML with no CSS at all before 22 Aug 2026 —
   added now as part of the ruling-5 restraint/whitespace pass: quiet visual
   separation between entries, no clutter, no decoration beyond a hairline. */
.self-check {
  padding: 1.5rem 0;
  border-top: 1px solid #1a1a1f;
}

.self-check:first-of-type {
  border-top: none;
  padding-top: 0.5rem;
}

.self-check h3 {
  margin-bottom: 0.6rem;
}

.self-check-share {
  margin-top: 0.75rem !important;
}

.self-check-share a {
  font-size: 0.8rem;
  color: #82828c;
}

.self-check-share a:hover {
  color: #a0a0b0;
}

.boundary-note {
  font-size: 0.85rem;
  font-style: italic;
  color: #9090a0;
  border-left: 3px solid #3b3b4f;
  padding-left: 0.85rem;
}

/* ── Fern section dividers (self-checks.html) — added 25 Aug 2026 ──
   Ties the visual identity directly into content structure, per the
   original brief's suggested use case. Small, quiet, opacity-muted
   rather than full-strength orange, so it reads as punctuation
   between sections, not a decorative interruption. */
.fern-divider {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
  opacity: 0.55;
}

/* ── Method Definition ── */
.method-definition {
  font-size: 1.1rem;
  font-style: italic;
  color: #c0c0d0;
  border-left: 3px solid #3b3b4f;
  padding-left: 1rem;
  margin-bottom: 2rem;
}

/* ── Measurables List ── */
.measurables-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
}

.measurables-list li {
  background: #1a1a22;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: #d0d0e0;
}

/* ── Network ── */
.network-note {
  font-size: 0.9rem;
  color: #a0a0b0;
  margin-bottom: 1rem;
}

.network-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.node-pill {
  display: inline-block;
  background: #1a1a22;
  border: 1px solid #2a2a35;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #a0a0ff;
  transition: background 0.2s, border-color 0.2s;
}

.node-pill:hover {
  background: #222230;
  border-color: #3b3b4f;
  text-decoration: none;
}

/* ── Testimonials ── */
.composite-label {
  font-size: 0.8rem;
  color: #9090a0;
  margin-bottom: 1rem;
  font-style: italic;
}

.testimonial {
  background: #121218;
  border-left: 3px solid #e8873d;
  border-radius: 4px;
  padding: 2rem 2rem 1.5rem;
  margin: 0;
  position: relative;
}

.testimonial p {
  font-size: 1.15rem;
  line-height: 1.65;
  color: #e0e0e8;
  margin-bottom: 1rem;
}

.testimonial cite {
  display: block;
  font-size: 0.85rem;
  color: #9090a0;
  font-style: normal;
}

/* ── Pricing ── */
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.pricing-tier {
  background: #121218;
  border: 1px solid #1a1a1f;
  border-radius: 8px;
  padding: 1.5rem;
}

.pricing-tier h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.pricing-tier .price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.pricing-note {
  font-size: 0.8rem;
  color: #9090a0;
  margin-top: 1rem;
}

/* ── Chat ──
   Redesigned 22 Aug 2026, refined again same day into Concept A ("editorial") —
   James's chosen direction after reviewing three mockups. Matches the pattern
   both Claude.ai and current ChatGPT use: the visitor's message keeps a
   subtle bubble, the assistant's reply is plain flowing text with no
   background — content-forward rather than "chat toy." No HTML/JS changed:
   app.js already outputs .message-wrapper.user / .message-wrapper.assistant,
   so this remains a pure CSS restyle. */
.chat-container {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 2rem;
}

.chat-boundary {
  background: #121218;
  border: 1px solid #2a2a35;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

/* Safety card — replaces the previous paragraph-style boundary text,
   26 Aug 2026. Same exact approved wording, restructured for
   scannability rather than a wall of prose. Genuinely wired into the
   real chat.html this time (not a standalone concept preview) — the
   button keeps id="boundary-accept" so app.js's existing click
   handling works completely unchanged. */
.safety-card {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.safety-card-eyebrow {
  color: #82828c;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.safety-card-title {
  color: #f2f2f5;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #1a1a1f;
}

.safety-card-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 1.1rem;
}

.safety-card-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #e8873d;
  color: #e8873d;
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.safety-card-item p {
  color: #e0e0e8;
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

.safety-card-button {
  width: 100%;
  margin-top: 0.4rem;
}

.boundary-text {
  font-size: 0.9rem;
  color: #b0b0c0;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.chat-usage-notice {
  font-size: 0.85rem;
  color: #9090a0;
  background: #121218;
  border: 1px solid #2a2a35;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Empty-state invitation — the first thing every visitor sees on the
   chat page before typing anything. Previously unstyled default text;
   given real presence 25 Aug 2026 since this is the single
   highest-visibility moment on the whole site. */
.chat-static-invitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 2rem 1rem;
  color: #9090a0;
  font-size: 1rem;
  line-height: 1.6;
}

.invitation-fern {
  margin-bottom: 1.25rem;
  opacity: 0.9;
}

.chat-messages {
  background: #121218;
  border: 1px solid #1a1a1f;
  border-radius: 12px;
  padding: 1.5rem;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.message {
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
  word-wrap: break-word;
}

/* The visitor's own message: the only bubble left in this layout, so the
   two roles stay instantly distinguishable by shape as well as alignment. */
.message.user {
  background: #2a2a40;
  color: #e8e8ec;
  margin-left: auto;
  max-width: 75%;
  padding: 0.7rem 1.05rem;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  line-height: 1.55;
}

/* The assistant's reply: no bubble, no background — pure text, more
   generous line-height and width, reading like a considered written
   response rather than a chat-widget message. */
.message.assistant {
  background: none;
  color: #d8d8e0;
  margin-right: auto;
  padding: 0;
  line-height: 1.75;
}

.message.assistant p,
.message.assistant + .message.assistant {
  margin-top: 0.85rem;
}

/* Typing indicator — replaced 24 Aug 2026 with the "unravelling wound ball"
   motif: a tightly wound core with one band working
   itself loose (the process of noticing/unwinding), matching the site's own
   "Legs Guide approach" / "uncompressing" language rather than an imported
   metaphor. app.js renders this as inline SVG with id="chat-loading". Static
   fallback (no motion) for prefers-reduced-motion below. */
.message.assistant.loading {
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.thinking-ball-core {
  animation: thinking-core-breathe 3.4s cubic-bezier(0.45,0,0.55,1) infinite;
  transform-origin: 60px 60px;
}

.thinking-ball-band {
  stroke-dasharray: 70;
  animation: thinking-band-unspool 3.4s cubic-bezier(0.45,0,0.55,1) infinite;
}

@keyframes thinking-core-breathe {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.03); }
}

@keyframes thinking-band-unspool {
  0% { stroke-dashoffset: 70; opacity: 0.3; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 70; opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .thinking-ball-core,
  .thinking-ball-band {
    animation: none;
  }
  .thinking-ball-band {
    stroke-dashoffset: 0;
    opacity: 0.85;
  }
}

/* Reveal cursor — the small pulsing marker at the leading edge of a
   message while it's being progressively revealed (see app.js header
   comment for why this exists instead of real network streaming).
   Same orange as the thinking-ball indicator, so the two read as one
   continuous "still in progress" signal rather than two different
   things. */
.reveal-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #e8873d;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: reveal-cursor-pulse 0.9s ease-in-out infinite;
}

@keyframes reveal-cursor-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-cursor {
    display: none;
  }
}

/* Input row — pill-shaped, familiar send-button placement, no gradients
   or startup-style vibrancy. */
.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}

.chat-form textarea {
  flex: 1;
  background: #1a1a22;
  border: 1px solid #2a2a35;
  border-radius: 22px;
  padding: 0.75rem 1.15rem;
  color: #e8e8ec;
  font-size: 0.95rem;
  font-family: inherit;
  resize: none;
  overflow-y: auto;
  min-height: 3rem;
  max-height: 12rem;
  line-height: 1.4;
}

.chat-form textarea:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

.chat-form textarea::placeholder {
  color: #9090a0;
}

.chat-form button {
  padding: 0.75rem 1.4rem;
  background: #3b3b4f;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.chat-form button:hover {
  background: #4a4a60;
}

.chat-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Equipment badge and glossary list — added for tools.html/glossary.html/
   movements.html, 27 Aug 2026. Colors match the existing orange accent
   (#e8873d) used everywhere else, not a new palette. */
.equipment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background-color: rgba(232, 135, 61, 0.1);
  border: 1px solid rgba(232, 135, 61, 0.35);
  border-radius: 4px;
  color: #e8873d;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.glossary-list dt {
  font-weight: 700;
  color: #f2f2f5;
  margin-top: 1.25rem;
}

.glossary-list dt:first-child {
  margin-top: 0;
}

.glossary-list dd {
  margin: 0.3rem 0 0;
  color: #b0b0c0;
  line-height: 1.6;
}

/* Local reflection log — per-movement private notes, local-device only.
   Matches the existing quiet, bordered-box visual language. */
.local-reflection-log {
  margin-top: 1rem;
  padding: 1rem;
  background: #16161c;
  border: 1px solid #232329;
  border-radius: 8px;
}

.log-label {
  display: block;
  font-size: 0.8rem;
  color: #a0a0b0;
  margin-bottom: 0.4rem;
}

.log-input {
  width: 100%;
  background: #0c0c0e;
  border: 1px solid #2a2a35;
  border-radius: 6px;
  color: #e0e0e8;
  padding: 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.log-input:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

.log-status {
  font-size: 0.75rem;
  color: #82828c;
  margin-top: 0.4rem;
}

.clear-notes-btn {
  display: block;
  margin: 2rem auto 0;
  background: none;
  border: 1px solid #2a2a35;
  color: #a0a0b0;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}

.clear-notes-btn:hover {
  background: #16161c;
  color: #d0d0e0;
}

.clear-notes-btn:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

/* Stop state — a distinct filled-square icon in a compact circular
   button, replacing the Send label entirely while a response is in
   flight. Previously this only relabelled the same button's text to
   "Stop", which didn't read as a genuinely different control — every
   mainstream chat product visually transforms Send into a stop icon,
   not just its label. */
#chat-submit.is-stop {
  padding: 0.6rem !important;
  width: 42px;
  border-radius: 50% !important;
  background: #e8873d !important;
  color: #0c0c0e;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chat-submit.is-stop:hover {
  background: #f0954d !important;
}

/* Voice dictation button — added 27 Aug 2026. A compact circular icon
   button rather than the wide pill used for Send, since it holds a
   single icon, not text. Removed entirely by app.js in browsers
   without Speech Recognition support, rather than shown broken. */
.chat-mic-btn {
  padding: 0.6rem !important;
  width: 42px;
  height: 42px;
  border-radius: 50% !important;
  background: #1a1a22 !important;
  color: #9090a0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-mic-btn:hover {
  background: #232330 !important;
  color: #d0d0e0;
}

.chat-mic-btn.recording {
  background: #e8873d !important;
  color: #0c0c0e;
}

.chat-mic-btn:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

.chat-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.chat-controls button {
  background: transparent;
  border: 1px solid #2a2a35;
  color: #9090a0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
}

.chat-controls button:hover {
  color: #e8e8ec;
  border-color: #3b3b4f;
}

/* ── Site Footer ── */
.site-footer {
  border-top: 1px solid #1a1a1f;
  padding: 2rem;
  margin-top: 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.footer-col {
  font-size: 0.85rem;
  color: #9090a0;
}

.company-line {
  font-size: 0.8rem;
  color: #9090a0;
}

/* ── Legal Pages ── */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.legal-page h1 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  color: #ffffff;
}

.legal-page h2 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #e0e0e8;
}

.legal-page p {
  margin-bottom: 1rem;
  color: #b0b0c0;
}

/* ── FAQ cards — reverted to flat/always-open, 26 Aug 2026 ──
   James's call: the accordion was a NEW interaction pattern nothing
   else on the site uses — every other page (self-checks, about-james,
   homepage) presents content as calm, static, always-visible sections
   with quiet bordered dividers. "On brand" meant matching that
   existing language, not introducing click-to-expand. Each question
   is now a proper card, matching the same bordered-box treatment
   already used for callouts elsewhere on the site (e.g. the
   homepage's "See it for yourself" box), rather than plain unstyled
   text or a novel interaction pattern. */
.faq-card {
  background: #121218;
  border: 1px solid #1a1a1f;
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
}

.faq-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f0f0f4;
  margin: 0 0 0.75rem;
}

.faq-card p {
  margin: 0;
  color: #b0b0c0;
  max-width: 65ch;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .site-nav {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }

  .hero {
    padding: 2.5rem 1rem;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .content-section {
    padding: 2rem 1rem;
  }

  .pricing-tiers {
    grid-template-columns: 1fr;
  }

  .chat-container {
    padding: 0 1rem;
  }
}

/* ============================================
   Full-screen chat page (chat.html) — new
   ============================================ */

.chat-page-body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-page-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

/* ── Chat sidebar shell — added 24 Aug 2026 ──
   Local, per-device conversation list. No accounts, no server-side
   storage — matches the live privacy policy exactly. Desktop: fixed
   sidebar beside the chat. Mobile: sidebar collapses above the chat
   as a compact strip rather than an overlay, keeping the whole page
   reachable without JS-driven show/hide logic. */
.chat-shell {
  flex: 1;
  display: flex;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.chat-sidebar {
  width: 240px;
  flex-shrink: 0;
  min-height: 0;
  border-right: 1px solid #1a1a1f;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.85rem;
  overflow-y: auto;
}

.sidebar-new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1e1e28;
  border: 1px solid #2a2a35;
  color: #e8e8ec;
  font-size: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.sidebar-new-btn:hover {
  background: #26262f;
}

.sidebar-sessions-list {
  flex: 1;
  min-height: 0;
}

.sidebar-date-group {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #82828c;
  margin: 1rem 0.4rem 0.5rem;
}

.sidebar-date-group:first-child {
  margin-top: 0;
}

/* Sidebar session rows — redesigned 27 Aug 2026 to add per-session
   rename/delete directly in the list, matching how ChatGPT/Claude/
   Kimi's own sidebars work. Icons stay hidden until the row is
   hovered or focused, keeping the list visually quiet by default. */
.sidebar-session-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 6px;
  margin-bottom: 0.2rem;
}

.sidebar-session-row:hover,
.sidebar-session-row:focus-within {
  background: #16161c;
}

.sidebar-session-row.active {
  background: #1a1a22;
}

.sidebar-session-item {
  flex: 1;
  display: block;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  color: #8a8a95;
  font-size: 0.85rem;
  padding: 0.55rem 0.4rem 0.55rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-session-row:hover .sidebar-session-item,
.sidebar-session-row:focus-within .sidebar-session-item {
  color: #b0b0c0;
}

.sidebar-session-row.active .sidebar-session-item {
  color: #d0d0e0;
}

.sidebar-session-item:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: -2px;
}

.sidebar-session-actions {
  display: flex;
  gap: 0.15rem;
  padding-right: 0.4rem;
  opacity: 0;
}

.sidebar-session-row:hover .sidebar-session-actions,
.sidebar-session-row:focus-within .sidebar-session-actions {
  opacity: 1;
}

.sidebar-session-action {
  background: none;
  border: none;
  color: #82828c;
  padding: 0.3rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-session-action:hover {
  color: #d0d0e0;
  background: #232330;
}

.sidebar-session-action-delete:hover {
  color: #e8873d;
}

.sidebar-session-action:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 1px;
}

.sidebar-empty {
  color: #82828c;
  font-size: 0.8rem;
  padding: 0.5rem 0.4rem;
}

/* Brand mark, moved into the sidebar 25 Aug 2026 — chat.html no longer
   has a separate header bar at all, matching familiar AI chat products
   where identity lives in the sidebar, not a marketing header above
   the whole page. */
.sidebar-brand {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: #e8e8ec;
  margin-bottom: 1.25rem;
}

.sidebar-note {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #1a1a1f;
  font-size: 0.7rem;
  color: #82828c;
  line-height: 1.5;
}

/* Legal links, moved into the sidebar 25 Aug 2026 — replaces the
   full-width footer bar that used to sit below the input, freeing that
   space for the actual conversation. */
.sidebar-legal {
  font-size: 0.65rem;
  color: #82828c;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.sidebar-legal a {
  color: #8a8a95;
}

.sidebar-legal a:hover {
  color: #9090a0;
}

@media (max-width: 880px) {
  .chat-shell {
    flex-direction: column;
  }

  .chat-sidebar {
    width: 100%;
    max-height: 30vh;
    border-right: none;
    border-bottom: 1px solid #1a1a1f;
  }
}

.chat-page-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  position: relative;
}

.jump-to-latest {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #2a2a35;
  border: 1px solid #3a3a45;
  color: #e8e8ec;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.jump-to-latest:hover {
  background: #33333f;
}

.jump-to-latest:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

.chat-page-messages {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3a45 transparent;
}

.chat-page-messages::-webkit-scrollbar {
  width: 8px;
}

.chat-page-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-page-messages::-webkit-scrollbar-thumb {
  background-color: #3a3a45;
  border-radius: 8px;
}

.chat-page-messages::-webkit-scrollbar-thumb:hover {
  background-color: #4a4a55;
}

.chat-sidebar {
  scrollbar-width: thin;
  scrollbar-color: #2a2a35 transparent;
}

.chat-sidebar::-webkit-scrollbar {
  width: 6px;
}

.chat-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.chat-sidebar::-webkit-scrollbar-thumb {
  background-color: #2a2a35;
  border-radius: 8px;
}

.message-wrapper {
  margin-bottom: 1.1rem;
  max-width: 75%;
}

.message-wrapper.user {
  margin-left: auto;
}

.message-wrapper.assistant {
  margin-right: auto;
  max-width: 100%;
}

.message-wrapper .message {
  margin-bottom: 0.25rem;
  max-width: 100%;
}

/* Message footer — redesigned 27 Aug 2026 to hold a timestamp plus
   whichever action buttons apply (Copy + Regenerate on the latest
   assistant reply, Edit on any user message). Hidden until the
   message is hovered or focused, same quiet treatment as before. */
.message-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.message-wrapper:hover .message-footer,
.message-footer:focus-within {
  opacity: 1;
}

.message-timestamp {
  font-size: 0.7rem;
  color: #82828c;
}

.message-action-btn {
  background: none;
  border: none;
  color: #82828c;
  font-size: 0.7rem;
  padding: 0.2rem 0;
  cursor: pointer;
}

.message-action-btn:hover {
  color: #9090a0;
}

.message-action-btn:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
  border-radius: 4px;
}

.message-wrapper.user .message-footer {
  justify-content: flex-end;
}

/* Safe markdown rendering — added 27 Aug 2026. Assistant replies can
   now contain bold, italic, and bullet lists; user messages remain
   plain text always. Spacing kept tight since replies are short by
   design (REPLY LENGTH stays around 100-180 words). */
.message.assistant p {
  margin: 0 0 0.5rem;
}

.message.assistant p:last-child {
  margin-bottom: 0;
}

.message.assistant ul {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.25rem;
}

.message.assistant li {
  margin-bottom: 0.2rem;
}

.message.assistant strong {
  font-weight: 700;
  color: inherit;
}

.message.assistant em {
  font-style: italic;
}

/* Collapsible sidebar — added 27 Aug 2026, persisted per device via
   localStorage. Collapsing removes it from layout entirely rather
   than just hiding it, so the chat area genuinely gets the space back. */
.sidebar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.sidebar-header-row .sidebar-brand {
  margin-bottom: 0;
}

.sidebar-toggle-btn,
.sidebar-show-btn {
  background: none;
  border: none;
  color: #82828c;
  padding: 0.3rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover,
.sidebar-show-btn:hover {
  color: #d0d0e0;
  background: #1a1a22;
}

.sidebar-toggle-btn:focus-visible,
.sidebar-show-btn:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 1px;
}

.chat-sidebar.collapsed {
  display: none;
}

.sidebar-show-btn {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 5;
  background: #16161c;
  border: 1px solid #2a2a35;
}

.chat-shell.sidebar-collapsed .sidebar-show-btn {
  display: flex;
}

.chat-shell {
  position: relative;
}

@media (max-width: 880px) {
  /* No hover on touch devices — keep it always visible there instead
     of unreachable. */
  .message-copy-btn {
    opacity: 0.6;
  }
}

.citation-line {
  display: inline-block;
  font-size: 0.7rem;
  color: #82828c;
  margin: 0.5rem 0 0;
  padding: 0.3rem 0.7rem;
  background: #16161c;
  border: 1px solid #232329;
  border-radius: 6px;
  line-height: 1.4;
}

/* Error message — added 27 Aug 2026. Previously had no distinct
   styling at all (neither calm nor alarming, just default assistant-
   bubble treatment). Deliberately kept in the site's own quiet, dark,
   bordered-box language rather than a red alert or system toast —
   consistent with how citations and other secondary information are
   already presented. */
.message.assistant.error {
  background: #16161c;
  border: 1px solid #2a2a35;
  border-left: 2px solid #e8873d;
  color: #b0b0c0;
}

.citation-link {
  color: #a0a0b0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.citation-link:hover {
  color: #e8e8ec;
}

@media (max-width: 640px) {
  #chat-input {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  .chat-page-container {
    padding: 1rem;
  }

  .chat-form {
    position: sticky;
    bottom: 0;
    background: #0c0c0e;
    padding-top: 0.75rem;
  }

  .chat-form button,
  #boundary-accept {
    min-height: 44px;
  }

  .chat-boundary {
    overflow-x: hidden;
  }
}

/* ============================================================
   Back mobile chat sidebar safeguard
   The sidebar contains saved conversations and legal links.
   On narrow screens it must never remain behind or overlap the
   chat surface. It is closed by default and opens only when the
   visitor uses the visible sidebar button.
   ============================================================ */

@media (max-width: 880px) {
  .chat-shell {
    position: relative;
    flex-direction: column;
  }

  .chat-sidebar {
    display: none;
    width: 100%;
    max-height: 55dvh;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid #1a1a1f;
    padding: 1rem 0.85rem;
    background: #0c0c0e;
    z-index: 10;
  }

  .chat-shell.sidebar-mobile-open .chat-sidebar {
    display: flex;
  }

  .sidebar-show-btn {
    display: flex;
  }

  .chat-shell.sidebar-mobile-open .sidebar-show-btn {
    display: none;
  }

  .chat-page-container {
    width: 100%;
    min-width: 0;
  }

  .sidebar-note,
  .sidebar-legal {
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  .chat-page-container {
    padding: 1rem;
  }
}
@media (max-width: 880px) {
  .chat-shell.sidebar-mobile-open .chat-sidebar {
    display: flex;
  }
}


/* ============================================================
   Legs Guide — chat starter prompts in the static invitation
   ============================================================ */
.invitation-starters {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.invitation-starters li {
  margin: 0;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.35;
  opacity: 0.85;
}


/* ── Definition lists, quoted passages and ordered lists ──
   Added 6 September 2026 from the shared engine. The inherited stylesheet
   had no rules for these at all, so glossaries, quoted scripts and
   numbered lists rendered with browser defaults on a dark background.
   Colours reuse the existing palette — no new tokens. */

.content-section dl {
  margin: 0 0 1rem;
  max-width: 65ch;
}

.content-section dt {
  font-weight: 600;
  color: #e0e0e8;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid #1a1a1f;
}

.content-section dl > dt:first-of-type {
  margin-top: 0.4rem;
  padding-top: 0;
  border-top: none;
}

.content-section dd {
  margin: 0.4rem 0 0;
  color: #b0b0c0;
  line-height: 1.65;
}

.content-section blockquote {
  margin: 1.1rem 0;
  padding: 0.9rem 0 0.9rem 1.1rem;
  border-left: 2px solid #e8873d;
  background: rgba(232, 135, 61, 0.04);
  max-width: 65ch;
}

.content-section blockquote p {
  margin-bottom: 0;
  color: #d0d0dc;
}

.content-section blockquote p + p {
  margin-top: 0.75rem;
}

.content-section ol {
  margin: 0 0 1rem 1.15rem;
  padding: 0;
  color: #b0b0c0;
  max-width: 65ch;
  line-height: 1.65;
}

.content-section ol li {
  margin-bottom: 0.6rem;
  padding-left: 0.35rem;
}

.content-section ol li::marker {
  color: #82828c;
}

.content-section ol li:last-child {
  margin-bottom: 0;
}