/* =====================================================================
   NovaCanvas Mobile Dock — premium glassmorphism floating dock.
   Tokens via CSS variables so theme/colors can be swapped at runtime.
   ===================================================================== */

/* --- design tokens (defaults, overridden inline by renderer) --------- */
.ncmd-dock {
  --ncmd-accent: #6C5CE7;
  --ncmd-glow:   #FF6B9D;
  --ncmd-z:      9990;
  --ncmd-bg:     rgba(14, 16, 27, .68);
  --ncmd-bg-strong: rgba(14, 16, 27, .85);
  --ncmd-border: rgba(255, 255, 255, .10);
  --ncmd-ink:    rgba(255, 255, 255, .82);
  --ncmd-ink-dim: rgba(255, 255, 255, .50);
  --ncmd-ink-strong: #ffffff;
  --ncmd-shadow: 0 18px 50px -10px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .22);
  --ncmd-blur:   28px;
  --ncmd-radius: 28px;
  --ncmd-h:      66px;
  --ncmd-pad-x:  10px;
  --ncmd-gap:    2px;
  --ncmd-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  --ncmd-side:   12px;
  --ncmd-fab-size: 56px;
}

/* --- container ------------------------------------------------------- */
.ncmd-dock {
  position: fixed;
  left: 50%;
  bottom: var(--ncmd-bottom);
  transform: translateX(-50%) translateY(0);
  width: calc(100% - (var(--ncmd-side) * 2));
  max-width: 460px;
  height: var(--ncmd-h);
  z-index: var(--ncmd-z);
  pointer-events: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
  transition: transform .42s cubic-bezier(.2, .9, .3, 1.1), opacity .3s ease;
}
.ncmd-dock,
.ncmd-dock * { box-sizing: border-box; }

/* Hidden state (auto-hide on scroll OR modal-open) */
.ncmd-dock.is-hidden {
  transform: translateX(-50%) translateY(150%);
  opacity: 0;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────
   CSS-only safety net using :has() — if ANY NovaCanvas modal is open,
   the dock disappears even without JS (cache, JS error, slow load).
   :has() is supported on Safari 15.4+, Chrome 105+, Firefox 121+ —
   covers 95%+ of mobile browsers in 2026.
   ───────────────────────────────────────────────────────────────────── */
body:has(.nc-studio-modal-bg) .ncmd-dock,
body:has(.nc-modal-overlay)   .ncmd-dock,
body:has(.nc-modal-bg)        .ncmd-dock,
body:has(.nc-credits-modal-bg) .ncmd-dock,
body:has(.nc-mvola-modal-bg)  .ncmd-dock,
body:has(.nc-format-modal)    .ncmd-dock,
body:has(.nc-share-modal)     .ncmd-dock,
body:has(#nc-result-popup)    .ncmd-dock {
  transform: translateX(-50%) translateY(150%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- inner pill (glass background) ----------------------------------
   IMPORTANT: overflow MUST be visible so the central FAB can lift above
   the dock's top edge (margin-top: -22px). The glass + rounded corners
   are produced by background + border-radius which DO NOT need overflow
   clipping. We use a separate ::before sheen positioned inside the pill. */
.ncmd-inner {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  height: 100%;
  padding: 0 var(--ncmd-pad-x);
  gap: var(--ncmd-gap);
  background: var(--ncmd-bg);
  border: 1px solid var(--ncmd-border);
  border-radius: var(--ncmd-radius);
  backdrop-filter: blur(var(--ncmd-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--ncmd-blur)) saturate(180%);
  box-shadow: var(--ncmd-shadow);
  overflow: visible;
}

/* Subtle top sheen — clipped to the pill via its own border-radius. */
.ncmd-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, transparent 100%);
  pointer-events: none;
  border-radius: var(--ncmd-radius) var(--ncmd-radius) 0 0;
}

/* Animated rainbow glow rail at the bottom edge */
.ncmd-glow-rail {
  position: absolute;
  inset: auto 14px -1px 14px;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ncmd-accent) 30%,
    var(--ncmd-glow) 50%,
    var(--ncmd-accent) 70%,
    transparent 100%
  );
  opacity: .55;
  border-radius: 2px;
  pointer-events: none;
  animation: ncmdRailShift 6s ease-in-out infinite alternate;
}
@keyframes ncmdRailShift {
  0%   { transform: translateX(-6%); opacity: .45; }
  100% { transform: translateX(6%);  opacity: .75; }
}

/* --- items ---------------------------------------------------------- */
.ncmd-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: calc(100% - 8px);
  margin: 4px 0;
  padding: 4px 4px;
  color: var(--ncmd-ink-dim);
  background: transparent;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  text-decoration: none !important;
  font: inherit;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  transition: color .22s ease, transform .14s ease, background .22s ease;
}
.ncmd-item:focus-visible {
  outline: 2px solid var(--ncmd-accent);
  outline-offset: 2px;
}
.ncmd-item:active { transform: scale(.92); }
.ncmd-item:hover { color: var(--ncmd-ink); background: rgba(255, 255, 255, .04); }

.ncmd-item.is-active {
  color: var(--ncmd-ink-strong);
}
.ncmd-item.is-active .ncmd-icon-wrap::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ncmd-accent) 38%, transparent), transparent 70%);
  z-index: -1;
  filter: blur(6px);
  opacity: .9;
}
.ncmd-item.is-active::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ncmd-accent), var(--ncmd-glow));
  box-shadow: 0 0 14px var(--ncmd-glow);
  opacity: 0;
  animation: ncmdActiveBar .4s .05s ease forwards;
}
@keyframes ncmdActiveBar {
  to { opacity: 1; transform: translateX(-50%) scaleX(1.2); }
}

/* --- icon wrapper & svg --------------------------------------------- */
.ncmd-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  z-index: 1;
}
.ncmd-svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.85;
  transition: transform .22s ease;
}
.ncmd-item:active .ncmd-svg { transform: scale(.85); }
.ncmd-item.is-active .ncmd-svg { stroke-width: 2.1; }

/* --- label ---------------------------------------------------------- */
.ncmd-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -.1px;
  line-height: 1;
  white-space: nowrap;
  opacity: .9;
  transition: color .22s ease, opacity .22s ease;
}
.ncmd-no-labels .ncmd-label { display: none; }
.ncmd-no-labels .ncmd-icon-wrap { width: 32px; height: 32px; }
.ncmd-no-labels .ncmd-svg { width: 28px; height: 28px; }

/* --- badge (cart count) --------------------------------------------- */
.ncmd-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #FF3D71, #FF6B9D);
  box-shadow: 0 0 0 2px var(--ncmd-bg-strong), 0 4px 10px rgba(255, 61, 113, .45);
  letter-spacing: -.2px;
  animation: ncmdBadgePop .35s cubic-bezier(.2, .9, .3, 1.4);
}
@keyframes ncmdBadgePop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.ncmd-badge-hidden { display: none; }
.ncmd-badge-bounce { animation: ncmdBadgePop .35s cubic-bezier(.2, .9, .3, 1.4); }

/* --- FAB (central magic button) ------------------------------------- */
.ncmd-fab {
  position: relative;
  align-self: stretch;
  margin: -22px 0 0;
  color: #fff !important;
}
.ncmd-fab .ncmd-icon-wrap {
  width: var(--ncmd-fab-size);
  height: var(--ncmd-fab-size);
  border-radius: 50%;
  background: conic-gradient(from 220deg, var(--ncmd-accent), var(--ncmd-glow), #FFD700, var(--ncmd-accent));
  box-shadow:
    0 12px 28px -6px color-mix(in srgb, var(--ncmd-glow) 60%, transparent),
    0 4px 14px color-mix(in srgb, var(--ncmd-accent) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  z-index: 2;
  animation: ncmdFabFloat 5s ease-in-out infinite;
}
.ncmd-fab .ncmd-svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
}
.ncmd-fab .ncmd-label {
  margin-top: 2px;
  color: var(--ncmd-ink-strong);
  font-weight: 700;
}
.ncmd-fab::after {
  /* Soft cradle in the dock so the FAB feels "lifted out" of the bar */
  content: "";
  position: absolute;
  inset: -16px -8px auto -8px;
  height: 28px;
  background: radial-gradient(closest-side at 50% 100%, rgba(0, 0, 0, .35), transparent 75%);
  z-index: 0;
  pointer-events: none;
}
.ncmd-fab:hover .ncmd-icon-wrap { transform: scale(1.05); }
.ncmd-fab:active .ncmd-icon-wrap { transform: scale(.92); }
.ncmd-fab:active .ncmd-svg { transform: none; }
@keyframes ncmdFabFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Rotating gradient ring around the FAB */
.ncmd-fab-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--ncmd-accent), var(--ncmd-glow), #FFD700, var(--ncmd-accent));
  filter: blur(6px);
  opacity: .55;
  z-index: -1;
  animation: ncmdFabSpin 7s linear infinite;
}
.ncmd-fab-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ncmd-glow) 30%, transparent), transparent 70%);
  z-index: -2;
  opacity: .85;
  pointer-events: none;
  animation: ncmdFabPulse 2.5s ease-in-out infinite;
}
@keyframes ncmdFabSpin {
  to { transform: rotate(360deg); }
}
@keyframes ncmdFabPulse {
  0%, 100% { transform: scale(1);   opacity: .55; }
  50%      { transform: scale(1.18); opacity: .85; }
}

/* --- ripple --------------------------------------------------------- */
.ncmd-touch-ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255, 255, 255, .22), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.ncmd-item.is-rippling .ncmd-touch-ripple { opacity: 1; }

/* --- theme variants ------------------------------------------------- */
/* DARK (default already dark) */
.ncmd-theme-dark .ncmd-inner {
  background: rgba(14, 16, 27, .85);
}

/* LIGHT */
.ncmd-theme-light {
  --ncmd-bg: rgba(255, 255, 255, .82);
  --ncmd-bg-strong: rgba(255, 255, 255, .95);
  --ncmd-border: rgba(15, 23, 42, .08);
  --ncmd-ink: rgba(15, 23, 42, .76);
  --ncmd-ink-dim: rgba(15, 23, 42, .50);
  --ncmd-ink-strong: #0F172A;
  --ncmd-shadow: 0 18px 50px -10px rgba(15, 23, 42, .25), 0 4px 14px rgba(15, 23, 42, .08);
}
.ncmd-theme-light .ncmd-badge { box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(255, 61, 113, .35); }

/* AUTO follows system */
@media (prefers-color-scheme: light) {
  .ncmd-theme-auto {
    --ncmd-bg: rgba(255, 255, 255, .82);
    --ncmd-bg-strong: rgba(255, 255, 255, .95);
    --ncmd-border: rgba(15, 23, 42, .08);
    --ncmd-ink: rgba(15, 23, 42, .76);
    --ncmd-ink-dim: rgba(15, 23, 42, .50);
    --ncmd-ink-strong: #0F172A;
    --ncmd-shadow: 0 18px 50px -10px rgba(15, 23, 42, .25), 0 4px 14px rgba(15, 23, 42, .08);
  }
  .ncmd-theme-auto .ncmd-badge { box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(255, 61, 113, .35); }
}

/* GLASS AURORA — premium */
.ncmd-theme-glass-aurora .ncmd-inner {
  background:
    linear-gradient(135deg, rgba(108, 92, 231, .22) 0%, rgba(255, 107, 157, .14) 50%, rgba(255, 215, 0, .12) 100%),
    rgba(14, 16, 27, .55);
  border-color: rgba(255, 255, 255, .14);
}
.ncmd-theme-glass-aurora .ncmd-inner::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, transparent 100%);
}

/* GLASS ONYX — ultra dark premium */
.ncmd-theme-glass-onyx .ncmd-inner {
  background: linear-gradient(180deg, rgba(8, 9, 14, .85) 0%, rgba(20, 22, 36, .80) 100%);
  border-color: rgba(255, 255, 255, .06);
}

/* --- shape variants ------------------------------------------------- */
.ncmd-shape-capsule {
  max-width: 360px;
  --ncmd-h: 58px;
  --ncmd-radius: 32px;
}
.ncmd-shape-edge {
  left: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  max-width: none;
  height: calc(var(--ncmd-h) + env(safe-area-inset-bottom, 0px));
}
.ncmd-shape-edge .ncmd-inner {
  border-radius: 18px 18px 0 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ncmd-shape-edge.is-hidden {
  transform: translateY(150%);
}
.ncmd-shape-edge .ncmd-glow-rail { display: none; }

/* --- responsive niceties -------------------------------------------- */
@media (max-width: 360px) {
  .ncmd-dock { --ncmd-fab-size: 50px; --ncmd-h: 62px; }
  .ncmd-label { font-size: 9.5px; }
}

/* --- reduce-motion respect ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ncmd-fab .ncmd-icon-wrap,
  .ncmd-fab-ring,
  .ncmd-fab-halo,
  .ncmd-glow-rail {
    animation: none !important;
  }
}

/* --- legacy bottom menus — hide when our dock is present ------------
   Covers WP Bottom Menu plugin + the most common WooCommerce / mobile
   bottom bars shipped by themes (Flatsome, Woodmart, Botiga, Astra,
   Blocksy, Storefront-pro, Shoptimizer, Phlox, XStore…). If your theme
   uses something different, add its selector in:
     Apparence → Personnaliser → CSS additionnel
   with:  .your-theme-bottom-bar { display:none !important; }     */
body.ncmd-active .wp-bottom-menu,
body.ncmd-active .wp-bottom-menu-search-form-wrapper,
body.ncmd-active .wp-bottom-menu-nav-wrapper,
body.ncmd-active .mobile-bottom-bar,
body.ncmd-active .mobile-bottom-menu,
body.ncmd-active .mobile-bottom-navigation,
body.ncmd-active .mobile-bottombar,
body.ncmd-active .mobile-bottom-nav,
body.ncmd-active .bottom-mobile-menu,
body.ncmd-active .mobile-tab-bar,
body.ncmd-active .footer-mobile-bar,
body.ncmd-active .footer-mobile-menu,
body.ncmd-active .woodmart-mobile-bottom-bar,
body.ncmd-active .xts-mobile-bottom-bar,
body.ncmd-active .botiga-bottom-bar,
body.ncmd-active .botiga-mobile-bottom-bar,
body.ncmd-active .ast-mobile-bottom-bar,
body.ncmd-active .ast-builder-grid-row-mobile-bottom,
body.ncmd-active .ct-mobile-bottom-bar,
body.ncmd-active .blocksy-mobile-bottom-bar,
body.ncmd-active .shoptimizer-bottom-bar,
body.ncmd-active .phlox-mobile-bottom,
body.ncmd-active .flatsome-mobile-menu-mb,
body.ncmd-active .mobile-menu-bottom,
body.ncmd-active .uael-bottom-bar,
body.ncmd-active .elementor-mobile-bottom-bar,
body.ncmd-active #bottom-mobile-menu,
body.ncmd-active #mobile-menu-bottom,
body.ncmd-active #mobile-bottom-bar,
body.ncmd-active #footer-mobile-bar {
  display: none !important;
}

/* --- safe scroll runway: ensure last CTA on host pages never hides -- */
body.ncmd-active {
  --ncmd-runway: calc(var(--ncmd-h) + var(--ncmd-bottom) + 18px);
}
@media (max-width: 1023px) {
  body.ncmd-active .nc-ai-app,
  body.ncmd-active .wpbm-page-content {
    padding-bottom: var(--ncmd-runway, 100px) !important;
  }
}