/* ==========================================================================
   chat.css — de livechat van BEXX Verhuur.

   Alles begint met ch-, dus dit raakt niets van wat er al staat.

   De chat staat LINKSONDER, het mandje rechtsonder. Ze deelden vroeger dezelfde
   hoek en zaten elkaar daar in de weg. --wk-hoek komt uit winkel.css en houdt
   rekening met de mobiele onderbalk; --wk-bel is de hoogte van deze bel, waar
   het venster erboven op gaat staan.
   ========================================================================== */
.ch-bel, .ch-paneel{
  --ch-or:#FF7D38; --ch-or-d:#E86420; --ch-or-l:#FFF3EB; --ch-or-lijn:#F6D9C4;
  --ch-ink:#14161A; --ch-ink2:#3E464F; --ch-zacht:#6E7883;
  --ch-wit:#FFFFFF; --ch-papier:#F5F3F0; --ch-lijn:#E3E0DB;
  --ch-groen:#137A4A;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}

/* ---------- de bel ---------- */
.ch-bel{
  position:fixed; left:18px; bottom:var(--wk-hoek,18px); z-index:9400;
  display:inline-flex; align-items:center; gap:10px;
  height:var(--wk-bel,66px); padding:0 22px 0 18px; border:0; border-radius:999px;
  background:var(--ch-or); color:#241000; cursor:pointer;
  font:700 15px/1 'Inter',system-ui,-apple-system,sans-serif;
  box-shadow:0 12px 30px rgba(232,100,32,.32);
  transition:background .18s ease, transform .18s ease;
}
.ch-bel:hover{ background:var(--ch-or-d); color:#fff; }
.ch-bel:active{ transform:scale(.97); }
.ch-bel-icoon{ display:flex; }
.ch-stip{
  width:9px; height:9px; border-radius:50%; background:var(--ch-groen); flex:none;
  box-shadow:0 0 0 3px rgba(19,122,74,.2);
}
.ch-bel .ch-stip{ position:absolute; top:12px; right:14px; box-shadow:0 0 0 3px var(--ch-or); }
.ch-bel-open .ch-bel-tekst, .ch-bel-open .ch-stip{ display:none; }
.ch-bel-open{ padding:0 20px; }

/* ⚠️ Staat de zijkar open, dan gaat de bel weg. Hij zit in dezelfde hoek en
   dekte daar "Mandje leegmaken" af. Het chatvenster sluit zichzelf al voor
   de kar opengaat (js/chat.js), dus hier blijft alleen de bel over. */
body.wk-vast .ch-bel{ display:none; }

@media(max-width:860px){
  .ch-bel{ left:12px; height:56px; padding:0 18px; }
  .ch-bel-tekst{ display:none; }
  .ch-bel .ch-stip{ top:8px; right:8px; }
}

/* ---------- het venster ---------- */
.ch-paneel{
  position:fixed; left:18px; bottom:calc(var(--wk-hoek,18px) + var(--wk-bel,66px) + 12px);
  z-index:9450;
  width:min(392px, calc(100vw - 36px)); max-height:min(640px, calc(100vh - 140px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ch-wit); border:1px solid var(--ch-lijn); border-radius:18px;
  box-shadow:0 26px 70px rgba(20,22,26,.26);
  opacity:0; transform:translateY(12px) scale(.98); transform-origin:bottom left;
  transition:opacity .2s ease, transform .2s ease;
}
.ch-paneel.aan{ opacity:1; transform:none; }

/* ⛔ DIT MOET BLIJVEN STAAN. `paneel.hidden = true` zet in de browser
   `display:none`, maar dat komt uit de standaardstijl van de browser zelf en
   verliest van de `display:flex` hierboven. Zonder deze regel hangt het
   dichtgeklapte venster onzichtbaar (opacity:0) over de onderhoek en vangt het
   elke klik op de mandjeknop op. Precies dat gebeurde ook. */
.ch-paneel[hidden]{ display:none; }
@media(prefers-reduced-motion:reduce){
  .ch-paneel{ transition:none; transform:none; }
}

/* ---------- de kop ---------- */
.ch-kop{
  display:flex; align-items:center; gap:11px;
  padding:14px 12px 14px 16px; background:var(--ch-ink); color:#fff; flex:none;
}
.ch-merk{
  width:38px; height:38px; flex:none; border-radius:11px;
  display:grid; place-items:center; background:var(--ch-or); color:#241000;
}
.ch-titel{ flex:1 1 auto; min-width:0; line-height:1.25; }
.ch-titel b{ display:block; font-size:15px; font-weight:700; }
.ch-titel i{
  display:flex; align-items:center; gap:6px;
  font-style:normal; font-size:12px; color:rgba(255,255,255,.62);
}
.ch-titel .ch-stip{ width:7px; height:7px; box-shadow:none; }
.ch-bel-nu, .ch-sluit{
  width:38px; height:38px; flex:none; border:0; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.09); color:#fff; cursor:pointer;
}
.ch-bel-nu:hover, .ch-sluit:hover{ background:rgba(255,255,255,.18); }

/* ---------- de berichten ---------- */
.ch-stroom{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 16px 6px; background:var(--ch-papier);
  display:flex; flex-direction:column; gap:10px;
}
.ch-bericht{ max-width:86%; }
.ch-bericht p{
  margin:0; padding:11px 14px; border-radius:15px;
  font-size:14.5px; line-height:1.5; word-wrap:break-word;
}
.ch-bexx{ align-self:flex-start; }
.ch-bexx p{ background:var(--ch-wit); color:var(--ch-ink2); border:1px solid var(--ch-lijn); border-bottom-left-radius:5px; }
.ch-klant{ align-self:flex-end; }
.ch-klant p{ background:var(--ch-or); color:#241000; font-weight:500; border-bottom-right-radius:5px; }

.ch-typt{ display:flex; gap:5px; padding:13px 15px; background:var(--ch-wit);
  border:1px solid var(--ch-lijn); border-radius:15px 15px 15px 5px; align-self:flex-start; }
.ch-punt{ width:7px; height:7px; border-radius:50%; background:#B9BEC5; animation:chWip 1.3s infinite ease-in-out; }
.ch-punt:nth-child(2){ animation-delay:.18s }
.ch-punt:nth-child(3){ animation-delay:.36s }
@keyframes chWip{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-4px); opacity:1 } }
@media(prefers-reduced-motion:reduce){ .ch-punt{ animation:none } }

/* ---------- de voertuigkaarten ---------- */
.ch-wagens{ display:flex; flex-direction:column; gap:9px; align-self:stretch; }
.ch-wagen{
  display:flex; gap:11px; padding:10px;
  background:var(--ch-wit); border:1px solid var(--ch-lijn); border-radius:13px;
}
.ch-wagen-beeld{
  width:82px; flex:none; aspect-ratio:4/3; overflow:hidden; border-radius:9px; background:var(--ch-papier);
}
.ch-wagen-beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.ch-wagen-tekst{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ch-wagen-tekst b{ font-size:14px; color:var(--ch-ink); line-height:1.3; }
.ch-wagen-merk{ font-size:12.5px; color:var(--ch-zacht); line-height:1.3; }
.ch-wagen-prijs{ font-size:13px; color:var(--ch-ink2); font-variant-numeric:tabular-nums; }
.ch-wagen-tekst i{ font-style:normal; font-size:12.5px; color:var(--ch-zacht); line-height:1.4; }
.ch-vrij{ font-size:12px; font-weight:600; margin-top:2px; color:var(--ch-groen); }
.ch-wagen-knoppen{ display:flex; gap:7px; margin-top:7px; flex-wrap:wrap; }
.ch-mandje, .ch-meer{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:0 13px; border-radius:999px; border:1px solid transparent;
  font:600 12.5px/1 'Inter',system-ui,sans-serif; cursor:pointer; text-decoration:none;
}
.ch-mandje{ background:var(--ch-or); color:#241000; }
.ch-mandje:hover{ background:var(--ch-or-d); color:#fff; }
.ch-mandje-in{ background:var(--ch-or-l); color:var(--ch-or-d); border-color:var(--ch-or-lijn); }
.ch-meer{ background:var(--ch-wit); color:var(--ch-ink2); border-color:var(--ch-lijn); }
.ch-meer:hover{ border-color:var(--ch-ink2); }

/* ---------- de knoppen onder het gesprek ---------- */
.ch-keuzes{ display:none; flex-wrap:wrap; gap:7px; padding:12px 16px 4px; background:var(--ch-papier); flex:none; }
.ch-keuzes.aan{ display:flex; }
.ch-keuze{
  min-height:38px; padding:0 14px; border-radius:999px; cursor:pointer;
  background:var(--ch-wit); color:var(--ch-or-d); border:1px solid var(--ch-or-lijn);
  font:600 13px/1 'Inter',system-ui,sans-serif;
}
.ch-keuze:hover{ background:var(--ch-or-l); }

/* ---------- de invoer ---------- */
.ch-invoer{
  display:flex; align-items:center; gap:8px;
  padding:12px 12px 10px; background:var(--ch-papier); border-top:1px solid var(--ch-lijn); flex:none;
}
.ch-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ch-invoer input{
  flex:1 1 auto; min-width:0; min-height:46px; padding:0 15px;
  border:1px solid var(--ch-lijn); border-radius:999px; background:var(--ch-wit);
  font:400 15px/1 'Inter',system-ui,sans-serif; color:var(--ch-ink);
}
.ch-invoer input:focus-visible{ outline:2px solid var(--ch-or); outline-offset:1px; }
.ch-invoer input:disabled{ background:#EFECE8; color:var(--ch-zacht); }
.ch-stuur{
  width:46px; height:46px; flex:none; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--ch-ink); color:#fff;
}
.ch-stuur:hover:not(:disabled){ background:#000; }
.ch-stuur:disabled{ background:#C3C7CD; cursor:default; }

.ch-open{
  margin:0; padding:0 16px 12px; background:var(--ch-papier); flex:none;
  font-size:11.5px; line-height:1.45; color:var(--ch-zacht);
}
.ch-open a{ color:var(--ch-or-d); font-weight:600; }

/* ---------- op de telefoon vult het venster het scherm ---------- */
@media(max-width:520px){
  .ch-paneel{
    right:0; left:0; bottom:0; width:100%;
    max-height:88vh; height:88dvh;
    border-radius:18px 18px 0 0; border-left:0; border-right:0; border-bottom:0;
    transform-origin:bottom center;
  }
  .ch-bericht{ max-width:90%; }
  .ch-open{ padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .ch-invoer{ padding-bottom:10px; }
}