app/globals.css
@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;
  }

  .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%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

html,
body {
  height: 100%;
}
.hljs-warpper {
  position: relative;
  width: 100%;
  max-width: 692px;
  margin: 0.5em 0;
  font-size: 0.8em;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 4px;
  background-color: rgb(242, 246, 249);
}
.hljs-warpper .hljs {
  background-color: transparent;
}
.hljs-warpper .info {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 3em;
  padding: 0.5em 1em;
  background-color: rgb(226, 232, 240);
  font-size: 1em;
  text-align: right;
  line-height: 2em;
  color: rgba(100, 116, 139, 0.8);
  transition: opacity 0.15s linear;
}
.hljs-warpper .copy {
  cursor: pointer;
  color: rgba(100, 116, 139, 0.8);
}
.hljs-warpper .copy:hover {
  color: rgba(100, 116, 139, 1);
}
.katex-block-warpper,
.katex-inline-warpper {
  position: relative;
  width: 100%;
  max-width: 692px;
  overflow-x: auto;
  overflow-y: hidden;
}
.katex-block-warpper .copy,
.katex-inline-warpper .copy {
  position: absolute;
  top: 0;
  right: 1em;
  z-index: 10;
  opacity: 0;
  font-size: 0.8em;
  text-align: right;
  line-height: 2em;
  color: rgba(120, 120, 120, 0.6);
  transition: opacity 0.15s linear;
  cursor: pointer;
}
.katex-inline-warpper .copy {
  line-height: 3em;
}
.katex-block-warpper:hover .copy,
.katex-inline-warpper:hover .copy {
  opacity: 1;
}
.text-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hljs-warpper ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.hljs-warpper ::-webkit-scrollbar-thumb {
  background-color: rgb(226, 232, 240);
  border-radius: 4px;
}
.hljs-warpper ::-webkit-scrollbar-thumb:hover {
  background-color: rgb(203, 213, 225);
}
.hljs-warpper ::-webkit-scrollbar-track {
  background-color: transparent;
}
html.dark .hljs-warpper {
  background-color: rgb(15, 23, 42);
}
html.dark .hljs-warpper .info {
  background-color: rgb(31, 41, 55);
}
html.dark .hljs-warpper ::-webkit-scrollbar-thumb {
  background-color: rgb(31, 41, 55);
}
html.dark .hljs-warpper ::-webkit-scrollbar-thumb:hover {
  background-color: rgb(71, 85, 105);
}
.inline-image {
  max-height: 200px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.yarl__root .yarl__container {
  background-color: rgba(0, 0, 0, 0.8);
}
.audio-slider span[role='slider'] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  transition: all 150ms linear;
}
.audio-slider span[role='slider']:hover {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .hljs-warpper {
    max-width: calc(100vw - 76px);
  }
  .katex-block-warpper,
  .katex-inline-warpper {
    max-width: calc(100vw - 76px);
  }
}
