/* ===== LUX Beauty Assistant ===== */
.lux-chat-widget{position:fixed;right:22px;bottom:24px;z-index:9998;font-family:inherit;color:#292723}
.lux-chat-toggle{display:flex;align-items:center;gap:10px;background:#282925;color:#fff;border:1px solid #a9907c;border-radius:999px;padding:13px 18px;box-shadow:0 8px 28px #0002;cursor:pointer;font:inherit;font-size:13px;letter-spacing:.03em}
.lux-chat-toggle:hover,.lux-chat-toggle:focus-visible{background:#49423d}
.lux-chat-symbol{font-size:19px;line-height:1;color:#d6bca6}
.lux-chat-panel{position:absolute;right:0;bottom:calc(100% + 14px);width:min(390px,calc(100vw - 28px));height:min(600px,calc(100dvh - 115px));background:#fcfaf7;border:1px solid #e6dbd0;border-radius:16px;box-shadow:0 18px 65px #0003;overflow:hidden;display:flex;flex-direction:column}
.lux-chat-panel[hidden],.lux-chat-questions[hidden],.lux-chat-answer[hidden],.lux-chat-back[hidden]{display:none!important}
.lux-chat-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;background:#292925;color:#fff}
.lux-chat-header strong{font-size:16px;font-weight:500;letter-spacing:.03em}
.lux-chat-header small{display:block;margin-top:4px;color:#dbc7b5;font-size:11px}
.lux-chat-close{border:0;background:transparent;color:white;font-size:26px;line-height:1;cursor:pointer;padding:2px 5px}
.lux-chat-content{padding:18px 18px 10px;overflow-y:auto;flex:1;min-height:0}
.lux-chat-intro{font-size:13px;line-height:1.6;margin:0 0 14px;color:#625b54}
.lux-chat-search{width:100%;box-sizing:border-box;padding:12px 13px;background:#fff;border:1px solid #d8cabe;border-radius:8px;font:inherit;font-size:13px;color:#282723;margin-bottom:8px}
.lux-chat-search:focus-visible,.lux-chat-question:focus-visible,.lux-chat-back:focus-visible{outline:2px solid #9e806d;outline-offset:2px}
.lux-chat-count{font-size:11px;color:#877b70;margin:5px 0 12px}
.lux-chat-questions{display:grid;gap:7px}
.lux-chat-question{text-align:left;background:white;border:1px solid #e8ded5;border-radius:9px;padding:11px 13px;color:#302b27;cursor:pointer;font:inherit;font-size:12.5px;line-height:1.4}
.lux-chat-question:hover{border-color:#b99c86;background:#f7f1eb}
.lux-chat-answer{background:white;border:1px solid #e8ded5;border-radius:11px;padding:16px;margin-top:8px}
.lux-chat-answer h4{font-size:16px;font-weight:500;line-height:1.35;margin:0 0 12px}
.lux-chat-answer p{font-size:13px;line-height:1.7;margin:0}
.lux-chat-back{border:0;background:none;color:#8b6f5c;cursor:pointer;padding:7px 0;font:inherit;font-size:12px}
.lux-chat-empty{font-size:13px;line-height:1.6;color:#6a5e54}
.lux-chat-links{display:flex;gap:8px;padding:12px 18px 17px;border-top:1px solid #eee5dd;background:#fcfaf7}
.lux-chat-links a{flex:1;text-align:center;text-decoration:none;border-radius:7px;background:#292925;color:white;padding:11px 7px;font-size:12px}
.lux-chat-links a:last-child{background:#eae0d6;color:#312a25}
.lux-chat-links a:hover{filter:brightness(.92)}
/* Verplaats de bestaande WhatsApp-knop zodat beide knoppen zichtbaar blijven. */
body:has(.lux-chat-widget) .whatsapp{bottom:92px}
@media(max-width:600px){.lux-chat-widget{right:12px;bottom:14px}.lux-chat-toggle{padding:12px 14px}.lux-chat-toggle-label{font-size:12px}.lux-chat-panel{height:min(560px,calc(100dvh - 90px))}body:has(.lux-chat-widget) .whatsapp{bottom:80px}}
@media(prefers-reduced-motion:reduce){.lux-chat-widget *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* Compacte FAQ-knop: standaard alleen het sterretje zichtbaar. */
.lux-chat-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  gap: 0;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  transition: width .3s ease, background-color .2s ease;
}
.lux-chat-toggle-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .3s ease, opacity .2s ease;
}
.lux-chat-widget:hover .lux-chat-toggle,
.lux-chat-widget:focus-within .lux-chat-toggle,
.lux-chat-widget.is-expanded .lux-chat-toggle {
  width: 193px;
  gap: 10px;
}
.lux-chat-widget:hover .lux-chat-toggle-label,
.lux-chat-widget:focus-within .lux-chat-toggle-label,
.lux-chat-widget.is-expanded .lux-chat-toggle-label {
  max-width: 150px;
  opacity: 1;
}
/* Op touchapparaten geen plakkende hoverstatus; eerste tik toont label. */
@media (hover: none) {
  .lux-chat-widget:hover .lux-chat-toggle { width: 48px; gap: 0; }
  .lux-chat-widget:hover .lux-chat-toggle-label { max-width: 0; opacity: 0; }
  .lux-chat-widget.is-expanded .lux-chat-toggle,
  .lux-chat-widget:focus-within .lux-chat-toggle { width: 193px; gap: 10px; }
  .lux-chat-widget.is-expanded .lux-chat-toggle-label,
  .lux-chat-widget:focus-within .lux-chat-toggle-label { max-width: 150px; opacity: 1; }
}
@media (max-width: 600px) {
  .lux-chat-toggle { width: 48px; height: 48px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lux-chat-toggle, .lux-chat-toggle-label { transition: none; }
}


/* WhatsApp en FAQ: gelijke diameter, dezelfde rechterlijn en vaste afstand. */
body:has(.lux-chat-widget) .whatsapp {
  right: 22px;
  bottom: 86px;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  body:has(.lux-chat-widget) .whatsapp {
    right: 12px;
    bottom: 76px;
    width: 48px;
    height: 48px;
  }
}