:root{
  --bg:#fbf7ef; --panel:#FFFDF9; --text:#2B2B2B; --muted:#6B7280; --ink:#0F172A;
  --brand:#F1754A; --ok:#10B981;
  --ava-bub:#FFFFFF; --user-bub:#FFF8EF; --line:#EDE7DF;
  --shadow-sm:0 4px 14px rgba(27,40,56,.08);
  --radius:22px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --vh: 100dvh;           /* fallback; JS zet deze ook */
  --composer-pb: 120px;   /* ruimte voor composer */
  --ios-kb: 0px;          /* iOS keyboardhoogte (JS zet deze) */
}

/* basis */
*{ box-sizing:border-box }
html,body{ height:100% }
html, body { height:-webkit-fill-available; overflow:hidden; } /* geen page-scroll met keyboard */

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
}

/* App frame */
#app{
  min-height:var(--vh);
  min-height:-webkit-fill-available;
  display:flex; flex-direction:column;
}
@supports (height: 100lvh) { #app { min-height:100lvh; } }

/* iets meer ruimte boven */
.wrap{
  max-width:980px; margin:0 auto; padding:36px 12px 18px;
  flex:1; width:100%;
  display:flex; flex-direction:column; min-height:0;
}
.card{ background:transparent; border:0; display:flex; flex-direction:column; flex:1; min-height:0; }

.head{ padding:6px 4px 10px; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.ava-avatar{
  width:40px;height:40px;border-radius:50%;
  background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; box-shadow:var(--shadow-sm)
}
.ava-avatar svg{ width:20px;height:20px;opacity:.85 }
.head-text{ display:flex;flex-direction:column;gap:2px }
.title{ font-weight:700;color:var(--ink);letter-spacing:.2px }
.subtitle{ font-size:14px;color:var(--muted) }

/* Scroll area (het gesprek) */
.scroll{
  flex:1 1 auto; min-height:0;
  padding:12px 8px 0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:transparent;

  /* ruimte onderaan voor composer + safe area + iOS keyboard */
  padding-bottom: calc(var(--composer-pb) + var(--safe-bottom) + var(--ios-kb));

  /* UA scroll anchoring uit; JS houdt eerste bubbel vast */
  overflow-anchor: none;
}
.row{ display:flex; margin:12px 0; gap:10px }
.left{ justify-content:flex-start }
.right{ justify-content:flex-end }
.bubble{
  max-width:min(72ch,86vw);
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--ava-bub); box-shadow:var(--shadow-sm);
  padding:14px 16px; line-height:1.55; word-break:break-word;
}
.right .bubble{ background:var(--user-bub) }
.name{ font-weight:600; margin-bottom:6px; color:var(--ink) }
.txt{ white-space:pre-wrap }

/* non-critical spacer */
#spacer { width:100%; height:1px; pointer-events:none; }

/* Composer */
.composer{
  position:fixed; left:0; right:0;
  bottom: var(--safe-bottom);
  padding:10px 12px 10px;
  background:linear-gradient(to top, rgba(251,247,239,0.98), rgba(251,247,239,0.85) 40%, transparent);
  backdrop-filter:saturate(150%) blur(6px);
  z-index:1000;
  transform: translateZ(0); /* iOS jitter fix */
}
.composer-inner{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line);
  border-radius:28px; padding:8px 8px 8px 12px;
  box-shadow:var(--shadow-sm);
  margin:0 auto; max-width:980px;
}
#input{
  flex:1; border:0; outline:0; resize:none; background:transparent; color:var(--text);
  font-size:16px; line-height:1.35; min-height:40px; max-height:7.2em; padding:6px 8px;
}
#send{
  width:44px; height:44px; border-radius:50%; border:0;
  display:grid; place-items:center;
  background:var(--ok); color:#fff; box-shadow:var(--shadow-sm);
}
#send:disabled{ opacity:.5; pointer-events:none }

.composer-note{
  margin:6px auto 0; color:#847a6d; font-size:12.5px; max-width:980px;
}

/* iOS: composer extra omhoog met keyboardhoogte */
.ios .composer{
  position:fixed; left:0; right:0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ios-kb));
}

/* Typing chip */
.bubble-typing{
  padding:10px 12px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  display:inline-flex; align-items:center; gap:6px;
}
.bubble-typing .dots{ display:inline-flex; gap:4px; align-items:center; justify-content:center; }
.bubble-typing .dots i{
  width:6px; height:6px; background:#D1D5DB; border-radius:50%;
  animation:blink 1.1s infinite ease-in-out;
}
.bubble-typing .dots i:nth-child(2){ animation-delay:.18s }
.bubble-typing .dots i:nth-child(3){ animation-delay:.36s }
@keyframes blink{ 0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-1px)} }

/* Nudge */
@keyframes nudge-glow {
  0%{ box-shadow:0 4px 14px rgba(27,40,56,.08) }
  50%{ box-shadow:0 0 0 3px rgba(16,185,129,.15), 0 6px 16px rgba(27,40,56,.12) }
  100%{ box-shadow:0 4px 14px rgba(27,40,56,.08) }
}
.composer-inner.nudge { animation:nudge-glow 1.1s ease-out 1 }

/* Splash */
#splash { position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; transition: opacity .25s ease; }
#splash.hide { opacity: 0; pointer-events: none; }
.splash-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 12px 40px rgba(27,40,56,.10); padding: 14px 18px; display: flex; gap: 10px; align-items: center;
  color: var(--text); font-weight: 600;
}
.splash-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: pulse 1s infinite ease-in-out }
@keyframes pulse { 0%,100%{transform:scale(.7);opacity:.55} 50%{transform:scale(1.05);opacity:1} }

/* EMBED */
html.embed, body.embed{ overflow:hidden; height:100%; }

/* Divi fix */
.et_pb_section:has(#app), .et_pb_row:has(#app), .et_pb_column:has(#app){
  min-height:auto !important; padding-bottom:0 !important; overflow:visible !important;
}

/* ANDROID */
.android .composer { position: fixed; left:0; right:0; bottom: env(safe-area-inset-bottom, 0); }
.android .scroll { padding-bottom: calc(var(--composer-pb) + var(--safe-bottom)); }
.android .composer{ backdrop-filter:none; background:var(--bg); }
.android #app.keyboard-open #spacer { height: 8px !important; }
.android #app.keyboard-open .composer-note { display: none; }

/* bottom nav hidden */
.bottom-nav { display:none !important; }

/* touch feel */
#send { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* input font */
textarea#input { font-family: inherit; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bubble-typing .dots i { animation: none; opacity:.6 }
}