.agents-ui {
  --ui-bg: oklch(0.99 0 0);
  --ui-surface: oklch(1 0 0);
  --ui-panel: oklch(0.985 0 0);
  --ui-panel-2: oklch(0.967 0 0);
  --ui-border: oklch(0.922 0 0);
  --ui-border-subtle: oklch(0.945 0 0);
  --ui-text: oklch(0.148 0 0);
  --ui-text-muted: oklch(0.45 0 0);
  --ui-text-dim: oklch(0.56 0 0);
  --ui-accent: oklch(0.52 0.12 250);
  --ui-accent-2: oklch(0.56 0 0);
  --ui-accent-bubble: oklch(0.962 0 0);
  --ui-code-bubble: oklch(0.962 0 0);
  --ui-sidebar: oklch(0.987 0 0);
  --ui-sidebar-hover: oklch(0.963 0 0);
  --ui-success: oklch(0.62 0.17 145);
  --ui-danger: oklch(0.577 0.245 27.325);
}

.dark .agents-ui,
.dark.agents-ui {
  --ui-bg: oklch(0.148 0 0);
  --ui-surface: oklch(0.218 0 0);
  --ui-panel: oklch(0.218 0 0);
  --ui-panel-2: oklch(0.274 0 0);
  --ui-border: oklch(1 0 0 / 10%);
  --ui-border-subtle: oklch(1 0 0 / 6%);
  --ui-text: oklch(0.985 0 0);
  --ui-text-muted: oklch(0.708 0 0);
  --ui-text-dim: oklch(0.556 0 0);
  --ui-accent: oklch(0.72 0.13 250);
  --ui-accent-2: oklch(0.708 0 0);
  --ui-accent-bubble: oklch(0.274 0 0);
  --ui-code-bubble: oklch(0.248 0 0);
  --ui-sidebar: oklch(0.218 0 0);
  --ui-sidebar-hover: oklch(0.275 0 0);
  --ui-success: oklch(0.62 0.17 145);
  --ui-danger: oklch(0.704 0.191 22.216);
}

.agents-ui {
  color: var(--ui-text);
  background: var(--ui-bg);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.agents-ui * {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.85 0 0) transparent;
}

.dark .agents-ui * {
  scrollbar-color: oklch(0.4 0 0) transparent;
}

.agents-ui .shimmer-text {
  background: linear-gradient(90deg, var(--ui-text-dim) 40%, var(--ui-accent) 50%, var(--ui-text-dim) 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: agents-shimmer 4s linear infinite;
}

@keyframes agents-shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}
