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

@layer base {
  :root {
    --background: 224 14% 8%;
    --foreground: 213 15% 90%;
    --card: 224 13% 11%;
    --card-foreground: 213 15% 90%;
    --popover: 224 13% 12%;
    --popover-foreground: 213 15% 90%;
    --primary: 152 60% 38%;
    --primary-foreground: 0 0% 100%;
    --secondary: 224 12% 17%;
    --secondary-foreground: 213 12% 85%;
    --muted: 224 12% 15%;
    --muted-foreground: 218 10% 60%;
    --accent: 224 11% 19%;
    --accent-foreground: 213 15% 90%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 224 11% 17%;
    --input: 224 11% 17%;
    --ring: 152 60% 38%;
    --radius: 0.5rem;

    /* Semantic colors for specific contexts */
    --msg-outgoing: 152 30% 14%;
    --msg-incoming: 224 12% 15%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Custom scrollbar — thin, unobtrusive, matches palette */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(224 11% 22%);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(224 11% 28%);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(224 11% 22%) transparent;
}

/* Constrain CodeMirror editor width */
.cm-editor {
  max-width: 100% !important;
  contain: inline-size;
}
.cm-editor .cm-scroller {
  overflow-x: auto !important;
}