src/app/globals.css

@import "tailwindcss";

@import "tailwindcss";

@theme {
  --color-background: #0f111a;
  /* Deep Space Slate */
  --color-foreground: #e2e8f0;
  /* Slate 200 */

  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  --color-panel: rgba(30, 31, 34, 0.4);
  --color-panel-border: rgba(255, 255, 255, 0.05);

  --color-bot-bubble: rgba(30, 31, 34, 0.5);
  --color-user-bubble: #3b82f6;
  --color-user-bubble-alt: #60a5fa;
}

@layer base {
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  }

  /* Custom scrollbar for deep dark mode */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
  }
}

@layer utilities {
  .anti-gravity-panel {
    background: var(--color-panel);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--color-panel-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.4);
  }

  .anti-gravity-header {
    background: rgba(15, 17, 26, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--color-panel-border);
  }

  .message-gradient {
    background: linear-gradient(135deg, var(--color-user-bubble), var(--color-user-bubble-alt));
  }

  .font-mono-custom {
    font-family: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
}