/* THE REAL MAG. — website-assistent (widget-styling).
   On-brand: scherp (radius 2px), 1px lijnen, antraciet + koper als accent, geen glow.
   Zit rechtsonder; het cookie-chipje zit linksonder, dus ze botsen niet. */

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

/* ---------- knop rechtsonder ---------- */
.trm-chat-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 96;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px 11px 13px;
  background: var(--antraciet, #232021); color: var(--wit, #fff);
  border: 1px solid var(--antraciet, #232021); border-radius: 2px;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.trm-chat-launch svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--koper-licht, #C89B7B); }
.trm-chat-launch:hover { background: var(--accent, #A07050); border-color: var(--accent, #A07050); }
.trm-chat-launch:hover svg { color: var(--wit, #fff); }
.trm-chat-launch:focus-visible { outline: 2px solid var(--accent, #A07050); outline-offset: 3px; }
.trm-chat-launch.is-open .trm-chat-launch-t { display: none; }
.trm-chat-launch.is-open { padding: 11px 13px; }

/* ---------- paneel ---------- */
.trm-chat {
  position: fixed; right: 20px; bottom: 76px; z-index: 97;
  width: 380px; max-width: calc(100vw - 40px);
  display: flex; flex-direction: column;
  padding: 0; margin: 0; /* vangnet: nooit paginamarges erven */
  max-height: min(72vh, 620px);
  background: var(--wit, #fff);
  border: 1px solid var(--border-grey, #D4D4D0); border-radius: 2px;
  border-top: 3px solid var(--accent, #A07050);
  overflow: hidden;
}
.trm-chat[hidden] { display: none; }

.trm-chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-bottom: 1px solid var(--border-grey, #D4D4D0);
  background: var(--antraciet, #232021); color: var(--wit, #fff);
}
.trm-chat-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--koper-licht, #C89B7B);
  flex: 0 0 auto;
}
.trm-chat-head-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.trm-chat-head-t strong { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.trm-chat-head-t span { font-size: 11px; color: rgba(255, 255, 255, 0.66); letter-spacing: 0.04em; }
.trm-chat-x {
  margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 2px;
  color: var(--wit, #fff); cursor: pointer; padding: 0;
  transition: border-color .3s ease, background .3s ease;
}
.trm-chat-x svg { width: 15px; height: 15px; }
.trm-chat-x:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--koper-licht, #C89B7B); }

.trm-chat-log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--gebroken-wit, #FAF9F7);
}

/* ---------- berichten ---------- */
.trm-b { display: flex; }
.trm-b p {
  margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.5;
  border-radius: 2px; max-width: 88%; overflow-wrap: anywhere;
}
.trm-b-ai { justify-content: flex-start; }
.trm-b-ai p {
  background: var(--wit, #fff); color: var(--ink, #232021);
  border: 1px solid var(--border-grey, #D4D4D0); border-left: 2px solid var(--accent, #A07050);
}
.trm-b-me { justify-content: flex-end; }
.trm-b-me p { background: var(--antraciet, #232021); color: var(--wit, #fff); }

/* Links naar onze eigen site en naar de configuratoren die we gebouwd hebben. */
.trm-b-ai p a { color: var(--accent, #A07050); text-decoration: underline; text-underline-offset: 2px; }
.trm-b-me p a { color: var(--wit, #fff); text-decoration: underline; }

.trm-think p { display: inline-flex; align-items: center; gap: 5px; }
.trm-think i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #A07050);
  opacity: .35; animation: trmDots 1.1s ease-in-out infinite;
}
.trm-think i:nth-child(2) { animation-delay: .15s; }
.trm-think i:nth-child(3) { animation-delay: .3s; }
@keyframes trmDots { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ---------- suggestie-chips ---------- */
.trm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trm-chip {
  appearance: none; cursor: pointer; text-decoration: none;
  background: var(--wit, #fff); color: var(--antraciet, #232021);
  border: 1px solid var(--border-grey, #D4D4D0); border-radius: 2px;
  padding: 7px 11px; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.3;
  transition: border-color .3s ease, color .3s ease;
}
.trm-chip:hover { border-color: var(--accent, #A07050); color: var(--accent, #A07050); }
.trm-chip:focus-visible { outline: 2px solid var(--accent, #A07050); outline-offset: 2px; }
.trm-chip-cta {
  background: var(--accent, #A07050); border-color: var(--accent, #A07050); color: var(--wit, #fff);
  font-weight: 600; letter-spacing: 0.04em;
}
.trm-chip-cta:hover { background: var(--accent-hover, #8a5f43); color: var(--wit, #fff); }

/* ---------- invoer ---------- */
.trm-chat-form {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px; border-top: 1px solid var(--border-grey, #D4D4D0); background: var(--wit, #fff);
}
.trm-chat-form[hidden] { display: none; }
.trm-chat-in {
  flex: 1 1 auto; min-width: 0; resize: none;
  font-family: inherit; font-size: 14px; line-height: 1.45; color: var(--ink, #232021);
  padding: 9px 10px; border: 1px solid var(--border-grey, #D4D4D0); border-radius: 2px;
  background: var(--wit, #fff); max-height: 120px;
}
.trm-chat-in:focus { outline: none; border-color: var(--accent, #A07050); }
.trm-chat-send {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent, #A07050); border: 1px solid var(--accent, #A07050); border-radius: 2px;
  color: var(--wit, #fff); cursor: pointer; padding: 0;
  transition: background .3s ease;
}
.trm-chat-send svg { width: 17px; height: 17px; }
.trm-chat-send:hover { background: var(--accent-hover, #8a5f43); }
.trm-chat-send:focus-visible { outline: 2px solid var(--antraciet, #232021); outline-offset: 2px; }

.trm-chat-note {
  margin: 0; padding: 8px 14px 11px;
  font-size: 11px; line-height: 1.4; color: var(--ink-faint, #8a8784);
  background: var(--wit, #fff); border-top: 1px solid var(--border-grey, #D4D4D0);
}
.trm-chat-note a { color: var(--accent, #A07050); }

/* ---------- mobiel: bijna-volledig blad ---------- */
@media (max-width: 640px) {
  .trm-chat-launch { right: 14px; bottom: 14px; padding: 10px 13px; }
  .trm-chat-launch-t { display: none; }
  /* --trm-toetsenbord en --trm-ruimte worden door chat.js gezet zodra het schermtoetsenbord
     opengaat, en weer weggehaald als het dichtgaat. Staan ze er niet, dan geldt de gewone
     stand en verandert er niets. Zonder dit stond het paneel achter het toetsenbord en typte
     je blind. (02-09-2026)

     Tijdens het typen loopt het paneel van de ONDERKANT VAN DE SITEKOP tot vlak boven het
     toetsenbord. Een eerdere versie hield 55% van de resthoogte aan; dan kwam de bovenrand
     ergens halverwege uit en stond er een gat tussen de kop en het paneel. `--trm-boven` is
     de gemeten onderkant van `.site-header`, die staat vast bovenaan en verdwijnt niet bij
     het scrollen. Het gesprek scrollt binnen `.trm-chat-log`, dus een vaste hoogte kan. */
  .trm-chat {
    right: 10px; left: 10px; width: auto; max-width: none;
    bottom: calc(68px + var(--trm-toetsenbord, 0px));
    max-height: min(76dvh, 78vh);
  }
  .trm-chat.is-toetsenbord {
    top: var(--trm-boven, 0px);
    bottom: calc(12px + var(--trm-toetsenbord, 0px));
    max-height: none;
  }
  .trm-b p { max-width: 92%; }
}

/* Geen prefers-reduced-motion-uitzondering: animaties draaien altijd, ook als Windows 'animatie-effecten' uit staat (besluit Christian 05-08-2026). */