@import "tailwindcss";

@custom-variant dark (&[data-theme="dark"]);
@custom-variant sepia (&[data-theme="sepia"]);

:root {
  --background: oklch(0.9902 0.0039 106.47);
  --foreground: oklch(0.14 0.0 285.86);
  --card: oklch(1.0 0 0);
  --card-foreground: oklch(0.14 0.0 285.86);
  --popover: oklch(1.0 0 0);
  --popover-foreground: oklch(0.14 0.0 285.86);
  --primary: oklch(0.21 0.01 285.93);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.21 0.01 285.93);
  --muted: oklch(0.963 0.0053 106.5);
  --muted-foreground: oklch(0.55 0.02 285.93);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.21 0.01 285.93);
  --destructive: oklch(0.58 0.24 28.48);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.92 0.0 286.61);
  --input: oklch(0.92 0.0 286.61);
  --ring: oklch(0.71 0.01 286.09);
  --sidebar: oklch(0.99 0 0);
  --sidebar-foreground: oklch(0.14 0.0 285.86);

  --radius: 0.625rem;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --shadow-2xs: 0 1px 3px 0px oklch(0.0 0 0 / 0.05);
  --shadow-xs: 0 1px 3px 0px oklch(0.0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0px oklch(0.0 0 0 / 0.1), 0 1px 2px -1px oklch(0.0 0 0 / 0.1);
  --shadow: 0 1px 3px 0px oklch(0.0 0 0 / 0.1), 0 1px 2px -1px oklch(0.0 0 0 / 0.1);
  --shadow-md: 0 1px 3px 0px oklch(0.0 0 0 / 0.1), 0 2px 4px -1px oklch(0.0 0 0 / 0.1);
  --shadow-lg: 0 1px 3px 0px oklch(0.0 0 0 / 0.1), 0 4px 6px -1px oklch(0.0 0 0 / 0.1);
  --shadow-xl: 0 1px 3px 0px oklch(0.0 0 0 / 0.1), 0 8px 10px -1px oklch(0.0 0 0 / 0.1);
  --shadow-2xl: 0 1px 3px 0px oklch(0.0 0 0 / 0.25);

  --color-highlight-yellow: #fef08a;
  --color-highlight-green: #bbf7d0;
  --color-highlight-blue: #bfdbfe;
  --color-highlight-pink: #fbcfe8;
  --color-highlight-purple: #e9d5ff;
}

/* ── Dark theme ─────────────────────────────────────────── */
[data-theme="dark"] {
  --background: #121212;
  --foreground: #f5f5f5;
  --card: #1e1e1e;
  --card-foreground: #f5f5f5;
  --popover: #1e1e1e;
  --popover-foreground: #f5f5f5;
  --primary: #ffffff;
  --primary-foreground: #121212;
  --secondary: #2a2a2a;
  --secondary-foreground: #ffffff;
  --muted: #2a2a2a;
  --muted-foreground: #a0a0a0;
  --accent: #2a2a2a;
  --accent-foreground: #ffffff;
  --destructive: #e53935;
  --destructive-foreground: #ffffff;
  --border: #333333;
  --input: #333333;
  --ring: #6366f1;
  --sidebar: #1a1a1a;
  --sidebar-foreground: #f5f5f5;
}

/* ── Sepia theme ─────────────────────────────────────────── */
[data-theme="sepia"] {
  --background: #f0e6d2;
  --foreground: #3d2b1f;
  --card: #f5ebd7;
  --card-foreground: #3d2b1f;
  --popover: #f5ebd7;
  --popover-foreground: #3d2b1f;
  --primary: #6b4c2a;
  --primary-foreground: #f5ebd7;
  --secondary: #e6d9c3;
  --secondary-foreground: #4a3728;
  --muted: #e6d9c3;
  --muted-foreground: #7a6652;
  --accent: #e6d9c3;
  --accent-foreground: #4a3728;
  --destructive: #e53935;
  --destructive-foreground: #fafafa;
  --border: #d4c4a8;
  --input: #d4c4a8;
  --ring: #6b4c2a;
  --sidebar: #f5ebd7;
  --sidebar-foreground: #3d2b1f;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);

  --font-sans: var(--font-sans);
  --font-serif: var(--font-serif);
  --font-mono: var(--font-mono);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

/* ── Chat markdown prose styles ─────────────────────────────── */
.chat-markdown {
  color: var(--foreground);
  line-height: 1.7;
  word-break: break-word;
}

.chat-markdown p {
  margin: 0.5em 0;
}
.chat-markdown p:first-child {
  margin-top: 0;
}
.chat-markdown p:last-child {
  margin-bottom: 0;
}

.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4 {
  font-weight: 600;
  margin: 1em 0 0.4em;
  line-height: 1.3;
}
.chat-markdown h1 {
  font-size: 1.25em;
}
.chat-markdown h2 {
  font-size: 1.15em;
}
.chat-markdown h3 {
  font-size: 1.05em;
}

.chat-markdown ul,
.chat-markdown ol {
  padding-left: 1.5em;
  margin: 0.4em 0;
}
.chat-markdown li {
  margin: 0.15em 0;
}
.chat-markdown li > p {
  margin: 0.2em 0;
}

.chat-markdown blockquote {
  border-left: 3px solid var(--border);
  padding-left: 0.8em;
  margin: 0.6em 0;
  color: var(--muted-foreground);
  font-style: italic;
}

.chat-markdown hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1em 0;
}

.chat-markdown strong {
  font-weight: 600;
}

.chat-markdown img {
  max-width: 100%;
  border-radius: 0.5rem;
}

/* Code blocks */
.chat-markdown pre {
  margin: 0.6em 0;
  padding: 0.8em 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.5;
  background: var(--muted);
  border: 1px solid var(--border);
}
.chat-markdown pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Task list checkboxes */
.chat-markdown input[type="checkbox"] {
  margin-right: 0.4em;
  vertical-align: middle;
}
.chat-markdown li.task-list-item {
  list-style: none;
  margin-left: -1.2em;
}

/* ── highlight.js theme (GitHub-inspired, light) ─────────── */
.hljs {
  color: #24292e;
}
.hljs-comment,
.hljs-quote {
  color: #6a737d;
  font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #d73a49;
}
.hljs-string,
.hljs-attr,
.hljs-template-tag,
.hljs-template-variable {
  color: #032f62;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-symbol,
.hljs-bullet {
  color: #005cc5;
}
.hljs-title,
.hljs-section {
  color: #6f42c1;
  font-weight: 600;
}
.hljs-built_in,
.hljs-name {
  color: #e36209;
}
.hljs-meta {
  color: #735c0f;
}
.hljs-deletion {
  color: #b31d28;
  background-color: #ffeef0;
}
.hljs-addition {
  color: #22863a;
  background-color: #f0fff4;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 700;
}

/* ── highlight.js theme for dark mode ─────────── */
[data-theme="dark"] .hljs {
  color: #c9d1d9;
}
[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote {
  color: #8b949e;
}
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-type {
  color: #ff7b72;
}
[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-template-tag,
[data-theme="dark"] .hljs-template-variable {
  color: #a5d6ff;
}
[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-symbol,
[data-theme="dark"] .hljs-bullet {
  color: #79c0ff;
}
[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-section {
  color: #d2a8ff;
}
[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-name {
  color: #ffa657;
}
[data-theme="dark"] .hljs-meta {
  color: #d29922;
}
[data-theme="dark"] .hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c;
}
[data-theme="dark"] .hljs-addition {
  color: #aff5b4;
  background-color: #033a16;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.4);
  border-radius: 10px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.6);
}

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

@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    @apply border-border outline-ring/50;
  }

  html {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    -webkit-tap-highlight-color: transparent;
    font-variation-settings: normal;
  }

  body {
    font-family: var(--font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    user-select: none;
    @apply bg-background text-foreground;
  }

  #root {
    height: 100vh;
    width: 100vw;
  }
}

@layer components {
  .shadow-around {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.01), 0 0 1px 0 rgba(0, 0, 0, 0.02), 1px 1px 2px 0
      rgba(0, 0, 0, 0.03);
  }

  /* Book spine — Readest-inspired realistic binding effect */
  .book-spine {
    pointer-events: none;
    background-image: linear-gradient(
        180deg,
        hsla(0, 0%, 95%, 0.2) 0%,
        hsla(0, 0%, 90%, 0.1) 1%,
        transparent 2%,
        transparent 50%,
        hsla(0, 0%, 25%, 0.15) 95%,
        hsla(0, 0%, 15%, 0.2) 100%
      ),
      linear-gradient(
        90deg,
        hsla(0, 0%, 0%, 0.1) 0%,
        hsla(0, 0%, 20%, 0.2) 0.5%,
        hsla(0, 0%, 95%, 0.4) 0.8%,
        hsla(0, 0%, 85%, 0.4) 2%,
        hsla(0, 0%, 60%, 0.3) 2.8%,
        hsla(0, 0%, 40%, 0.2) 4.2%,
        hsla(0, 0%, 70%, 0.15) 4.6%,
        hsla(0, 0%, 60%, 0.15) 5.4%,
        hsla(0, 0%, 40%, 0.1) 6%,
        transparent 88%,
        hsla(0, 0%, 30%, 0.1) 99%,
        hsla(0, 0%, 30%, 0.2) 99.5%,
        hsla(0, 0%, 10%, 0.2) 100%
      );
    mask: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0.5) 100%);
  }

  /* Book cover shadow — gives depth to the cover image */
  .book-cover-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08), 0 0 0 0.5px
      rgba(0, 0, 0, 0.04);
  }

  .book-cover-shadow:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 0.5px
      rgba(0, 0, 0, 0.06);
  }

  /* Invert empty state illustrations in dark mode */
  [data-theme="dark"] img[src="/book.svg"],
  [data-theme="dark"] img[src="/think.svg"],
  [data-theme="dark"] img[src="/note.svg"],
  [data-theme="dark"] img[src^="/illustrations/"] {
    filter: invert(1);
  }
}

/* ── Driver.js tour popover styles ─────────────────────────────── */
div.driver-popover {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  color: #1e293b !important;
  font-family: var(--font-sans) !important;
  z-index: 100002 !important;
  padding: 16px !important;
}

[data-theme="dark"] div.driver-popover {
  background-color: #1e1e1e !important;
  border-color: #333333 !important;
  color: #e8e8ed !important;
}

[data-theme="sepia"] div.driver-popover {
  background-color: #f5ebd7 !important;
  border-color: #d4c4a8 !important;
  color: #3d2b1f !important;
}

div.driver-overlay {
  z-index: 100001 !important;
}

.driver-popover .driver-popover-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: inherit !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

.driver-popover .driver-popover-description {
  font-size: 0.875rem !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}

[data-theme="dark"] .driver-popover .driver-popover-description {
  color: #94a3b8 !important;
}

[data-theme="sepia"] .driver-popover .driver-popover-description {
  color: #7a6652 !important;
}

.driver-popover .driver-popover-progress-text {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  margin-top: 12px !important;
}

.driver-popover .driver-popover-navigation-btns {
  gap: 8px !important;
  margin-top: 16px !important;
}

.driver-popover .driver-popover-prev-btn,
.driver-popover .driver-popover-next-btn {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
}

[data-theme="dark"] .driver-popover .driver-popover-prev-btn,
[data-theme="dark"] .driver-popover .driver-popover-next-btn {
  background-color: #e0e0e6 !important;
  color: #1c1c1e !important;
}

[data-theme="sepia"] .driver-popover .driver-popover-prev-btn,
[data-theme="sepia"] .driver-popover .driver-popover-next-btn {
  background-color: #6b4c2a !important;
  color: #f5ebd7 !important;
}

.driver-popover .driver-popover-prev-btn:hover,
.driver-popover .driver-popover-next-btn:hover {
  opacity: 0.85 !important;
}

.driver-popover .driver-popover-close-btn {
  color: #94a3b8 !important;
  font-size: 18px !important;
  padding: 4px !important;
}

.driver-popover .driver-popover-close-btn:hover {
  color: #64748b !important;
}

/* pdfjs-dist official TextLayer styles (extracted from pdf_viewer.css) */
.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 0;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer {
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}

.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.textLayer .markedContent {
  display: contents;
}

.textLayer span[role="img"] {
  user-select: none;
  cursor: default;
}

.textLayer ::selection {
  background: rgba(0, 100, 255, 0.3);
}

.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  cursor: default;
  user-select: none;
}

.textLayer.selecting .endOfContent {
  top: 0;
}
