/* Nuvra Creative Studio — canvas-first visual layer.
   Scoped by the existing Creative Studio project selector so this cannot restyle the rest of Nuvra.
   This is presentation-only: generation, billing, provider capability and persistence stay untouched. */

body:has(#creative-project) {
  --cs-bg: #0b0c10;
  --cs-surface: rgba(20, 21, 29, 0.72);
  --cs-surface-strong: rgba(24, 25, 35, 0.88);
  --cs-line: rgba(255,255,255,.075);
  --cs-line-strong: rgba(167,139,250,.22);
  --cs-text: #f5f5f7;
  --cs-muted: #9294a3;
  --cs-purple: #8b5cf6;
  --cs-blue: #4f7df9;
  background: var(--cs-bg);
}

body:has(#creative-project) .min-h-full.bg-background {
  background:
    radial-gradient(80% 42% at 50% -10%, rgba(124,58,237,.13), transparent 68%),
    radial-gradient(55% 35% at 100% 22%, rgba(79,125,249,.06), transparent 72%),
    var(--cs-bg) !important;
}

body:has(#creative-project) .min-h-full.bg-background > .mx-auto {
  max-width: 1180px !important;
  padding-inline: 16px !important;
}

body:has(#creative-project) [class~="border-border/55"][class~="bg-card/30"] {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(#creative-project) [class~="border-border/50"][class~="bg-card/60"],
body:has(#creative-project) [class~="border-border/50"][class~="bg-card/45"] {
  border-color: var(--cs-line) !important;
  background: rgba(255,255,255,.035) !important;
}

body:has(#creative-project) h2.text-lg.font-semibold.tracking-tight {
  font-size: clamp(1.35rem, 4.4vw, 1.8rem) !important;
  letter-spacing: -.035em !important;
}

body:has(#creative-project) h2.text-lg.font-semibold.tracking-tight + p {
  color: var(--cs-muted) !important;
  font-size: .78rem !important;
}

body:has(#creative-project) button[class*="rounded-lg"][class*="text-muted-foreground"]:has(svg) {
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

body:has(#creative-project) textarea {
  min-height: 148px !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 18px !important;
  background: rgba(7,8,12,.72) !important;
  color: var(--cs-text) !important;
  padding: 18px !important;
  line-height: 1.65 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 34px -24px #000 !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

body:has(#creative-project) textarea:focus {
  border-color: rgba(139,92,246,.62) !important;
  background: rgba(8,9,14,.9) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.10), 0 18px 50px -28px rgba(139,92,246,.55) !important;
}

body:has(#creative-project) textarea:focus-visible {
  outline: none !important;
}

body:has(#creative-project) button[class*="rounded-full"] {
  border-color: rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.028) !important;
  color: #a9aab7 !important;
  box-shadow: none !important;
}

body:has(#creative-project) button[class*="rounded-full"]:hover {
  border-color: rgba(139,92,246,.32) !important;
  background: rgba(139,92,246,.09) !important;
  color: #e8e4ff !important;
}

body:has(#creative-project) select,
body:has(#creative-project) input[type="text"],
body:has(#creative-project) input[type="number"] {
  min-height: 42px !important;
  border-color: rgba(255,255,255,.07) !important;
  background: rgba(7,8,12,.58) !important;
  border-radius: 12px !important;
}

body:has(#creative-project) select:focus,
body:has(#creative-project) input:focus {
  border-color: rgba(139,92,246,.55) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.09) !important;
}

body:has(#creative-project) [class*="border-dashed"] {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.018) !important;
  border-radius: 18px !important;
  transition: border-color .18s ease, background .18s ease !important;
}

body:has(#creative-project) [class*="border-dashed"]:hover {
  border-color: rgba(139,92,246,.4) !important;
  background: rgba(139,92,246,.045) !important;
}

body:has(#creative-project) [class*="grid-cols-2"] > div[class*="rounded"] {
  border-color: rgba(255,255,255,.055) !important;
  background: rgba(255,255,255,.022) !important;
}

/* Only the actual generation CTA gets the strong gradient treatment.
   Older rules targeted every button containing bg-primary, which also matched
   compact selection chips such as bg-primary/12 and made them huge neon blocks. */
body:has(#creative-project) .fixed.inset-x-3.bottom-3 button[class*="bg-gradient-to-r"] {
  min-height: 46px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #6f3be8 0%, #5f63e8 52%, #4f7df9 100%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 38px -20px rgba(124,58,237,.75), inset 0 1px 0 rgba(255,255,255,.14) !important;
  color: white !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
}

body:has(#creative-project) .fixed.inset-x-3.bottom-3 button[class*="bg-gradient-to-r"]:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 46px -18px rgba(124,58,237,.8), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Compact controls must remain compact even under the coarse-pointer touch target rule. */
body:has(#creative-project) .scrollbar-none button,
body:has(#creative-project) .creative-project-context button,
body:has(#creative-project) button[class*="bg-primary"]:not([class*="bg-gradient-to-r"]) {
  min-width: auto !important;
  min-height: 32px !important;
  height: auto !important;
  padding-block: 6px !important;
  padding-inline: 11px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: none !important;
  color: #a9aab7 !important;
}

body:has(#creative-project) .scrollbar-none button:hover,
body:has(#creative-project) .creative-project-context button:hover,
body:has(#creative-project) button[class*="bg-primary"]:not([class*="bg-gradient-to-r"]):hover {
  background: rgba(139,92,246,.075) !important;
  border-color: rgba(139,92,246,.28) !important;
  color: #e9e5ff !important;
}

/* Active choices: understated tint + fine accent edge, never a full neon tile. */
body:has(#creative-project) .scrollbar-none button[aria-pressed="true"],
body:has(#creative-project) .scrollbar-none button[class*="bg-primary"] {
  background: rgba(139,92,246,.10) !important;
  border-color: rgba(139,92,246,.34) !important;
  color: #eeeaff !important;
  box-shadow: 0 0 0 1px rgba(139,92,246,.04), 0 8px 22px -18px rgba(139,92,246,.55) !important;
}

body:has(#creative-project) .creative-project-context {
  border-color: rgba(255,255,255,.045) !important;
}

body:has(#creative-project) .creative-project-context select {
  min-height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 3px 22px 3px 0 !important;
}

/* Credit badge inside the Video controls card is redundant with the single action CTA. */
body:has(#creative-project) span[class*="bg-primary/10"] {
  display: none !important;
}

/* The fixed generation rail contains one action only. */
body:has(#creative-project) .fixed.inset-x-3.bottom-3 > div > div:first-child,
body:has(#creative-project) .fixed.inset-x-3.bottom-3 > div > div:last-child > button:first-child,
body:has(#creative-project) .fixed.inset-x-3.bottom-3 > div > div:last-child > span {
  display: none !important;
}

body:has(#creative-project) .fixed.inset-x-3.bottom-3 > div > div:last-child {
  width: 100% !important;
  flex: 1 1 100% !important;
}

body:has(#creative-project) .fixed.inset-x-3.bottom-3 > div > div:last-child > button:last-child {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  flex: 1 1 100% !important;
}

body:has(#creative-project) [role="tablist"] {
  border-color: rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.025) !important;
  border-radius: 14px !important;
  padding: 3px !important;
}

body:has(#creative-project) [role="tablist"] [role="tab"] {
  min-height: 42px !important;
  border-radius: 11px !important;
}

body:has(#creative-project) video,
body:has(#creative-project) audio {
  border-radius: 16px !important;
}

body:has(#creative-project) .creative-studio-header {
  min-height: 56px !important;
  height: 56px !important;
  border-color: rgba(255,255,255,.055) !important;
  background: rgba(11,12,16,.80) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

body:has(#creative-project) .creative-studio-header + * {
  scroll-margin-top: 68px;
}

body:has(#creative-project) .scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body:has(#creative-project) .scrollbar-none::-webkit-scrollbar {
  display: none;
}

body:has(#creative-project) .creative-studio-header button,
body:has(#creative-project) .creative-studio-header a {
  box-shadow: none !important;
}

body:has(#creative-project) .fixed.inset-x-3.bottom-3 {
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 768px) {
  body:has(#creative-project) .fixed.inset-x-3.bottom-3 {
    position: sticky !important;
    inset-inline: auto !important;
    bottom: .75rem !important;
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  body:has(#creative-project) .min-h-full.bg-background > .mx-auto {
    padding-inline: 12px !important;
  }

  body:has(#creative-project) [class*="p-4"] {
    padding: 12px !important;
  }

  body:has(#creative-project) [class*="sm:p-5"] {
    padding: 12px !important;
  }

  body:has(#creative-project) textarea {
    min-height: 132px !important;
    font-size: .94rem !important;
  }

  body:has(#creative-project) .fixed.inset-x-3.bottom-3 {
    inset-inline: 12px !important;
    bottom: 10px !important;
  }

  body:has(#creative-project) .fixed.inset-x-3.bottom-3 > div {
    padding: 6px !important;
    border-radius: 16px !important;
  }

  body:has(#creative-project) .fixed.inset-x-3.bottom-3 button[class*="bg-gradient-to-r"] {
    min-height: 44px !important;
    font-size: .82rem !important;
  }

  body:has(#creative-project) .creative-studio-header {
    margin-inline: -12px !important;
    padding-inline: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#creative-project) * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}