/* Shared continuous CSS background for image-generation workspaces. */

body.empty-state-active .main-content {
  position: relative;
  isolation: isolate;
  background-color: #f5f5f6 !important;
  background-image:
    linear-gradient(rgba(23, 23, 23, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 23, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse 48% 42% at 92% 0%, rgba(255, 90, 61, 0.17) 0%, rgba(255, 122, 69, 0.065) 40%, rgba(255, 122, 69, 0) 74%),
    radial-gradient(ellipse 76% 62% at 50% 3%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.72) 38%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(ellipse 100% 84% at 50% 18%, rgba(23, 23, 23, 0) 52%, rgba(23, 23, 23, 0.04) 100%),
    linear-gradient(180deg, #f1f1f2 0%, #fafafa 46%, #f4f4f5 100%) !important;
  background-position: -1px -1px, -1px -1px, center top, center top, center top, center top !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: 72px 72px, 72px 72px, 100% 760px, 100% 820px, 100% 100%, 100% 100% !important;
}

body.empty-state-active .main-content::before {
  content: none;
}

body.empty-state-active .main-content > .top-banner-wrapper,
body.empty-state-active .main-content > .mobile-header,
body.empty-state-active .main-content > .sidebar-overlay,
body.empty-state-active .main-content > .chat-content-area,
body.empty-state-active .main-content > .chatbot-container,
body.empty-state-active .main-content > .clone-blank-body {
  position: relative;
  z-index: 1;
}

body.empty-state-active .main-content > .mobile-header {
  background: transparent !important;
  border-bottom: 0 !important;
}

body.empty-state-active .chatbot-container.empty-state .center-title-container {
  text-shadow: none;
}

body.empty-state-active .chatbot-container.empty-state .center-title-sub {
  color: #171717 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body.empty-state-active .chatbot-container.empty-state .center-title-desc {
  color: rgba(64, 64, 64, 0.82) !important;
  text-shadow: none;
}

body.empty-state-active .examples-title,
body.empty-state-active .recent-projects-title {
  color: #171717 !important;
  text-shadow: none;
}

body.empty-state-active .chatbot-container.empty-state .chatbot {
  border-color: rgba(23, 23, 23, 0.12) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 8px 26px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

body.empty-state-active .chatbot-container.empty-state .text-input-wrapper {
  background: rgba(255, 255, 255, 0.54) !important;
  border-radius: 14px !important;
}

body.empty-state-active .chatbot-container.empty-state .model-btn-trigger,
body.empty-state-active .chatbot-container.empty-state .setting-tag,
body.empty-state-active .chatbot-container.empty-state .upload-widget {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(212, 212, 212, 0.86) !important;
}

body.empty-state-active .top-banner {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

body.empty-state-active .recent-projects-section,
body.empty-state-active .excellent-examples-section {
  position: relative;
  z-index: 1;
}

body.empty-state-active .clone-blank-body,
body.empty-state-active .clone-workspace {
  background: transparent !important;
}

body.empty-state-active .clone-tool-shell,
body.empty-state-active .clone-control-panel,
body.empty-state-active .clone-workspace-toolbar,
body.empty-state-active .clone-workspace-inner {
  position: relative;
  z-index: 1;
}

body.empty-state-active .clone-control-panel {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.empty-state-active .clone-workspace-toolbar {
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.78) 0%, rgba(250, 250, 250, 0.46) 72%, rgba(250, 250, 250, 0) 100%) !important;
}

body.empty-state-active .clone-hero-copy h1 {
  color: #171717 !important;
  text-shadow: 0 18px 42px rgba(255, 255, 255, 0.58);
}

body.empty-state-active .clone-hero-copy .clone-hero-subtitle {
  color: rgba(64, 64, 64, 0.78) !important;
}

body.empty-state-active .clone-showcase-card,
body.empty-state-active .clone-workspace-tabs {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(23, 23, 23, 0.1) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@media (max-width: 768px) {
  body.empty-state-active .main-content {
    background-size: 48px 48px, 48px 48px, 150% 520px, 140% 620px, 100% 100%, 100% 100% !important;
  }

  body.empty-state-active .chatbot-container.empty-state .center-title-container {
    margin-top: 10px !important;
  }

  body.empty-state-active .chatbot-container.empty-state .chatbot {
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }
}