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

* {
  scrollbar-width: thin;
  scrollbar-color: #424242 transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #424242; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #555; }

::selection { background: rgba(0, 122, 204, 0.3); }

[data-panel-group-direction="horizontal"] > [data-resize-handle] {
  width: 1px; background: #3e3e42; transition: background 0.2s;
}
[data-panel-group-direction="horizontal"] > [data-resize-handle]:hover {
  background: #007acc; width: 2px;
}
[data-panel-group-direction="vertical"] > [data-resize-handle] {
  height: 1px; background: #3e3e42; transition: background 0.2s;
}
[data-panel-group-direction="vertical"] > [data-resize-handle]:hover {
  background: #007acc; height: 2px;
}

@keyframes typing-dots {
  0%, 20% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}
.typing-dot { animation: typing-dots 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@layer components {
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-editor-accent focus:ring-offset-0;
  }
  .btn-primary {
    @apply bg-editor-accent hover:bg-editor-accent-hover text-white px-4 py-2 rounded-md
           transition-colors duration-150 font-medium text-sm focus-ring;
  }
  .btn-secondary {
    @apply bg-editor-surface hover:bg-editor-hover text-editor-text px-4 py-2 rounded-md
           border border-editor-border transition-colors duration-150 text-sm focus-ring;
  }
  .input-field {
    @apply bg-editor-bg border border-editor-border rounded-md px-3 py-2 text-sm text-editor-text
           placeholder:text-editor-text-muted focus-ring transition-colors;
  }
}