@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% 65%;
    --accent: 224 11% 19%;
    --accent-foreground: 213 15% 90%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 224 11% 23%;
    --input: 224 11% 23%;
    --ring: 152 60% 38%;
    --radius: 0.5rem;

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

    /* Status indicator pips */
    --status-connected: 142 71% 45%;
    --status-disconnected: 220 9% 46%;

    /* Semantic feedback colors */
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --info: 217 91% 60%;
    --info-foreground: 0 0% 100%;
    --region-override: 270 80% 74%;

    /* Favorites */
    --favorite: 43 96% 56%;

    /* Console / terminal */
    --console: 142 69% 58%;
    --console-command: 142 76% 73%;
    --console-bg: 0 0% 0%;

    /* Unread badges */
    --badge-unread: var(--primary);
    --badge-unread-foreground: var(--primary-foreground);
    --badge-mention: var(--destructive);
    --badge-mention-foreground: var(--destructive-foreground);

    /* Error toast */
    --toast-error: 0 30% 14%;
    --toast-error-foreground: 0 56% 77%;
    --toast-error-border: 0 27% 23%;

    /* Code editor */
    --code-editor-bg: 220 13% 18%;

    /* Overlay / backdrop */
    --overlay: 0 0% 0%;

    /* Typography */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:
      ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Scrollbar */
    --scrollbar: 224 11% 22%;
    --scrollbar-hover: 224 11% 28%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    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(var(--scrollbar));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--scrollbar-hover));
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--scrollbar)) transparent;
}

/* Message highlight animation for jump-to-message */
@keyframes message-highlight {
  0% {
    box-shadow: 0 0 0 2px hsl(var(--primary));
  }
  100% {
    box-shadow: 0 0 0 2px transparent;
  }
}
.message-highlight {
  animation: message-highlight 2s ease-out forwards;
}

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