NoteAI/src/app/globals.css

@import 'highlight.js/styles/atom-one-dark.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 38 20% 95%;
    /* Softer warm gray background */
    --foreground: 225 11% 22%;
    --card: 40 17% 98%;
    --card-foreground: 225 11% 22%;
    --popover: 40 17% 98%;
    --popover-foreground: 225 11% 22%;
    --primary: 223 21% 20%;
    --primary-foreground: 0 0% 98%;
    --secondary: 36 18% 92%;
    --secondary-foreground: 223 18% 24%;
    --muted: 36 16% 93%;
    --muted-foreground: 223 9% 42%;
    --accent: 34 20% 91%;
    --accent-foreground: 223 18% 24%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 35 15% 85%;
    --input: 35 15% 85%;
    --ring: 223 21% 30%;
    --radius: 0.75rem;
  }

  .dark {
    /* Softer dark mode: less pure black, gentler contrast */
    --background: 220 10% 13%;
    --foreground: 210 16% 90%;

    --card: 220 10% 15%;
    --card-foreground: 210 16% 90%;

    --popover: 220 10% 16%;
    --popover-foreground: 210 16% 90%;

    --primary: 210 16% 90%;
    --primary-foreground: 220 12% 14%;

    --secondary: 220 10% 18%;
    --secondary-foreground: 210 16% 90%;

    --muted: 220 10% 20%;
    --muted-foreground: 210 10% 72%;

    --accent: 220 10% 22%;
    --accent-foreground: 210 16% 92%;

    --destructive: 0 62.8% 35%;
    --destructive-foreground: 0 0% 96%;

    --border: 220 8% 28%;
    --input: 220 8% 28%;
    --ring: 210 16% 78%;
  }

  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Editor Specific Styles for Notion-like feel */
.ProseMirror {
  outline: none;
  min-height: 300px;
  padding-bottom: 50px;
  font-size: 1.05rem;
  line-height: var(--editor-line-height, 1.5);
  /* Use CSS variable with fallback */
  /* Reduced from 1.75 */
}

.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  height: 0;
}

.ProseMirror blockquote {
  border-left: 3px solid hsl(var(--primary));
  /* Make border color slightly more visible (primary) */
  padding-left: 1rem;
  color: hsl(var(--muted-foreground));
  font-family: "Georgia", "Cambria", "Times New Roman", serif !important;
  /* Force serif font */
  font-style: italic;
  margin: 1rem 0;
  background: hsl(var(--muted) / 0.3);
  /* Subtle background */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
  /* Rounded right corners */
  /* Rounded right corners */
}

.ProseMirror code {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--foreground));
  border-radius: 0.25rem;
  padding: 0.2rem 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85em;
  font-weight: 500;
}

.dark .ProseMirror code {
  background-color: hsl(var(--primary) / 0.2);
  color: hsl(var(--foreground));
}

.ProseMirror code::before,
.ProseMirror code::after {
  content: none !important;
}

/* ... existing heading styles ... */

/* Table Styles - Ensure content is compact */
.ProseMirror table p {
  margin: 0;
  /* Remove paragraph margin inside tables */
  line-height: var(--table-line-height, 1.2);
  /* Use CSS variable with fallback */
  /* Tighter line height for table content */
}

.ProseMirror table {
  border-collapse: collapse;
  margin: 1em 0;
  /* Add some vertical space around the table itself */
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}

.ProseMirror td,
.ProseMirror th {
  border-width: 1px;
  border-style: solid;
  border-color: hsl(var(--border));
  box-sizing: border-box;
  min-width: 1em;
  padding: 2px 4px;
  /* Further reduced padding */
  position: relative;
  vertical-align: top;
}

.ProseMirror th {
  background-color: hsl(var(--muted));
  font-weight: bold;
  text-align: left;
  /* Make header borders visible by using a contrasting color if bg matches border */
  border-color: hsl(var(--foreground) / 0.1);
}

/* AI Content Style */
.ai-content {
  font-family: "KaiTi", "STKaiti", "楷体", "Georgia", serif;
  font-style: italic;
  font-weight: normal;
  color: hsl(var(--foreground));
  /* Ensure text color is standard */
}

/* Specific fix for dark mode if needed, but opacity trick usually works */
.dark .ProseMirror th {
  border-color: hsl(var(--background));
  /* Use background color for borders in dark mode header to show separation */
}

/* Task List Styles */
ul[data-type="taskList"],
.ProseMirror ul[data-type="taskList"] {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ProseMirror li[data-type="taskItem"] div,
.ProseMirror li[data-type="taskItem"] label {
  line-height: normal !important;
  /* Force tight line height for checkbox items */
  margin-top: 2px;
  margin-bottom: 2px;
}

/* We are now using a Custom NodeView for li[data-type="taskItem"], so no global overriding needed.
   The component handles its own layout. */

/* Override Highlight.js background for a softer look */
.ProseMirror pre {
  background: #2b313a !important;
  /* Slightly lifted code block background for comfortable reading */
  border-radius: 0.5rem;
}

.hljs {
  background: transparent !important;
  /* Let pre handle the background */
}