* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-tertiary: #1a1a24;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --accent: #ec4899;
  --accent-dark: #be185d;
  --border: #2d2d3a;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
}

.app-container {
  display: flex;
  height: 100vh;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a0a1a 50%, #0a0a0f 100%);
}

.app-container.light {
  --bg-primary: #fafafa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f0f0;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --border: #e0e0e0;
  background: linear-gradient(135deg, #fff5f7 0%, #fce7f3 50%, #fff5f7 100%);
}

.sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
}

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

.messages-area {
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.messages-area::-webkit-scrollbar {
  width: 6px;
}

.messages-area::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

.message-user {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  color: white;
  border-radius: 1.25rem 1.25rem 0.25rem 1.25rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.message-ai {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
}

.message-content {
  line-height: 1.6;
}

.message-content p {
  margin-bottom: 0.5rem;
}

.message-content p:last-child {
  margin-bottom: 0;
}

.message-content ul, .message-content ol {
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.message-content strong {
  color: #ec4899;
}

.message-content a {
  color: #ec4899;
  text-decoration: underline;
}

.code-block-wrapper {
  border-radius: 0.5rem;
  overflow: hidden;
  background: #1e1e2e;
  border: 1px solid #363646;
}

.code-block-wrapper pre {
  margin: 0;
  padding: 1rem;
  background: #1e1e2e !important;
}

.code-block-wrapper code {
  font-family: 'JetBrains Mono', monospace;
  background: transparent !important;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  border-radius: 1rem;
  width: fit-content;
}

.typing-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: typing-bounce 1.4s ease-in-out infinite;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
}

.input-area textarea {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
}

.chat-item {
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.chat-item:hover {
  border-color: var(--accent);
}

.settings-overlay {
  animation: fade-in 0.2s ease;
}

.settings-panel {
  animation: slide-up 0.3s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Prose styling for markdown */
.prose {
  max-width: none;
}

.prose h1, .prose h2, .prose h3 {
  color: #ec4899;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.prose code:not([class]) {
  background: rgba(236, 72, 153, 0.2);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875em;
}

.prose blockquote {
  border-left: 3px solid #ec4899;
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--text-secondary);
  font-style: italic;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .message-user, .message-ai {
    max-width: 90% !important;
  }
  
  .input-area textarea {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Light mode specific */
.light .message-ai {
  background: white;
  border-color: #e0e0e0;
  color: #1a1a1a;
}

.light .code-block-wrapper {
  border-color: #e0e0e0;
}

.light .typing-indicator {
  background: white;
}

.light .sidebar {
  background: white;
}

.light .header {
  background: rgba(255, 255, 255, 0.9);
}

.light .input-area {
  background: white;
}

.light textarea {
  background: #f5f5f5 !important;
  color: #1a1a1a !important;
  border-color: #e0e0e0 !important;
}