/* ============================================================================
   De glazen zweefknoppen — chatknop en "naar boven"

   EEN plek voor hoe deze twee knoppen eruitzien. Ze horen er overal identiek uit
   te zien, en dat ging eerder mis: het uiterlijk stond in wf-2026-system.css, en
   een pagina die dát bestand niet laadt (de parkeerpagina op een klantdomein)
   viel terug op de oude roze pil uit chat.css. Zelfde knop, ander uiterlijk
   (Tom, 14-10-2026).

   Daarom staat het uiterlijk hier, in een bestand dat elke pagina mét zo'n knop
   los inlaadt — ook een pagina zonder de rest van het stijlsysteem:

     _LiveChatWidget.cshtml   de klantwidget (en dus ook de parkeerpagina)
     _AdminChatBar.cshtml     de adminbalk op elke pagina
     _WfScrollTop.cshtml      "naar boven"
     _WfBugKnop.cshtml        bug melden
     WelkomModal              de knop in het welkomvenster
     Aanbod/Index + Stijlgids die zetten de knoppen zelf neer

   WAT HIER NIET HOORT: waar de knoppen hangen en hoe ze stapelen. Dat blijft in
   wf-2026-system.css, want dat rekent met de dashboardschermen eromheen.

   Een glasring om een opake witte schijf, met alleen het icoon erin. Inkt-glas
   (donkere tint): deze knoppen hangen op een lichte achtergrond, wit-glas zou
   daar wegvallen.
   ============================================================================ */

.wf-naar-boven, .wf-chatknop {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 60px; height: 60px; padding: 6px;
  border: 1.5px solid rgba(1, 16, 61, .14); border-radius: 9999px;
  background: rgba(1, 16, 61, .07);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 22px rgba(1, 6, 20, .12);
  cursor: pointer;
  transition: background .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1),
              opacity .3s, visibility .3s;
}
.wf-naar-boven:hover, .wf-chatknop:hover { background: rgba(1, 16, 61, .12); transform: translateY(-3px); }
.wf-naar-boven:focus-visible, .wf-chatknop:focus-visible { outline: 3px solid rgba(50, 188, 238, .55); outline-offset: 2px; }

.wf-naar-boven-schijf, .wf-chatknop-kern {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 9999px;
  background: #fff; box-shadow: 0 1px 3px rgba(18, 20, 32, .14);
}
.wf-naar-boven i, .wf-chatknop i {
  font-size: 16px; color: var(--wf-title, #a12359);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.wf-naar-boven:hover i, .wf-chatknop:hover i { transform: translateY(-2px); }

/* Groen stipje = experts online (klantdashboard-chatknop; wfLcLauncherDot, live-chat.js). Herpositie
   t.o.v. de oude pil-vorm: dit zit nu ín de rand van de ronde glasknop, niet meer naast het label. */
.wf-chatknop .wf-chat-launcher-dot {
  top: 2px; right: 2px; left: auto;
  width: 14px; height: 14px; border-width: 2px;
}

/* #wfLcLauncher (_LiveChatWidget.cshtml) draagt zowel .wf-chat-launcher (chat.css, het gedragshaakje
   voor live-chat.js: .is-open verbergt 'm, position:relative voor de badges) als .wf-chatknop
   (hierboven, het glazen uiterlijk). Beide zijn losse klassen met gelijke specificiteit — welke wint
   voor overlappende eigenschappen (hoogte/padding/achtergrond/rand) hangt dan af van de laadvolgorde
   van chat.css vs. wf-2026-system.css, en dat willen we niet laten gokken. Daarom hier het volledige
   glazen uiterlijk nog eens op de ID-selector, die wint altijd — ongeacht laadvolgorde. Chat.css's
   eigen .wf-chat-launcher-regels (de oude pil) blijven zelf ongemoeid en tonen dus nog gewoon correct
   in de Stijlgids-demo "Backup — vorige chatknop" (die #wfLcLauncher niet als id gebruikt). */
#wfLcLauncher.wf-chatknop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  box-sizing: border-box; width: 60px; height: 60px; padding: 6px;
  border: 1.5px solid rgba(1, 16, 61, .14); border-radius: 9999px;
  background: rgba(1, 16, 61, .07); color: inherit;
  box-shadow: 0 8px 22px rgba(1, 6, 20, .12);
}
#wfLcLauncher.wf-chatknop:hover { background: rgba(1, 16, 61, .12); }
:root[data-bs-theme="dark"] #wfLcLauncher.wf-chatknop { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
:root[data-bs-theme="dark"] #wfLcLauncher.wf-chatknop:hover { background: rgba(255, 255, 255, .13); }


/*  #wfLcLauncher (_LiveChatWidget.cshtml) draagt zowel .wf-chat-launcher (chat.css, het
    gedragshaakje voor live-chat.js: .is-open verbergt 'm, position:relative voor de badges) als
    .wf-chatknop (het glazen uiterlijk hierboven). Beide zijn losse klassen met gelijke
    specificiteit -- welke wint voor overlappende eigenschappen (hoogte/padding/achtergrond/rand)
    hangt dan af van de laadvolgorde van chat.css vs. dit bestand, en dat willen we niet laten
    gokken. Daarom hier het volledige glazen uiterlijk nog eens op de ID-selector, die wint altijd.
    Chat.css' eigen .wf-chat-launcher-regels (de oude pil) blijven ongemoeid en tonen dus nog gewoon
    in de Stijlgids-demo "Backup -- vorige chatknop" (die #wfLcLauncher niet als id gebruikt). */
#wfLcLauncher.wf-chatknop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  box-sizing: border-box; width: 60px; height: 60px; padding: 6px;
  border: 1.5px solid rgba(1, 16, 61, .14); border-radius: 9999px;
  background: rgba(1, 16, 61, .07); color: inherit;
  box-shadow: 0 8px 22px rgba(1, 6, 20, .12);
}
#wfLcLauncher.wf-chatknop:hover { background: rgba(1, 16, 61, .12); }
:root[data-bs-theme="dark"] #wfLcLauncher.wf-chatknop { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
:root[data-bs-theme="dark"] #wfLcLauncher.wf-chatknop:hover { background: rgba(255, 255, 255, .13); }

/* Zelfde verhaal voor #wfAbarToggle (_AdminChatBar.cshtml, admin-op-elke-pagina): draagt zowel
   .wf-abar-pill (chat.css, gedragshaakje voor admin-bar.js) als .wf-chatknop (glazen uiterlijk). */
#wfAbarToggle.wf-chatknop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  box-sizing: border-box; width: 60px; height: 60px; padding: 6px;
  border: 1.5px solid rgba(1, 16, 61, .14); border-radius: 9999px;
  background: rgba(1, 16, 61, .07); color: inherit;
  box-shadow: 0 8px 22px rgba(1, 6, 20, .12);
}
#wfAbarToggle.wf-chatknop:hover { background: rgba(1, 16, 61, .12); }
:root[data-bs-theme="dark"] #wfAbarToggle.wf-chatknop { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
:root[data-bs-theme="dark"] #wfAbarToggle.wf-chatknop:hover { background: rgba(255, 255, 255, .13); }