@layer components {
  .tiptap .is-empty::before,
  .tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: hsl(0, 0%, 70%);
    float: left;
    height: 0;
    pointer-events: none;
  }

  .tiptap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }

  .tiptap-toolbar-button {
    padding: 0.25rem 0.375rem;
    border: 1px solid transparent;
    border-radius: 3px;
    line-height: 0;
    &:hover {
      border-color: hsl(0, 0%, 80%);
    }
  }

  .tiptap-button-active {
    border-color: hsl(0, 0%, 60%);
    background-color: hsl(0, 0%, 92%);
  }

  .tiptap-palette {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
  }

  .tiptap-swatch {
    width: 1rem;
    height: 1rem;
    border: 1px solid hsl(0, 0%, 88%);
    cursor: pointer;
    &:hover {
      border-color: hsl(0, 0%, 60%);
    }
  }

  .tiptap-upload-form,
  .tiptap-upload-input {
    display: none;
  }

  .tiptap-content [data-tiptap-image].ProseMirror-selectednode,
  .tiptap-content img.ProseMirror-selectednode,
  .tiptap-content [data-youtube-video].ProseMirror-selectednode,
  .tiptap-content [data-type="excalidraw"].ProseMirror-selectednode {
    outline: 2px solid hsl(217, 91%, 60%);
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 6px hsl(217, 91%, 60%, 0.14);
  }

  .tiptap-media-remove-button {
    position: fixed;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid hsl(0, 0%, 88%);
    border-radius: 999px;
    background: white;
    color: hsl(0, 0%, 20%);
    box-shadow: 0 0.5rem 1.5rem hsl(0, 0%, 0%, 0.18);
    cursor: pointer;

    &:hover {
      border-color: hsl(0, 72%, 55%);
      color: hsl(0, 72%, 45%);
    }

    &[hidden] {
      display: none;
    }
  }

  .tiptap-media-caption-button {
    position: fixed;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid hsl(0, 0%, 88%);
    border-radius: 999px;
    background: white;
    color: hsl(0, 0%, 20%);
    box-shadow: 0 0.5rem 1.5rem hsl(0, 0%, 0%, 0.18);
    cursor: pointer;
    font: 600 0.75rem/1 system-ui, sans-serif;

    &:hover {
      border-color: hsl(217, 91%, 60%);
      color: hsl(217, 91%, 45%);
    }

    &[hidden] {
      display: none;
    }
  }

  .tiptap-media-size-toolbar {
    position: fixed;
    z-index: 1000;
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.25rem;
    border: 1px solid hsl(0, 0%, 88%);
    border-radius: 999px;
    background: white;
    box-shadow: 0 0.5rem 1.5rem hsl(0, 0%, 0%, 0.18);
    transform: translateX(-50%);

    &[hidden] {
      display: none;
    }
  }

  .tiptap-media-size-button {
    min-width: 1.75rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: hsl(0, 0%, 30%);
    font: 600 0.75rem/1 system-ui, sans-serif;
    cursor: pointer;

    &:hover {
      background: hsl(0, 0%, 94%);
    }
  }

  .tiptap-media-size-button-active {
    background: hsl(217, 91%, 60%);
    color: white;

    &:hover {
      background: hsl(217, 91%, 55%);
    }
  }

  .tiptap-caption-dialog,
  .tiptap-prompt-dialog {
    max-width: min(44rem, 95vw);

    .tiptap-caption-form,
    .tiptap-prompt-form {
      display: grid;
      gap: 1rem;
      width: 100%;
    }

    .tiptap-caption-field,
    .tiptap-prompt-field {
      display: grid;
      gap: 0.35rem;
    }

    .tiptap-caption-field span,
    .tiptap-prompt-field span {
      color: hsl(0, 0%, 35%);
      font-size: 0.9rem;
      font-weight: 600;
    }

    textarea,
    input[type="url"],
    input[type="text"] {
      box-sizing: border-box;
      width: 100%;
      resize: vertical;
      font: inherit;
      padding: 0.5rem 0.625rem;
    }

    textarea {
      min-height: 2.5rem;
    }
  }

  .tiptap-content {
    --tiptap-media-edge: 1rem;

    h1 {
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.2;
      margin: 1.5rem 0 0.75rem;
    }

    h2 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.25;
      margin: 1.25rem 0 0.625rem;
    }

    h3 {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.3;
      margin: 1rem 0 0.5rem;
    }

    p {
      margin: 0.5rem 0;
    }

    a {
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-decoration-color: hsl(0, 0%, 70%);
      text-underline-offset: 4px;
      cursor: pointer;

      &:hover {
        text-decoration-color: hsl(0, 0%, 30%);
      }
    }

    ul,
    ol {
      margin: 0.5rem 0;
      padding-left: 1.5rem;
    }

    ul { list-style: disc; }
    ol { list-style: decimal; }

    li {
      margin: 0.25rem 0;
      & > p { margin: 0; }
    }

    ul[data-type="taskList"] {
      list-style: none;
      padding-left: 0;

      li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;

        & > label {
          flex-shrink: 0;
          margin-top: 0.25rem;
          user-select: none;
        }

        & > div {
          flex: 1 1 auto;
          min-width: 0;
        }

        &[data-checked="true"] > div {
          color: hsl(0, 0%, 50%);
          text-decoration: line-through;
        }
      }
    }

    blockquote {
      margin: 1rem 0;
      padding: 0.25rem 0 0.25rem 1rem;
      border-left: 3px solid hsl(0, 0%, 80%);
      color: hsl(0, 0%, 35%);
      font-style: italic;
    }

    hr {
      margin: 1.5rem 0;
      border: 0;
      border-top: 1px solid hsl(0, 0%, 85%);
    }

    img {
      box-sizing: border-box;
      display: block;
      max-width: 100%;
      height: auto;
      border-radius: 0.375rem;
      margin: 0.75rem auto;
      padding: var(--tiptap-media-edge);
      cursor: pointer;
    }

    [data-tiptap-image] {
      box-sizing: border-box;
      display: block;
      max-width: 100%;
      margin: 0.75rem auto;
      padding: var(--tiptap-media-edge);
      border-radius: calc(0.375rem + var(--tiptap-media-edge));
      cursor: pointer;
    }

    [data-tiptap-image] img {
      box-sizing: border-box;
      display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
    }

    .tiptap-media-caption,
    .tiptap-image-caption {
      display: block;
      margin-top: 0.35rem;
      color: hsl(0, 0%, 42%);
      font-size: 0.9rem;
      line-height: 1.35;
      text-align: center;
    }

    [data-youtube-video] {
      box-sizing: border-box;
      display: block;
      max-width: 100%;
      margin: 0.75rem auto;
      padding: var(--tiptap-media-edge);
      border-radius: calc(0.375rem + var(--tiptap-media-edge));
      cursor: pointer;
    }

    [data-youtube-video] iframe {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      margin: 0;
      border: 0;
      border-radius: 0.375rem;
    }

    code:not(pre code) {
      background: hsl(0, 0%, 95%);
      border-radius: 3px;
      padding: 0.125rem 0.25rem;
      font-family: "JetBrainsMono", monospace;
      font-size: 0.9em;
    }

    pre {
      background: #0d0d0d;
      border-radius: 0.5rem;
      color: #fff;
      font-family: "JetBrainsMono", monospace;
      padding: 0.5rem 0.75rem;

      code {
        background: none;
        color: inherit;
        font-size: 1rem;
        padding: 0;
      }

      .hljs-comment,
      .hljs-quote {
        color: #616161;
      }

      .hljs-variable,
      .hljs-template-variable,
      .hljs-attribute,
      .hljs-tag,
      .hljs-name,
      .hljs-regexp,
      .hljs-link,
      .hljs-selector-id,
      .hljs-selector-class {
        color: #f98181;
      }

      .hljs-number,
      .hljs-meta,
      .hljs-built_in,
      .hljs-builtin-name,
      .hljs-literal,
      .hljs-type,
      .hljs-params {
        color: #fbbc88;
      }

      .hljs-string,
      .hljs-symbol,
      .hljs-bullet {
        color: #b9f18d;
      }

      .hljs-title,
      .hljs-section {
        color: #faf594;
      }

      .hljs-keyword,
      .hljs-selector-tag {
        color: #70cff8;
      }

      .hljs-emphasis {
        font-style: italic;
      }

      .hljs-strong {
        font-weight: 700;
      }
    }
  }

  /* Excalidraw drawing node (optional extension, enabled via excalidraw: true).
     Sized and centered like an image/youtube media frame; the inline
     `width` is set by the S/M/L toolbar buttons. */
  .tiptap-excalidraw {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    margin: 0.75rem auto;
    padding: var(--tiptap-media-edge, 1rem);
    border-radius: calc(0.375rem + var(--tiptap-media-edge, 1rem));
    cursor: pointer;
  }

  .tiptap-excalidraw-image {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 1px solid hsl(0, 0%, 90%);
    border-radius: 0.375rem;
    background: white;
  }

  .tiptap-excalidraw-empty {
    min-height: 8rem;
  }

  /* Centered modal Excalidraw editor (a plain backdrop, not a top-layer
     <dialog> — see tiptap_excalidraw_dialog.js for why) */
  .tiptap-excalidraw-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--dialog-backdrop-color, rgba(0, 0, 0, 0.15));
    backdrop-filter: blur(2px);
  }

  .tiptap-excalidraw-modal {
    display: flex;
    flex-direction: column;
    width: 80vw;
    height: 80vh;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    background: white;
    border: 1px solid var(--dialog-border-color, lightgray);
    border-radius: 8px;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
  }

  .tiptap-excalidraw-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid hsl(0, 0%, 88%);

    h3 {
      margin: 0;
      font-size: 1rem;
    }
  }

  .tiptap-excalidraw-dialog-actions {
    display: flex;
    gap: 0.5rem;
  }

  .tiptap-excalidraw-canvas {
    position: relative;
    flex: 1;
    min-height: 0;
  }

}

/* Excalidraw's "Browse libraries" button opens libraries.excalidraw.com,
   whose "Add to Excalidraw" flow returns to a stable page URL and cannot
   deliver the library back into this transient modal editor (it just opens
   a new tab on the host page). Hide it — the pre-bundled libraries (see
   helpers/excalidraw_libraries.js) and the library menu's file import
   ("..." → Import) cover the same need without navigating away.
   !important is required: Excalidraw injects its own
   `.excalidraw .library-menu-browse-button { display: flex }` into <head> at
   runtime, after this stylesheet, so a same-specificity rule loses. */
.library-menu-browse-button {
  display: none !important;
}