@theme {
  --text-message: 0.875rem;
  --text-message--line-height: 1.25rem;
  --text-message-h1: 2rem;
  --text-message-h1--line-height: calc(2.5 / 2);
  --text-message-h1--letter-spacing: -0.02em;
  --text-message-h1--font-weight: 700;
  --text-message-h2: 1.5rem;
  --text-message-h2--line-height: calc(2 / 1.5);
  --text-message-h2--letter-spacing: -0.01em;
  --text-message-h2--font-weight: 600;
  --text-message-h3: 1.25rem;
  --text-message-h3--line-height: calc(1.75 / 1.25);
  --text-message-h3--letter-spacing: -0.01em;
  --text-message-h3--font-weight: 600;
  --text-message-h4: 1.125rem;
  --text-message-h4--line-height: calc(1.575 / 1.125);
  --text-message-h4--letter-spacing: -0.01em;
  --text-message-h4--font-weight: 550;
  --text-message-h5: 1rem;
  --text-message-h5--line-height: calc(1.4 / 1);
  --text-message-h5--font-weight: 550;
  --text-message-h6: 0.875rem;
  --text-message-h6--line-height: calc(1.225 / 0.875);
  --text-message-h6--letter-spacing: 0.02em;
  --text-message-h6--font-weight: 550;
  --text-message-code: 0.75rem;
  --text-message-code--line-height: 1.25rem;
  --text-message-code--letter-spacing: -0.01em;
  --text-message-code--font-weight: 400;
  --text-message-table: 0.9em;
}

@layer components {
  /* Markdown Component Styles */
  .md {
    @apply text-message;
  }

  .md > *:first-child {
    @apply mt-0;
  }

  .md > *:last-child {
    @apply mb-0;
  }

  /* Paragraphs */
  .md-p {
    @apply mb-3 mt-0;
  }

  .md-p:last-child {
    @apply mb-0;
  }

  /* Headings */
  .md-h1 {
    @apply text-message-h1 mb-4 mt-8;
  }

  .md-h2 {
    @apply text-message-h2 mb-3 mt-6;
  }

  .md-h3 {
    @apply text-message-h3 mb-2.5 mt-5;
  }

  .md-h4 {
    @apply text-message-h4 mb-2 mt-4;
  }

  .md-h5 {
    @apply text-message-h5 mb-2 mt-3.5;
  }

  .md-h6 {
    @apply text-message-h6 mb-1.5 mt-3 uppercase;
  }

  .md-h1:first-child,
  .md-h2:first-child,
  .md-h3:first-child,
  .md-h4:first-child,
  .md-h5:first-child,
  .md-h6:first-child {
    @apply mt-0 pt-0;
  }

  /* Lists */
  .md-ul {
    @apply mb-4 mt-3 list-disc pl-6;
  }

  .md-ol {
    @apply mb-4 mt-3 list-decimal pl-6;
  }

  .md-ul:last-child,
  .md-ol:last-child {
    @apply mb-0;
  }

  .md-li {
    @apply mb-1.5 pl-1;
  }

  .md-li:last-child {
    @apply mb-0;
  }

  .md-li > p {
    @apply m-0;
  }

  .md-li > ul,
  .md-li > ol {
    @apply mb-2 mt-2;
  }

  /* Blockquotes */
  .md-blockquote {
    @apply bg-secondary-background text-secondary-foreground mb-4 mt-4 rounded-lg px-4 py-3 not-italic;
  }

  .md-blockquote:first-child {
    @apply mt-0;
  }

  .md-blockquote:last-child {
    @apply mb-0;
  }

  .md-blockquote > *:first-child {
    @apply mt-0;
  }

  .md-blockquote > *:last-child {
    @apply mb-0;
  }

  .md-blockquote .code-header {
    @apply !bg-transparent;
  }

  /* Horizontal rules */
  .md-hr {
    @apply my-8 border-t;
  }

  /* Links */
  .md-a {
    @apply text-accent-foreground hover:text-accent-hover-background cursor-pointer underline transition-colors duration-200;
  }

  /* Code */
  .md-code {
    @apply bg-tertiary-background text-message-code rounded-md px-1 py-0.5;
    font-family:
      ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  }

  /* Code blocks */
  .md-pre {
    @apply text-message-code mb-4 mt-4 overflow-x-auto rounded-lg;
  }

  .md-pre + .md-pre {
    @apply mt-3;
  }

  .md-pre code {
    @apply rounded-none bg-transparent p-0 text-[inherit];
  }

  /* Tables */
  .md-table {
    @apply text-message-table w-full border-separate border-spacing-0 overflow-hidden rounded-lg;
  }

  .md-th {
    @apply border-default-boundary bg-secondary-background font-strong border border-b-0 text-left align-middle;
    /* Match SCSS: $spacing-md $spacing-lg = 0.5em 0.75em */
    padding: 0.5em 0.75em;
    line-height: calc(1.25 / 0.875);
  }

  .md-td {
    @apply border-default-boundary border text-left align-middle;
    /* Match SCSS: $spacing-md $spacing-lg = 0.5em 0.75em */
    padding: 0.5em 0.75em;
    line-height: calc(1.25 / 0.875);
  }

  .md-th:not(:first-child),
  .md-td:not(:first-child) {
    @apply border-l-0;
  }

  .md-tr:not(:first-child) th,
  .md-tr:not(:first-child) td {
    @apply border-t-0;
  }

  /* Table rounded corners */
  .md-thead tr:first-child th:first-child {
    @apply rounded-tl-lg;
  }

  .md-thead tr:first-child th:last-child {
    @apply rounded-tr-lg;
  }

  .md-tbody tr:last-child td:first-child {
    @apply rounded-bl-lg;
  }

  .md-tbody tr:last-child td:last-child {
    @apply rounded-br-lg;
  }

  /* Tables without thead */
  .md-table:not(:has(thead)) tbody tr:first-child td:first-child {
    @apply rounded-tl-lg;
  }

  .md-table:not(:has(thead)) tbody tr:first-child td:last-child {
    @apply rounded-tr-lg;
  }

  /* Table wrapper */
  .md-table-wrapper {
    @apply my-4 overflow-x-auto rounded-lg;
  }

  /* Typography elements */
  .md-strong {
    @apply font-strong;
  }

  .md-em {
    @apply italic;
  }

  .md-del {
    @apply line-through opacity-70;
  }

  /* Images */
  .md-img {
    @apply my-4 block h-auto max-w-full rounded-xl;
  }

  /* Task lists */
  .md-checkbox {
    @apply mr-2;
  }

  /* Context-aware spacing - Default mode */
  .md-p + .md-p {
    @apply mt-3;
  }

  .md-p + .md-ul,
  .md-p + .md-ol {
    @apply mt-3;
  }

  .md-p + .md-blockquote {
    @apply mt-4;
  }

  .md-p + .md-pre {
    @apply mt-4;
  }

  .md-h1 + .md-p,
  .md-h2 + .md-p,
  .md-h3 + .md-p,
  .md-h4 + .md-p,
  .md-h5 + .md-p,
  .md-h6 + .md-p {
    @apply mt-0;
  }

  .md-h1 + .md-ul,
  .md-h2 + .md-ul,
  .md-h3 + .md-ul,
  .md-h4 + .md-ul,
  .md-h5 + .md-ul,
  .md-h6 + .md-ul,
  .md-h1 + .md-ol,
  .md-h2 + .md-ol,
  .md-h3 + .md-ol,
  .md-h4 + .md-ol,
  .md-h5 + .md-ol,
  .md-h6 + .md-ol {
    @apply mt-3;
  }

  .md-h1 + .md-blockquote,
  .md-h2 + .md-blockquote,
  .md-h3 + .md-blockquote,
  .md-h4 + .md-blockquote,
  .md-h5 + .md-blockquote,
  .md-h6 + .md-blockquote {
    @apply mt-3;
  }

  .md-h1 + .md-pre,
  .md-h2 + .md-pre,
  .md-h3 + .md-pre,
  .md-h4 + .md-pre,
  .md-h5 + .md-pre,
  .md-h6 + .md-pre {
    @apply mt-3;
  }

  .md-ul + .md-p,
  .md-ol + .md-p {
    @apply mt-3;
  }

  .md-blockquote + .md-p {
    @apply mt-4;
  }

  .md-pre + .md-p {
    @apply mt-4;
  }

  .md-p + .md-table-wrapper {
    @apply mt-4;
  }

  .md-table-wrapper + .md-p {
    @apply mt-4;
  }

  .md-h1 + .md-table-wrapper,
  .md-h2 + .md-table-wrapper,
  .md-h3 + .md-table-wrapper {
    @apply mt-3;
  }

  .md-p + .md-img {
    @apply mt-4;
  }

  .md-img + .md-p {
    @apply mt-4;
  }

  .md-h1 + .md-img,
  .md-h2 + .md-img,
  .md-h3 + .md-img {
    @apply mt-3;
  }

  /* Compact mode */
  .md-compact {
    @apply text-[13px];
  }

  .md-compact .md-h1 {
    @apply mt-[1.3rem] pt-[0.17rem] text-[1.3rem];
  }

  .md-compact .md-h2 {
    @apply mt-[1.06rem] pt-[0.17rem] text-[1.1rem];
  }

  .md-compact .md-h3 {
    @apply mt-[0.9rem] pt-[0.17rem] text-[0.94rem];
  }

  .md-compact .md-h4 {
    @apply mt-[0.81rem] text-[0.81rem];
  }

  .md-compact .md-h5 {
    @apply mt-[0.73rem] text-[0.77rem];
  }

  .md-compact .md-h6 {
    @apply mt-[0.65rem] text-[0.71rem];
  }

  .md-compact .md-blockquote {
    @apply py-[0.44rem];
  }

  /* Compact spacing */
  .md-compact .md-p + .md-p {
    @apply mt-[0.33rem];
  }

  .md-compact .md-p + .md-ul,
  .md-compact .md-p + .md-ol {
    @apply mt-[0.49rem];
  }

  .md-compact .md-ul + .md-p,
  .md-compact .md-ol + .md-p {
    @apply mt-[0.49rem];
  }

  /* KaTeX Math Styles */
  .md .katex {
    @apply text-current;
    font-size: 1.1em;
  }

  .md .katex-display {
    @apply my-4 overflow-x-auto overflow-y-hidden;
  }

  .md .katex-display > .katex {
    @apply text-center;
  }

  /* Inline math */
  .md .katex:not(.katex-display) {
    @apply align-middle;
  }

  /* Math in dark mode */
  .dark .md .katex,
  .md:where(.dark, .dark *) .katex {
    color: var(--color-default-foreground);
  }

  /* Compact mode math */
  .md-compact .katex {
    font-size: 1.05em;
  }

  .md-compact .katex-display {
    @apply my-3;
  }

  .response-container {
    @apply grid min-w-0 items-start gap-y-2;
    grid-template-rows: auto minmax(calc(var(--spacing) * 5), auto);
    grid-template-columns: auto 1fr 1fr;
    grid-template-areas: "avatar content content" ". action timestamp";
  }

  /* When there's no action and timestamp, use single row layout */
  .response-container:not(:has(.\[grid-area\:action\], .\[grid-area\:timestamp\])) {
    grid-template-rows: auto;
    grid-template-areas: "avatar content content";
  }
}
