:root {
  --primary-bg-color: #fff;
  --nav: #fff;
  --tab: #fafafa;
  --b1: rgb(229 231 235 / 0.8);
  --md-text: rgba(45, 45, 40);
  --tree-bg: #fafafa;
  --md-code-bg: #2a2929;
  --md-bg-mute: rgba(23, 23, 23, 0.07);
  --md-high: rgba(141, 141, 141, 0.5);
  --md-border: #b9b9b9;
  --card-bg: #fff;
  --panel-bg: rgba(255, 255, 255, 0.95);
  --chat-bg: white;
  --side-panel-bg-color: oklch(98.5% 0.002 247.839);
  --chat-user-message-bg-color: #eaeef5;
}
.dark {
  --primary-bg-color: #1a1b1b;
  --side-panel-bg-color: #232425;
  --chat-user-message-bg-color: #333537;
  --nav: #1e1e1f;
  --tab: #1e1e1f;
  --b1: rgb(229 231 235 / 0.1);
  --md-text: rgba(255, 255, 255, 0.93);
  --tree-bg: #181818;
  --card-bg: #1f1f1f;
  --md-code-bg: #1c1c1c;
  --md-bg-mute: rgba(255, 255, 255, 0.05);
  --md-high: rgba(255, 255, 255, 0.2);
  --md-border: #3f3f46;
  --panel-bg: rgba(35, 35, 35, 0.95);
  --chat-bg: oklch(20.5% 0 0);
}

.ink-modal {
  @apply bg-white dark:bg-neutral-900 shadow-sm shadow-gray-300 dark:shadow-black/30 rounded-lg;
}
.primary-bg-color {
  background-color: var(--primary-bg-color);
}
.bg-sidebar {
  background-color: var(--side-panel-bg-color);
}
html,
body {
  color: var(--md-text);
}
html.dark {
  color-scheme: dark;
}

.dark {
  .ant-popover-inner {
    background-color: var(--card-bg) !important;
  }
  .ant-modal-content {
    background-color: var(--tree-bg) !important;
  }
  .ant-modal-header {
    background-color: transparent !important;
  }
}
.code-bg {
  background: var(--md-code-bg);
}
.def-bg {
  background: var(--bg);
}
.card-bg {
  background: var(--card-bg);
}
.tree-bg {
  background: var(--tree-bg);
}
.nav {
  background: var(--nav);
}
.b1 {
  border-color: var(--b1);
}
.b2 {
  @apply border-gray-200 dark:border-gray-200/10;
}

.md-text {
  color: var(--md-text);
}
html {
  background: var(--bg);
}

.input {
  @apply outline-none dark:text-gray-300 text-gray-600 text-sm dark:bg-zinc-900 bg-white
  h-7 rounded-lg pr-2 border dark:border-zinc-700 border-gray-500/50 dark:focus:border-zinc-500 focus:border-gray-500/80 duration-200;
}

.high-block {
  animation: high 0.3s 0.1s forwards;
  @apply rounded-sm;
}

@keyframes high {
  from {
    background: rgba(59, 131, 246, 0);
  }
  to {
    background: rgba(59, 131, 246, 0.5);
  }
}
.panel-bg {
  background-color: var(--panel-bg) !important;
  @apply backdrop-blur;
}
.modal-panel {
  background: var(--bg);
  @apply dark:border dark:border-white/10 rounded-xl shadow-lg shadow-gray-400/80 dark:shadow-gray-600/5;
}

.dialog-content {
  @apply rounded-lg;
  background-color: var(--card-bg);
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12);
}
.dark {
  .dialog-content {
    box-shadow:
      0 6px 16px 0 rgba(0, 0, 0, 0.08),
      0 3px 6px -4px rgba(0, 0, 0, 0.12),
      0 9px 28px 8px rgba(0, 0, 0, 0.05);
  }
}

.tools-panel {
  @apply rounded-lg dark:bg-[rgba(35,35,35,.95)] dark:text-gray-200 overflow-y-auto bg-white/95 text-gray-600 select-none
  backdrop-blur-lg shadow-lg shadow-gray-200/70 dark:shadow-gray-600/10 border dark:border-gray-200/10 border-gray-200;
  max-height: calc(100vh - 100px);
}
.context-menu {
  background-color: var(--panel-bg);
  @apply absolute p-1 rounded-lg backdrop-blur
   border border-gray-200 dark:border-gray-200/20 text-[13px];
}

.modal-border {
  @apply dark:border-gray-200/20 border-transparent;
}

.float-bar-icon {
  @apply dark:hover:text-gray-200 dark:hover:bg-gray-200/10 hover:bg-gray-200/50 hover:text-gray-600 cursor-pointer;
}

.float-color-icon {
  @apply w-5 h-5 rounded-full hover:opacity-80 cursor-pointer;
}
/* .ant-btn-primary {
  &:not([disabled], .ant-btn-dangerous) {
    background-color: #3b82f6 !important;
    &:hover {
      background-color: #2563eb !important;
    }
  }
} */
.ant-btn-sm {
  height: 28px !important;
}
.ant-input-sm {
  padding: 2px 7px !important;
}
.ctx-panel {
  border-radius: 5px;
  background-color: white;
  box-shadow:
    rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
    rgba(15, 15, 15, 0.1) 0px 3px 6px;
}

.dark .ctx-panel {
  background-color: rgb(40, 40, 40);
  box-shadow:
    rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
    rgba(15, 15, 15, 0.2) 0px 3px 6px;
}

.space-cyan {
  @apply bg-gradient-to-br from-cyan-600 to-blue-600;
}

.space-sky {
  @apply bg-gradient-to-br from-sky-500 to-indigo-500;
}

.space-violet {
  @apply bg-gradient-to-br from-violet-500 to-fuchsia-500;
}

.space-purple {
  @apply bg-gradient-to-br from-purple-600 to-pink-600;
}

.space-green {
  @apply bg-gradient-to-br from-green-500 to-teal-500;
}

.space-amber {
  @apply bg-gradient-to-br from-amber-500 to-yellow-500;
}

.space-pink {
  @apply bg-gradient-to-br from-pink-500 to-rose-500;
}

.space-slate {
  @apply bg-gradient-to-br from-slate-500 to-stone-500;
}

.action-btn {
  @apply hover:dark:bg-white/5 duration-150 hover:bg-gray-200/50 cursor-pointer;
}
