@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   1. CSS VARIABLES & THEME DEFINITIONS
   ========================================================================== */

:root, .vr-workspace {
  /* Colors - Dark Mode (Default) */
  --vr-bg: #0a0a0c !important;
  --vr-surface: #111116 !important;
  --vr-surface-elevated: #1a1a22 !important;
  --vr-card-bg: rgba(17, 17, 22, 0.92) !important;
  --vr-text-primary: #e8e8ec !important;
  --vr-text-dim: #8a8a9e !important;
  --vr-text-muted: #5c5c6e !important;
  --vr-primary: #ccff00 !important;
  --vr-primary-hover: #b3e600 !important;
  --vr-primary-dim: rgba(204, 255, 0, 0.12) !important;
  --vr-primary-border: rgba(204, 255, 0, 0.35) !important;
  --vr-border-subtle: rgba(255, 255, 255, 0.06) !important;
  --vr-border-medium: rgba(255, 255, 255, 0.12) !important;
  --vr-border-focus: rgba(204, 255, 0, 0.5) !important;
  --vr-danger: #ff453a !important;
  --vr-success: #32d74b !important;

  /* Backwards-compatible aliases (used by JS/PHP) */
  --vr-text: var(--vr-text-primary) !important;
  --vr-surface-card: var(--vr-card-bg) !important;
  --vr-border: var(--vr-border-subtle) !important;
  --vr-border-bright: var(--vr-border-medium) !important;
  --vr-accent: #4a8ff7 !important;
  --vr-radius: var(--vr-radius-lg) !important;
  --vr-radius-sm-compat: var(--vr-radius-md) !important;
  --vr-shadow-lg-compat: var(--vr-shadow-lg) !important;

  /* Gradient Glow */
  --vr-glow-bg: radial-gradient(circle at 50% 0%, rgba(204, 255, 0, 0.03) 0%, transparent 60%) !important;

  /* Typography */
  --vr-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  --vr-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace !important;

  /* Spacing */
  --vr-space-1: 4px !important;
  --vr-space-2: 8px !important;
  --vr-space-3: 12px !important;
  --vr-space-4: 16px !important;
  --vr-space-5: 20px !important;
  --vr-space-6: 24px !important;
  --vr-space-8: 32px !important;

  /* Radii */
  --vr-radius-sm: 6px !important;
  --vr-radius-md: 10px !important;
  --vr-radius-lg: 16px !important;
  --vr-radius-full: 9999px !important;

  /* Layout */
  --vr-header-height: 0px !important;
  --vr-dock-width: 56px !important;
  --vr-sidebar-width: 290px !important;

  /* Shadows */
  --vr-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  --vr-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  --vr-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  --vr-shadow-glow: 0 0 16px rgba(204, 255, 0, 0.15) !important;

  /* Z-index */
  --vr-z-base: 10 !important;
  --vr-z-dock: 350 !important;
  --vr-z-header: 200 !important;
  --vr-z-sidebar: 300 !important;
  --vr-z-prompt: 400 !important;
  --vr-z-toast: 1000 !important;
}

.vr-workspace.vr-light {
  /* Royal Indigo SaaS Light Mode Palette (#4f46e5) */
  --vr-bg: #e2e8f0 !important;             /* Slate-200 Soft Canvas Backdrop */
  --vr-surface: #ffffff !important;        /* Pure White Surfaces */
  --vr-surface-elevated: #f1f5f9 !important;/* Slate-100 Light Elevated */
  --vr-card-bg: #ffffff !important;        /* Pure Pristine White Cards */
  --vr-text-primary: #0f172a !important;   /* Slate-900 High Contrast Text */
  --vr-text-dim: #475569 !important;       /* Slate-600 Secondary Text */
  --vr-text-muted: #64748b !important;     /* Slate-500 Muted Text */
  --vr-primary: #4f46e5 !important;        /* Royal Indigo Primary Accent */
  --vr-primary-hover: #4338ca !important;  /* Deep Indigo Hover */
  --vr-primary-dim: rgba(79, 70, 229, 0.08) !important; /* Soft Indigo Tint */
  --vr-primary-border: rgba(79, 70, 229, 0.3) !important;  /* Indigo Border Tint */
  --vr-border-subtle: #cbd5e1 !important;  /* Slate-300 Subtle Border */
  --vr-border-medium: #94a3b8 !important;  /* Slate-400 Medium Border */
  --vr-border-focus: #4f46e5 !important;   /* Royal Indigo Focus */
  --vr-danger: #ef4444 !important;
  --vr-success: #10b981 !important;

  /* Aliases */
  --vr-text: #0f172a !important;
  --vr-surface-card: #ffffff !important;
  --vr-border: #cbd5e1 !important;
  --vr-border-bright: #94a3b8 !important;
  --vr-accent: #4f46e5 !important;

  /* Shadows */
  --vr-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  --vr-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1) !important;
  --vr-shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.14) !important;
  --vr-shadow-glow: 0 0 20px rgba(79, 70, 229, 0.25) !important;
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */

.vr-workspace,
.vr-workspace.vr-ready {
  font-family: var(--vr-font-ui) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--vr-text-primary) !important;
  background-color: var(--vr-bg) !important;
  background-image: var(--vr-glow-bg) !important;
  box-sizing: border-box !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 99990 !important;
  transition: background 0.3s ease, color 0.3s ease !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  opacity: 1 !important;
}

.vr-workspace *, .vr-workspace *::before, .vr-workspace *::after {
  box-sizing: inherit !important;
}

.vr-workspace svg {
  display: block !important;
}

/* GPU Isolation */
.vr-workspace .vr-gpu-isolate {
  backface-visibility: hidden !important;
  transform-style: flat !important;
  transform: translateZ(0) !important;
  will-change: transform, opacity !important;
}

/* ==========================================================================
   3. ANIMATIONS & UTILS
   ========================================================================== */

@keyframes vr-pulse {
  0% { opacity: 1 !important; }
  50% { opacity: 0.5 !important; }
  100% { opacity: 1 !important; }
}

@keyframes vr-fadeIn {
  from { opacity: 0 !important; }
  to { opacity: 1 !important; }
}

@keyframes vr-slideUp {
  from { opacity: 0 !important; transform: translateY(16px) !important; }
  to { opacity: 1 !important; transform: translateY(0) !important; }
}

@keyframes vr-spin {
  to { transform: rotate(360deg) !important; }
}

.vr-spin {
  animation: vr-spin 1s linear infinite !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Chat Load Overlay — covers main area while restoring a previous session */
.vr-chat-load-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10, 10, 12, 0.85) !important;
  backdrop-filter: blur(4px) !important;
  transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

.vr-workspace.vr-light .vr-chat-load-overlay {
  background: rgba(226, 232, 240, 0.9) !important;
}

.vr-chat-load-overlay.vr-loaded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.vr-chat-load-overlay .vr-loader-spinner {
  width: 36px !important;
  height: 36px !important;
  border: 3px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: #ccff00 !important;
  border-radius: 50% !important;
  animation: vr-chatSpin 0.7s linear infinite !important;
}

.vr-workspace.vr-light .vr-chat-load-overlay .vr-loader-spinner {
  border-color: rgba(79, 70, 229, 0.15) !important;
  border-top-color: #4f46e5 !important;
}

@keyframes vr-chatSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   4. SCROLLBARS
   ========================================================================== */

.vr-workspace ::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

.vr-workspace ::-webkit-scrollbar-track {
  background: transparent !important;
}

.vr-workspace ::-webkit-scrollbar-thumb {
  background: var(--vr-border-medium) !important;
  border-radius: var(--vr-radius-full) !important;
}

.vr-workspace ::-webkit-scrollbar-thumb:hover {
  background: var(--vr-text-dim) !important;
}

/* ==========================================================================
   5. WORKSPACE & MAIN LAYOUT
   ========================================================================== */

/* HEADER BAR */
.vr-app-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--vr-header-height) !important;
  min-height: var(--vr-header-height) !important;
  background: var(--vr-surface) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--vr-border-subtle) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 var(--vr-space-4) !important;
  z-index: var(--vr-z-header) !important;
  margin: 0 !important;
}

.vr-app-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.vr-app-header-left, .vr-app-header-right {
  display: flex !important;
  align-items: center !important;
  gap: var(--vr-space-3) !important;
}

.vr-app-header-site-logo {
  height: 24px !important;
  width: auto !important;
}

.vr-app-header-site-title {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--vr-text-primary) !important;
}

.vr-app-header-divider {
  width: 1px !important;
  height: 16px !important;
  background: var(--vr-border-medium) !important;
  margin: 0 var(--vr-space-2) !important;
}

.vr-app-header-title {
  font-weight: 500 !important;
  font-size: 13px !important;
}

.vr-app-header-desc-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--vr-text-muted) !important;
}

.vr-app-header-desc {
  font-size: 12px !important;
  color: var(--vr-text-dim) !important;
}

/* Header Credits */
.vr-header-credit-badge {
  display: flex !important;
  align-items: center !important;
  gap: var(--vr-space-2) !important;
  background: var(--vr-surface-elevated) !important;
  padding: var(--vr-space-1) var(--vr-space-3) !important;
  border-radius: var(--vr-radius-full) !important;
  border: 1px solid var(--vr-border-subtle) !important;
  font-family: var(--vr-font-mono) !important;
  font-size: 12px !important;
}

.vr-credit-icon {
  color: var(--vr-primary) !important;
  width: 14px !important;
  height: 14px !important;
}

.vr-credit-amount {
  font-weight: 600 !important;
  color: var(--vr-text-primary) !important;
}

.vr-credit-label {
  color: var(--vr-text-dim) !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
}

/* Theme Toggle */
.vr-theme-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--vr-radius-full) !important;
  background: transparent !important;
  border: 1px solid var(--vr-border-subtle) !important;
  color: var(--vr-text-dim) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vr-theme-toggle:hover {
  background: var(--vr-surface-elevated) !important;
  color: var(--vr-text-primary) !important;
}

.vr-workspace:not(.vr-light) .vr-theme-icon-moon {
  display: none !important;
}

.vr-workspace.vr-light .vr-theme-icon-sun {
  display: none !important;
}

/* DOCK */
.vr-workspace.vr-dock-expanded {
  --vr-dock-width: 170px !important;
}

.vr-workspace .vr-dock {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--vr-dock-width) !important;
  height: 100% !important;
  background: #121316 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 12px 8px !important;
  gap: 6px !important;
  z-index: var(--vr-z-dock) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Light Mode Shade Elevation #1: Cool Off-White Left Dock (#f1f5f9) ── */
.vr-workspace.vr-light .vr-dock {
  background: #f1f5f9 !important;
  border-right: 1px solid #cbd5e1 !important;
}

.vr-dock.is-expanded {
  width: 180px !important;
  align-items: stretch !important;
  padding: 12px 8px !important;
}

/* ── DARK MODE Dock Button States ── */

/* Dark: Inactive */
.vr-dock-btn {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #a1a1aa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.vr-dock-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
}

/* Dark: Hover */
.vr-dock-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.vr-dock-btn:hover svg {
  stroke: #ffffff !important;
}

/* Dark: Active */
.vr-dock-btn.active, .vr-dock-btn.is-active {
  color: #ccff00 !important;
  background: rgba(204, 255, 0, 0.12) !important;
  border: 1px solid rgba(204, 255, 0, 0.28) !important;
}

.vr-dock-btn.active svg, .vr-dock-btn.is-active svg {
  stroke: #ccff00 !important;
}

/* ── LIGHT MODE Dock Button States ── */

/* Light: Inactive — Slate-800 (#1e293b) for strong contrast on #f1f5f9 dock */
.vr-workspace.vr-light .vr-dock-btn {
  color: #1e293b !important;
}

.vr-workspace.vr-light .vr-dock-btn svg {
  stroke: #1e293b !important;
}

.vr-workspace.vr-light .vr-dock-btn span {
  color: #1e293b !important;
}

/* Light: Hover — Royal Indigo on soft tint */
.vr-workspace.vr-light .vr-dock-btn:hover {
  color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.1) !important;
}

.vr-workspace.vr-light .vr-dock-btn:hover svg {
  stroke: #4f46e5 !important;
}

.vr-workspace.vr-light .vr-dock-btn:hover span {
  color: #4f46e5 !important;
}

/* Light: Active — White on Royal Indigo */
.vr-workspace.vr-light .vr-dock-btn.active,
.vr-workspace.vr-light .vr-dock-btn.is-active {
  color: #ffffff !important;
  background: #4f46e5 !important;
  border: 1px solid #4f46e5 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
}

/* Light: Active + Hover — Keep white, just darken background */
.vr-workspace.vr-light .vr-dock-btn.active:hover,
.vr-workspace.vr-light .vr-dock-btn.is-active:hover {
  color: #ffffff !important;
  background: #4338ca !important;
  border-color: #4338ca !important;
}

.vr-workspace.vr-light .vr-dock-btn.active span,
.vr-workspace.vr-light .vr-dock-btn.is-active span,
.vr-workspace.vr-light .vr-dock-btn.active:hover span,
.vr-workspace.vr-light .vr-dock-btn.is-active:hover span {
  color: #ffffff !important;
}

.vr-workspace.vr-light .vr-dock-btn.active svg,
.vr-workspace.vr-light .vr-dock-btn.is-active svg,
.vr-workspace.vr-light .vr-dock-btn.active:hover svg,
.vr-workspace.vr-light .vr-dock-btn.is-active:hover svg,
.vr-workspace.vr-light .vr-dock-btn.active svg path,
.vr-workspace.vr-light .vr-dock-btn.is-active svg path,
.vr-workspace.vr-light .vr-dock-btn.active svg line,
.vr-workspace.vr-light .vr-dock-btn.is-active svg line,
.vr-workspace.vr-light .vr-dock-btn.active svg polyline,
.vr-workspace.vr-light .vr-dock-btn.is-active svg polyline,
.vr-workspace.vr-light .vr-dock-btn.active svg rect,
.vr-workspace.vr-light .vr-dock-btn.is-active svg rect,
.vr-workspace.vr-light .vr-dock-btn.active svg circle,
.vr-workspace.vr-light .vr-dock-btn.is-active svg circle {
  stroke: #ffffff !important;
  color: #ffffff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.vr-dock.is-expanded .vr-dock-btn {
  width: 100% !important;
  justify-content: flex-start !important;
  padding: 0 10px !important;
  gap: 10px !important;
}

/* Hide span when collapsed, show when expanded */
.vr-dock-btn span {
  display: none !important; 
}

.vr-dock.is-expanded .vr-dock-btn span {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
}

.vr-dock-btn:hover::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  left: calc(100% + var(--vr-space-2)) !important;
  background: var(--vr-surface-elevated) !important;
  color: var(--vr-text-primary) !important;
  padding: 4px 8px !important;
  border-radius: var(--vr-radius-sm) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  border: 1px solid var(--vr-border-medium) !important;
  box-shadow: var(--vr-shadow-sm) !important;
  pointer-events: none !important;
  z-index: 10000 !important;
  animation: vr-fadeIn 0.2s ease forwards !important;
}

.vr-dock-separator {
  display: none !important;
}

/* Toggle button icon states */
.vr-dock:not(.is-expanded) .vr-dock-toggle-icon-expand {
  display: block !important;
}
.vr-dock:not(.is-expanded) .vr-dock-toggle-icon-collapse {
  display: none !important;
}

.vr-dock.is-expanded .vr-dock-toggle-icon-expand {
  display: none !important;
}
.vr-dock.is-expanded .vr-dock-toggle-icon-collapse {
  display: block !important;
}

.vr-dock-btn--admin {
  margin-top: auto !important;
}

/* ── Left Dock Brand Header (Site Logo + Site Title) — Height 40px in both states ── */
.vr-dock-brand-header {
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  margin-bottom: 6px !important;
  border-bottom: none !important;
  width: 100% !important;
  height: 40px !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
}

.vr-workspace.vr-light .vr-dock-brand-header {
  border-bottom: none !important;
}

.vr-dock-site-logo,
.vr-dock-site-logo-icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vr-dock-site-logo-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #ccff00 !important;
}

.vr-workspace.vr-light .vr-dock-site-logo-icon svg {
  stroke: #0f172a !important;
}

.vr-dock:not(.is-expanded) .vr-dock-site-title {
  display: none !important;
}

.vr-dock.is-expanded .vr-dock-site-title {
  display: inline-block !important;
  font-family: var(--vr-font-ui, system-ui, -apple-system, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-left: 10px !important;
}

.vr-workspace.vr-light .vr-dock-site-title {
  color: #0f172a !important;
}

/* ── Left Dock Footer — Separate Rows ── */
.vr-dock-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 10px 8px !important;
  margin-top: auto !important;
  border-top: none !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.vr-workspace.vr-light .vr-dock-footer {
  border-top: none !important;
}

/* Row A: Credit Balance Badge */
.vr-dock-credit-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  height: 38px !important;
  background: rgba(204, 255, 0, 0.12) !important;
  border: 1px solid rgba(204, 255, 0, 0.25) !important;
  border-radius: 10px !important;
  color: #ccff00 !important;
  font-family: var(--vr-font-ui, system-ui, -apple-system, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.vr-dock:not(.is-expanded) .vr-dock-credit-badge {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 10px !important;
}

.vr-dock:not(.is-expanded) .vr-dock-credit-badge .vr-credit-amount,
.vr-dock:not(.is-expanded) .vr-dock-credit-badge .vr-credit-unit {
  display: none !important;
}

/* Light: Credit Badge — Dark text for visibility */
.vr-workspace.vr-light .vr-dock-credit-badge {
  background: rgba(79, 70, 229, 0.1) !important;
  color: #1e293b !important;
  border-color: rgba(79, 70, 229, 0.25) !important;
}

.vr-workspace.vr-light .vr-dock-credit-badge svg {
  stroke: #4f46e5 !important;
}

.vr-workspace.vr-light .vr-dock-credit-badge .vr-credit-amount,
.vr-workspace.vr-light .vr-dock-credit-badge .vr-credit-unit {
  color: #1e293b !important;
}

.vr-dock-credit-badge svg {
  stroke: currentColor !important;
  flex-shrink: 0 !important;
}

/* Row B: Theme Toggle Button (Separate Full-Width Row) */
.vr-dock .vr-theme-toggle-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #a1a1aa !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.vr-dock:not(.is-expanded) .vr-theme-toggle-btn {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.vr-dock:not(.is-expanded) .vr-theme-toggle-btn span {
  display: none !important;
}

.vr-dock.is-expanded .vr-theme-toggle-btn span {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
}

/* Default (Dark Mode): Show SUN icon (option to switch to Light mode), hide Moon icon */
.vr-theme-toggle-btn .icon-sun {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.vr-theme-toggle-btn .icon-moon {
  display: none !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Light Mode (.vr-light): Show MOON icon (option to switch to Dark mode), hide Sun icon */
.vr-workspace.vr-light .vr-theme-toggle-btn .icon-sun {
  display: none !important;
}
.vr-workspace.vr-light .vr-theme-toggle-btn .icon-moon {
  display: block !important;
}

/* Light: Theme Toggle — Dark text for visibility */
.vr-workspace.vr-light .vr-dock .vr-theme-toggle-btn {
  background: rgba(79, 70, 229, 0.06) !important;
  border-color: rgba(79, 70, 229, 0.18) !important;
  color: #1e293b !important;
}

.vr-workspace.vr-light .vr-theme-toggle-btn span {
  color: #1e293b !important;
}

.vr-dock .vr-theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.vr-workspace.vr-light .vr-dock .vr-theme-toggle-btn:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
}

.vr-workspace.vr-light .vr-dock .vr-theme-toggle-btn:hover span {
  color: #ffffff !important;
}

/* ── New Chat Button ── */

/* Dark: New Chat */
.vr-dock-btn--new-chat {
  color: #000000 !important;
  background: #ccff00 !important;
  font-weight: 700 !important;
  border: 1px solid #ccff00 !important;
}

.vr-dock-btn--new-chat svg {
  stroke: #000000 !important;
}

.vr-dock-btn--new-chat:hover {
  background: #b8e600 !important;
  border-color: #b8e600 !important;
  color: #000000 !important;
}

.vr-dock-btn--new-chat:hover svg {
  stroke: #000000 !important;
}

/* Light: New Chat — higher specificity to override generic .vr-dock-btn hover */
.vr-workspace.vr-light .vr-dock-btn.vr-dock-btn--new-chat {
  color: #ffffff !important;
  background: #4f46e5 !important;
  border: 1px solid #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

.vr-workspace.vr-light .vr-dock-btn.vr-dock-btn--new-chat span {
  color: #ffffff !important;
}

.vr-workspace.vr-light .vr-dock-btn.vr-dock-btn--new-chat svg {
  stroke: #ffffff !important;
}

.vr-workspace.vr-light .vr-dock-btn.vr-dock-btn--new-chat:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

.vr-workspace.vr-light .vr-dock-btn.vr-dock-btn--new-chat:hover span {
  color: #ffffff !important;
}

.vr-workspace.vr-light .vr-dock-btn.vr-dock-btn--new-chat:hover svg {
  stroke: #ffffff !important;
}

/* MAIN */
.vr-workspace > .vr-main,
.vr-main {
  position: absolute !important;
  top: 0 !important;
  left: var(--vr-dock-width) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(100% - var(--vr-dock-width)) !important;
  height: 100% !important;
  background: var(--vr-bg) !important;
  background-image: var(--vr-glow-bg) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.vr-app-header {
  display: none !important;
}

/* CANVAS AREA */
.vr-canvas-area {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: 
    linear-gradient(var(--vr-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--vr-border-subtle) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  background-position: center center !important;
  z-index: 1 !important;
}

.vr-canvas-area--hidden {
  display: none !important;
}

.vr-canvas-dropzone-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--vr-space-3) !important;
  padding: var(--vr-space-8) !important;
  color: var(--vr-text-muted) !important;
  font-size: 14px !important;
}

.vr-zoom-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
}

.vr-zoom-content {
  position: relative !important;
  transform-origin: center center !important;
  transition: transform 0.2s ease !important;
  box-shadow: var(--vr-shadow-lg) !important;
}

.vr-canvas-ref-img {
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}

.vr-annotation-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* Canvas Toolbar */
.vr-canvas-toolbar {
  position: absolute !important;
  bottom: 120px !important; /* Above prompt card */
  right: var(--vr-space-6) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-2) !important;
  background: var(--vr-card-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--vr-border-medium) !important;
  border-radius: var(--vr-radius-lg) !important;
  padding: var(--vr-space-2) !important;
  z-index: var(--vr-z-base) !important;
  box-shadow: var(--vr-shadow-md) !important;
}

.vr-canvas-toolbar-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--vr-radius-md) !important;
  background: transparent !important;
  border: none !important;
  color: var(--vr-text-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vr-canvas-toolbar-btn:hover {
  background: var(--vr-surface-elevated) !important;
}

/* ==========================================================================
   6. FLOATING SIDEBAR & PANELS
   ========================================================================== */

.vr-workspace .vr-sidebar {
  position: absolute !important;
  top: var(--vr-header-height) !important;
  left: calc(var(--vr-dock-width) + 4px) !important;
  bottom: 12px !important;
  width: var(--vr-sidebar-width) !important;
  min-width: var(--vr-sidebar-width) !important;
  max-width: var(--vr-sidebar-width) !important;
  height: calc(100% - var(--vr-header-height) - 12px) !important;
  z-index: var(--vr-z-sidebar) !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-12px) scale(0.98) !important;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.vr-workspace .vr-sidebar:has(.active-panel),
.vr-workspace .vr-sidebar.mobile-open,
.vr-workspace .vr-sidebar:not(.is-collapsed) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) scale(1) !important;
}

.vr-sidebar-content {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

/* Panel Structure */
.vr-workspace .vr-sidebar .vr-panel {
  background: var(--vr-card-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--vr-border-medium) !important;
  border-radius: var(--vr-radius-lg) !important;
  box-shadow: var(--vr-shadow-lg) !important;
  height: 100% !important;
  width: 100% !important;
  display: none;
  flex-direction: column !important;
  overflow: hidden !important;
}

.vr-workspace .vr-sidebar .vr-panel.active-panel {
  display: flex !important;
}

/* CRITICAL: Override PHP inline style `display:none!important` on .vr-panel */
.vr-workspace .vr-panel.active-panel {
  display: flex !important;
  flex-direction: column !important;
}

.vr-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--vr-space-3) var(--vr-space-4) !important;
  border-bottom: 1px solid var(--vr-border-subtle) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

.vr-workspace.vr-light .vr-panel-header {
  background: rgba(255, 255, 255, 0.5) !important;
}

.vr-panel-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--vr-text-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.vr-panel-controls {
  display: flex !important;
  gap: var(--vr-space-1) !important;
}

.vr-panel-close-btn {
  background: transparent !important;
  border: none !important;
  color: var(--vr-text-dim) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: var(--vr-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.vr-panel-close-btn:hover {
  background: var(--vr-surface-elevated) !important;
  color: var(--vr-text-primary) !important;
}

.vr-panel-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: var(--vr-space-4) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-5) !important;
}

.vr-panel-body--tools {
  gap: var(--vr-space-4) !important;
}

/* Chat Panel Specifics */
.vr-panel-chat {
  background: var(--vr-card-bg) !important;
  color: var(--vr-text-primary) !important;
}

.vr-chat-panel-body {
  padding: 0 !important;
  gap: 0 !important;
}

.vr-chat-list {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  margin: 0 !important;
  padding: var(--vr-space-2) !important;
  gap: var(--vr-space-1) !important;
}

.vr-chat-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--vr-space-3) !important;
  border-radius: var(--vr-radius-md) !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.vr-chat-item:hover {
  background: var(--vr-surface-elevated) !important;
}

.vr-chat-item.active {
  background: var(--vr-primary-dim) !important;
  border: 1px solid var(--vr-border-focus) !important;
}

.vr-workspace.vr-light .vr-chat-item.active {
  background: rgba(9, 9, 11, 0.06) !important;
  border-color: #d4d4d8 !important;
}

/* New Chat Button — premium SaaS style */
.vr-chat-new-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--vr-space-2) !important;
  width: 100% !important;
  padding: var(--vr-space-2) var(--vr-space-3) !important;
  background: var(--vr-primary) !important;
  color: var(--vr-bg) !important;
  border: none !important;
  border-radius: var(--vr-radius-md) !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(204, 255, 0, 0.15) !important;
}

.vr-chat-new-btn:hover {
  background: var(--vr-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(204, 255, 0, 0.25) !important;
}

.vr-chat-new-btn svg {
  width: 16px !important;
  height: 16px !important;
}

.vr-workspace.vr-light .vr-chat-new-btn {
  background: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
}

.vr-workspace.vr-light .vr-chat-new-btn:hover {
  background: #4338ca !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4) !important;
}

.vr-chat-item-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--vr-text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px !important;
}

.vr-chat-item-date {
  font-size: 11px !important;
  color: var(--vr-text-dim) !important;
}

.vr-chat-item-delete {
  opacity: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--vr-danger) !important;
  cursor: pointer !important;
  padding: var(--vr-space-1) !important;
  transition: opacity 0.2s ease !important;
}

.vr-chat-item:hover .vr-chat-item-delete {
  opacity: 1 !important;
}

/* ═══ Upscaler Panel — Expert Redesign & Fixes ═════════════════════════════ */

/* Critical Fix: Ensure hidden elements remain hidden despite !important rules */
.vr-panel-upscaler [hidden],
.vr-upscaler-body [hidden],
.vr-up-source-wrap [hidden],
.vr-up-field[hidden],
.vr-up-progress[hidden],
.vr-up-result-wrap[hidden],
.vr-up-error[hidden],
img.vr-up-src-img[hidden],
#vr-up-empty-wrap[hidden] {
  display: none !important;
}

.vr-upscaler-body {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-4, 16px) !important;
  padding: var(--vr-space-3, 12px) !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 120px) !important;
  flex: 1 !important;
}

/* — Settings Group — */
.vr-up-settings {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-4, 16px) !important;
  padding: var(--vr-space-3, 12px) 0 0 0 !important;
  border-top: 1px solid var(--vr-border-subtle, #27272a) !important;
}

/* — Cost Row — */
.vr-upscaler-cost-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--vr-space-2, 8px) !important;
  padding: var(--vr-space-2, 8px) var(--vr-space-3, 12px) !important;
  background: rgba(204, 255, 0, 0.06) !important;
  border: 1px solid rgba(204, 255, 0, 0.18) !important;
  border-radius: var(--vr-radius-md, 8px) !important;
}
.vr-upscaler-cost-row svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--vr-primary, #ccff00) !important;
  flex-shrink: 0 !important;
}
.vr-upscaler-cost-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--vr-text-secondary, #e4e4e7) !important;
}
.vr-upscaler-cost-badge {
  font-family: var(--vr-font-mono, monospace) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--vr-primary, #ccff00) !important;
  background: rgba(204, 255, 0, 0.15) !important;
  padding: 2px 8px !important;
  border-radius: var(--vr-radius-sm, 4px) !important;
  margin-left: auto !important;
}

/* — Source Image Drop Zone — */
.vr-up-source-wrap {
  width: 100% !important;
  min-height: 110px !important;
  background: var(--vr-surface-elevated, #18181b) !important;
  border-radius: var(--vr-radius-md, 8px) !important;
  border: 1.5px dashed var(--vr-border-medium, #3f3f46) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  transition: border-color 0.2s ease !important;
}
.vr-up-source-wrap:hover {
  border-color: var(--vr-primary, #ccff00) !important;
}
.vr-up-no-img {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--vr-space-2, 8px) !important;
  padding: var(--vr-space-4, 16px) !important;
  text-align: center !important;
}
.vr-up-no-img svg {
  width: 32px !important;
  height: 32px !important;
  opacity: 0.6 !important;
  color: var(--vr-text-secondary, #a1a1aa) !important;
}
.vr-up-no-img span {
  font-size: 12px !important;
  color: var(--vr-text-secondary, #e4e4e7) !important;
  line-height: 1.5 !important;
}
.vr-up-no-img strong {
  color: var(--vr-primary, #ccff00) !important;
}
.vr-up-src-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: calc(var(--vr-radius-md, 8px) - 2px) !important;
}

/* — Result Overlay — */
.vr-up-result-wrap {
  position: relative !important;
  width: 100% !important;
}
.vr-up-result-badge {
  position: absolute !important;
  top: var(--vr-space-2, 8px) !important;
  right: var(--vr-space-2, 8px) !important;
  background: var(--vr-primary, #ccff00) !important;
  color: #000000 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 3px 8px !important;
  border-radius: var(--vr-radius-sm, 4px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* — Field Group — */
.vr-up-field {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-2, 8px) !important;
}
.vr-up-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--vr-text-secondary, #e4e4e7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.vr-up-opt {
  font-weight: 400 !important;
  text-transform: none !important;
  color: var(--vr-text-dim, #71717a) !important;
  font-style: italic !important;
  letter-spacing: normal !important;
}

/* — Segment Control (Pill Tabs) — */
.vr-up-seg {
  display: flex !important;
  background: var(--vr-surface-elevated, #18181b) !important;
  border-radius: var(--vr-radius-md, 8px) !important;
  padding: 3px !important;
  border: 1px solid var(--vr-border-subtle, #27272a) !important;
  gap: 2px !important;
}
.vr-up-seg-btn {
  flex: 1 !important;
  text-align: center !important;
  padding: 7px 10px !important;
  background: transparent !important;
  border: none !important;
  color: #a1a1aa !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: calc(var(--vr-radius-md, 8px) - 3px) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.vr-up-seg-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.vr-up-seg-btn.is-active {
  background: var(--vr-primary, #ccff00) !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(204, 255, 0, 0.25) !important;
  font-weight: 700 !important;
}

/* — Select Dropdown — */
.vr-up-select {
  width: 100% !important;
  padding: 8px 12px !important;
  background: var(--vr-surface-elevated, #18181b) !important;
  color: var(--vr-text-primary, #f4f4f5) !important;
  border: 1px solid var(--vr-border-subtle, #27272a) !important;
  border-radius: var(--vr-radius-md, 8px) !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  appearance: none !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 32px !important;
}
.vr-up-select:focus {
  border-color: var(--vr-primary, #ccff00) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(204,255,0,0.15) !important;
}

/* — Textarea — */
.vr-up-textarea {
  width: 100% !important;
  padding: 8px 12px !important;
  background: var(--vr-surface-elevated, #18181b) !important;
  color: var(--vr-text-primary, #f4f4f5) !important;
  border: 1px solid var(--vr-border-subtle, #27272a) !important;
  border-radius: var(--vr-radius-md, 8px) !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
  min-height: 52px !important;
  transition: border-color 0.15s ease !important;
  box-sizing: border-box !important;
}
.vr-up-textarea::placeholder {
  color: var(--vr-text-dim, #71717a) !important;
  opacity: 0.8 !important;
}
.vr-up-textarea:focus {
  border-color: var(--vr-primary, #ccff00) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(204,255,0,0.15) !important;
}

/* — Progress Bar — */
.vr-up-progress {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-2, 8px) !important;
}
.vr-up-bar {
  width: 100% !important;
  height: 6px !important;
  background: var(--vr-surface-elevated, #18181b) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.vr-up-bar-fill {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, var(--vr-primary, #ccff00), #a3e635) !important;
  border-radius: 3px !important;
  transition: width 0.3s ease !important;
}
.vr-up-progress-label {
  font-size: 11px !important;
  color: var(--vr-text-secondary, #e4e4e7) !important;
  text-align: center !important;
}

/* — Run CTA Button — */
.vr-up-run {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--vr-space-2, 8px) !important;
  width: 100% !important;
  padding: 11px var(--vr-space-4, 16px) !important;
  background: var(--vr-primary, #ccff00) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: var(--vr-radius-md, 8px) !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(204, 255, 0, 0.25) !important;
  letter-spacing: 0.01em !important;
}
.vr-up-run svg {
  stroke: #000000 !important;
}
.vr-up-run:hover {
  background: var(--vr-primary-hover, #d9ff33) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(204, 255, 0, 0.35) !important;
}
.vr-up-run:active {
  transform: translateY(0) !important;
}
.vr-up-run:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* — Error Alert — */
.vr-up-error {
  font-size: 12px !important;
  color: #ef4444 !important;
  padding: var(--vr-space-2, 8px) var(--vr-space-3, 12px) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-radius: var(--vr-radius-md, 8px) !important;
}

/* — Light Mode Overrides — */
.vr-workspace.vr-light .vr-up-settings {
  border-color: #cbd5e1 !important;
}
.vr-workspace.vr-light .vr-upscaler-cost-row {
  background: rgba(79, 70, 229, 0.08) !important;
  border-color: rgba(79, 70, 229, 0.25) !important;
}
.vr-workspace.vr-light .vr-upscaler-cost-row svg {
  color: #4f46e5 !important;
}
.vr-workspace.vr-light .vr-upscaler-cost-label {
  color: #475569 !important;
}
.vr-workspace.vr-light .vr-upscaler-cost-badge {
  color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.12) !important;
}
.vr-workspace.vr-light .vr-up-source-wrap {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
.vr-workspace.vr-light .vr-up-source-wrap:hover {
  border-color: #4f46e5 !important;
}
.vr-workspace.vr-light .vr-up-no-img svg {
  color: #64748b !important;
}
.vr-workspace.vr-light .vr-up-no-img span {
  color: #475569 !important;
}
.vr-workspace.vr-light .vr-up-no-img strong {
  color: #0f172a !important;
}
.vr-workspace.vr-light .vr-up-label {
  color: #0f172a !important;
}
.vr-workspace.vr-light .vr-up-opt {
  color: #64748b !important;
}
.vr-workspace.vr-light .vr-up-seg {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
.vr-workspace.vr-light .vr-up-seg-btn {
  color: #475569 !important;
}
.vr-workspace.vr-light .vr-up-seg-btn:hover {
  color: #0f172a !important;
  background: rgba(79, 70, 229, 0.08) !important;
}
.vr-workspace.vr-light .vr-up-seg-btn.is-active {
  background: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}
.vr-workspace.vr-light .vr-up-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
.vr-workspace.vr-light .vr-up-select:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15) !important;
}
.vr-workspace.vr-light .vr-up-textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
.vr-workspace.vr-light .vr-up-textarea::placeholder {
  color: #64748b !important;
}
.vr-workspace.vr-light .vr-up-textarea:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15) !important;
}
.vr-workspace.vr-light .vr-up-bar {
  background: #cbd5e1 !important;
}
.vr-workspace.vr-light .vr-up-bar-fill {
  background: linear-gradient(90deg, #4f46e5, #6366f1) !important;
}
.vr-workspace.vr-light .vr-up-progress-label {
  color: #475569 !important;
}
.vr-workspace.vr-light .vr-up-run {
  background: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
}
.vr-workspace.vr-light .vr-up-run svg {
  stroke: #ffffff !important;
}
.vr-workspace.vr-light .vr-up-run:hover {
  background: #4338ca !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45) !important;
}
.vr-workspace.vr-light .vr-up-result-badge {
  background: #09090b !important;
  color: #ffffff !important;
}
.vr-workspace.vr-light .vr-up-error {
  background: rgba(239, 68, 68, 0.05) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
}

/* Annotation & Tools Panel */
.vr-annotation-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--vr-space-2) !important;
}

.vr-annot-btn, .vr-tool-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--vr-radius-md) !important;
  background: var(--vr-surface-elevated) !important;
  border: 1px solid var(--vr-border-subtle) !important;
  color: var(--vr-text-dim) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vr-annot-btn:hover, .vr-tool-btn:hover {
  background: var(--vr-surface) !important;
  color: var(--vr-text-primary) !important;
}

.vr-annot-btn.active, .vr-annot-btn.is-active, .vr-tool-btn.active {
  background: rgba(204, 255, 0, 0.1) !important;
  color: var(--vr-primary) !important;
  border-color: var(--vr-primary) !important;
}

.vr-workspace.vr-light .vr-annot-btn.active, .vr-workspace.vr-light .vr-tool-btn.active {
  background: rgba(90, 122, 0, 0.1) !important;
}

.vr-annot-color-wrap, .vr-annot-size-wrap {
  display: flex !important;
  align-items: center !important;
  gap: var(--vr-space-2) !important;
  margin-top: var(--vr-space-3) !important;
}

/* ═══ Debug Panel — Expert UI/UX Redesign & Layout Fit ══════════════════════ */
.vr-panel-debug {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.vr-panel-debug .vr-panel-title {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.vr-debug-admin-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 1px 5px !important;
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 4px !important;
  margin-left: 4px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.vr-debug-body {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-3, 12px) !important;
  padding: var(--vr-space-3, 12px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 120px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* — Meta Info Card — */
.vr-debug-meta {
  font-size: 11px !important;
  color: #a1a1aa !important;
  line-height: 1.6 !important;
  padding: 10px 12px !important;
  background: var(--vr-surface-elevated, #18181b) !important;
  border-radius: var(--vr-radius-md, 8px) !important;
  border: 1px solid var(--vr-border-subtle, #27272a) !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.vr-debug-meta strong {
  color: #f4f4f5 !important;
  font-weight: 600 !important;
}

/* — Toolbar — */
.vr-debug-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 2px !important;
}

.vr-debug-status {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #a1a1aa !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.vr-debug-pulse {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 8px #22c55e !important;
  display: inline-block !important;
}

.vr-debug-copy-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  background: var(--vr-primary, #ccff00) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: var(--vr-radius-md, 8px) !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(204, 255, 0, 0.2) !important;
}
.vr-debug-copy-btn svg {
  stroke: #000000 !important;
}
.vr-debug-copy-btn:hover {
  background: var(--vr-primary-hover, #d9ff33) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(204, 255, 0, 0.3) !important;
}
.vr-debug-copy-btn:active {
  transform: translateY(0) !important;
}

/* — Code View Textarea — */
.vr-debug-prompt-text {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
  font-size: 11px !important;
  color: #38bdf8 !important;
  background: #09090b !important;
  border: 1px solid #27272a !important;
  border-radius: var(--vr-radius-md, 8px) !important;
  padding: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  resize: vertical !important;
  line-height: 1.6 !important;
  min-height: 240px !important;
}
.vr-debug-prompt-text::placeholder {
  color: #52525b !important;
}
.vr-debug-prompt-text:focus {
  outline: none !important;
  border-color: var(--vr-primary, #ccff00) !important;
  box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.15) !important;
}

/* ==========================================================================
   7. FORMS & INPUTS
   ========================================================================== */

.vr-section-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--vr-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: var(--vr-space-3) !important;
  display: block !important;
}

.vr-field {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-2) !important;
}

.vr-field-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.vr-field-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--vr-text-primary) !important;
}

.vr-input, .vr-textarea, select, input[type="text"], input[type="number"] {
  width: 100% !important;
  background: var(--vr-surface) !important;
  border: 1px solid var(--vr-border-medium) !important;
  border-radius: var(--vr-radius-md) !important;
  padding: var(--vr-space-2) var(--vr-space-3) !important;
  color: var(--vr-text-primary) !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.vr-textarea {
  resize: vertical !important;
  min-height: 80px !important;
}

.vr-input:focus, .vr-textarea:focus, select:focus, input[type="text"]:focus, input[type="number"]:focus {
  outline: none !important;
  border-color: var(--vr-primary) !important;
  box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.1) !important;
}

.vr-workspace.vr-light .vr-input:focus {
  box-shadow: 0 0 0 2px rgba(90, 122, 0, 0.1) !important;
}

/* Virtual Select */
.aipb-vs-container, .vscomp-wrapper {
  width: 100% !important;
  --vs-border-color: var(--vr-border-medium) !important;
  --vs-border-radius: var(--vr-radius-md) !important;
  --vs-bg: var(--vr-surface) !important;
  --vs-text-color: var(--vr-text-primary) !important;
}

/* Toggles */
.vr-toggle-label {
  display: flex !important;
  align-items: center !important;
  gap: var(--vr-space-3) !important;
  cursor: pointer !important;
}

.aipb-toggle-input {
  display: none !important;
}

.vr-toggle-track {
  position: relative !important;
  width: 36px !important;
  height: 20px !important;
  background: var(--vr-surface-elevated) !important;
  border-radius: var(--vr-radius-full) !important;
  border: 1px solid var(--vr-border-medium) !important;
  transition: all 0.2s ease !important;
}

.vr-toggle-thumb {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  background: var(--vr-text-dim) !important;
  border-radius: 50% !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.aipb-toggle-input:checked + .vr-toggle-track {
  background: var(--vr-primary) !important;
  border-color: var(--vr-primary) !important;
}

.aipb-toggle-input:checked + .vr-toggle-track .vr-toggle-thumb {
  left: 18px !important;
  background: var(--vr-bg) !important;
}

.vr-toggle-text {
  font-size: 13px !important;
  color: var(--vr-text-primary) !important;
}

/* Ranges */
.vr-range {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-2) !important;
}

input[type="range"] {
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 4px !important;
  background: var(--vr-surface-elevated) !important;
  border-radius: var(--vr-radius-full) !important;
  outline: none !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--vr-primary) !important;
  cursor: pointer !important;
  border: 2px solid var(--vr-bg) !important;
  box-shadow: var(--vr-shadow-sm) !important;
  transition: transform 0.1s ease !important;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2) !important;
}

.vr-range-badge {
  font-family: var(--vr-font-mono) !important;
  font-size: 11px !important;
  background: var(--vr-surface-elevated) !important;
  padding: 2px 6px !important;
  border-radius: var(--vr-radius-sm) !important;
  color: var(--vr-text-primary) !important;
}

/* Seed Row */
.vr-seed-row {
  display: flex !important;
  gap: var(--vr-space-2) !important;
}

.vr-seed-input-wrap {
  flex: 1 !important;
  position: relative !important;
}

.vr-seed-input {
  width: 100% !important;
  font-family: var(--vr-font-mono) !important;
}

.vr-seed-random-btn, .vr-seed-lock-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--vr-radius-md) !important;
  background: var(--vr-surface-elevated) !important;
  border: 1px solid var(--vr-border-subtle) !important;
  color: var(--vr-text-dim) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.vr-seed-random-btn:hover, .vr-seed-lock-btn:hover {
  color: var(--vr-primary) !important;
  border-color: var(--vr-border-medium) !important;
}

/* Dropzone */
.ps-dropzone {
  border: 2px dashed var(--vr-border-medium) !important;
  border-radius: var(--vr-radius-lg) !important;
  padding: var(--vr-space-6) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  background: var(--vr-surface) !important;
  transition: all 0.2s ease !important;
}

.ps-dropzone:hover {
  border-color: var(--vr-primary) !important;
  background: rgba(204, 255, 0, 0.02) !important;
}

.vr-workspace.vr-light .ps-dropzone:hover {
  background: rgba(90, 122, 0, 0.02) !important;
}

.ps-dropzone-label {
  font-size: 13px !important;
  color: var(--vr-text-dim) !important;
  margin-top: var(--vr-space-2) !important;
}

.ps-dropzone-preview {
  max-width: 100% !important;
  max-height: 120px !important;
  border-radius: var(--vr-radius-md) !important;
  margin-top: var(--vr-space-3) !important;
  display: none !important;
}

.ps-dropzone-filename {
  font-size: 11px !important;
  font-family: var(--vr-font-mono) !important;
  color: var(--vr-text-primary) !important;
  margin-top: var(--vr-space-2) !important;
  display: none !important;
}

.ps-dropzone-remove {
  margin-top: var(--vr-space-2) !important;
  font-size: 12px !important;
  color: var(--vr-danger) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  display: none !important;
}

/* ==========================================================================
   8. PROMPT CARD & LLM FEED
   ========================================================================== */

/* ═══ Prompt Panel — Expert UI/UX Redesign & Collapsible ═════════════════════ */
.vr-main {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  position: relative !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  transition: justify-content 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vr-panel-prompt {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: translateY(0) !important;
  flex: 0 0 auto !important;
  width: 92% !important;
  max-width: 720px !important;
  margin: 12px auto 26px auto !important;
  background: #18181b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 26px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  animation: vr-slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  overflow: visible !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), margin 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.3s ease !important;
}

/* ── NEW SESSION STATE — Absolute Vertical Centering in Browser Window ── */
.vr-main.is-new-session {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
}

.vr-main.is-new-session .vr-llm-feed {
  display: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.vr-main.is-new-session .vr-panel-prompt {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

/* ── NEW SESSION HERO HEADER (Title + Description — Centered above prompt tab in New Session) ── */
.vr-new-session-hero {
  position: absolute !important;
  bottom: calc(100% + 56px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90vw !important;
  max-width: 680px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  z-index: 99 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

.vr-main.is-new-session .vr-new-session-hero {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Hero Featured Image */
.vr-hero-featured-img {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto 16px auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.vr-hero-featured-img img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Hero Title Row (icon + title inline) */
.vr-hero-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* Hero App Icon */
.vr-hero-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.vr-hero-title {
  font-family: var(--vr-font-ui, system-ui, -apple-system, sans-serif) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.vr-hero-desc {
  font-family: var(--vr-font-ui, system-ui, -apple-system, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  max-width: 580px !important;
}

/* ── Footer Disclaimer Below Prompt Tab (Outside Prompt Tab Box — Shown in Active Session) ── */
.vr-prompt-footer-disclaimer {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 720px !important;
  text-align: center !important;
  font-family: var(--vr-font-ui, system-ui, -apple-system, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #a1a1aa !important;
  pointer-events: none !important;
  z-index: 99 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

/* Hide Disclaimer in New Session */
.vr-main.is-new-session .vr-prompt-footer-disclaimer {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.vr-panel-prompt.is-collapsed:not(:has(.has-chips)) {
  border-radius: 9999px !important;
}

/* Gemini-Style Ambient Soft Radial Glow behind Prompt Tab */
.vr-panel-prompt::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 140% !important;
  height: 280px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(58, 80, 140, 0.45) 0%, rgba(30, 42, 80, 0.22) 45%, rgba(0, 0, 0, 0) 75%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  filter: blur(24px) !important;
}

.vr-panel-prompt textarea,
.vr-panel-prompt select,
.vr-panel-prompt input {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 99999 !important;
}

.vr-panel-prompt button {
  pointer-events: auto !important;
  z-index: 99999 !important;
}

/* — Prompt Input Row — Gemini Pill Style — */
.vr-prompt-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px 6px 16px !important;
  position: relative !important;
}

/* — Credit Cost Badge inside Options — */
.vr-prompt-cost {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: rgba(204, 255, 0, 0.12) !important;
  border: 1px solid rgba(204, 255, 0, 0.25) !important;
  border-radius: 8px !important;
  color: var(--vr-primary, #ccff00) !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.vr-workspace.vr-light .vr-prompt-cost {
  background: rgba(79, 70, 229, 0.1) !important;
  color: #4f46e5 !important;
  border-color: rgba(79, 70, 229, 0.3) !important;
}

.vr-prompt-textarea {
  flex: 1 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 6px 4px !important;
  resize: none !important;
  min-height: 38px !important;
  height: 38px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.vr-prompt-textarea:focus {
  outline: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vr-prompt-textarea::placeholder,
textarea.vr-prompt-textarea::placeholder,
.vr-prompt-textarea::-webkit-input-placeholder {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

/* — Gemini Pill Icon Buttons (Add Ref & Settings) — */
.vr-ref-add-btn,
.vr-prompt-collapse-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #c4c7c5 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.vr-ref-add-btn svg,
.vr-prompt-collapse-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  transition: transform 0.2s ease, stroke 0.2s ease !important;
}

.vr-ref-add-btn:hover,
.vr-prompt-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Dark: Settings active state */
.vr-prompt-collapse-btn.is-active,
.vr-prompt-collapse-btn[aria-expanded="true"] {
  background: rgba(204, 255, 0, 0.2) !important;
  border-color: #ccff00 !important;
  color: #ccff00 !important;
}

.vr-prompt-collapse-btn.is-active svg,
.vr-prompt-collapse-btn[aria-expanded="true"] svg {
  stroke: #ccff00 !important;
}

/* Light: Settings active state — Royal Indigo filled */
.vr-workspace.vr-light .vr-prompt-collapse-btn.is-active,
.vr-workspace.vr-light .vr-prompt-collapse-btn[aria-expanded="true"] {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}

.vr-workspace.vr-light .vr-prompt-collapse-btn.is-active svg,
.vr-workspace.vr-light .vr-prompt-collapse-btn[aria-expanded="true"] svg {
  stroke: #ffffff !important;
}

/* — Generate CTA Button — Gemini Pill Style — */
.vr-generate-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 18px !important;
  min-width: 110px !important;
  width: auto !important;
  border-radius: 9999px !important;
  background: var(--vr-primary, #ccff00) !important;
  border: none !important;
  color: #000000 !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(204, 255, 0, 0.3) !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.vr-generate-icon-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #000000 !important;
  flex-shrink: 0 !important;
}

.vr-generate-icon-btn span {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.vr-generate-icon-btn:hover {
  background: var(--vr-primary-hover, #d9ff33) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(204, 255, 0, 0.4) !important;
}

.vr-generate-icon-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* — Reference Images Bar — */
.vr-ref-images-bar {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}

.vr-ref-images-bar.has-chips,
.vr-ref-images-bar:has(.vr-ref-chip) {
  display: flex !important;
  height: auto !important;
  padding: 14px 18px 2px 18px !important;
  align-items: center !important;
  gap: 12px !important;
}

.vr-ref-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px dashed rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  color: #a1a1aa !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.vr-ref-add-btn:hover {
  border-color: var(--vr-primary, #ccff00) !important;
  color: var(--vr-primary, #ccff00) !important;
  background: rgba(204, 255, 0, 0.08) !important;
}

.vr-ref-add-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* — Floating Settings Popover Menu — */
.vr-prompt-collapsible {
  position: absolute !important;
  bottom: calc(100% + 14px) !important;
  right: 12px !important;
  width: 420px !important;
  max-width: calc(100vw - 32px) !important;
  background: #18191d !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 999999 !important;
  transform-origin: bottom right !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) translateY(0) !important;
  pointer-events: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.vr-prompt-collapsible.is-collapsed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(0.94) translateY(10px) !important;
  margin: 0 !important;
  padding: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  max-height: none !important;
}

/* Floating Popover Arrow Indicator */
.vr-prompt-collapsible::after {
  content: "" !important;
  position: absolute !important;
  bottom: -6px !important;
  right: 24px !important;
  width: 12px !important;
  height: 12px !important;
  background: #18191d !important;
  border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  transform: rotate(45deg) !important;
  z-index: 10 !important;
}

/* Light Mode Overrides for Floating Settings Popover */
.vr-workspace.vr-light .vr-prompt-collapsible {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15) !important;
}

.vr-workspace.vr-light .vr-prompt-collapsible::after {
  background: rgba(255, 255, 255, 0.98) !important;
  border-right-color: rgba(0, 0, 0, 0.12) !important;
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}

/* — Options Row (Model, Aspect Ratio, Resolution, Seed) — */
.vr-prompt-model-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.vr-model-select {
  width: 100% !important;
  padding: 7px 12px !important;
  background: var(--vr-surface-elevated, #18181b) !important;
  color: #f4f4f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  appearance: none !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 32px !important;
}

.vr-model-select:focus {
  outline: none !important;
  border-color: var(--vr-primary, #ccff00) !important;
  box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.15) !important;
}

.vr-image-options-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
}

.vr-image-option-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #a1a1aa !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.vr-aspect-ratio-select,
.vr-output-size-select {
  width: 100% !important;
  padding: 6px 10px !important;
  background: var(--vr-surface-elevated, #18181b) !important;
  color: #f4f4f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 12px !important;
  appearance: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  padding-right: 28px !important;
}

.vr-res-preview {
  font-family: var(--vr-font-mono, monospace) !important;
  font-size: 11px !important;
  color: var(--vr-primary, #ccff00) !important;
  background: rgba(204, 255, 0, 0.08) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(204, 255, 0, 0.2) !important;
}



/* — Footer Actions — */
.vr-prompt-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

.vr-prompt-hint {
  font-size: 11px !important;
  color: #71717a !important;
}

.vr-prompt-cost {
  font-family: var(--vr-font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--vr-primary, #ccff00) !important;
  background: rgba(204, 255, 0, 0.12) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}


.vr-model-select-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--vr-space-2) !important;
}

.vr-model-select-row select {
  width: auto !important;
  padding: var(--vr-space-1) var(--vr-space-4) var(--vr-space-1) var(--vr-space-2) !important;
  height: 32px !important;
  font-size: 12px !important;
  background: var(--vr-surface) !important;
}

.vr-generate-icon-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--vr-radius-md) !important;
  background: var(--vr-primary) !important;
  border: none !important;
  color: var(--vr-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(204, 255, 0, 0.2) !important;
}

.vr-workspace.vr-light .vr-generate-icon-btn {
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
}

.vr-generate-icon-btn:hover {
  background: var(--vr-primary-hover) !important;
  transform: translateY(-1px) !important;
}

.vr-generate-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* Reference Image Bar */
.vr-ref-bar {
  display: flex !important;
  align-items: center !important;
  padding: var(--vr-space-2) var(--vr-space-4) !important;
  border-top: 1px solid var(--vr-border-subtle) !important;
  gap: var(--vr-space-2) !important;
  overflow-x: auto !important;
}

.vr-ref-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  overflow: visible !important;
}

.vr-ref-chips:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

.vr-ref-chip {
  position: relative !important;
  display: inline-flex !important;
  width: 108px !important;
  height: 108px !important;
  border-radius: 16px !important;
  overflow: visible !important;
  background: var(--vr-surface-elevated, rgba(255, 255, 255, 0.05)) !important;
  flex-shrink: 0 !important;
}

.vr-ref-chip img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  border: 1px solid var(--vr-border-medium, rgba(255, 255, 255, 0.2)) !important;
  display: block !important;
}

/* Always-Visible Ultra-High-Contrast Delete Badge */
.vr-ref-chip-del,
button.vr-ref-chip-del,
.vr-panel-prompt button.vr-ref-chip-del {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 24px !important;
  height: 24px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6) !important;
  z-index: 999999 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform 0.15s ease, background-color 0.15s ease !important;
}

.vr-ref-chip-del:hover,
button.vr-ref-chip-del:hover,
.vr-panel-prompt button.vr-ref-chip-del:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: scale(1.15) !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.7) !important;
}

.vr-ref-chip-del svg,
button.vr-ref-chip-del svg {
  width: 11px !important;
  height: 11px !important;
  stroke: #ffffff !important;
  stroke-width: 2.8 !important;
  display: block !important;
  pointer-events: none !important;
}

.vr-ref-add-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--vr-radius-sm) !important;
  border: 1px dashed var(--vr-border-medium) !important;
  background: var(--vr-surface-elevated) !important;
  color: var(--vr-text-dim) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.vr-ref-add-btn:hover {
  border-color: var(--vr-primary) !important;
  color: var(--vr-primary) !important;
}

/* LLM Generation Feed & Output Gallery — Vertical Flex Top Item, Auto Height Adjust */
.vr-llm-feed,
.vr-main .vr-llm-feed,
.vxr-workspace-wrap .vr-llm-feed {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding-top: 16px !important;
  padding-left: 16px !important;
  padding-right: 8px !important;
  padding-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

/* When feed has items, align to top */
.vr-llm-feed:not(:empty) {
  justify-content: flex-start !important;
  align-items: center !important;
}

.vr-llm-feed > *,
.vxr-workspace-wrap .vr-llm-feed > * {
  width: 92% !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  pointer-events: auto !important;
}

/* Allow full text selection & copying in LLM Feed & Output Gallery */
.vr-llm-feed,
.vr-llm-feed *,
.vr-chat-line,
.vr-chat-line *,
.vr-chat-user-bubble,
.vr-chat-user-text,
.vr-chat-ai-card,
.vr-chat-ai-name,
.vr-chat-ai-time,
.vr-llm-item,
.vr-llm-prompt,
.vr-llm-sub {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Ensure buttons and interactive icons preserve pointer cursor */
.vr-llm-feed button,
.vr-llm-feed a,
.vr-gemini-btn,
.vr-gemini-img-container {
  -webkit-user-select: none !important;
  user-select: none !important;
  cursor: pointer !important;
}

/* ═══ Gemini-Style Conversational LLM Feed & Gallery UX ═════════════════ */
.vr-chat-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 92% !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 16px !important;
  animation: vr-fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* User Prompt Chat Line (Right-Aligned Bubble) */
.vr-chat-line--user {
  align-items: flex-end !important;
}

.vr-chat-user-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}

.vr-chat-user-avatar {
  font-family: var(--vr-font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #a1a1aa !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.vr-chat-user-bubble {
  max-width: 85% !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px 16px 4px 16px !important;
  padding: 10px 14px !important;
  color: #f4f4f5 !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.vr-gemini-user-ref-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.vr-gemini-user-ref-img {
  width: 140px !important;
  height: 140px !important;
  max-width: 160px !important;
  max-height: 160px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
}

.vr-gemini-user-ref-img:hover {
  transform: none !important;
}

/* AI Response Chat Line (Left-Aligned Gemini Card) */
.vr-chat-line--ai {
  align-items: flex-start !important;
}

.vr-chat-ai-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.vr-chat-ai-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(204, 255, 0, 0.12) !important;
  border: 1px solid rgba(204, 255, 0, 0.25) !important;
  color: var(--vr-primary, #ccff00) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vr-chat-ai-icon svg {
  width: 13px !important;
  height: 13px !important;
  color: var(--vr-primary, #ccff00) !important;
}

.vr-chat-ai-name {
  font-family: var(--vr-font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.vr-chat-ai-time {
  font-family: var(--vr-font-ui) !important;
  font-size: 11px !important;
  color: #71717a !important;
}

.vr-chat-ai-card {
  width: 100% !important;
  background: rgba(18, 18, 20, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Gemini Image Container — Full Output Display */
.vr-gemini-img-container {
  width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #09090b !important;
  position: relative !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.vr-gemini-img-container img {
  width: 100% !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

.vr-gemini-img-container:hover img {
  transform: none !important;
}

.vr-gemini-img-hover-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.vr-gemini-img-container:hover .vr-gemini-img-hover-overlay {
  opacity: 1 !important;
}

.vr-gemini-img-hover-overlay span {
  padding: 6px 14px !important;
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  color: #ffffff !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Gemini Action Toolbar */
.vr-gemini-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.vr-gemini-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.vr-gemini-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e4e4e7 !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vr-gemini-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.vr-gemini-btn:hover {
  background: rgba(204, 255, 0, 0.12) !important;
  border-color: rgba(204, 255, 0, 0.35) !important;
  color: var(--vr-primary, #ccff00) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.vr-gemini-btn:hover svg {
  transform: scale(1.1) !important;
}

.vr-gemini-badges {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.vr-gemini-badge {
  font-family: var(--vr-font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em !important;
}

.vr-gemini-badge--cost {
  background: rgba(204, 255, 0, 0.12) !important;
  color: var(--vr-primary, #ccff00) !important;
  border: 1px solid rgba(204, 255, 0, 0.25) !important;
}

.vr-gemini-badge--seed {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #a1a1aa !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ═══ LIGHT MODE OVERRIDES FOR GEMINI CHAT & TOOLBAR ═════════════════════ */
.vr-workspace.vr-light .vr-chat-line--user .vr-chat-user-bubble {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.vr-workspace.vr-light .vr-chat-user-avatar {
  color: #64748b !important;
}

.vr-workspace.vr-light .vr-chat-ai-name {
  color: #0f172a !important;
}

.vr-workspace.vr-light .vr-chat-ai-time {
  color: #64748b !important;
}

.vr-workspace.vr-light .vr-chat-ai-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.vr-workspace.vr-light .vr-gemini-img-container {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.vr-workspace.vr-light .vr-gemini-toolbar {
  border-top-color: #f1f5f9 !important;
}

.vr-workspace.vr-light .vr-gemini-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

.vr-workspace.vr-light .vr-gemini-btn:hover {
  background: rgba(204, 255, 0, 0.25) !important;
  border-color: #84cc16 !important;
  color: #1a2e05 !important;
  box-shadow: 0 4px 12px rgba(132, 204, 22, 0.2) !important;
}

.vr-workspace.vr-light .vr-gemini-badge--seed {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

/* ═══ High-Tech Gemini AI Generating Animation & Shimmer ═══════════════ */
.vr-chat-ai-icon--spinning {
  animation: vr-glowPulse 1.5s ease-in-out infinite alternate !important;
}

.vr-chat-ai-icon--spinning svg {
  animation: vr-spin 3s linear infinite !important;
}

.vr-generating-pill-status {
  font-family: var(--vr-font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--vr-primary, #ccff00) !important;
  background: rgba(204, 255, 0, 0.12) !important;
  border: 1px solid rgba(204, 255, 0, 0.25) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  animation: vr-pulseFast 1.2s ease-in-out infinite !important;
}

.vr-generating-ai-card {
  border-color: rgba(204, 255, 0, 0.3) !important;
  box-shadow: 0 0 24px rgba(204, 255, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.vr-llm-skeleton-img-box {
  width: 100% !important;
  height: 280px !important;
  border-radius: 12px !important;
  background: #09090b !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Shimmerwave sweep animation */
.vr-llm-shimmer-wave {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(204, 255, 0, 0.08) 35%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(204, 255, 0, 0.08) 65%,
    transparent 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: vr-shimmerSweep 1.8s linear infinite !important;
}

@keyframes vr-shimmerSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.vr-llm-skeleton-center {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Quantum ring spinner */
.vr-quantum-loader {
  position: relative !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vr-quantum-ring {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  border: 3px solid rgba(204, 255, 0, 0.15) !important;
  border-top-color: var(--vr-primary, #ccff00) !important;
  border-right-color: var(--vr-primary, #ccff00) !important;
  animation: vr-spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite !important;
}

.vr-quantum-sparkle {
  font-size: 20px !important;
  animation: vr-bounceSparkle 1.2s ease-in-out infinite alternate !important;
}

@keyframes vr-bounceSparkle {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px #ccff00); }
}

.vr-generating-text-pulse {
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 12px rgba(204, 255, 0, 0.4) !important;
  animation: vr-pulseFast 1.5s ease-in-out infinite !important;
}

/* Progress bar animation */
.vr-generating-progress-bar {
  width: 180px !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.vr-generating-progress-fill {
  height: 100% !important;
  width: 60% !important;
  background: linear-gradient(90deg, #a3e635, #ccff00, #ffffff) !important;
  border-radius: 4px !important;
  animation: vr-progressIndeterminate 1.8s ease-in-out infinite !important;
}

@keyframes vr-progressIndeterminate {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(50%); }
  100% { transform: translateX(200%); }
}

@keyframes vr-pulseFast {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes vr-glowPulse {
  0% { box-shadow: 0 0 4px rgba(204, 255, 0, 0.2); }
  100% { box-shadow: 0 0 16px rgba(204, 255, 0, 0.8); }
}

/* Generate CTA Button Glowing State while generating */
.vr-generate-icon-btn:disabled,
.vr-generate-icon-btn.is-generating {
  background: var(--vr-primary, #ccff00) !important;
  color: #000000 !important;
  opacity: 0.95 !important;
  box-shadow: 0 0 20px rgba(204, 255, 0, 0.6) !important;
  animation: vr-btnGlowPulse 1.2s ease-in-out infinite alternate !important;
}

@keyframes vr-btnGlowPulse {
  0% { box-shadow: 0 0 8px rgba(204, 255, 0, 0.4); }
  100% { box-shadow: 0 0 24px rgba(204, 255, 0, 0.8); }
}

/* Light mode generating/disabled state */
.vr-workspace.vr-light .vr-generate-icon-btn:disabled,
.vr-workspace.vr-light .vr-generate-icon-btn.is-generating {
  background: #4f46e5 !important;
  color: #ffffff !important;
  opacity: 0.95 !important;
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.6) !important;
  animation: vr-btnGlowPulseIndigo 1.2s ease-in-out infinite alternate !important;
}

@keyframes vr-btnGlowPulseIndigo {
  0% { box-shadow: 0 0 8px rgba(79, 70, 229, 0.4); }
  100% { box-shadow: 0 0 24px rgba(79, 70, 229, 0.8); }
}

.vr-llm-feed-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--vr-text-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.vr-llm-item {
  display: flex !important;
  background: var(--vr-card-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--vr-border-medium) !important;
  border-radius: var(--vr-radius-md) !important;
  padding: var(--vr-space-3) !important;
  gap: var(--vr-space-3) !important;
  box-shadow: var(--vr-shadow-sm) !important;
  animation: vr-fadeIn 0.3s ease forwards !important;
}

/* Image-only card — larger image, no meta sidebar */
.vr-llm-item--img-only {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.vr-llm-item--img-only .vr-llm-img-wrap {
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  border-radius: var(--vr-radius-lg, 12px) !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
  border: 1px solid var(--vr-border-medium) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
}

.vr-llm-item--img-only .vr-llm-img-wrap:hover {
  transform: none !important;
}

.vr-llm-item--img-only .vr-llm-img-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* Hover action overlay */
.vr-llm-img-hover-actions {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
}

.vr-llm-item--img-only .vr-llm-img-wrap:hover .vr-llm-img-hover-actions {
  opacity: 1 !important;
}

.vr-llm-hover-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  text-decoration: none !important;
  padding: 0 !important;
}

.vr-llm-hover-btn:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: scale(1.15) !important;
}

.vr-llm-hover-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* Old layout fallback */
.vr-llm-img-wrap {
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--vr-radius-sm) !important;
  overflow: hidden !important;
  background: var(--vr-surface-elevated) !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.vr-llm-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.vr-llm-meta {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.vr-llm-sub {
  font-size: 12px !important;
  color: var(--vr-text-primary) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.vr-llm-model {
  font-size: 11px !important;
  color: var(--vr-primary) !important;
  font-family: var(--vr-font-mono) !important;
}

.vr-llm-cost, .vr-llm-date {
  font-size: 10px !important;
  color: var(--vr-text-dim) !important;
}

.vr-llm-actions {
  display: flex !important;
  gap: var(--vr-space-1) !important;
  margin-top: var(--vr-space-1) !important;
}

.vr-llm-action-btn {
  background: var(--vr-surface-elevated) !important;
  border: 1px solid var(--vr-border-subtle) !important;
  color: var(--vr-text-dim) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: var(--vr-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.vr-llm-action-btn:hover {
  background: var(--vr-surface) !important;
  color: var(--vr-text-primary) !important;
}

.vr-llm-loading {
  height: 80px !important;
  background: linear-gradient(90deg, var(--vr-surface) 25%, var(--vr-surface-elevated) 50%, var(--vr-surface) 75%) !important;
  background-size: 200% 100% !important;
  animation: vr-pulse 1.5s infinite linear !important;
  border-radius: var(--vr-radius-md) !important;
  border: 1px solid var(--vr-border-subtle) !important;
}

/* ==========================================================================
   9. BADGES, CHIPS & TOOLS
   ========================================================================== */

.vr-cost-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(204, 255, 0, 0.1) !important;
  color: var(--vr-primary) !important;
  padding: 4px 8px !important;
  border-radius: var(--vr-radius-full) !important;
  font-family: var(--vr-font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.vr-workspace.vr-light .vr-cost-badge {
  background: rgba(90, 122, 0, 0.1) !important;
}

.vr-native-res-badge {
  font-size: 10px !important;
  font-family: var(--vr-font-mono) !important;
  color: var(--vr-text-muted) !important;
  background: var(--vr-surface-elevated) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid var(--vr-border-subtle) !important;
}

.vr-image-option-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-1) !important;
}

.vr-image-option-label {
  font-size: 11px !important;
  color: var(--vr-text-dim) !important;
}

.vr-prompt-show-btn {
  background: transparent !important;
  border: none !important;
  color: var(--vr-primary) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  padding: var(--vr-space-1) !important;
}

/* Toast Notification System — Hidden by Default, Fixed at Top-Right Corner of Screen */
.vr-toast {
  display: none !important;
  position: fixed !important;
  top: 76px !important;
  right: 24px !important;
  bottom: auto !important;
  left: auto !important;
  background: rgba(18, 18, 20, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border-left: 4px solid var(--vr-primary, #ccff00) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 999999 !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(-12px) !important;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vr-toast.show {
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.vr-toast svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  color: var(--vr-primary, #ccff00) !important;
}

/* Description Panel */
.vr-description-panel {
  background: var(--vr-card-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--vr-border-medium) !important;
  border-radius: var(--vr-radius-md) !important;
  padding: var(--vr-space-4) !important;
  color: var(--vr-text-primary) !important;
  font-size: 13px !important;
  max-width: 300px !important;
  position: absolute !important;
  top: var(--vr-space-4) !important;
  right: var(--vr-space-4) !important;
  z-index: var(--vr-z-sidebar) !important;
}

.vr-description-close {
  position: absolute !important;
  top: var(--vr-space-2) !important;
  right: var(--vr-space-2) !important;
  background: transparent !important;
  border: none !important;
  color: var(--vr-text-dim) !important;
  cursor: pointer !important;
}

/* ==========================================================================
   10. RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1024px) {
  .vr-sidebar {
    width: 260px !important;
  }
  
  .vr-panel-prompt {
    width: 95% !important;
  }
}

@media (max-width: 767px) {
  .vr-workspace-content {
    flex-direction: column !important;
  }
  
  .vr-dock {
    width: 100% !important;
    height: 60px !important;
    flex-direction: row !important;
    padding: 0 var(--vr-space-3) !important;
    border-right: none !important;
    border-bottom: 1px solid var(--vr-border-subtle) !important;
    overflow-x: auto !important;
  }
  
  .vr-dock-separator {
    width: 1px !important;
    height: 24px !important;
    margin: 0 var(--vr-space-2) !important;
  }
  
  .vr-sidebar {
    width: calc(100% - 32px) !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 160px !important;
  }
  
  .vr-llm-feed {
    display: none !important; /* Hide feed on mobile by default */
  }
  
  .vr-panel-prompt {
    width: calc(100% - 32px) !important;
  }
  
  .vr-prompt-options-row {
    flex-wrap: wrap !important;
  }
}

/* ==========================================================================
   11. GPU HARDWARE COMPOSITING ISOLATION
   ========================================================================== */

.vr-workspace,
.vr-app-header,
.vr-dock,
.vr-sidebar,
.vr-panel-prompt,
.vr-canvas-area,
.vr-toast {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform-style: flat !important;
}

/* ==========================================================================
   12. CHAT PANEL EXTRA & NEW CHAT ROW
   ========================================================================== */

.vr-chat-new-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--vr-space-3) !important;
  border-top: 1px solid var(--vr-border-subtle) !important;
}

.vr-chat-panel-footer {
  padding: var(--vr-space-3) !important;
  border-top: 1px solid var(--vr-border-subtle) !important;
  text-align: center !important;
  font-size: 12px !important;
  color: var(--vr-text-muted) !important;
}

/* ==========================================================================
   13. FIELDS GRID (DYNAMIC PANEL FIELDS)
   ========================================================================== */

.vr-fields-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--vr-space-4) !important;
}

/* ==========================================================================
   14. VIRTUAL SELECT OVERRIDES (DARK/LIGHT)
   ========================================================================== */

.vr-workspace .vscomp-toggle-button {
  background: var(--vr-surface) !important;
  border: 1px solid var(--vr-border-medium) !important;
  border-radius: var(--vr-radius-md) !important;
  color: var(--vr-text-primary) !important;
  padding: var(--vr-space-2) var(--vr-space-3) !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
}

.vr-workspace .vscomp-dropbox-container {
  background: var(--vr-surface) !important;
  border: 1px solid var(--vr-border-medium) !important;
  border-radius: var(--vr-radius-md) !important;
  box-shadow: var(--vr-shadow-lg) !important;
}

.vr-workspace .vscomp-option-text {
  color: var(--vr-text-primary) !important;
  font-family: var(--vr-font-ui) !important;
  font-size: 13px !important;
}

.vr-workspace .vscomp-option.selected .vscomp-option-text {
  color: var(--vr-primary) !important;
}

.vr-workspace .vscomp-search-input {
  background: var(--vr-surface-elevated) !important;
  color: var(--vr-text-primary) !important;
  border: 1px solid var(--vr-border-subtle) !important;
  border-radius: var(--vr-radius-sm) !important;
}

/* ==========================================================================
   15. ULTRA-MINIMAL ROYAL INDIGO SAAS LIGHT MODE OVERRIDES (#4f46e5)
   ========================================================================== */

/* Active Dock Button — already handled inline above, this serves as final override */
.vr-workspace.vr-light .vr-dock-btn.active, 
.vr-workspace.vr-light .vr-dock-btn.is-active {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
}

.vr-workspace.vr-light .vr-dock-btn.active svg, 
.vr-workspace.vr-light .vr-dock-btn.is-active svg,
.vr-workspace.vr-light .vr-dock-btn.active svg path, 
.vr-workspace.vr-light .vr-dock-btn.is-active svg path,
.vr-workspace.vr-light .vr-dock-btn.active svg line,
.vr-workspace.vr-light .vr-dock-btn.is-active svg line,
.vr-workspace.vr-light .vr-dock-btn.active svg polyline,
.vr-workspace.vr-light .vr-dock-btn.is-active svg polyline,
.vr-workspace.vr-light .vr-dock-btn.active svg rect,
.vr-workspace.vr-light .vr-dock-btn.is-active svg rect,
.vr-workspace.vr-light .vr-dock-btn.active svg circle,
.vr-workspace.vr-light .vr-dock-btn.is-active svg circle {
  stroke: #ffffff !important;
  color: #ffffff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* New Chat button rules are defined with higher specificity earlier in the file */

/* Active Annotation & Tool Buttons */
.vr-workspace.vr-light .vr-annot-btn.active, 
.vr-workspace.vr-light .vr-annot-btn.is-active,
.vr-workspace.vr-light .vr-tool-btn.active {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

.vr-workspace.vr-light .vr-annot-btn.active svg, 
.vr-workspace.vr-light .vr-annot-btn.is-active svg,
.vr-workspace.vr-light .vr-tool-btn.active svg {
  stroke: #ffffff !important;
  fill: none !important;
}

/* Generate Button */
.vr-workspace.vr-light .vr-generate-icon-btn,
.vr-workspace.vr-light .vr-prompt-submit-btn {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border: 1px solid #4f46e5 !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35) !important;
}

.vr-workspace.vr-light .vr-generate-icon-btn:hover,
.vr-workspace.vr-light .vr-prompt-submit-btn:hover {
  background: #4338ca !important;
  border-color: #4338ca !important;
}

.vr-workspace.vr-light .vr-generate-icon-btn svg,
.vr-workspace.vr-light .vr-prompt-submit-btn svg {
  stroke: #ffffff !important;
}

/* Header & Panels */
.vr-workspace.vr-light .vr-app-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e4e4e7 !important;
}

/* ── LIGHT MODE SHADE ELEVATION SYSTEM (3 Distinct Shades of White/Cool Neutrals) ── */
.vr-workspace.vr-light .vr-dock {
  background: #f1f5f9 !important; /* Shade #1: Cool Slate-100 Off-White Dock */
  border-right: 1px solid #cbd5e1 !important;
}

.vr-workspace.vr-light .vr-sidebar,
.vr-workspace.vr-light .vr-panel-chat,
.vr-workspace.vr-light .vr-sidebar .vr-panel,
.vr-workspace.vr-light .vr-panel {
  background: #ffffff !important; /* Shade #2: Pristine Pure White Left Sidebar */
  border: 1px solid #94a3b8 !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
}

.vr-workspace.vr-light .vr-panel-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.vr-workspace.vr-light .vr-main {
  background: #e2e8f0 !important; /* Shade #3: Slate-200 Soft Canvas Backdrop */
}

.vr-workspace.vr-light .vr-panel-prompt {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14) !important;
  isolation: isolate !important;
}

.vr-workspace.vr-light .vr-panel-prompt::after {
  background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.2) 0%, rgba(99, 102, 241, 0.1) 50%, rgba(255, 255, 255, 0) 75%) !important;
  opacity: 0.8 !important;
  filter: blur(28px) !important;
}

.vr-workspace.vr-light .vr-prompt-textarea {
  background: transparent !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

.vr-workspace.vr-light .vr-prompt-textarea::placeholder,
.vr-workspace.vr-light textarea.vr-prompt-textarea::placeholder,
.vr-workspace.vr-light .vr-prompt-textarea::-webkit-input-placeholder {
  color: #334155 !important;
  opacity: 1 !important;
}

.vr-workspace.vr-light .vr-prompt-collapse-btn,
.vr-workspace.vr-light .vr-ref-add-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.vr-workspace.vr-light .vr-prompt-collapse-btn svg,
.vr-workspace.vr-light .vr-ref-add-btn svg {
  stroke: #0f172a !important;
}

.vr-workspace.vr-light .vr-prompt-collapse-btn:hover,
.vr-workspace.vr-light .vr-ref-add-btn:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
}

.vr-workspace.vr-light .vr-prompt-collapse-btn:hover svg,
.vr-workspace.vr-light .vr-ref-add-btn:hover svg {
  stroke: #ffffff !important;
}

.vr-workspace.vr-light .vr-hero-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

.vr-workspace.vr-light .vr-hero-desc {
  color: #475569 !important;
}

.vr-workspace.vr-light .vr-hero-featured-img {
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12) !important;
}

.vr-workspace.vr-light .vr-hero-icon {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
}

.vr-workspace.vr-light .vr-prompt-footer-disclaimer {
  color: #64748b !important;
}

/* Generate button light mode — Royal Indigo (final override) */
.vr-workspace.vr-light .vr-generate-icon-btn {
  background: #4f46e5 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #4f46e5 !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35) !important;
}

.vr-workspace.vr-light .vr-generate-icon-btn svg {
  stroke: #ffffff !important;
}

.vr-workspace.vr-light .vr-generate-icon-btn span {
  color: #ffffff !important;
}

.vr-workspace.vr-light .vr-generate-icon-btn:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35) !important;
}

.vr-workspace.vr-light .vr-prompt-collapsible {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16) !important;
}

.vr-workspace.vr-light .vr-prompt-collapsible::after {
  background: #ffffff !important;
  border-right-color: #cbd5e1 !important;
  border-bottom-color: #cbd5e1 !important;
}

.vr-workspace.vr-light .vr-model-select,
.vr-workspace.vr-light .vr-aspect-ratio-select,
.vr-workspace.vr-light .vr-output-size-select {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
}

.vr-workspace.vr-light .vr-model-select option,
.vr-workspace.vr-light .vr-aspect-ratio-select option,
.vr-workspace.vr-light .vr-output-size-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

.vr-workspace.vr-light .vr-image-option-label {
  color: #475569 !important;
  font-weight: 700 !important;
}

.vr-workspace.vr-light .vr-res-preview {
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.vr-workspace.vr-light .vr-prompt-actions {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}

.vr-workspace.vr-light .vr-prompt-hint {
  color: #64748b !important;
}

.vr-workspace.vr-light .vr-prompt-cost {
  color: #0f172a !important;
  background: #e2e8f0 !important;
}

.vr-workspace.vr-light .vr-prompt-disclaimer {
  color: #64748b !important;
}

/* Badges & Cost Indicators */
.vr-workspace.vr-light .vr-cost-badge,
.vr-workspace.vr-light .vr-upscaler-cost-badge,
.vr-workspace.vr-light .vr-header-credit-badge {
  background: #f4f4f5 !important;
  color: #09090b !important;
  border: 1px solid #e4e4e7 !important;
}

.vr-workspace.vr-light .vr-header-credit-badge .vr-credit-icon {
  stroke: #09090b !important;
}

.vr-workspace.vr-light .vr-header-credit-badge .vr-credit-amount {
  color: #09090b !important;
}

.vr-workspace.vr-light .vr-header-credit-badge .vr-credit-label {
  color: #71717a !important;
}

/* Feed Cards */
.vr-workspace.vr-light .vr-llm-item {
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.vr-workspace.vr-light .vr-llm-loading {
  background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%) !important;
}

/* Canvas Area in Light Mode */
.vr-workspace.vr-light .vr-main {
  background-color: #e2e8f0 !important; /* Consistent with Shade #3: Slate-200 */
}

.vr-workspace.vr-light .vr-canvas-area {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
}

/* ==========================================================================
   16. LIGHT MODE TEXT VISIBILITY FIXES
   ========================================================================== */

/* Panel header text — ensure dark text on light bg */
.vr-workspace.vr-light .vr-panel-title {
  color: #09090b !important;
}

.vr-workspace.vr-light .vr-panel-close-btn {
  color: #71717a !important;
}

.vr-workspace.vr-light .vr-panel-close-btn:hover {
  color: #09090b !important;
  background: #f4f4f5 !important;
}

/* Form labels & section labels */
.vr-workspace.vr-light .vr-field-label {
  color: #09090b !important;
}

.vr-workspace.vr-light .vr-section-label {
  color: #71717a !important;
}

/* Toggle text */
.vr-workspace.vr-light .vr-toggle-text {
  color: #09090b !important;
}

/* Dock button tooltip text */
.vr-workspace.vr-light .vr-dock-btn:hover::after {
  background: #ffffff !important;
  color: #09090b !important;
  border-color: #e4e4e7 !important;
}

/* Dock button default text */
.vr-workspace.vr-light .vr-dock-btn {
  color: #71717a !important;
}

.vr-workspace.vr-light .vr-dock-btn:hover {
  color: #09090b !important;
  background: #f4f4f5 !important;
}

/* Chat item text in light mode */
.vr-workspace.vr-light .vr-chat-item-title {
  color: #09090b !important;
}

.vr-workspace.vr-light .vr-chat-item-date {
  color: #71717a !important;
}

/* Range badge in light mode */
.vr-workspace.vr-light .vr-range-badge {
  background: #f4f4f5 !important;
  color: #09090b !important;
}

/* Debug panel in light mode */
.vr-workspace.vr-light .vr-debug-meta {
  background: #f4f4f5 !important;
  border-color: #e4e4e7 !important;
  color: #52525b !important;
}
.vr-workspace.vr-light .vr-debug-meta strong {
  color: #09090b !important;
}
.vr-workspace.vr-light .vr-debug-copy-btn {
  background: #09090b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.vr-workspace.vr-light .vr-debug-copy-btn svg {
  stroke: #ffffff !important;
}
.vr-workspace.vr-light .vr-debug-copy-btn:hover {
  background: #27272a !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

/* Description panel text */
.vr-workspace.vr-light .vr-description-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: #e4e4e7 !important;
  color: #09090b !important;
}

/* Input focus ring in light mode */
.vr-workspace.vr-light .vr-input:focus,
.vr-workspace.vr-light .vr-textarea:focus,
.vr-workspace.vr-light select:focus {
  border-color: #09090b !important;
  box-shadow: 0 0 0 2px rgba(9, 9, 11, 0.08) !important;
}

/* Seed buttons in light mode */
.vr-workspace.vr-light .vr-seed-random-btn,
.vr-workspace.vr-light .vr-seed-lock-btn {
  background: #f4f4f5 !important;
  border-color: #e4e4e7 !important;
  color: #71717a !important;
}

.vr-workspace.vr-light .vr-seed-random-btn:hover,
.vr-workspace.vr-light .vr-seed-lock-btn:hover {
  color: #09090b !important;
  border-color: #d4d4d8 !important;
}

/* App header title text */
.vr-workspace.vr-light .vr-app-header-title {
  color: #09090b !important;
}

.vr-workspace.vr-light .vr-app-header-desc {
  color: #71717a !important;
}

/* Native resolution badge */
.vr-workspace.vr-light .vr-native-res-badge {
  background: #f4f4f5 !important;
  color: #52525b !important;
  border-color: #e4e4e7 !important;
}

/* Chat panel footer */
.vr-workspace.vr-light .vr-chat-panel-footer {
  color: #a1a1aa !important;
  border-top-color: #f4f4f5 !important;
}

/* Canvas toolbar buttons */
.vr-workspace.vr-light .vr-canvas-toolbar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #e4e4e7 !important;
}

.vr-workspace.vr-light .vr-canvas-toolbar-btn {
  color: #52525b !important;
}

.vr-workspace.vr-light .vr-canvas-toolbar-btn:hover {
  background: #f4f4f5 !important;
  color: #09090b !important;
}