/* ==========================================================================
   Maya V2.0 - Page Stylesheet
   Consolidated from the V1.5 shared site stylesheet (theme vars, reset,
   nav, container, theme-toggle) and the Maya page's own inline <style>
   blocks (hero, chat shell, consent overlay). Values are preserved exactly
   from source; only irrelevant site-wide sections (timeline, contact form,
   gallery, honors, company header, showcase, agents page) were dropped.
   ========================================================================== */

/* ==========================================================================
   Theme Variables
   ========================================================================== */

/* CSS Custom Properties for Theme Management */
:root {
  /* Light Mode Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  /* Both darkened just enough to clear WCAG AA 4.5:1 against --bg-primary AND --bg-secondary -
     confirmed via the WCAG relative-luminance formula, not eyeballed. Originals (#6c757d /
     #adb5bd) measured 4.44:1 and as low as 1.96:1 on --bg-secondary - axe-core caught both live
     (jxs-test-standard accessibility layer, first run 2026-07-24). */
  --text-secondary: #697178;
  --text-muted: #6b7280;
  --border-color: #dee2e6;
  --accent-color: #000000;
  --accent-hover: #333333;
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-hover: rgba(0, 0, 0, 0.2);

  /* Typography */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Hero Specifics - OPTIMIZED */
  --hero-title-size: 3.8rem;
  /* Scaled back from 4.5rem for better flow */
  --hero-sub-size: 1.25rem;
}

/* Dark Mode Colors */
[data-theme="dark"] {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --border-color: #30363d;
  --accent-color: #ffffff;
  --accent-hover: #e6e6e6;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-hover: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Base Reset
   ========================================================================== */

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* WCAG 2.4.11 Focus not obscured: the fixed .nav is 71px tall (70px + 1px border). Without
     this, any element scrolled flush to the viewport top (anchor jump, future "jump to
     section" link, or focus landing there) renders partly underneath it. Found as a genuine,
     previously-undiscovered defect via mutation-verification, 2026-07-24: #about-maya's own
     48px top padding (--spacing-2xl) looked like plausible clearance but was never actually
     enough (71px needed), and no scroll ever happened to land there to reveal it live.
     scroll-padding-top on the scrolling container covers every current and future fragment
     target uniformly, rather than patching one section's own padding. */
  scroll-padding-top: 71px;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color var(--transition-normal),
    color var(--transition-normal);
}

/* Avoid orphaned 1-2 word last lines in wrapped body copy (web and mobile alike) - text-wrap:
   pretty is a browser-native line-breaking mode built for exactly this, so it self-adjusts at
   every viewport width instead of a hardcoded &nbsp; that would only be correct at one width.
   Progressive enhancement: unsupported browsers just fall back to normal wrapping. Headings/
   short labels use "balance" instead, which evens out all lines rather than only the last one. */
p,
li {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* Prevent image dragging */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  pointer-events: auto;
}

/* ==========================================================================
   Layout: Container
   ========================================================================== */

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

/* Navigation */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: all var(--transition-normal);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.nav-brand {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--accent-color);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xl);
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-normal);
  position: relative;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 6px;
}

.nav-link:hover {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

.nav-link.active {
  color: var(--accent-color);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-color);
  border-radius: 1px;
}

.theme-toggle {
  background: none;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-lg);
  transition: all var(--transition-normal);
  color: var(--text-primary);
}

.theme-toggle:hover {
  border-color: var(--accent-color);
  background-color: var(--bg-secondary);
  transform: scale(1.1);
}

.theme-icon {
  font-size: var(--font-size-lg);
}

/* Hidden on desktop, where .nav-links is already visible inline - shown only inside the
   max-width:768px block below. */
.nav-menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-lg);
  transition: all var(--transition-normal);
  color: var(--text-primary);
}

.nav-menu-toggle:hover {
  border-color: var(--accent-color);
  background-color: var(--bg-secondary);
}

@media (max-width: 768px) {
  /* Was a flat display:none with no alternative access path at all - the entire nav
     (Home/Experience/Honors & Awards/Community/Contact) was unreachable on every phone and
     most tablets, not just visually condensed (jxs-test-standard suite-audit.md, "a responsive
     rule that hides an element needs a reachability check", found 2026-07-24). Now a
     toggleable dropdown instead of an unconditional hide. */
  .nav-menu-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .nav-links.nav-links-open {
    display: flex;
  }

  .nav-link {
    padding: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-md);
  }

  .nav-container {
    padding: 0 var(--spacing-md);
  }
}

/* ==========================================================================
   Maya Page Shell
   ========================================================================== */

/* Maya-specific styles */
.maya-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 70px; /* Account for fixed nav */
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.maya-hero {
  background: var(--bg-secondary);
  padding: var(--spacing-3xl) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.maya-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* 0.6x the prior 480px - live report: the image column left the text column cramped and
     the overall row imbalanced. The freed width goes to the 1fr text column automatically. */
  grid-template-columns: minmax(0, 288px) minmax(0, 1fr);
  gap: var(--spacing-2xl);
  /* Top-aligned, not vertically centered: live report (annotated screenshot) - the image sat
     lower than the title/text column because centering plus the image wrapper's own top
     padding pushed it down. Aligning both columns to the top matches the title's position. */
  align-items: start;
}

.maya-hero-container > * {
  min-width: 0; /* prevent grid/flex children from forcing page overflow */
}

.maya-hero-container > div:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.maya-hero-image {
  width: 100%;
  /* 0.6x the prior 480px/640px, matching .maya-hero-container's scaled column - a principled
     40% reduction rather than a guessed value. */
  max-width: min(288px, 100%);
  /* 2nd annotated live report: the image bottom should reach further down. The actual portrait
     file is 800x847px, so at 288px width object-fit:contain already renders its full natural
     ~305px height with nothing to un-clip - going taller while keeping the 288px width (from
     the earlier 40% reduction) means a taller fixed frame with object-fit:cover instead of
     scaling width back up, which would undo that reduction. object-position:center top keeps
     the face framed rather than cropping from the center of a now-taller box. */
  height: 500px;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  box-shadow: 0 8px 24px var(--shadow);
  border: 3px solid var(--border-color);
  background: var(--bg-secondary);
  padding: var(--spacing-sm);
  display: block;
  margin: 0;
}


.maya-hero-bio {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-lg);
}

.maya-hero-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  overflow-wrap: anywhere;
}

.maya-hero-roleline {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  font-weight: 500;
  white-space: normal;
}

@media (min-width: 1025px) {
  .maya-hero-roleline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.maya-hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: var(--spacing-md);
}

.maya-hero-description {
  font-size: var(--font-size-base);
  line-height: 1.9;
  color: var(--text-primary);
}

.maya-hero-description p {
  margin-bottom: var(--spacing-lg);
}

.maya-hero-description strong {
  color: var(--accent-color);
  font-weight: 600;
}

.maya-hero-description ul {
  margin-left: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-sm);
}

.maya-hero-description li {
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
}

/* 2nd annotated live report: the 1st round only broke out of .maya-hero-bio's own padding
   (still confined to the text column's grid track). Now moved to be a sibling of
   .maya-hero-container entirely, sharing its exact max-width/centering so this callout spans
   the FULL hero width (image column included), not just the text column. Border removed per
   feedback. Single-column list kept deliberately - the explicit ask is no 1-2 orphan words on
   a line, which more width per line serves directly; splitting into multiple narrower columns
   would work against that. */
.maya-hero-help-box {
  max-width: 1200px;
  /* Live report: .maya-hero-container's own padding-bottom (48px, removed) plus this box's
     top margin stacked to an 80px gap that read as "too much space". Tightened to 16px. */
  margin: var(--spacing-md) auto 0;
  padding: 0 var(--spacing-lg) var(--spacing-2xl);
  background: var(--bg-secondary);
  border-radius: 16px;
}

.maya-hero-help-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  padding-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.maya-hero-help-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.maya-hero-help-box li {
  line-height: 1.8;
  color: var(--text-primary);
}

.maya-hero-help-box li strong {
  color: var(--accent-color);
}

/* ==========================================================================
   Chat Intro Section
   ========================================================================== */

.maya-chat-intro {
  background: var(--bg-primary);
  padding: var(--spacing-xl) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.maya-chat-intro-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.maya-chat-intro-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.maya-chat-intro-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: var(--spacing-md);
}

/* Keep the grounded tagline on one line within the shared 1200px content width */
.maya-chat-intro-tagline {
  max-width: 100%;
  white-space: nowrap;
}

.maya-chat-intro-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Chat Shell / Container
   ========================================================================== */

/* Chat shell: same horizontal inset as hero / intro (1200px content column) */
.maya-chat-shell {
  padding: 0 var(--spacing-lg);
}

/* Chat Container */
.maya-chat-container {
  flex: 1;
  display: flex;
  /* 1200px baseline + 8% wider on each side = 16% total - live report: the chat space felt
     unnaturally centered/narrow. A principled scaling of the existing value, not a guess. */
  max-width: 1392px;
  margin: 0 auto;
  width: 100%;
  /* 1.3x the prior calc(100vh - 200px) - live report: the message area only fit one exchange
     before requiring scroll. Scaling the existing formula gives a principled "30% more" rather
     than an arbitrary guessed pixel value. */
  height: calc(130vh - 260px);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.maya-sidebar {
  width: 260px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.maya-sidebar-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.maya-new-chat-btn {
  width: 100%;
  padding: var(--spacing-md);
  background: var(--accent-color);
  color: var(--bg-primary);
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.maya-new-chat-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--shadow);
}

.maya-chat-history {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.maya-history-group {
  margin-bottom: var(--spacing-xl);
}

.maya-history-group-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.maya-history-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.maya-history-item {
  padding: var(--spacing-md);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  /* Explicit, theme-aware color: script.js sets the tile's text directly on this element
     (not a nested span), so without this it falls back to the browser's default button text
     color, which does not adapt to dark mode - confirmed live as an unreadable tile. */
  color: var(--text-primary);
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maya-history-delete {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.maya-history-delete:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.maya-history-item:hover {
  background: var(--bg-tertiary);
}

.maya-history-item.active {
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent-color);
}

.maya-history-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.maya-history-text {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Main Chat Area
   ========================================================================== */

.maya-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

.maya-chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  scroll-behavior: smooth;
}

.maya-message {
  display: flex;
  gap: var(--spacing-md);
  max-width: 800px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.maya-message.user {
  margin-left: auto;
  flex-direction: row-reverse;
}

.maya-message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center center;
  border: 2px solid var(--border-color);
}

.maya-message.user .maya-message-avatar {
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-primary);
  font-weight: 600;
  border: none;
}

.maya-message-content {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.7;
  word-wrap: break-word;
  position: relative;
}

.maya-message.user .maya-message-content {
  background: var(--accent-color);
  color: var(--bg-primary);
}

.maya-message-actions {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  display: flex;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.maya-message:hover .maya-message-actions {
  opacity: 1;
}

.maya-message-action-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
  padding: 0;
}

.maya-message.user .maya-message-action-btn {
  background: rgba(255, 255, 255, 0.2);
  color: var(--bg-primary);
}

.maya-message-action-btn:hover {
  background: var(--bg-tertiary);
  transform: scale(1.1);
}

.maya-message.user .maya-message-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Copy notification toast */
.maya-copy-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--accent-color);
  color: var(--bg-primary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow);
  z-index: 10000;
  animation: fadeInUp 0.3s ease, fadeOut 0.3s ease 1.7s;
  font-size: var(--font-size-sm);
  font-weight: 500;
  pointer-events: none;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.maya-message-content code {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'Courier New', monospace;
}

.maya-message-content pre {
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
  position: relative;
  line-height: 1.5;
}

.maya-message-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.85em;
  color: inherit;
  white-space: pre;
  display: block;
}

.maya-message-content pre .code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cdd6f4;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.maya-message-content pre:hover .code-copy-btn {
  opacity: 1;
}

.maya-message-content pre .code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.maya-message-content ol,
.maya-message-content ul {
  padding-left: 1.5em;
  margin: 8px 0;
}

.maya-message-content li {
  margin-bottom: 4px;
}

.maya-message-content h1,
.maya-message-content h2,
.maya-message-content h3 {
  margin: 12px 0 8px;
  font-weight: 600;
}

.maya-message-content h1 { font-size: 1.05em; }
.maya-message-content h2 { font-size: 1.0em; }
.maya-message-content h3 { font-size: 0.95em; }

.maya-message-content blockquote {
  border-left: 3px solid var(--accent-color);
  padding-left: 12px;
  margin: 8px 0;
  opacity: 0.85;
}

.maya-message-content table {
  border-collapse: collapse;
  margin: 8px 0;
  width: 100%;
}

.maya-message-content th,
.maya-message-content td {
  border: 1px solid var(--bg-tertiary);
  padding: 6px 10px;
  text-align: left;
}

.maya-message-content th {
  background: var(--bg-tertiary);
  font-weight: 600;
}

.maya-message-content p {
  margin-bottom: var(--spacing-sm);
}

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

.maya-message.user .maya-message-content code {
  background: rgba(255, 255, 255, 0.2);
}

.maya-message.user .maya-message-content pre {
  background: rgba(0, 0, 0, 0.3);
}

/* Typing Indicator */
.maya-typing-indicator {
  display: flex;
  gap: var(--spacing-md);
  max-width: 800px;
}

.maya-typing-dots {
  display: flex;
  gap: 4px;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-secondary);
  border-radius: 12px;
}

.maya-typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing 1.4s infinite;
}

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

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

/* WCAG 2.2.2 Pause/Stop/Hide (Level A): an infinite, auto-starting animation with no user
   control - found unmeasured in a jxs-test-standard review, 2026-07-24. */
@media (prefers-reduced-motion: reduce) {
  .maya-typing-dot {
    animation: none;
  }
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* ==========================================================================
   Input Area
   ========================================================================== */

.maya-input-container {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.maya-input-wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-end;
}

.maya-input-box {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  background: var(--bg-secondary);
  color: var(--text-primary);
  resize: none;
  min-height: 52px;
  max-height: 200px;
  transition: all var(--transition-fast);
}

.maya-input-box:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.maya-submit-btn {
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--accent-color);
  color: var(--bg-primary);
  border: none;
  border-radius: 12px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
  min-width: 100px;
  height: 52px;
}

.maya-submit-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--shadow);
}

.maya-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.maya-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-aligned, not vertically centered: live report - centering combined with the taller
     .maya-chat-container (2.7) left a large, unwanted empty gap above the sample questions.
     The message list already grows/scrolls naturally (overflow-y: auto on .maya-chat-messages)
     as the conversation grows, so top-alignment doesn't need any extra dynamic-height logic. */
  justify-content: flex-start;
  padding: var(--spacing-xl) var(--spacing-3xl);
  text-align: center;
  color: var(--text-secondary);
}

.maya-empty-state-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-lg);
}

.maya-empty-state-text {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}

.maya-sample-question {
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.maya-sample-question:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

/* ==========================================================================
   Responsive: Maya Page
   ========================================================================== */

/* Responsive: tablet first (480px hero column breaks before 768) */
@media (max-width: 1024px) {
  .maya-hero-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    text-align: center;
  }

  .maya-hero-bio {
    padding-left: 0;
    padding-right: 0;
  }

  .maya-hero-image {
    margin: 0 auto;
    max-width: min(360px, 100%);
    max-height: 420px;
  }

  .maya-hero-title {
    font-size: var(--font-size-3xl);
  }

  .maya-chat-intro-tagline {
    white-space: normal;
  }

  .maya-sidebar {
    width: 220px;
  }
}

@media (max-width: 768px) {
  .maya-hero {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .maya-hero-image {
    max-width: min(280px, 100%);
    max-height: 360px;
  }

  .maya-hero-title {
    font-size: var(--font-size-2xl);
  }

  .maya-chat-intro {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .maya-chat-intro-title {
    font-size: var(--font-size-xl);
  }

  .maya-chat-shell {
    padding: 0 var(--spacing-md);
  }

  .maya-chat-container {
    flex-direction: column;
    height: auto;
    min-height: calc(100dvh - 160px);
  }

  .maya-sidebar {
    width: 100%;
    height: auto;
    max-height: 132px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .maya-sidebar-header {
    padding: var(--spacing-md);
  }

  .maya-chat-main {
    height: min(68dvh, 640px);
    min-height: 420px;
  }

  .maya-empty-state {
    padding: var(--spacing-lg) var(--spacing-md);
    justify-content: flex-start;
  }

  .maya-input-container {
    padding: var(--spacing-md);
  }

  .maya-input-wrapper {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .maya-submit-btn {
    width: 100%;
    min-width: 0;
  }

  .maya-message {
    max-width: 100%;
  }

  .maya-about {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .consent-box {
    max-width: 100%;
    margin: 0 var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .maya-hero-image {
    max-width: min(220px, 100%);
    max-height: 300px;
  }

  .maya-page {
    padding-top: 64px;
  }

  .maya-chat-main {
    height: min(62dvh, 560px);
    min-height: 360px;
  }

  .maya-new-chat-btn {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* ==========================================================================
   Consent Overlay
   ========================================================================== */

.consent-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 var(--spacing-xl) 0;
}
.consent-overlay.visible {
  display: flex;
}
.consent-box {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: var(--spacing-xl);
  max-width: 520px;
  width: calc(100% - var(--spacing-2xl));
}
.consent-box h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}
.consent-box p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--spacing-lg) 0;
}
.consent-box a {
  color: var(--text-primary);
  text-decoration: underline;
}
.consent-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: stretch;
}
.consent-opt-in {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--spacing-md) 0;
  cursor: pointer;
}
.consent-opt-in input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.consent-start-btn {
  border-radius: 8px;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  width: 100%;
  text-align: center;
  background: var(--accent-color);
  color: var(--bg-primary);
  border: 1px solid var(--accent-color);
}
.consent-start-btn:hover {
  background: var(--accent-hover);
}
.consent-footer-link {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
}
/* Live report: no visible gap above these links. Root cause: .consent-box p's own
   margin:0 (top) has higher specificity (1 class + 1 element) than .consent-footer-link
   alone (1 class), so it silently won and zeroed the intended top margin below. This
   selector's 2 classes beat that specificity outright. */
.consent-box .consent-footer-link {
  margin-top: var(--spacing-md);
}
.consent-footer-link a {
  color: var(--text-muted);
}
.maya-ai-disclosure {
  /* Moved out of .maya-chat-main (live report: text-align:center only centered it relative to
     the narrower column beside the sidebar, not the whole chat widget). Sharing
     .maya-chat-container's exact max-width/margin means both align to the same width, so
     text-align:center now centers across the full widget, sidebar included. */
  max-width: 1392px;
  margin: 0 auto var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  line-height: 1.5;
}
/* Per-chat saving status below input (read-only; Learn more opens info panel) */
.consent-status-footer {
  display: none;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--spacing-xs) var(--spacing-sm) 0;
  line-height: 1.5;
}
.consent-status-footer.visible { display: block; }
.consent-learn-more-btn {
  display: inline;
  margin-left: 0.35rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}
.consent-learn-more-btn:hover { color: var(--text-primary); }
.consent-info-close-btn {
  border-radius: 8px;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  width: 100%;
  text-align: center;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  margin-top: var(--spacing-md);
}
.consent-info-close-btn:hover { background: var(--bg-tertiary); }
.consent-opt-in input:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* ==========================================================================
   About Maya (transparency section, mirrors FAQPage schema)
   ========================================================================== */

.maya-about {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-2xl) var(--spacing-lg);
  /* Explicit on top of html's scroll-padding-top: the fixed nav is 71px, this section's own
     48px padding (--spacing-2xl) alone was never enough clearance - see the html rule above. */
  scroll-margin-top: 71px;
}
.maya-about-container {
  max-width: 800px;
  margin: 0 auto;
}
.maya-about h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}
.maya-about-summary {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}
.maya-about details {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  background: var(--bg-primary);
}
.maya-about summary {
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.maya-about details p {
  margin-top: var(--spacing-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Regression vs V1.5: footer <p> tags had no color/size styling at all, rendering as
   unstyled default black text instead of the muted, smaller trust-link style V1.5 used. */
.footer p {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin: var(--spacing-xs) 0 0;
}

.footer p:first-child {
  margin-top: 0;
}

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

/* ==========================================================================
   Social Icons
   ========================================================================== */

/* Regression vs V1.5: this section previously had zero CSS at all (a stale comment claimed
   "base layout is inline on the elements", but index.html never had any inline styles here),
   so the icons rendered unstyled and floated over the FAQ section above the footer. */
#social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  padding: var(--spacing-2xl) 0;
  background-color: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition-normal);
}

.social-icon:hover {
  opacity: 1;
  color: var(--accent-color);
  border-color: var(--accent-color);
  background-color: var(--bg-primary);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 25px var(--shadow-hover);
}
.social-icon[aria-label="LinkedIn"]:hover {
  color: #0077b5;
  border-color: #0077b5;
}
.social-icon[aria-label="GitHub"]:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}