/* 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-chat {
    right: 10px; left: 10px; bottom: 68px; width: auto; max-width: none;
    max-height: min(76dvh, 78vh);
  }
  .trm-b p { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .trm-think i { animation: none; }
  .trm-chat-launch, .trm-chip, .trm-chat-send, .trm-chat-x { transition: none; }
}