/* Niwa AI — Centerstage Mode (pill launcher + transforms) */

/* === Centerstage Mode - Pill Launcher === */
#za-launcher.za-centerstage {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  flex-direction: row !important;
  width: auto !important;
  height: auto !important;
  z-index: 99999 !important;
  display: flex !important;
}

#za-launcher.za-centerstage .za-badge {
  display: none;
  /* Hide circular badge in centerstage mode */
}

#za-launcher.za-centerstage .za-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 0 20px !important;
  /* Height from admin settings, not hardcoded */
  /* Glassmorph with gradient hover */
  background: rgba(236, 233, 230, 0.35) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 40px !important;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  cursor: pointer !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background-size: 200% auto !important;
  position: relative !important;
  pointer-events: auto !important; /* Ensure clickable */
}

#za-launcher.za-centerstage .za-pill:hover {
  transform: translateY(-3px) scale(1.02) !important;
  background: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%) !important;
  background-position: right center !important;
  background-size: 200% auto !important;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.5),
    0 12px 48px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

#za-launcher.za-centerstage .za-pill-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#za-launcher.za-centerstage .za-pill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#za-launcher.za-centerstage .za-pill-text {
  font-size: 17px;
  font-weight: 500;
  color: var(--za-pill-text-color, #374151) !important;
  white-space: nowrap;
  opacity: 1;
  flex: 1;
}

#za-launcher.za-centerstage .za-pill-arrow {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
  transition: all 0.2s ease;
}

#za-launcher.za-centerstage .za-pill:hover .za-pill-arrow {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

#za-launcher.za-centerstage .za-pill-arrow::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: 3.5px solid var(--za-pill-arrow-color, #374151);
  border-left: 0;
  border-top: 0;
  transform: rotate(225deg);
  margin-top: 4px;
}

/* Pill transformation to X button when chat is open - PERFECT CIRCLE using pill height */
#za-flyout.active~#za-launcher.za-centerstage .za-pill,
#za-launcher.za-centerstage .za-pill.chat-open,
#za-launcher.za-centerstage.za-pill.chat-open {
  /* X button is perfect circle: width and height both equal to pill height */
  width: var(--pill-height, 60px) !important;
  height: var(--pill-height, 60px) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  justify-content: center !important;
  /* Same glassmorph as pill */
  background: rgba(236, 233, 230, 0.35) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background-size: 200% auto !important;
}

#za-flyout.active~#za-launcher.za-centerstage .za-pill:hover,
#za-launcher.za-centerstage .za-pill.chat-open:hover {
  background: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%) !important;
  background-position: right center !important;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.5),
    0 12px 48px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-3px) scale(1.05) !important;
}

#za-flyout.active~#za-launcher.za-centerstage .za-pill-icon,
#za-flyout.active~#za-launcher.za-centerstage .za-pill-text,
#za-launcher.za-centerstage .za-pill.chat-open .za-pill-icon,
#za-launcher.za-centerstage .za-pill.chat-open .za-pill-text {
  display: none !important;
}

#za-flyout.active~#za-launcher.za-centerstage .za-pill-arrow,
#za-launcher.za-centerstage .za-pill.chat-open .za-pill-arrow {
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
}

#za-flyout.active~#za-launcher.za-centerstage .za-pill-arrow::before,
#za-launcher.za-centerstage .za-pill.chat-open .za-pill-arrow::before {
  /* X shape */
  content: "\00D7" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 42px !important;
  font-weight: 300 !important;
  color: var(--za-pill-arrow-open-color, var(--za-pill-arrow-color, #333)) !important;
  border: none !important;
  transform: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Flyout positioning for centerstage - DYNAMIC spacing above X button */
#za-flyout.za-centerstage-flyout {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  /* JavaScript direktno setuje bottom - JEDINO mesto za kontrolu gap-a */
  margin: 0 auto !important;
  transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mobile adjustments for centerstage */
@media (max-width: 767px) {
  #za-launcher.za-centerstage .za-pill {
    padding: 0 16px;
    gap: 10px;
  }

  #za-launcher.za-centerstage .za-pill-text {
    font-size: 14px;
  }

  #za-flyout.za-centerstage-flyout {
    /* JavaScript direktno setuje bottom inline style */
    width: 90% !important;
    max-width: 400px !important;
  }
}