.ella-root {
  --ds-forest: #0d4632;
  --ds-forest-deep: #062a1d;
  --ds-yellow: #fcd200;
  --ds-cream: #f4ecdb;

  --ds-forest-rgb: 13, 70, 50;
  --ds-shadow-rgb: 6, 42, 29;
  --ds-yellow-rgb: 252, 210, 0;
  --ella-bg: #faf8f4;
  --ella-card: #ffffff;
  --ella-text: #1a2922;
  --ella-muted: #5b665f;
  --ella-border: rgba(var(--ds-forest-rgb), 0.12);
  --ella-display: 'Fraunces', Georgia, serif;
  --ella-body: 'Inter', system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ella-shadow-sm: 0 1px 2px rgba(var(--ds-shadow-rgb), 0.05), 0 4px 12px rgba(var(--ds-shadow-rgb), 0.07);
  --ella-shadow-md: 0 2px 6px rgba(var(--ds-shadow-rgb), 0.06), 0 12px 32px rgba(var(--ds-shadow-rgb), 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .ella-root *, .ella-root *::before, .ella-root *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.ella-root *,
.ella-root *::before,
.ella-root *::after {
  box-sizing: border-box;
}

.ella-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9001;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--ds-forest) 0%, var(--ds-forest-deep) 100%);
  box-shadow: 0 10px 30px rgba(var(--ds-shadow-rgb), 0.4), 0 0 0 1px rgba(var(--ds-yellow-rgb), 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out);
  animation: ellaPop 0.55s var(--ease-spring) backwards;
}
.ella-bubble:hover {
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 18px 44px rgba(var(--ds-shadow-rgb), 0.5), 0 0 0 2px rgba(var(--ds-yellow-rgb), 0.4);
}
.ella-bubble:active { transform: scale(0.94); }
.ella-bubble-open, .ella-bubble-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-spring);
}
.ella-bubble svg { width: 28px; height: 28px; color: var(--ds-cream); }
.ella-bubble .ella-bubble-close { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.ella-root.open .ella-bubble .ella-bubble-open { opacity: 0; transform: rotate(90deg) scale(0.5); }
.ella-root.open .ella-bubble .ella-bubble-close { opacity: 1; transform: rotate(0) scale(1); }
@keyframes ellaPop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }

.ella-panel {
  position: fixed;
  bottom: 100px;
  right: 24px;
  z-index: 9000;
  width: 410px;
  max-width: calc(100vw - 32px);
  height: 740px;
  max-height: calc(100vh - 100px);
  background: var(--ella-bg);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(var(--ds-shadow-rgb), 0.28), 0 0 0 1px rgba(var(--ds-forest-rgb), 0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out), transform 0.44s var(--ease-out);
  font-family: var(--ella-body);
  will-change: transform, opacity;
}
.ella-root.open .ella-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ella-header {
  background: linear-gradient(135deg, var(--ds-forest) 0%, var(--ds-forest-deep) 100%);
  color: var(--ds-cream);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ella-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ella-avatar-bg, rgba(244, 236, 219, 0.12));
  border: 1px solid rgba(var(--ds-yellow-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.ella-avatar img { width: 100%; height: 100%; object-fit: var(--ella-avatar-fit, cover); }
.ella-headtext { line-height: 1.25; flex: 1; min-width: 0; }
.ella-headtext .ella-name {
  font-family: var(--ella-display);
  font-size: 18px;
  font-weight: 500;
}
.ella-headtext .ella-sub {
  font-size: 12px;
  opacity: 0.72;
}
.ella-header-actions { display: flex; align-items: center; gap: 2px; }
.ella-header-close,
.ella-header-expand,
.ella-header-reload {
  background: transparent;
  border: none;
  color: var(--ds-cream);
  opacity: 0.8;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  transition: opacity 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.2s var(--ease-spring);
}
.ella-header-close:hover,
.ella-header-expand:hover,
.ella-header-reload:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.ella-header-close:active,
.ella-header-expand:active,
.ella-header-reload:active { transform: scale(0.9); }
.ella-header-close svg,
.ella-header-expand svg,
.ella-header-reload svg { width: 18px; height: 18px; }
.ella-header-reload svg { transition: transform 0.5s var(--ease-out); }
.ella-header-reload:hover svg { transform: rotate(-180deg); }

.ella-messages {
  flex: 1;
  position: relative;
  overflow-y: auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.ella-messages::-webkit-scrollbar { width: 7px; }
.ella-messages::-webkit-scrollbar-thumb { background: rgba(var(--ds-forest-rgb), 0.18); border-radius: 4px; }

.ella-messages > * { flex-shrink: 0; }

.ella-msg {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

@keyframes ellaMsgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ella-msg.bot {
  align-self: flex-start;
  background: var(--ella-card);
  color: var(--ella-text);
  border: 1px solid var(--ella-border);
  border-bottom-left-radius: 6px;
  box-shadow: var(--ella-shadow-sm);
  animation: ellaBotIn 0.42s var(--ease-out) both;
}
.ella-msg.user {
  align-self: flex-end;
  background: var(--ds-forest);
  color: var(--ds-cream);
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 12px rgba(var(--ds-shadow-rgb), 0.2);
  animation: ellaUserIn 0.42s var(--ease-out) both;
}
@keyframes ellaBotIn {
  from { opacity: 0; transform: translate(-10px, 6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes ellaUserIn {
  from { opacity: 0; transform: translate(14px, 4px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.ella-msg.bot strong { color: var(--ds-forest); }
.ella-msg a { color: var(--ds-forest); font-weight: 600; }

.ella-typing {
  align-self: flex-start;
  background: var(--ella-card);
  border: 1px solid var(--ella-border);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  /* De wachtstatus wisselt van tekst in dezelfde bubbel. De hoogte ligt VAST (zie de
     tweeregelige reservering op .ella-typing-note): een langere status mag wikkelen zonder
     dat de bubbel groeit, dus er verspringt niets tijdens het wachten. De volle breedte
     gebruiken houdt de meeste statussen sowieso op één regel. */
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  overflow-anchor: none;
}
.ella-typing span {
  width: 7px; height: 7px;
  flex: 0 0 auto; /* nooit platgedrukt worden door een lange statustekst */
  background: rgba(var(--ds-forest-rgb), 0.4);
  border-radius: 50%;
  animation: ellaBounce 1.3s infinite ease-in-out;
}
.ella-typing span:nth-child(2) { animation-delay: 0.16s; }
.ella-typing span:nth-child(3) { animation-delay: 0.32s; }
.ella-typing-note {
  font-style: normal; font-size: 12px; color: var(--ella-muted);
  margin-left: 4px; align-self: center;
  line-height: 18px;
  min-width: 0; /* mag wikkelen i.p.v. de bolletjes weg te duwen */
  display: flex;
  align-items: center;
  transition: opacity 0.16s var(--ease-out);
}
.ella-typing-note:empty { margin-left: 0; }
/* Ruimte voor een tweede regel reserveren we ENKEL op zeer smalle telefoons. Gemeten met de
   echte lettertypes: vanaf 360px past elke status van elke taal op één regel — ook de
   fotovariant — en dan zou een vaste tweeregelige bubbel enkel 18px log staan. Onder 360px
   wikkelt de langste status wél (bij de fotovariant vreet de foto de ruimte op), en zonder
   deze reservering sprong de indicator daar van 46px naar 64px tijdens het wachten. */
@media (max-width: 360px) {
  .ella-typing-note { min-height: 36px; }
}

.ella-typing-wrap {
  align-self: flex-start; display: flex; align-items: center;
  max-width: 100%; overflow-anchor: none;
}
.ella-typing-wrap .ella-typing { max-width: none; min-width: 0; }
.ella-typing-wrap .ella-typing-photo {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: block;
  margin-right: -14px; position: relative; z-index: 2;
  box-shadow: 0 1px 5px rgba(20,16,40,0.18);
  animation: ellaPhotoBob 1.6s ease-in-out infinite;
}
.ella-typing-wrap .ella-typing { padding-left: 22px; }
@keyframes ellaPhotoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.ella-timing {
  align-self: center;
  font-size: 11px;
  color: var(--ella-muted);
  opacity: 0.85;
  margin: -2px 0 2px;
  letter-spacing: 0.02em;
  user-select: none;
  animation: ellaTimingIn 0.3s ease both;
}
@keyframes ellaTimingIn { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes ellaBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.ella-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 7px;
  align-items: flex-start;
  margin: 2px 0 4px;
}
.ella-qr {
  background: var(--ella-card);
  color: var(--ds-forest);
  border: 1.5px solid rgba(var(--ds-forest-rgb), 0.22);
  padding: 9px 15px;
  border-radius: 100px;
  font-family: var(--ella-body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(var(--ds-shadow-rgb), 0.04);
  transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out),
    border-color 0.22s var(--ease-out), transform 0.26s var(--ease-spring), box-shadow 0.26s var(--ease-out);
  animation: ellaQrIn 0.42s var(--ease-out) backwards;
}
.ella-qr:hover {
  background: var(--ds-forest);
  color: var(--ds-cream);
  border-color: var(--ds-forest);
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(var(--ds-shadow-rgb), 0.22);
}
.ella-qr:active { transform: translateY(0) scale(0.97); }
@keyframes ellaQrIn { from { opacity: 0; transform: translateY(9px) scale(0.96); } to { opacity: 1; transform: none; } }
.ella-buttons .ella-qr:nth-child(1) { animation-delay: 0.02s; }
.ella-buttons .ella-qr:nth-child(2) { animation-delay: 0.07s; }
.ella-buttons .ella-qr:nth-child(3) { animation-delay: 0.12s; }
.ella-buttons .ella-qr:nth-child(4) { animation-delay: 0.17s; }
.ella-buttons .ella-qr:nth-child(5) { animation-delay: 0.22s; }
.ella-buttons .ella-qr:nth-child(n+6) { animation-delay: 0.27s; }
.ella-buttons.disabled .ella-qr { opacity: 0.45; pointer-events: none; }

.ella-qr-ico { display: inline-flex; vertical-align: -2px; margin-right: 7px; }
.ella-qr-ico svg { width: 14px; height: 14px; display: block; }

.ella-qr.leaving,
.ella-qr.chosen {
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  opacity: 0;
  pointer-events: none;
}
.ella-qr.leaving { transform: scale(0.82) translateY(-4px); }
.ella-qr.chosen { transform: scale(0.92); }

.ella-checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 0 2px;
  align-items: flex-start;
  max-width: 88%;
  animation: ellaQrIn 0.42s var(--ease-out) backwards;
}
.ella-checks-list { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.ella-check {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--ella-card);
  color: var(--ds-forest);
  border: 1.5px solid rgba(var(--ds-forest-rgb), 0.22);
  padding: 9px 14px;
  border-radius: 13px;
  font-family: var(--ella-body);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 2px rgba(var(--ds-shadow-rgb), 0.04);
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), transform 0.2s var(--ease-spring);
}
.ella-check:hover { border-color: rgba(var(--ds-forest-rgb), 0.5); transform: translateY(-1px); }
.ella-check.checked { border-color: var(--ds-forest); background: rgba(var(--ds-forest-rgb), 0.06); }
.ella-check-box {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  border-radius: 6px;
  border: 1.5px solid rgba(var(--ds-forest-rgb), 0.4);
  background: #fff;
  position: relative;
  transition: background 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.ella-check.checked .ella-check-box { background: var(--ds-forest); border-color: var(--ds-forest); }
.ella-check.checked .ella-check-box::after {
  content: '';
  position: absolute; left: 5.5px; top: 2px;
  width: 5px; height: 9px;
  border: solid var(--ds-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ella-check-label { line-height: 1.3; }
.ella-checks-done {
  align-self: flex-start;
  margin-top: 3px;
  background: var(--ds-forest);
  color: var(--ds-cream);
  border: none;
  padding: 9px 24px;
  border-radius: 100px;
  font-family: var(--ella-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(var(--ds-forest-rgb), 0.25);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.22s var(--ease-out);
}
.ella-checks-done:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(var(--ds-forest-rgb), 0.3); }
.ella-checks-done:active { transform: translateY(0) scale(0.97); }

.ella-cards {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  margin: 2px -2px 4px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}
.ella-cards::-webkit-scrollbar { height: 6px; }
.ella-cards::-webkit-scrollbar-thumb { background: rgba(var(--ds-forest-rgb), 0.2); border-radius: 4px; }
.ella-card {
  flex: 0 0 218px;
  scroll-snap-align: start;
  background: var(--ella-card);
  border: 1px solid var(--ella-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ella-shadow-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  animation: ellaCardIn 0.5s var(--ease-out) backwards;
}
.ella-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--ds-forest-rgb), 0.2);
}
@keyframes ellaCardIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.ella-cards .ella-card:nth-child(1) { animation-delay: 0.04s; }
.ella-cards .ella-card:nth-child(2) { animation-delay: 0.12s; }
.ella-cards .ella-card:nth-child(3) { animation-delay: 0.2s; }
.ella-cards .ella-card:nth-child(n+4) { animation-delay: 0.28s; }
.ella-card-img {
  width: 100%;

  height: var(--ella-card-img-height, 130px);
  flex-shrink: 0;
  object-fit: var(--ella-card-img-fit, cover);
  background: #e7e0d4;
  display: block;
  transition: transform 0.45s var(--ease-out);
}
.ella-card:hover .ella-card-img { transform: scale(1.06); }

.ella-card--photo { flex-basis: 248px; }
.ella-card--photo .ella-card-img { height: auto; max-height: none; object-fit: contain; }
.ella-card--photo:hover .ella-card-img { transform: none; }
.ella-card-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ella-card-title {
  font-family: var(--ella-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ds-forest);
  line-height: 1.25;
}
.ella-card-desc { font-size: 12px; color: var(--ella-muted); line-height: 1.45; flex: 1; }
.ella-card-link {
  margin-top: 10px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-forest);
  text-decoration: none;
  padding: 10px 12px;
  border: 1.5px solid var(--ds-forest);
  border-radius: 9px;
  transition: all 0.2s ease;
}
.ella-card-link:hover {
  background: var(--ds-forest);
  color: var(--ds-cream);
  box-shadow: 0 3px 12px rgba(var(--ds-shadow-rgb), 0.25);
}

.ella-card--property { flex-basis: 234px; }
.ella-card--property .ella-pc-media { position: relative; cursor: pointer; overflow: hidden; }
.ella-card--property .ella-card-img { height: 152px; object-fit: cover; }
.ella-pc-media .ella-pc-flag {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  background: var(--ds-forest); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.02em; padding: 4px 9px; border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18); text-transform: uppercase;
}
.ella-pc-media .ella-pc-flag.ohd { background: #c8102e; text-transform: none; }
.ella-pc-media .ella-pc-count {
  position: absolute; bottom: 9px; right: 9px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,16,30,0.74); color: #fff; padding: 6px; border-radius: 9px; backdrop-filter: blur(3px);
}
.ella-pc-media .ella-pc-count svg { width: 15px; height: 15px; }
.ella-pc-media .ella-pc-zoom {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transition: opacity 0.25s ease; background: rgba(20,16,30,0.28); z-index: 1;
}
.ella-pc-media .ella-pc-zoom svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.ella-card--property:hover .ella-pc-zoom { opacity: 1; }

.ella-pc-media { position: relative; cursor: pointer; overflow: hidden; }
.ella-card:hover .ella-pc-zoom { opacity: 1; }
.ella-pc-price { font-family: var(--ella-display); font-size: 17px; font-weight: 700; color: var(--ella-text); letter-spacing: -0.01em; }
.ella-pc-title {
  font-size: 13px; font-weight: 600; color: var(--ella-muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ella-pc-specs { display: flex; flex-wrap: wrap; gap: 5px 8px; font-size: 11.5px; color: var(--ella-text); margin-top: 1px; }
.ella-pc-specs span { display: inline-flex; align-items: center; gap: 3px; background: rgba(var(--ds-forest-rgb), 0.07); padding: 3px 8px; border-radius: 7px; }
.ella-pc-specs span.epc { background: rgba(var(--ds-forest-rgb), 0.12); font-weight: 600; }
.ella-pc-loc { font-size: 11.5px; color: var(--ella-muted); line-height: 1.35; }

/* ── Woningdoorlichting (ERA) ─────────────────────────────
   Eén brede kaart: marktpositie-balk + foto-observaties + troeven/aandachtspunten.
   Enkel actief op cards met `review: true` → andere tenants raken dit nooit. */
.ella-card--review { flex: 1 1 auto; max-width: 100%; min-width: 0; }
.ella-card--review .ella-card-img { height: 168px; object-fit: cover; }
.ella-card--review .ella-card-body { gap: 9px; }
.ella-rv-badge {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  background: var(--ds-forest); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.03em; padding: 4px 10px; border-radius: 100px; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.ella-rv-sec { border-top: 1px solid var(--ella-border); padding-top: 9px; margin-top: 2px; }
.ella-rv-h {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ds-forest); margin-bottom: 6px;
}
.ella-rv-n { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ella-muted); }
/* Marktpositie-balk: links goedkoop → rechts duur, met de positie van dít pand */
.ella-rv-bar {
  position: relative; height: 7px; border-radius: 100px; margin: 3px 0 4px;
  background: linear-gradient(90deg, rgba(var(--ds-forest-rgb), 0.5) 0%, rgba(var(--ds-forest-rgb), 0.16) 50%, rgba(200, 16, 46, 0.42) 100%);
}
.ella-rv-dot {
  position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%;
  background: var(--ds-forest); border: 2.5px solid var(--ella-card); transform: translate(-50%, -50%);
  box-shadow: 0 2px 7px rgba(var(--ds-shadow-rgb), 0.4);
}
.ella-rv-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--ella-muted); font-weight: 600; }
.ella-rv-mtext { font-size: 12px; color: var(--ella-text); line-height: 1.45; margin-top: 5px; }
.ella-rv-sfeer { font-size: 12.5px; font-style: italic; color: var(--ella-text); line-height: 1.5; margin-bottom: 6px; }
.ella-rv-rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ella-rv-rooms li { font-size: 11.5px; color: var(--ella-muted); line-height: 1.45; }
.ella-rv-rooms li b { color: var(--ella-text); font-weight: 600; text-transform: capitalize; }
.ella-rv-cols { display: flex; flex-wrap: wrap; gap: 10px 18px; border-top: 1px solid var(--ella-border); padding-top: 9px; }
.ella-rv-col { flex: 1 1 150px; min-width: 0; }
.ella-rv-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ella-rv-col li { display: flex; gap: 6px; font-size: 11.5px; color: var(--ella-text); line-height: 1.4; }
.ella-rv-col li span {
  flex: 0 0 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 9px; font-weight: 800; margin-top: 1px;
}
.ella-rv-col.plus li span { background: rgba(var(--ds-forest-rgb), 0.14); color: var(--ds-forest); }
.ella-rv-col.min .ella-rv-h { color: #b3122c; }
.ella-rv-col.min li span { background: rgba(200, 16, 46, 0.13); color: #b3122c; }

/* ── Selectiekaart (ERA): link naar de persoonlijke selectiepagina ── */
.ella-card--selection { flex: 1 1 auto; max-width: 100%; min-width: 0; }
.ella-sel-title { font-family: var(--ella-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ella-text); }
.ella-sel-thumbs { display: flex; gap: 5px; margin-top: 2px; }
.ella-sel-thumbs img { flex: 1 1 0; min-width: 0; height: 52px; object-fit: cover; border-radius: 8px; }
.ella-sel-desc { font-size: 12px; color: var(--ella-muted); line-height: 1.45; }
.ella-sel-cta {
  display: block; text-align: center; text-decoration: none; margin-top: 3px;
  background: var(--ds-forest); color: #fff; font-size: 13.5px; font-weight: 700;
  padding: 11px 16px; border-radius: 10px; box-shadow: 0 3px 12px rgba(var(--ds-forest-rgb), 0.28);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.ella-sel-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--ds-forest-rgb), 0.36); }

/* ── Vergelijkkaart (ERA) ───────────────────────────────── */
.ella-card--compare { flex: 1 1 auto; max-width: 100%; min-width: 0; }
.ella-cmp-wrap { overflow-x: auto; margin: 0 -2px; }
.ella-cmp { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ella-cmp th, .ella-cmp td { padding: 6px 5px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--ella-border); }
.ella-cmp thead th { vertical-align: bottom; padding-bottom: 8px; }
.ella-cmp thead a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: inherit; }
.ella-cmp thead img { width: 100%; max-width: 78px; height: 46px; object-fit: cover; border-radius: 8px; }
.ella-cmp-letter {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--ds-forest); color: #fff; font-size: 10px; font-weight: 800;
}
.ella-cmp-name {
  font-size: 10px; font-weight: 600; color: var(--ella-muted); line-height: 1.25; max-width: 82px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ella-cmp tbody th { text-align: left; font-weight: 600; color: var(--ella-muted); font-size: 10.5px; white-space: nowrap; }
.ella-cmp tbody td { color: var(--ella-text); font-weight: 600; }
.ella-cmp td.best { background: rgba(var(--ds-forest-rgb), 0.09); border-radius: 6px; color: var(--ds-forest); }
.ella-cmp td.yes { color: var(--ds-forest); font-size: 13px; }
.ella-cmp td.no { color: rgba(var(--ds-forest-rgb), 0.3); }
.ella-cmp tr.ella-cmp-sep th {
  padding-top: 11px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ds-forest); border-bottom: none;
}

.ella-card--agent { flex: 1 1 auto; max-width: 340px; min-width: 0; padding: 0; overflow: hidden; }

.ella-cards > .ella-card--agent:not(:only-child) { flex: 0 0 288px; }
.ella-agent { display: flex; flex-direction: column; gap: 14px; padding: 17px 18px; }
.ella-agent-head { display: flex; align-items: center; gap: 14px; }
.ella-agent-photo {
  width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%; object-fit: cover;
  background: #ece9f2; box-shadow: 0 3px 12px rgba(20,16,40,0.20); border: 2px solid #fff;
}
.ella-agent-photo--ph {
  display: flex; align-items: center; justify-content: center;
  background: #250e62; color: #fff; font-weight: 700; font-size: 28px; font-family: var(--ella-display);
}
.ella-agent-photo--icon { display: flex; align-items: center; justify-content: center; background: #c8102e; color: #fff; }
.ella-agent-photo--icon svg { width: 38px; height: 38px; }
.ella-agent-photo--logo { object-fit: contain; background: #fff; padding: 10px; }
.ella-agent-meta { min-width: 0; flex: 1 1 auto; }
.ella-agent-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: #c8102e; margin-bottom: 3px;
}
.ella-agent-name { font-family: var(--ella-display); font-size: 18px; font-weight: 700; color: var(--ella-text); line-height: 1.15; }
.ella-agent-office { font-size: 12.5px; color: var(--ella-muted); margin-top: 3px; }
.ella-agent-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.ella-agent-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 100px; white-space: nowrap;
  background: #c8102e; color: #fff; transition: filter 0.15s ease;
}
.ella-agent-btn:not(.ghost) { flex: 1 1 auto; }
.ella-agent-btn:hover { filter: brightness(1.07); }
.ella-agent-btn.ghost { background: transparent; color: #c8102e; border: 1px solid rgba(200,16,46,0.45); flex: 0 0 auto; }
.ella-agent-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

.ella-lightbox {
  position: fixed; inset: 0; z-index: 2147483600; display: none;
  align-items: center; justify-content: center; padding: 4vw;
  background: rgba(12,10,18,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ella-lightbox.open { display: flex; animation: ellaLbIn 0.2s ease; }
@keyframes ellaLbIn { from { opacity: 0; } to { opacity: 1; } }
.ella-lb-img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 60px rgba(0,0,0,0.5); }
.ella-lb-close, .ella-lb-nav {
  position: absolute; background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s ease;
}
.ella-lb-close { top: 18px; right: 18px; width: 44px; height: 44px; }
.ella-lb-close svg { width: 22px; height: 22px; }
.ella-lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.ella-lb-nav svg { width: 26px; height: 26px; }
.ella-lb-nav.prev { left: 16px; }
.ella-lb-nav.next { right: 16px; }
.ella-lb-close:hover, .ella-lb-nav:hover { background: rgba(255,255,255,0.26); }
.ella-lb-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(0,0,0,0.4); padding: 6px 14px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 8px;
}
.ella-lb-counter.loading::after {
  content: ''; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: ellaSpin 0.7s linear infinite;
}
@media (max-width: 768px) {
  .ella-lb-nav { width: 42px; height: 42px; }
  .ella-lb-nav.prev { left: 6px; } .ella-lb-nav.next { right: 6px; }
  .ella-lb-close { top: 10px; right: 10px; }
}

.ella-cta { margin: 6px 0 2px; }
.ella-cta-link { display: block; margin-top: 0; }

.ella-carousel { position: relative; margin: 2px 0 4px; }
.ella-carousel .ella-cards { margin: 0; }
.ella-arrow {
  position: absolute;
  top: 56px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 219, 0.3);
  background: var(--ds-forest);
  color: var(--ds-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(var(--ds-shadow-rgb), 0.5);
  z-index: 3;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ella-arrow:hover { background: var(--ds-forest-deep); transform: scale(1.12); }
.ella-arrow:active { transform: scale(0.96); }
.ella-arrow svg { width: 18px; height: 18px; }
.ella-arrow.prev { left: 2px; }
.ella-arrow.next { right: 2px; }
.ella-carousel--text.ella-carousel--controls { padding-bottom: 44px; }
.ella-carousel--text .ella-arrow { top: auto; bottom: 0; }
.ella-carousel--text .ella-arrow.prev { left: auto; right: 46px; }
.ella-carousel--text .ella-carousel-count { top: auto; bottom: 8px; right: 92px; }
.ella-carousel-count {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: none;
  background: rgba(var(--ds-shadow-rgb, 20, 20, 20), 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 100px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.ella-upload {
  background: var(--ella-card);
  border: 1px solid var(--ella-border);
  border-radius: 14px;
  padding: 14px;
  margin: 2px 0 6px;
  animation: ellaMsgIn 0.35s ease;
}
.ella-upload-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px;
  border: 2px dashed rgba(var(--ds-forest-rgb), 0.3);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ds-forest);
  transition: all 0.15s;
  text-align: center;
}
.ella-upload-label:hover { border-color: var(--ds-forest); background: #f3eee6; }
.ella-upload-label.disabled { opacity: 0.5; cursor: not-allowed; }
.ella-upload input[type=file] { display: none; }
.ella-upload-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ella-upload-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 12.5px; }
.ella-upload-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 7px; object-fit: cover; background: #fff; border: 1px solid var(--ella-border); }
.ella-upload-thumb.is-file { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; color: var(--ds-forest); background: #f3eee6; }
.ella-upload-meta { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
.ella-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ella-upload-ok { color: #0f5132; font-weight: 700; flex-shrink: 0; }
.ella-upload-item.uploading { background: #fef3c7; color: #92400e; }
.ella-upload-item.success { background: #d1e7dd; color: #0f5132; }
.ella-upload-item.error { background: #f8d7da; color: #842029; }
.ella-upload-spin { width: 13px; height: 13px; border: 2px solid #e8e0d4; border-top-color: #92400e; border-radius: 50%; animation: ellaSpin 0.8s linear infinite; flex-shrink: 0; }
@keyframes ellaSpin { to { transform: rotate(360deg); } }
.ella-upload-actions { display: flex; gap: 8px; margin-top: 12px; }
.ella-upload-btn { flex: 1; padding: 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; font-family: var(--ella-body); }
.ella-upload-btn.primary { background: var(--ds-forest); color: var(--ds-cream); }
.ella-upload-btn.primary:hover { background: var(--ds-forest-deep); }
.ella-upload-btn.primary:disabled { background: #b8c4bd; cursor: not-allowed; }
.ella-upload-btn.secondary { background: var(--ella-bg); color: var(--ella-muted); border: 1px solid var(--ella-border); }
.ella-upload-btn.secondary:hover { background: #ece6da; }

.ella-input {
  flex-shrink: 0;
  border-top: 1px solid var(--ella-border);
  background: var(--ella-card);
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.ella-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--ella-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: var(--ella-body);

  font-size: 16px;
  line-height: 1.4;
  max-height: 96px;
  outline: none;
  color: var(--ella-text);
  background: var(--ella-bg);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.ella-input textarea:focus { border-color: var(--ds-forest); box-shadow: 0 0 0 3px rgba(var(--ds-forest-rgb), 0.1); }
.ella-send {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  background: var(--ds-forest);
  color: var(--ds-cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease-out), transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-out);
}
.ella-send:hover { background: var(--ds-forest-deep); transform: translateY(-1px) scale(1.05); box-shadow: 0 6px 16px rgba(var(--ds-shadow-rgb), 0.25); }
.ella-send:active { transform: scale(0.92); }
.ella-send:disabled { background: #b8c4bd; cursor: not-allowed; transform: none; box-shadow: none; }
.ella-send svg { width: 18px; height: 18px; }

.ella-mic {
  width: 42px; height: 42px; flex-shrink: 0;
  border: 1px solid var(--ella-border);
  border-radius: 12px;
  background: var(--ella-bg);
  color: var(--ds-forest);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s;
}
.ella-mic:hover { background: var(--ds-forest); color: var(--ds-cream); border-color: var(--ds-forest); transform: translateY(-1px); }
.ella-mic:active { transform: scale(0.92); }
.ella-mic svg { width: 19px; height: 19px; }
.ella-mic.recording {
  background: #e0223b; border-color: #e0223b; color: #fff;
  animation: ellaMicPulse 1.3s ease-in-out infinite;
}
.ella-mic.recording svg { width: 15px; height: 15px; }
@keyframes ellaMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,34,59,0.45); }
  50% { box-shadow: 0 0 0 7px rgba(224,34,59,0); }
}
.ella-mic.processing {
  color: transparent; position: relative; cursor: wait; border-color: var(--ella-border); background: var(--ella-bg);
}
.ella-mic.processing::after {
  content: ''; position: absolute; width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid rgba(var(--ds-forest-rgb), 0.25); border-top-color: var(--ds-forest);
  animation: ellaSpin 0.7s linear infinite;
}
@keyframes ellaSpin { to { transform: rotate(360deg); } }

.ella-tts-btn {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: 7px; width: 24px; height: 24px;
  padding: 0; border: none; border-radius: 50%;
  background: rgba(var(--ds-forest-rgb), 0.08); color: var(--ds-forest);
  cursor: pointer; transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.ella-tts-btn:hover { background: rgba(var(--ds-forest-rgb), 0.18); transform: scale(1.08); }
.ella-tts-btn svg { width: 14px; height: 14px; }
.ella-tts-btn svg .w1, .ella-tts-btn svg .w2 { opacity: 0; transition: opacity 0.15s; }
.ella-tts-btn.speaking { background: var(--ds-forest); color: var(--ds-cream); }
.ella-tts-btn.speaking svg .w1 { opacity: 1; animation: ellaWave 1s ease-in-out infinite; }
.ella-tts-btn.speaking svg .w2 { opacity: 1; animation: ellaWave 1s ease-in-out 0.2s infinite; }
@keyframes ellaWave { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.ella-tts-btn.loading { color: transparent; position: relative; cursor: wait; }
.ella-tts-btn.loading svg { opacity: 0; }
.ella-tts-btn.loading::after {
  content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(var(--ds-forest-rgb), 0.3); border-top-color: var(--ds-forest);
  animation: ellaSpin 0.7s linear infinite;
}

@media (min-width: 521px) {
  .ella-input textarea { font-size: 13px; }
}

.ella-footer {
  text-align: center;
  font-size: 10.5px;
  color: var(--ella-muted);
  padding: 0 0 8px;
  background: var(--ella-card);
}

.ella-footer .ella-credit {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
.ella-footer .ella-credit:hover {
  opacity: 1;
}
.ella-footer .ella-credit--static { cursor: default; }
.ella-footer .ella-credit--static:hover { opacity: 0.92; }
.ella-footer .ella-credit-logo {
  height: 14px;
  width: auto;
  display: block;
}

.ella-proactive {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 8999;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--ella-card);
  color: var(--ella-text);
  border: 1px solid var(--ella-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--ella-shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.32s var(--ease-out), transform 0.4s var(--ease-spring);
  font-family: var(--ella-body);
}
.ella-proactive.show { opacity: 1; transform: translateY(0) scale(1); }
.ella-proactive-row { display: flex; gap: 10px; align-items: flex-start; }
.ella-proactive-avatar {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--ella-avatar-bg, var(--ds-forest));
}
.ella-proactive-avatar img { width: 100%; height: 100%; object-fit: var(--ella-avatar-fit, cover); }
.ella-proactive-text { font-size: 13.5px; line-height: 1.45; padding-right: 14px; }
.ella-proactive-close {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px;
  border: none; background: transparent; color: var(--ella-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
}
.ella-proactive-close:hover { background: rgba(var(--ds-forest-rgb), 0.08); }
.ella-proactive-close svg { width: 14px; height: 14px; }
.ella-proactive-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding-left: 40px; }
.ella-proactive-btn {
  background: var(--ella-card);
  color: var(--ds-forest);
  border: 1.5px solid rgba(var(--ds-forest-rgb), 0.22);
  border-radius: 100px;
  padding: 7px 13px;
  font-family: var(--ella-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.ella-proactive-btn:hover { background: var(--ds-forest); color: var(--ds-cream); border-color: var(--ds-forest); }

@media (max-width: 520px) {
  .ella-panel {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
  }

  .ella-header { padding-top: max(16px, env(safe-area-inset-top)); }
  .ella-input { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .ella-bubble { bottom: 18px; right: 18px; }

  .ella-root.open .ella-bubble { opacity: 0; pointer-events: none; transform: scale(0.6); }
  .ella-proactive { right: 18px; left: 18px; bottom: 84px; width: auto; max-width: none; }
}

/* ── Winkelmandje-acties op een productkaart ──────────────────────────────────
   Enkel zichtbaar wanneer de tenant een cart-config heeft (opt-in via /api/config)
   én de server cart-data aan de kaart hing. Voor alle andere bots verandert er niets. */
.ella-cart-actions {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  gap: 6px;
}
.ella-cart-actions .ella-cart-btn { flex: 1 1 0; min-width: 0; }
/* Past de tekst echt niet naast elkaar (smalle kaart, lange labels), dan pas stapelen. */
@media (max-width: 380px) {
  .ella-cart-actions { flex-direction: column; }
}
.ella-cart-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 8px;
  border-radius: 9px;
  border: 1.5px solid var(--ds-forest);
  background: var(--ds-forest);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.3;
}
.ella-cart-btn:hover { filter: brightness(1.08); }
.ella-cart-btn.ghost { background: transparent; color: var(--ds-forest); }
.ella-cart-btn.ghost:hover { background: rgba(var(--ds-forest-rgb), 0.08); }
.ella-cart-btn.done {
  background: transparent;
  border-color: rgba(var(--ds-forest-rgb), 0.4);
  color: var(--ds-forest);
  cursor: default;
}
.ella-cart-btn.done::before { content: "✓ "; }
.ella-cart-btn.failed {
  background: transparent;
  border-color: rgba(190, 60, 40, 0.5);
  color: #b83c28;
  font-weight: 500;
  cursor: default;
}
.ella-cart-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ella-muted);
}

/* ── Paneelhoogte: klein venster ⇄ volledige schermhoogte ────────────────────
   Opt-in via tenant.json → branding.panelHeight ("toggle" of "full"). Zonder die
   instelling krijgt een bot deze regels niet eens te zien en verandert er niets.

   Waarom BEIDE standen met `height` + `bottom` werken (en niet met `top`):
   je kan niet vloeiend animeren tussen `height: 740px` en `top: 16px` — dat is een
   sprong. Door in allebei de standen dezelfde twee eigenschappen te gebruiken,
   groeit het paneel echt vloeiend open vanaf de onderkant.

   Het paneel groeit ook in de BREEDTE mee. Bij 410px zie je anderhalve productkaart;
   bij 810px passen alle drie de kaarten naast elkaar (3 × 248px + 2 × 12px tussenruimte
   + 2 × 16px binnenmarge + 7px schuifbalk = 807px), zodat een heel voorstel in één blik
   te overzien is. Breedte animeert in dezelfde beweging mee, dus het blijft één vloeiende
   overgang — de tekst breekt daarbij eenmalig opnieuw af, dat hoort er nu eenmaal bij. */
.ella-root--resizable .ella-panel {
  transition:
    opacity 0.32s var(--ease-out),
    transform 0.44s var(--ease-out),
    width 0.42s var(--ease-io),
    max-width 0.42s var(--ease-io),
    height 0.42s var(--ease-io),
    max-height 0.42s var(--ease-io),
    bottom 0.42s var(--ease-io),
    border-radius 0.42s var(--ease-io);
}
.ella-root--full .ella-panel {
  bottom: 16px;
  height: calc(100dvh - 32px);
  max-height: calc(100dvh - 32px);
  /* Een kale lengte met een apart max-width-plafond: dat interpoleert in elke browser
     voorspelbaar, en op een smal venster knijpt max-width het paneel vanzelf terug. */
  width: 810px;
  max-width: calc(100vw - 48px);
}
/* Lange regels lezen slecht. De kaarten mogen de volle breedte benutten, de tekstbubbels
   niet: die blijven op een comfortabele regellengte. */
.ella-root--full .ella-msg { max-width: min(84%, 560px); }
/* Oudere browsers zonder dvh vallen terug op vh. */
@supports not (height: 100dvh) {
  .ella-root--full .ella-panel {
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
  }
}
/* De bubbel zou over het vergrote paneel vallen; hij verdwijnt zolang het open staat. */
.ella-root--full.open .ella-bubble {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
}
/* Het berichtenvenster groeit mee; de inhoud mag daarbij niet meeschuiven of knipperen. */
.ella-root--resizable .ella-messages {
  scroll-behavior: auto;
  overflow-anchor: none;
}
@media (prefers-reduced-motion: reduce) {
  .ella-root--resizable .ella-panel { transition: opacity 0.2s linear; }
}

/* Vergroot-/verkleinknop in de header — enkel zichtbaar als de bot panelHeight instelt.
   Het icoon wisselt tussen "uit elkaar" (vergroten) en "naar elkaar" (verkleinen). */
.ella-header-expand[hidden] { display: none; }
.ella-header-expand .ella-icon-collapse { display: none; }
.ella-header-expand.is-full .ella-icon-expand { display: none; }
.ella-header-expand.is-full .ella-icon-collapse { display: flex; }
.ella-header-expand span { display: flex; }
@media (max-width: 520px) {
  /* Mobiel vult het paneel sowieso het scherm — daar zegt de knop niets. */
  .ella-header-expand { display: none !important; }
  /* En dan mag een eerder gemaakte keuze (op een breed scherm, zelfde browser) het
     schermvullende paneel hier niet alsnog inkorten: die bewaarde stand wordt genegeerd. */
  .ella-root--full .ella-panel {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0;
  }
  .ella-root--full .ella-msg { max-width: 84%; }
}

/* Kleine bevestiging op de knop zelf: het icoon draait mee bij het schakelen. */
.ella-header-expand svg { transition: transform 0.42s var(--ease-spring); }
.ella-header-expand:hover svg { transform: scale(1.12); }
.ella-header-expand.is-full svg { transform: rotate(180deg); }
.ella-header-expand.is-full:hover svg { transform: rotate(180deg) scale(1.12); }


/* ── Rijkere productkaart: prijs vooraan, pluspunten als bullets ──────────────
   Enkel actief wanneer de server `price` en/of `bullets` meelevert. Kaarten zonder die
   velden (alle andere bots) renderen exact zoals voorheen. */
.ella-card-price {
  margin-top: 4px;
  font-family: var(--ella-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ds-forest-deep);
  letter-spacing: -0.01em;
}
.ella-card-pricenote {
  display: block;
  margin-top: 2px;
  font-family: var(--ella-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #b8791a;
  text-transform: none;
}
.ella-card-bullets {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ella-card-bullets li {
  position: relative;
  padding-left: 17px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ella-text);
}
.ella-card-bullets li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-forest);
  opacity: 0.75;
}
/* De losse beschrijving zakt naar bijrol zodra er bullets zijn. */
.ella-card-desc--sub {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ella-muted);
}
/* "Meer info" staat op een rijke kaart ONDER de knoppen. Daar hoort geen tweede omkaderde
   knop maar een rustige tekstlink. Eigen klasse i.p.v. een override op de standaardstijl:
   die zet de tekst cream op een groene vulling, en enkel de vulling weghalen leverde witte
   tekst op een witte achtergrond op — onleesbaar bij hover. */
.ella-card-link--plain {
  margin-top: 8px;
  padding: 4px 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ella-muted);
  box-shadow: none;
}
.ella-card-link--plain:hover {
  background: transparent;
  box-shadow: none;
  color: var(--ds-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Mini-mandje in de chat (enkel bots met cart-config, enkel same-origin) ─────
   Balkje boven het invoerveld: aantal artikelen + totaal + afrekenlink. Verschijnt
   pas wanneer er echt iets in de mand ligt, en verdwijnt wanneer ze leeg is. */
.ella-minicart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 14px 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(var(--ds-forest-rgb), 0.08);
  border: 1px solid rgba(var(--ds-forest-rgb), 0.18);
  font-size: 12.5px;
  animation: ella-minicart-in 0.3s var(--ease-out);
}
@keyframes ella-minicart-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ella-minicart-info {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--ds-forest-deep);
  min-width: 0;
}
.ella-minicart-info svg { width: 15px; height: 15px; flex: none; }
.ella-minicart-go {
  flex: none;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ds-forest);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(var(--ds-forest-rgb), 0.3);
}
.ella-minicart-go:hover { background: var(--ds-forest); color: #fff; }

/* ── Blokkop-fallback: ##/###-koppen die een model toch stuurt, rustig gerenderd ── */
.ella-msg .ella-blokkop { display: block; margin: 12px 0 4px; font-size: 14px; letter-spacing: 0.01em; color: var(--ds-forest); }
.ella-msg .ella-blokkop:first-child { margin-top: 2px; }

/* ── Receptkaart (c.recipe): ingrediënten-checklist + stappen-carousel ─────────── */
.ella-card--recipe {
  flex: 0 0 min(316px, calc(100% - 8px));
  max-width: 316px;
}
.ella-rcp-hero { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ella-rcp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ella-rcp-hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 45%, transparent 70%);
}
.ella-rcp-hero-text { position: absolute; left: 14px; right: 14px; bottom: 11px; color: #fff; }
.ella-rcp-title { font-size: 16px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.ella-rcp-title--plain { color: var(--ella-text); padding: 4px 0 0; }
.ella-rcp-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ella-rcp-meta span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35); border-radius: 100px; padding: 3px 9px;
}
.ella-card--recipe .ella-rcp-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.ella-rcp-sec-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ds-forest); margin-top: 2px;
}
.ella-rcp-sec-h::after { content: ""; flex: 1; height: 1px; background: var(--ella-border); }
.ella-rcp-sec-h--steps { margin-top: 8px; }
.ella-rcp-sec-h--steps::after { order: 1; }
.ella-rcp-stepcounter { order: 2; font-size: 10.5px; font-weight: 600; color: var(--ella-muted); letter-spacing: 0.04em; }
.ella-rcp-stepnav { order: 3; display: flex; gap: 4px; }
.ella-rcp-arr {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ella-border);
  background: var(--ella-card); color: var(--ds-forest); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: background 0.2s, color 0.2s;
}
.ella-rcp-arr:hover { background: var(--ds-forest); color: #fff; }
.ella-rcp-arr svg { width: 12px; height: 12px; }
.ella-rcp-group-name {
  font-size: 12px; font-weight: 700; color: var(--ella-text); margin: 2px 0 1px;
}
.ella-rcp-ings { list-style: none; margin: 0; padding: 0; }
.ella-rcp-ing {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 2px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1.4;
  transition: background 0.15s;
}
.ella-rcp-ing:hover { background: rgba(var(--ds-forest-rgb), 0.05); }
.ella-rcp-check {
  flex: 0 0 15px; width: 15px; height: 15px; align-self: center;
  border: 1.6px solid rgba(var(--ds-forest-rgb), 0.4); border-radius: 5px;
  position: relative; transition: background 0.15s, border-color 0.15s;
}
.ella-rcp-ing.done .ella-rcp-check { background: var(--ds-forest); border-color: var(--ds-forest); }
.ella-rcp-ing.done .ella-rcp-check::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ella-rcp-ing.done .ella-rcp-name, .ella-rcp-ing.done .ella-rcp-qty { text-decoration: line-through; opacity: 0.5; }
.ella-rcp-qty { flex: 0 0 auto; min-width: 46px; font-weight: 700; font-size: 12.5px; color: var(--ds-forest); font-variant-numeric: tabular-nums; }
.ella-rcp-name { color: var(--ella-text); }
.ella-rcp-steps {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 2px -2px 0; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ella-rcp-steps::-webkit-scrollbar { display: none; }
.ella-rcp-step {
  flex: 0 0 calc(100% - 26px); scroll-snap-align: start;
  background: rgba(var(--ds-forest-rgb), 0.045);
  border: 1px solid var(--ella-border); border-radius: 12px;
  padding: 10px 12px 12px; display: flex; gap: 10px; align-items: flex-start;
}
.ella-rcp-stepnum {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ds-forest); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.ella-rcp-step p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ella-text); }
.ella-rcp-src {
  display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600;
  color: var(--ds-forest); text-decoration: none;
}
.ella-rcp-src:hover { text-decoration: underline; }

/* ── Bronvermelding onder een botbubbel (bv. allergenen-antwoorden) ───────────── */
.ella-source {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -2px 0 6px 6px; max-width: 88%;
  font-size: 11px; font-weight: 500; color: var(--ella-muted);
  text-decoration: none; line-height: 1.4;
}
.ella-source svg { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.75; }
.ella-source:hover { color: var(--ds-forest); text-decoration: underline; }

/* ── Voedingswaarden/allergenen-kaart (c.nutrition) — tabs zoals de merksite ── */
.ella-card--nutrition { flex: 0 0 min(316px, calc(100% - 8px)); max-width: 316px; }
.ella-ntr-head { padding: 14px 16px 10px; }
.ella-ntr-title { font-size: 15px; font-weight: 700; color: var(--ella-text); line-height: 1.25; }
.ella-ntr-pack { font-size: 12px; color: var(--ella-muted); margin-top: 2px; }
.ella-ntr-tabs { display: flex; border-top: 1px solid var(--ella-border); border-bottom: 1px solid var(--ella-border); }
.ella-ntr-tab {
  flex: 1; padding: 9px 6px; background: var(--ella-card); border: none; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ds-forest); transition: background 0.2s, color 0.2s;
}
.ella-ntr-tab + .ella-ntr-tab { border-left: 1px solid var(--ella-border); }
.ella-ntr-tab.active { background: var(--ds-forest); color: #fff; }
.ella-ntr-pane { padding: 12px 16px 6px; }
.ella-ntr-pane.hidden { display: none; }
.ella-ntr-sub { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ella-muted); margin: 6px 0 4px; }
.ella-ntr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ella-ntr-table td { padding: 4px 0; border-bottom: 1px solid var(--ella-border); color: var(--ella-text); }
.ella-ntr-table td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ella-ntr-table tr:last-child td { border-bottom: none; }
.ella-ntr-ing { font-size: 12px; line-height: 1.55; color: var(--ella-text); margin: 0 0 6px; }
.ella-ntr-algrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.ella-ntr-al {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 0; border-bottom: 1px solid var(--ella-border); font-size: 12.5px; color: var(--ella-text);
}
.ella-ntr-st { font-size: 12px; font-weight: 700; line-height: 1; }
.ella-ntr-st--yes { color: var(--ds-forest); }
.ella-ntr-st--maybe { color: var(--ds-yellow); }
.ella-ntr-st--no { color: var(--ella-muted); opacity: 0.6; }
.ella-ntr-legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 2px; font-size: 11px; color: var(--ella-muted); }
.ella-ntr-legend .ella-ntr-st { font-size: 11px; }
.ella-ntr-foot { font-size: 10.5px; line-height: 1.45; color: var(--ella-muted); margin: 8px 0 2px; }
.ella-ntr-check { padding: 8px 16px 12px; font-size: 11px; line-height: 1.5; color: var(--ella-muted); border-top: 1px solid var(--ella-border); margin-top: 6px; }
.ella-ntr-check a { color: var(--ds-forest); font-weight: 600; text-decoration: none; }
.ella-ntr-check a:hover { text-decoration: underline; }

/* Tekstuele maker-credit (BRANDING.creditName) naast het standaard Sky Design-logo */
.ella-credit-name { font-weight: 700; letter-spacing: 0.02em; color: inherit; }