/* Sophie chatwidget — design v2 ("Nieuw" in de design-sectie).
   Volledig los van het originele widget-design (chat-widget.css / chat-panel.html):
   eigen namespace .scv2, eigen DOM, zelfde /api/chat-backend. */

.scv2 {
  --scv2-panel-glass: rgba(58, 54, 50, 0.65);
  --scv2-bubble-glass: rgba(255, 255, 255, 0.16);
  --scv2-text-on-glass: rgba(255, 255, 255, 0.96);
  --scv2-radius-panel: 26px;
  --scv2-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --scv2-panel-w: min(608px, calc(100vw - 24px));
  --scv2-panel-h: min(514px, calc(100dvh - 150px));
  --scv2-bar-h: 46px;

  position: fixed;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  z-index: 99999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  pointer-events: none;
  font-family: var(--scv2-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.scv2.scv2--active { display: flex; }
.scv2.scv2--left {
  align-items: flex-start;
  padding-left: 32px;
}
.scv2.scv2--right {
  align-items: flex-end;
  padding-right: 32px;
}

.scv2 * { box-sizing: border-box; }

/* Verberg zolang het mobiele hoofdmenu open is (zelfde gedrag als origineel) */
body.nav-menu-open .scv2 {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============ Paneel (glas) ============ */
.scv2__panel {
  display: none;
  pointer-events: auto;
  width: var(--scv2-panel-w);
  height: var(--scv2-panel-h);
  background: var(--scv2-panel-glass);
  -webkit-backdrop-filter: blur(44px) saturate(160%);
  backdrop-filter: blur(44px) saturate(160%);
  border-radius: var(--scv2-radius-panel);
  box-shadow: 0 24px 64px rgba(30, 24, 16, 0.28), 0 2px 8px rgba(30, 24, 16, 0.12);
  flex-direction: column;
  overflow: hidden;
  transform-origin: 50% 100%;
  transition: width 0.5s cubic-bezier(0.3, 1.05, 0.4, 1);
}
.scv2.is-open .scv2__panel { display: flex; }
/* Meldingsmodus: paneel verbreedt, kaart komt links, gesprek blijft rechts doorlopen */
.scv2__panel--melding,
.scv2__panel--mail,
.scv2__panel--eloket,
.scv2__panel--afspraak,
.scv2__panel--perceel { width: calc(var(--scv2-panel-w) * 2 + 20px); }

/* ============ Meldingsmodus: kaart + gespreksrij ============ */
.scv2__body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.scv2__chatcol {
  display: flex;
  flex-direction: column;
  flex: 1 1 60%;
  min-width: 0;
  min-height: 0;
}
.scv2__mappane,
.scv2__mailpane,
.scv2__eloketpane,
.scv2__agendapane,
.scv2__perceelpane {
  display: none;
  flex: 0 0 0;
  min-height: 0;
  margin: 14px 0 14px 14px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.08);
}
/* Kaart/mail/e-loket-vak 20% breder dan het gespreksvak */
.scv2__panel--melding .scv2__mappane { display: block; flex: 1 1 40%; }
.scv2__panel--mail .scv2__mailpane { display: flex; flex: 1 1 40%; }
.scv2__panel--eloket .scv2__eloketpane { display: flex; flex: 1 1 40%; }
.scv2__panel--afspraak .scv2__agendapane { display: flex; flex: 1 1 40%; }
.scv2__panel--perceel .scv2__perceelpane { display: block; flex: 1 1 40%; }

.scv2__perceel-label {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  right: 12px;
  margin: 0;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1f1c17;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scv2__perceel-map { position: absolute; inset: 0; }
.scv2__perceel-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--scv2-text-on-glass);
}
.scv2__map { position: absolute; inset: 0; }
.scv2__map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--scv2-text-on-glass);
}

/* Melding voltooid: waas over de kaart + geanimeerd vinkje */
.scv2__map-success,
.scv2__mail-success,
.scv2__ag-success {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  background: rgba(31, 28, 23, 0.32);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.scv2__map-success.is-visible,
.scv2__mail-success.is-visible,
.scv2__ag-success.is-visible { display: flex; opacity: 1; }
.scv2__map-success-circle,
.scv2__mail-success-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  transform: scale(0.7);
  transition: transform 0.42s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.scv2__map-success.is-visible .scv2__map-success-circle,
.scv2__mail-success.is-visible .scv2__mail-success-circle,
.scv2__ag-success.is-visible .scv2__map-success-circle { transform: scale(1); }
.scv2__map-success-svg,
.scv2__mail-success-svg { width: 30px; height: 30px; }
.scv2__map-success-path,
.scv2__mail-success-path {
  fill: none;
  stroke: #34c759;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.scv2__map-success.is-visible .scv2__map-success-path,
.scv2__mail-success.is-visible .scv2__mail-success-path,
.scv2__ag-success.is-visible .scv2__map-success-path {
  animation: scv2-success-draw 0.5s 0.15s cubic-bezier(0.3, 0.9, 0.4, 1) forwards;
}
@keyframes scv2-success-draw {
  to { stroke-dashoffset: 0; }
}

/* ============ Meldingsmodus: mail-widget (Apple Mail-stijl) ============ */
.scv2__mailwin {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.scv2__mailwin-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(#f3f1ee, #e9e6e1);
  border-bottom: 1px solid #dcd8d1;
  flex-shrink: 0;
}
.scv2__mailwin-dot { width: 11px; height: 11px; border-radius: 50%; }
.scv2__mailwin-dot--red { background: #ff5f57; }
.scv2__mailwin-dot--yellow { background: #febc2e; }
.scv2__mailwin-dot--green { background: #28c840; }
.scv2__mailwin-title {
  flex: 1;
  text-align: center;
  margin-right: 33px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5b5751;
}
.scv2__mailwin-fields { flex-shrink: 0; }
.scv2__mailwin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid #ececea;
  font-size: 13px;
}
.scv2__mailwin-label { flex-shrink: 0; color: #8e887c; width: 68px; }
.scv2__mailwin-to { color: #1f1c17; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scv2__mailwin-subject {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  color: #1f1c17;
  background: none;
}
.scv2__mailwin-body {
  flex: 1;
  min-height: 0;
  border: none;
  outline: none;
  resize: none;
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  font-family: inherit;
  color: #1f1c17;
  background: #ffffff;
}
.scv2__mailwin-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 9px 12px;
  border-top: 1px solid #ececea;
  background: #fafaf9;
}
.scv2__mailwin-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 8px;
  background: #0a84ff;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: opacity 140ms ease;
}
.scv2__mailwin-send:hover { opacity: 0.88; }
.scv2__mailwin-send:disabled { opacity: 0.6; cursor: default; }

/* ============ Meldingsmodus: e-loket-widget (speelse gele hoverfill) ============ */
.scv2__panel--eloket .scv2__eloketpane {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: #201d18;
  isolation: isolate;
}
.scv2__eloketpane::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210%;
  height: 210%;
  border-radius: 50%;
  background: rgb(250, 232, 81);
  transform: translate(-50%, -50%) scale(0);
  /* Terug (muis weg): kort en vlot */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
  z-index: 0;
}
.scv2__eloket-icon,
.scv2__eloket-label,
.scv2__eloket-btn { position: relative; z-index: 1; }
.scv2__eloketpane:hover::before,
.scv2__eloketpane:focus-within::before {
  transform: translate(-50%, -50%) scale(1);
  /* Opkomen (hover): traag en gelijkmatig */
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.scv2__eloket-icon {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.scv2__eloket-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scv2__eloket-label {
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
  max-width: 92%;
}
.scv2__eloket-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1f1c17;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  transition: transform 140ms ease;
}
.scv2__eloket-btn:hover { transform: scale(1.03); }
.scv2__eloket-btn:focus-visible { outline: 2px solid #1f1c17; outline-offset: 2px; }
/* ============ Loketafspraak-demo: agenda-pane ============ */
/* Onderdeel van de chat: zelfde glas als een chatballon, zelfde font, witte tekst.
   Links een stille voortgangsrail; hover erop en de inhoud vervaagt achter de
   verzamelde afspraak. */
.scv2__panel--afspraak .scv2__agendapane {
  flex-direction: row;
  gap: 16px;
  padding: 20px 20px 18px;
  background: var(--scv2-bubble-glass);
  color: var(--scv2-text-on-glass);
  font-family: var(--scv2-font);
}

/* ---- Voortgangsrail: vier bolletjes, geen tekst ---- */
.scv2__ag-rail {
  position: relative;
  flex: 0 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.scv2__ag-rail-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.scv2__ag-rail-fill {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.scv2__ag-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}
/* Klikvlak groter dan het bolletje zelf, zonder de rail te verbreden */
.scv2__ag-dot::after {
  content: "";
  position: absolute;
  inset: -9px;
}
.scv2__ag-dot.is-done { background: #fff; }
.scv2__ag-dot.is-current {
  background: #fff;
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}
.scv2__ag-dot:hover,
.scv2__ag-dot:focus-visible {
  transform: scale(1.5);
  background: #fff;
  outline: none;
}
.scv2__ag-dot:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); }

/* ---- Inhoudskolom ---- */
.scv2__ag-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 0.28s ease, filter 0.28s ease;
}
.scv2__agendapane.is-peeking .scv2__ag-main {
  opacity: 0.28;
  filter: blur(7px);
  pointer-events: none;
}
.scv2__ag-head { flex: 0 0 auto; }
.scv2__ag-dienst {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scv2__ag-step {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}
.scv2__ag-stage {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  transition: opacity 140ms ease;
}
.scv2__ag-stage.is-fading { opacity: 0; }

.scv2__ag-anim {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.scv2__ag-anim.is-visible { opacity: 1; transform: none; }

/* ---- Stap 1: kalender over de volle breedte ---- */
.scv2__ag-dows,
.scv2__ag-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
/* Vier volle weken die de resterende hoogte precies opvullen: geen halve rij,
   geen scrollbalk, geen leeg onderstuk. */
.scv2__ag-cal {
  flex: 1 1 auto;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}
.scv2__ag-dows {
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
}
.scv2__ag-day {
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.96);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: opacity 0.26s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.scv2__ag-day.is-visible:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}
.scv2__ag-day.is-picked,
.scv2__ag-day.is-picked.is-visible:hover {
  background: #fff;
  border-color: #fff;
  color: #1f1c17;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}
.scv2__ag-day.is-closed {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}
.scv2__ag-day.is-past {
  border-color: transparent;
  color: rgba(255, 255, 255, 0.14);
}
.scv2__ag-day:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Stap 2: tijdsloten over de volle breedte ---- */
.scv2__ag-half {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.scv2__ag-half + .scv2__ag-grid { margin-bottom: 14px; }
.scv2__ag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(38px, 1fr);
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}
.scv2__ag-half { flex: 0 0 auto; }
.scv2__ag-back { flex: 0 0 auto; }
.scv2__ag-slot {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0;
  min-height: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.96);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: opacity 0.26s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.scv2__ag-slot.is-visible:hover {
  background: #fff;
  border-color: #fff;
  color: #1f1c17;
  font-weight: 600;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}
.scv2__ag-slot.is-taken {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}
.scv2__ag-slot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scv2__ag-back {
  margin-top: 2px;
  border: 0;
  background: none;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), color 140ms ease;
}
.scv2__ag-back:hover { color: #fff; }
.scv2__ag-back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Stap 3 & 4: het gekozen moment ---- */
.scv2__ag-ticket {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.scv2__ag-ticket-time {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.scv2__ag-ticket-day {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.62);
  text-transform: capitalize;
}

.scv2__ag-cta {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  padding: 14px 20px;
  background: #fff;
  color: #1f1c17;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: transform 140ms ease, opacity 140ms ease;
}
.scv2__ag-cta:hover { transform: translateY(-1px) scale(1.01); }
.scv2__ag-cta:disabled { opacity: 0.55; cursor: default; transform: none; }
.scv2__ag-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Inkijk bij hover op een bolletje ---- */
.scv2__ag-peek {
  position: absolute;
  left: 46px;
  right: 20px;
  top: 50%;
  transform: translateY(-46%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.scv2__agendapane.is-peeking .scv2__ag-peek {
  opacity: 1;
  transform: translateY(-50%);
}
.scv2__ag-peek-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.scv2__ag-peek-row:last-child { border-bottom: 0; }
.scv2__ag-peek-value {
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.3);
}
.scv2__ag-peek-row.is-set .scv2__ag-peek-value { color: #fff; font-weight: 600; }
.scv2__ag-peek-row.is-focus { color: rgba(255, 255, 255, 0.8); }
.scv2__ag-peek-row.is-focus .scv2__ag-peek-value { font-size: 15px; }

/* Succes: zelfde waas en vinkje als de andere modules (donker glas past hier weer) */

/* Animatieklassen worden na afloop via JS verwijderd, zodat er geen
   fill-mode blijft hangen die de backdrop-filter breekt. */
.scv2__panel.is-opening { animation: scv2-panel-open 0.42s cubic-bezier(0.32, 0.92, 0.32, 1.02); }
.scv2__panel.is-closing { animation: scv2-panel-close 180ms ease-in forwards; }
@keyframes scv2-panel-open {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scv2-panel-close {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(0.97); }
}

/* ============ Header ============ */
.scv2__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 12px 22px;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}
.scv2__convo {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  position: relative;
}
/* Sophie-woordmerk: zelfde lettertype-stijl als nav__logo op de website */
.scv2__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--scv2-text-on-glass);
}
.scv2__convo-btn,
.scv2__collapse {
  background: none;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  transition: background 160ms ease;
  padding: 0;
}
.scv2__convo-btn { width: 30px; height: 30px; }
.scv2__collapse { width: 36px; height: 36px; }
.scv2__convo-btn:hover,
.scv2__collapse:hover { background: rgba(255, 255, 255, 0.12); }
.scv2__convo-btn:focus-visible,
.scv2__collapse:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scv2__convo-btn svg { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.scv2__convo:hover .scv2__convo-btn svg,
.scv2__convo.open .scv2__convo-btn svg { transform: rotate(180deg); }

/* ============ Gesprekkenmenu ============ */
.scv2__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(480px, calc(var(--scv2-panel-w) - 24px));
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(30, 24, 16, 0.24), 0 2px 8px rgba(30, 24, 16, 0.1);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 200ms;
}
.scv2__convo:hover .scv2__menu,
.scv2__convo.open .scv2__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scv2__item-row {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 13px;
  transition: background 140ms ease;
}
.scv2__item-row:hover,
.scv2__item-row--active {
  background: #f2f0ec;
}
.scv2__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 12px 4px 12px 14px;
  border-radius: 13px;
  cursor: pointer;
  font-family: var(--scv2-font);
  font-size: 15px;
  color: #1f1c17;
  text-align: left;
}
.scv2__item:focus-visible { outline: 2px solid #1f1c17; outline-offset: -2px; }
.scv2__item-snippet {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scv2__item-meta {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 32px;
  margin-right: 2px;
  display: grid;
  place-items: center end;
}
.scv2__item-time,
.scv2__item-delete {
  grid-area: 1 / 1;
  transition: opacity 140ms ease, color 140ms ease;
}
.scv2__item-time {
  color: #8e887c;
  font-size: 13.5px;
  text-align: right;
  width: 100%;
  padding-right: 4px;
  line-height: 32px;
  pointer-events: none;
}
.scv2__item-delete {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  justify-self: end;
  background: none;
  border: none;
  border-radius: 0;
  color: #8e887c;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.scv2__item-row:hover .scv2__item-time,
.scv2__item-row:focus-within .scv2__item-time {
  opacity: 0;
}
.scv2__item-row:hover .scv2__item-delete,
.scv2__item-row:focus-within .scv2__item-delete,
.scv2__item-delete:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.scv2__item-delete:hover {
  color: #1f1c17;
  background: none;
}
.scv2__item-delete:focus-visible {
  outline: 2px solid #1f1c17;
  outline-offset: 0;
}
@media (hover: none) {
  .scv2__item-time { opacity: 0; }
  .scv2__item-delete {
    opacity: 1;
    pointer-events: auto;
  }
}
.scv2__item-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1f1c17;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.scv2__item--new { font-weight: 600; }
.scv2__item--new .scv2__item-icon { background: #ebebeb; color: #1f1c17; }
.scv2__item--whatsapp { font-weight: 600; }
.scv2__menu > .scv2__item {
  width: 100%;
  padding: 12px 14px;
  transition: background 140ms ease;
}
.scv2__menu > .scv2__item:hover { background: #f2f0ec; }
.scv2__item--active .scv2__item-snippet {
  font-weight: 600;
}
.scv2__item--active .scv2__item-time {
  color: #1f1c17;
  font-weight: 600;
}
.scv2__menu-sep {
  height: 1px;
  background: #eee9df;
  margin: 4px 10px;
}
.scv2__menu-empty {
  padding: 10px 14px 12px;
  font-size: 13.5px;
  color: #8e887c;
}

/* ============ Berichten ============ */
.scv2__messages-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.scv2__messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 64px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: none;
}
.scv2__messages::-webkit-scrollbar { display: none; }

.scv2__call-fab {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 3;
}

.scv2__msg { animation: scv2-msg-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both; max-width: 100%; }
@keyframes scv2-msg-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scv2__msg--user {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--scv2-bubble-glass);
  color: var(--scv2-text-on-glass);
  padding: 13px 18px;
  border-radius: 22px;
  font-size: 16px;
  line-height: 1.45;
  max-width: 70%;
  overflow-wrap: break-word;
}
.scv2__msg-text { white-space: pre-wrap; }
.scv2__attachment--img {
  display: block;
  max-width: min(220px, 100%);
  max-height: 180px;
  border-radius: 12px;
  object-fit: cover;
}
.scv2__attachment--file {
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  word-break: break-all;
}

.scv2__msg--bot {
  align-self: flex-start;
  color: var(--scv2-text-on-glass);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  max-width: 92%;
  overflow-wrap: break-word;
}
.scv2__msg--bot p { margin: 0; }
.scv2__msg--bot p + p { margin-top: 14px; }
.scv2__msg--bot a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.scv2__msg--bot h1,
.scv2__msg--bot h2,
.scv2__msg--bot h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.scv2__msg--bot ul,
.scv2__msg--bot ol {
  margin: 0;
  padding-left: 22px;
}
.scv2__msg--bot li + li { margin-top: 4px; }
.scv2__msg--bot p + ul,
.scv2__msg--bot p + ol,
.scv2__msg--bot ul + p,
.scv2__msg--bot ol + p { margin-top: 10px; }
.scv2__msg--bot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 1px 6px;
}

/* Streaming: woorden verschijnen zacht (ChatGPT-stijl) */
.scv2__w { opacity: 0; transition: opacity 0.42s ease; }
.scv2__w.on { opacity: 1; }

/* ============ Knoppenbalken onder botberichten ============ */
.scv2__bar-enter {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.scv2__bar-enter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scv2__linkbar {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 92%;
  margin-top: -6px;
}
.scv2__link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.96);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background 150ms ease, transform 150ms ease;
}
.scv2__link-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}
.scv2__link-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scv2__link-btn--eloket {
  background: #ffffff;
  color: #1f1c17;
}
.scv2__link-btn--eloket:hover { background: #f3f1ec; }
.scv2__btn-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 150ms ease, opacity 150ms ease;
}
.scv2__link-btn:hover .scv2__btn-chev,
.scv2__src-btn:hover .scv2__btn-chev {
  transform: translateX(2px);
  opacity: 1;
}

/* UiTdatabank eventkaarten */
.scv2__events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 0 4px;
}
.scv2__event {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f1c17;
  text-decoration: none;
  border: 1px solid rgba(30, 24, 16, 0.08);
  transition: background 0.15s ease, transform 0.15s ease;
}
a.scv2__event:hover {
  background: #fff;
  transform: translateY(-1px);
}
.scv2__event-img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
  background: #ebe7df;
}
.scv2__event-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scv2__event-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #1f1c17;
}
.scv2__event-meta {
  font-size: 12px;
  color: #6b655c;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scv2__event-price {
  font-size: 12px;
  font-weight: 600;
  color: #3d5a40;
}
.scv2__event .scv2__btn-chev {
  align-self: center;
  flex: none;
  opacity: 0.45;
}
a.scv2__event:hover .scv2__btn-chev {
  opacity: 1;
  transform: translateX(2px);
}

.scv2__srcbar {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 92%;
  margin-top: -6px;
}
.scv2__src-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.96);
  text-decoration: none;
  transition: background 150ms ease;
}
.scv2__src-btn:hover { background: rgba(255, 255, 255, 0.18); }
.scv2__src-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scv2__src-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.scv2__src-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scv2__src-url {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Ga naar Eloket"-balk (open-loket-demo) */
.scv2__loketbar {
  align-self: flex-start;
  width: min(420px, 92%);
  margin-top: -4px;
}
.scv2__loket-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  background: #ffffff;
  color: #1f1c17;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.scv2__loket-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.scv2__loket-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scv2__loket-btn.is-routed {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
  cursor: default;
}
.scv2__loket-btn .scv2__btn-chev { opacity: 0.85; }

.scv2__qr {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 92%;
  margin-top: -4px;
}
.scv2__qr-btn {
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--scv2-font);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.scv2__qr-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}
.scv2__qr-btn:active { transform: scale(0.97); }
.scv2__qr-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.scv2__typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 16px 4px;
}
.scv2__typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  animation: scv2-dot 1.2s infinite ease-in-out;
}
.scv2__typing i:nth-child(2) { animation-delay: 0.15s; }
.scv2__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes scv2-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ============ Chatbalk: launcher én composer in één ============ */
.scv2__composer {
  pointer-events: auto;
  width: var(--scv2-panel-w);
  min-height: var(--scv2-bar-h);
  background: #ffffff;
  border-radius: calc(var(--scv2-bar-h) / 2);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 5px 6px 5px 20px;
  flex-shrink: 0;
  margin: 0;
  /* Schaduwopbouw zoals de originele Sophie-launcher */
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 0.72) inset,
    0 -0.5px 0 rgba(0, 0, 0, 0.07) inset,
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.07);
  /* Uitklappen met lichte overshoot: speels, Apple-achtig */
  transition:
    width 0.55s cubic-bezier(0.3, 1.25, 0.45, 1),
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.22s ease,
    box-shadow 0.22s ease;
}
/* Gesloten: compacte launcher (20% smaller dan vroeger) */
.scv2:not(.is-open) .scv2__composer {
  width: 224px;
  cursor: pointer;
}
/* Hover: zelfde breedte als voorheen (308px) + lichte lift via schaduw */
.scv2:not(.is-open) .scv2__composer:hover {
  width: 308px;
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 0.78) inset,
    0 -0.5px 0 rgba(0, 0, 0, 0.07) inset,
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 10px 40px rgba(0, 0, 0, 0.14),
    0 3px 12px rgba(0, 0, 0, 0.08);
}
.scv2:not(.is-open) .scv2__composer:active {
  transform: scale(0.984);
  transition-duration: 0.55s, 0.08s, 0.22s, 0.22s;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62) inset,
    0 -0.5px 0 rgba(0, 0, 0, 0.07) inset,
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 4px 16px rgba(0, 0, 0, 0.09);
}
.scv2:not(.is-open) .scv2__input { pointer-events: none; }
.scv2:not(.is-open) .scv2__icon-btn {
  width: 0;
  min-width: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}
/* Terugkrimpen na sluiten: veer-easing voor het "snap"-gevoel */
.scv2.is-shrinking .scv2__composer {
  transition:
    width 0.62s cubic-bezier(0.34, 1.42, 0.64, 1),
    transform 0.62s cubic-bezier(0.34, 1.42, 0.64, 1),
    background 0.22s ease,
    box-shadow 0.22s ease;
}
.scv2__composer--has-files {
  border-radius: 22px;
  padding-top: 8px;
}
.scv2__composer-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: calc(var(--scv2-bar-h) - 10px);
}
.scv2__input-slot {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.scv2__composer-type {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100%;
  font-family: var(--scv2-font);
  font-size: 14.84px;
  color: #9c968b;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 0;
  transition: opacity 0.18s ease;
}
.scv2__composer-type--shimmer {
  background-image: linear-gradient(
    90deg,
    #9c968b 0%,
    #9c968b 38%,
    #e4dfd6 50%,
    #9c968b 62%,
    #9c968b 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: scv2-composer-shimmer 7.5s linear infinite;
}
@keyframes scv2-composer-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scv2__composer-type--shimmer {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: #9c968b;
    color: #9c968b;
  }
}
.scv2__composer-type.is-hidden {
  opacity: 0;
}
.scv2__input-slot .scv2__input {
  position: relative;
  z-index: 1;
  width: 100%;
}
.scv2__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-right: 8px;
}
.scv2:not(.is-open) .scv2__previews { display: none; }
.scv2__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: #f2f0ec;
  color: #3a3630;
  font-size: 12.5px;
}
.scv2__chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.scv2__chip-remove {
  border: none;
  background: transparent;
  color: #6b6560;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 50%;
}
.scv2__chip-remove:hover { color: #1f1c17; background: rgba(0, 0, 0, 0.06); }
.scv2__composer:focus-within {
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 0.78) inset,
    0 -0.5px 0 rgba(0, 0, 0, 0.07) inset,
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 14px 44px rgba(30, 24, 16, 0.2),
    0 2px 6px rgba(30, 24, 16, 0.09);
}
.scv2__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--scv2-font);
  font-size: 14.84px;
  color: #1f1c17;
  background: transparent;
  min-width: 0;
  padding: 0;
}
.scv2__input::placeholder { color: #9c968b; }

/* ============ Gemini-stijl denk-animatie op de chatbalk ============
   Een gekleurde lichtband loopt langs de rand van de balk zolang Sophie
   nadenkt. Drie regels bepalen de opbouw:

   1. GEEN conic-gradient. Een conic-gradient verdeelt kleur per hoek vanuit
      het midden, en op een balk van 608x46 zit bijna het hele hoekbereik op
      de lange boven- en onderrand: de kleuren proppen zich samen in het
      midden en rekken uit aan de uiteinden, waardoor het lijkt of maar een
      deel van de balk oplicht. Daarom een horizontale linear-gradient die
      met background-position langs de balk schuift: elke x-positie krijgt
      kleur, dus de hele balk licht op en het licht stroomt zichtbaar door.
   2. Het licht komt NOOIT op de balk zelf, alleen erbuiten (zie de mask op
      .scv2__glow).
   3. Geen harde randen: de blur staat op de wrapper, niet op de ringen.

   Eén cyclus duurt 2.4s; meestal 1.2-2s zichtbaar (THINK_MIN_MS in de JS).
   Kleuren: Gemini-palet blauw -> paars -> roze -> oranje en terug. Het
   palet is symmetrisch zodat de band naadloos doorloopt bij het herhalen. */
.scv2__composer {
  position: relative;
  /* Radius van de balk als variabele, zodat elke glow-ring dezelfde pilvorm
     kan aanhouden op zijn eigen afstand naar buiten. */
  --scv2-bar-r: calc(var(--scv2-bar-h) / 2);
  /* Lengte van één kleurcyclus. Moet gelijk zijn aan background-size en aan
     de verschuiving in @keyframes scv2-glow-pan, anders springt de band. */
  --scv2-glow-period: 660px;
  --scv2-glow-sweep: linear-gradient(
    90deg,
    #4285f4 0px,
    #9b72cb 120px,
    #d96570 245px,
    #f2a93b 330px,
    #d96570 415px,
    #9b72cb 540px,
    #4285f4 660px
  );
}
.scv2__composer--has-files { --scv2-bar-r: 22px; }

.scv2__glow {
  position: absolute;
  inset: -28px;
  border-radius: calc(var(--scv2-bar-r) + 28px);
  /* De padding is exact de afstand tot de balk, dus de content-box krijgt
     dezelfde pilvorm als de balk zelf (radius = bar-r + 28 - 28 = bar-r).
     Die content-box snijden we hieronder weg. */
  padding: 28px;
  pointer-events: none;
  opacity: 0;
  filter: blur(5px);
  /* Het licht mag NOOIT op de balk zelf komen, alleen erbuiten. mask wordt
     ná filter toegepast, dus dit kapt ook de wazige uitloop netjes af op de
     rand van de balk. De ringen mogen daardoor gerust tot iets binnen de rand
     lopen: dat houdt de glow feller precies tegen de balk aan. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity 0.34s ease;
}

/* De twee ringen delen alles behalve hun breedte en afstand tot de balk.
   background-size == de kleurcyclus, zodat het tegelen naadloos is. */
.scv2__glow::before,
.scv2__glow::after {
  content: "";
  position: absolute;
  background: var(--scv2-glow-sweep);
  background-size: var(--scv2-glow-period) 100%;
  background-repeat: repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: scv2-glow-pan 2.4s linear infinite;
  animation-play-state: paused;
}

/* Brede zachte band: van ~7px buiten de balk tot ~1px erbinnen. */
.scv2__glow::before {
  inset: 21px;
  border-radius: calc(var(--scv2-bar-r) + 7px);
  padding: 8px;
  opacity: 0.55;
}

/* Felle kern, strak op de rand van de balk. */
.scv2__glow::after {
  inset: 26px;
  border-radius: calc(var(--scv2-bar-r) + 2px);
  padding: 3px;
}

/* Actief: korte fade-in, wat tragere fade-out. */
.scv2--thinking .scv2__glow {
  opacity: 0.95;
  transition-duration: 0.18s;
}
.scv2--thinking .scv2__glow::before,
.scv2--thinking .scv2__glow::after {
  animation-play-state: running;
}

@keyframes scv2-glow-pan {
  to { background-position-x: var(--scv2-glow-period); }
}

@media (prefers-reduced-motion: reduce) {
  .scv2__glow::before,
  .scv2__glow::after {
    animation: none;
  }
}

.scv2__icon-btn {
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
  color: #3a3630;
  overflow: hidden;
  transition: background 160ms ease, width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}
.scv2__icon-btn:hover { background: rgba(0, 0, 0, 0.06); }
.scv2__icon-btn:focus-visible { outline: 2px solid #1f1c17; outline-offset: 2px; }
.scv2__icon-btn:disabled { opacity: 0.35; cursor: default; }
.scv2__mic-btn:active,
.scv2__mic-btn.is-recording {
  background: #1f1c17;
  color: #fff;
}
.scv2__mic-btn:active:not(.scv2__call-fab),
.scv2__mic-btn.is-recording:not(.scv2__call-fab) {
  animation: none;
}
.scv2__call-fab {
  width: 44px;
  height: 44px;
  color: var(--scv2-text-on-glass);
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 4px 14px rgba(0, 0, 0, 0.12);
  transition: background 160ms ease, color 160ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scv2__call-fab:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.15);
}
.scv2__call-fab:active {
  background: #1f1c17;
  color: #fff;
  transform: scale(0.96);
}
.scv2__call-fab.is-recording {
  background: #1f1c17;
  color: #fff;
  animation: scv2-call-fab-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scv2__call-fab.is-recording:hover,
.scv2__call-fab.is-recording:active {
  background: #1f1c17;
  color: #fff;
  transform: none;
}
@keyframes scv2-call-fab-in {
  from { opacity: 0; transform: scale(0.55); }
  70%  { opacity: 1; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============ Live voice-gesprek: centrale audio-reactieve bol ============ */
.scv2__voice-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  /* Geen extra glaslaag: zelfde paneel-achtergrond als de tekstchat */
  background: transparent;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.scv2__voice-overlay.is-active { display: flex; opacity: 1; }
.scv2__messages-stage:has(.scv2__voice-overlay.is-active) .scv2__messages {
  visibility: hidden;
  pointer-events: none;
}
.scv2__messages-stage:has(.scv2__voice-overlay.is-active) .scv2__call-fab {
  /* Blijft zichtbaar om op te hangen / opnieuw te bellen */
  z-index: 3;
}
.scv2__voice-orb {
  --voice-level: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 48px rgba(255, 255, 255, 0.28);
  transform: scale(calc(0.88 + var(--voice-level, 0) * 0.55));
  transition: transform 70ms ease-out;
  animation: none;
  will-change: transform;
}
.scv2__voice-bar {
  display: none;
  width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 999px;
  background: #fff;
  flex-shrink: 0;
  will-change: height;
  transition: none;
}

/* UI-only: staafjes wanneer Sophie hoorbaar spreekt */
.scv2__voice-orb--bars {
  width: auto;
  height: 110px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  gap: 9px;
}
.scv2__voice-orb--bars .scv2__voice-bar {
  display: block;
}

.scv2__voice-overlay--error .scv2__voice-orb {
  background: rgba(255, 255, 255, 0.55);
  transform: scale(1);
}
.scv2__voice-overlay--error .scv2__voice-orb--bars {
  background: none;
}

.scv2__voice-status {
  margin: 0;
  font-size: 13px;
  color: var(--scv2-text-on-glass);
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .scv2__voice-orb,
  .scv2__voice-bar { transition: none; }
}

.scv2__send {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #ebebeb;
  color: #7d7d7d;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 180ms ease, color 180ms ease, transform 120ms ease;
}
.scv2__send.active { background: #1f1c17; color: #fff; }
.scv2__send.active:active { transform: scale(0.92); }
.scv2__send:focus-visible { outline: 2px solid #1f1c17; outline-offset: 2px; }
.scv2__send[disabled] { cursor: default; opacity: 0.7; }

/* ============ Mobiel ============ */
@media (max-width: 640px) {
  .scv2 {
    --scv2-panel-w: calc(100vw - 16px);
    /* svh = stabiele viewport: geen herschalen bij browser-chrome / toetsenbord */
    --scv2-panel-h: calc(100svh - 96px);
    --scv2-bar-h: 44px;
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
    gap: 9.6px;
  }
  .scv2.scv2--left { padding-left: 14px; }
  .scv2.scv2--right { padding-right: 14px; }
  .scv2__panel {
    border-radius: 22px;
    width: var(--scv2-panel-w);
    height: var(--scv2-panel-h);
    max-height: var(--scv2-panel-h);
    transition: none;
  }
  .scv2__header {
    padding: 16px 18px 10px 18px;
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
  .scv2__header.is-dragging { cursor: grabbing; }
  .scv2__messages { padding: 6px 18px 60px 18px; }
  .scv2__call-fab { right: 12px; bottom: 10px; }
  .scv2:not(.is-open) .scv2__composer { width: min(208px, 57.6vw); }
  .scv2:not(.is-open) .scv2__composer:hover { width: min(286px, 79.2vw); }
  .scv2__composer { padding-left: 20px; }
  .scv2__input { font-size: 16px; }
  .scv2__msg--user { max-width: 84%; }
  .scv2__msg--bot { max-width: 100%; }
  .scv2__menu { width: min(400px, calc(100vw - 32px)); }

  /* Geen ruimte om te verbreden: kaart/mail komt boven het gesprek te staan */
  .scv2__panel--melding,
  .scv2__panel--mail,
  .scv2__panel--afspraak,
  .scv2__panel--eloket,
  .scv2__panel--perceel { width: var(--scv2-panel-w); }
  .scv2__body { flex-direction: column; }
  .scv2__mappane,
  .scv2__mailpane,
  .scv2__eloketpane,
  .scv2__agendapane,
  .scv2__perceelpane { margin: 12px 12px 0 12px; }
  .scv2__panel--melding .scv2__mappane { flex: 0 0 min(30vh, 220px); }
  .scv2__panel--mail .scv2__mailpane { flex: 0 0 min(46vh, 320px); }
  .scv2__panel--eloket .scv2__eloketpane { flex: 0 0 min(38vh, 260px); }
  .scv2__panel--afspraak .scv2__agendapane { flex: 0 0 min(46vh, 330px); }
  .scv2__panel--perceel .scv2__perceelpane { flex: 0 0 min(38vh, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  .scv2__panel.is-opening,
  .scv2__panel.is-closing,
  .scv2__msg { animation-duration: 1ms !important; }
  .scv2__panel { transition: none !important; }
  .scv2__map-success,
  .scv2__mail-success,
  .scv2__map-success-circle,
  .scv2__mail-success-circle,
  .scv2__map-success-path,
  .scv2__mail-success-path,
  .scv2__ag-success { transition: none !important; animation-duration: 1ms !important; }
  .scv2__eloketpane::before,
  .scv2__eloket-btn { transition: none !important; }
  .scv2__ag-stage,
  .scv2__ag-anim,
  .scv2__ag-day,
  .scv2__ag-slot,
  .scv2__ag-back,
  .scv2__ag-cta,
  .scv2__ag-dot,
  .scv2__ag-rail-fill,
  .scv2__ag-main,
  .scv2__ag-peek { transition: none !important; }
  .scv2__typing i { animation: none; }
  .scv2__composer,
  .scv2__icon-btn { transition: none !important; }
  .scv2__w { transition: none !important; opacity: 1 !important; }
  .scv2__bar-enter {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .scv2__email { animation: none !important; }
  .scv2__email-opened { animation: none !important; }
}

/* Direct contact — e-mailcomposer */
.scv2__email {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e8e2d6;
  background: #fff;
  box-shadow: 0 4px 18px rgba(31, 28, 23, 0.06);
  padding: 0;
  overflow: hidden;
  animation: scv2-email-enter 0.45s cubic-bezier(0.22, 1, 0.32, 1) both;
}
.scv2__email-subjrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #efe9dd;
}
.scv2__email-subjlabel {
  flex: none;
  font-size: 12.5px;
  color: #8e887c;
}
.scv2__email-subject {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #1f1c17;
  padding: 0;
  outline: none;
}
.scv2__email-body {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: #1f1c17;
  padding: 12px 14px;
  min-height: 140px;
  resize: vertical;
  outline: none;
}
.scv2__email-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 12px;
}
.scv2__email-recipient {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #8e887c;
}
/* Oude (uit localStorage herstelde) kaarten hadden de padding op de kaart zelf */
.scv2__email-form,
.scv2__email-meta,
.scv2__email-to {
  margin-left: 12px;
  margin-right: 12px;
}
.scv2__email-meta { padding-top: 12px; }
.scv2__email-form { padding-bottom: 14px; }
.scv2__email.is-sent { min-height: 180px; position: relative; }
@keyframes scv2-email-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.scv2__email-meta {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8e887c;
}
.scv2__email-to {
  margin: 0 0 10px;
  font-size: 13px;
  color: #1f1c17;
  word-break: break-all;
}
.scv2__email-label {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: #8e887c;
}
.scv2__email-input,
.scv2__email-textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  border-radius: 10px;
  border: 1px solid #e8e2d6;
  background: #faf9f7;
  color: #1f1c17;
  padding: 8px 10px;
  outline: none;
}
.scv2__email-input:focus,
.scv2__email-textarea:focus {
  border-color: #c9c0b0;
  box-shadow: 0 0 0 3px rgba(31, 28, 23, 0.08);
}
.scv2__email-textarea {
  min-height: 110px;
  resize: vertical;
  margin-bottom: 10px;
}
.scv2__email-actions {
  display: flex;
  justify-content: flex-end;
}
.scv2__email-send {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: #1f1c17;
  color: #fff;
}
.scv2__email-send:hover:not(:disabled) { opacity: 0.9; }
.scv2__email-send:disabled { opacity: 0.55; cursor: not-allowed; }
.scv2__email-form {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.scv2__email.is-sent .scv2__email-form {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 12px;
}
.scv2__email-sent {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px 12px 16px;
}
.scv2__email.is-sent .scv2__email-sent { display: flex; }
.scv2__email-sent-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ecfdf5;
  border: 1px solid rgba(16, 185, 129, 0.35);
  display: grid;
  place-items: center;
  color: #059669;
}
.scv2__email-sent-icon svg { width: 24px; height: 24px; }
.scv2__email-sent-text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1f1c17;
}
.scv2__email-sent-sub {
  margin: 0;
  font-size: 12px;
  color: #8e887c;
  line-height: 1.45;
}
.scv2__email-opened {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 14px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #059669;
  line-height: 1.45;
}
.scv2__email.is-opened .scv2__email-opened {
  display: flex;
  animation: scv2-email-enter 0.3s ease both;
}
.scv2__email-opened-icon {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
}
.scv2__email-opened-icon svg {
  width: 16px;
  height: 16px;
}