/* ===== Luca Messages – Overlay v6 ===== */
:root{
  --luca-panel-w-desktop: 25vw;   /* Desktop-Breite */
  --luca-panel-w-mobile: 93vw;    /* Mobile-Breite */
}

/* Outer overlay container */
.luca-msgs{
  position: fixed;
  right: 0;
  top: 0;
  height: 100dvh;                 /* stabile, notch-sichere Höhe */
  width: var(--luca-panel-w-desktop);
  max-width: 560px;
  min-width: 320px;
  transform: translateX(100%);    /* geschlossen */
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  z-index: 9999999;               /* über jedem Header/Sticky-Nav */
  pointer-events: auto;
  display: flex;
  overscroll-behavior: contain;
}

/* Offen-Zustand */
.luca-msgs.is-open{
  transform: translateX(0);
}

/* Mobile: echte 85% vom Viewport, kein Fullscreen */
@media (max-width: 900px){
  .luca-msgs{
    width: var(--luca-panel-w-mobile); /* 85vw */
    max-width: none;
    min-width: 0;
    border-radius: 0;
    height: 100dvh;
  }
}

/* Inner wrapper (Chatbereich) */
.luca-msgs__inner{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;                /* Scroll passiert in den Chat-Containern */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  background: rgba(255,255,255,.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: -22px 0 48px rgba(0,0,0,.18);
  border-left: 1px solid rgba(0,0,0,.06);
}

/* Better Messages / Youzify Chat-Höhen */
#luca-messages-panel .bp-messages-single-thread-wrap,
#luca-messages-panel .bp-messages-wrapper,
#luca-messages-panel .bp-messages-chats,
#luca-messages-panel .bp-messages-chat-main,
#luca-messages-panel .bpbm-chat-wrap,
#luca-messages-panel .bpbm-chat-main,
#luca-messages-panel .bpbm-chat-main-primary{
  height: 100% !important;
  min-height: 0 !important;
}

/* Trigger-Buttons */
.luca-mmsgs-trigger,
.luca-msgs-trigger{
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(90deg,#6ea8ff,#d66cff);
  color: #fff;
}

/* Backdrop: klickbare Fläche außerhalb des Panels
   – deckt den gesamten Viewport ab, liegt UNTER dem Panel */
.luca-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9999998;
  display: none;
  background: transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}

/* Sichtbar, solange der Chat geöffnet ist (Mobile + Desktop) */
body.luca-msgs-open .luca-backdrop{
  display: block;
}

/* Desktop: kein blur im Hintergrund, nur transparente Klickfläche */
@media (min-width: 901px){
  body.luca-msgs-open .luca-backdrop{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
  }
}

/* Globaler Scroll-Lock für Touch-Geräte:
   verhindert Pull-to-Refresh & Scroll-Chaining,
   aber Desktop-Mousewheel bleibt davon unberührt */
html.luca-msgs-open,
body.luca-msgs-open{
  overscroll-behavior: none;
  touch-action: none;
}

/* Zusätzliche Sicherung für typische Layout-Wrapper */
body.luca-msgs-open #youzify-bp,
body.luca-msgs-open .site,
body.luca-msgs-open .site-content,
body.luca-msgs-open #page{
  overscroll-behavior: none;
  touch-action: none;
}

/* Im Panel selbst darf normal gescrollt werden (auf Touch-Geräten) */
body.luca-msgs-open .luca-msgs__inner,
body.luca-msgs-open .luca-msgs__inner *{
  touch-action: auto;
}