/* Persistent Bottom Bar (glass + subtle rainbow border) */
:root {
  --pbbar-height: 72px;
  --pbbar-padding: 12px;
  --pbbar-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Match the header’s translucent glass colour for a cohesive look. */
  --pbbar-bg: rgba(50, 0, 75, 0.08);
  --pbbar-backdrop: blur(2px);
  --pbbar-z: 900;
  --pbbar-radius: 18px;
  --pbbar-maxw: 100%; /* span full width by default */
  --pbbar-border-opacity: 0.35; /* subtle rainbow */
  --pbbar-border-width: 1.5px;
  --pbbar-border-speed: 18s;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Use the same hue in dark mode with a similar opacity */
    --pbbar-bg: rgba(50, 10, 75, 0.08);
  }
}

.persistent-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--pbbar-z);
  display: flex;
  justify-content: center;
  pointer-events: none; /* container shouldn't block; inner content handles clicks */
}

.persistent-bottom-bar .pbbar-inner {
  position: relative;
  width: min(100%, var(--pbbar-maxw));
  margin: 0 auto;
  padding: var(--pbbar-padding) var(--pbbar-padding) calc(var(--pbbar-padding) + var(--pbbar-safe-bottom));
  background: var(--pbbar-bg);
  -webkit-backdrop-filter: var(--pbbar-backdrop);
  backdrop-filter: var(--pbbar-backdrop);
  border-top-left-radius: var(--pbbar-radius);
  border-top-right-radius: var(--pbbar-radius);
  box-shadow: 0 -2px 3px rgba(0,0,0,0.25);
  pointer-events: auto; /* only inner can capture */
  overflow: hidden; /* for border mask */
}

/* Subtle animated rainbow border around the bar */

}

.persistent-bottom-bar .action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 560px) {
  .persistent-bottom-bar .action-row.two {
    grid-template-columns: 1fr 1fr;
  }
}

/* Make buttons fill width, keep pill shape, ensure white text in light mode */
.persistent-bottom-bar .btn {
  width: 100%;
  border-radius: 999px;
  color: #000000 !important;           /* force white text in light mode */
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

/* If secondary looks too dim on light themes, nudge contrast */
.persistent-bottom-bar .btn.btn-secondary {
  opacity: 0.95;
}

.pbbar-spacer {
  height: calc(var(--pbbar-height) + var(--pbbar-padding) * 2 + var(--pbbar-safe-bottom));
}


/* --- Animated rainbow BORDER on the buttons themselves (subtle) --- */
:root {
  --pbborder-alpha: 0.52;      /* LOWER opacity for subtle border */
  --pbborder-w: 1.5px;         /* border thickness */
  --pbborder-speed: 16s;       /* slower is subtler */
}

.persistent-bottom-bar .btn {
  position: relative;
  overflow: hidden;
  color: #FFF !important;                 /* ensure white text in light mode */
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

/* Draw a masked, animated border only (no fill), sliding left->right (not spinning) */
.persistent-bottom-bar .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--pbborder-w);
  background: linear-gradient(90deg,
    #ff6b6b,
    #f7d794,
    #1dd1a1,
    #54a0ff,
    #5f27cd,
    #ff6b6b
  );
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: pbborder-slide var(--pbborder-speed) linear infinite;
  opacity: var(--pbborder-alpha);
  pointer-events: none;
}

@keyframes pbborder-slide {
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .persistent-bottom-bar .btn::after {
    animation: none;
    background-position: 50% 0;
  }
}



/* --- Layout: keep two buttons on one line even on small screens --- */
.persistent-bottom-bar .action-row.two {
  grid-template-columns: 1fr 1fr !important;
}

/* Tweak spacing and touch target size */
.persistent-bottom-bar .action-row { gap: 8px; }
.persistent-bottom-bar .btn { min-height: 44px; }





/* Force two buttons to render side-by-side at all widths */
.persistent-bottom-bar .action-row.two {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}
.persistent-bottom-bar .action-row.two > .btn {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* === Size boost for Generate buttons (fits better inside buttons) === */
.persistent-bottom-bar .btn {
  font-size: clamp(1.05rem, 2.2vw + 0.2rem, 1.25rem);
  line-height: 1.2;
  padding: 0.9rem 1.1rem;
  min-height: 48px;
}

/* Keep two-button layout tidy on very small screens */
@media (max-width: 380px) {
  .persistent-bottom-bar .action-row.two .btn {
    font-size: 1.05rem;
    padding: 0.8rem 0.9rem;
    min-height: 44px;
  }
}

/* === Generate buttons: larger, blocky font, better fit === */
.persistent-bottom-bar .btn {
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: clamp(1.2rem, 2.8vw + 0.2rem, 1.5rem);
  line-height: 1.15;
  padding: 0.95rem 1.2rem;
  min-height: 52px;
  text-rendering: optimizeLegibility;
}

/* Keep two-button layout tidy on narrower screens */
@media (max-width: 420px) {
  .persistent-bottom-bar .action-row.two .btn {
    font-size: 1.1rem;
    padding: 0.85rem 0.9rem;
    min-height: 46px;
    letter-spacing: 0.01em;
  }
}

/* === Mode-specific glass for Generate buttons ========================= */
/* Light mode: white glass */
:root[data-theme="light"] .persistent-bottom-bar .btn.liquid-glass,
[data-theme="light"] .persistent-bottom-bar .btn.liquid-glass {
  background: rgba(255, 255, 255, 0.8) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* Dark mode: black glass */
:root[data-theme="dark"] .persistent-bottom-bar .btn.liquid-glass,
[data-theme="dark"] .persistent-bottom-bar .btn.liquid-glass {
  background: rgba(0, 0, 0, 0.8) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  border-color: rgba(255,255,255,0.35) !important;
}



/* Keep two-button layout tidy on narrower screens */
@media (max-width: 420px) {
  .persistent-bottom-bar .action-row.two .btn {
    font-size: 1.2rem !important;
    padding: 0.9rem 1rem !important;
    min-height: 48px !important;
  }
}



/* === Update v4: lighter tint + shorter buttons (keep v3 font size) === */
.persistent-bottom-bar .btn {
  /* keep inherited font from v3; adjust box to reduce height */
  padding: 0.6rem 1rem !important;
  min-height: 48px !important;
  line-height: 1.08 !important; /* slightly tighter for tall text */
}

/* Two-button layout on narrow screens */
@media (max-width: 420px) {
  .persistent-bottom-bar .action-row.two .btn {
    padding: 0.55rem 0.85rem !important;
    min-height: 44px !important;
  }
}