/* Vanguard Design Master Aesthetic */
:root {
  color-scheme: dark;
  --bg-base: #000000;
  --bg-surface: #0a0a0c;
  --bg-surface-elevated: #111111;
  --text-primary: #ffffff;
  --text-secondary: #c0c0c0;
  --text-muted: #808080;
  --vanguard-red: #8a0c18;
  --vanguard-red-bright: #d91c2f;
  --vanguard-gold: #cba358;
  --vanguard-gold-light: #e8cd8e;
  --border-subtle: rgba(203, 163, 88, 0.2);
  --border-gold: rgba(203, 163, 88, 0.5);
  --border-white: rgba(255, 255, 255, 0.1);
  --shadow-glow: 0 0 24px rgba(138, 12, 24, 0.3);
  --radius-card: 4px;
  --radius-pill: 2px;
  --app-max-width: 500px;
  --transition-fast: 150ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background-color: var(--bg-base);
  background-image: 
    radial-gradient(circle at 50% -20%, rgba(138, 12, 24, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at center, rgba(203, 163, 88, 0.05) 0%, transparent 80%);
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
}

body { display: flex; justify-content: center; align-items: stretch; }
#root { flex: 1; display: flex; justify-content: center; }

.app-frame {
  position: relative; width: 100%; max-width: var(--app-max-width);
  height: 100dvh; min-height: 100dvh; padding: 24px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

.app-shell {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border-radius: 8px; background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 24px 48px rgba(0,0,0,0.8);
  padding: 16px; overflow: hidden; position: relative;
}

.app-shell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vanguard-gold), transparent);
  opacity: 0.3;
}

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-white);
  margin-bottom: 16px;
}

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

.app-title-mark {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(203, 163, 88, 0.3);
}

.app-title-text { display: flex; flex-direction: column; }
.app-title-text span:first-child {
  font-family: "Bebas Neue", sans-serif; font-size: 20px;
  color: var(--text-primary); letter-spacing: 0.1em; line-height: 1;
}
.app-title-text span:last-child {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--text-muted); margin-top: 2px;
}

.app-header-right {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--vanguard-gold); display: flex; align-items: center; gap: 6px;
}
.app-header-dot {
  width: 4px; height: 4px; background-color: var(--vanguard-red-bright);
  box-shadow: 0 0 8px var(--vanguard-red-bright); border-radius: 50%;
}

.app-body-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.app-body-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-body-content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

.glass-card, .glass-card-subtle, .result-card, .results-followup-card {
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.vanguard-handoff-card {
  background: linear-gradient(180deg, #121215 0%, var(--bg-surface-elevated) 100%);
  border: 1px solid var(--border-gold);
  border-radius: 8px; padding: 28px;
  box-shadow: 0 8px 32px rgba(138, 12, 24, 0.15);
  position: relative;
  overflow: hidden;
}
.vanguard-handoff-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--vanguard-gold), transparent);
}

.chat-thread, .results-thread {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; padding-right: 4px;
}
.chat-thread::-webkit-scrollbar, .results-thread::-webkit-scrollbar { width: 2px; }
.chat-thread::-webkit-scrollbar-thumb, .results-thread::-webkit-scrollbar-thumb { background: var(--border-subtle); }

.chat-bubble {
  max-width: 90%; padding: 12px 16px; font-size: 13px; line-height: 1.5;
  border-radius: var(--radius-card); border: 1px solid var(--border-subtle);
}
.chat-bubble-bot {
  align-self: flex-start; background-color: var(--bg-surface-elevated);
  color: var(--text-secondary); border-left: 2px solid var(--vanguard-gold);
}
.chat-bubble-user {
  align-self: flex-end; background-color: var(--vanguard-red);
  color: var(--text-primary); border-color: var(--vanguard-red-bright);
}
.chat-bubble-bot div:first-child {
  font-family: "Bebas Neue", sans-serif; font-size: 20px !important;
  color: var(--vanguard-gold-light); letter-spacing: 0.05em; margin-bottom: 8px !important;
}

.quick-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.quick-chip, .followup-chip {
  padding: 10px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  background-color: var(--bg-base); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast);
  border-radius: var(--radius-pill);
}
.quick-chip:hover, .followup-chip:hover {
  border-color: var(--vanguard-gold); color: var(--text-primary);
  background-color: rgba(203, 163, 88, 0.05);
}
.quick-chip.selected {
  border-color: var(--vanguard-red-bright); color: var(--text-primary);
  background-color: rgba(138, 12, 24, 0.2); box-shadow: inset 0 0 0 1px var(--vanguard-red-bright);
}

.app-cta-bar { margin-top: 16px; display: flex; gap: 12px; }
.app-cta-primary {
  flex: 1; padding: 16px; font-family: "Bebas Neue", sans-serif; font-size: 22px;
  letter-spacing: 0.1em; color: var(--text-primary);
  background: linear-gradient(135deg, var(--vanguard-red) 0%, #4a040b 100%);
  border: 1px solid var(--vanguard-red-bright); cursor: pointer; text-transform: uppercase;
  border-radius: var(--radius-card); transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(138, 12, 24, 0.3);
}
.app-cta-primary:hover {
  background: linear-gradient(135deg, var(--vanguard-red-bright) 0%, var(--vanguard-red) 100%);
  box-shadow: 0 4px 20px rgba(138, 12, 24, 0.5);
}
.app-cta-secondary {
  padding: 12px 16px; font-family: "Bebas Neue", sans-serif; font-size: 18px;
  letter-spacing: 0.1em; color: var(--vanguard-gold); background-color: transparent;
  border: 1px solid var(--border-gold); cursor: pointer; text-transform: uppercase;
  border-radius: var(--radius-card); transition: all var(--transition-fast);
}
.app-cta-secondary:hover { background-color: rgba(203, 163, 88, 0.1); color: var(--text-primary); }

.loading-reveal-shell { display: flex; flex-direction: column; gap: 16px; }
.loading-reveal-bar { height: 2px; background-color: rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.loading-reveal-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 50%;
  background-color: var(--vanguard-gold); animation: loadingSlide 1.5s infinite ease-in-out;
}
@keyframes loadingSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

.results-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.results-grid { display: flex; flex-direction: column; gap: 24px; }
.results-hero-top { display: flex; flex-direction: column; gap: 20px; }
.results-hero-kicker, .vanguard-panel-kicker, .result-option-detail-title {
  font-family: "Bebas Neue", sans-serif; font-size: 18px; color: var(--vanguard-gold);
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px;
}
.results-section-title {
  font-family: "Bebas Neue", sans-serif; font-size: 24px; color: var(--vanguard-gold-light);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-white);
}
.results-hero-title, .vanguard-panel-title, .result-option-title {
  font-family: "Bebas Neue", sans-serif; font-size: 38px; line-height: 1.15;
  color: var(--text-primary); letter-spacing: 0.05em; text-transform: uppercase; margin: 4px 0 12px 0;
}
.results-hero-subtitle { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.results-hero-actions { display: flex; gap: 12px; margin-top: 16px; }
.results-emphasis-line {
  font-family: "Bebas Neue", sans-serif; font-size: 24px; color: var(--text-primary);
  letter-spacing: 0.05em; margin-bottom: 8px; text-transform: uppercase;
}
.results-pill-row, .vanguard-concept-pills, .results-evidence-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.results-pill, .badge-evidence, .vanguard-concept-pill {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 12px;
  border: 1px solid var(--border-gold); color: var(--text-primary);
  background-color: rgba(203, 163, 88, 0.08); border-radius: 4px;
  font-weight: 500;
}
.badge-evidence span { color: var(--vanguard-gold); }

.results-list, .option-results-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 14px; }
.results-list li, .option-results-list li { font-size: 14px; line-height: 1.6; color: var(--text-secondary); padding-left: 20px; position: relative; }
.results-list li::before, .option-results-list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
  background-color: var(--vanguard-gold); border-radius: 50%;
  box-shadow: 0 0 8px rgba(203, 163, 88, 0.6);
}
.results-list li strong, .option-results-list li strong { color: var(--text-primary); font-weight: 600; }

.result-option-card {
  padding: 20px; border: 1px solid var(--border-subtle); background-color: rgba(255, 255, 255, 0.02);
  cursor: pointer; transition: all var(--transition-fast); border-radius: 8px; text-align: left;
}
.result-option-card:hover, .result-option-card.is-active {
  border-color: var(--vanguard-gold); background-color: rgba(203, 163, 88, 0.08);
  box-shadow: 0 4px 16px rgba(203, 163, 88, 0.1);
}
.result-option-copy { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 8px; line-height: 1.6; }
.result-option-grid, .vanguard-path-grid, .golden-form-summary-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }

.vanguard-path-cell, .golden-form-summary-cell {
  padding: 16px; border: 1px solid var(--border-subtle); 
  background-color: rgba(255, 255, 255, 0.02); border-radius: 8px;
}
.vanguard-path-cell span, .golden-form-summary-cell span {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vanguard-gold);
  display: block; margin-bottom: 6px;
}
.vanguard-path-cell strong, .golden-form-summary-cell strong {
  display: block; font-size: 14px; color: var(--text-primary); margin-top: 4px; line-height: 1.5; font-weight: 500;
}

.vanguard-concept-label, .option-concept-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--vanguard-gold); margin-top: 24px; display: block; font-weight: 600;
}

.vanguard-action-row, .results-footer-action { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-white); display: flex; flex-direction: column; }
.vanguard-cta-note, .access-placeholder-note, .results-inferred-note, .text-muted {
  font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 12px; display: block;
}
.option-vanguard-note {
  margin-top: 16px; padding: 12px; background-color: rgba(138, 12, 24, 0.15);
  border: 1px solid var(--vanguard-red); border-radius: var(--radius-card);
  font-size: 12px; color: var(--text-primary); line-height: 1.5;
}
.option-vanguard-note strong { color: var(--vanguard-red-bright); }

.section-targeted { animation: targetGlow 1.5s ease-out; }
@keyframes targetGlow {
  0%, 100% { border-color: var(--border-subtle); box-shadow: none; }
  50% { border-color: var(--vanguard-gold); box-shadow: 0 0 20px rgba(203, 163, 88, 0.2); }
}

.results-scroll-cue {
  background: transparent; border: none; color: var(--vanguard-gold); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center;
  justify-content: space-between; width: 100%; padding: 12px 0; margin-top: 16px;
  border-top: 1px solid var(--border-white); cursor: pointer;
}
.results-scroll-cue-arrow { font-size: 16px; }

p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; }
p:last-child { margin-bottom: 0; }
.text-secondary { color: var(--text-secondary); }
.results-body-copy { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 16px; }

/* Ensure overrides from React inline styles are trumped where needed to match aesthetic */
div[style*="font-size: 15px"],
div[style*="font-size: 12px"],
div[style*="font-size: 11px"],
div[style*="font-size: 10px"] {
  font-family: inherit;
}
.chat-bubble-bot div[style*="font-size: 15px"] {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 24px !important;
  letter-spacing: 0.1em !important;
  color: var(--vanguard-gold-light) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.chat-bubble-bot div[style*="font-size: 12px"],
.chat-bubble-bot div[style*="font-size: 11px"] {
  font-size: 14px !important;
  color: var(--text-primary) !important;
  line-height: 1.5 !important;
}
.chat-bubble-bot div[style*="font-size: 10px"] {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}