/* AI-assistent-widget. Machinekamer-instrument, geen generieke chatwidget.
   Signatuur: koper hairline bovenaan + koper punt-device in het "S."-mark + mono signaal.
   Mobiel: volledig dekkende sheet met dvh + visualViewport (chat.js). */

/* --- Gesloten: navy pill met het "S."-mark --- */
.ch-bubble {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--navy); color: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 9px 20px 9px 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px; letter-spacing: -.005em;
  box-shadow: 0 14px 34px rgba(11,21,38,.30);
  transition: transform .2s ease, box-shadow .2s ease;
  touch-action: manipulation;
}
.ch-bubble:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(11,21,38,.38); }
.ch-bubble[hidden] { display: none; }
.ch-bubble-mark, .ch-ava {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #16233B; border-radius: 9px;
}
.ch-bubble-mark { width: 34px; height: 34px; }
.ch-bubble-mark b, .ch-ava b { font-family: var(--font-kop); font-weight: 800; color: #F7EFE6; letter-spacing: -.03em; line-height: 1; }
.ch-bubble-mark b { font-size: 17px; }
.ch-bubble-mark i, .ch-ava i { color: var(--koper); font-style: normal; }
@media (max-width: 520px) {
  .ch-bubble { right: 16px; bottom: 16px; padding: 8px; gap: 0; }
  .ch-bubble .ch-bubble-txt { display: none; }
}

/* --- Paneel --- */
.ch-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 91;
  width: min(390px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 44px));
  display: flex; flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--haarlijn);
  border-top: 3px solid var(--koper);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(11,21,38,.34);
  animation: ch-in .26s cubic-bezier(.16,1,.3,1);
}
.ch-panel[hidden] { display: none; }
@keyframes ch-in { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 520px) {
  .ch-panel {
    inset: 0; right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; height: 100vh; height: 100dvh;
    border-radius: 0; border: 0; border-top: 3px solid var(--koper);
    animation: ch-in-m .3s cubic-bezier(.16,1,.3,1);
  }
}
@keyframes ch-in-m { from { opacity: 0; transform: translateY(30px); } }

/* --- Header --- */
.ch-head {
  background: var(--navy); flex-shrink: 0;
  padding: 14px 14px 14px 15px;
  display: flex; align-items: center; gap: 12px;
}
@media (max-width: 520px) { .ch-head { padding-top: max(14px, env(safe-area-inset-top)); } }
.ch-ava { width: 40px; height: 40px; border-radius: 11px; }
.ch-ava b { font-size: 20px; }
.ch-head-txt { min-width: 0; flex: 1; }
.ch-head-txt strong { display: block; font-family: var(--font-kop); font-weight: 700; font-size: 15px; color: #fff; line-height: 1.15; }
.ch-status { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--koper); margin-top: 4px; }
.ch-close {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: rgba(232,238,248,.7);
  cursor: pointer; font-size: 24px; line-height: 1;
  transition: background-color .15s ease, color .15s ease; touch-action: manipulation;
}
.ch-close:hover { color: #fff; background: rgba(255,255,255,.10); }
@media (max-width: 520px) { .ch-close { width: 44px; height: 44px; } }

/* --- Gesprek --- */
.ch-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 14px;
  background: #EEF1F6;
}
.ch-msg { max-width: 87%; font-size: 14.5px; line-height: 1.5; padding: 11px 14px; white-space: pre-wrap; word-wrap: break-word; }
.ch-msg-bot {
  background: #fff; color: var(--inkt);
  border-radius: 4px 15px 15px 15px; align-self: flex-start;
  box-shadow: 0 4px 14px rgba(11,21,38,.06);
}
.ch-msg-user {
  background: var(--navy); color: var(--navy-licht);
  border-radius: 15px 15px 4px 15px; align-self: flex-end;
}
.ch-caret { display: inline-block; width: 7px; height: 1em; background: var(--koper); vertical-align: text-bottom; animation: ch-blink 1s steps(2) infinite; }
@keyframes ch-blink { 50% { opacity: 0; } }

/* --- Chips: suggesties met mono koper aanwijzer --- */
.ch-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ch-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--navy);
  background: #fff; border: 1px solid var(--haarlijn); border-radius: 11px;
  min-height: 40px; padding: 8px 15px; cursor: pointer;
  font-family: var(--font-body); text-align: left;
  box-shadow: 0 2px 8px rgba(11,21,38,.04);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
  touch-action: manipulation;
}
.ch-chip::before { content: "›"; font-family: var(--font-mono); color: var(--koper); font-weight: 500; }
.ch-chip:hover { border-color: var(--koper); transform: translateX(2px); }

/* --- Voet --- */
.ch-foot { border-top: 1px solid var(--haarlijn); padding: 12px 14px; background: #fff; flex-shrink: 0; }
@media (max-width: 520px) { .ch-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); } }
.ch-form { display: flex; gap: 9px; align-items: flex-end; }
.ch-input {
  flex: 1; resize: none; max-height: 108px; min-height: 44px;
  font-family: var(--font-body); font-size: 16px; color: var(--inkt);
  border: 1px solid var(--haarlijn); border-radius: 12px; padding: 11px 13px; line-height: 1.4;
  background: #fff;
}
.ch-input::placeholder { color: #9aa3b0; }
.ch-input:focus-visible { outline: 0; border-color: var(--koper); box-shadow: 0 0 0 3px rgba(196,98,45,.14); }
.ch-send {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--koper); color: var(--koper-tekst);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(196,98,45,.30);
  transition: background-color .2s ease, transform .12s ease; touch-action: manipulation;
}
.ch-send:hover { background: var(--koper-hover); }
.ch-send:active { transform: scale(.94); }
.ch-send:disabled { opacity: .45; cursor: default; box-shadow: none; }
.ch-hand { font-family: var(--font-mono); font-size: 11px; letter-spacing: .01em; color: var(--tekst-muted); margin-top: 11px; text-align: center; line-height: 1.6; }
.ch-hand a { color: var(--koper); border-bottom: 1px solid #E0C4B2; }
.ch-hand a:hover { color: var(--koper-hover); }

/* Achtergrond niet mee laten scrollen als de mobiele sheet open staat */
html.ch-lock, html.ch-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ch-panel { animation: none; }
  .ch-caret { animation: none; }
  .ch-bubble:hover { transform: none; }
  .ch-chip:hover { transform: none; }
}