:root {
  --vlak:#363636;        /* de achtergrond die je wilde */
  --vlak-op:#414141;     /* iets lichter: bellen, velden, balken */
  --vlak-diep:#2c2c2c;   /* iets donkerder: koprand en voorbeeldvlak */
  --lijn:#4c4c4c;
  --tekst:#f2f2f2;
  --zacht:#a8a8a8;
  --wit:#fff;
  --rood:#ff8b80;
  --kop:"Poppins", -apple-system, system-ui, sans-serif;
  --lees:"Roboto", -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin:0; font:16px/1.65 var(--lees); color:var(--tekst); background:var(--vlak); }
h1 { font-family:var(--kop); font-weight:600; font-size:1.5rem; margin:0 0 .4rem; }
strong, b { font-weight:600; }
.lead { color:var(--zacht); margin:0 0 1.8rem; }
.klein { font-size:.85rem; color:var(--zacht); }
.midden { max-width:26rem; margin:0 auto; padding:4rem 1.2rem; }

label { display:block; font-family:var(--kop); font-size:.85rem; font-weight:500;
        margin:1rem 0 .35rem; color:var(--zacht); }
input, textarea { width:100%; font:inherit; color:var(--tekst); padding:.65rem .75rem;
                  border:1px solid var(--lijn); border-radius:8px; background:var(--vlak-op); }
input::placeholder, textarea::placeholder { color:#8a8a8a; }
input:focus, textarea:focus { outline:2px solid var(--zacht); outline-offset:-1px; }
textarea { resize:vertical; }

button { font-family:var(--kop); font-size:.95rem; font-weight:500; padding:.6rem 1.2rem;
         border-radius:8px; border:1px solid var(--tekst); background:var(--tekst);
         color:var(--vlak); cursor:pointer; }
button:hover:not(:disabled) { background:transparent; color:var(--tekst); }
button:disabled { opacity:.45; cursor:default; }
button.kaal { background:none; color:var(--zacht); border-color:transparent; font-weight:400; }
button.kaal:hover:not(:disabled) { color:var(--tekst); background:none; }
#form-adres button, #form-code button { margin-top:1.2rem; width:100%; }

.melding { margin-top:1.2rem; padding:.7rem .9rem; border-radius:8px;
           background:#4a3330; border:1px solid #6b4440; color:#ffd6d1; font-size:.93rem; }
.melding.goed { background:#333f36; border-color:#475b4c; color:#cfe8d6; }

.lijst { list-style:none; padding:0; margin:0 0 1.5rem; }
.lijst li { border:1px solid var(--lijn); border-radius:8px; margin-bottom:.6rem;
            background:var(--vlak-op); }
.lijst button { width:100%; text-align:left; background:none; color:var(--tekst);
                border:0; font-weight:500; padding:.9rem 1rem; border-radius:8px; }
.lijst button:hover { background:#4a4a4a; color:var(--tekst); }
.lijst .klein { display:block; font-weight:400; font-family:var(--lees); }

/* ------------------------------------------------------------------ werkblad */
#werkblad { display:flex; flex-direction:column; height:100vh; }
#werkblad > header { flex:0 0 auto; }
header { display:flex; justify-content:space-between; align-items:center; gap:1rem;
         padding:.7rem 1.2rem; background:var(--vlak-diep);
         border-bottom:1px solid var(--lijn); }
header strong { font-family:var(--kop); }
header .klein { margin-left:.7rem; }
.koprechts { display:flex; align-items:center; gap:1.2rem; }
.koprechts a { color:var(--zacht); font-size:.9rem; text-decoration:none; }
.koprechts a:hover { color:var(--tekst); text-decoration:underline; }

.kolommen { display:grid; grid-template-columns: minmax(20rem, 30rem) 1fr;
            flex:1 1 auto; min-height:0; }
.chat { display:flex; flex-direction:column; border-right:1px solid var(--lijn);
        min-width:0; min-height:0; }
#gesprek { flex:1; overflow-y:auto; padding:1.4rem 1.2rem; }

/* Een regel per bericht: het icoontje links, de bel ernaast. */
.regel { display:flex; gap:.6rem; margin-bottom:1.1rem; align-items:flex-start; }
.regel.ik { flex-direction:row-reverse; }
.gezicht { flex:0 0 auto; width:30px; height:30px; border-radius:50%;
           margin-top:.15rem; }
.bel { padding:.7rem .95rem; border-radius:14px; max-width:100%;
       white-space:pre-wrap; overflow-wrap:anywhere; }
.regel.ray .bel { background:var(--vlak-op); border-top-left-radius:4px; }
.regel.ik .bel { background:var(--tekst); color:var(--vlak); border-top-right-radius:4px; }
.regel.fout .bel { background:#4a3330; border:1px solid #6b4440; color:#ffd6d1; }
.bel a { color:inherit; }
.bezig .bel { color:var(--zacht); font-style:italic; }

/* Het prijskaartje: een eigen klein bubbeltje rechtsonder de bel. */
.wolk { display:flex; flex-direction:column; align-items:flex-start;
        min-width:0; max-width:85%; }
.regel.ik .wolk { align-items:flex-end; }
.prijs { align-self:flex-end; margin-top:.35rem; font-size:.75rem; color:var(--zacht);
         background:var(--vlak-diep); border:1px solid var(--lijn);
         border-radius:999px; padding:.1rem .6rem; white-space:nowrap; }
.prijs.laag { color:var(--rood); border-color:#6b4440; }

.knoppen { display:flex; gap:.6rem; padding:0 1.2rem 1rem; }
#form-bericht { border-top:1px solid var(--lijn); padding:.9rem 1.2rem;
                display:flex; gap:.6rem; align-items:flex-end; background:var(--vlak-diep); }
#form-bericht textarea { flex:1; }

.voorbeeld { display:flex; flex-direction:column; min-width:0; background:var(--vlak-diep); }
.balk { display:flex; justify-content:space-between; align-items:center;
        padding:.45rem .9rem; border-bottom:1px solid var(--lijn); font-size:.85rem;
        color:var(--zacht); }
#frame { flex:1; width:100%; border:0; background:#fff; }

@media (max-width: 800px) {
  #werkblad { height:auto; }
  .kolommen { grid-template-columns:1fr; grid-template-rows: 60vh 50vh; }
  .chat { border-right:0; border-bottom:1px solid var(--lijn); }
}