/* De Spiral bij nacht.
 *
 * Eén vast thema, geen licht/donker-schakelaar: het spel speelt zich af
 * tegen een sterrenhemel met gouden randen om alles heen, en die sfeer
 * halveren om een lichte variant te onderhouden levert niets op — dit is
 * een app voor één speler. `color-scheme: dark` zorgt dat de browser zijn
 * eigen onderdelen (schuifbalken, invulvelden, datumkiezers) meekleurt.
 *
 * Geen externe lettertypen of plaatjes: de sterrenhemel is opgebouwd uit
 * CSS-verlopen. Dat scheelt verzoeken naar buiten (er hoeft geen enkel
 * apparaat iets bij Google op te halen) en werkt offline in de PWA.
 */
:root {
  color-scheme: dark;

  --bg: #0d1330;          /* nachtblauw, de basis */
  --bg-diep: #070b1d;     /* achter alles: de leegte tussen de werelden */
  --bg-alt: #17204a;      /* panelen en zijbalk */
  --border: #2b3668;
  --goud: #e2b74f;
  --goud-diep: #a07c22;
  --text: #eaeefc;
  --muted: #97a2cc;
  --accent: var(--goud);
  --accent-soft: rgba(226, 183, 79, 0.16);
  --bubble-user: #2e3d8e;
  --bubble-user-text: #f2f5ff;
  --bubble-bot: #18214a;
  --rood: #f0714f;
  --groen: #57c98a;

  /* De zeven scholen. Deze kleuren zijn niet decoratief: ze zeggen in één
     oogopslag waar een kennisbank-item of een wizard bij hoort, en ze
     komen overeen met de kleuren die het spel zelf gebruikt. */
  --school-fire: #f0672e;
  --school-ice: #5cc4f0;
  --school-storm: #a86cf0;
  --school-myth: #f0cf4a;
  --school-life: #5cc86e;
  --school-death: #b3a6d0;
  --school-balance: #e0bc7a;
  --school-star: #f2d98a;
  --school-sun: #f5a742;
  --school-moon: #9fb6e8;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg-diep);
  color: var(--text);
  height: 100dvh;
  overflow-x: hidden;
}

/* De sterrenhemel. Twee tegels van verschillende maat over elkaar, zodat
   het patroon zich niet zichtbaar herhaalt, plus twee stilstaande nevels
   in de hoeken. Vast aan het venster en muisdicht: het is achtergrond,
   geen inhoud. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 12%, rgba(120, 86, 200, 0.30), transparent 45%),
    radial-gradient(circle at 85% 78%, rgba(40, 110, 190, 0.26), transparent 50%),
    radial-gradient(1.4px 1.4px at 24px 38px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.2px 1.2px at 148px 92px, rgba(226, 183, 79, 0.8), transparent),
    radial-gradient(1px 1px at 72px 176px, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.3px 1.3px at 196px 24px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 118px 132px, rgba(174, 200, 255, 0.75), transparent),
    radial-gradient(1.5px 1.5px at 52px 108px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.2px 1.2px at 262px 210px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 310px 66px, rgba(226, 183, 79, 0.65), transparent),
    radial-gradient(1.4px 1.4px at 210px 288px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 34px 250px, rgba(174, 200, 255, 0.6), transparent);
  background-size:
    100% 100%, 100% 100%,
    220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
    340px 340px, 340px 340px, 340px 340px, 340px 340px;
}

/* Alle koppen in een boekletter: dat is het verschil tussen "een chat-app"
   en "iets uit de Spiral". Alleen koppen — lopende tekst blijft schreefloos,
   want die moet je op een telefoon nog kunnen lezen. */
h1, h2, h3, .titel-serif {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, ui-serif, serif;
  letter-spacing: 0.02em;
  color: var(--goud);
  text-shadow: 0 1px 8px rgba(226, 183, 79, 0.25);
}

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 0.85rem; }
/* De tellers zetten hun tweede regel zelf met een \n; alleen dáár mogen
   regeleinden blijven staan. Stond dit op .muted zelf, dan brak elke
   uitlegtekst óók af op de plek waar de HTML toevallig een nieuwe regel
   begint. */
#kb-tellers { white-space: pre-line; }
.error { color: var(--rood); font-size: 0.9rem; }

/* ── Login ── */
#login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  padding: 1rem;
}

.login-card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem;
  border: 1px solid var(--goud-diep);
  border-radius: 16px;
  background: linear-gradient(180deg, #1b2452 0%, #131b40 100%);
  box-shadow: 0 0 0 1px rgba(226, 183, 79, 0.18), 0 18px 50px rgba(0, 0, 0, 0.55);
}

.login-card h1 { margin: 0; font-size: 1.6rem; }
.login-links { display: flex; justify-content: space-between; gap: 0.8rem; margin: 0; }
.login-links a { color: var(--goud, #d4af6a); font-size: 0.9rem; text-decoration: none; }
.login-links a:hover { text-decoration: underline; }
.login-card p { margin: 0; }

.login-card input {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(7, 11, 29, 0.65);
  color: var(--text);
  font-size: 1rem;
}
.login-card input:focus {
  outline: none;
  border-color: var(--goud);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

button {
  padding: 0.7rem 1rem;
  border: 1px solid var(--goud-diep);
  border-radius: 10px;
  background: linear-gradient(180deg, #e6c368 0%, #c19a34 100%);
  color: #241a03;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-weight: 400;
  border: 1px solid var(--border);
}
button.ghost:hover { border-color: var(--goud-diep); background: rgba(226, 183, 79, 0.08); }

/* ── Chat layout ── */
#chat-view {
  display: flex;
  height: 100dvh;
}

#sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(23, 32, 74, 0.95) 0%, rgba(13, 19, 48, 0.95) 100%);
  backdrop-filter: blur(2px);
}

.sidebar-head {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-tools {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  /* Op lage schermen buigt de knoppenkolom mee (scrolt) zodat de
     gesprekkenlijst erboven altijd zichtbaar blijft; nooit helemaal
     dicht, zodat de knoppen bereikbaar blijven. */
  flex-shrink: 1;
  min-height: 5.5rem;
  overflow-y: auto;
}
.sidebar-tools button { width: 100%; }
.sidebar-head button { width: 100%; }

#status-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--muted);
}
#status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
#status-dot.online { background: var(--groen); box-shadow: 0 0 8px rgba(87, 201, 138, 0.8); }
#status-dot.waking { background: var(--goud); animation: blink 1.2s infinite; }
#status-dot.unconfigured { background: var(--rood); }

#conversation-list {
  flex: 1;
  /* Gegarandeerd zichtbaar, ook op lage schermen: nooit lager dan ±4
     gesprekken; wordt het krapper, dan scrolt de knoppenkolom erboven. */
  min-height: 9rem;
  overflow-y: auto;
  padding: 0 0.5rem;
}

/* Lage (laptop)schermen: compactere knoppen zodat knoppen én lijst
   samen passen zonder scrollen. */
@media (min-width: 721px) and (max-height: 820px) {
  .sidebar-head,
  .sidebar-tools { gap: 0.35rem; }
  .sidebar-head button,
  .sidebar-tools button {
    padding: 0.4rem 0.8rem;
    font-size: 0.88rem;
  }
}

.conv-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
}
.conv-item:hover { background: rgba(255, 255, 255, 0.06); }
.conv-item.active {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--goud);
}
.conv-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/* Nog niet gelezen: vet, plus een stip in de accentkleur. Twee signalen,
   want kleur alleen is niet genoeg voor wie die slecht ziet. */
.conv-item.ongelezen .title { font-weight: 700; }
.conv-item .nieuw-stip { color: var(--goud); font-size: 0.6rem; margin-right: 0.35rem; vertical-align: 0.15em; }
.conv-item .delete {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0 0.25rem;
  font-size: 0.9rem;
}

/* Knoppen in een paneel: onder elkaar, volle breedte — zelfde ritme als
   de zijbalk. */
.knoppenkolom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.knoppenkolom button,
.knoppenkolom select { width: 100%; }
.panel-card h3 {
  font-size: 0.95rem;
  margin: 1.1rem 0 0.4rem;
}
.knoppenkolom select {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-diep);
  color: var(--text);
  font-size: 0.95rem;
}
.knoppenkolom button.awake {
  border-color: var(--goud);
  color: var(--goud);
}

.sidebar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}
.sidebar-foot button { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
.sidebar-foot span { overflow: hidden; text-overflow: ellipsis; }

#chat-main {
  flex: 1;
  /* Zonder min-width groeit deze flex-kolom mee met brede inhoud in een
     tekstballon (tabellen!) en wordt de hele pagina zijwaarts scrollbaar. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Vast aan het venster, niet aan de kolom: scrolt de pagina zelf een
   stukje mee (dat gebeurt op een telefoon zodra de gesprekkenlijst aan
   zijn eind is en de browser doorschuift naar de pagina), dan verdween
   de menuknop naar boven uit beeld en was er geen weg terug. */
#toggle-sidebar {
  display: none;
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 15;
  padding: 0.4rem 0.7rem;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 400;
}

/* Aantal nieuwe gesprekken, op de menuknop zelf. */
#ongelezen-badge {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--goud);
  color: #241a03;
  font-size: 0.7rem;
  line-height: 1.15rem;
  text-align: center;
  font-weight: 700;
}

#messages {
  flex: 1;
  overflow-y: auto;
  /* Aan het eind van de lijst niet doorschuiven naar de pagina eronder:
     dat trok op de telefoon de hele app omhoog, menuknop incluis. */
  overscroll-behavior: contain;
  /* Nooit zijwaarts scrollen: brede inhoud scrolt bínnen zijn ballon. */
  overflow-x: hidden;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}

.msg {
  max-width: 85%;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
.msg.user { white-space: pre-wrap; }

/* Markdown binnen antwoorden */
.msg.assistant > :first-child { margin-top: 0; }
.msg.assistant > :last-child { margin-bottom: 0; }
.msg.assistant p, .msg.assistant ul, .msg.assistant ol { margin: 0.4rem 0; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3 {
  margin: 0.6rem 0 0.3rem;
  font-size: 1.05rem;
}
.msg.assistant a { color: var(--goud); }
.msg.assistant code {
  background: rgba(7, 11, 29, 0.6);
  padding: 0.1rem 0.3rem;
  border-radius: 5px;
  font-size: 0.88em;
}
.msg.assistant pre {
  background: rgba(7, 11, 29, 0.6);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  overflow-x: auto;
}
.msg.assistant pre code { background: none; padding: 0; }
.msg.assistant blockquote {
  margin: 0.4rem 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--goud-diep);
  color: var(--muted);
}
.msg.assistant table {
  border-collapse: collapse;
  margin: 0.4rem 0;
  /* Tabellen kunnen niet afbreken: laat ze binnen de ballon scrollen. */
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.msg.assistant img { max-width: 100%; }
.msg.assistant th, .msg.assistant td {
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  font-size: 0.9em;
}
.msg.assistant th { color: var(--goud); }
.msg.user {
  align-self: flex-end;
  background: linear-gradient(180deg, #3548a4 0%, #263375 100%);
  color: var(--bubble-user-text);
  border: 1px solid rgba(140, 165, 255, 0.35);
}
/* Wat James zegt komt uit zijn boek: donker paneel met een gouden randje,
   zoals de vensters in het spel. */
.msg.assistant {
  align-self: flex-start;
  background: var(--bubble-bot);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(226, 183, 79, 0.13);
}
.think-timer {
  color: var(--muted);
  font-style: italic;
}

.msg.pending::after {
  content: '✦';
  color: var(--goud);
  animation: blink 1s infinite;
  margin-left: 0.15rem;
}
@keyframes blink { 50% { opacity: 0; } }

#composer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}

#input {
  flex: 1;
  /* Zonder min-width weigert een textarea in flex te krimpen onder zijn
     intrinsieke breedte (~200px) — dát gaf horizontaal scrollen op mobiel. */
  min-width: 0;
  resize: none;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(7, 11, 29, 0.65);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  max-height: 10rem;
}
#input:focus {
  outline: none;
  border-color: var(--goud-diep);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#send { width: 3rem; flex-shrink: 0; }
#send:disabled { opacity: 0.5; cursor: default; }
#attach {
  width: 3rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 400;
}


}

#attach-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 0.3rem 1rem 0;
  font-size: 0.85rem;
  color: var(--muted);
}
#attach-chip { flex-wrap: wrap; }
.bijlage-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  background: rgba(7, 11, 29, 0.5);
}
.bijlage-chip button {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0 0.15rem;
  font-weight: 400;
}

/* Vermelding van een meegestuurde bijlage: het bestand zelf is
   geconsumeerd en niet bewaard, dit is alleen het spoor ervan. */
.bijlage-vermelding {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  opacity: 0.75;
}

.msg.user img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border-radius: 10px;
  margin-top: 0.5rem;
}

/* ── Panelen ──
   Alle schermvullende panelen in één regel: elk element waarvan de id op
   "-panel" eindigt. Stond dit per paneel apart, dan viel een nieuw paneel
   er stil buiten en verscheen het onderaan de pagina in plaats van in het
   midden. */
[id$='-panel'] {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(4, 7, 20, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.panel-card {
  width: 100%;
  max-width: 460px;
  max-height: 80dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a2350 0%, #111838 100%);
  border: 1px solid var(--goud-diep);
  border-radius: 16px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  box-shadow: 0 0 0 1px rgba(226, 183, 79, 0.15), 0 24px 60px rgba(0, 0, 0, 0.6);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.panel-head h2 { margin: 0; font-size: 1.15rem; }
.panel-head button { padding: 0.3rem 0.6rem; }
/* Wiki-adressen zijn lang en hebben geen spaties: laat ze midden in een
   woord afbreken, anders duwen ze het paneel opzij. */
.panel-card a { color: var(--goud); overflow-wrap: anywhere; }

/* Invulrij: veld + knop naast elkaar. Wordt overal gebruikt waar je iets
   toevoegt of een code invult. */
.reminder-row { display: flex; gap: 0.5rem; }
.reminder-row input { flex: 1; }
.reminder-row input,
#kb-zoek,
#wizard-naam,
#kb-gat-tekst {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(7, 11, 29, 0.65);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

/* Regel in een lijst: een openstaande onderzoeksvraag bijvoorbeeld. */
.reminder-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.2rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.reminder-item .info { flex: 1; }
.reminder-item .when { color: var(--muted); font-size: 0.8rem; }
.reminder-item.done { opacity: 0.55; }
.reminder-item button {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0 0.3rem;
}

#usage-summary { font-size: 0.85rem; }

/* Tabbladen — zelfde vorm in de kennisbank en in het logboek. */
#kb-tabs,
#activity-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  flex-wrap: wrap;
}
#kb-tabs button,
#activity-tabs button { font-size: 0.88rem; padding: 0.4rem 0.8rem; }
#kb-tabs button.actief,
#activity-tabs button.actief {
  background: var(--accent-soft);
  border-color: var(--goud);
  color: var(--goud);
}

/* ── Scholen ──
   De kleur van de school als randje links. Toegevoegd via data-school in
   app.js; staat er niets bekend, dan komt er geen randje.

   De selector staat er dubbel ([data-school][data-school]). Dat is geen
   typefout: een wizardkaart is óók een .versie en die zet een rand rondom.
   Bij gelijke specificiteit wint de regel die het laatst staat, en dan
   hangt de kleur af van de volgorde in dit bestand — precies het soort
   fout dat je pas ziet als je ernaar zoekt. Twee keer dezelfde selector
   weegt zwaarder dan één klasse, en daarmee wint de school altijd. */
[data-school][data-school] { border-left: 3px solid var(--border); padding-left: 0.6rem; }
[data-school='fire'][data-school] { border-left-color: var(--school-fire); }
[data-school='ice'][data-school] { border-left-color: var(--school-ice); }
[data-school='storm'][data-school] { border-left-color: var(--school-storm); }
[data-school='myth'][data-school] { border-left-color: var(--school-myth); }
[data-school='life'][data-school] { border-left-color: var(--school-life); }
[data-school='death'][data-school] { border-left-color: var(--school-death); }
[data-school='balance'][data-school] { border-left-color: var(--school-balance); }
[data-school='star'][data-school] { border-left-color: var(--school-star); }
[data-school='sun'][data-school] { border-left-color: var(--school-sun); }
[data-school='moon'][data-school] { border-left-color: var(--school-moon); }

/* Hetzelfde als tekstkleur, voor de metaregel achter een titel. */
.school-fire { color: var(--school-fire); }
.school-ice { color: var(--school-ice); }
.school-storm { color: var(--school-storm); }
.school-myth { color: var(--school-myth); }
.school-life { color: var(--school-life); }
.school-death { color: var(--school-death); }
.school-balance { color: var(--school-balance); }
.school-star { color: var(--school-star); }
.school-sun { color: var(--school-sun); }
.school-moon { color: var(--school-moon); }

/* Twee weergaven van hetzelfde logboek: wat vanzelf gebeurde, en wat een
   mens achter de knoppen deed. */
.act-item {
  border-top: 1px solid var(--border);
  padding: 0.45rem 0.2rem;
  font-size: 0.88rem;
}
.act-item summary { cursor: pointer; list-style: none; display: flex; gap: 0.5rem; align-items: baseline; }
.act-item .kind {
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  color: var(--muted);
  white-space: nowrap;
}
.act-item .kind.storing { color: var(--rood); border-color: var(--rood); }
.act-item .when { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.act-item .preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-item p { margin: 0.4rem 0 0.2rem; white-space: pre-wrap; color: var(--muted); font-size: 0.85rem; }

.panel-card.panel-wide { max-width: 640px; }

/* Regel die je kunt aanklikken: een bestand, een kennisbank-onderwerp. */
.file-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0.2rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  cursor: pointer;
}
.file-item:hover { background: rgba(226, 183, 79, 0.07); }
.file-item .name { flex: 1; font-weight: 500; }
.file-item .meta { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
/* Boven een wizardkaart staat school, level én wereld achter de naam. Op
   een telefoon past dat niet op één regel: daar mag het zakken in plaats
   van tegen de rand aan te lopen. */
.versie .file-item { flex-wrap: wrap; }
.versie .file-item .meta { white-space: normal; }
.file-item .meta.stale { color: #f0b04f; }

/* Tweestapsverificatie: sleutel en herstelcodes moeten letterlijk over te
   nemen zijn, dus vaste breedte en genoeg ruimte tussen de tekens. */
.twofa-secret {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
  background: rgba(7, 11, 29, 0.65);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin: 0.4rem 0 0.9rem;
  overflow-x: auto;
  white-space: pre;
}
.twofa-link { font-weight: 600; color: var(--goud); }
/* QR-code: vaste witte ondergrond (ook in dit donkere thema, anders leest
   geen enkele scanner hem) en niet groter dan nodig om te scannen. */
.twofa-qr {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  margin: 0.4rem 0 0.6rem;
}

#file-viewer {
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
#file-viewer pre {
  background: rgba(7, 11, 29, 0.6);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  overflow-x: auto;
}
#file-viewer.plain { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 0.82rem; }

/* Losse tekstblokken die hun regelafbrekingen moeten houden: de inhoud
   van een kennisbank-onderwerp, de notities bij een wizard. */
.bereiding { white-space: pre-wrap; margin: 0.2rem 0; }

/* ── Wizardkaarten (alleen-lezen) ──
   Naam als kop, school/level/wereld als chips, en stats/gear als eigen
   vakken naast elkaar — op een telefoon zakken ze onder elkaar. */
.wizardkaart { padding: 0.9rem 1rem; }
.wizard-kop { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.wizard-kop h3 { margin: 0; font-size: 1.15rem; }
.wizard-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  font-size: 0.75rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  white-space: nowrap;
}
.wizard-velden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.wizard-veld {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  background: rgba(7, 11, 29, 0.45);
}
.wizard-veld.breed { grid-column: 1 / -1; }
.wizard-veld h4 {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: inherit;
}
.wizard-veld p { margin: 0; font-size: 0.85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .wizard-velden { grid-template-columns: 1fr; }
}

/* ── De visuele wizardkaart (review-fase, zie wizardVisueel in app.js) ──
   Schoolembleem in SVG naast de naam, herkende stats als tegels (alleen
   percentages krijgen een balkje — daar is 100 een zinnige schaal), gear
   per slot. De ruwe tekst blijft uitklapbaar onderaan staan. */
.wizard-embleem { width: 40px; height: 40px; flex: none; align-self: center; filter: drop-shadow(0 0 6px currentColor); opacity: 0.95; }
.wizard-embleem svg { width: 100%; height: 100%; display: block; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.stat-tegel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.5rem 0.5rem;
  background: rgba(7, 11, 29, 0.45);
  text-align: center;
}
.stat-waarde { font-size: 1rem; font-weight: 600; color: var(--goud); white-space: nowrap; }
.stat-label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}
.stat-balk { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); margin-top: 0.35rem; overflow: hidden; }
.stat-balk i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--goud-diep), var(--goud)); }
.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.3rem 1rem;
  margin-top: 0.7rem;
}
.gear-slot { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; min-width: 0; }
.gear-slot .slot-naam { flex: none; width: 6.2rem; color: var(--muted); font-size: 0.78rem; }
.gear-slot span:last-child { overflow-wrap: anywhere; }

/* ── Mobiel ── */
#close-sidebar { display: none; }

@media (max-width: 720px) {
  #sidebar {
    position: fixed;
    inset: 0 25% 0 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.45);
    /* Op een telefoonscherm past de volle zijbalk niet: laat het geheel
       scrollen in plaats van alleen de gesprekkenlijst. */
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #sidebar.open { transform: translateX(0); }
  #conversation-list {
    flex: none;
    min-height: auto;
    overflow: visible;
  }
  #close-sidebar { display: block; }
  #toggle-sidebar { display: block; }
  #messages { padding-top: 3.2rem; }
  /* Drie knoppen naast het tekstveld: maak ze slanker zodat er ook op
     smalle telefoons ruimte overblijft om te typen. */
  #composer { gap: 0.35rem; padding: 0.6rem 0.6rem 0.9rem; }
  #attach,
  #send { width: 2.6rem; }
}

/* Kaart: een wizard, of een versie van een bestand. */
.versie {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.7rem;
  background: rgba(7, 11, 29, 0.35);
}
.versie pre {
  background: rgba(7, 11, 29, 0.6);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin: 0.5rem 0;
  max-height: 8rem;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.85rem;
}


/* Profieltekst bij de wizards */
#wizard-profiel {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(7, 11, 29, 0.65);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
#wizard-profiel-opslaan { margin-top: 0.5rem; }