:root {
  --aicr__syntax-text: #2e3440;
  --aicr__syntax-selection-bg: #d8dee9;
  --aicr__syntax-comment: #6b7280;
  --aicr__syntax-punctuation: #4b5563;
  --aicr__syntax-number: #d97706;
  --aicr__syntax-keyword: #8b5cf6;
  --aicr__syntax-tag: #dc2626;
  --aicr__syntax-string: #059669;
  --aicr__syntax-function: #2563eb;
  --aicr__syntax-cyan: #0891b2;
  --aicr__syntax-error: #ef4444;
  --aicr__syntax-whitespace: hsla(220, 14%, 30%, 0.15);
}

.aicr__streaming-message {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  > table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    overflow-x: auto;
    border-radius: 0.5rem;

    thead {
      background-color: #f8f9fa;
      border-bottom: 2px solid #dee2e6;

      th {
        padding: 0.75rem;
        text-align: left;
        font-weight: 600;
        color: #212529;
        border-bottom: 2px solid #dee2e6;
      }
    }

    tbody {
      tr {
        border-bottom: 1px solid #e9ecef;

        &:hover {
          background-color: #f8f9fa;
        }

        &:last-child {
          border-bottom: none;
        }
      }

      td {
        padding: 0.75rem;
        color: #495057;
      }
    }
  }

  .aicr__syntax-highlighter-code {
    // hide last line number if it's not followed by any other elements
    .linenumber:last-child {
      display: none !important;
    }
  }

  .aicr__syntax-highlighter-pre {
    overflow-x: auto;
    background-color: var(--aicr__bg-primary);
    border-radius: 0.5rem;
    padding: .5rem;
    margin: 0;

    code[class*='language-'] {
      // background: #272b33;
      color: var(--aicr__syntax-text);
      // text-shadow: 0 1px rgba(0, 0, 0, 0.3);
      font-family:
        'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
      direction: ltr;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      line-height: 1.5;
      -moz-tab-size: 2;
      -o-tab-size: 2;
      tab-size: 2;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
    }

    code[class*='language-'] {
      &::selection,
      &::-moz-selection {
        background: var(--aicr__syntax-selection-bg);
        color: inherit;
        text-shadow: none;
      }
    }

    .token {
      &.cdata,
      &.comment {
        color: var(--aicr__syntax-comment);
      }

      &.comment {
        font-style: italic;
      }

      &.prolog {
        color: var(--aicr__syntax-comment);
      }

      &.doctype,
      &.entity,
      &.punctuation {
        color: var(--aicr__syntax-punctuation);
      }

      &.entity {
        cursor: help;
      }

      &.atrule,
      &.attr-name,
      &.boolean,
      &.class-name,
      &.constant,
      &.number {
        color: var(--aicr__syntax-number);
      }

      &.keyword {
        color: var(--aicr__syntax-keyword);
      }

      &.deleted,
      &.important,
      &.property,
      &.symbol,
      &.tag {
        color: var(--aicr__syntax-tag);
      }

      &.attr-value,
      &.builtin,
      &.char,
      &.inserted,
      &.regex,
      &.selector,
      &.string {
        color: var(--aicr__syntax-string);
      }

      &.attr-value > .token.punctuation {
        color: var(--aicr__syntax-string);
      }

      &.function,
      &.operator,
      &.variable {
        color: var(--aicr__syntax-function);
      }

      &.url {
        color: var(--aicr__syntax-cyan);
      }

      &.attr-value > .token.punctuation.attr-equals {
        color: var(--aicr__syntax-punctuation);
      }

      &.special-attr > .token.attr-value > .token.value.css {
        color: var(--aicr__syntax-punctuation);
      }

      &.bold {
        font-weight: 700;
      }

      &.italic {
        font-style: italic;
      }

      &.namespace {
        opacity: 0.8;
      }

      &.cr:before,
      &.lf:before,
      &.space:before,
      &.tab:not(:empty):before {
        color: var(--aicr__syntax-whitespace);
        text-shadow: none;
      }
    }

    // Language-specific CSS
    .language-css {
      .token {
        &.selector {
          color: var(--aicr__syntax-tag);
        }

        &.property {
          color: var(--aicr__syntax-punctuation);
        }

        &.function {
          color: var(--aicr__syntax-cyan);
        }

        &.url > .token.function {
          color: var(--aicr__syntax-cyan);
        }

        &.url > .token.string.url {
          color: var(--aicr__syntax-string);
        }

        &.atrule .token.rule {
          color: var(--aicr__syntax-keyword);
        }

        &.important {
          color: var(--aicr__syntax-keyword);
        }
      }
    }

    // Language-specific JavaScript
    .language-javascript {
      .token {
        &.operator {
          color: var(--aicr__syntax-keyword);
        }

        &.template-string
          > .token.interpolation
          > .token.interpolation-punctuation.punctuation {
          color: var(--aicr__syntax-error);
        }
      }
    }

    // Language-specific JSON
    .language-json {
      .token {
        &.operator {
          color: var(--aicr__syntax-punctuation);
        }

        &.null.keyword {
          color: var(--aicr__syntax-number);
        }
      }
    }

    // Language-specific Markdown
    .language-markdown {
      .token {
        &.url {
          color: var(--aicr__syntax-punctuation);
        }

        &.url-reference.url > .token.string {
          color: var(--aicr__syntax-punctuation);
        }

        &.url > .token.operator {
          color: var(--aicr__syntax-punctuation);
        }

        &.url > .token.content {
          color: var(--aicr__syntax-function);
        }

        &.url-reference.url {
          color: var(--aicr__syntax-cyan);
        }

        &.url > .token.url {
          color: var(--aicr__syntax-cyan);
        }

        &.blockquote.punctuation,
        &.hr.punctuation {
          color: var(--aicr__syntax-comment);
          font-style: italic;
        }

        &.code-snippet {
          color: var(--aicr__syntax-string);
        }

        &.bold .token.content {
          color: var(--aicr__syntax-number);
        }

        &.italic .token.content {
          color: var(--aicr__syntax-keyword);
        }

        &.list.punctuation {
          color: var(--aicr__syntax-tag);
        }

        &.strike .token.content,
        &.strike .token.punctuation {
          color: var(--aicr__syntax-tag);
        }

        &.title.important > .token.punctuation {
          color: var(--aicr__syntax-tag);
        }
      }
    }
  }

  .aicr__chart {
    max-height: 20rem;
  }

  > p {
    margin: 0;

    .aicr__code {
      font-size: 0.85rem;
      background-color: #f5f5f5;
      padding: 0.1rem 0.25rem;
      border-radius: 0.5rem;
      font-family: monospace;
    }
  }
}