/**
 * Chat — het gesprekspaneel van ME (lane C2, uitgebreid in lane C4).
 *
 * Sinds lane C4 staat het paneel op elke pagina en kan er een collega in het
 * gesprek stappen. Dat vraagt drie dingen die hier onderaan staan: een derde
 * soort bubbel (met naam erboven), een presence-regel in de kop, en een
 * ongelezen-teller op de knop.
 *
 * Eigen CSS in plaats van Tailwind-classes: main.css is een voorgecompileerd
 * bestand, dus utility-classes die daar niet in staan bestaan hier ook niet.
 * Zelfde taal als de rest van de site: #0A0A0A / #161616 / #DD6015, Rubik,
 * scherpe hoeken (nergens border-radius).
 *
 * Alle onderdelen worden door assets/js/chat.js aangemaakt; dit bestand
 * staat gewoon in de <head> zodat het paneel meteen goed staat zodra het
 * opengaat (geen flits van ongestylede bubbels).
 */

/* ============================================================== launcher */

.me-chat-launcher {
  position: fixed;
  right: 1.5rem;
  /* Op een iPhone zit onderin de home-indicator; die willen we niet raken. */
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  z-index: 9980; /* zie de laagladder bij .me-chat-achtergrond */
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  max-width: calc(100vw - 3rem);
  padding: .95rem 1.35rem;
  background: #DD6015;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  transition: background-color .2s ease, transform .2s ease, opacity .25s ease;
}

.me-chat-launcher:hover { background: #C4510F; transform: translateY(-2px); }
.me-chat-launcher:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.me-chat-launcher[hidden] { display: none !important; }

/* Staat het mobiele menu open, dan is dat het scherm — een zwevende
   chatknop erbovenop is dan alleen maar rommel. main.js zet deze klasse. */
body.me-menu-active .me-chat-launcher { display: none !important; }

/* Op /verhuur/ stond onderin een mandjebalk waar deze knop bovenop moest;
   die balk bestaat sinds het herontwerp niet meer. Wat er wél kwam is een
   vaste aanvraagkolom rechts in beeld — precies waar deze knop hangt.
   verhuur.js zet `verhuur-kolom-zichtbaar` op <body> zolang die kolom er op
   desktop echt staat, met in --vh-kolom-breedte de ruimte die hij vanaf de
   rechterrand inneemt (340px open, 64px als rail).

   Eerst schoof de knop dan links langs de kolom. Technisch klopte dat — geen
   overlap meer — maar een balk van ruim driehonderd pixels die midden onder
   in het scherm zweeft ziet er verdwaald uit, en je had ineens twee ingangen
   naar hetzelfde gesprek. Nu gaat de knop weg zolang de kolom in beeld is:
   verhuur.js zet de ingang naar de chat onder in die kolom (en in de rail als
   je hem inklapt), inclusief de ongelezen-teller die anders zou verdwijnen.
   Scrol je onder de catalogus door, dan is de kolom weg en komt de knop
   gewoon terug op zijn vaste plek. */
@media (min-width: 1024px) {
  body.verhuur-kolom-zichtbaar .me-chat-launcher { display: none !important; }
}

.me-chat-launcher-icoon { flex-shrink: 0; display: block; }

/* Ongelezen berichten terwijl het paneel dicht is. */
.me-chat-launcher-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #DD6015;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.me-chat-launcher-badge[hidden] { display: none !important; }

.me-chat-launcher-kort { display: none; }

@media (max-width: 520px) {
  .me-chat-launcher-lang { display: none; }
  .me-chat-launcher-kort { display: inline; }
}

/* Klein pulserend blokje: opvallend genoeg om op te merken, stil genoeg
   om niet te irriteren. */
.me-chat-launcher-punt {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: #fff;
  animation: me-chat-punt 2.4s ease-in-out infinite;
}

@keyframes me-chat-punt {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* =========================================================== onderlaag */

/* De laagladder van dit thema, want daar zit de chat middenin:
 *
 *    60    de mandjebalk op /verhuur/ (.vh-balk)
 *    100   het mobiele menu (#mobile-menu, fixed inset-0)
 *    101   de site-header (#site-header)
 *    9999  de fotolightbox op een projectpagina
 *
 *    9980  onze launcher   — boven de header, onder de projectlightbox:
 *                            een zwevende knop hoort niet over een foto
 *                            op volledig scherm te staan (en zolang die
 *                            lightbox open is, is de knop toch niet nodig)
 *    9990  onze onderlaag  — zodra de chat openstaat is dat waar je mee
 *    9991  ons paneel        bezig bent, dus die gaan over de header heen
 *
 * De site-header staat op mobiel op `position: relative` met z-index 101, en
 * lag daardoor over de bovenkant van het paneel: je zag het ME-logo en de
 * hamburger in plaats van de chatkop, en de sluitknop was onbereikbaar.
 */

/* Ligt onder het paneel en beslaat de hele layout-viewport, in dezelfde
   kleur. Het paneel volgt de zichtbare viewport en die begint op een iPhone
   niet altijd op 0; zonder deze laag keek je in dat gat zo de pagina in.
   Alleen op een telefoon: op een laptop is het paneel een zwevende kaart en
   hoort de site eromheen gewoon zichtbaar te blijven. */
.me-chat-achtergrond {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  background: #0F0F0F;
}

@media (max-width: 640px) {
  .me-chat-achtergrond.is-open { display: block; }
}

.me-chat-achtergrond[hidden] { display: none !important; }

/* ================================================================ paneel */

.me-chat-paneel {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 9991;
  width: 400px;
  max-width: calc(100vw - 3rem);
  height: 620px;
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0F0F0F;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 3px solid #DD6015;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .65);
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  /* Safari mag de tekst in dit paneel nooit zelf "helpen" vergroten. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}

.me-chat-paneel[hidden] { display: none !important; }
.me-chat-paneel.is-open { opacity: 1; transform: none; pointer-events: auto; }

@supports (height: 100dvh) {
  .me-chat-paneel { max-height: calc(100dvh - 3rem); }
}

/* Het paneel schuift wél links langs de kolom in plaats van te verdwijnen:
   het gesprek moet te lezen blijven terwijl je aanvraag ernaast staat. */
@media (min-width: 1024px) {
  body.verhuur-kolom-zichtbaar .me-chat-paneel {
    right: calc(1.5rem + var(--vh-kolom-breedte, 0px));
  }
}

/* Op de telefoon neemt het gesprek gewoon het scherm over.
   
   De hoogte staat hier op de layout-viewport; zodra het toetsenbord opengaat
   zet chat.js er de hoogte van de *zichtbare* viewport overheen (zie
   volgViewport). Dat is het verschil tussen een invoerbalk die netjes boven
   het toetsenbord staat en eentje die Safari met een zoom moet gaan zoeken. */
@media (max-width: 640px) {
  .me-chat-paneel {
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transform-origin: bottom center;
  }

  /* dvh volgt tenminste de adresbalk mee; het toetsenbord doet hij niet,
     daar is de JS voor. Terugvaloptie voor een browser zonder
     window.visualViewport. */
  @supports (height: 100dvh) {
    .me-chat-paneel { height: 100dvh; bottom: auto; }
  }

  /* Geen accentrand bovenaan: het paneel begint niet altijd op y=0, en een
     oranje streep midden op het scherm ziet eruit als een fout. De naad met
     de onderlaag valt zo helemaal weg. */
  .me-chat-paneel { border-top: 0; }
}

/* ------------------------------------------------------------------ kop */

.me-chat-kop {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.05rem 1.15rem;
  padding-top: calc(1.05rem + env(safe-area-inset-top));
  background: #141414;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

@media (min-width: 641px) {
  .me-chat-kop { padding-top: 1.05rem; }
}

.me-chat-merk {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DD6015;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.me-chat-kop-tekst { flex: 1 1 auto; min-width: 0; }

.me-chat-titel {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.me-chat-sub {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  line-height: 1.35;
}

/* Zolang er een collega meechat vervangt deze regel de ondertitel. */
.me-chat-sub--mens {
  color: #E9863F;
  font-weight: 600;
}

/* De twee knoppen rechts in de kop (⋯ en sluiten) delen hun vorm; de
   klassen .me-chat-meer en .me-chat-sluit zeggen alleen wélke het is. */
.me-chat-kopknop {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.me-chat-kopknop:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.me-chat-kopknop:focus-visible { outline: 2px solid #DD6015; outline-offset: 2px; }

/* ------------------------------------------------------------- ⋯-menu */

/* Zweeft onder de kop, aan de rechterkant waar de knop staat. Binnen het
   paneel, dus het schuift netjes mee als het paneel de zichtbare viewport
   volgt. */
.me-chat-menu {
  position: absolute;
  top: 3.6rem;
  right: .9rem;
  z-index: 4;
  width: min(17rem, calc(100% - 1.8rem));
  padding: .4rem;
  background: #1C1C1C;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}

.me-chat-menu-item {
  display: block;
  width: 100%;
  padding: .7rem .75rem;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.me-chat-menu-item:hover { background: rgba(255, 255, 255, .07); }
.me-chat-menu-item:focus-visible { outline: 2px solid #DD6015; outline-offset: -2px; }

.me-chat-menu-vraag {
  margin: 0;
  padding: .55rem .75rem .7rem;
  color: rgba(255, 255, 255, .78);
  font-size: 13.5px;
  line-height: 1.5;
}

.me-chat-menu-knoppen {
  display: flex;
  gap: .4rem;
  padding: 0 .35rem .35rem;
}

.me-chat-menu-terug,
.me-chat-menu-door {
  flex: 1 1 auto;
  padding: .6rem .5rem;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

.me-chat-menu-door {
  background: #DD6015;
  border-color: #DD6015;
  color: #fff;
}

.me-chat-menu-terug:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.me-chat-menu-door:hover { background: #C4510F; border-color: #C4510F; }
.me-chat-menu-terug:focus-visible,
.me-chat-menu-door:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------ berichten */

.me-chat-berichten {
  flex: 1 1 auto;
  /* Nooit helemaal dichtgeknepen: ook met de lade én de afrondbalk allebei
     open in het vaste 620px-paneel blijft er een paar regels gesprek
     zichtbaar. Op mobiel (100dvh, veel meer ruimte) is dit nooit de
     beperkende factor. */
  min-height: 110px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.2rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.me-chat-berichten::-webkit-scrollbar { width: 8px; }
.me-chat-berichten::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); }
.me-chat-berichten::-webkit-scrollbar-track { background: transparent; }

.me-chat-bericht {
  max-width: 86%;
  padding: .7rem .9rem;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.me-chat-bericht--assistent {
  align-self: flex-start;
  background: #1C1C1C;
  border-left: 2px solid rgba(221, 96, 21, .55);
  color: rgba(255, 255, 255, .88);
}

.me-chat-bericht--klant {
  align-self: flex-end;
  background: rgba(221, 96, 21, .16);
  border-right: 2px solid #DD6015;
  color: #fff;
}

.me-chat-bericht--mens {
  align-self: flex-start;
  background: rgba(221, 96, 21, .13);
  border-left: 2px solid #DD6015;
  color: #fff;
}

/* De naam boven het bericht is het hele punt van meechatten: je hoort te
   zien dat hier een mens zit, en wie. */
.me-chat-mens-naam {
  display: block;
  margin-bottom: 4px;
  color: #E9863F;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.me-chat-mens-tekst { display: block; }

.me-chat-foto {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-bottom: .55rem;
  background: #0F0D0B;
  cursor: zoom-in;
}

.me-chat-bericht--klant .me-chat-foto { margin-left: auto; }

.me-chat-bericht--melding {
  align-self: stretch;
  max-width: none;
  background: rgba(217, 72, 59, .12);
  border-left: 2px solid #D9483B;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
}

.me-chat-bericht--systeem {
  align-self: stretch;
  max-width: none;
  background: rgba(221, 96, 21, .1);
  border-left: 2px solid #DD6015;
  color: rgba(255, 255, 255, .8);
  font-size: 13.5px;
}

/* --------------------------------------------------------- foto op grootte */

.me-chat-groot {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1.2rem;
  padding-top: calc(1.2rem + env(safe-area-inset-top));
  padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
  background: rgba(8, 6, 5, .93);
  cursor: zoom-out;
}

.me-chat-groot-foto {
  max-width: 100%;
  max-height: 80%;
  object-fit: contain;
}

.me-chat-groot-hint {
  margin: 0;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
}

/* ---------------------------------------------------------- typindicator */

.me-chat-typt {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .9rem;
  background: #1C1C1C;
  border-left: 2px solid rgba(221, 96, 21, .55);
}

.me-chat-typt span {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, .55);
  animation: me-chat-typt 1.25s ease-in-out infinite;
}

.me-chat-typt span:nth-child(2) { animation-delay: .16s; }
.me-chat-typt span:nth-child(3) { animation-delay: .32s; }

@keyframes me-chat-typt {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

/* -------------------------------------------------------- voorstelkaarten */

.me-chat-voorstellen {
  align-self: stretch;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.me-chat-kaart {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  padding: .85rem .95rem;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 2px solid #DD6015;
}

.me-chat-kaart-tekst { min-width: 0; }

.me-chat-kaart-naam {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.me-chat-kaart-prijs {
  display: block;
  margin-top: 4px;
  color: #DD6015;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.me-chat-kaart-reden {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  line-height: 1.5;
}

.me-chat-kaart-voorraad {
  display: block;
  margin-top: 5px;
  color: #7FBF95;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.me-chat-kaart-voorraad--op { color: rgba(255, 255, 255, .45); }

.me-chat-kaart-knop {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 34px;
  padding: 0 .75rem;
  background: #DD6015;
  border: 1px solid #DD6015;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.me-chat-kaart-knop:hover { background: #C4510F; border-color: #C4510F; }
.me-chat-kaart-knop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.me-chat-kaart-knop--klaar,
.me-chat-kaart-knop--klaar:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .55);
  cursor: default;
}

.me-chat-kaart-knop:disabled { cursor: default; }

/* ------------------------------------------------- wachtlijst (lane R24) */

/* Onder een assistentbericht, per item dat op de bekende datum op nul
   staat: dezelfde kaart als een voorstel, maar onder elkaar in plaats van
   naast elkaar — het e-mailveld en de knop passen niet naast een naam. */
.me-chat-wachtlijst {
  align-self: stretch;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.me-chat-wachtlijst-kaart {
  flex-direction: column;
  align-items: stretch;
  gap: .65rem;
}

.me-chat-wachtlijst-meta {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  line-height: 1.5;
}

.me-chat-wachtlijst-rij {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.me-chat-wachtlijst-veld {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .55rem .7rem;
  background: #0A0A0A;
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-family: inherit;
  font-size: 16px; /* 16px voorkomt inzoomen op iOS */
  line-height: 1.4;
}

.me-chat-wachtlijst-veld::placeholder { color: rgba(255, 255, 255, .3); }
.me-chat-wachtlijst-veld:focus { outline: none; border-color: #DD6015; }
.me-chat-wachtlijst-veld[aria-invalid="true"] { border-color: #D9483B; }
.me-chat-wachtlijst-veld:disabled { opacity: .5; }

.me-chat-wachtlijst-knop {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .9rem;
  background: #DD6015;
  border: 1px solid #DD6015;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: background-color .2s ease, border-color .2s ease;
}

.me-chat-wachtlijst-knop:hover:not(:disabled) { background: #C4510F; border-color: #C4510F; }
.me-chat-wachtlijst-knop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.me-chat-wachtlijst-knop:disabled { opacity: .6; cursor: default; }

.me-chat-wachtlijst-fout {
  margin: 0;
  color: #F08A7E;
  font-size: 12.5px;
  line-height: 1.45;
}

.me-chat-wachtlijst-fout[hidden] { display: none !important; }

/* Na de 202: vinkje plus de tekst van de server. */
.me-chat-wachtlijst-klaar {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: 0;
  color: #7FBF95;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.me-chat-wachtlijst-klaar svg { flex-shrink: 0; margin-top: 2px; }

/* ------------------------------------------------------------------ lade */

/* De voorstellen uit de catalogus (lane C5): niet meer los na elk
   assistent-antwoord in de stroom, maar verzameld in deze inklapbare lade
   tussen de stroom en de afrond-balk. Standaard dicht; tekenLade() in
   chat.js vult 'm en toont 'm pas zodra er iets in staat. */
.me-chat-lade {
  flex-shrink: 0;
  background: #141414;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.me-chat-lade[hidden] { display: none !important; }

.me-chat-lade-strook {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.15rem;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background-color .2s ease;
}

.me-chat-lade-strook:hover { background: rgba(255, 255, 255, .05); }
.me-chat-lade-strook:focus-visible { outline: 2px solid #DD6015; outline-offset: -2px; }

.me-chat-lade-tekst { flex: 1 1 auto; min-width: 0; }

/* "3 nieuw" — alleen zichtbaar zolang de lade dicht is en er nog niet
   bekeken voorstellen in staan; verdwijnt zodra je 'm openklapt. */
.me-chat-lade-nieuw {
  flex-shrink: 0;
  padding: .2rem .5rem;
  background: #DD6015;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.me-chat-lade-nieuw[hidden] { display: none !important; }

.me-chat-lade-pijl { flex-shrink: 0; transition: transform .2s ease; }
.me-chat-lade.is-open .me-chat-lade-pijl { transform: rotate(180deg); }

.me-chat-lade-paneel {
  /* Vaste waarde en geen vh: het paneel zelf staat op een vaste 620px
     hoogte (niet op de viewport), dus een vh-eenheid hier kan groter zijn
     dan wat er in dat vaste paneel past — dan drukt de lade de stroom
     erboven tot een reepje van één regel plat. Twee kaartjes en een staartje
     van een derde, dan zelf scrollen. Mobiel (waar het paneel wél de
     viewport volgt) krijgt hieronder zijn eigen 60%-regel. */
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.15rem .9rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.me-chat-lade-paneel[hidden] { display: none !important; }
.me-chat-lade-paneel::-webkit-scrollbar { width: 8px; }
.me-chat-lade-paneel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); }
.me-chat-lade-paneel::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------- afronden */

.me-chat-afronden {
  flex-shrink: 0;
  padding: .8rem 1.15rem;
  background: #141414;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.me-chat-afronden[hidden] { display: none !important; }

.me-chat-afronden-knop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 44px;
  background: #DD6015;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .2s ease;
}

.me-chat-afronden-knop:hover { background: #C4510F; }
.me-chat-afronden-knop:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.me-chat-afronden-aantal {
  color: rgba(255, 255, 255, .75);
  font-weight: 500;
}

/* --------------------------------------------------------------- invoer */

.me-chat-invoer {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  padding: .85rem 1rem;
  padding-bottom: calc(.85rem + env(safe-area-inset-bottom));
  background: #141414;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

@media (min-width: 641px) {
  .me-chat-invoer { padding-bottom: .85rem; }
}

.me-chat-veld {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 120px;
  padding: .65rem .75rem;
  background: #0A0A0A;
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-family: inherit;
  font-size: 16px; /* 16px voorkomt inzoomen op iOS */
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
}

.me-chat-veld::placeholder { color: rgba(255, 255, 255, .3); }
.me-chat-veld:focus { outline: none; border-color: #DD6015; }
.me-chat-veld:disabled { opacity: .5; }

.me-chat-bestand {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.me-chat-foto-knop {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.me-chat-foto-knop:hover:not(:disabled) { border-color: #DD6015; color: #fff; }
.me-chat-foto-knop:focus-visible { outline: 2px solid #DD6015; outline-offset: 2px; }
.me-chat-foto-knop:disabled { opacity: .4; cursor: default; }

.me-chat-verstuur {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DD6015;
  border: 0;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}

.me-chat-verstuur:hover { background: #C4510F; }
.me-chat-verstuur:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.me-chat-verstuur:disabled { opacity: .4; cursor: not-allowed; }

.me-chat-voet {
  flex-shrink: 0;
  padding: 0 1rem .75rem;
  background: #141414;
  color: rgba(255, 255, 255, .35);
  font-size: 11px;
  line-height: 1.5;
}

.me-chat-voet[hidden] { display: none !important; }

/* ================================================== CTA-blok op de pagina */

/* De opmaak staat hier en niet in Tailwind-classes: main.css is
   voorgecompileerd, dus een class die daar niet in zit doet niets. */
.me-chat-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .me-chat-cta { flex-direction: row; align-items: center; }
}

.me-chat-cta-knop {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 2rem;
  background: #DD6015;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s ease;
}

.me-chat-cta-knop:hover { background: #C4510F; }
.me-chat-cta-knop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ================================================== telefoon: compact maken

   Bewust helemaal onderaan. Deze regels hebben dezelfde specificiteit als de
   basisregels hierboven, dus ze winnen alleen doordat ze later staan. Zet je
   ze bij het onderdeel zelf, dan doen ze niets — een stille bug die je pas
   op een telefoon ziet. */

@media (max-width: 640px) {
  /* Kop: elke pixel hier is er een die je aan het gesprek kwijt bent. */
  .me-chat-kop {
    padding: .8rem .9rem;
    padding-top: calc(.8rem + env(safe-area-inset-top));
    gap: .7rem;
  }
  .me-chat-merk { width: 32px; height: 32px; font-size: 12px; }
  .me-chat-titel { font-size: 14px; }
  .me-chat-sub { font-size: 11.5px; }
  .me-chat-kopknop { width: 30px; height: 30px; }

  /* Invoerbalk: staat strak boven het toetsenbord, dus krap houden. De 16px
     op het veld blijft staan — daaronder zoomt iOS-Safari in. */
  .me-chat-invoer {
    gap: .4rem;
    padding: .5rem .6rem;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
  }
  .me-chat-veld {
    min-height: 38px;
    max-height: 96px;
    padding: .45rem .6rem;
    line-height: 1.35;
  }
  .me-chat-foto-knop { width: 38px; height: 38px; }
  .me-chat-verstuur { width: 38px; height: 38px; }
  .me-chat-voet { padding: 0 .6rem .5rem; }
  .me-chat-afronden { padding: .55rem .6rem; }
  .me-chat-berichten { padding: 1rem .9rem; }

  /* De lade mag op een telefoon nooit meer dan 60% van het (fullscreen)
     paneel innemen — anders duwt hij de composer van het scherm. dvh volgt
     ook de adresbalk mee; vh is de terugval voor een browser zonder dvh. */
  .me-chat-lade-strook { padding: .6rem .9rem; }
  .me-chat-lade-paneel { max-height: 60vh; }
  @supports (height: 100dvh) {
    .me-chat-lade-paneel { max-height: 60dvh; }
  }

  /* Staat het toetsenbord, dan zit de home-indicator erachter en hoort de
     veilige zone er onderin af — anders gaapt er een lege strook tussen onze
     invoerbalk en het toetsenbord. chat.js zet deze klasse. */
  .me-chat-paneel.me-chat-toetsenbord .me-chat-invoer { padding-bottom: .5rem; }
  .me-chat-paneel.me-chat-toetsenbord .me-chat-voet { padding-bottom: .35rem; }
}

/* ============================================================ toegankelijk */

.me-chat-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .me-chat-launcher,
  .me-chat-paneel { transition: opacity .01ms linear; transform: none; }
  .me-chat-launcher:hover { transform: none; }
  .me-chat-launcher-punt,
  .me-chat-typt span { animation: none; opacity: .7; }
}