/* De laag over alle admin-schermen heen (handoff "SwarmFrame - notificaties
   feedback navigatie.dc.html", F1-F3). Drie onderdelen, alle door feedback.js in
   <body> geïnjecteerd zodat een scherm alleen de <link>+<script> hoeft te laden:

   F1  blokkerende overlay (baan A) met de graaf-spinner — korte synchrone acties.
   F2  toast-stack rechtsonder — de balk vertelt of iets aftelt, loopt of stuk is.
   F3  notificatiecentrum (belletje rechtsboven) + dropdown-paneel.

   Regels blijven: wit werkvlak, hairlines, magenta alléén voor agent/lopend,
   cream voor "wacht op jou"/drift, rood alleen als dot bij een fout. Beweging
   leent motion.css (--m-enter/--e-out/--m-pulse); prefers-reduced-motion zet
   alles stil (onderaan). */

/* ============ F1 · blokkerende overlay (baan A) ============ */
.fw-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(250,250,248,.62);opacity:0;pointer-events:none;transition:opacity var(--m-swap,200ms) var(--e-out)}
.fw-overlay.aan{opacity:1;pointer-events:auto}
.fw-overlay .kern{display:flex;flex-direction:column;align-items:center;gap:14px}
.fw-overlay .titel{font-size:14px;font-weight:540;color:var(--ink)}
.fw-overlay .sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-subtle)}
/* de graaf verbindt zich: vier knopen, kanten trekken zich één voor één (2,4s-lus),
   de magenta knoop pulseert mee — het merkteken zelf blijft de wordmark, dit is
   een echo ervan, geen tweede merkmoment. */
.fw-spin{width:64px;height:64px;color:var(--ink)}
.fw-spin .kant{stroke-dasharray:1;animation:fw-fb-edge 2.4s ease-in-out infinite}
.fw-spin .kant.d2{animation-delay:.3s}.fw-spin .kant.d3{animation-delay:.6s}.fw-spin .kant.d4{animation-delay:.9s}
.fw-spin .agent{animation:fw-pulse var(--m-pulse,1.6s) ease-in-out infinite}
@keyframes fw-fb-edge{0%{stroke-dashoffset:1;opacity:1}40%{stroke-dashoffset:0;opacity:1}72%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.12}}

/* ============ F2 · toast-stack rechtsonder ============ */
.fw-toasts{position:fixed;right:16px;bottom:16px;z-index:900;display:flex;flex-direction:column;gap:10px;width:340px;max-width:calc(100vw - 32px)}
.fw-toast{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);padding:12px 14px 16px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.fw-toast.enter{animation:fw-selbar-in var(--m-enter,240ms) var(--e-out)}
.fw-toast.weg{animation:fw-selbar-out 140ms var(--e-in) forwards}
.fw-toast .kop{display:flex;align-items:center;gap:8px}
.fw-toast .dot{width:7px;height:7px;border-radius:var(--radius-pill);flex:none}
.fw-toast .dot.bezig{background:var(--accent-magenta);animation:fw-pulse var(--m-pulse,1.6s) ease-in-out infinite}
.fw-toast .dot.klaar{background:var(--block-lime);border:1px solid var(--rand-lime)}
.fw-toast .dot.fout{background:var(--semantic-error)}
.fw-toast .titel{font-size:13px;font-weight:540;flex:1;line-height:1.3}
.fw-toast .tijd{font-family:var(--font-mono);font-size:10px;color:var(--ink-tertiary)}
.fw-toast .sluit{font-size:13px;color:var(--ink-subtle);background:none;border:none;cursor:pointer;padding:0 2px;line-height:1;flex:none}
.fw-toast .sub{font-size:12px;color:var(--ink-subtle)}
.fw-toast .sub a,.fw-toast .sub .link{text-decoration:underline;color:var(--ink-muted);cursor:pointer}
/* de balk onderaan: het verschil tussen de soorten */
.fw-toast .balk{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hairline-soft)}
.fw-toast .balk>i{display:block;height:100%}
.fw-toast.aftel .balk>i{background:var(--ink);opacity:.25;width:100%;animation:fw-fb-countdown 5s linear forwards}
.fw-toast.aftel.pauze .balk>i{animation-play-state:paused}
.fw-toast.bezig .balk>i{background:var(--accent-magenta);animation:fw-fb-fill 6s ease-in-out infinite}
.fw-toast.fout .balk{display:none}
.fw-toast.samenvouw{cursor:pointer}
.fw-toast.samenvouw .titel{font-weight:540}
@keyframes fw-fb-countdown{from{width:100%}to{width:0%}}
@keyframes fw-fb-fill{0%{width:12%}50%{width:64%}100%{width:12%}}

/* ============ F3 · belletje + paneel ============ */
.fw-bel-anker{position:fixed;top:14px;right:16px;z-index:850}
.fw-bel{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--hairline);
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--m-hover,160ms) var(--e-out),border-color var(--m-hover,160ms) var(--e-out)}
.fw-bel:hover{background:var(--surface-1);border-color:var(--ink-subtle)}
.fw-bel:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fw-bel svg{width:17px;height:17px;color:var(--ink)}
.fw-bel .agentknoop{opacity:0}                     /* magenta knoop: alleen bij ongelezen agent-werk */
.fw-bel.agent .agentknoop{opacity:1}
.fw-bel .badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:var(--radius-pill);
  background:var(--ink);color:var(--on-primary);font-size:10px;font-weight:540;display:none;align-items:center;justify-content:center;padding:0 4px}
.fw-bel.ongelezen .badge{display:flex}

.fw-paneel{position:absolute;top:42px;right:0;width:380px;max-width:calc(100vw - 32px);background:var(--surface-1);
  border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden;
  display:none;max-height:min(72vh,560px);flex-direction:column}
.fw-paneel.open{display:flex;animation:fw-dialog-in var(--m-enter,240ms) var(--e-out)}
.fw-paneel .paneelkop{padding:13px 16px;border-bottom:1px solid var(--hairline-soft);display:flex;align-items:center;gap:10px}
.fw-paneel .paneelkop .t{font-size:13.5px;font-weight:540;flex:1}
.fw-paneel .paneelkop .alles{font-size:12px;color:var(--ink-subtle);text-decoration:underline;background:none;border:none;cursor:pointer}
.fw-paneel .lijst{overflow-y:auto}
/* de vastgepinde cream drift-rij: gedraagt zich als staat, niet als historie */
.fw-drift{padding:10px 16px;border-bottom:1px solid var(--hairline-soft);background:var(--block-cream);display:none;align-items:center;gap:10px}
.fw-drift.aan{display:flex}
.fw-drift .eyebrow{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;flex:none}
.fw-drift .zin{font-size:12.5px;flex:1;line-height:1.4}
.fw-drift .knop{display:inline-flex;padding:5px 12px;border-radius:var(--radius-pill);background:var(--ink);color:var(--on-primary);
  font-size:12px;font-weight:540;border:none;cursor:pointer;flex:none}
.fw-dag{padding:8px 16px 4px}
.fw-dag span{font-family:var(--font-mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-tertiary)}
.fw-mrij{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--hairline-soft);cursor:pointer;
  transition:background var(--m-hover,160ms) var(--e-out)}
.fw-mrij:hover{background:var(--surface-2)}
.fw-mrij.ongelezen{background:#fbfaf7}
.fw-mrij .stip{width:7px;height:7px;border-radius:50%;flex:none;margin-top:5px}
.fw-mrij .stip.klaar{background:var(--block-lime);border:1px solid var(--rand-lime)}
.fw-mrij .stip.bezig{background:var(--accent-magenta)}
.fw-mrij .stip.fout{background:var(--semantic-error)}
.fw-mrij .stip.info{border:1px solid var(--rand-dicht)}
.fw-mrij .lich{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.fw-mrij .lich .t{font-size:13px;font-weight:540;line-height:1.3}
.fw-mrij .lich .s{font-size:12px;color:var(--ink-subtle);overflow:hidden;text-overflow:ellipsis}
.fw-mrij .tijd{font-family:var(--font-mono);font-size:10px;color:var(--ink-tertiary);flex:none}
.fw-leeg{padding:26px 22px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.fw-leeg .kop{font-size:13px;font-weight:540}
.fw-leeg .sub{font-size:12px;color:var(--ink-subtle)}
.fw-leeg svg{width:30px;height:30px;color:var(--rand-dicht)}

@media (prefers-reduced-motion:reduce){
  .fw-overlay,.fw-toast.enter,.fw-paneel.open{transition:none;animation:none}
  .fw-spin .kant,.fw-spin .agent,.fw-toast .dot.bezig{animation:none}
  .fw-toast.aftel .balk>i{animation:none;width:100%}   /* geen aftel-beweging; sluit-✕ blijft */
  .fw-toast.bezig .balk>i{animation:none;width:40%}
}
