/* De chat in het iframe op de website van Auto Siero, in de huisstijl van Siero (waarden uit design/tokens.css van
   AS-Website: nachtblauw, accentblauw, lichte vlakken). Geen donkere stand: de website heeft die ook niet. */
:root {
  --letter: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --accent: #1559d6; --accent-tekst: #ffffff; --kop: #0e1a2b;
  --bg: #f3f5f8; --kaart: #ffffff; --rand: #e3e8ef; --tekst: #0e1a2b; --zacht: #5b6676; --fout: #c42831;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--tekst); font: 400 15px/1.5 var(--letter); }
button, input, select, textarea { font: inherit; color: inherit; }

.chat { display: flex; flex-direction: column; height: 100%; }
.chat-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  background: var(--kop); color: var(--accent-tekst); }
.chat-kop strong { display: block; font-size: 1.05rem; }
.chat-sub { font-size: .8rem; opacity: .85; }
.chat-sluit { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: inherit; cursor: pointer; padding: 0 4px; }

.chat-lijst { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg, .autos { flex-shrink: 0; }  /* anders drukt de lange lijst ze plat */
.msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.msg.bot { align-self: flex-start; background: var(--kaart); border: 1px solid var(--rand); border-bottom-left-radius: 4px; }
.msg.bezoeker { align-self: flex-end; background: var(--accent); color: var(--accent-tekst); border-bottom-right-radius: 4px; }
.msg.bezig { color: var(--zacht); font-style: italic; }

.autos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; align-self: stretch; }
.auto { flex: 0 0 190px; background: var(--kaart); border: 1px solid var(--rand); border-radius: 10px; padding: 10px; font-size: .85rem; }
.auto img { display: block; width: calc(100% + 20px); margin: -10px -10px 8px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px 10px 0 0; background: var(--bg); }
.auto a { color: inherit; text-decoration: none; }
.auto b { display: block; font-size: .92rem; margin-bottom: 4px; }
.auto .prijs { font-weight: 700; margin-top: 6px; }
.auto .zacht { color: var(--zacht); }
.auto button { margin-top: 8px; width: 100%; padding: 6px; border-radius: 8px; border: 1px solid var(--accent);
  background: none; color: var(--accent); font-weight: 600; cursor: pointer; }

.chat-snel { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 8px; }
.chat-snel button { border: 1px solid var(--rand); background: var(--kaart); border-radius: 999px; padding: 5px 11px;
  font-size: .82rem; cursor: pointer; }
.chat-snel button:hover { border-color: var(--accent); }

.chat-invoer { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--rand); background: var(--kaart); }
.chat-invoer textarea { flex: 1; resize: none; border: 1px solid var(--rand); border-radius: 10px; padding: 9px 11px;
  background: var(--bg); max-height: 120px; font-size: 16px; /* 16px: iPhone zoomt anders in */ }
.chat-stuur { width: 44px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-tekst); cursor: pointer; font-size: 1.1rem; }
.chat-stuur:disabled { opacity: .5; }

.chat-contact { padding: 12px 14px; display: grid; gap: 9px; border-top: 1px solid var(--rand); background: var(--kaart); overflow-y: auto; max-height: 75%; }
.chat-contact h2 { margin: 0; font-size: 1rem; }
.chat-contact label { display: grid; gap: 3px; font-size: .85rem; font-weight: 600; }
.chat-contact input, .chat-contact select, .chat-contact textarea { font-weight: 400; padding: 8px 10px; border: 1px solid var(--rand);
  border-radius: 8px; background: var(--bg); font-size: 16px; }
.chat-contact .vink { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.chat-contact .vink input { width: auto; margin-top: 4px; }
.chat-contact .knoppen { display: flex; justify-content: space-between; }
.chat-contact .hoofd { background: var(--accent); color: var(--accent-tekst); border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.chat-contact .tekst { background: none; border: 0; color: var(--zacht); cursor: pointer; }
.fout { color: var(--fout); margin: 0; font-size: .85rem; }

.chat-voet { margin: 0; padding: 6px 14px 10px; font-size: .72rem; color: var(--zacht); background: var(--kaart); }
.chat-voet a { color: inherit; }
[hidden] { display: none !important; }