@import "katex/dist/katex.min.css";

@layer components {
    [data-slot="markdown"],
    .tm-md-root {
        --markdown-code-background-default: color-mix(
            in oklch,
            var(--muted) 72%,
            var(--background)
        );
        --markdown-code-foreground: var(--foreground);
        --markdown-code-token-constant: var(--primary-foreground-alt);
        --markdown-code-token-string: color-mix(
            in oklch,
            var(--chart-2) 78%,
            var(--foreground)
        );
        --markdown-code-token-comment: var(--muted-foreground);
        --markdown-code-token-keyword: color-mix(
            in oklch,
            var(--primary) 72%,
            var(--foreground)
        );
        --markdown-code-token-parameter: var(--chart-3);
        --markdown-code-token-function: var(--chart-4);
        --markdown-code-token-string-expression: var(--chart-2);
        --markdown-code-token-punctuation: color-mix(
            in oklch,
            var(--foreground) 72%,
            var(--muted-foreground)
        );
        --markdown-code-token-link: var(--primary-foreground-alt);
    }

    .dark [data-slot="markdown"]:not([data-code-theme="light"]),
    [data-slot="markdown"][data-code-theme="dark"],
    .dark .tm-md-root {
        --markdown-code-background-default: color-mix(
            in oklch,
            var(--muted) 76%,
            black 24%
        );
        --markdown-code-token-constant: var(--chart-1);
        --markdown-code-token-keyword: color-mix(
            in oklch,
            var(--primary) 62%,
            var(--foreground)
        );
        --markdown-code-token-function: color-mix(
            in oklch,
            var(--chart-4) 72%,
            var(--foreground)
        );
    }

    .cm-editor.tm-md-editor {
        border-radius: inherit;
        background: transparent;
        caret-color: var(--foreground);
    }

    .cm-editor.tm-md-editor.cm-focused {
        outline: 0px !important;
        box-shadow: none;
    }

    .cm-editor.tm-md-editor .cm-cursor,
    .cm-editor.tm-md-editor .cm-dropCursor {
        border-left-color: var(--foreground) !important;
    }

    .cm-editor.tm-md-editor .cm-scroller {
        max-height: 30vh;
        overflow-x: hidden;
        overflow-y: auto;
        font-family: "Public Sans", system-ui, sans-serif !important;
        line-height: 1.55;
    }

    .cm-editor.tm-md-editor .cm-content {
        min-height: 2rem;
        padding: var(--tm-md-content-padding, 0.25rem 0.625rem);
        caret-color: var(--foreground) !important;
    }

    .cm-editor.tm-md-editor .cm-line {
        padding: 0 0 0 0 !important;
        color: var(--foreground);
    }

    .cm-editor.tm-md-editor .tm-md-editor-emoji {
        display: inline-block;
        width: 1.15em;
        height: 1.15em;
        object-fit: contain;
        vertical-align: -0.18em;
        pointer-events: none;
    }

    .cm-editor.tm-md-editor .tm-md-code-line {
        box-sizing: border-box;
        border-right: var(--ui-border-width) solid var(--border);
        border-left: var(--ui-border-width) solid var(--border);
        border-radius: 0;
        background: var(
            --markdown-code-background,
            var(--markdown-code-background-default)
        );
        color: var(--markdown-code-foreground);
        font-family: "JetBrains Mono", ui-monospace, monospace;
        font-size: 0.82rem;
        line-height: 1.7;
        padding-right: 1rem !important;
        padding-left: 0 !important;
    }

    .cm-editor.tm-md-editor .tm-md-code-line::before {
        display: inline-block;
        width: 2.5rem;
        padding-right: 1rem;
        color: var(--muted-foreground);
        content: attr(data-code-line);
        font-variant-numeric: tabular-nums;
        text-align: right;
        user-select: none;
    }

    .cm-editor.tm-md-editor .tm-md-code-line-start {
        margin-top: 0.45rem;
        border-top: var(--ui-border-width) solid var(--border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding-top: 0.65rem;
    }

    .cm-editor.tm-md-editor .tm-md-code-line-end {
        margin-bottom: 0.45rem;
        border-bottom: var(--ui-border-width) solid var(--border);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        padding-bottom: 0.65rem;
    }

    .cm-editor.tm-md-editor .tm-md-code-line-start.tm-md-code-line-end {
        border-radius: var(--radius-lg);
    }

    .cm-editor.tm-md-editor .tm-md-rendered-code-block {
        width: 100%;
    }

    .cm-editor.tm-md-editor .tm-md-heading {
        font-family: var(--font-heading);
        font-weight: 700;
        line-height: 1.25;
    }

    .cm-editor.tm-md-editor .tm-md-h1 {
        font-size: 1.65rem;
    }

    .cm-editor.tm-md-editor .tm-md-h2 {
        font-size: 1.45rem;
    }

    .cm-editor.tm-md-editor .tm-md-h3 {
        font-size: 1.25rem;
    }

    .cm-editor.tm-md-editor .tm-md-h4 {
        font-size: 1.1rem;
    }

    .cm-editor.tm-md-editor .tm-md-h5 {
        font-size: 1rem;
    }

    .cm-editor.tm-md-editor .tm-md-h6 {
        font-size: 0.95rem;
        opacity: 0.9;
    }

    .cm-editor.tm-md-editor .tm-md-strong {
        font-weight: 700;
    }

    .cm-editor.tm-md-editor .tm-md-em {
        font-style: italic;
    }

    .cm-editor.tm-md-editor .tm-md-del {
        text-decoration: line-through;
    }

    .cm-editor.tm-md-editor .tm-md-code {
        border: var(--ui-border-width) solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--muted);
        font-family: "JetBrains Mono", ui-monospace, monospace;
        font-size: 0.88em;
    }

    .cm-editor.tm-md-editor .tm-md-code-active {
        border-radius: var(--radius-sm);
        background: var(--muted);
        box-shadow: inset 0 0 0 var(--ui-border-width) var(--border);
        font-family: "JetBrains Mono", ui-monospace, monospace;
        font-size: 0.88em;
    }

    .cm-editor.tm-md-editor .tm-md-code-active .tm-md-code {
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: inherit;
    }

    .cm-editor.tm-md-editor .tm-md-link {
        color: var(--primary-foreground-alt);
        text-decoration: underline;
        text-underline-offset: 0.14rem;
    }

    .cm-tooltip.cm-tooltip-autocomplete {
        min-width: 18rem;
        max-width: min(26rem, calc(100vw - 1rem));
        overflow: hidden;
        border: var(--ui-border-width) solid var(--border);
        border-radius: var(--radius);
        background: var(--popover);
        box-shadow:
            0 4px 6px -1px rgb(0 0 0 / 10%),
            0 2px 4px -2px rgb(0 0 0 / 10%);
        color: var(--popover-foreground);
        font-family: var(--font-sans);
        font-size: 0.875rem;
    }

    .cm-tooltip.cm-tooltip-autocomplete > ul {
        max-height: min(20rem, 45vh);
        padding: 0.25rem;
        font-family: var(--font-sans);
        scrollbar-color: var(--border) transparent;
        scrollbar-width: thin;
    }

    .cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar-track {
        background: transparent;
    }

    .cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar-thumb {
        border-radius: 9999px;
        background: var(--border);
    }

    .cm-tooltip.cm-tooltip-autocomplete > ul > li {
        display: flex;
        min-height: 2.25rem;
        align-items: center;
        padding: 0.3rem 0.5rem;
        border-radius: var(--radius-md);
        color: var(--popover-foreground);
    }

    .cm-tooltip.cm-tooltip-autocomplete > ul > li:hover,
    .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
        background: var(--accent);
        color: var(--accent-foreground);
    }

    .cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon {
        display: none;
    }

    .cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cm-tooltip.cm-tooltip-autocomplete .cm-completionMatchedText {
        color: inherit;
        font-weight: 600;
        text-decoration: none;
    }

    .cm-tooltip-autocomplete .tm-md-completion-emoji {
        display: inline-block;
        flex: 0 0 auto;
        width: 1.35rem;
        height: 1.35rem;
        margin-right: 0.5rem;
        vertical-align: middle;
    }
}