@import "tailwindcss";

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--foreground) !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

@font-face {
  font-family: "Cal Sans UI";
  src: url("./assets/fonts/CalSansUI[MODE,wght].woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 300 700;
}

@font-face {
  font-family: "Cal Sans Heading";
  src: url("./assets/fonts/CalSans-SemiBold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Paper Mono";
  src: url("./assets/fonts/PaperMono-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@custom-variant dark (&:is(.dark *));

@theme inline {
  --animate-skeleton: skeleton 2s -1s infinite linear;
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-warning-foreground: var(--warning-foreground);
  --color-warning: var(--warning);
  --color-success-foreground: var(--success-foreground);
  --color-success: var(--success);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar: var(--sidebar);
  --color-ring: var(--ring);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-input: var(--input);
  --color-info-foreground: var(--info-foreground);
  --color-info: var(--info);
  --color-foreground: var(--foreground);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive: var(--destructive);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-code-foreground: var(--code-foreground);
  --color-code-highlight: var(--code-highlight);
  --color-code: var(--code);
  --color-border: var(--border);
  --color-background: var(--background);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  @keyframes skeleton {
    to {
      background-position: -200% 0;
    }
  }
}

:root {
  --font-sans:
    "Cal Sans UI",
    ui-sans-serif,
    system-ui,
    sans-serif;
  --font-heading: "Cal Sans Heading", var(--font-sans);
  --font-mono:
    "Paper Mono",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  --radius: 0.625rem;
  --accent: --alpha(var(--color-black) / 4%);
  --accent-foreground: var(--color-neutral-800);
  --background: var(--color-white);
  --border: --alpha(var(--color-black) / 8%);
  --card: var(--color-white);
  --card-foreground: var(--color-neutral-800);
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-red-700);
  --foreground: var(--color-neutral-800);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --input: --alpha(var(--color-black) / 10%);
  --muted: --alpha(var(--color-black) / 4%);
  --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black));
  --popover: var(--color-white);
  --popover-foreground: var(--color-neutral-800);
  --primary: var(--color-neutral-800);
  --primary-foreground: var(--color-neutral-50);
  --ring: var(--color-neutral-400);
  --secondary: --alpha(var(--color-black) / 4%);
  --secondary-foreground: var(--color-neutral-800);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
  --chart-1: var(--color-orange-600);
  --chart-2: var(--color-teal-600);
  --chart-3: var(--color-cyan-900);
  --chart-4: var(--color-amber-400);
  --chart-5: var(--color-amber-500);
  --sidebar: var(--color-neutral-50);
  --sidebar-foreground: color-mix(
    in srgb,
    var(--color-neutral-800) 64%,
    var(--sidebar)
  );
  --sidebar-primary: var(--color-neutral-800);
  --sidebar-primary-foreground: var(--color-neutral-50);
  --sidebar-accent: --alpha(var(--color-black) / 4%);
  --sidebar-accent-foreground: var(--color-neutral-800);
  --sidebar-border: --alpha(var(--color-black) / 6%);
  --sidebar-ring: var(--color-neutral-400);
  --code: var(--color-white);
  --code-foreground: var(--foreground);
  --code-highlight: --alpha(var(--color-black) / 4%);
}

.dark {
  --accent: --alpha(var(--color-white) / 4%);
  --accent-foreground: var(--color-neutral-100);
  --background: color-mix(
    in srgb,
    var(--color-neutral-950) 96%,
    var(--color-white)
  );
  --border: --alpha(var(--color-white) / 6%);
  --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
  --card-foreground: var(--color-neutral-100);
  --destructive: color-mix(in srgb, var(--color-red-500) 90%, var(--color-white));
  --destructive-foreground: var(--color-red-400);
  --foreground: var(--color-neutral-100);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --input: --alpha(var(--color-white) / 8%);
  --muted: --alpha(var(--color-white) / 4%);
  --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white));
  --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
  --popover-foreground: var(--color-neutral-100);
  --primary: var(--color-neutral-100);
  --primary-foreground: var(--color-neutral-800);
  --ring: var(--color-neutral-500);
  --secondary: --alpha(var(--color-white) / 4%);
  --secondary-foreground: var(--color-neutral-100);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
  --chart-1: var(--color-blue-700);
  --chart-2: var(--color-emerald-500);
  --chart-3: var(--color-amber-500);
  --chart-4: var(--color-purple-500);
  --chart-5: var(--color-rose-500);
  --sidebar: color-mix(
    in srgb,
    var(--color-neutral-950) 97%,
    var(--color-white)
  );
  --sidebar-foreground: color-mix(
    in srgb,
    var(--color-neutral-100) 64%,
    var(--sidebar)
  );
  --sidebar-primary: var(--color-neutral-100);
  --sidebar-primary-foreground: var(--color-neutral-800);
  --sidebar-accent: --alpha(var(--color-white) / 4%);
  --sidebar-accent-foreground: var(--color-neutral-100);
  --sidebar-border: --alpha(var(--color-white) / 5%);
  --sidebar-ring: var(--color-neutral-400);
  --code: color-mix(in srgb, var(--background) 98%, var(--color-white));
  --code-foreground: var(--foreground);
  --code-highlight: --alpha(var(--color-white) / 4%);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background font-sans text-foreground antialiased;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-heading font-semibold tracking-tight;
  }
}

@layer components {
  .kaneo-tiptap-shell {
    position: relative;
  }

  .kaneo-tiptap-shell:focus-within {
    outline: none;
  }

  .kaneo-tiptap-shell.is-drag-active,
  .kaneo-comment-editor-shell.is-drag-active {
    z-index: 90;
  }

  .kaneo-editor-quick-attach {
    position: absolute;
    right: 0.75rem;
    bottom: 0.7rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--background) 82%, transparent);
    color: color-mix(in srgb, var(--foreground) 76%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--background) 68%, transparent);
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease,
      transform 0.15s ease;
  }

  .kaneo-editor-quick-attach:hover {
    border-color: color-mix(in srgb, var(--foreground) 18%, var(--border));
    background: color-mix(in srgb, var(--accent) 72%, transparent);
    color: var(--foreground);
    transform: translateY(-1px);
  }

  .kaneo-editor-quick-attach:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--ring) 24%, transparent),
      0 4px 16px color-mix(in srgb, var(--background) 68%, transparent);
  }

  .kaneo-tiptap-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--popover);
    padding: 0.2rem 0.24rem;
    box-shadow:
      0 8px 24px --alpha(var(--color-black) / 14%),
      0 1px 2px --alpha(var(--color-black) / 9%);
  }

  .kaneo-tiptap-bubble-btn {
    height: 1.6rem;
    width: 1.6rem;
    padding: 0;
  }

  .kaneo-tiptap-bubble-separator {
    display: block;
    width: 1px;
    height: 1rem;
    background: color-mix(in srgb, var(--border) 84%, transparent);
    margin: 0 0.15rem;
  }

  .kaneo-codeblock-language {
    position: fixed;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transform: translateX(-100%);
  }

  .kaneo-codeblock-language-trigger {
    display: inline-flex;
    max-width: 10rem;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--background) 90%, transparent);
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1;
    color: color-mix(in srgb, var(--foreground) 80%, transparent);
    backdrop-filter: blur(8px);
    transition:
      border-color 0.12s ease,
      color 0.12s ease,
      background-color 0.12s ease;
  }

  .kaneo-codeblock-language-trigger:hover {
    border-color: color-mix(in srgb, var(--ring) 42%, var(--border));
    color: var(--foreground);
    background: color-mix(in srgb, var(--background) 96%, transparent);
  }

  .kaneo-codeblock-copy-trigger {
    min-width: 4.6rem;
    justify-content: center;
  }

  .kaneo-codeblock-copy-trigger > span {
    line-height: 1;
  }

  .kaneo-tiptap-content .ProseMirror {
    min-height: 1.85rem;
    padding: 0.2rem 0 2.9rem;
    font-family: var(--font-sans);
    font-size: 0.965rem;
    line-height: 1.72;
    white-space: pre-wrap;
    color: var(--foreground);
    caret-color: var(--foreground);
    outline: none;
  }

  .kaneo-tiptap-slash-menu {
    position: fixed;
    z-index: 50;
    min-width: 16rem;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 0.5rem;
    background: var(--popover);
    padding: 0.32rem;
    box-shadow:
      0 10px 28px --alpha(var(--color-black) / 18%),
      0 1px 2px --alpha(var(--color-black) / 10%);
  }

  .kaneo-tiptap-slash-group + .kaneo-tiptap-slash-group {
    margin-top: 0.2rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    padding-top: 0.2rem;
  }

  .kaneo-tiptap-slash-group-title {
    padding: 0.22rem 0.42rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--foreground) 48%, transparent);
  }

  .kaneo-tiptap-slash-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    border-radius: 0.35rem;
    padding: 0.4rem 0.45rem;
    text-align: left;
    font-size: 0.79rem;
    color: color-mix(in srgb, var(--foreground) 88%, transparent);
  }

  .kaneo-tiptap-slash-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kaneo-tiptap-slash-shortcut {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--foreground) 52%, transparent);
  }

  .kaneo-tiptap-slash-item:hover,
  .kaneo-tiptap-slash-item.is-selected {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  .kaneo-tiptap-slash-empty {
    padding: 0.4rem 0.55rem;
    font-size: 0.76rem;
    color: color-mix(in srgb, var(--foreground) 56%, transparent);
  }

  .kaneo-tiptap-content .ProseMirror p {
    margin: 0.2rem 0;
  }

  .kaneo-tiptap-content .ProseMirror h1,
  .kaneo-tiptap-content .ProseMirror h2,
  .kaneo-tiptap-content .ProseMirror h3 {
    margin: 1.05rem 0 0.45rem;
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.26;
    color: var(--foreground);
  }

  .kaneo-tiptap-content .ProseMirror h1 {
    font-size: 1.24rem;
  }

  .kaneo-tiptap-content .ProseMirror h2 {
    font-size: 1.12rem;
  }

  .kaneo-tiptap-content .ProseMirror h3 {
    font-size: 1.02rem;
  }

  .kaneo-tiptap-content .ProseMirror ul,
  .kaneo-tiptap-content .ProseMirror ol {
    margin: 0.3rem 0;
    padding-inline-start: 1.35rem;
  }

  .kaneo-tiptap-content .ProseMirror ul {
    list-style-type: disc;
  }

  .kaneo-tiptap-content .ProseMirror ol {
    list-style-type: decimal;
  }

  .kaneo-tiptap-content .ProseMirror ul ul {
    list-style-type: circle;
  }

  .kaneo-tiptap-content .ProseMirror ul ul ul {
    list-style-type: square;
  }

  .kaneo-tiptap-content .ProseMirror ol ol {
    list-style-type: lower-alpha;
  }

  .kaneo-tiptap-content .ProseMirror li::marker {
    color: color-mix(in srgb, var(--foreground) 70%, transparent);
  }

  .kaneo-tiptap-content .ProseMirror li {
    margin: 0.1rem 0;
  }

  .kaneo-tiptap-content .ProseMirror ul[data-type="taskList"] {
    list-style: none;
    margin: 0.3rem 0;
    padding-inline-start: 0;
  }

  .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    margin: 0.18rem 0;
    text-align: left;
  }

  .kaneo-tiptap-content
    .ProseMirror
    li[data-type="taskItem"]
    > :is(label, .kaneo-task-item-checkbox) {
    margin-top: 0;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
  }

  .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] > div {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
  }

  .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] > div > * {
    margin-inline: 0;
  }

  .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] ul,
  .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] ol {
    margin-top: 0.2rem;
  }

  .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] [data-slot="checkbox"] {
    margin-top: 0;
  }

  .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] > div p {
    margin: 0;
    line-height: 1.45;
  }

  .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"][data-checked="true"] > div p {
    color: color-mix(in srgb, var(--foreground) 62%, transparent);
    text-decoration: line-through;
  }

  .kaneo-tiptap-content .ProseMirror a {
    color: var(--primary);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(
      in srgb,
      var(--primary) 68%,
      transparent
    );
    transition:
      color 0.12s ease,
      text-decoration-color 0.12s ease;
  }

  .kaneo-tiptap-content .ProseMirror a:hover {
    color: color-mix(in srgb, var(--primary) 84%, var(--foreground));
    text-decoration-color: currentColor;
  }

  .kaneo-tiptap-content .ProseMirror :not(pre) > code {
    border: 1px solid var(--border);
    border-radius: 0.34rem;
    background: var(--code-highlight);
    font-family: var(--font-mono);
    font-size: 0.84em;
    padding: 0.11rem 0.32rem;
  }

  .kaneo-tiptap-content .ProseMirror pre {
    margin: 0.45rem 0;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 3px);
    background: var(--code);
    padding: 0.75rem 0.9rem;
  }

  .kaneo-tiptap-content .ProseMirror pre code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--code-foreground);
  }

  .kaneo-tiptap-content .ProseMirror blockquote {
    margin: 0.5rem 0;
    border-left: 2px solid var(--border);
    padding-left: 0.75rem;
    color: color-mix(in srgb, var(--foreground) 78%, transparent);
  }

  .kaneo-tiptap-content .ProseMirror img.kaneo-editor-image,
  .kaneo-comment-editor-prose img.kaneo-editor-image {
    display: block;
    max-width: min(100%, 44rem);
    width: auto;
    height: auto;
    margin: 0.75rem 0;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: calc(var(--radius) - 2px);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    object-fit: contain;
    overflow: hidden;
  }

  .kaneo-create-task-modal .kaneo-comment-editor-prose img.kaneo-editor-image {
    max-height: min(50vh, 28rem);
    width: 100%;
  }

  .kaneo-tiptap-content .ProseMirror .is-editor-empty:first-child::before {
    pointer-events: none;
    content: attr(data-placeholder);
    height: 0;
    float: left;
    color: color-mix(in srgb, var(--foreground) 40%, transparent);
  }

  .kaneo-tiptap-content .ProseMirror table {
    border-collapse: collapse;
    margin: 0.7rem 0;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 3px);
  }

  .kaneo-tiptap-content .ProseMirror table td,
  .kaneo-tiptap-content .ProseMirror table th {
    min-width: 1em;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    padding: 0.45rem 0.55rem;
    vertical-align: top;
  }

  .kaneo-tiptap-content .ProseMirror table th {
    background: color-mix(in srgb, var(--accent) 70%, transparent);
    font-weight: 600;
    text-align: left;
  }

  .kaneo-tiptap-content .ProseMirror .selectedCell:after {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    background: color-mix(in srgb, var(--primary) 16%, transparent);
  }

  .kaneo-tiptap-content .ProseMirror .tableWrapper {
    overflow-x: auto;
  }

  .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"] {
    margin: 0.65rem 0;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: calc(var(--radius) - 2px);
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    overflow: hidden;
    transition:
      border-color 0.12s ease,
      box-shadow 0.12s ease;
  }

  .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"] iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    background: black;
  }

  .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"] > a {
    display: block;
    padding: 0.6rem 0.7rem;
    color: var(--foreground);
    text-decoration: none;
    font-size: 0.82rem;
    word-break: break-word;
  }

  .kaneo-tiptap-content .ProseMirror
    [data-type="kaneo-embed"].ProseMirror-selectednode {
    border-color: color-mix(in srgb, var(--ring) 82%, var(--border));
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--ring) 38%, transparent),
      0 0 0 1px color-mix(in srgb, var(--ring) 70%, transparent) inset;
  }

  .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"] .kaneo-embed-unsupported {
    padding: 0.62rem 0.72rem;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--foreground) 62%, transparent);
  }

  .kaneo-issue-link-node {
    display: inline-flex;
    vertical-align: baseline;
  }

  .kaneo-issue-link-chip {
    display: inline-flex;
    max-width: min(26rem, 85vw);
    align-items: center;
    gap: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    padding: 0.12rem 0.42rem;
    color: var(--foreground);
    text-decoration: none;
    line-height: 1.3;
    transform: translateY(-0.02rem);
  }

  .kaneo-issue-link-chip:hover {
    border-color: color-mix(in srgb, var(--ring) 56%, var(--border));
    background: color-mix(in srgb, var(--accent) 34%, transparent);
  }

  .kaneo-issue-link-key {
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--foreground) 64%, transparent);
  }

  .kaneo-issue-link-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--foreground);
  }

  .kaneo-issue-link-preview {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(21rem, calc(100vw - 1.5rem));
    padding: 0.72rem;
    text-wrap: pretty;
  }

  .kaneo-issue-link-preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--foreground) 68%, transparent);
  }

  .kaneo-issue-link-preview-key {
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .kaneo-issue-link-preview-title {
    margin-top: 0.45rem;
    font-size: 0.9rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--foreground);
  }

  .kaneo-issue-link-preview-meta {
    margin-top: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    padding-top: 0.45rem;
    font-size: 0.76rem;
    color: color-mix(in srgb, var(--foreground) 72%, transparent);
  }

  .kaneo-attachment-node {
    display: inline-flex;
    max-width: 100%;
    vertical-align: middle;
    margin: 0.35rem 0;
  }

  .kaneo-attachment-card {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: min(22rem, 100%);
    max-width: min(28rem, 100%);
    padding: 0.75rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: calc(var(--radius) + 1px);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 48%, transparent),
      color-mix(in srgb, var(--accent) 20%, transparent)
    );
    text-decoration: none;
    transition:
      border-color 0.18s ease,
      background-color 0.18s ease,
      transform 0.18s ease;
  }

  .kaneo-attachment-card:hover {
    border-color: color-mix(in srgb, var(--foreground) 18%, var(--border));
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 62%, transparent),
      color-mix(in srgb, var(--accent) 30%, transparent)
    );
    transform: translateY(-1px);
  }

  .kaneo-attachment-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    color: color-mix(in srgb, var(--foreground) 72%, transparent);
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
    border-radius: 0.55rem;
    flex-shrink: 0;
  }

  .kaneo-attachment-card-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .kaneo-attachment-card-title {
    color: var(--foreground);
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kaneo-attachment-card-meta {
    margin-top: 0.18rem;
    color: color-mix(in srgb, var(--foreground) 58%, transparent);
    font-size: 0.76rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"]:focus-within {
    border-color: color-mix(in srgb, var(--ring) 80%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 34%, transparent);
  }

  .kaneo-embed-composer {
    position: fixed;
    z-index: 60;
    width: min(16.5rem, calc(100vw - 2rem));
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 0.6rem;
    background: var(--popover);
    padding: 0.5rem;
    box-shadow:
      0 12px 32px --alpha(var(--color-black) / 20%),
      0 1px 2px --alpha(var(--color-black) / 10%);
  }

  .kaneo-embed-composer-form {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .kaneo-embed-choice-menu {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
  }

  .kaneo-embed-choice-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border-radius: 0.4rem;
    padding: 0.38rem 0.45rem;
    text-align: left;
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--foreground) 90%, transparent);
  }

  .kaneo-embed-choice-item:hover,
  .kaneo-embed-choice-item.is-primary {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  .kaneo-embed-choice-hint {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: color-mix(in srgb, currentColor 62%, transparent);
  }

  .kaneo-embed-composer-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
  }

  .kaneo-embed-composer-error {
    font-size: 0.72rem;
    color: var(--destructive);
  }

  .kaneo-comment-composer {
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--background) 96%, transparent);
    transition:
      border-color 0.14s ease,
      box-shadow 0.14s ease;
  }

  .kaneo-comment-composer:focus-within {
    border-color: color-mix(in srgb, var(--ring) 64%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent);
  }

  .kaneo-comment-card-body {
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--card) 82%, transparent);
    backdrop-filter: blur(3px);
    position: relative;
  }

  .kaneo-comment-editor-shell {
    position: relative;
    isolation: isolate;
    z-index: 1;
  }

  .kaneo-comment-editor-shell:focus-within {
    z-index: 80;
  }

  .kaneo-editor-drop-indicator {
    pointer-events: none;
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: 0.75rem;
    height: 2px;
    z-index: 85;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ring) 78%, var(--primary));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--background) 88%, transparent);
  }

  .kaneo-editor-drop-indicator span {
    display: none;
  }

  .kaneo-comment-editor-shell-readonly {
    pointer-events: auto;
  }

  .kaneo-comment-editor-content .ProseMirror {
    min-height: 2.2rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.62rem 0.75rem 2.9rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.62;
    white-space: pre-wrap;
    color: var(--foreground);
    caret-color: var(--foreground);
    outline: none;
  }

  .kaneo-comment-editor-shell-readonly .kaneo-comment-editor-content .ProseMirror {
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0.62rem 0.75rem;
  }

  .kaneo-comment-viewer .kaneo-comment-editor-content .ProseMirror {
    max-height: none;
    overflow: visible;
    padding-bottom: 0.8rem;
  }

  .kaneo-comment-editor-prose p {
    margin: 0;
  }

  .kaneo-comment-editor-prose h1,
  .kaneo-comment-editor-prose h2,
  .kaneo-comment-editor-prose h3 {
    margin: 0.12rem 0 0;
    line-height: 1.32;
  }

  .kaneo-comment-editor-prose ul,
  .kaneo-comment-editor-prose ol {
    margin: 0.12rem 0 0;
    padding-inline-start: 1.2rem;
  }

  .kaneo-comment-editor-prose ul {
    list-style-type: disc;
  }

  .kaneo-comment-editor-prose ol {
    list-style-type: decimal;
  }

  .kaneo-comment-editor-prose ul ul {
    list-style-type: circle;
  }

  .kaneo-comment-editor-prose ul ul ul {
    list-style-type: square;
  }

  .kaneo-comment-editor-prose ol ol {
    list-style-type: lower-alpha;
  }

  .kaneo-comment-editor-prose li::marker {
    color: color-mix(in srgb, var(--foreground) 70%, transparent);
  }

  .kaneo-comment-editor-prose li {
    margin: 0.08rem 0;
  }

  .kaneo-comment-editor-prose ul[data-type="taskList"] {
    list-style: none;
    margin: 0.12rem 0 0;
    padding-inline-start: 0;
  }

  .kaneo-comment-editor-prose li[data-type="taskItem"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    margin: 0.14rem 0;
    text-align: left;
  }

  .kaneo-comment-editor-prose
    li[data-type="taskItem"]
    > :is(label, .kaneo-task-item-checkbox) {
    margin-top: 0;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
  }

  .kaneo-comment-editor-prose li[data-type="taskItem"] > div {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
  }

  .kaneo-comment-editor-prose li[data-type="taskItem"] > div > * {
    margin-inline: 0;
  }

  .kaneo-comment-editor-prose li[data-type="taskItem"] ul,
  .kaneo-comment-editor-prose li[data-type="taskItem"] ol {
    margin-top: 0.16rem;
  }

  .kaneo-comment-editor-prose li[data-type="taskItem"] [data-slot="checkbox"] {
    margin-top: 0;
  }

  .kaneo-comment-editor-prose li[data-type="taskItem"] > div p {
    margin: 0;
    line-height: 1.45;
  }

  .kaneo-comment-editor-prose li[data-type="taskItem"][data-checked="true"] > div p {
    color: color-mix(in srgb, var(--foreground) 62%, transparent);
    text-decoration: line-through;
  }

  .kaneo-comment-editor-prose a,
  .kaneo-tiptap-prose a {
    color: color-mix(in srgb, var(--foreground) 88%, #4c9aff 12%);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ring) 44%, transparent);
    text-underline-offset: 2px;
  }

  .kaneo-comment-editor-prose :not(pre) > code {
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 0.34rem;
    background: color-mix(in srgb, var(--accent) 40%, transparent);
    padding: 0.08rem 0.36rem;
    font-size: 0.79em;
    font-family: var(--font-mono);
  }

  .kaneo-comment-editor-prose pre {
    margin: 0.12rem 0 0;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--card) 80%, transparent);
    padding: 0.55rem 0.7rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .kaneo-comment-editor-prose [data-type="kaneo-embed"] {
    margin: 0.12rem 0 0;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: calc(var(--radius) - 2px);
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    overflow: hidden;
    transition:
      border-color 0.12s ease,
      box-shadow 0.12s ease;
  }

  .kaneo-comment-editor-prose [data-type="kaneo-embed"] iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    background: black;
  }

  .kaneo-comment-editor-prose [data-type="kaneo-embed"] > a {
    display: block;
    padding: 0.6rem 0.7rem;
    color: var(--foreground);
    text-decoration: none;
    font-size: 0.82rem;
    word-break: break-word;
  }

  .kaneo-comment-editor-prose
    [data-type="kaneo-embed"].ProseMirror-selectednode {
    border-color: color-mix(in srgb, var(--ring) 82%, var(--border));
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--ring) 38%, transparent),
      0 0 0 1px color-mix(in srgb, var(--ring) 70%, transparent) inset;
  }

  .kaneo-comment-editor-prose [data-type="kaneo-embed"]:focus-within {
    border-color: color-mix(in srgb, var(--ring) 80%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 34%, transparent);
  }

  .kaneo-comment-editor-prose table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0.12rem 0 0;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 0.45rem;
    overflow: hidden;
  }

  .kaneo-comment-editor-prose table td,
  .kaneo-comment-editor-prose table th {
    min-width: 1em;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    padding: 0.4rem 0.5rem;
    vertical-align: top;
  }

  .kaneo-comment-editor-prose table th {
    background: color-mix(in srgb, var(--accent) 65%, transparent);
    font-weight: 600;
    text-align: left;
  }

  .kaneo-comment-editor-prose .tableWrapper {
    overflow-x: auto;
  }

  .kaneo-comment-editor-prose .is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: color-mix(in srgb, var(--foreground) 42%, transparent);
    pointer-events: none;
    float: left;
    height: 0;
  }

  .kaneo-comment-editor-prose p > .ProseMirror-trailingBreak {
    line-height: 1;
  }

  .kaneo-comment-editor-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 0.45rem;
    background: var(--popover);
    padding: 0.2rem 0.24rem;
    box-shadow:
      0 8px 24px --alpha(var(--color-black) / 14%),
      0 1px 2px --alpha(var(--color-black) / 9%);
  }

  .kaneo-comment-editor-bubble-btn {
    height: 1.58rem;
    width: 1.58rem;
    padding: 0;
  }

  .kaneo-comment-editor-shell .kaneo-tiptap-slash-menu {
    position: absolute;
    z-index: 120;
    opacity: 1;
    background-color: var(--popover);
    background-image: none;
    backdrop-filter: none;
  }

  .kaneo-tiptap-content .ProseMirror ::selection {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
  }

}