/* Hoe het werkt in drie stappen (#347), in de stijl van Fyrst: drie vakken naast elkaar, twee chats die
   zichzelf typen en stap 3 met de echte viewer. Gedeeld door /nieuwe-test-1 en /hoe-het-werkt (testmodus).
   Alles staat onder .stappen-anim, zodat de opmaak van de site (.steps, .btn, koppen) en deze regels elkaar
   niet raken. De kleuren van de pagina komen uit --card, --line, --act en --mute (nieuwe-test-1) en
   anders uit de tokens van de site. De chats zijn altijd licht, zoals een AI-app. */

.stappen-anim {
  --sa-kaart: var(--card, var(--papier-licht, #fffdf8));
  --sa-lijn: var(--line, var(--lijn, #ddd4c2));
  --sa-act: var(--act, var(--link, #9a6630));
  --sa-mute: var(--mute, var(--tekst-2, #5c5446));
  --sa-messing: #9a6630;
  --c-fg: #1b1f1d;
  --c-mute: #5f6b66;
  --c-lijn: #dfe4e1;
  --c-zacht: #f3f5f4;
  margin: 0 0 32px;
}

/* ---------- Drie vakken: onder elkaar, vanaf 900 px naast elkaar ---------- */

.stappen-anim .sa-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stappen-anim .sa-rij > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 14px;
  background: var(--sa-kaart);
  border: 1px solid var(--sa-lijn);
  border-radius: 8px;
}
.stappen-anim .sa-tekst { min-width: 0; }
.stappen-anim .sa-tekst h3 { margin: 0 0 4px; }
.stappen-anim .sa-tekst p { margin: 0; max-width: none; }
@media (min-width: 900px) {
  .stappen-anim .sa-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Zonder subgrid: de teksten even hoog, zodat de drie beelden op één lijn beginnen. */
  .stappen-anim .sa-tekst { min-height: 150px; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .stappen-anim .sa-rij { grid-template-rows: auto auto; }
    .stappen-anim .sa-rij > li { grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px; }
    .stappen-anim .sa-tekst { min-height: 0; }
  }
}
.stappen-anim .sa-noot { margin: 12px 0 0; max-width: none; color: var(--sa-mute); font-size: 14px; }

/* ---------- Chat (stap 1 en 2) ---------- */

.stappen-anim .chatvenster {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 400px;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  color: var(--c-fg);
  border: 1px solid var(--c-lijn);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.45;
  color-scheme: light;
}
.stappen-anim .chat-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--c-lijn);
}
.stappen-anim .kop-naam { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.stappen-anim .kop-icoon { flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--sa-messing); }
.stappen-anim .kop-status { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-mute); }
.stappen-anim .chat-berichten {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: #fff;
}
.stappen-anim .msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; overflow-wrap: anywhere; }
/* Jouw berichten licht, de AI in de kleur van het logo. */
.stappen-anim .msg.u { align-self: flex-end; background: var(--c-zacht); border: 1px solid var(--c-lijn); color: var(--c-fg); }
.stappen-anim .msg.a { align-self: flex-start; background: var(--sa-messing); border: 1px solid var(--sa-messing); color: #fff; }
.stappen-anim .msg.typ { display: flex; gap: 4px; }
.stappen-anim .msg.typ span { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: sa-stip 1s infinite; }
.stappen-anim .msg.typ span:nth-child(2) { animation-delay: 0.2s; }
.stappen-anim .msg.typ span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sa-stip { 50% { opacity: 0.25; } }

/* Een aanroep van de tool in de chat: naam, wat hij doet en de status rechts. */
.stappen-anim .kaart-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--c-lijn);
  border-radius: 10px;
  font-size: 14px;
}
.stappen-anim .kaart-tool b { grid-column: 1; }
.stappen-anim .kaart-tool span { grid-column: 1; color: var(--c-mute); font-size: 13px; }
.stappen-anim .kaart-tool .status { grid-column: 2; grid-row: 1 / 3; font-style: normal; color: var(--c-mute); font-size: 13px; }
.stappen-anim .kaart-tool .status.klaar { color: #14803c; font-weight: 700; }

/* Invoerbalk onderaan: daar wordt jouw bericht getypt voordat het verstuurd wordt. */
.stappen-anim .chat-balk {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid var(--c-lijn);
}
.stappen-anim .chat-invoer { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.stappen-anim .chat-invoer:empty::before { content: "Typ een bericht..."; color: var(--c-mute); }
.stappen-anim .chat-invoer:not(:empty)::after { content: ""; margin-left: 1px; border-right: 2px solid var(--c-fg); }
.stappen-anim .chat-verstuur {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sa-messing);
  color: #fff;
  font-weight: 700;
}

/* Het toestemmingsscherm als pop-up over het gesprek (stap 1). */
.stappen-anim .popup {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(27, 31, 29, 0.4);
}
.stappen-anim .popup[hidden] { display: none; }
.stappen-anim .popup-kaart {
  width: 100%;
  max-width: 340px;
  padding: 14px;
  background: #fff;
  color: var(--c-fg);
  border: 1px solid var(--c-lijn);
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.stappen-anim .popup-kaart small { display: block; color: var(--c-mute); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.stappen-anim .popup-kaart p { margin: 0 0 6px; max-width: none; font-size: 13px; }
.stappen-anim .popup-kaart .popup-titel { margin: 2px 0 6px; font-size: 16px; font-weight: 700; }
.stappen-anim .popup-kaart .popup-sub { margin: 8px 0 2px; font-weight: 700; }
.stappen-anim .popup-kaart .klein { color: var(--c-mute); font-size: 12px; }
.stappen-anim .popup-kaart ul { margin: 0 0 8px; padding-left: 18px; }
.stappen-anim .popup-kaart li { margin: 0 0 2px; max-width: none; }
.stappen-anim .popup-knoppen { display: flex; gap: 8px; }
.stappen-anim .popup-knop { padding: 7px 12px; border: 1px solid var(--sa-messing); border-radius: 6px; color: var(--sa-messing); font-size: 13px; font-weight: 700; }
.stappen-anim .popup-knop.toestaan { background: var(--sa-messing); color: #fff; transition: transform 0.15s, box-shadow 0.15s; }
.stappen-anim .popup-knop.toestaan.ingedrukt { transform: scale(0.94); box-shadow: 0 0 0 4px rgba(154, 102, 48, 0.35); }

/* ---------- Stap 3: de echte viewer (module 3d) op wit, zonder onderdelenlijst ---------- */

.stappen-anim .eindproduct { display: flex; flex-direction: column; gap: 8px; height: 400px; min-width: 0; }
.stappen-anim .eindproduct .viewer {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.stappen-anim .eindproduct .viewer-stage {
  flex: 1;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  background: #fff;
  border: 1px solid var(--sa-lijn);
  border-radius: 12px;
}
.stappen-anim .eindproduct .viewer-parts { display: none; }
/* De bouwtekening van een onderdeel (module 3d) ligt als kaart over het model en scrolt zelf, op elke breedte:
   naast of onder het model is in deze smalle kolom geen plek. Sluiten staat in de kaart. _bouwtekening.ts zet
   left, top, right en max-height inline om de kaart naast een groot model te laten zweven; daarom !important. */
.stappen-anim .eindproduct .bouwtekening {
  position: absolute !important;
  inset: 8px !important;
  z-index: 15;
  width: auto !important;
  max-height: none !important;
  margin: 0;
  overflow: auto;
}
/* Stijn 12-10: de tekening schaalt mee met de kaart in plaats van te scrollen; tekst en knoppen eronder mogen scrollen. */
.stappen-anim .eindproduct .bouwtekening { display: flex; flex-direction: column; }
.stappen-anim .eindproduct .bouwtekening .bt-schets { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 140px; }
.stappen-anim .eindproduct .bouwtekening .bt-svg { flex: 1 1 auto; min-height: 120px; height: 100%; max-height: 100%; }
/* Stijn 12-10: het draaitekentje blijft staan, ook als het model draait. */
.stappen-anim .eindproduct .viewer-draai.is-weg { opacity: 1; }
.stappen-anim .eind-acties { display: flex; flex: none; align-items: center; gap: 12px; }
.stappen-anim .eind-acties .btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 9px 12px;
  font-size: 14px;
  text-align: center;
}
.stappen-anim .pdf-link { color: var(--sa-act); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Zonder template: een draaiend blok in plaats van het model (alleen decoratie). */
.stappen-anim .sa-model {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  perspective: 600px;
  background: #fff;
  border: 1px solid var(--sa-lijn);
  border-radius: 12px;
}
.stappen-anim .sa-kubus { position: relative; width: 70px; height: 70px; transform-style: preserve-3d; animation: sa-draai 8s linear infinite; }
.stappen-anim .sa-kubus i { position: absolute; inset: 0; border: 2px solid #b5793a; background: rgba(181, 121, 58, 0.25); }
.stappen-anim .sa-kubus i:nth-child(1) { transform: translateZ(35px); }
.stappen-anim .sa-kubus i:nth-child(2) { transform: rotateY(180deg) translateZ(35px); }
.stappen-anim .sa-kubus i:nth-child(3) { transform: rotateY(90deg) translateZ(35px); }
.stappen-anim .sa-kubus i:nth-child(4) { transform: rotateY(-90deg) translateZ(35px); }
.stappen-anim .sa-kubus i:nth-child(5) { transform: rotateX(90deg) translateZ(35px); }
.stappen-anim .sa-kubus i:nth-child(6) { transform: rotateX(-90deg) translateZ(35px); }
@keyframes sa-draai { from { transform: rotateX(-20deg) rotateY(0); } to { transform: rotateX(-20deg) rotateY(360deg); } }

/* ---------- Beweging ---------- */

/* Met JavaScript en zonder "minder beweging" speelt stappen.js de gesprekken af. Tot het script de
   berichten heeft weggehaald (data-js), staan ze niet even in beeld. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .stappen-anim:not([data-js]) .chat-berichten > * { visibility: hidden; }
}
/* Minder beweging: alles staat er meteen (de server zet de hele gesprekken in de HTML) en niets beweegt. */
@media (prefers-reduced-motion: reduce) {
  .stappen-anim .msg.typ span,
  .stappen-anim .sa-kubus { animation: none; }
  .stappen-anim .sa-kubus { transform: rotateX(-20deg) rotateY(30deg); }
  .stappen-anim .popup-knop.toestaan { transition: none; }
}