/* =========================
   FEELLIN SHARED LIGHT THEME
   Minimal shadows, soft borders, purple accent
   ========================= */

/* ===== Variables ===== */
:root {
  --fe-brand:            #6D4AFE;
  --fe-brand-600:        #5a3dfa;
  --fe-brand-50:         #f5f2ff;

  --fe-ink:              #0f172a;
  --fe-ink-muted:        #475569;
  --fe-hint:             #697386;

  --fe-bg-1:             #ffffff;
  --fe-bg-2:             #fbfbff;
  --fe-surface:          #ffffff;
  --fe-surface-subtle:   #f6f7fc;
  --fe-surface-tint:     #f3f4ff;

  --fe-border:           #e6e8f2;
  --fe-border-strong:    #dfe2ef;

  --fe-radius:           16px;
  --fe-radius-sm:        12px;
  --fe-radius-lg:        20px;
}

/* ===== Base ===== */
html, body {
  color-scheme: light;
  background: linear-gradient(180deg, #f9f6ff 0%, #ffffff 100%);
  color: var(--fe-ink);
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

button, .btn, a {
    font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.container { max-width: 1100px; margin-inline: auto; padding: 0 16px }

/* =========================
   Appbar
   ========================= */
.appbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, #ffffff 80%, transparent);
  border-bottom: 1px solid var(--fe-border);
}
.appbar .inner { height: 56px; display: flex; align-items: center; gap: 10px; justify-content: space-between }
.appbar .brand { display: flex; align-items: center; gap: 10px }
.appbar .logo { width: 28px; height: 28px }
.wordmark { font-weight: 700; font-size: 18px; letter-spacing: .2px; color: var(--fe-ink) }
.app-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.action-link {
  background: none; border: 0; color: var(--fe-ink-muted);
  font-size: 11px; padding: 0 0 2px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer;
  border-bottom: 1px solid transparent;
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.action-link:hover { color: var(--fe-ink); border-bottom-color: #cbd5e1 }

/* =========================
   Hero / Section header
   ========================= */
.brand { display: flex; align-items: center; gap: 10px }
.fe-hero {
  background: linear-gradient(180deg, var(--fe-surface-subtle), #fff 85%);
  border-bottom: 1px solid var(--fe-border);
}
.fe-hero h1 { color: var(--fe-ink); font-size: 28px; letter-spacing: .2px }

/* Badge / pill */
.fe-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fe-surface-tint);
  color: #3b2ab8;
  border: 1px solid var(--fe-border);
  padding: 6px 10px; border-radius: 999px; font-size: 12px;
}

/* =========================
   Grid
   ========================= */
.fe-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .fe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fe-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================
   Cards
   ========================= */
.fe-card {
  border-radius: 20px;
  padding: 16px;
  border: 1px solid var(--fe-border);
  box-shadow: none;
  background: #ffffff;
}

/* =========================
   Topnav
   ========================= */
.topnav { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.topnav .fe-btn {
  --_bg: #fff;
  border: 1px solid var(--fe-border);
  background: var(--_bg);
  color: var(--fe-ink);
  padding: 8px 14px; border-radius: 999px;
  font-weight: 600; font-size: 13px; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.topnav .fe-btn:hover { border-color: var(--fe-border-strong) }
.topnav .fe-btn.active {
  --_bg: var(--fe-brand);
  color: #fff; border-color: var(--fe-brand);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}

/*slogan*/
.tagline {
    font-size: 14px;
    margin-left: 10px;
    font-weight: 500;
    white-space: nowrap;
  }
  .tagline strong {
    color: #6D4AFE;   /* accentkleur */
  }
  .fe-dark .tagline strong {
    color: #a78bfa;   /* iets lichter paars in dark mode */
  }
  .fe-light .tagline strong {
    color: #5b21b6;   /* net wat dieper in light mode */
  }
  /* 👉 tagline verbergen op kleinere schermen */
  @media (max-width: 768px) {
    .tagline { display: none; }
  }


/* ===== Inputs ===== */
.fe-card input[type="text"],
.fe-card input[type="email"],
.fe-card input:not([type]) {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--fe-border);
  padding: 8px 12px;
  color: var(--fe-ink);
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fe-card input:focus {
  border-color: var(--fe-brand);
  box-shadow: 0 0 0 3px rgba(109,74,254,.18);
}

.form-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .form-two { grid-template-columns: 1fr }
}

/* =========================
   Cards & KPI’s
   ========================= */
.kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px }
.kpi, .fe-card {
  background: linear-gradient(180deg, #fff, var(--fe-bg-2));
  border: 1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  padding: 14px;
}
.kpi .title { color: var(--fe-hint); font-size: 12px; margin-bottom: 6px }
.kpi .value { font-weight: 700; font-size: 28px; color: #5d176a; letter-spacing: .2px }
.hint { color: var(--fe-hint); font-size: 13px }
.chart { min-height: 240px }

/* =========================
   Tour (shared)
   ========================= */
.tl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(3px); /* blur alleen hier */
  z-index: 2147483640 !important;
}
.tl-pop {
  position: fixed;
  z-index: 2147483641 !important;
  background: #ffffff;
  border: 1px solid var(--fe-border);
  border-radius: 12px;
  padding: 12px;
  max-width: 360px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.tl-pop h3 { margin: 0 0 6px; font-size: 16px; color: var(--fe-ink) }
.tl-pop p { margin: 0 10px 10px 0; color: var(--fe-ink-muted); font-size: 14px; line-height: 1.4 }
.tl-pop .actions { display: flex; gap: 8px; justify-content: flex-end }
.tl-btn { border: 1px solid var(--fe-border); background: #fff; color: var(--fe-ink); border-radius: 10px; padding: 6px 10px; cursor: pointer }
.tl-btn.primary { background: var(--fe-brand); border-color: var(--fe-brand); color: #fff }

/* Focus highlight altijd boven alles */
.tl-focus {
  position: relative;
  z-index: 2147483643 !important; /* nog hoger dan overlay/pop */
  outline: 2px solid var(--fe-brand);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--fe-brand) 18%, transparent);
  border-radius: 12px;
  isolation: isolate;
}

/* =========================
   Footer
   ========================= */
.fe-footer { background: #fff; border-top: 1px solid var(--fe-border); margin-top: 32px }
.fe-footer .inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.fe-footer .brand { display: flex; align-items: center; gap: 10px; color: var(--fe-ink-muted); font-size: 13px }
.fe-footer .brand .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fe-brand); display: inline-block; margin-right: 6px; opacity: .9 }
.fe-footer .links { display: flex; flex-wrap: wrap; gap: 14px }
.fe-footer .links a { color: var(--fe-ink-muted); font-size: 13px; text-decoration: none; border-bottom: 1px solid transparent }
.fe-footer .links a:hover { color: var(--fe-ink); border-bottom-color: #cbd5e1 }
@media (max-width:640px) {
  .fe-footer .inner { flex-direction: column; align-items: flex-start; padding: 14px 0 }
  .fe-footer .links { gap: 10px }
  .kpis { grid-template-columns: repeat(2,minmax(0,1fr)) }
}

/* =========================
   AI-Actieboard
   ========================= */
.ai-board { margin-top: 14px; border-top: 1px dashed var(--fe-border); padding-top: 12px }
.ai-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.ai-headline { font-weight: 700 }
.ai-conf { display: flex; align-items: center; gap: 10px }
.ai-ring {
  --pct: 0; width: 34px; height: 34px; border-radius: 50%;
  background: conic-gradient(var(--fe-brand) calc(var(--pct)*1%), #e5e7eb 0);
  position: relative;
}
.ai-ring::after { content: attr(data-pct) "%"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: #111 }
.ai-why { border: 1px solid var(--fe-border); background: #fff; color: var(--fe-ink); border-radius: 10px; padding: 6px 10px; font-size: 12px }
.ai-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px }
.ai-chip { border: 1px solid var(--fe-border); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; display: inline-flex; gap: 6px; align-items: center }
.ai-chip.bump { animation: aiPulse .9s ease }
@keyframes aiPulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fe-brand) 25%,transparent)} 100%{box-shadow:0 0 0 12px rgba(0,0,0,0)} }
.ai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px }
.ai-card { border: 1px solid var(--fe-border); border-radius: 12px; padding: 10px; background: #fff }
.ai-card h4 { margin: 0 0 6px; font-size: 14px }
.ai-card ul { margin: 0; padding-left: 18px }
.ai-actions { display: grid; gap: 10px; margin-top: 10px }
.ai-actions .row { display: flex; gap: 8px; align-items: flex-start }
.ai-actions input[type="checkbox"] { margin-top: 2px }
.ai-copy { display: grid; gap: 8px; margin-top: 10px }
.ai-copy .btn { border: 1px solid var(--fe-border); background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12px; text-align: left }
.ai-ask { margin-top: 10px; display: grid; gap: 8px }
.ai-ask .bar { display: flex; gap: 8px }
.ai-ask input { flex: 1; border: 1px solid var(--fe-border); border-radius: 10px; padding: 8px }
.ai-ask button { border: 1px solid var(--fe-border); background: #fff; border-radius: 10px; padding: 8px 12px }
.ai-chat { border: 1px solid var(--fe-border); border-radius: 10px; padding: 8px; max-height: 180px; overflow: auto; background: #fafafa }
.ai-whatif { margin-top: 10px; display: grid; gap: 8px }
.ai-whatif .bar { display: flex; gap: 10px; align-items: center }
.ai-foot { margin-top: 10px; display: flex; gap: 8px; align-items: center; color: var(--fe-hint); font-size: 12px }
.ai-badge { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--fe-border); background: #fff; border-radius: 999px; padding: 3px 8px }

/* =========================
   Member Cards & Inputs (Teamleader)
   ========================= */
.badge-role { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; border: 1px solid #e0e7ff }
.member-card {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--fe-border); margin: 8px 0;
}
.member-card .meta { color: var(--fe-ink-muted); font-size: 12px }
.actions { display: flex; gap: 8px; flex-wrap: wrap }
.member-card .actions .fe-btn {
  height: 36px; padding: 0 12px; border-radius: 12px;
  background: #fff; color: var(--fe-ink);
  border: 1px solid #e5e7eb;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.member-card .actions .fe-btn:hover { background: #f8fafc; border-color: #e2e8f0; }
.member-card .actions .fe-btn:active { transform: translateY(1px) }
.member-card .actions .btn-invite {
  background: #6D4AFE; border-color: #6D4AFE; color: #fff;
}
.member-card .actions .btn-invite:hover { filter: brightness(.96) }
.member-card .actions .fe-btn.danger {
  background: #fff; color: #b91c1c; border-color: #fecaca;
}
.member-card .actions .fe-btn.danger:hover { background: #fef2f2 }

/* Compacte icon-only variant voor mobiel */
@media (max-width: 720px) {
  .member-card .actions { gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch }
  .member-card .actions .fe-btn {
    min-width: auto; padding: 8px; border-radius: 12px; gap: 0;
    font-size: 0; line-height: 0;
  }
  .member-card .actions .fe-btn i { font-size: 16px; margin: 0 }
  .member-card .actions .btn-invite .bar { display: none !important }
}

/* =========================
   Toasts
   ========================= */
.fe-toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 9999 }
.fe-toast {
  background: #fff; color: var(--fe-ink); border: 1px solid var(--fe-border);
  border-radius: 12px; padding: 10px 12px; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.fe-toast.ok { border-color: #86efac }
.fe-toast.err { border-color: #fecaca }

/* =========================
   KPI
   ========================= */
.kpi .value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #5d176a;
}
.kpi .title {
  font-size: 0.9rem;
  color: #555;
}

/* === Appbar action-links (modern style) === */
.app-actions .action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  background: rgba(99,102,241,0.08); /* subtiele achtergrond */
  transition: all 0.2s ease;
}

.app-actions .action-link i {
  font-size: 14px;
  color: #6366f1; /* paars icoon */
}

.app-actions .action-link:hover {
  background: rgba(93,23,106,0.12); /* jouw brand tint */
  color: #111827;
}

.app-actions .action-link:hover i {
  color: #5D176A;
}

/* 📱 Op mobiel: alleen icoon tonen */
@media (max-width: 640px) {
  .app-actions .action-link {
    padding: 6px;
    justify-content: center;
  }
  .app-actions .action-link span {
    display: none;
  }
}

  .tl-overlay{
    position:fixed; inset:0;
    background:rgba(2,6,23,.24);        /* iets lichter voor leesbaarheid */
    backdrop-filter:blur(1.5px);
    z-index:4000;
  }
  .tl-pop{
    position:fixed; z-index:4002;
    max-width:min(92vw,520px);
    border-radius:16px;
    box-shadow:0 20px 70px rgba(2,6,23,.18);
  }
  .tl-focus{
    position:relative !important;
    z-index:4001 !important;             /* zorgt dat nav boven de overlay ligt */
    outline:3px solid #7c3aed;
    border-radius:16px;
  }
/* Zorg dat donut charts altijd genoeg ruimte krijgen */
/* Forceer de containers zelf */
#kpiFillChart,
#kpiAvgChart {
  height: 200px !important;      /* container blijft 200px */
  min-height: 200px !important;
  max-height: 200px !important;
}

/* Zorg dat charts altijd volledig zichtbaar zijn */
.chart {
  min-height: 320px;     /* genoeg ruimte */
  height: 320px;         /* gefixeerd zodat Apex niet afbreekt */
  width: 100%;
}

.fe-card .chart {
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

/* Forceer alle Apex SVG’s voldoende hoogte */
svg.apexcharts-svg {
  height: 280px !important;
  width: 100% !important;
}

#radar-chart svg.apexcharts-svg {
    height: 450px !important;
}



.fe-dark .apexcharts-tooltip {
  background: #1e293b !important;   /* donker */
  color: #f1f5f9 !important;        /* licht tekst */
  border: 1px solid #334155 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.5) !important;
}

.fe-dark .apexcharts-tooltip-title {
  background: #0f172a !important;   /* nog donkerder voor header */
  border-bottom: 1px solid #334155 !important;
  color: #cbd5e1 !important;
}

/* === Feellin Coach styles === */
.fe-coach-fab{
  position:fixed; right:16px; bottom:18px; z-index:1040;
  width:66px !important;height:56px;border-radius:16px; display:flex;align-items:center;justify-content:center;
  background:#ffffff;border:1px solid #e5e7eb; box-shadow:0 10px 30px rgba(2,6,23,.15); cursor:pointer;
}
.fe-dark .fe-coach-fab{ background:#0b1220;border-color:#263043; box-shadow:0 10px 30px rgba(2,6,23,.45); }
.fe-coach-lottie{ width:36px;height:36px }

.fe-coach-mini{
  position:fixed; right:82px; bottom:26px; z-index:1039;
  background:#ffffff;border:1px solid #e5e7eb;border-radius:12px; padding:8px 10px;
  box-shadow:0 12px 32px rgba(2,6,23,.14); font-size:13px; color:#334155;
}
.fe-dark .fe-coach-mini{ background:#0b1220;border-color:#263043;color:#e2e8f0 }
.fe-coach-mini .txt{white-space:nowrap}

.fe-coach-overlay{
  position:fixed; inset:0; background:rgba(2,6,23,.28); z-index:1040; display:flex;align-items:end; justify-content:end;
  padding:18px;
}
.fe-coach-panel{
  width:min(720px, 96vw); max-height:min(82vh, 900px); background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid #e5e7eb; box-shadow:0 18px 60px rgba(2,6,23,.22);
}
.fe-dark .fe-coach-panel{ background:#0b1220; border-color:#263043 }

.fe-coach-panel .head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--fe-border,#e5e7eb) }
.fe-coach-panel .title{ display:flex; align-items:center; gap:10px }
.fe-coach-panel .title .logo{ width:20px;height:20px; border-radius:6px; background:linear-gradient(135deg,#6D4AFE,#8b5cf6) }
.fe-coach-panel .title #coachTitle{ font-weight:800; font-size:16px }
.fe-coach-panel .title .sub{ opacity:.7 }
.fe-coach-panel .x{ background:transparent;border:0;font-size:26px;line-height:1;cursor:pointer;color:#334155 }
.fe-dark .fe-coach-panel .x{ color:#e2e8f0 }

.fe-coach-panel .body{ padding:14px 16px; overflow:auto; max-height:60vh }
.fe-coach-panel .foot{ padding:12px 16px; border-top:1px solid var(--fe-border,#e5e7eb); display:flex; gap:8px; justify-content:flex-end }

.fe-coach-panel .spinner{
  width:30px;height:30px; border:3px solid #e5e7eb; border-top-color:#6D4AFE; border-radius:50%; animation:spin 1s linear infinite; margin:18px auto;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.fe-coach-panel .error{ color:#ef4444; background:#fff1f2; border:1px solid #fecdd3; padding:10px; border-radius:10px }
.fe-dark .fe-coach-panel .error{ background:#2b152f; border-color:#4a1d70; color:#fda4af }

.fe-coach-panel .content h3{ font-size:18px; margin:8px 0 4px }
.fe-coach-panel .pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid currentColor }
.fe-coach-panel .list{ margin:10px 0 0; padding-left:18px }
.fe-coach-panel .list li{ margin:6px 0 }

/* === Feellin Coach – fixes / responsive === */
.fe-coach-fab{
  position:fixed; z-index:1040;
  right: max(12px, calc(env(safe-area-inset-right,0px) + 12px));
  bottom:max(12px, calc(env(safe-area-inset-bottom,0px) + 12px));
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #e5e7eb; box-shadow:0 10px 30px rgba(2,6,23,.15);
  overflow:hidden; /* voorkom uitrekken lottie op mobiel */
}
.fe-dark .fe-coach-fab{ background:#0b1220;border-color:#263043; box-shadow:0 10px 30px rgba(2,6,23,.45) }

.fe-coach-lottie{ width:28px; height:28px }
.fe-coach-fab svg{ width:100% !important; height:100% !important } /* lottie altijd passend */

.fe-coach-mini{
  position:fixed; z-index:1039;
  right: calc(56px + 18px); bottom: calc(10px + env(safe-area-inset-bottom,0px));
  background:#ffffff;border:1px solid #e5e7eb;border-radius:12px; padding:8px 10px;
  box-shadow:0 12px 32px rgba(2,6,23,.14); font-size:13px; color:#334155
}
.fe-dark .fe-coach-mini{ background:#0b1220;border-color:#263043;color:#e2e8f0 }

.fe-coach-overlay{ backdrop-filter: blur(2px) }

.fe-coach-panel{ margin:0 } /* geen onverwachte center-margins */

@media (max-width: 640px){
  .fe-coach-fab{ width:50px; height:50px; border-radius:14px }
  .fe-coach-lottie{ width:24px; height:24px }
  .fe-coach-mini{
    right: calc(50px + 18px + env(safe-area-inset-right,0px));
    bottom: calc(8px + env(safe-area-inset-bottom,0px));
  }
  .fe-coach-overlay{ align-items:flex-end }                  /* bottom-sheet gedrag */
  .fe-coach-panel{ width:100%; max-height:calc(100vh - 72px); border-radius:16px 16px 0 0 }
}

/* statusregel boven de spinner */
#feCoachStatus{ text-align:center; margin:8px 0 6px; opacity:.8; font-size:13px; color:#475569 }
.fe-dark #feCoachStatus{ color:#e2e8f0 }


/* Coach boven Tour */
.fe-coach-overlay { z-index: 10020 !important; }
.fe-coach-panel   { position: relative; z-index: 10021 !important; }
/* Verberg FAB tijdens tour */
.fe-tour-open .fe-coach-fab { display: none !important; }

/* Zorg dat [hidden] altijd echt verbergt (iOS/Safari quirks) */
[hidden]{ display:none !important; }

/* Coach altijd boven de Tour */
.fe-coach-overlay{ position:fixed; inset:0; z-index:10020; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,.28); }
.fe-coach-panel{ z-index:10021; width:min(720px,96vw); max-height:min(82vh,900px); background:#fff; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 18px 60px rgba(2,6,23,.22); }

/* Tijdens de Tour de FAB verbergen */
.fe-tour-open .fe-coach-fab{ display:none !important; }

/* Mobiel: bottom-sheet gedrag + safe area */
@media (max-width:640px){
  .fe-coach-overlay{ align-items:flex-end; padding: max(12px, env(safe-area-inset-bottom)); }
  .fe-coach-panel{ width:100%; max-height:calc(100vh - 72px); border-radius:16px 16px 0 0; }
}


/* FAB: lottie + mini label */
.fe-coach-fab { position:fixed; z-index:1040; right:max(12px, calc(env(safe-area-inset-right,0px) + 12px)); bottom:max(12px, calc(env(safe-area-inset-bottom,0px) + 12px)); width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e7eb; box-shadow:0 10px 30px rgba(2,6,23,.15); overflow:hidden }
.fe-dark .fe-coach-fab{ background:#0b1220; border-color:#263043; box-shadow:0 10px 30px rgba(2,6,23,.45) }

.fe-coach-fab-inner{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center }
.fe-coach-lottie{ width:32px; height:32px }
.fe-coach-fab svg{ width:100% !important; height:100% !important } /* lottie svg altijd passend */

/* ieniemienie labeltje rechts-onder in de knop */
.fe-coach-label{
  position:absolute; right:6px; bottom:6px;
  font-size:9px; line-height:1; font-weight:700; letter-spacing:.2px;
  color:#6D4AFE; background:rgba(109,74,254,.08);
  border:1px solid #e5e7eb; padding:2px 4px; border-radius:6px;
}
.fe-dark .fe-coach-label{ color:#c7b8ff; background:rgba(109,74,254,.18); border-color:#3b2f5a }

@media (max-width:640px){
  .fe-coach-fab{ width:50px; height:50px; border-radius:14px }
  .fe-coach-lottie{ width:28px; height:28px }
  .fe-coach-label{ font-size:8px; right:5px; bottom:5px; padding:1px 4px }
}

.mood-badge {
  position: relative;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #eef2ff;
  color: #4f46e5;
  overflow: hidden;
  min-width: 40px;
  text-align: center;
}
.mood-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #6366f1; /* paarsblauw vulling */
  border-radius: 9999px;
  width: var(--fill,0%);
  transition: width 0.6s ease;
  z-index: 0;
}
.mood-badge span {
  position: relative;
  z-index: 1;
}
.fe-dark .mood-badge {
  background:#1e293b;
  color:#93c5fd;
}
.fe-dark .mood-badge::before {
  background:#3b82f6; /* blauw in dark */
}

.grid-trend {
  display: grid;
  grid-template-columns: 2fr 1fr; /* links breed, rechts smal */
  gap: 12px;
  align-items: stretch;
}
.grid-left {
  display: grid;
  grid-template-rows: 1fr 1fr; /* Trend + Radar delen de hoogte */
  gap: 12px;
}
.grid-bottom {
  display: grid;
  grid-template-columns: 2fr 3fr; /* links smaller, rechts breder */
  gap: 12px;
  margin-top: 12px;
}

.grid-3-equal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  align-items: stretch;
  margin-top: 12px;
}

@media (max-width:1200px){
  .grid-3-equal { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px){
  .grid-3-equal { grid-template-columns: 1fr; }
}

.quotes-list { display:flex; flex-direction:column; gap:8px; }
.quote-item {
  background: var(--fe-bg-2);
  padding:8px 10px;
  border-radius:10px;
  font-size:14px;
  color: var(--fe-ink-muted);
}
.quote-item .emoji { margin-right:6px; }

/* === Coach chat bubbles === */
.coach-chat-wrap { margin-top: 12px; }
.coach-chat-title { font-weight: 700; margin: 6px 0 8px; opacity:.9; }

.coach-chat {
  max-height: 320px; overflow: auto;
  background: rgba(148,163,184,.10);
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 14px;
  padding: 10px;
}

.msg { display:flex; gap:8px; margin:8px 0; align-items:flex-end; }
.msg .bubble {
  max-width: 72%;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(2,6,23,.06);
  word-wrap: break-word;
}
.msg.user { justify-content: flex-end; }
.msg.user .bubble {
  background: #e8edff; color:#1f2937;
  border-bottom-right-radius: 6px;
}
.msg.coach { justify-content: flex-start; }
.msg.coach .avatar {
  width:26px; height:26px; border-radius:50%;
  background:#7c3aed; display:flex; align-items:center; justify-content:center;
  color:#fff; flex: 0 0 26px; font-size:13px;
}
.msg.coach .bubble {
  background: #f5f3ff; color:#111827;
  border-bottom-left-radius: 6px;
}

/* Dark theme tweaks */
.fe-dark .coach-chat { background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.25); }
.fe-dark .msg.user .bubble  { background:#111827; color:#e5e7eb; }
.fe-dark .msg.coach .bubble { background:#0b1220; color:#e5e7eb; }

.coach-chat-input {
  display:flex; gap:8px; margin-top:10px;
}
.coach-chat-input input[type="text"],
.coach-chat-input textarea {
  flex:1; border:1px solid var(--fe-border,#e5e7eb);
  border-radius: 10px; padding:10px 12px; resize: none; min-height:42px;
}
.coach-chat-input .send-btn {
  min-width:46px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
/* Coach advieskaart */
.coach-advice p { margin: 0 0 8px; }
.coach-advice ul { margin: 6px 0 0 18px; }
.coach-advice .saved-note{opacity:.6;font-size:12px;margin-top:8px}


/* ===== Feellin Coach widget – Feellin gradient look ===== */
:root{
  --fe-brand:#6D4AFE;                 /* Feellin paars */
  --fe-brand-2:#3B82F6;               /* naar blauw voor verloop */
  --fe-gradient: linear-gradient(135deg, var(--fe-brand) 0%, var(--fe-brand-2) 100%);
}

/* iets dieper in dark mode */
.fe-dark{
  --fe-brand:#5B3DF4;
  --fe-brand-2:#1E40AF;
}

.coach-widget{
  position:fixed; right:16px; bottom:16px;
  width:420px; max-width:calc(100vw - 24px);
  border-radius:20px; overflow:hidden;
  background:var(--fe-surface, #fff);
  border:1px solid var(--fe-border, #e5e7eb);
  box-shadow:0 18px 60px rgba(2,6,23,.22);
  z-index:9999;
}
.fe-dark .coach-widget{
  background:#0f172a; border-color:#334155; box-shadow:0 18px 60px rgba(0,0,0,.45);
}

/* Header met Feellin gradient */
.coach-widget .head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  background:var(--fe-gradient);
  color:#fff;
}
.coach-widget .head .agent{display:flex; align-items:center; gap:10px}
.coach-widget .head .name{font-weight:800; line-height:1}
.coach-widget .head .role{opacity:.9; font-size:12px; margin-top:2px}

/* Lottie bubbeltje links */
#coachWidgetLottie.lottie{
  width:28px; height:28px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}

/* Close X in header */
.coach-widget .head .x{
  appearance:none; border:0; background:rgba(255,255,255,.16);
  color:#fff; width:28px; height:28px; line-height:28px; text-align:center;
  border-radius:10px; cursor:pointer; font-size:18px;
}
.coach-widget .head .x:hover{ background:rgba(255,255,255,.28) }

/* Chat body */
.coach-widget .log{
  max-height:44vh; overflow:auto; padding:14px; background:transparent;
}
.coach-widget .msg{ display:flex; margin-bottom:10px }
.coach-widget .msg .bubble{
  padding:10px 12px; border-radius:14px; line-height:1.5; font-size:14px;
  box-shadow:0 1px 0 rgba(2,6,23,.04);
}
.coach-widget .msg.user{ justify-content:flex-end }
.coach-widget .msg.user .bubble{
  background:rgba(109,74,254,.09); border:1px solid rgba(109,74,254,.22); color:#312e81;
}
.coach-widget .msg.coach .bubble{
  background:#eef2ff; border:1px solid #e0e7ff; color:#1f2937;
}
.fe-dark .coach-widget .msg.user .bubble{
  background:rgba(109,74,254,.20); border-color:rgba(109,74,254,.35); color:#e0e7ff;
}
.fe-dark .coach-widget .msg.coach .bubble{
  background:#0b1220; border-color:#1e293b; color:#e2e8f0;
}

/* Inputbalk */
.coach-widget .input{
  display:flex; align-items:center; gap:8px; padding:12px; border-top:1px solid var(--fe-border,#e5e7eb);
  background:linear-gradient(180deg, rgba(2,6,23,0.02), rgba(2,6,23,0.00));
}
.coach-widget .input input{
  flex:1; height:44px; border-radius:14px; border:1px solid var(--fe-border,#e5e7eb);
  background:#fff; padding:0 14px; font-size:14px; outline:none;
  box-shadow:inset 0 1px 0 rgba(2,6,23,.03);
}
.coach-widget .input input:focus{
  border-color:var(--fe-brand);
  box-shadow:0 0 0 3px rgba(109,74,254,.18);
}
.fe-dark .coach-widget .input{ border-top-color:#334155; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); }
.fe-dark .coach-widget .input input{ background:#0b1220; border-color:#334155; color:#e2e8f0 }

/* Send knop (brand circle) */
.coach-widget .input .fe-btn.icon{
  width:44px; height:44px; border-radius:14px; border:0; cursor:pointer;
  background:var(--fe-gradient); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(109,74,254,.35);
}
.coach-widget .input .fe-btn.icon:hover{ filter:brightness(1.03) }
.coach-widget .head .agent .avatar{
  width: 42px; height: 42px; border-radius: 9999px;
  overflow: hidden;            /* Lottie netjes binnen de cirkel */
  background: none;            /* geen achtergrond die Lottie maskeert */
  flex-shrink: 0;
}
/* === Chat bubbles: breder en netter === */
:root{
  --chat-side-pad: 18px;     /* padding aan de zijkanten van het log */
  --chat-bubble-max: 720px;  /* harde max breedte op grote schermen */
}

/* minder binnenmarge zodat bubbles dichter bij de rand komen */
#feCoachOverlay .coach-chat,
#coachChatWidget .log{
  padding: 12px var(--chat-side-pad) 96px var(--chat-side-pad);
}

/* bubbles mogen (veel) breder, maar houden een nette max op desktop */
#feCoachOverlay .coach-chat .msg .bubble,
#coachChatWidget .log .msg .bubble{
  /* vul bijna de volle breedte, maar clamp op desktop */
  max-width: min(var(--chat-bubble-max), 94%);
  width: 100%;
}

/* uitlijning: coach links, user rechts */
#feCoachOverlay .coach-chat .msg.coach .bubble,
#coachChatWidget .log .msg.coach .bubble{
  margin-right: auto;   /* naar links */
}

#feCoachOverlay .coach-chat .msg.user .bubble,
#coachChatWidget .log .msg.user .bubble{
  margin-left: auto;    /* naar rechts */
}

/* op smalle schermen gewoon 100% breedte gebruiken */
@media (max-width: 640px){
  #feCoachOverlay .coach-chat .msg .bubble,
  #coachChatWidget .log .msg .bubble{
    max-width: 100%;
  }
}
/* === Coach chat – bubbles zonder extra “kaart”, full-width === */
#feCoachOverlay .coach-chat .msg,
#coachChatWidget .msg{
  /* wrapper kaal maken */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 8px 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
  max-width: 100% !important;   /* <— ipv 78% e.d. */
}

#feCoachOverlay .coach-chat .msg .bubble,
#coachChatWidget .msg .bubble{
  width: 100% !important;       /* bubble vult de kolom */
  max-width: none !important;
  margin: 0 !important;
}

/* optioneel: 'Even nadenken…' wat subtieler */
#feCoachOverlay .coach-chat .bubble em,
#coachChatWidget .bubble em{
  font-style: normal;
  opacity: .75;
}

/* optioneel: avatar niet opzij duwen */
#feCoachOverlay .coach-chat .msg .avatar,
#coachChatWidget .msg .avatar{
  margin-right: 8px;
}
/* 1) Bubbles mogen nooit breder zijn dan de kolom (iOS fix) */
#feCoachOverlay .coach-chat .msg,
#coachChatWidget .msg,
#feCoachOverlay .coach-chat .msg .bubble,
#coachChatWidget .msg .bubble{
  box-sizing: border-box;   /* ⬅️ belangrijk op iOS */
  width: 100%;
  max-width: 100%;
}

/* 2) Kleine binnen-gutter + safe-area op mobiel */
#feCoachOverlay .coach-chat .log,
#coachChatWidget .log{
  padding-inline: max(12px, env(safe-area-inset-left));
  padding-inline-end: max(12px, env(safe-area-inset-right));
}

/* 3) Geen horizontale scroll in het paneel */
.fe-coach-panel{ overflow-x: hidden; }

/* 4) Lange woorden/urls breken netjes */
#feCoachOverlay .coach-chat .bubble,
#coachChatWidget .bubble{
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* === Feellin Coach • Mobile tuning (iPhone) === */

/* Paneel: duidelijker los van de pagina + schone randen */
#feCoachOverlay .fe-coach-panel{
  box-sizing: border-box;
  background: #ffffff;                      /* licht thema: echt wit */
  border: 1px solid rgba(2, 6, 23, 0.08);   /* subtiele scheidslijn */
  box-shadow:
    0 14px 40px rgba(2, 6, 23, 0.18),
    0 3px 12px rgba(2, 6, 23, 0.08);
}

/* Donker thema varianten */
.fe-dark #feCoachOverlay .fe-coach-panel{
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.55),
    0 2px 10px rgba(0,0,0,0.35);
}

/* iPhone breedte: links/rechts vaste marge + safe-area respecteren */
@media (max-width: 480px){
  #feCoachOverlay .fe-coach-panel{
    width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    margin: 0 auto 16px;        /* center + ruimte onder */
    left: 50%; transform: translateX(-50%);  /* voor absoluut gepositioneerd paneel */
    border-radius: 18px;
  }

  /* Log & input krijgen ook gutters zodat de inhoud niet tegen de rand kleeft */
  #feCoachOverlay .coach-chat .log{
    padding-inline: max(12px, env(safe-area-inset-left))
                     max(12px, env(safe-area-inset-right));
  }
  #feCoachOverlay .coach-chat-input{
    padding-inline: max(12px, env(safe-area-inset-left))
                     max(12px, env(safe-area-inset-right));
  }
}

/* Bubbles mogen nooit uitlopen — 100% van de kolom inclusief padding */
#feCoachOverlay .coach-chat .msg,
#feCoachOverlay .coach-chat .msg .bubble{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* (optioneel) hetzelfde voor het losse widgetvenster rechtsonder */
@media (max-width: 480px){
  #coachChatWidget{
    width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    right: max(16px, env(safe-area-inset-right));
    left: max(16px, env(safe-area-inset-left));
    margin: 0 auto;
    border: 1px solid rgba(2, 6, 23, 0.08);
    box-shadow:
      0 14px 40px rgba(2, 6, 23, 0.18),
      0 3px 12px rgba(2, 6, 23, 0.08);
  }
}

/* Prevent horizontale scroll in het paneel */
#feCoachOverlay .fe-coach-panel{ overflow-x: hidden; }

/* === iPhone fixes: FAB === */
@supports (bottom: env(safe-area-inset-bottom)) {
  .fe-coach-fab {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* === iPhone fixes: Grid layout === */
@media (max-width: 760px) {
  .grid-trend { grid-template-columns: 1fr; }
  .grid-bottom { grid-template-columns: 1fr; }
  .grid-3-equal { grid-template-columns: 1fr; }
}

/* === iPhone / Mobile chat-widget fix === */
@media (max-width: 480px) {
  .coach-widget {
    width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    margin: 0 auto;
  }
}
/* Onboarding bovenaan */
.onboard-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .onboard-cards { grid-template-columns: repeat(3, 1fr); }
}

.onboard-card {
  position: relative;
  border-radius: var(--fe-radius);
  padding: 14px 16px;
  background: linear-gradient(180deg, #fff, var(--fe-bg-2));
  border: 1px solid var(--fe-border);
  box-shadow: none; /* subtiel, net als kpi-cards */
  font-size: 14px;
}

.onboard-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fe-ink);
}

.onboard-card p {
  margin: 0;
  font-size: 13px;
  color: var(--fe-ink-muted);
  line-height: 1.4;
}

.onboard-card .close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--fe-hint);
  cursor: pointer;
}

.onboard-card .close-btn:hover {
  color: var(--fe-ink);
}

.onboard-card .fe-btn {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--fe-brand);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.onboard-card .fe-btn:hover {
  filter: brightness(.95);
}
.onboard-card h3 i {
  margin-right: 6px;
  color: var(--fe-brand); /* accentkleur paars */
}
/* Dark mode */
.fe-dark .onboard-card {
  background: #1e293b;     /* donker oppervlak */
  border-color: #334155;   /* donkerdere rand */
  color: #e2e8f0;          /* lichtere tekst */
}

/* KPI mood hero */
.kpi-mood .mood-hero {
  display: flex;
  align-items: flex-start; /* emoji bovenaan */
  gap: 12px;
  margin: 2px 4px 6px;
}

/* === Progress bar (mood) === */
.progress.mood-progress {
  height: 22px; /* vaste hoogte */
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0;
  display: flex;
  background-color: #ede9fe; /* light track */
}

.progress.mood-progress .progress-bar {
  background-color: var(--fe-brand, #6D4AFE);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark theme */
.fe-dark .progress.mood-progress {
  background-color: #1f2937; /* donker track */
}
.fe-dark .progress.mood-progress .progress-bar {
  background-color: #6D4AFE;
}

/* Dark theme: buttons in de topnav */
.fe-dark .topnav .fe-btn {
  background: #0f172a;          /* donker vlak */
  color: #e2e8f0;               /* lichte tekst */
  border-color: #334155;
}

.fe-dark .topnav .fe-btn.active {
  background: var(--fe-brand);  /* paars */
  border-color: var(--fe-brand);
  color: #fff;                  /* wit voor contrast */
}


/* Tour pop-up (light) */
.tl-pop {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid var(--fe-border);
  border-radius: 12px;
  padding: 12px;
  max-width: 360px;
  box-shadow: 0 20px 70px rgba(2, 6, 23, 0.18);
}

/* Tour pop-up (dark mode) */
.fe-dark .tl-pop {
  background: #1e293b;          /* donker vlak */
  color: #f1f5f9;               /* lichte tekst */
  border: 1px solid #334155;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.7); /* subtielere shadow */
}

.fe-dark .tl-pop h3 {
  color: #e2e8f0;
}

.fe-dark .tl-pop .actions button {
  background: var(--fe-brand);
  border: none;
  color: #fff;
}

.fe-dark .tl-pop .actions button:first-child {
  background: transparent;
  color: #94a3b8;
}


.tagline .hi {
    color: var(--fe-brand);
    font-weight: 800;
}