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

:root {
  font-size: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --app-header-bg-rgb: 255, 255, 255;
  --app-content-bg-rgb: 255, 255, 255;
  --app-sidebar-bg-rgb: 249, 250, 251;
  --app-tabbar-bg-rgb: 229, 231, 235;
  --app-toc-bg-rgb: 249, 250, 251;
  --app-tab-active-bg-rgb: 255, 255, 255;
  --app-tab-inactive-bg-rgb: 249, 250, 251;
  --app-editor-text-color: #111827;
  --app-scrollbar-thumb: #cbd5e1;
  --app-scrollbar-thumb-hover: #94a3b8;
  --titlebar-height: 36px;
  /* Add titlebar height */
}

.dark {
  --app-header-bg-rgb: 23, 23, 23;
  --app-content-bg-rgb: 23, 23, 23;
  --app-sidebar-bg-rgb: 38, 38, 38;
  --app-tabbar-bg-rgb: 30, 30, 30;
  --app-toc-bg-rgb: 38, 38, 38;
  --app-tab-active-bg-rgb: 23, 23, 23;
  --app-tab-inactive-bg-rgb: 38, 38, 38;
  --app-editor-text-color: #e5e5e5;
  --app-scrollbar-thumb: #525252;
  --app-scrollbar-thumb-hover: #737373;
}

/* Electron Titlebar Drag Region */
.titlebar-drag-region {
  -webkit-app-region: drag;
  height: var(--titlebar-height);
  width: 100%;
  /* No absolute positioning to allow flex layout */
  z-index: 50;
  /* Ensure clicks pass through to elements below unless explicitly handled */
  pointer-events: none;
}

/* Allow clicking on elements inside the drag region or below it if needed */
.titlebar-no-drag {
  -webkit-app-region: no-drag;
  pointer-events: auto;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: inherit;
}

/* Custom scrollbar for Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-scrollbar-thumb-hover);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.milkdown-editor-wrapper {
  font-family: inherit;
}

.milkdown {
  height: 100%;
}

.milkdown .milkdown-editor {
  min-height: 100%;
  padding: 16px;
}

.milkdown .ProseMirror {
  min-height: 100%;
  outline: none;
  color: var(--app-editor-text-color);
}

@layer components {
  .milkdown-editor-wrapper .ProseMirror {
    @apply prose prose-neutral max-w-none;
  }

  .dark .milkdown-editor-wrapper .ProseMirror {
    @apply prose-invert;
  }

  .milkdown-editor-wrapper .ProseMirror img {
    @apply max-w-full h-auto rounded-lg shadow-md my-4;
  }

  .milkdown-editor-wrapper .ProseMirror pre {
    @apply rounded-lg;
  }

  .milkdown-editor-wrapper .ProseMirror div[data-type="math_block"] {
    @apply my-8;
  }
}