/* Yushin SaaS client — stylesheet (taak #72).
   Kleurwaarden zijn overgenomen uit de :root van tcm_10plus2_chatbot.html
   (Yushin-huisstijl, taak #64) voor merkherkenning — dit is enkel de
   dezelfde set kleurconstanten, geen andere overname. */

:root {
  --bg: #1E2A24;
  --card: #25332C;
  --ink: #F2EFEA;
  --muted: #A9B6AE;
  --accent: #C8A96B;
  --accent-2: #8B1E1E;
  --accent-light: #32413A;
  --border: #3C4A43;
  --good: #7BAE8C;
  --warn: #D9A24B;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1200px 400px at 50% -80px, rgba(200,169,107,0.10), transparent 60%),
    var(--bg);
  color: var(--ink);
  display: flex;
  justify-content: center;
  padding: 24px 12px 40px;
  min-height: 100vh;
}

#app {
  width: 100%;
  max-width: 720px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.topbar .brand {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.03em;
  color: var(--accent);
}
.topbar .muted {
  margin-left: auto;
  font-size: 13px;
}
.lang-switch { display: flex; gap: 4px; margin-left: auto; }
.lang-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.lang-btn.active { border-color: var(--accent); color: var(--accent); }
.topbar .muted + .btn { margin-left: 8px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25);
}

h2 { margin: 0 0 16px; font-size: 20px; line-height: 1.4; }
h3 { margin: 0 0 8px; font-size: 16px; }
h4 { margin: 0 0 4px; font-size: 15px; color: var(--accent); }
p { line-height: 1.5; }
.muted { color: var(--muted); font-size: 13px; }

/* Abonnementsscherm (taak #117) — plan-kaarten naast elkaar. */
.plan-cards { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.plan-card { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.plan-card .btn { margin-top: auto; }
.plan-price { font-size: 24px; font-weight: 700; color: var(--accent); margin: 4px 0 0; }
.billing-education-note { margin-top: 8px; }

/* Toegangspoort (taak #118) — betalen-of-code-keuze meteen na inloggen. */
.gate-or { text-align: center; margin: 16px 0; }
.gate-code-form { display: flex; align-items: flex-end; gap: 10px; }
.gate-code-form .field { margin-bottom: 0; flex: 1; }
.gate-discount-notice {
  background: rgba(46,125,50,0.15);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0;
  font-size: 13px;
}

.field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 13px; color: var(--muted); }
.field input, input[type="text"], input[type="email"], input[type="password"] {
  background: var(--accent-light);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}
.field input:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #1E2A24; }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--ink); }
.btn-link { background: none; border: none; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 8px 0; font-size: 13px; }
/* Automatische demo-invulknop (taak #90) — dashed rand als visuele cue dat
   dit een testhulpmiddel is, net als in de oude client-side tool. */
.btn-demo-autofill { border-style: dashed; }

.error {
  background: rgba(139,30,30,0.18);
  border: 1px solid var(--accent-2);
  color: #F2C9C9;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}

.options { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.opt-btn {
  text-align: left;
  background: var(--accent-light);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  cursor: pointer;
}
.opt-btn:hover { border-color: var(--accent); }

.section-title { color: var(--accent); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }

.progress { height: 6px; background: var(--accent-light); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.progress-fill { height: 100%; background: var(--accent); transition: width 0.2s ease; }
.progress-label { margin-bottom: 14px; }

.result-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--accent-light);
}
.result-card.rank1 { border-color: var(--accent); }
.meter { height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.meter-fill { height: 100%; background: var(--warn); }
.result-card details { margin-top: 6px; font-size: 13px; color: var(--muted); }
.result-card summary { cursor: pointer; color: var(--accent); }

.conclusion { font-style: italic; color: var(--ink); }

/* Spoor 3.1 van het Verbeterplan (taak #110) — intended-use/disclaimerzin
   bovenaan het rapport. Bewust met linker accentrand + eigen achtergrond,
   NIET zomaar als normale .muted-tekst: dit moet opvallen, niet wegvallen. */
.intended-use-statement {
  margin: 10px 0 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
  line-height: 1.4;
}

/* Taak #111 — compacte rapportfooter (vaste niet-medische positionering,
   herhaald onderaan het rapport). Bewust subtieler dan de kop-versie
   hierboven: geen kader, gewoon een dunne scheidingslijn, zodat het niet
   met de kop-tekst concurreert maar wel altijd zichtbaar blijft. */
.intended-use-footer {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.4;
}

.clock-card { margin-top: 16px; text-align: center; }
.clock-wrap { display: flex; justify-content: center; margin: 8px 0; }

.therapy-plan { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.therapy-plan-card {
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.auth-card { max-width: 420px; margin: 40px auto 0; }

/* Landingspagina-blok boven het inlog-/registratieformulier (logo + korte
   uitleg wat Yushin doet) — dit inlogscherm is voor de meeste bezoekers
   (incl. demo-links) het allereerste dat ze te zien krijgen. */
.landing { max-width: 560px; margin: 8px auto 0; text-align: center; }
.landing .auth-card { margin: 20px auto 0; text-align: left; }
.hero { padding: 8px 12px 0; }
.hero-logo {
  display: block;
  margin: 0 auto;
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 50%;
}
.hero-title { margin: 14px 0 8px; font-size: 22px; color: var(--ink); }
.hero-description {
  margin: 0 auto;
  max-width: 480px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Spoor 2.3 (Verbeterplan) — "coming soon"-sectie voor toekomstige modules.
   Bewust subtiel: kleiner lettertype dan de hero-description, dunne
   scheidingslijn erboven, zodat het niet concurreert met de eigenlijke
   login/registratie-call-to-action eronder. */
.coming-soon {
  margin: 20px auto 0;
  max-width: 480px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.12));
}
.coming-soon-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.coming-soon-intro {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.coming-soon-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  text-align: left;
}

/* Verborgen demo-toegang (taak #87) — bewust klein en onopvallend, niet
   bedoeld als prominente call-to-action voor gewone bezoekers. */
.demo-code-block { margin-top: 16px; text-align: center; }
.demo-code-toggle {
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 0;
}
.demo-code-form { display: flex; gap: 8px; justify-content: center; align-items: center; }
.demo-code-form input {
  width: 140px;
  background: var(--accent-light);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}
.demo-code-block .error { margin: 8px 0 0; text-align: left; max-width: 260px; margin-left: auto; margin-right: auto; }

/* Yushin-assistent als losstaande chatbubbel-pop-up (taak #89) — op verzoek
   van Danny losgekoppeld van de tekst van het therapieplan en getoond als
   een zwevend berichtvenster rechtsonder in beeld, in de stijl van een
   WhatsApp-bericht (ronde bubbel met "staartje", sluitkruisje). Vervangt de
   inline-variant (.assistant-bubble) uit taak #88. */
.assistant-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 300px;
  animation: assistant-popup-in 0.25s ease-out;
}
.assistant-popup .assistant-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.assistant-popup .assistant-speech {
  position: relative;
  background: var(--good);
  color: #16281C;
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.assistant-popup .assistant-speech::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 8px solid var(--good);
}
/* Gespreksdraadje in de assistent-pop-up (taak #91) — het therapieplan
   verschijnt niet meer als vaste tekst in de resultaten, maar als losse
   chatberichten die pas na een expliciete keuze van de therapeut opengaan
   (zie renderAssistantPopup in app.js). Enkel het laatste bericht in de
   thread krijgt het bubbel-"staartje", net als in echte chat-apps. */
.assistant-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.assistant-thread .assistant-speech::after { display: none; }
.assistant-thread .assistant-speech:last-child::after { display: block; }
.assistant-speech strong { display: block; margin-bottom: 2px; }
.assistant-speech p { margin: 4px 0 0; line-height: 1.35; }
.assistant-speech-muted { opacity: 0.85; font-style: italic; }
/* Keuzemenu ("Ja, toon het voorstel" / "Nee, bedankt") — verschijnt als
   losse chip-knoppen onder de vraag van de assistent, vergelijkbaar met
   quick-reply-knoppen in chatapps. */
.assistant-menu { display: flex; flex-direction: column; gap: 6px; }
.assistant-menu-btn {
  background: var(--card);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.assistant-menu-btn:hover { background: var(--accent); color: #1E2A24; }
.assistant-menu-btn-secondary { border-color: var(--border); color: var(--muted); }
.assistant-menu-btn-secondary:hover { background: var(--accent-light); color: var(--ink); }
.assistant-popup-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
@keyframes assistant-popup-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Red-flag / safety-laag (Spoor 1.4, taak #104/#105). Twee gedragsniveaus:
   .redflag-overlay (tier "hard"/NOODSIGNAAL) is een volledig blokkerende,
   niet-sluitbare backdrop — dekt de hele viewport af (pointer-events vangt
   alle klikken op de rest van de pagina op) tot de therapeut een nieuwe
   sessie start. .redflag-banner (tier "soft"/ALARM+WAARSCHUWING) is NIET
   blokkerend: de therapeut kan gewoon verder werken, maar moet elke melding
   expliciet aanvinken als gelezen voor de banner verdwijnt (Danny's
   expliciete instructie, chat 2026-08-26). Hoogste z-index van de app:
   moet altijd boven de assistant-popup (1000) uit komen. */
.redflag-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 14, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.redflag-modal {
  background: var(--card);
  border: 2px solid var(--accent-2);
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.redflag-modal h2 {
  color: var(--accent-2);
  margin-top: 0;
}
.redflag-item {
  border-left: 4px solid var(--accent-2);
  background: rgba(139, 30, 30, 0.12);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin-bottom: 12px;
  line-height: 1.45;
  font-size: 14px;
}
.redflag-item-soft {
  border-left-color: var(--warn);
  background: rgba(217, 162, 75, 0.12);
}
.redflag-item strong { display: block; margin-bottom: 4px; }
.redflag-ack-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.redflag-ack-row label { font-size: 13px; cursor: pointer; }
.redflag-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 20px;
  z-index: 1500;
  max-width: 520px;
  margin: 0 auto;
  background: var(--card);
  border: 2px solid var(--warn);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: assistant-popup-in 0.25s ease-out;
}
.redflag-banner h3 { color: var(--warn); margin: 0 0 8px; font-size: 15px; }

@media (max-width: 640px) {
  .card { padding: 16px; }
  .assistant-popup { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
  .assistant-thread { max-height: 280px; }
  .redflag-modal { padding: 18px; }
}