/* Luca Messages Overlay CSS */

:root {
  --luca-panel-w-desktop: 25vw;
  --luca-panel-w-mobile: 93vw;
}

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

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

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

/* Inner wrapper */
.luca-msgs__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -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 Height Fixes */
#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 */
.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;
}

body.luca-msgs-open .luca-backdrop {
  display: block;
}

@media (min-width: 901px) {
  body.luca-msgs-open .luca-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
  }
}

/* Scroll Lock Classes */
html.luca-msgs-open,
body.luca-msgs-open {
  overscroll-behavior: none;
  touch-action: none;
}

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;
}

body.luca-msgs-open .luca-msgs__inner,
body.luca-msgs-open .luca-msgs__inner * {
  touch-action: auto;
}

/* ==========================================================================
   TAP ME TO CLOSE STRIP (Mobile Only)
   ========================================================================== */
.luca-close-strip {
    position: fixed;
    z-index: 9999999;
    
    /* VERTICAL CENTER */
    top: 50%;
    
    /* HORIZONTAL: 3.5vw is exactly half of the remaining 7vw space */
    left: 3.5vw;
    
    /* TYPOGRAPHY */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 300; 
    color: #ffffff;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    
    /* SHADOWS */
    text-shadow: 0 0 13px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.7);
    
    /* HITBOX */
    cursor: pointer;
    padding: 60px 20px; 
    
    /* INITIAL STATE: Hidden & Rotated */
    /* translate(-50%, -50%) centers it. translateY(50px) pushes it down for slide-in start */
    transform: translate(-50%, -50%) rotate(-90deg) translateY(80px);
    opacity: 0;
    pointer-events: none;
    
    /* ANIMATION OUT (Schnell weg!) - 0.2s */
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

/* ACTIVE STATE */
body.luca-msgs-open .luca-close-strip {
    opacity: 1;
    pointer-events: auto;
    
    /* Reset Y-Translation to 0 -> Slides into position */
    transform: translate(-50%, -50%) rotate(-90deg) translateY(0);
    
    /* ANIMATION IN (Langsam rein!) - 2s */
    transition: transform 2s cubic-bezier(0.1, 0.8, 0.1, 1), opacity 2s ease-out;
}

/* HIDE ON DESKTOP */
@media (min-width: 901px) {
    .luca-close-strip {
        display: none !important;
    }
}