/* Theme Variables */
:root {
  --bg-primary: #09090b;
  --bg-secondary: #18181b;
  --bg-tertiary: #27272a;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --border-primary: #27272a;
  --border-secondary: #3f3f46;
  --card-bg: rgba(39, 39, 42, 0.4);
  --header-bg: rgba(0, 0, 0, 0.02);
  --scrollbar-track: rgba(24, 24, 27, 0.4);
  --scrollbar-thumb: rgba(113, 113, 122, 0.8);
}

html.light {
  --bg-primary: #ffffff;
  --bg-secondary: #f4f4f5;
  --bg-tertiary: #e4e4e7;
  --text-primary: #09090b;
  --text-secondary: #52525b;
  --text-tertiary: #71717a;
  --border-primary: #e4e4e7;
  --border-secondary: #d4d4d8;
  --card-bg: rgba(244, 244, 245, 0.6);
  --header-bg: rgba(255, 255, 255, 0.8);
  --scrollbar-track: rgba(228, 228, 231, 0.6);
  --scrollbar-thumb: rgba(161, 161, 170, 0.8);
}

/* Theme Toggle Styles */
.theme-toggle-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 9999px;
  padding: 0.375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

html.light .theme-toggle {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-tertiary);
}

.theme-toggle-btn:hover {
  color: var(--text-secondary);
}

.theme-toggle-btn.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

html.light .theme-toggle-btn.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.theme-toggle-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Light theme overrides - Strong specificity */
html.light body {
  background: linear-gradient(to bottom, #ffffff, #f9fafb, #f4f4f5) !important;
  color: #09090b !important;
}

/* Override inline styles for signin/signup pages */
html.light body[style] {
  background: linear-gradient(to bottom, #ffffff, #f9fafb, #f4f4f5) !important;
  color: #09090b !important;
}

html.light header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-primary);
}

html.light .text-white,
html.light .text-zinc-200 {
  color: #09090b !important;
}

html.light .text-zinc-300 {
  color: #52525b !important;
}

html.light .text-zinc-400,
html.light .text-zinc-500 {
  color: #71717a !important;
}

html.light .bg-zinc-950,
html.light .bg-zinc-900 {
  background-color: rgba(244, 244, 245, 0.8) !important;
}

html.light .bg-zinc-800 {
  background-color: rgba(228, 228, 231, 0.8) !important;
}

html.light .bg-black {
  background-color: rgba(244, 244, 245, 0.9) !important;
}

html.light .border-zinc-800,
html.light .border-zinc-700,
html.light .border-zinc-600 {
  border-color: #d4d4d8 !important;
}

html.light h1,
html.light h2,
html.light h3 {
  color: #09090b !important;
}

html.light .logo span {
  color: #09090b !important;
}

html.light nav a {
  color: #52525b !important;
}

html.light nav a:hover,
html.light nav a.active {
  color: #09090b !important;
}

html.light .btn-ghost {
  border: 1px solid #d4d4d8 !important;
  color: #09090b !important;
}

html.light .btn-ghost:hover {
  background: rgba(244, 244, 245, 0.8) !important;
}

html.light .btn-primary {
  background: #000 !important;
  color: #fff !important;
}

html.light .btn-primary:hover {
  background: rgba(0, 0, 0, 0.85) !important;
}

html.light input {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light input::placeholder {
  color: #71717a !important;
}

html.light .submit-btn {
  background: #000 !important;
  color: #fff !important;
}

html.light .submit-btn:hover {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* Pricing Page Light Theme */
html.light .pricing-card {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: #d4d4d8 !important;
}

html.light .pricing-card:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: #a1a1aa !important;
}

html.light .pricing-card.featured {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: #a1a1aa !important;
}

html.light .badge {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #09090b !important;
}

html.light .plan-name {
  color: #09090b !important;
}

html.light .price {
  color: #09090b !important;
}

html.light .price-period {
  color: #52525b !important;
}

html.light .plan-description {
  color: #52525b !important;
}

html.light .plan-cta.cta-primary {
  background: #000 !important;
  color: #fff !important;
}

html.light .plan-cta.cta-primary:hover {
  background: rgba(0, 0, 0, 0.85) !important;
}

html.light .plan-cta.cta-secondary {
  background: rgba(244, 244, 245, 0.8) !important;
  color: #09090b !important;
  border-color: #d4d4d8 !important;
}

html.light .plan-cta.cta-secondary:hover {
  background: rgba(228, 228, 231, 0.9) !important;
  border-color: #a1a1aa !important;
}

html.light .includes-label {
  color: #52525b !important;
}

html.light .feature-item {
  color: #09090b !important;
}

html.light .check-icon {
  color: #71717a !important;
}

html.light .faq-title {
  color: #09090b !important;
}

html.light .faq-item {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

html.light .faq-question {
  color: #09090b !important;
}

html.light .faq-answer {
  color: #52525b !important;
}

html.light .pricing-section-title {
  color: #09090b !important;
}

html.light .subtitle {
  color: #52525b !important;
}

/* Demo section light theme for signin/signup pages */
html.light .demo-section {
  background: linear-gradient(135deg, #f9fafb 0%, #f4f4f5 100%) !important;
}

/* Stronger override for demo section */
html.light .demo-section[style] {
  background: linear-gradient(135deg, #f9fafb 0%, #f4f4f5 100%) !important;
}

html.light .demo-section::before {
  background:
    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 50%) !important;
}

html.light .demo-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.95) 100%) !important;
  border-color: #d4d4d8 !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 0 rgba(0, 0, 0, 0.02) !important;
}

html.light .window-controls {
  border-bottom-color: #d4d4d8 !important;
}

html.light .window-title {
  color: #52525b !important;
}

html.light .demo-badge {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

html.light .demo-title {
  color: #09090b !important;
}

html.light .demo-subtitle {
  color: #52525b !important;
}

html.light .chat-preview {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(249, 250, 251, 0.6) 100%) !important;
  border-color: #d4d4d8 !important;
}

html.light .message-preview.agent {
  background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%) !important;
  color: #09090b !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light .message-preview.user {
  background: linear-gradient(135deg, #09090b 0%, #18181b 100%) !important;
  color: #fff !important;
}

html.light .typing-indicator {
  background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light .typing-dot {
  background: #71717a !important;
}

html.light .action-card {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
  border-color: #d4d4d8 !important;
}

html.light .action-card:hover {
  border-color: #a1a1aa !important;
}

html.light .action-icon {
  background: rgba(16, 185, 129, 0.15) !important;
}

html.light .action-icon svg {
  color: #059669 !important;
}

html.light .action-card h4 {
  color: #09090b !important;
}

html.light .action-card p {
  color: #52525b !important;
}

html.light .form-section {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
  border-right-color: #d4d4d8 !important;
  border-bottom-color: #d4d4d8 !important;
}

/* Stronger override for form section */
html.light .form-section[style] {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
}

html.light .social-btn {
  background: rgba(244, 244, 245, 0.8) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light .social-btn:hover {
  background: rgba(228, 228, 231, 0.9) !important;
  border-color: #a1a1aa !important;
}

html.light .divider-line {
  background: #d4d4d8 !important;
}

html.light .divider-text {
  color: #71717a !important;
}

html.light label {
  color: #09090b !important;
}

html.light .forgot-password a {
  color: #52525b !important;
}

html.light .forgot-password a:hover {
  color: #09090b !important;
}

html.light .signup-link {
  color: #52525b !important;
}

html.light .signup-link a {
  color: #09090b !important;
}

html.light .signup-link a:hover {
  color: #18181b !important;
}

/* Additional comprehensive light theme coverage */
html.light .header-link {
  color: #52525b !important;
}

html.light .header-link:hover {
  color: #09090b !important;
}

html.light .header-content {
  color: #09090b !important;
}

html.light .signin-container,
html.light .signup-container {
  color: #09090b !important;
}

html.light input:focus {
  border-color: #a1a1aa !important;
}

html.light .social-icon {
  color: #09090b !important;
}

/* Demo content elements */
html.light .demo-content {
  color: #09090b !important;
}

html.light .demo-header {
  color: #09090b !important;
}

html.light .chat-messages-preview {
  background: transparent !important;
}

html.light .action-cards {
  background: transparent !important;
}

/* Window controls */
html.light .window-btn.close {
  background: #f43f5e !important;
}

html.light .window-btn.minimize {
  background: #fbbf24 !important;
}

html.light .window-btn.maximize {
  background: #10b981 !important;
}

/* Scrollbar for light theme */
html.light ::-webkit-scrollbar-track {
  background: var(--scrollbar-track) !important;
}

html.light ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
  border-color: var(--scrollbar-track) !important;
}

html.light ::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary) !important;
}

html.light ::-webkit-scrollbar-thumb:active {
  background: var(--text-secondary) !important;
}

/* Additional border colors */
html.light .border-bottom {
  border-bottom-color: #d4d4d8 !important;
}

html.light .border-right {
  border-right-color: #d4d4d8 !important;
}

html.light .border-top {
  border-top-color: #d4d4d8 !important;
}

html.light .border-left {
  border-left-color: #d4d4d8 !important;
}

/* Shadow adjustments for light theme */
html.light .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

html.light .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

html.light .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

html.light .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
}

html.light .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Specific color overrides */
html.light .text-zinc-600 {
  color: #52525b !important;
}

html.light .text-zinc-700 {
  color: #3f3f46 !important;
}

html.light .text-zinc-800 {
  color: #27272a !important;
}

html.light .text-zinc-900 {
  color: #18181b !important;
}

/* Background opacity variants */
html.light .bg-zinc-900\/40 {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

html.light .bg-zinc-900\/50 {
  background-color: rgba(244, 244, 245, 0.7) !important;
}

html.light .bg-zinc-900\/60 {
  background-color: rgba(244, 244, 245, 0.8) !important;
}

html.light .bg-zinc-900\/70 {
  background-color: rgba(244, 244, 245, 0.85) !important;
}

html.light .bg-zinc-800\/40 {
  background-color: rgba(244, 244, 245, 0.5) !important;
}

html.light .bg-zinc-800\/50 {
  background-color: rgba(228, 228, 231, 0.6) !important;
}

html.light .bg-zinc-800\/60 {
  background-color: rgba(228, 228, 231, 0.7) !important;
}

html.light .bg-black\/40 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

html.light .bg-black\/30 {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

html.light .bg-black\/20 {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Border opacity variants */
html.light .border-zinc-800\/50 {
  border-color: rgba(212, 212, 216, 0.5) !important;
}

html.light .border-zinc-700\/50 {
  border-color: rgba(212, 212, 216, 0.5) !important;
}

/* Ring colors for focus states */
html.light .ring-zinc-800 {
  --tw-ring-color: #d4d4d8 !important;
}

html.light .ring-zinc-700 {
  --tw-ring-color: #d4d4d8 !important;
}

/* Hover background variants */
html.light .hover\:bg-zinc-900:hover {
  background-color: rgba(244, 244, 245, 0.9) !important;
}

html.light .hover\:bg-zinc-800:hover {
  background-color: rgba(228, 228, 231, 0.9) !important;
}

html.light .hover\:bg-zinc-700:hover {
  background-color: rgba(212, 212, 216, 0.9) !important;
}

/* Hover border variants */
html.light .hover\:border-zinc-700:hover {
  border-color: #a1a1aa !important;
}

html.light .hover\:border-zinc-600:hover {
  border-color: #71717a !important;
}

/* Hover text variants */
html.light .hover\:text-white:hover {
  color: #09090b !important;
}

html.light .hover\:text-zinc-200:hover {
  color: #09090b !important;
}

html.light .hover\:text-zinc-300:hover {
  color: #18181b !important;
}

/* Additional utility classes */
html.light .text-gray-400 {
  color: #71717a !important;
}

html.light .text-gray-500 {
  color: #71717a !important;
}

html.light .text-gray-600 {
  color: #52525b !important;
}

html.light .bg-gray-900 {
  background-color: rgba(244, 244, 245, 0.8) !important;
}

html.light .bg-gray-800 {
  background-color: rgba(228, 228, 231, 0.8) !important;
}

html.light .border-gray-800 {
  border-color: #d4d4d8 !important;
}

html.light .border-gray-700 {
  border-color: #d4d4d8 !important;
}

/* Ensure all main elements have proper background */
html.light main {
  background: transparent !important;
}

html.light section {
  color: #09090b !important;
}

html.light article {
  color: #09090b !important;
}

html.light aside {
  color: #09090b !important;
}

/* Footer if exists */
html.light footer {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: #e4e4e7 !important;
  color: #09090b !important;
}

/* Specific overrides for signin/signup inline styles */
html.light .signin-container h1,
html.light .signup-container h1 {
  color: #09090b !important;
}

html.light .signin-container .subtitle,
html.light .signup-container .subtitle {
  color: #52525b !important;
}

html.light .demo-header .demo-title {
  color: #09090b !important;
}

html.light .demo-header .demo-subtitle {
  color: #52525b !important;
}

html.light .window-title {
  color: #52525b !important;
}

html.light .demo-badge {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

/* Override specific gradient backgrounds */
html.light .chat-preview {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(249, 250, 251, 0.6) 100%) !important;
  border-color: #d4d4d8 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html.light .message-preview.agent {
  background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%) !important;
  color: #09090b !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

html.light .message-preview.user {
  background: linear-gradient(135deg, #09090b 0%, #18181b 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

html.light .typing-indicator {
  background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light .typing-dot {
  background: #71717a !important;
}

html.light .action-card {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
  border-color: #d4d4d8 !important;
}

html.light .action-card:hover {
  border-color: #a1a1aa !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

html.light .action-icon {
  background: rgba(16, 185, 129, 0.15) !important;
}

html.light .action-icon svg {
  color: #059669 !important;
}

html.light .action-card h4 {
  color: #09090b !important;
}

html.light .action-card p {
  color: #52525b !important;
}

/* Social buttons */
html.light .social-btn {
  background: rgba(244, 244, 245, 0.8) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light .social-btn:hover {
  background: rgba(228, 228, 231, 0.9) !important;
  border-color: #a1a1aa !important;
}

html.light .social-icon {
  color: #09090b !important;
}

/* Divider */
html.light .divider-line {
  background: #d4d4d8 !important;
}

html.light .divider-text {
  color: #71717a !important;
}

/* Form elements */
html.light label {
  color: #09090b !important;
}

html.light input {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light input:focus {
  border-color: #a1a1aa !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

html.light input::placeholder {
  color: #71717a !important;
}

/* Submit button */
html.light .submit-btn {
  background: #000 !important;
  color: #fff !important;
}

html.light .submit-btn:hover {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* Links */
html.light .forgot-password a {
  color: #52525b !important;
}

html.light .forgot-password a:hover {
  color: #09090b !important;
}

html.light .signup-link {
  color: #52525b !important;
}

html.light .signup-link a {
  color: #09090b !important;
  font-weight: 600 !important;
}

html.light .signup-link a:hover {
  color: #18181b !important;
}

/* Demo container */
html.light .demo-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.95) 100%) !important;
  border-color: #d4d4d8 !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 0 rgba(0, 0, 0, 0.02) !important;
}

/* Window controls */
html.light .window-controls {
  border-bottom-color: #d4d4d8 !important;
}

html.light .window-btn.close {
  background: #f43f5e !important;
}

html.light .window-btn.minimize {
  background: #fbbf24 !important;
}

html.light .window-btn.maximize {
  background: #10b981 !important;
}

/* Demo content */
html.light .demo-content {
  color: #09090b !important;
}

html.light .demo-header {
  color: #09090b !important;
}

html.light .chat-messages-preview {
  background: transparent !important;
}

html.light .action-cards {
  background: transparent !important;
}

/* Header link */
html.light .header-link {
  color: #52525b !important;
}

html.light .header-link:hover {
  color: #09090b !important;
}

/* ========================================
   MOCK UI LIGHT THEME (Sign In/Sign Up Pages)
   ======================================== */

/* OS Demo Container */
html.light #os-demo {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

/* OS Sidebar */
html.light #os-sidebar {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light #os-sidebar .os-nav {
  background-color: #ffffff !important;
  color: #09090b !important;
  border-color: #d4d4d8 !important;
}

html.light #os-sidebar .os-nav:hover {
  background-color: #f4f4f5 !important;
}

html.light #os-sidebar .mcp-connection {
  background-color: #ffffff !important;
  color: #09090b !important;
  border-color: #d4d4d8 !important;
}

html.light #os-sidebar .user-profile-btn {
  background-color: #ffffff !important;
  color: #09090b !important;
  border-color: #d4d4d8 !important;
}

html.light #os-sidebar .user-profile-btn:hover {
  background-color: #f4f4f5 !important;
}

html.light #os-sidebar .section-header {
  color: #52525b !important;
}

html.light #os-sidebar .nav-label {
  color: #09090b !important;
}

html.light #os-sidebar .sidebar-text-only {
  color: #09090b !important;
}

html.light #os-sidebar .h-px {
  background-color: #d4d4d8 !important;
}

html.light #os-sidebar button#sidebar-toggle {
  background-color: #ffffff !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light #os-sidebar button#sidebar-toggle:hover {
  background-color: #f4f4f5 !important;
}

/* OS Demo Main Content */
html.light #os-demo main {
  background-color: transparent !important;
  color: #09090b !important;
}

html.light #os-demo .rounded-xl {
  background-color: rgba(255, 255, 255, 0.4) !important;
  border-color: #d4d4d8 !important;
}

html.light #os-title {
  color: #09090b !important;
}

/* Preview Section */
html.light #preview {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light #preview::-webkit-scrollbar-track {
  background: rgba(228, 228, 231, 0.5) !important;
}

html.light #preview::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(161, 161, 170, 0.7), rgba(113, 113, 122, 0.7)) !important;
  border-color: rgba(228, 228, 231, 0.3) !important;
}

html.light #preview::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(113, 113, 122, 0.9), rgba(82, 82, 91, 0.9)) !important;
}

/* Action Composer */
html.light #action-composer {
  background-color: rgba(244, 244, 245, 0.7) !important;
  border-color: #d4d4d8 !important;
}

html.light #action-input {
  background-color: transparent !important;
  color: #09090b !important;
}

html.light #action-input::placeholder {
  color: #71717a !important;
}

html.light #action-send {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light #action-send:hover {
  background-color: rgba(244, 244, 245, 0.8) !important;
  border-color: #a1a1aa !important;
}

/* Chat View */
html.light #view-chat {
  color: #09090b !important;
}

html.light #chat-messages {
  color: #09090b !important;
}

html.light #chat-input {
  background-color: transparent !important;
  color: #09090b !important;
}

html.light #chat-input::placeholder {
  color: #71717a !important;
}

html.light #chat-send {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light #chat-send:hover {
  background-color: rgba(244, 244, 245, 0.8) !important;
}

/* MCP Badges */
html.light #mcp-badges {
  color: #09090b !important;
}

html.light #mcp-toggle {
  color: #52525b !important;
}

html.light #mcp-toggle:hover {
  color: #09090b !important;
}

/* File upload button */
html.light #file-upload-btn {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light #file-upload-btn:hover {
  background-color: rgba(244, 244, 245, 0.8) !important;
}

/* Article/Action Cards in Mock UI */
html.light #preview article {
  background: linear-gradient(to bottom right, #ffffff, #f9fafb) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light #preview article:hover {
  border-color: #a1a1aa !important;
}

html.light #preview article .text-base {
  color: #09090b !important;
}

html.light #preview article .text-sm {
  color: #52525b !important;
}

html.light #preview article .text-xs {
  color: #71717a !important;
}

/* Buttons in Mock UI */
html.light #preview .btn-exec {
  background-color: #000 !important;
  color: #fff !important;
}

html.light #preview .btn-exec:hover {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

html.light #preview .btn-regen,
html.light #preview .btn-ignore {
  background-color: rgba(244, 244, 245, 0.8) !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.light #preview .btn-regen:hover,
html.light #preview .btn-ignore:hover {
  background-color: rgba(228, 228, 231, 0.9) !important;
  border-color: #a1a1aa !important;
}

/* Progress bar in mock UI */
html.light #preview .progress-indeterminate {
  background: rgb(228 228 231) !important;
}

html.light #preview .progress-indeterminate::after {
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, .2), transparent) !important;
}

/* Status badges in mock UI */
html.light #preview .bg-emerald-500\/10 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}

html.light #preview .text-emerald-300,
html.light #preview .text-emerald-400 {
  color: #059669 !important;
}

html.light #preview .border-emerald-500\/30,
html.light #preview .border-emerald-500\/40 {
  border-color: rgba(16, 185, 129, 0.4) !important;
}

html.light #preview .bg-blue-500\/10 {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

html.light #preview .text-blue-300,
html.light #preview .text-blue-400 {
  color: #2563eb !important;
}

html.light #preview .bg-rose-500\/10 {
  background-color: rgba(244, 63, 94, 0.15) !important;
}

html.light #preview .text-rose-300 {
  color: #e11d48 !important;
}

html.light #preview .bg-zinc-700 {
  background-color: rgba(228, 228, 231, 0.8) !important;
}

html.light #preview .bg-black\/50,
html.light #preview .bg-black\/40,
html.light #preview .bg-black\/30 {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

html.light #preview .border-zinc-700 {
  border-color: #d4d4d8 !important;
}

/* Icons in mock UI */
html.light #preview i,
html.light #os-sidebar i {
  color: #52525b !important;
}

html.light #preview .text-zinc-300 i {
  color: #52525b !important;
}

/* Execution steps in mock UI */
html.light #preview .text-blue-300 {
  color: #2563eb !important;
}

html.light #preview .text-blue-400 {
  color: #2563eb !important;
}

html.light #preview .text-emerald-400 {
  color: #059669 !important;
}

html.light #preview .text-zinc-500 {
  color: #71717a !important;
}

html.light #preview .text-zinc-600 {
  color: #52525b !important;
}

/* Border colors in mock UI */
html.light #preview .border-zinc-700\/50 {
  border-color: rgba(212, 212, 216, 0.5) !important;
}

html.light #os-demo .border-b {
  border-bottom-color: #d4d4d8 !important;
}

/* Rounded elements in mock UI */
html.light #preview .rounded-lg,
html.light #preview .rounded-xl,
html.light #preview .rounded-2xl {
  border-color: #d4d4d8 !important;
}

/* Additional comprehensive overrides for remaining elements */
html.light #os-demo * {
  border-color: #d4d4d8 !important;
}

html.light #os-demo .text-zinc-200,
html.light #os-demo .text-zinc-300,
html.light #os-demo .text-zinc-400 {
  color: #09090b !important;
}

html.light #os-demo .bg-zinc-900,
html.light #os-demo .bg-zinc-800,
html.light #os-demo .bg-black {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

/* Specific overrides for all text in preview */
html.light #preview * {
  color: #09090b !important;
}

html.light #preview .text-zinc-400,
html.light #preview .text-zinc-500 {
  color: #71717a !important;
}

html.light #preview .text-zinc-300 {
  color: #52525b !important;
}

/* Override for all backgrounds in preview */
html.light #preview .bg-zinc-900\/70,
html.light #preview .bg-zinc-900\/60,
html.light #preview .bg-zinc-900\/50 {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

html.light #preview .from-zinc-900\/70 {
  --tw-gradient-from: rgba(255, 255, 255, 0.85) !important;
}

html.light #preview .to-zinc-900\/50 {
  --tw-gradient-to: rgba(249, 250, 251, 0.75) !important;
}

/* Sidebar specific overrides */
html.light #os-sidebar * {
  color: #09090b !important;
}

html.light #os-sidebar .text-zinc-300,
html.light #os-sidebar .text-zinc-400,
html.light #os-sidebar .text-zinc-500 {
  color: #52525b !important;
}

/* Info boxes and metadata */
html.light #preview .rounded-lg.border {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-color: #d4d4d8 !important;
}

html.light #preview .shadow-sm,
html.light #preview .shadow-md {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Execution steps styling */
html.light #preview .space-y-2>div {
  color: #09090b !important;
}

html.light #preview .font-medium {
  color: #09090b !important;
}

html.light #preview .font-mono {
  color: #52525b !important;
}

/* Icon containers */
html.light #preview .rounded-lg.border.bg-black\/50 {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-color: #d4d4d8 !important;
}

html.light #preview .shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Chip/badge elements */
html.light #preview .rounded-full {
  border-color: #d4d4d8 !important;
}

html.light #preview .inline-flex.items-center.gap-1 {
  color: #09090b !important;
}

/* Specific color overrides for status text */
html.light #preview .text-emerald-300 {
  color: #059669 !important;
}

html.light #preview .text-blue-300 {
  color: #2563eb !important;
}

html.light #preview .text-rose-300 {
  color: #e11d48 !important;
}

html.light #preview .text-amber-300 {
  color: #d97706 !important;
}

html.light #preview .text-sky-300 {
  color: #0284c7 !important;
}

/* Button disabled states */
html.light #preview button:disabled {
  background-color: rgba(228, 228, 231, 0.6) !important;
  color: #71717a !important;
  opacity: 0.6 !important;
}

/* Flex containers */
html.light #preview .flex.items-start.gap-3,
html.light #preview .flex.items-center.gap-2 {
  color: #09090b !important;
}

/* Leading text */
html.light #preview .leading-tight,
html.light #preview .leading-relaxed {
  color: #09090b !important;
}

/* All paragraph text */
html.light #preview p {
  color: #52525b !important;
}

/* All heading text */
html.light #preview h1,
html.light #preview h2,
html.light #preview h3,
html.light #preview h4,
html.light #preview h5,
html.light #preview h6 {
  color: #09090b !important;
}

/* All span text */
html.light #preview span {
  color: inherit !important;
}

/* Divider in sidebar */
html.light #os-sidebar .h-px {
  background-color: #d4d4d8 !important;
  border: none !important;
}

/* Section headers in sidebar */
html.light #os-sidebar .text-xs {
  color: #71717a !important;
}

html.light #os-sidebar .uppercase {
  color: #71717a !important;
}

/* MCP connection status dots - keep original colors for status */
html.light #os-sidebar .bg-emerald-500 {
  background-color: #10b981 !important;
}

/* Truncate text */
html.light #os-sidebar .truncate {
  color: #09090b !important;
}

/* OS nav active state */
html.light #os-sidebar .os-nav.bg-zinc-900\/60 {
  background-color: rgba(244, 244, 245, 1) !important;
}

html.light #os-sidebar .os-nav.text-white {
  color: #09090b !important;
}

/* Chat messages specific */
html.light .chat-messages-preview {
  background: transparent !important;
}

html.light .message-preview {
  color: #09090b !important;
}

/* Override any remaining dark backgrounds */
html.light #os-demo .bg-zinc-900\/40,
html.light #os-demo .bg-zinc-800\/60,
html.light #os-demo .bg-black\/40 {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

/* Override border colors globally in demo */
html.light #os-demo .border-zinc-800,
html.light #os-demo .border-zinc-700 {
  border-color: #d4d4d8 !important;
}

/* Text color inheritance fix */
html.light #preview article * {
  color: inherit !important;
}

html.light #preview article {
  color: #09090b !important;
}

html.light #preview article .text-zinc-400 {
  color: #71717a !important;
}

html.light #preview article .text-zinc-300 {
  color: #52525b !important;
}

/* ========================================
   ULTRA-SPECIFIC OVERRIDES FOR REMAINING ELEMENTS
   ======================================== */

/* Force all text in demo to be dark */
html.light .demo-section * {
  color: #09090b !important;
}

html.light .demo-section .text-zinc-400,
html.light .demo-section .text-zinc-500 {
  color: #71717a !important;
}

html.light .demo-section .text-zinc-300 {
  color: #52525b !important;
}

html.light .demo-section .text-white {
  color: #09090b !important;
}

/* Demo container and all children */
html.light .demo-container * {
  border-color: #d4d4d8 !important;
}

html.light .demo-container .text-zinc-200,
html.light .demo-container .text-zinc-300 {
  color: #09090b !important;
}

/* Window controls area */
html.light .window-controls * {
  color: #52525b !important;
}

/* Demo content area */
html.light .demo-content * {
  color: #09090b !important;
}

html.light .demo-content .text-zinc-400 {
  color: #71717a !important;
}

/* Chat preview area */
html.light .chat-preview * {
  border-color: #d4d4d8 !important;
}

html.light .chat-messages-preview * {
  color: #09090b !important;
}

/* Message previews - force colors */
html.light .message-preview * {
  color: inherit !important;
}

html.light .message-preview.agent * {
  color: #09090b !important;
}

html.light .message-preview.user * {
  color: #fff !important;
}

/* Action cards in demo */
html.light .action-cards * {
  color: #09090b !important;
}

html.light .action-cards .text-zinc-400 {
  color: #71717a !important;
}

html.light .action-cards h4 {
  color: #09090b !important;
}

html.light .action-cards p {
  color: #52525b !important;
}

/* All SVG icons in demo */
html.light .demo-section svg {
  color: #52525b !important;
}

html.light .action-icon svg {
  color: #059669 !important;
}

/* Typing indicator */
html.light .typing-indicator * {
  color: #71717a !important;
}

html.light .typing-dot {
  background: #71717a !important;
}

/* Form section - all elements */
html.light .form-section * {
  color: #09090b !important;
}

html.light .form-section .text-zinc-400,
html.light .form-section .text-zinc-500 {
  color: #71717a !important;
}

html.light .form-section .text-zinc-300 {
  color: #52525b !important;
}

html.light .form-section input {
  color: #09090b !important;
}

html.light .form-section input::placeholder {
  color: #71717a !important;
}

html.light .form-section label {
  color: #09090b !important;
}

html.light .form-section .subtitle {
  color: #52525b !important;
}

/* Social buttons - all children */
html.light .social-btn * {
  color: #09090b !important;
}

html.light .social-icon {
  color: #09090b !important;
}

/* Divider elements */
html.light .divider * {
  color: #71717a !important;
}

html.light .divider-line {
  background: #d4d4d8 !important;
}

html.light .divider-text {
  color: #71717a !important;
}

/* Links in form section */
html.light .forgot-password * {
  color: #52525b !important;
}

html.light .signup-link * {
  color: #52525b !important;
}

html.light .signup-link a {
  color: #09090b !important;
}

/* Submit button */
html.light .submit-btn {
  background: #000 !important;
  color: #fff !important;
}

html.light .submit-btn * {
  color: #fff !important;
}

/* Demo badge */
html.light .demo-badge {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

html.light .demo-badge * {
  color: #059669 !important;
}

/* Demo title and subtitle */
html.light .demo-title {
  color: #09090b !important;
}

html.light .demo-title * {
  color: #09090b !important;
}

html.light .demo-subtitle {
  color: #52525b !important;
}

html.light .demo-subtitle * {
  color: #52525b !important;
}

/* All headings in signin/signup */
html.light .signin-container h1,
html.light .signup-container h1,
html.light .signin-container h2,
html.light .signup-container h2 {
  color: #09090b !important;
}

html.light .signin-container h1 *,
html.light .signup-container h1 *,
html.light .signin-container h2 *,
html.light .signup-container h2 * {
  color: #09090b !important;
}

/* Override any remaining inline styles */
html.light [style*="color: white"],
html.light [style*="color: #fff"],
html.light [style*="color: #ffffff"] {
  color: #09090b !important;
}

html.light [style*="color: #e4e4e7"] {
  color: #09090b !important;
}

html.light [style*="color: #a1a1aa"] {
  color: #52525b !important;
}

html.light [style*="color: #71717a"] {
  color: #71717a !important;
}

html.light [style*="background: #000"],
html.light [style*="background: #000000"],
html.light [style*="background: black"] {
  background: #ffffff !important;
}

html.light [style*="background: linear-gradient(135deg, #09090b"] {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
}

html.light [style*="background: linear-gradient(135deg, #27272a"] {
  background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%) !important;
}

html.light [style*="background: rgba(39, 39, 42"] {
  background: rgba(255, 255, 255, 0.6) !important;
}

html.light [style*="background: rgba(24, 24, 27"] {
  background: rgba(249, 250, 251, 0.6) !important;
}

html.light [style*="background: rgba(0, 0, 0"] {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* Border inline styles */
html.light [style*="border: 1px solid #27272a"],
html.light [style*="border-color: #27272a"] {
  border-color: #d4d4d8 !important;
}

html.light [style*="border: 1px solid #3f3f46"],
html.light [style*="border-color: #3f3f46"] {
  border-color: #d4d4d8 !important;
}

/* Ensure all text is readable */
html.light main *:not(button):not(input):not(textarea) {
  color: #09090b !important;
}

html.light main .text-zinc-400,
html.light main .text-zinc-500 {
  color: #71717a !important;
}

html.light main .text-zinc-300 {
  color: #52525b !important;
}

/* Button text should stay as designed */
html.light button {
  color: inherit !important;
}

html.light .btn-primary {
  background: #000 !important;
  color: #fff !important;
}

html.light .btn-primary * {
  color: #fff !important;
}

html.light .btn-ghost {
  color: #09090b !important;
}

html.light .btn-ghost * {
  color: #09090b !important;
}

@media (max-width: 768px) {
  .theme-toggle-container {
    bottom: 1rem;
    right: 1rem;
  }

  .theme-toggle {
    padding: 0.25rem;
  }

  .theme-toggle-btn {
    width: 2rem;
    height: 2rem;
  }

  .theme-toggle-btn svg {
    width: 1rem;
    height: 1rem;
  }
}