/* Hellup-mij helpwidget — vanilla, geen build-stap. Rustig, vriendelijk, kalm. */
:root{
  --hm-accent:#1f6feb; --hm-accent-dark:#1a5fd0; --hm-ink:#1b2431;
  --hm-muted:#6b7684; --hm-bg:#ffffff; --hm-soft:#f4f7fb; --hm-line:#e4e9f0;
  --hm-ok:#1a9d5a; --hm-warn:#c47f00;
}
#hm-launch{
  position:fixed; right:22px; bottom:22px; z-index:2147483000;
  display:flex; align-items:center; gap:9px;
  background:var(--hm-accent); color:#fff; border:none; cursor:pointer;
  font:600 15px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  padding:13px 18px; border-radius:999px; box-shadow:0 6px 22px rgba(31,111,235,.35);
  transition:transform .12s ease, background .12s ease;
}
#hm-launch:hover{ background:var(--hm-accent-dark); transform:translateY(-1px); }
#hm-launch svg{ width:19px; height:19px; }

#hm-panel{
  position:fixed; right:22px; bottom:84px; z-index:2147483000;
  width:370px; max-width:calc(100vw - 44px); height:560px; max-height:calc(100vh - 120px);
  background:var(--hm-bg); border:1px solid var(--hm-line); border-radius:16px;
  box-shadow:0 18px 50px rgba(20,30,50,.22); display:none; flex-direction:column;
  overflow:hidden; font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--hm-ink);
}
#hm-panel.hm-open{ display:flex; }

.hm-head{ background:var(--hm-accent); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.hm-head .hm-avatar{ width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:17px; }
.hm-head b{ font-size:15px; } .hm-head small{ display:block; opacity:.85; font-size:12px; font-weight:400; }
.hm-head .hm-x{ margin-left:auto; background:none;border:none;color:#fff;cursor:pointer;font-size:20px;opacity:.85; }
.hm-head .hm-x:hover{ opacity:1; }

.hm-context{ background:var(--hm-soft); border-bottom:1px solid var(--hm-line); padding:8px 14px; font-size:12px; color:var(--hm-muted); display:flex;align-items:center;gap:6px; }
.hm-context .hm-dot{ width:7px;height:7px;border-radius:50%;background:var(--hm-ok);flex:0 0 auto; }

.hm-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:#fbfcfe; }
.hm-msg{ max-width:82%; padding:9px 12px; border-radius:12px; white-space:pre-wrap; }
.hm-msg.bot{ background:#fff; border:1px solid var(--hm-line); align-self:flex-start; border-bottom-left-radius:4px; }
.hm-msg.user{ background:var(--hm-accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.hm-msg.sys{ align-self:center; background:transparent; color:var(--hm-muted); font-size:12px; text-align:center; max-width:100%; }

/* "Assistent is aan het typen"-animatie: drie bewegende puntjes terwijl de AI nadenkt. */
.hm-msg.hm-typing{ padding:11px 14px; }
.hm-dots{ display:inline-flex; gap:5px; align-items:center; }
.hm-dots i{ width:7px; height:7px; border-radius:50%; background:#9aa4b2; display:inline-block;
            animation:hm-blink 1.2s infinite ease-in-out both; }
.hm-dots i:nth-child(2){ animation-delay:.18s; }
.hm-dots i:nth-child(3){ animation-delay:.36s; }
@keyframes hm-blink{ 0%,80%,100%{ transform:scale(.55); opacity:.35; } 40%{ transform:scale(1); opacity:1; } }

.hm-consent{ background:#fff; border:1px solid var(--hm-line); border-radius:12px; padding:12px; align-self:stretch; }
.hm-consent h4{ margin:0 0 4px; font-size:13.5px; } .hm-consent p{ margin:0 0 10px; color:var(--hm-muted); font-size:12.5px; }
.hm-consent .hm-row{ display:flex; gap:8px; }
.hm-consent button{ flex:1; padding:9px; border-radius:9px; cursor:pointer; font-weight:600; font-size:13px; border:1px solid var(--hm-line); background:#fff; }
.hm-consent button.yes{ background:var(--hm-ok); color:#fff; border-color:var(--hm-ok); }
.hm-consent button.no{ background:#fff; color:var(--hm-ink); }
/* Sterkere optie: het hele scherm delen (getDisplayMedia). Rustig, secundair naast "Ja, kijk mee". */
.hm-consent .hm-share{ display:block; width:100%; margin-top:8px; padding:9px; border-radius:9px; cursor:pointer;
  font-weight:600; font-size:13px; border:1px solid var(--hm-accent); background:#fff; color:var(--hm-accent); }
.hm-consent .hm-share:hover{ background:var(--hm-soft); }
/* Losse "deel je scherm"-aanbieding (geen blokkerende dialoog) + kleine toelichting eronder. */
.hm-share-offer{ padding:10px; }
.hm-share-offer .hint{ display:block; margin-top:6px; color:var(--hm-muted); font-size:11.5px; text-align:center; }

.hm-foot{ border-top:1px solid var(--hm-line); padding:10px; display:flex; gap:8px; background:#fff; }
.hm-foot input{ flex:1; border:1px solid var(--hm-line); border-radius:10px; padding:10px 12px; font-size:14px; outline:none; }
.hm-foot input:focus{ border-color:var(--hm-accent); }
.hm-foot button{ background:var(--hm-accent); border:none; color:#fff; border-radius:10px; padding:0 14px; cursor:pointer; }
.hm-foot button:hover{ background:var(--hm-accent-dark); }

.hm-actions{ display:flex; gap:8px; padding:0 14px 10px; background:#fbfcfe; }
.hm-actions button{ font-size:12px; color:var(--hm-accent); background:none; border:none; cursor:pointer; padding:2px 0; }
.hm-actions button:hover{ text-decoration:underline; }

.hm-banner{ background:#fff7e6; border-bottom:1px solid #f0e2c0; color:var(--hm-warn); padding:7px 14px; font-size:12px; display:none; align-items:center; gap:6px; }
.hm-banner.on{ display:flex; }
#hm-banner-stop{ margin-left:auto; flex:0 0 auto; border:1px solid #e2c88a; background:#fff; color:var(--hm-warn);
                 border-radius:20px; padding:3px 12px; font-size:12px; font-weight:600; cursor:pointer; }
#hm-banner-stop:hover{ background:#fff2d6; }

/* ---- Co-browse actor (stap 7-8): markeren + vaste terugneem-knop ---- */
/* Markering van een element dat de assistent aanwijst of invult (reversibel). */
.hm-hl{ outline:2px solid var(--hm-accent) !important; outline-offset:2px !important;
  box-shadow:0 0 0 4px rgba(31,111,235,.18) !important; border-radius:4px;
  transition:outline-color .2s, box-shadow .2s; }
.hm-hl-tag{ display:inline-block; background:var(--hm-accent); color:#fff; font:600 11px/1.4 system-ui,sans-serif;
  padding:1px 7px; border-radius:6px; margin:0 6px 4px 0; vertical-align:middle; box-shadow:0 2px 6px rgba(20,30,50,.2); }

/* Vaste "Ik neem het over"-knop: altijd zichtbaar zodra de assistent de pagina bedient. */
#hm-takeover{ position:fixed; top:14px; left:50%; transform:translate(-50%,-120%);
  z-index:2147483647; background:#b42318; color:#fff; border:none; cursor:pointer;
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; padding:11px 18px;
  border-radius:999px; box-shadow:0 8px 26px rgba(180,35,24,.4); opacity:0;
  transition:transform .25s ease, opacity .25s ease; }
#hm-takeover.on{ transform:translate(-50%,0); opacity:1; }
#hm-takeover:hover{ background:#912018; }