/* Vragen/chat — FAB, modal, threads. Responsief (desktop/tablet/mobiel). */

/* ---------- FAB ---------- */
.fab{position:fixed; left:18px; bottom:18px; z-index:60; display:flex; flex-direction:column-reverse; align-items:flex-start; gap:10px}
.fab-btn{position:relative; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent,#d6a268); color:#1a1206; box-shadow:0 8px 22px rgba(0,0,0,.45); display:grid; place-items:center}
.fab-btn:hover{background:var(--accent-2,#e8b985)}
.fab-plus{font-size:30px; line-height:1; transition:transform .2s}
.fab.open .fab-plus{transform:rotate(45deg)}
.fab-badge{position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  background:#d9534f; color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg)}
.fab-menu{display:flex; flex-direction:column; gap:6px; background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:14px; padding:8px; box-shadow:0 12px 30px rgba(0,0,0,.5); min-width:210px}
.fab-menu button, .fab-menu a{display:block; width:100%; text-align:left; background:transparent; border:0; color:var(--text);
  font-size:15px; padding:11px 13px; border-radius:9px; cursor:pointer; text-decoration:none}
.fab-menu button:hover, .fab-menu a:hover{background:var(--accent-soft); color:var(--accent-2); text-decoration:none}

/* ---------- passage kiezen ---------- */
body.passage-pick .doc p, body.passage-pick .doc li, body.passage-pick .doc h1,
body.passage-pick .doc h2, body.passage-pick .doc h3, body.passage-pick .doc blockquote{
  cursor:pointer; border-radius:6px; transition:background .12s}
body.passage-pick .doc p:hover, body.passage-pick .doc li:hover, body.passage-pick .doc h2:hover,
body.passage-pick .doc h3:hover, body.passage-pick .doc blockquote:hover{ background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent)}
.pick-hint{position:fixed; top:0; left:0; right:0; z-index:70; background:var(--accent); color:#1a1206; font-weight:600;
  padding:12px 16px; text-align:center; display:flex; align-items:center; justify-content:center; gap:12px}
.pick-x{background:rgba(0,0,0,.15); border:0; color:#1a1206; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:15px}

/* ---------- compose-modal ---------- */
.cmodal-ov{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:18px}
.cmodal{width:100%; max-width:460px; background:var(--surface); border:1px solid var(--border-2); border-radius:16px;
  padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.5); max-height:90vh; overflow:auto}
.cmodal h2{margin:0 0 14px; font-size:1.15rem; color:#fff}
.cmodal label{display:flex; flex-direction:column; gap:6px; color:var(--text-soft); font-size:13px; margin-bottom:14px}
.cmodal input, .cmodal textarea{background:var(--bg); color:var(--text); border:1px solid var(--border-2); border-radius:10px;
  padding:11px 12px; font-size:16px; font-family:inherit}
.cmodal input:focus, .cmodal textarea:focus{outline:none; border-color:var(--accent)}
.cmodal-passage{margin:0 0 14px}
.passage-chip{margin-top:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 10px;
  font-size:13px; color:var(--text-soft); display:flex; gap:8px; align-items:flex-start}
.passage-chip button{margin-left:auto; background:transparent; border:0; color:var(--muted); cursor:pointer}
.cmodal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px}

/* ---------- thread (chat) ---------- */
.thread{max-width:50rem; margin:0 auto; padding:16px 24px; display:flex; flex-direction:column; height:calc(100dvh - 56px)}
.thread-head{display:flex; align-items:flex-start; gap:12px; justify-content:space-between}
.thread-head h1{font-size:1.3rem; color:#fff; margin:0}
.thread-sub{color:var(--muted); font-size:13px; margin-top:4px}
.thread-passage{display:inline-block; margin:12px 0; color:var(--accent-2); font-size:14px; background:var(--surface);
  border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; padding:8px 12px; text-decoration:none}
.thread-passage:hover{text-decoration:none; border-color:var(--accent)}
.thread-msgs{flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:14px 2px; margin-top:8px}
.bubble{max-width:80%; padding:9px 13px; border-radius:14px; line-height:1.5}
.bubble-from{font-size:11px; opacity:.7; margin-bottom:2px}
.bubble.mine{align-self:flex-end; background:var(--accent); color:#1a1206; border-bottom-right-radius:4px}
.bubble.theirs{align-self:flex-start; background:var(--surface-2); color:var(--text); border-bottom-left-radius:4px}
.bubble-body{white-space:pre-wrap; word-wrap:break-word}
.thread-reply{display:flex; gap:8px; align-items:flex-end; padding-top:12px; border-top:1px solid var(--border); position:sticky; bottom:0; background:var(--bg)}
.thread-reply textarea{flex:1; background:var(--surface); color:var(--text); border:1px solid var(--border-2); border-radius:12px;
  padding:11px 12px; font-size:16px; font-family:inherit; resize:none; max-height:140px}
.thread-reply textarea:focus{outline:none; border-color:var(--accent)}

/* ---------- statussen + overzicht ---------- */
.status-badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; vertical-align:middle; margin-left:6px}
.st-open{background:rgba(217,150,80,.2); color:#e8b985}
.st-gesprek{background:rgba(110,168,216,.2); color:#9cc6ea}
.st-afgesloten{background:rgba(255,255,255,.08); color:var(--muted)}
.unread-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:#d9534f; margin-right:7px; vertical-align:middle}
.vask{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 6px}
.vtabs{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 8px}
.vtab{padding:6px 13px; border-radius:999px; border:1px solid var(--border-2); color:var(--text-soft); font-size:13px; text-decoration:none}
.vtab:hover{border-color:var(--accent); text-decoration:none}
.vtab.active{background:var(--accent-soft); color:var(--accent-2); border-color:transparent}

/* ---------- bewaarde passage / verouderde versie ---------- */
.thread-passage.orig{margin-top:6px; opacity:.95}
.thread-snapshot{margin:8px 0; border:1px solid var(--border-2); border-radius:10px; background:var(--surface-2); padding:2px 12px}
.thread-snapshot summary{cursor:pointer; padding:9px 0; color:var(--text-soft); font-size:14px; list-style:none}
.thread-snapshot summary::-webkit-details-marker{display:none}
.thread-snapshot summary::before{content:'▸ '; color:var(--muted)}
.thread-snapshot[open] summary::before{content:'▾ '}
.thread-snapshot[data-stale] summary{color:#e8b985}
.snapshot-warn{background:rgba(217,150,80,.14); border:1px solid rgba(217,150,80,.4); color:#e8b985;
  padding:9px 12px; border-radius:9px; margin:10px 0; font-size:14px; line-height:1.5}
.snapshot-warn.ok{background:rgba(110,168,216,.12); border-color:rgba(110,168,216,.35); color:var(--text-soft)}
.snapshot-warn a{color:inherit; text-decoration:underline; font-weight:600}
.snapshot-body{margin:8px 0 12px; padding-top:10px; border-top:1px solid var(--border-2); max-height:55vh; overflow:auto}

/* ---------- responsief ---------- */
@media (max-width:900px){
  .cmodal-ov{align-items:flex-end; padding:0}
  .cmodal{max-width:none; border-radius:18px 18px 0 0; max-height:92vh; padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .cmodal-actions{gap:8px}
  .cmodal-actions .btn-primary, .cmodal-actions .btn-ghost{flex:1; text-align:center; padding:12px 10px}
  .thread{padding:12px 14px; height:calc(100dvh - 52px)}
  .bubble{max-width:90%}
  .vask{flex-direction:column; align-items:stretch}
  .vask .btn-primary{text-align:center}
}