/* ============================================================================
   oh-chat.css — de livechat van Autohaus Oppitzhauser.

   Eén bel rechtsonder, één venster dat de pagina NIET overneemt. De kleuren
   komen uit oh-schauraum.css: --marke is het marineblauw uit hun woordmerk,
   dus de chat hoort er vanzelf bij en heeft geen eigen kleur nodig.

   ⚠️ Op de modelpagina staat een TWEEDE vaste strook onderaan op de telefoon
   (de ankerbalk). De bel schuift daarvoor omhoog via .ch--hoog, dat de pagina
   zelf zet; anders staat de bel over die balk.
   ========================================================================== */

.ch-bel{
  position:fixed; right:clamp(.9rem,2.4vw,1.5rem); bottom:clamp(.9rem,2.4vw,1.5rem);
  z-index:960; display:inline-flex; align-items:center; gap:.55rem;
  min-height:52px; padding:.7rem 1.15rem .7rem .95rem;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--marke,#0a1432); color:#fff;
  font-family:var(--tekst,system-ui); font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 6px 18px rgba(10,20,50,.22), 0 18px 44px rgba(10,20,50,.18);
  transition:transform .18s ease, background .18s ease;
}
.ch-bel:hover{ background:var(--marke-op,#1d2a5c); transform:translateY(-1px); }
.ch-bel:focus-visible{ outline:3px solid var(--marke-op,#1d2a5c); outline-offset:3px; }
.ch-bel__t{ white-space:nowrap; }
.ch-bel--open .ch-bel__t{ display:none; }
.ch-stip{
  width:8px; height:8px; border-radius:50%; background:#39d98a; flex:none;
  box-shadow:0 0 0 3px rgba(57,217,138,.24);
}

.ch-paneel{
  position:fixed; right:clamp(.9rem,2.4vw,1.5rem); bottom:calc(clamp(.9rem,2.4vw,1.5rem) + 62px);
  z-index:961; width:min(392px, calc(100vw - 1.8rem)); max-height:min(620px, calc(100vh - 6rem));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card,#fff); color:var(--ink,#16181c);
  border:1px solid var(--hair,#e6e5e2); border-radius:16px;
  box-shadow:0 12px 30px rgba(16,18,21,.14), 0 30px 80px rgba(16,18,21,.18);
  font-family:var(--tekst,system-ui);
  opacity:0; transform:translateY(10px) scale(.985); transition:opacity .2s ease, transform .2s ease;
}
.ch-paneel.aan{ opacity:1; transform:none; }

.ch-kop{
  display:flex; align-items:center; gap:.6rem; padding:.8rem .85rem;
  background:var(--marke,#0a1432); color:#fff; flex:none;
}
/* Het woordmerk is bijna 5 op 1 en staat in een flexrij: zonder flex:none
   knijpt de browser het plat, dwars door width:auto heen. Dit lijk zat al
   twee keer eerder in deze site. */
.ch-kop img{ height:22px; width:auto; flex:none; display:block; }
/* ⚠️ Het blok mag krimpen (min-width:0) maar de statusregel mag NIET afbreken:
   op 392 px viel "Antwort in Sekunden" anders over twee regels en werd de kop
   een blok van vier regels naast een logo van 22 px. */
.ch-kop__t{ flex:1; min-width:0; line-height:1.25; overflow:hidden; }
.ch-kop__t b{ display:block; font-family:var(--kop,system-ui); font-size:.88rem; font-weight:600;
  white-space:nowrap; }
.ch-kop__t i{ display:flex; align-items:center; gap:.35rem; font-style:normal;
  font-size:.72rem; color:rgba(255,255,255,.72); white-space:nowrap; }
.ch-kop a, .ch-kop button{
  flex:none; width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:10px; background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
}
.ch-kop a:hover, .ch-kop button:hover{ background:rgba(255,255,255,.22); }

.ch-stroom{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem;
  background:var(--paper,#fbfbfa); }
.ch-r{ max-width:84%; padding:.62rem .85rem; border-radius:14px; font-size:.9rem; line-height:1.55;
  white-space:pre-wrap; word-break:break-word; }
.ch-r--haus{ align-self:flex-start; background:#fff; border:1px solid var(--hair,#e6e5e2);
  border-bottom-left-radius:5px; }
.ch-r--gast{ align-self:flex-end; background:var(--marke,#0a1432); color:#fff;
  border-bottom-right-radius:5px; }

.ch-tippt{ display:flex; gap:4px; align-items:center; }
.ch-tippt span{ width:6px; height:6px; border-radius:50%; background:var(--ink-3,#8c939c);
  animation:chp 1.1s ease-in-out infinite; }
.ch-tippt span:nth-child(2){ animation-delay:.15s } .ch-tippt span:nth-child(3){ animation-delay:.3s }
@keyframes chp{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

/* De kaarten. Beeld op 16:9, want dat is de huismaat van elk kaartbeeld op
   deze site; het bestand is er al op gesneden, dus er valt niets weg. */
.ch-wagens{ display:flex; flex-direction:column; gap:.55rem; align-self:stretch; }
/* ⚠️ align-items:flex-start is GEEN opsmuk — zonder die regel wordt het
   kaartbeeld dichtgezoomd. `.ch-wagen` is een flexrij en die staat standaard op
   `align-items:stretch`, dus het beeldvak kreeg de hoogte van de TEKSTKOLOM
   (gemeten: 96 x 148 in plaats van 96 x 54). Een opgelegde hoogte zet
   `aspect-ratio` buitenspel, en `object-fit:cover` sneed daarna 63 % van de
   breedte weg: je zag alleen de neus tot aan de A-stijl. `flex:none` houdt dat
   NIET tegen — dat gaat over krimpen in de rij, niet over rekken dwars erop.
   Zelfde lijk als het logo in de navigatiebalk van de twee oudste pagina's. */
.ch-wagen{ display:flex; align-items:flex-start; gap:.7rem; padding:.55rem; background:#fff;
  border:1px solid var(--hair,#e6e5e2); border-radius:12px; }
.ch-wagen__b{ flex:none; align-self:flex-start; width:104px; aspect-ratio:16/9;
  border-radius:8px; overflow:hidden; background:var(--paper-2,#f2f2f0); }
.ch-wagen__b img{ width:100%; height:100%; object-fit:cover; display:block; }
.ch-wagen__t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.ch-wagen__t b{ font-size:.86rem; font-weight:650; line-height:1.3; }
.ch-wagen__t small{ font-size:.72rem; color:var(--ink-2,#5a616b); }
.ch-wagen__p{ font-family:var(--kop,system-ui); font-size:.85rem; font-weight:650;
  color:var(--marke,#0a1432); }
.ch-wagen__w{ font-size:.72rem; color:var(--ink-2,#5a616b); font-style:italic; }
.ch-wagen__t a{ align-self:flex-start; margin-top:.25rem; font-size:.76rem; font-weight:650;
  color:var(--marke,#0a1432); text-decoration:none; border-bottom:1px solid currentColor;
  min-height:0; }

.ch-keuzes{ display:none; gap:.4rem; flex-wrap:wrap; padding:.6rem 1rem 0; flex:none; }
.ch-keuzes.aan{ display:flex; }
.ch-keuze{
  min-height:38px; padding:.45rem .8rem; border-radius:999px; cursor:pointer;
  background:#fff; border:1px solid var(--marke,#0a1432); color:var(--marke,#0a1432);
  font-family:inherit; font-size:.81rem; font-weight:600;
}
.ch-keuze:hover{ background:var(--marke,#0a1432); color:#fff; }

.ch-invoer{ display:flex; gap:.5rem; padding:.75rem 1rem; flex:none;
  border-top:1px solid var(--hair,#e6e5e2); background:#fff; }
.ch-invoer input{
  flex:1; min-width:0; min-height:44px; padding:.6rem .85rem;
  border:1px solid var(--hair,#e6e5e2); border-radius:10px;
  font-family:inherit; font-size:.9rem; color:var(--ink,#16181c); background:var(--paper,#fbfbfa);
}
.ch-invoer input:focus{ outline:2px solid var(--marke-op,#1d2a5c); outline-offset:1px; }
.ch-stuur{ flex:none; width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:10px; background:var(--marke,#0a1432); color:#fff; }
.ch-stuur:disabled{ opacity:.45; cursor:default; }

/* ⚠️ Niet optioneel: EU AI Act art. 50 vraagt dat een bezoeker weet dat hij
   met een systeem praat. Deze regel staat er daarom altijd, ook als het
   venster maar half open is. */
.ch-voet{ margin:0; padding:.55rem 1rem .8rem; flex:none; background:#fff;
  font-size:.7rem; line-height:1.5; color:var(--ink-3,#8c939c); text-align:center; }
.ch-voet a{ color:var(--marke,#0a1432); }

.ch-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media(max-width:560px){
  .ch-paneel{ right:.5rem; left:.5rem; width:auto; bottom:.5rem;
    max-height:calc(100vh - 1rem); max-height:calc(100dvh - 1rem); border-radius:14px; }
  .ch-bel{ right:.75rem; bottom:.75rem; }
  .ch-r{ max-width:90%; }
}
/* Pagina's met een tweede vaste strook onderaan (de ankerbalk op de
   modelpagina) zetten deze klasse op <body>. */
body.ch--hoog .ch-bel{ bottom:calc(.75rem + 58px); }

@media(prefers-reduced-motion:reduce){
  .ch-paneel{ transition:none } .ch-tippt span{ animation:none }
}

/* ── DE AANMELDPOORT (01-09-2026) ─────────────────────────────────────────────
   Naam en e-mail vóór het eerste bericht. Staat IN de gespreksstroom en niet als
   een apart scherm: zo ziet de bezoeker waar hij is, en er hoeft niets weg te
   schuiven zodra hij klaar is.
   ⚠️ Raakvlakken op 44 px, de huisregel van deze site. Het vinkje zelf is 22 px
      met een label van meer dan 44 px eromheen — een bonk van 44 naast twee
      regels tekst ziet er fout uit, en WCAG telt het label mee. */
.ch-poort{background:#fff;border:1px solid rgba(10,20,50,.12);border-radius:14px;
  padding:1rem;margin:.2rem 0 .1rem;box-shadow:0 1px 2px rgba(10,20,50,.06)}
.ch-poort__t{margin:0 0 .8rem;font-size:.92rem;line-height:1.5;color:#1a1d24}
.ch-poort__v{width:100%;box-sizing:border-box;min-height:44px;padding:.6rem .75rem;
  margin-bottom:.55rem;font:inherit;font-size:.95rem;color:#1a1d24;
  border:1px solid rgba(10,20,50,.22);border-radius:10px;background:#fff}
.ch-poort__v:focus{outline:2px solid #0a1432;outline-offset:1px;border-color:#0a1432}
.ch-poort__v.is-fout{border-color:#c0392b;background:#fff6f5}
.ch-poort__ok{display:flex;gap:.55rem;align-items:flex-start;min-height:44px;
  padding:.25rem 0;font-size:.82rem;line-height:1.45;color:#4a4f58;cursor:pointer}
.ch-poort__ok input{width:22px;height:22px;flex:none;margin:.1rem 0 0;accent-color:#0a1432}
.ch-poort__ok a{color:#0a1432}
.ch-poort__f{margin:.15rem 0 .5rem;min-height:0;font-size:.82rem;color:#c0392b}
.ch-poort__f:empty{display:none}
.ch-poort__k{width:100%;min-height:46px;border:0;border-radius:999px;cursor:pointer;
  background:#0a1432;color:#fff;font:inherit;font-size:.95rem;font-weight:600}
.ch-poort__k:hover{background:#1d2a5c}
.ch-poort__k[disabled]{opacity:.6;cursor:default}
.ch-poort__k2{margin:.6rem 0 0;text-align:center;font-size:.8rem;color:#6b7180}
.ch-poort__k2 a{color:#0a1432;font-weight:600}

/* Zolang de aanmeldpoort staat, ligt het invoerveld zichtbaar terzijde. Een veld
   dat er gewoon uitziet maar niets doet, leest als een storing. */
.ch--poort .ch-invoer{opacity:.35;pointer-events:none}
.ch--poort .ch-voet{opacity:.55}