@jant/core 0.3.35 → 0.3.36

package/src/styles/ui.css

@@ -211,46 +211,23 @@
     padding: 0px var(--site-padding) var(--space-xl);
   }
 
-  /* --- Sidebar layout (shared by dashboard and site sidebar pages) ------- */
+  /* --- Sidebar layout (collections pages) -------------------------------- */
 
-  .sidebar-layout {
-    display: flex;
-    gap: var(--sidebar-gap);
+  .site-container-sidebar {
+    position: relative;
   }
 
   .sidebar-nav {
+    position: absolute;
+    right: calc(100% + var(--sidebar-gap));
+    top: 0;
     width: var(--sidebar-width);
-    flex-shrink: 0;
-  }
-
-  .sidebar-main {
-    flex: 1;
-    min-width: 0;
-    max-width: var(--site-width);
   }
 
-  @media (max-width: 959px) {
-    .sidebar-layout {
-      display: block;
-    }
+  @media (max-width: 1079px) {
     .sidebar-nav {
       display: none;
     }
-    .sidebar-main {
-      max-width: none;
-    }
-  }
-
-  .site-header-sidebar {
-    max-width: calc(
-      var(--sidebar-width) + var(--sidebar-gap) + var(--site-width)
-    );
-  }
-
-  .site-footer-sidebar {
-    max-width: calc(
-      var(--sidebar-width) + var(--sidebar-gap) + var(--site-width)
-    );
   }
 
   /* =========================================================================
@@ -431,6 +408,12 @@
 
   /* --- Dialog shell ------------------------------------------------------- */
 
+  /* Prevent body scroll when any compose dialog is open */
+  body:has(.compose-dialog[open]),
+  body:has(.compose-fullscreen-dialog[open]) {
+    overflow: hidden;
+  }
+
   .compose-dialog {
     --compose-margin-top: max(80px, 10vh);
 
@@ -448,7 +431,7 @@
       0 8px 40px rgba(0, 0, 0, 0.08),
       0 1px 3px rgba(0, 0, 0, 0.04);
     border: 1px solid var(--site-column-outline);
-    overflow: hidden;
+    overflow: visible;
   }
 
   .compose-dialog[open] {
@@ -464,6 +447,8 @@
     flex-direction: column;
     max-height: calc(100dvh - var(--compose-margin-top) - 20px);
     position: relative;
+    border-radius: inherit;
+    overflow: hidden;
   }
 
   .compose-dialog-inner > jant-compose-editor {
@@ -839,7 +824,7 @@
   }
 
   .compose-star-filled {
-    color: var(--primary);
+    color: oklch(0.75 0.15 70);
     transform: scale(1.1);
   }
 
@@ -893,10 +878,21 @@
     background-color: var(--site-elevated-bg);
     display: flex;
     flex-direction: column;
-    border-radius: 20px;
+    border-radius: 10px;
     animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
 
+  .compose-attached-charcount {
+    position: absolute;
+    right: 12px;
+  }
+
+  @media (min-width: 700px) {
+    .compose-attached-charcount {
+      right: 16px;
+    }
+  }
+
   .compose-attached-panel-back {
     border: none;
     background: transparent;
@@ -967,10 +963,24 @@
   .compose-tool-btn:hover {
     background-color: var(--site-nav-hover-bg);
   }
+
   .compose-tool-btn-active {
+    color: var(--site-text-primary);
     background-color: var(--site-nav-hover-bg);
   }
 
+  .compose-tool-btn-add {
+    width: auto;
+    gap: 4px;
+    padding: 0 10px 0 8px;
+  }
+
+  .compose-tool-label {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
   .compose-tool-sep {
     width: 1px;
     height: 16px;
@@ -980,27 +990,14 @@
     flex-shrink: 0;
   }
 
-  .compose-tool-tip {
-    position: absolute;
-    bottom: calc(100% + 8px);
-    left: 50%;
-    transform: translateX(-50%) scale(0.92);
-    background-color: var(--site-text-primary);
-    color: var(--site-elevated-bg);
-    font-size: 0.6875rem;
-    font-weight: 400;
-    letter-spacing: 0.02em;
-    padding: 4px 10px;
-    border-radius: 6px;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
-  }
+  /* --- Emoji picker ------------------------------------------------------- */
 
-  .compose-tool-btn:hover .compose-tool-tip {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
+  .compose-emoji-picker {
+    position: fixed;
+    z-index: 100;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgb(0 0 0 / 0.25);
   }
 
   /* --- Action row --------------------------------------------------------- */
@@ -1222,8 +1219,25 @@
     border-radius: var(--media-radius, 0.5rem);
   }
 
-  .compose-attachment-error {
-    background-color: rgba(220, 38, 38, 0.4);
+  .compose-attachment-retry {
+    background-color: rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    transition: background-color 0.15s;
+  }
+
+  .compose-attachment-retry:hover {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  .compose-attachment-retry svg {
+    opacity: 0.85;
+    transition: opacity 0.15s;
+  }
+
+  .compose-attachment-retry:hover svg {
+    opacity: 1;
   }
 
   .compose-attachment-remove {
@@ -1275,15 +1289,70 @@
   }
 
   .compose-attachment-alt-set {
-    color: var(--primary);
+    color: oklch(0.6 0.15 155);
   }
 
   .compose-attachment-alt-set:hover {
-    color: var(--primary);
+    color: oklch(0.6 0.15 155);
     opacity: 0.8;
   }
 
-  /* --- Alt text overlay panel ---------------------------------------------- */
+  /* --- Video play icon overlay (compose) ----------------------------------- */
+
+  .compose-attachment-play-icon {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .compose-attachment-play-icon svg {
+    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
+    opacity: 0.85;
+  }
+
+  /* --- File card (compose: audio + PDF) ----------------------------------- */
+
+  .compose-attachment-file-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 120px;
+    min-height: 100px;
+    padding: 16px 12px;
+    background-color: var(--site-nav-hover-bg);
+    border-radius: var(--media-radius, 0.5rem);
+    text-align: center;
+  }
+
+  .compose-attachment:not(:only-child) .compose-attachment-file-card {
+    min-height: 200px;
+  }
+
+  .compose-attachment-file-icon {
+    color: var(--site-text-secondary);
+  }
+
+  .compose-attachment-file-name {
+    font-size: 0.6875rem;
+    font-weight: 500;
+    color: var(--site-text-primary);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .compose-attachment-file-size {
+    font-size: 0.625rem;
+    color: var(--site-text-secondary);
+  }
+
+  /* --- Alt text overlay panel (Threads-style, covers entire dialog) ------- */
 
   .compose-alt-panel {
     position: absolute;
@@ -1292,57 +1361,1064 @@
     background-color: var(--site-elevated-bg);
     display: flex;
     flex-direction: column;
-    border-radius: 20px;
+    border-radius: 10px;
     animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
 
+  .compose-alt-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--site-divider);
+    position: relative;
+  }
+
+  @media (min-width: 700px) {
+    .compose-alt-header {
+      padding: 12px 16px;
+    }
+  }
+
+  .compose-alt-title {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    white-space: nowrap;
+  }
+
   .compose-alt-preview {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 12px 16px 0;
-    max-height: 200px;
+    padding: 20px 24px;
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
   }
 
   .compose-alt-preview-img {
     max-width: 100%;
-    max-height: 180px;
+    max-height: 320px;
     border-radius: 10px;
     object-fit: contain;
   }
 
-  .compose-alt-textarea {
-    flex: 1;
-    font-size: 0.84rem;
-    line-height: 1.65;
+  .compose-alt-input-row {
+    padding: 0 20px;
+    border-top: 1px solid var(--site-divider);
+  }
+
+  @media (min-width: 700px) {
+    .compose-alt-input-row {
+      padding: 0 24px;
+    }
+  }
+
+  .compose-alt-input {
+    font-size: 0.9rem;
+    padding: 14px 0;
     letter-spacing: 0.005em;
-    overflow-y: auto;
   }
 
-  .compose-alt-textarea::-webkit-scrollbar {
-    width: 3px;
+  .compose-alt-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px 12px;
+    border-top: 1px solid var(--site-divider);
   }
 
-  .compose-alt-textarea::-webkit-scrollbar-thumb {
-    background-color: var(--site-divider);
+  @media (min-width: 700px) {
+    .compose-alt-footer {
+      padding: 8px 16px 12px;
+    }
+  }
+
+  /* =========================================================================
+   * Media Lightbox
+   * ========================================================================= */
+
+  @keyframes lightbox-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes lightbox-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .media-lightbox {
+    padding: 0;
+    border: none;
+    background: transparent;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    outline: none;
+  }
+
+  .media-lightbox[open] {
+    animation: lightbox-fade-in 0.2s ease both;
+  }
+
+  .media-lightbox::backdrop {
+    background-color: rgba(0, 0, 0, 0.85);
+  }
+
+  .media-lightbox-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    outline: none;
+  }
+
+  .media-lightbox-img {
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain;
     border-radius: 4px;
+    animation: lightbox-scale-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .media-lightbox-close {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.15s;
+  }
+
+  .media-lightbox-close:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .media-lightbox-nav {
+    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: none;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.15s;
+  }
+
+  .media-lightbox-nav:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .media-lightbox-nav-prev {
+    left: 16px;
+  }
+
+  .media-lightbox-nav-next {
+    right: 16px;
+  }
+
+  .media-lightbox-counter {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    font-size: 0.8125rem;
+    color: rgba(255, 255, 255, 0.7);
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
+
+  @media (max-width: 640px) {
+    .media-lightbox-img {
+      max-width: 100vw;
+      max-height: 85vh;
+      border-radius: 0;
+    }
+
+    .media-lightbox-close {
+      width: 36px;
+      height: 36px;
+      top: 12px;
+      left: 12px;
+    }
+
+    .media-lightbox-nav {
+      width: 36px;
+      height: 36px;
+    }
+
+    .media-lightbox-nav-prev {
+      left: 8px;
+    }
+
+    .media-lightbox-nav-next {
+      right: 8px;
+    }
   }
 
   /* =========================================================================
-   * Site Footer
+   * Feed Media: Video, Audio, PDF
    * ========================================================================= */
 
-  .site-footer {
-    max-width: var(--site-width);
-    margin: var(--space-xl) auto 0;
-    padding: 0 var(--site-padding) var(--space-xl);
-    color: var(--site-text-secondary);
-    font-size: var(--text-sm);
+  /* --- Video play overlay (feed) ----------------------------------------- */
+
+  .media-video-wrap {
+    position: relative;
+    display: block;
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: var(--media-radius, 0.5rem);
   }
 
-  .site-footer > .site-container {
-    border-top: 0.5px solid var(--site-divider);
-    padding-top: var(--content-gap);
+  .media-video-wrap video {
+    display: block;
+    width: 100%;
+    max-height: 24rem;
+    object-fit: contain;
+    border-radius: var(--media-radius, 0.5rem);
+    background-color: black;
+  }
+
+  .media-video-play-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    transition: opacity 0.15s;
+  }
+
+  .media-video-play-overlay svg {
+    width: 48px;
+    height: 48px;
+    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
+    opacity: 0.85;
+  }
+
+  /* --- Audio card (feed) -------------------------------------------------- */
+
+  .media-audio-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background-color: var(--site-nav-hover-bg);
+    border-radius: var(--media-radius, 0.5rem);
+    margin-top: 0.75rem;
+  }
+
+  .media-audio-icon {
+    flex-shrink: 0;
+    color: var(--site-text-secondary);
+  }
+
+  .media-audio-name {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--site-text-primary);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .media-audio-player {
+    flex: 1;
+    min-width: 0;
+    height: 32px;
+  }
+
+  .media-audio-player audio {
+    width: 100%;
+    height: 32px;
+  }
+
+  /* --- PDF card (feed) ---------------------------------------------------- */
+
+  .media-pdf-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background-color: var(--site-nav-hover-bg);
+    border-radius: var(--media-radius, 0.5rem);
+    margin-top: 0.75rem;
+    text-decoration: none;
+    color: var(--site-text-primary);
+    transition:
+      background-color 0.15s,
+      border-color 0.15s;
+    border: 1px solid transparent;
+  }
+
+  .media-pdf-card:hover {
+    border-color: var(--site-divider);
+  }
+
+  .media-pdf-icon {
+    flex-shrink: 0;
+    color: var(--site-text-secondary);
+  }
+
+  .media-pdf-name {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .media-pdf-size {
+    font-size: 0.6875rem;
+    color: var(--site-text-secondary);
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  /* --- Lightbox video ----------------------------------------------------- */
+
+  .media-lightbox-video {
+    max-width: 90vw;
+    max-height: 90vh;
+    border-radius: 4px;
+    animation: lightbox-scale-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+    background-color: black;
+  }
+
+  @media (max-width: 640px) {
+    .media-lightbox-video {
+      max-width: 100vw;
+      max-height: 85vh;
+      border-radius: 0;
+    }
+  }
+
+  /* =========================================================================
+   * Site Footer
+   * ========================================================================= */
+
+  .site-footer {
+    max-width: var(--site-width);
+    margin: var(--space-xl) auto 0;
+    padding: 0 var(--site-padding) var(--space-xl);
+    color: var(--site-text-secondary);
+    font-size: var(--text-sm);
+  }
+
+  .site-footer > .site-container {
+    border-top: 0.5px solid var(--site-divider);
+    padding-top: var(--content-gap);
+  }
+
+  /* =========================================================================
+   * Tiptap Editor
+   * ========================================================================= */
+
+  .compose-tiptap-body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .compose-tiptap-body .tiptap {
+    outline: none;
+    min-height: 120px;
+    font-size: var(--text-base);
+    line-height: 1.65;
+    letter-spacing: 0.005em;
+    color: var(--site-text-primary);
+    font-family: var(--font-body);
+  }
+
+  .compose-tiptap-thoughts .tiptap {
+    min-height: 72px;
+  }
+
+  /* Placeholder */
+  .compose-tiptap-body .tiptap p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: var(--site-text-secondary);
+    opacity: 0.5;
+    pointer-events: none;
+    height: 0;
+  }
+
+  /* Tiptap prose styling */
+  .compose-tiptap-body .tiptap h1 {
+    font-family: var(--font-heading);
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 0.75em 0 0.25em;
+  }
+
+  .compose-tiptap-body .tiptap h2 {
+    font-family: var(--font-heading);
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.35;
+    margin: 0.75em 0 0.25em;
+  }
+
+  .compose-tiptap-body .tiptap h3 {
+    font-family: var(--font-heading);
+    font-size: 1.1rem;
+    font-weight: 600;
+    line-height: 1.4;
+    margin: 0.75em 0 0.25em;
+  }
+
+  .compose-tiptap-body .tiptap p {
+    margin: 0.25em 0;
+  }
+
+  .compose-tiptap-body .tiptap ul {
+    list-style-type: disc;
+    padding-left: 1.5em;
+    margin: 0.25em 0;
+  }
+
+  .compose-tiptap-body .tiptap ol {
+    list-style-type: decimal;
+    padding-left: 1.5em;
+    margin: 0.25em 0;
+  }
+
+  .compose-tiptap-body .tiptap li {
+    margin: 0.15em 0;
+  }
+
+  .compose-tiptap-body .tiptap blockquote {
+    border-left: 3px solid var(--site-divider);
+    padding-left: 1em;
+    margin: 0.5em 0;
+    color: var(--site-text-secondary);
+  }
+
+  .compose-tiptap-body .tiptap pre {
+    background: var(--site-elevated-bg);
+    border-radius: 6px;
+    padding: 0.75em 1em;
+    margin: 0.5em 0;
+    overflow-x: auto;
+    font-size: 0.85em;
+  }
+
+  .compose-tiptap-body .tiptap code {
+    background: var(--site-elevated-bg);
+    border-radius: 3px;
+    padding: 0.15em 0.3em;
+    font-size: 0.9em;
+  }
+
+  .compose-tiptap-body .tiptap pre code {
+    background: none;
+    border-radius: 0;
+    padding: 0;
+    font-size: inherit;
+  }
+
+  .compose-tiptap-body .tiptap hr {
+    border: none;
+    border-top: 1px solid var(--site-divider);
+    margin: 1em 0;
+  }
+
+  /* --- Table in editor -------------------------------------------------- */
+
+  .compose-tiptap-body .tiptap table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 0.75em 0;
+    overflow: hidden;
+  }
+
+  .compose-tiptap-body .tiptap td,
+  .compose-tiptap-body .tiptap th {
+    border: 1px solid var(--site-divider);
+    padding: 0.4em 0.6em;
+    vertical-align: top;
+    min-width: 1em;
+    position: relative;
+  }
+
+  .compose-tiptap-body .tiptap th {
+    font-weight: 600;
+    background: var(--site-elevated-bg);
+  }
+
+  .compose-tiptap-body .tiptap .selectedCell {
+    background: oklch(from var(--site-accent) l c h / 0.12);
+  }
+
+  /* --- Image figure in editor ------------------------------------------- */
+
+  .tiptap-image-figure {
+    margin: 0.75em 0;
+    position: relative;
+
+    /* Toolbar palette — soft charcoal, not pure black */
+    --_img-toolbar-bg: oklch(0.25 0.01 260 / 0.82);
+    --_img-toolbar-text: #f5f5f5;
+    --_img-toolbar-hover: oklch(1 0 0 / 0.12);
+    --_img-toolbar-active: oklch(1 0 0 / 0.22);
+    --_img-toolbar-sep: oklch(1 0 0 / 0.15);
+  }
+
+  :is(.dark, [data-theme="dark"]) .tiptap-image-figure {
+    --_img-toolbar-bg: oklch(0.32 0.01 260 / 0.88);
+  }
+
+  .tiptap-image-container {
+    position: relative;
+    border-radius: 6px;
+    border: 2px solid transparent;
+    transition: border-color 0.15s;
+  }
+
+  /* Hover hint */
+  .tiptap-image-figure:hover .tiptap-image-container {
+    border-color: var(--site-divider);
+  }
+
+  /* Selected ring */
+  .tiptap-image-figure[data-selected="true"] .tiptap-image-container {
+    border-color: var(--primary);
+  }
+
+  .tiptap-image-figure img {
+    width: 100%;
+    max-height: 500px;
+    object-fit: contain;
+    border-radius: 4px;
+    display: block;
+  }
+
+  /* Layout variants — in compact dialog, wide/full just fill the container */
+  .tiptap-image-figure[data-layout="wide"],
+  .tiptap-image-figure[data-layout="full"] {
+    width: 100%;
+  }
+
+  .tiptap-image-figure[data-layout="full"] .tiptap-image-container {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+
+  .tiptap-image-figure[data-layout="full"] img {
+    border-radius: 0;
+  }
+
+  /* Fullscreen editor — enough room for real breakout */
+  .compose-fullscreen .tiptap-image-figure[data-layout="wide"] {
+    width: 1200px;
+    max-width: 100vw;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .compose-fullscreen .tiptap-image-figure[data-layout="full"] {
+    width: 100vw;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .tiptap-image-figure[data-layout="full"] img {
+    border-radius: 0;
+  }
+
+  /* Centered toolbar — hidden until selected */
+  .tiptap-image-toolbar {
+    display: none;
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--_img-toolbar-bg);
+    backdrop-filter: blur(8px);
+    color: var(--_img-toolbar-text);
+    border-radius: 8px;
+    padding: 4px;
+    gap: 2px;
+    align-items: center;
+    z-index: 2;
+  }
+
+  .tiptap-image-figure[data-selected="true"] .tiptap-image-toolbar {
+    display: flex;
+  }
+
+  .tiptap-image-toolbar button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--_img-toolbar-text);
+    border: none;
+    cursor: pointer;
+  }
+
+  .tiptap-image-toolbar button svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+
+  .tiptap-image-toolbar button:hover {
+    background: var(--_img-toolbar-hover);
+  }
+
+  .tiptap-image-toolbar button.is-active {
+    background: var(--_img-toolbar-active);
+  }
+
+  .tiptap-toolbar-sep {
+    width: 1px;
+    height: 16px;
+    background: var(--_img-toolbar-sep);
+    flex-shrink: 0;
+  }
+
+  /* Caption bar — shown when selected, directly below image */
+  .tiptap-image-caption-bar {
+    display: none;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 0;
+    margin-top: 4px;
+  }
+
+  .tiptap-image-figure[data-selected="true"] .tiptap-image-caption-bar {
+    display: flex;
+  }
+
+  .tiptap-image-caption-bar input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 0.85rem;
+    color: var(--site-text-secondary);
+    text-align: center;
+  }
+
+  .tiptap-image-alt-btn {
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 2px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--site-divider);
+    background: transparent;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .tiptap-image-alt-btn.is-active {
+    background: var(--primary);
+    color: var(--primary-foreground);
+    border-color: transparent;
+  }
+
+  /* Static figcaption (shown when not selected) */
+  .tiptap-image-figcaption {
+    text-align: center;
+    font-size: 0.85rem;
+    color: var(--site-text-secondary);
+    margin-top: 0.4em;
+  }
+
+  .tiptap-image-figcaption:empty {
+    display: none;
+  }
+
+  .tiptap-image-figure[data-selected="true"] .tiptap-image-figcaption {
+    display: none;
+  }
+
+  .compose-tiptap-body .tiptap a {
+    color: var(--site-accent);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .compose-tiptap-body .tiptap s {
+    text-decoration: line-through;
+  }
+
+  /* MoreBreak visual node */
+  .tiptap-more-break {
+    border-top: 2px dashed var(--site-divider);
+    text-align: center;
+    padding: 4px 0;
+    margin: 0.75em 0;
+    color: var(--site-text-secondary);
+    font-size: 0.75rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    user-select: none;
+    cursor: default;
+  }
+
+  .tiptap-more-break.ProseMirror-selectednode {
+    border-color: var(--site-accent);
+    color: var(--site-accent);
+  }
+
+  /* Slash command dropdown */
+  .tiptap-slash-menu {
+    position: fixed;
+    z-index: 10000;
+    background: var(--site-elevated-bg);
+    border: 1px solid var(--site-divider);
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    padding: 4px;
+    min-width: 200px;
+    max-height: 320px;
+    overflow-y: auto;
+  }
+
+  .tiptap-slash-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--site-text-primary);
+    transition: background 0.1s;
+  }
+
+  .tiptap-slash-item:hover,
+  .tiptap-slash-item.is-selected {
+    background: var(--site-nav-hover-bg);
+  }
+
+  .tiptap-slash-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    font-size: 0.8rem;
+    color: var(--site-text-secondary);
+    flex-shrink: 0;
+  }
+
+  .tiptap-slash-item-label {
+    flex: 1;
+  }
+
+  /* Bubble menu — floating toolbar on text selection */
+  .tiptap-bubble-menu {
+    position: fixed;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px;
+    background: var(--color-foreground);
+    border-radius: 8px;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
+  }
+
+  .tiptap-bubble-menu::after {
+    content: "";
+    position: absolute;
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--color-foreground);
+  }
+
+  .tiptap-bubble-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: none;
+    background: transparent;
+    color: var(--color-background);
+    cursor: pointer;
+  }
+
+  .tiptap-bubble-btn svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+
+  .tiptap-bubble-btn:hover {
+    background: oklch(from var(--color-background) l c h / 0.15);
+  }
+
+  .tiptap-bubble-btn.is-active {
+    background: oklch(from var(--color-background) l c h / 0.22);
+  }
+
+  .tiptap-bubble-sep {
+    width: 1px;
+    height: 16px;
+    background: oklch(from var(--color-background) l c h / 0.2);
+    flex-shrink: 0;
+  }
+
+  /* Link input popup — light speech-bubble with URL field */
+  .tiptap-link-input {
+    position: fixed;
+    z-index: 10001;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 4px 4px 10px;
+    background: var(--color-background);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+  }
+
+  .tiptap-link-input::before {
+    content: "";
+    position: absolute;
+    bottom: -7px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid var(--color-border);
+  }
+
+  .tiptap-link-input::after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--color-background);
+  }
+
+  .tiptap-link-input-field {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 0.875rem;
+    min-width: 240px;
+    color: var(--color-foreground);
+  }
+
+  .tiptap-link-input-field::placeholder {
+    color: var(--color-muted-foreground);
+  }
+
+  .tiptap-link-input-confirm {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: none;
+    background: transparent;
+    color: var(--color-muted-foreground);
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .tiptap-link-input-confirm:hover {
+    background: var(--color-accent);
+    color: var(--color-foreground);
+  }
+
+  /* Link preview tooltip — dark with URL + edit/delete buttons */
+  .tiptap-link-preview {
+    position: fixed;
+    z-index: 10001;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 4px 4px 10px;
+    background: var(--color-foreground);
+    border-radius: 8px;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
+    max-width: 360px;
+  }
+
+  .tiptap-link-preview::after {
+    content: "";
+    position: absolute;
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--color-foreground);
+  }
+
+  .tiptap-link-preview-url {
+    font-size: 0.8125rem;
+    color: var(--color-background);
+    opacity: 0.7;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 220px;
+  }
+
+  .tiptap-link-preview-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: none;
+    background: transparent;
+    color: var(--color-background);
+    opacity: 0.7;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .tiptap-link-preview-btn:hover {
+    background: oklch(from var(--color-background) l c h / 0.15);
+    opacity: 1;
+  }
+
+  .tiptap-link-preview-btn svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+
+  /* Fullscreen editor dialog — enters browser top layer via showModal() */
+  .compose-fullscreen-dialog {
+    padding: 0;
+    border: none;
+    outline: none;
+    margin: 0;
+    width: 100vw;
+    max-width: 100vw;
+    height: 100dvh;
+    max-height: 100dvh;
+    background: var(--site-bg, var(--color-background, #fff));
+    overscroll-behavior: contain;
+  }
+
+  .compose-fullscreen-dialog::backdrop {
+    background: transparent;
+  }
+
+  .compose-fullscreen {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .compose-fullscreen-toolbar {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--site-divider);
+    gap: 8px;
+  }
+
+  .compose-fullscreen-content {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    justify-content: center;
+  }
+
+  .compose-fullscreen-inner {
+    width: 100%;
+    max-width: var(--site-width);
+    padding: 32px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .compose-fullscreen-title {
+    border: none;
+    outline: none;
+    background: transparent;
+    width: 100%;
+    font-family: var(--font-heading);
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: var(--site-text-primary);
+    line-height: 1.3;
+  }
+
+  .compose-fullscreen-title::placeholder {
+    color: var(--site-text-secondary);
+    opacity: 0.5;
+  }
+
+  .compose-fullscreen .compose-tiptap-body .tiptap {
+    min-height: 400px;
+  }
+
+  .compose-fullscreen-plus-menu {
+    position: relative;
+  }
+
+  .compose-fullscreen-plus-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
   }
 }