/* ============================================================
   SUMMIT THEME — Shared styles across all pages
   Based on summit_marketing.pdf design language:
   Dark navy header/nav, white content area, geometric mountain
   ============================================================ */

/* AUDIT: All theme colors are in this one file. If the brand
   changes, update here and all pages reflect it. */

/* ============================================================
   RESET & BASE
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f5f5f7;
  color: #333;
  min-height: 100vh;
}

/* ============================================================
   HEADER — dark navy matching marketing sky
   ============================================================ */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(135deg, #1a1a3e 0%, #2a2a52 100%);
  border-bottom: 1px solid #3a3a5e;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.header h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
}

.header-subtitle {
  font-size: 11px;
  color: #a0a0c0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-link {
  color: #a0a0c0;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.header-link:hover {
  color: #ffffff;
}

/* ============================================================
   CHAT LAYOUT (index.html)
   ============================================================ */
body.chat-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ============================================================
   MESSAGES AREA — white background
   ============================================================ */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff;
}

/* Scrollbar styling */
.messages::-webkit-scrollbar {
  width: 6px;
}

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

.messages::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

/* ============================================================
   MESSAGE BUBBLES
   ============================================================ */
.message {
  max-width: min(75%, 640px);
  padding: 12px 16px;
  border-radius: 12px;
  line-height: 1.5;
  font-size: 14px;
  word-wrap: break-word;
}

.message.user {
  align-self: flex-end;
  background: #3d3570;
  color: #f0eef5;
  border-bottom-right-radius: 4px;
}

.message.assistant {
  align-self: flex-start;
  background: #f0f0f3;
  color: #333;
  border: 1px solid #e0e0e5;
  border-bottom-left-radius: 4px;
}

.message.assistant .cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: #d4a745;
  margin-left: 2px;
  animation: blink 0.8s infinite;
  vertical-align: text-bottom;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Session summary message */
.message.summary {
  align-self: center;
  background: #eef6ee;
  border: 1px solid #c0dcc0;
  color: #3a6a3a;
  max-width: 85%;
  border-radius: 8px;
}

/* Agent 4 score card — session-end payoff.
   Design principles (Taylor 2026-05-23 redesign):
   - Flat background, no gradient, no shadow, no rounded border. Looks like a
     letter or report, not a bordered "card."
   - One accent (the score number) does the heavy lifting. Editorial serif weight.
   - Subtle hairline rule under the trajectory — no full-bracket border.
   - Reasoning section hidden by default behind a <details> toggle. Reasoning is
     defensibility-content (research-grounded, prof-audience per Scott's prompt);
     user-facing card emphasizes gaps + trajectory. Toggle stays as a demo-time
     "show your work" reveal. Likely retired post-demo per Taylor 2026-05-23. */
.message.score-card {
  align-self: stretch;
  background: #fbfbf8;
  color: #2a2a2a;
  max-width: 95%;
  padding: 32px 36px 28px;
}

.score-trajectory {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e3d5;
}
.score-current {
  /* Editorial: serif weight + size carries the moment. Georgia is system-safe;
     falls back through to serif if missing. */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 64px;
  font-weight: 400;
  color: #2a2a2a;
  line-height: 1;
  letter-spacing: -0.02em;
}
.score-arrow {
  font-size: 20px;
  font-weight: 400;
  color: #9a9a92;
}
.score-arrow.up { color: #5a7a5a; }
.score-arrow.down { color: #8a5050; }
.score-arrow.flat { color: #9a9a92; }
.score-baseline {
  font-size: 14px;
  color: #7a7a72;
  font-style: italic;
}

.score-section {
  margin-bottom: 24px;
}
.score-section:last-child {
  margin-bottom: 0;
}
.score-section h3 {
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: #6a6a62;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.score-body {
  font-size: 15px;
  line-height: 1.6;
  color: #2a2a2a;
}
.score-body p {
  margin: 0 0 0.8em 0;
}
.score-body p:last-child {
  margin-bottom: 0;
}
.score-body ul,
.score-body ol {
  margin: 4px 0 8px 0;
  padding-left: 22px;
}
.score-body li {
  margin-bottom: 4px;
}

/* Collapsible reasoning — text-button feel, no chrome.
   Positioned right under the trajectory (above the gaps section). The
   trajectory already has a bottom border, so no top divider needed here. */
.score-collapsible {
  margin-bottom: 24px;
}
.score-collapsible > summary {
  font-size: 13px;
  color: #7a7a72;
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.score-collapsible > summary::-webkit-details-marker { display: none; }
.score-collapsible > summary:hover {
  color: #2a2a2a;
}
.score-collapsible > summary::before {
  content: '+';
  font-size: 14px;
  color: #9a9a92;
  width: 12px;
  display: inline-block;
}
.score-collapsible[open] > summary::before {
  content: '–';
}
.score-collapsible[open] > summary {
  margin-bottom: 12px;
}
.score-collapsible .score-body {
  font-size: 14px;
  color: #4a4a42;
}

/* Mobile: narrower viewport, smaller score number, tighter padding.
   Required per CLAUDE.md "mobile rendering is required failure mode" check. */
@media (max-width: 600px) {
  .message.score-card {
    padding: 24px 20px 22px;
    max-width: 100%;
  }
  .score-current {
    font-size: 48px;
  }
  .score-trajectory {
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 16px;
  }
  .score-arrow {
    font-size: 18px;
  }
  .score-baseline {
    font-size: 13px;
  }
  .score-section {
    margin-bottom: 20px;
  }
  .score-section h3 {
    font-size: 11px;
  }
  .score-body {
    font-size: 14.5px;
  }
  .score-collapsible {
    margin-bottom: 20px;
  }
}

/* System-style notice for file upload confirmations and other app-spoken messages */
.message.system-notice {
  align-self: center;
  background: #f4f4f8;
  border: 1px solid #d8d8e0;
  color: #555;
  max-width: 85%;
  border-radius: 8px;
  font-size: 13px;
  padding: 8px 14px;
  font-style: italic;
}

/* During streaming, the bubble holds raw textContent (no <p> wrapping).
   pre-wrap preserves the blank lines between paragraphs so the layout doesn't
   collapse-then-reflow when marked.parse runs on the 'done' event. The class
   is removed in renderToBubble() before innerHTML is set. */
.message.streaming {
  white-space: pre-wrap;
}

/* Markdown-rendered content inside assistant + summary bubbles. Browser
   defaults for <p>, <pre>, <code>, <ul>/<ol> would otherwise produce excessive
   paragraph margin and indistinguishable code blocks. */
.message.assistant p,
.message.summary p {
  margin: 0 0 0.7em 0;
}
.message.assistant p:last-child,
.message.summary p:last-child {
  margin-bottom: 0;
}
.message.assistant pre,
.message.summary pre {
  background: #1e1e2e;
  color: #e8e8f0;
  padding: 10px 14px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 8px 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.message.assistant pre code,
.message.summary pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
.message.assistant code,
.message.summary code {
  background: rgba(0, 0, 0, 0.07);
  padding: 0 4px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.92em;
  vertical-align: baseline;
}
.message.assistant ul,
.message.assistant ol,
.message.summary ul,
.message.summary ol {
  margin: 4px 0 8px 0;
  padding-left: 22px;
}
.message.assistant li,
.message.summary li {
  margin-bottom: 3px;
}
.message.assistant hr,
.message.summary hr {
  border: none;
  border-top: 1px solid #d0d0d8;
  margin: 12px 0;
}

/* ============================================================
   WELCOME SCREEN
   ============================================================ */
.welcome {
  text-align: center;
  padding: 60px 20px;
  color: #888;
}

.welcome h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #2a2a52;
  margin-bottom: 8px;
}

.welcome p {
  font-size: 14px;
  margin-bottom: 4px;
  color: #666;
}

.welcome .tagline {
  color: #d4a745;
  font-style: italic;
  margin-top: 12px;
}

/* Setup instructions (shown when no API key) */
.setup-instructions {
  background: #faf8f0;
  border: 1px solid #d4a745;
  border-radius: 8px;
  padding: 24px;
  margin: 40px auto;
  max-width: 500px;
  font-size: 14px;
}

.setup-instructions h3 {
  color: #d4a745;
  margin-bottom: 12px;
}

.setup-instructions p {
  margin-bottom: 8px;
  color: #555;
  white-space: pre-line;
}

/* ============================================================
   INPUT AREA
   ============================================================ */
.input-area {
  padding: 12px 20px 16px;
  background: #ffffff;
  border-top: 1px solid #e0e0e5;
  flex-shrink: 0;
}

/* File upload indicator */
.file-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  padding: 4px 8px;
  background: #f0f0f3;
  border: 1px solid #e0e0e5;
  border-radius: 6px;
  font-size: 12px;
  color: #555;
  flex-shrink: 0;
}

/* animation for loading bar */
.file-indicator.uploading {
  background: #e8f0fa;
  border-color: #b8d0e8;
  color: #2c5282;
}

.file-indicator.uploading::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid #b8d0e8;
  border-top-color: #2c5282;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.file-indicator.uploaded::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: #2d8f47;
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.file-indicator.hidden {
  display: none;
}

.file-indicator-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-indicator-remove {
  background: none;
  border: none;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.file-indicator-remove:hover {
  color: #c0392b;
}

/* Upload button */
.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #f5f5f7;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  color: #888;
  transition: all 0.2s;
  flex-shrink: 0;
}

.upload-btn:hover {
  border-color: #3d3570;
  color: #3d3570;
}

.input-row {
  display: flex;
  gap: 8px;
  max-width: 800px;
  margin: 0 auto;
}

.input-area textarea {
  flex: 1;
  background: #f5f5f7;
  border: 1px solid #ddd;
  color: #333;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  height: 44px;
  max-height: 120px;
  outline: none;
  transition: border-color 0.2s;
}

.input-area textarea:focus {
  border-color: #3d3570;
}

.input-area textarea::placeholder {
  color: #999;
}

.send-btn {
  background: #3d3570;
  border: none;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s;
  flex-shrink: 0;
}

.send-btn:hover {
  background: #4d4580;
}

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

.finish-btn {
  background: transparent;
  border: 1px solid #ddd;
  color: #888;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.finish-btn:hover {
  border-color: #d4a745;
  color: #d4a745;
}

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

.finish-btn.hidden {
  display: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-note {
  text-align: center;
  padding: 6px;
  font-size: 11px;
  color: #999;
  background: #ffffff;
}

/* ============================================================
   INTRO PAGE (intro.html) SPECIFIC STYLES
   ============================================================ */
.content {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.hero {
  text-align: center;
  margin-bottom: 48px;
}

.hero h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #2a2a52;
  margin-bottom: 6px;
}

.hero .subtitle {
  font-size: 14px;
  color: #888;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero .tagline {
  font-size: 18px;
  color: #d4a745;
  font-style: italic;
}

.section {
  margin-bottom: 36px;
}

.section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #2a2a52;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.section p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}

.section ul {
  list-style: none;
  padding: 0;
}

.section ul li {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  padding: 8px 0;
  padding-left: 16px;
  position: relative;
}

.section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4a745;
}

.cta {
  text-align: center;
  margin-top: 48px;
}

.cta p {
  font-size: 15px;
  color: #888;
  margin-bottom: 16px;
}

.cta a {
  display: inline-block;
  background: #3d3570;
  color: #ffffff;
  padding: 12px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s;
}

.cta a:hover {
  background: #4d4580;
}

/* Consent block on the About/intro page — sits inside .cta between the
   call-to-action <p> and the Start Learning <a>. AUDIT: this is the ONLY
   place consent is collected; index.html reads from localStorage. */
.intro-consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto 20px;
  padding: 14px 16px;
  background: rgba(22, 33, 62, 0.6);
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  text-align: left;
}

.intro-consent .consent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #c0c0d8;
  cursor: pointer;
  line-height: 1.4;
}

.intro-consent .consent-row input {
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.intro-consent #introTesterNameInput {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #3a3a5a;
  background: #16213e;
  color: #e0e0e0;
  width: 100%;
  box-sizing: border-box;
}

/* Loading state */
.loading {
  text-align: center;
  padding: 80px 20px;
  color: #888;
}

/* Header buttons */
.header-btn {
  background: transparent;
  border: 1px solid #3a3a5e;
  color: #a0a0c0;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.header-btn:hover {
  border-color: #a0a0c0;
  color: #ffffff;
}

.header-btn.new-session {
  border-color: #d4a745;
  color: #d4a745;
}

.header-btn.new-session:hover {
  background: rgba(212, 167, 69, 0.1);
}

/* ============================================================
   MOBILE — narrow viewport overrides
   ============================================================ */

/* Default state: full button label visible, short label hidden. The
   .btn-text-short element only exists on the New Session button (see
   index.html). Below 600px the labels swap so the button collapses to "+". */
.btn-text-short { display: none; }

@media (max-width: 600px) {
  /* Header subtitle "Learning Through Struggle" wraps into 3 lines on narrow
     viewports and pushes the action buttons off-screen. Hide it on mobile —
     the SUMMIT wordmark + logo carry the brand alone. Origin: 2026-04-28. */
  .header-subtitle { display: none; }

  /* Collapse "+ New Session" → "+" so all three header buttons fit. */
  .btn-text-full { display: none; }
  .btn-text-short { display: inline; }
}

/* ============================================================
   SYNTHESIZING LOADER (3-agent transition between A1 and A3)
   ============================================================
   Shown below A1's response while Agent 2 runs synthesis in the background.
   The user sees A1's final intake message, then this loader appears with
   animated dots, then on 'done' the loader is removed and the chat continues.
   Origin: 2026-05-12 — Three_agent_design.md §4.
   ============================================================ */
.synthesizing-loader {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0.75rem 0 0.25rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.95em;
  color: #6b6b6b;
  font-style: italic;
}
.synthesizing-loader .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #6b6b6b;
  border-radius: 50%;
  animation: synth-dot-pulse 1.4s infinite ease-in-out both;
}
.synthesizing-loader .dot:nth-child(2) { animation-delay: 0.2s; }
.synthesizing-loader .dot:nth-child(3) { animation-delay: 0.4s; }
.synthesizing-loader .dot:nth-child(4) { animation-delay: 0.6s; }
@keyframes synth-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Success notice shown after synthesis completes — paired with the auto-continue
   into A3's first teaching turn. Visual style matches the loader class but with
   success-green color and no animation. Origin: 2026-05-12 Option A' UX. */
.synth-complete {
  margin: 0.75rem 0 0.25rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.95em;
  color: #1d8350;
  font-style: normal;
}