/* Xasform Theme Engine: Advanced Theme Variants & Styles */

/* ==========================================================================
   1. Light Theme (Default clean gallery)
   ========================================================================== */
html.theme-light {
  --theme-accent: #0066FF;
  --theme-bg: #FFFFFF;
  --theme-panel: #FFFFFF;
  --theme-border: #E7E7E7;
}

/* ==========================================================================
   2. Dark Theme (Obsidian mode)
   ========================================================================== */
html.theme-dark {
  --theme-accent: #0066FF;
  --theme-bg: #141414;
  --theme-panel: #1A1A1A;
  --theme-border: #252525;
  color-scheme: dark;
}

/* ==========================================================================
   3. Pastel Theme (Warm soft candy & lavender)
   ========================================================================== */
html.theme-pastel {
  --theme-accent: #ec4899;
  --theme-bg: #fdf4f8;
  --theme-panel: #ffffff;
  --theme-border: #fce7f3;
  color-scheme: light;
}

html.theme-pastel body {
  background-color: #fdf4f8 !important;
}

html.theme-pastel .bg-lightBackground,
html.theme-pastel .bg-darkBackground {
  background-color: #fdf4f8 !important;
}

html.theme-pastel .bg-panelLight,
html.theme-pastel .bg-panelDark {
  background-color: #ffffff !important;
  border-color: #fbcfe8 !important;
}

html.theme-pastel .border-[#E7E7E7],
html.theme-pastel .border-[#252525],
html.theme-pastel .border-neutral-200,
html.theme-pastel .border-neutral-800 {
  border-color: #fbcfe8 !important;
}

html.theme-pastel .text-skyBlue,
html.theme-pastel .text-mainBlue {
  color: #db2777 !important;
}

html.theme-pastel .bg-skyBlue,
html.theme-pastel .bg-mainBlue {
  background-color: #ec4899 !important;
}

html.theme-pastel .btn-primary {
  background-color: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
}
html.theme-pastel .btn-primary:hover {
  background-color: #db2777 !important;
}

/* ==========================================================================
   4. Midnight Theme (Deep Cosmic Indigo & Glowing Cyan)
   ========================================================================== */
html.theme-midnight {
  --theme-accent: #38bdf8;
  --theme-bg: #0b0f19;
  --theme-panel: #111827;
  --theme-border: #1e293b;
  color-scheme: dark;
}

html.theme-midnight body {
  background-color: #0b0f19 !important;
  color: #f1f5f9 !important;
}

html.theme-midnight .bg-darkBackground,
html.theme-midnight .bg-lightBackground {
  background-color: #0b0f19 !important;
}

html.theme-midnight .bg-panelDark,
html.theme-midnight .bg-panelLight {
  background-color: #111827 !important;
  border-color: #1e293b !important;
}

html.theme-midnight .border-[#E7E7E7],
html.theme-midnight .border-[#252525],
html.theme-midnight .border-neutral-200,
html.theme-midnight .border-neutral-800 {
  border-color: #1e293b !important;
}

html.theme-midnight .text-skyBlue,
html.theme-midnight .text-mainBlue {
  color: #38bdf8 !important;
}

html.theme-midnight .bg-skyBlue,
html.theme-midnight .bg-mainBlue {
  background-color: #0284c7 !important;
}

html.theme-midnight .btn-primary {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}
html.theme-midnight .btn-primary:hover {
  background-color: #0369a1 !important;
}

/* ==========================================================================
   Watermark & Floating Brand Styles
   ========================================================================== */
.watermark-badge {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.watermark-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.kebab-menu {
  position: absolute;
  right: 0;
  top: 1.75rem;
  z-index: 50;
  width: 11rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 0.25rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  font-size: 0.75rem;
}
html.dark .kebab-menu {
  background: #181818;
  border-color: #262626;
}

.search-box input {
  padding-left: 2.25rem !important;
  padding-right: 2rem !important;
}

.mode-toggle {
  margin-top: 1rem;
  display: flex;
  border-radius: 0.5rem;
  padding: 0.25rem;
  font-size: 0.75rem;
  background: #f3f4f6;
}
html.dark .mode-toggle {
  background: #222222;
}

.ai-new-prompt {
  width: 100%;
  font-size: 12px;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  outline: none;
  transition: border-color 0.15s ease;
}
html.dark .ai-new-prompt {
  border-color: #262626;
  background: #141414;
  color: #f5f5f7;
}
.ai-new-prompt:focus {
  border-color: #0066FF;
}

/* New-form title popup (command-bar ala builder) */
.ai-title-popup{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.ai-title-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.ai-title-card{position:relative;width:100%;max-width:560px;text-align:center}
.ai-title-label{margin:0 0 12px;font-size:13px;font-weight:600;color:#fff;opacity:.9}
.ai-title-bar{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #e7e7e7;border-radius:999px;padding:6px 6px 6px 22px;box-shadow:0 24px 64px rgba(0,0,0,.35)}
html.dark .ai-title-bar{background:#1c1c1e;border-color:#2c2c2e}
.ai-title-bar input[name="title"]{flex:1;min-width:0;width:auto;border:0 !important;outline:none;background:transparent !important;box-shadow:none !important;-webkit-appearance:none;appearance:none;font-size:15px;font-family:inherit;color:#111827;padding:10px 4px}
html.dark .ai-title-bar input{color:#fff}
.ai-title-bar input::placeholder{color:#9ca3af}
.ai-title-bar button{width:44px;height:44px;border-radius:50%;background:#0066ff;color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s}
.ai-title-bar button svg{width:18px;height:18px}
.ai-title-bar button:hover{background:#141414}
html.dark .ai-title-bar button{background:#0066ff;color:#fff}
html.dark .ai-title-bar button:hover{background:#000;color:#fff}
.ai-title-hint{margin:10px 0 0;font-size:11px;color:rgba(255,255,255,.65)}
.ai-title-hint kbd{background:rgba(255,255,255,.15);border-radius:4px;padding:1px 6px;font-family:inherit;font-size:10px}