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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --novel-highlight-default: #ffffff;
    --novel-highlight-purple: #f6f3f8;
    --novel-highlight-red: #fdebeb;
    --novel-highlight-yellow: #fbf4a2;
    --novel-highlight-blue: #c1ecf9;
    --novel-highlight-green: #acf79f;
    --novel-highlight-orange: #faebdd;
    --novel-highlight-pink: #faf1f5;
    --novel-highlight-gray: #f1f1ef;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;

    --novel-highlight-default: #000000;
    --novel-highlight-purple: #3f2c4b;
    --novel-highlight-red: #5c1a1a;
    --novel-highlight-yellow: #5c4b1a;
    --novel-highlight-blue: #1a3d5c;
    --novel-highlight-green: #1a5c20;
    --novel-highlight-orange: #5c3a1a;
    --novel-highlight-pink: #5c1a3a;
    --novel-highlight-gray: #3a3a3a;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

pre {
  background: #0d0d0d;
  border-radius: 0.5rem;
  color: #fff;
  font-family: "JetBrainsMono", monospace;
  padding: 0.75rem 1rem;

  code {
    background: none;
    color: inherit;
    font-size: 0.8rem;
    padding: 0;
  }

  .hljs-comment,
  .hljs-quote {
    color: #616161;
  }

  .hljs-variable,
  .hljs-template-variable,
  .hljs-attribute,
  .hljs-tag,
  .hljs-name,
  .hljs-regexp,
  .hljs-link,
  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class {
    color: #f98181;
  }

  .hljs-number,
  .hljs-meta,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-literal,
  .hljs-type,
  .hljs-params {
    color: #fbbc88;
  }

  .hljs-string,
  .hljs-symbol,
  .hljs-bullet {
    color: #b9f18d;
  }

  .hljs-title,
  .hljs-section {
    color: #faf594;
  }

  .hljs-keyword,
  .hljs-selector-tag {
    color: #70cff8;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: 700;
  }
}

.temp-highlight {
  background-color: yellow;
  transition: background-color 0.5s ease;
}


.highlight {
  background-color: #adf4ff;
}

table {
  border-collapse: collapse;
  text-align: left;
  border: 1px solid #ddd;
  width: max-content;
}

th,
td {
  padding: 5px;
  border: 1px solid #ddd;
}


.sk-chase {
  width: 40px;
  height: 40px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #1a3d5c;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}

.sk-chase-dot:nth-child(1) {
  animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2) {
  animation-delay: -1.0s;
}

.sk-chase-dot:nth-child(3) {
  animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4) {
  animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5) {
  animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6) {
  animation-delay: -0.6s;
}

.sk-chase-dot:nth-child(1):before {
  animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2):before {
  animation-delay: -1.0s;
}

.sk-chase-dot:nth-child(3):before {
  animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4):before {
  animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5):before {
  animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6):before {
  animation-delay: -0.6s;
}

@keyframes sk-chase {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sk-chase-dot {

  80%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4);
  }

  100%,
  0% {
    transform: scale(1.0);
  }
}


/* 适用于所有浏览器 */
.custom-scrollbar {
  overflow: auto;
}

/* Chrome, Edge, and Safari */
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
  /* 滚动条宽度 */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* 滚动条轨道背景 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888;
  /* 滚动条滑块颜色 */
  border-radius: 10px;
  /* 滑块圆角 */
  border: 3px solid #f1f1f1;
  /* 滑块边框 */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* 滑块在悬停时的颜色 */
}

/* Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  /* 设置滚动条宽度 */
  scrollbar-color: #888 #f1f1f1;
  /* 滚动条颜色和轨道颜色 */
}

/* Internet Explorer 10+ */
.custom-scrollbar {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* 自动隐藏滚动条 */
}


.pHover {
  cursor: pointer;
  background-color: #e2b8ff5c;
}

.share-code-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 2.15rem;
  bottom: 2.5rem;
  left: 11%;
  right: 11%;
  padding: 1.25rem 2.25rem;
  box-shadow: 50px 50px 100px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #dedede;
}

.share-code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

@media (max-width: 768px) {
  .share-code-container {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
  }

  .share-code {
    width: 80%;
  }

  .desktop-boxShadow {
    box-shadow: none;
  }
}


.ReactMarkdown ol,
.ReactMarkdown ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}


.ReactMarkdown ol p,
.ReactMarkdown ul p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

.ReactMarkdown h1,
.ReactMarkdown h2,
.ReactMarkdown h3,
.ReactMarkdown h4,
.ReactMarkdown h5,
.ReactMarkdown h6 {
  font-size: revert;
  font-weight: revert;
}

.editorContent h1 {
  font-size: 1.75em !important;
}

.editorContent h2 {
  font-size: 1.5em !important;
}

.editorContent h3 {
  font-size: 1.25em !important;
}

.focused-line {
  background-color: #8e47f00f;
}

.ProseMirror table {
  table-layout: auto;
  /* 表格自调整宽度 */
  width: 100%;
  /* 可以根据需要设置，确保表格占满或适合容器 */
  border-collapse: collapse;
  /* 使边框紧贴在一起 */
  position: relative;
  vertical-align: top;
}

.ProseMirror td,
.ProseMirror th {
  border: 1px solid #ddd;
  /* 为单元格边框设置样式 */
  padding: 8px;
  /* 为单元格设置内部边距以改善可读性 */
  word-wrap: break-word;
  /* 确保单词在行尾换行 */
  word-break: break-word;
  /* 在字母之间换行以防止文字溢出 */
  white-space: normal;
  /* 允许文本换行 */
  vertical-align: top;
  position: relative;
}


.ProseMirror th {
  background-color: #f2f2f2;
  /* 设置表头的背景色 */
  text-align: left;
  /* 左对齐文本 */
  position: relative;
  vertical-align: top;
}

.ProseMirror table p {
  margin: 5px 0;
}

.ProseMirror table img {
  margin: 5px 0;
}



.blueFrostedWave {
  background-image: url('../public/BlueFrostedWave.webp');
}

.cartoon {
  background-image: url('../public/Cartoon.webp');
}

.chrysanthemumAndLove {
  background-image: url('../public/ChrysanthemumAndLove.webp');
}

.cute {
  background-image: url('../public/Cute.webp');
}

.geometricBirds {
  background-image: url('../public/GeometricBirds.webp');
}

.inkPainting {
  background-image: url('../public/InkPainting.webp');
}

.salesMan {
  background-image: url('../public/SalesMan.webp');
}

.springGradientWave {
  background-image: url('../public/SpringGradientWave.webp');
}

.sunsetGradientWave {
  background-image: url('../public/SunsetGradientWave.webp');
}

[id^="mermaid-"] p {
  margin: 0 !important;
}