@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
    
    /* Custom text colors for light mode */
    --text-gray-300: #4b5563;
    --text-gray-400: #374151;
    --text-gray-500: #1f2937;
  }
 
  .dark {
    --background: 220 26% 9%;
    --foreground: 210 40% 98%;
    --card: 222 25% 11%;
    --card-foreground: 210 40% 98%;
    --popover: 222 25% 11%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 12%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 12%;
    --muted-foreground: 215 20.2% 75%;
    --accent: 217.2 91.2% 59.8%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 12%;
    --input: 217.2 32.6% 12%;
    --ring: 224.3 76.3% 48%;
    
    /* Custom text colors for dark mode */
    --text-gray-300: #d1d5db;
    --text-gray-400: #9ca3af;
    --text-gray-500: #6b7280;
  }

  body {
    @apply bg-background text-foreground;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-primary {
    @apply btn bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-primary/50;
  }
  
  .btn-secondary {
    @apply btn bg-secondary text-secondary-foreground hover:bg-secondary/90 focus:ring-secondary/50;
  }
  
  .btn-outline {
    @apply btn border border-input bg-background hover:bg-accent hover:text-accent-foreground focus:ring-primary/50;
  }
  
  .card {
    @apply bg-card rounded-lg shadow-sm border border-border text-card-foreground;
  }
  
  .input {
    @apply block w-full px-3 py-2 border border-input bg-background rounded-md shadow-sm placeholder-muted-foreground focus:outline-none focus:ring-primary/50 focus:border-primary/50 text-foreground;
  }
  
  .textarea {
    @apply block w-full px-3 py-2 border border-input bg-background rounded-md shadow-sm placeholder-muted-foreground focus:outline-none focus:ring-primary/50 focus:border-primary/50 text-foreground;
  }
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .card {
    @apply rounded-md shadow-sm;
  }
  
  .btn {
    @apply px-3 py-1.5 text-sm;
  }
  
  h1 {
    @apply text-xl;
  }
  
  h2 {
    @apply text-lg;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  @apply bg-transparent;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300/30 dark:bg-gray-600/30 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400/50 dark:bg-gray-500/50;
}

/* Text color overrides */
.text-gray-200 {
  @apply text-foreground;
}

.text-gray-300 {
  color: var(--text-gray-300);
}

.text-gray-400 {
  color: var(--text-gray-400);
}

.text-gray-500 {
  color: var(--text-gray-500);
}

/* Custom background colors for dark mode */
.dark .bg-\[\#0f1117\] {
  background-color: hsl(var(--background));
}

.dark .bg-\[\#171923\] {
  background-color: hsl(var(--card));
}

.dark .bg-\[\#1e2130\] {
  background-color: hsl(var(--muted));
}

/* Light mode background overrides */
.bg-\[\#0f1117\] {
  @apply bg-background;
}

.bg-\[\#171923\] {
  @apply bg-card;
}

.bg-\[\#1e2130\] {
  @apply bg-muted;
}

/* Border color overrides */
.border-white\/\[0\.05\] {
  @apply border-border;
}

/* Hover state overrides */
.hover\:bg-white\/\[0\.06\] {
  @apply hover:bg-accent;
}

/* Debug panel styling */
.debug-panel {
  @apply bg-card text-card-foreground border border-border rounded-lg shadow-lg overflow-hidden max-w-full;
  max-height: 80vh;
}

.debug-panel pre {
  @apply p-4 overflow-auto text-sm;
  max-height: 60vh;
}

.debug-panel-header {
  @apply flex justify-between items-center p-4 border-b border-border bg-muted;
}

.debug-panel-footer {
  @apply p-4 border-t border-border bg-muted;
}

/* Toast and popup styling */
.toast-container {
  @apply z-50;
}

.toast {
  @apply bg-card text-card-foreground border border-border rounded-lg shadow-lg p-4;
}

.toast-success {
  @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 border-green-200 dark:border-green-800;
}

.toast-error {
  @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 border-red-200 dark:border-red-800;
}

.toast-info {
  @apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-800;
}

/* Tooltip styling */
[data-radix-popper-content-wrapper] {
  @apply z-50 !important;
}

.tooltip-content {
  @apply bg-popover text-popover-foreground border border-border rounded-md shadow-md px-3 py-1.5 text-sm;
}

/* Dropdown styling */
.dropdown-content {
  @apply bg-popover text-popover-foreground border border-border rounded-md shadow-md overflow-hidden;
}

/* Notification panel styling */
.notification-panel {
  @apply bg-card text-card-foreground border border-border rounded-lg shadow-lg overflow-hidden;
  width: 320px;
  max-height: 400px;
}

/* Light mode notification panel */
:root:not(.dark) .notification-panel {
  background-color: white !important;
  color: hsl(220, 26%, 14%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode notification panel */
.dark .notification-panel {
  background-color: hsl(220, 26%, 14%) !important;
  color: hsl(210, 40%, 98%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.notification-header {
  @apply flex justify-between items-center p-3 border-b border-border bg-muted;
}

/* Light mode notification header */
:root:not(.dark) .notification-header {
  background-color: #f9fafb !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: hsl(220, 26%, 14%) !important;
}

/* Dark mode notification header */
.dark .notification-header {
  background-color: hsl(220, 26%, 18%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.notification-list {
  @apply overflow-y-auto;
  max-height: 320px;
}

.notification-item {
  @apply p-3 border-b border-border hover:bg-accent/50 cursor-pointer;
}

/* Light mode notification item */
:root:not(.dark) .notification-item {
  background-color: white !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: hsl(220, 26%, 14%) !important;
}

/* Light mode notification item hover */
:root:not(.dark) .notification-item:hover {
  background-color: #f9fafb !important;
}

/* Dark mode notification item */
.dark .notification-item {
  background-color: hsl(220, 26%, 14%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode notification item hover */
.dark .notification-item:hover {
  background-color: hsl(220, 26%, 18%) !important;
}

/* Improve dark mode text visibility */
.dark .text-gray-400 {
  color: #a0aec0 !important; /* Lighter gray for better visibility */
}

.dark .text-gray-500 {
  color: #a8b2c1 !important; /* Lighter gray for better visibility */
}

.dark .text-gray-600 {
  color: #b2bfd0 !important; /* Lighter gray for better visibility */
}

.dark p, .dark span, .dark div {
  color: #e2e8f0; /* Default light color for text in dark mode */
}

/* Ensure links are visible in dark mode */
.dark a {
  color: #63b3ed !important; /* Brighter blue for links */
}

/* Fix for dark mode background */
.dark {
  background-color: #0f1117;
}

.dark .bg-dark-900 {
  background-color: #0f1117 !important;
}

.dark .bg-dark-800 {
  background-color: #171923 !important;
}

/* Custom border styles for dark mode */
.dark .border {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .border-t, .dark .border-b, .dark .border-l, .dark .border-r {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Chat message styling */
.prose pre {
  background-color: hsl(var(--muted));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid hsl(var(--border));
}

.prose pre code {
  background-color: transparent;
  padding: 0;
  color: hsl(var(--foreground));
}

/* Fix for copy button in code blocks */
.prose .group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.prose .opacity-0 {
  opacity: 0;
}

.prose .transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.prose pre button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  background-color: rgba(255, 255, 255, 0.1);
  color: hsl(210, 40%, 96.1%);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  width: auto;
  height: auto;
  min-width: 50px;
  min-height: 24px;
  max-width: 80px;
  max-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prose pre button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Fix for list styling */
.prose ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}

.prose li {
  margin: 0.25rem 0;
}

.prose li::marker {
  color: hsl(var(--muted-foreground));
}

.prose p {
  margin: 0.75rem 0;
}

.prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
}

.prose a:hover {
  text-decoration: none;
}

.prose blockquote {
  border-left: 3px solid hsl(var(--primary));
  padding-left: 1rem;
  margin: 1rem 0;
  color: hsl(var(--muted-foreground));
}

/* Debug panel styling */
.debug-panel {
  background-color: hsl(220, 26%, 14%);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.debug-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: hsl(220, 26%, 18%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Toast notification styling */
.toast-notification {
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  border-radius: 0.375rem !important;
}

/* Light mode toast notifications */
:root:not(.dark) .toast-notification {
  background-color: white !important;
  color: hsl(220, 26%, 14%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Light mode success toast */
:root:not(.dark) .toast-notification.toast-success {
  background-color: #ecfdf5 !important;
  border-left: 4px solid #10b981 !important;
}

/* Light mode error toast */
:root:not(.dark) .toast-notification.toast-error {
  background-color: #fef2f2 !important;
  border-left: 4px solid #ef4444 !important;
}

/* Dark mode toast notifications */
.dark .toast-notification {
  background-color: hsl(220, 26%, 14%) !important;
  color: hsl(210, 40%, 98%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode success toast */
.dark .toast-notification.toast-success {
  border-left: 4px solid #10b981 !important;
}

/* Dark mode error toast */
.dark .toast-notification.toast-error {
  border-left: 4px solid #ef4444 !important;
}

/* Chat avatar styling */
.chat-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-avatar-user {
  background-color: hsl(220, 26%, 18%);
  color: hsl(210, 40%, 98%);
}

.chat-avatar-ai {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Custom styles for code block copy button */
.fixed-copy-button {
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  min-width: 3rem;
  text-align: center;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: rgba(59, 130, 246, 0.1);
  color: rgb(59, 130, 246);
  border: none;
  cursor: pointer;
}

.fixed-copy-button:hover {
  opacity: 1;
  background-color: rgba(59, 130, 246, 0.2);
}

/* Hide the button on mobile to prevent UI issues */
@media (max-width: 640px) {
  .fixed-copy-button {
    opacity: 1;
  }
}

/* Remove the old copy-button styles since we're not using them anymore */
.copy-button {
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.copy-button:hover {
  opacity: 1;
}

/* Ensure the button doesn't change size when text changes */
.copy-button {
  min-width: 3rem;
  text-align: center;
}

/* Hide the button on mobile to prevent UI issues */
@media (max-width: 640px) {
  .copy-button {
    opacity: 1;
  }
}

/* Custom code block styling - new approach */
.code-block-container {
  position: relative;
  margin: 1rem 0;
  border-radius: 0.375rem;
  overflow: hidden;
}

.code-block-pre {
  background-color: #171923;
  padding: 1rem;
  padding-top: 2rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.code-block-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  color: #e2e8f0;
  display: block;
}

.code-block-button {
  position: absolute;
  top: 0.75rem;
  right: 0.5rem;
  background-color: rgba(59, 130, 246, 0.1);
  color: rgb(59, 130, 246);
  border: none;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  min-width: 3rem;
  text-align: center;
  opacity: 0.7;
  transition: all 0.2s ease;
  /* Additional styles for consistency */
  height: auto;
  line-height: 1.5;
  box-shadow: none;
  outline: none;
  z-index: 10;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-block-button:hover {
  opacity: 1;
  background-color: rgba(59, 130, 246, 0.2);
}

/* Ensure button text is centered */
.code-block-button::before,
.code-block-button::after {
  display: none;
}

/* Fix for Firefox */
@-moz-document url-prefix() {
  .code-block-button {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
}

/* Fix for Safari */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .code-block-button {
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
    }
  }
}

/* Success notification in light mode */
:root:not(.dark) .notification-item[data-type="success"] {
  background-color: #f0fdf4 !important;
  border-left: 3px solid #10b981 !important;
}

/* Error notification in light mode */
:root:not(.dark) .notification-item[data-type="error"] {
  background-color: #fef2f2 !important;
  border-left: 3px solid #ef4444 !important;
}

/* Info notification in light mode */
:root:not(.dark) .notification-item[data-type="info"] {
  background-color: #eff6ff !important;
  border-left: 3px solid #3b82f6 !important;
}

/* Success notification in dark mode */
.dark .notification-item[data-type="success"] {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border-left: 3px solid #10b981 !important;
}

/* Error notification in dark mode */
.dark .notification-item[data-type="error"] {
  background-color: rgba(239, 68, 68, 0.1) !important;
  border-left: 3px solid #ef4444 !important;
}

/* Info notification in dark mode */
.dark .notification-item[data-type="info"] {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border-left: 3px solid #3b82f6 !important;
}

/* User Guide Prose Styling */
.prose h1 {
  @apply text-2xl font-bold mb-4 mt-6 text-foreground;
}

.prose h2 {
  @apply text-xl font-semibold mb-3 mt-5 text-foreground;
}

.prose h3 {
  @apply text-lg font-medium mb-2 mt-4 text-foreground;
}

.prose p {
  @apply mb-4 text-foreground;
}

.prose ul {
  @apply list-disc pl-6 mb-4;
}

.prose ol {
  @apply list-decimal pl-6 mb-4;
}

.prose li {
  @apply mb-1;
}

.prose a {
  @apply text-primary hover:underline;
}

.prose code {
  @apply bg-muted px-1 py-0.5 rounded text-sm font-mono;
}

.prose blockquote {
  @apply border-l-4 border-muted pl-4 italic;
}

.dark .prose {
  @apply text-foreground;
}

.light .prose {
  @apply text-foreground;
}

/* Add styles for markdown images */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5rem auto;
  display: block;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dark .prose img {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure code blocks are properly styled */
.prose pre {
  background-color: hsl(var(--muted));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid hsl(var(--border));
}

.prose code {
  background-color: hsl(var(--muted));
  border-radius: 0.25rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.875rem;
  font-family: var(--font-mono);
  color: hsl(var(--foreground));
}

.prose pre code {
  background-color: transparent;
  padding: 0;
  color: hsl(var(--foreground));
}

/* Code block syntax highlighting */
.prose .code-highlight {
  color: hsl(var(--foreground));
}

.dark .prose pre {
  background-color: hsl(var(--muted));
  border-color: hsl(var(--border));
}

.dark .prose code {
  color: hsl(var(--foreground));
}

/* API endpoint styling */
.prose code:has(a) {
  color: hsl(var(--primary));
}

.prose code a {
  color: inherit;
  text-decoration: none;
}

.prose code a:hover {
  text-decoration: underline;
}

/* Notification panel styling */
.notification-panel {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  overflow: hidden;
  width: 320px;
  max-height: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark .notification-panel {
  background-color: hsl(220, 26%, 14%);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.notification-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
}

.dark .notification-panel-header {
  background-color: hsl(220, 26%, 18%);
  border-color: rgba(255, 255, 255, 0.05);
}

.notification-panel-list {
  overflow-y: auto;
  max-height: 320px;
}

.notification-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
  cursor: pointer;
}

.dark .notification-item {
  border-color: rgba(255, 255, 255, 0.05);
}

.notification-item:hover {
  background-color: hsl(var(--accent));
}

/* Toast notification styling */
.toast-notification {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  max-width: 350px;
}

.toast-notification.light {
  background-color: white;
  color: hsl(215.4, 16.3%, 46.9%);
  border: 1px solid hsl(214.3, 31.8%, 91.4%);
}

.toast-notification.dark {
  background-color: hsl(215.3, 25%, 26.7%);
  color: hsl(210, 40%, 98%);
  border: 1px solid hsl(215.3, 25%, 32%);
}

.toast-success.light {
  border-left: 4px solid hsl(142.1, 76.2%, 36.3%);
}

.toast-success.dark {
  border-left: 4px solid hsl(142.1, 70.6%, 45.3%);
}

.toast-error.light {
  border-left: 4px solid hsl(0, 84.2%, 60.2%);
}

.toast-error.dark {
  border-left: 4px solid hsl(0, 72.2%, 50.6%);
} 