:root {
  color-scheme: light dark;
  --font-ui: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: var(--ui-font-size, 13px);
  background: var(--bg-main);
  color: var(--text-main);
  height: 100vh;
  overflow: hidden;
  user-select: none;
}

.font-mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.ui-font {
  font-size: var(--ui-font-size, 13px);
}

.ui-font .text-xs,
.ui-font .text-sm {
  font-size: var(--ui-font-size, 13px);
}

.topic-font {
  font-size: var(--topic-font-size, 12px);
}

.payload-font {
  font-size: var(--payload-font-size, 12px);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

input,
textarea,
pre,
code,
[contenteditable="true"] {
  user-select: text;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.flash-topic {
  animation: flash-bg var(--flash-duration, 300ms) ease-out;
  background: #3c282a;
}

@keyframes flash-bg {
  0% {
    background: #3c282a;
  }
  100% {
    background: transparent;
  }
}
