/* simchat — a replayed widget conversation, styled like the real embed widget. The full
   transcript lives in the HTML (SEO + no-JS/reduced-motion fallback shows everything at once);
   component-simchat.js replays it beat by beat with typing indicators. Always labelled
   "opgenomen gesprek" — honesty is a design rule on this site. */

.simchat { width: min(24rem, 100%); margin: 0; background: #fff; border-radius: 1.3rem; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); overflow: hidden; font-size: 0.92rem; color: var(--ink); }

.simchat__head { display: flex; gap: 0.65rem; align-items: center; padding: 0.85rem 1rem; background: linear-gradient(135deg, #0a0a0a, #2c2b26); color: #fff; }
.simchat__avatar { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.simchat__avatar svg { width: 1.7rem; height: 1.7rem; fill: var(--ink); }
.simchat__naam { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.simchat__sub { font-size: 0.72rem; opacity: 0.78; display: flex; align-items: center; gap: 0.35rem; }
.simchat__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3ddc84; }
.simchat__label { margin-left: auto; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255, 255, 255, 0.14); padding: 0.22rem 0.55rem; border-radius: 999px; white-space: nowrap; }

.simchat__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 21rem; max-height: 23rem; overflow-y: auto; background: #faf9f7; }

.simchat__msg { max-width: 86%; padding: 0.6rem 0.85rem; border-radius: 1rem; line-height: 1.45; }
.simchat__msg--bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 0.3rem; align-self: flex-start; }
.simchat__msg--user { background: var(--ink); color: #fff; border-bottom-right-radius: 0.3rem; align-self: flex-end; }
.simchat__msg--agent { background: #fff; border: 1.5px solid var(--accent); border-bottom-left-radius: 0.3rem; align-self: flex-start; }

.simchat__sys { align-self: center; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.66rem; color: var(--muted); background: var(--sand); padding: 0.25rem 0.7rem; border-radius: 999px; text-align: center; }

.simchat__card { align-self: flex-start; width: 88%; background: #fff; border: 1px solid var(--line); border-radius: 0.9rem; padding: 0.7rem 0.85rem; box-shadow: 0 6px 18px rgba(10, 10, 10, 0.07); }
.simchat__card h4 { margin: 0 0 0.15rem; font-family: var(--serif); font-weight: 600; font-size: 1.02rem; }
.simchat__card .m { font-size: 0.74rem; color: var(--muted); margin: 0 0 0.5rem; }
.simchat__cta { display: inline-block; background: var(--accent); color: var(--ink); font-size: 0.76rem; font-weight: 700; padding: 0.32rem 0.75rem; border-radius: 999px; }

.simchat__bron { align-self: flex-start; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.64rem; color: var(--muted); }

.simchat__typing { align-self: flex-start; display: flex; gap: 0.28rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 1rem; border-bottom-left-radius: 0.3rem; padding: 0.55rem 0.8rem; }
.simchat__typing em { font-style: normal; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.62rem; color: var(--muted); margin-right: 0.3rem; }
.simchat__typing span { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--muted); animation: simchat-stip 1s infinite; }
.simchat__typing span:nth-child(2) { animation-delay: 0.15s; }
.simchat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes simchat-stip { 0%, 60%, 100% { transform: none; opacity: 0.55; } 30% { transform: translateY(-0.2rem); opacity: 1; } }

.simchat__foot { display: flex; gap: 0.5rem; align-items: center; padding: 0.7rem 0.9rem; border-top: 1px solid var(--line); background: #fff; }
.simchat__foot span { flex: 1; border: 1px solid var(--line); border-radius: 0.7rem; padding: 0.5rem 0.7rem; font-size: 0.85rem; color: var(--muted); }
.simchat__send { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; background: var(--accent); display: grid; place-items: center; color: var(--ink); }

/* progressive replay: with JS active, lines hide until their beat plays them */
.simchat--js [data-stap]:not(.is-af) { display: none; }
.simchat--js [data-stap].is-af { animation: simchat-in 0.3s ease both; }
@keyframes simchat-in { from { opacity: 0; transform: translateY(0.3rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .simchat--js [data-stap].is-af { animation: none; }
  .simchat__typing span { animation: none; }
}