autumnnote 2.0.0 → 2.2.0

package/src/styles/autumnnote.scss

@@ -1,2866 +0,0 @@
-/**
- * autumnnote.scss — Main stylesheet for the AutumnNote editor
- * Inspired by Summernote — rewritten with cleaner, modern CSS
- */
-
-@use 'variables' as *;
-
-// =============================================================================
-// Container
-// =============================================================================
-
-.an-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  border: 1px solid $an-border;
-  border-radius: $an-radius;
-  font-family: $an-font-family;
-  font-size: $an-font-size;
-  box-sizing: border-box;
-  background: $an-bg;
-  // Prevent the container from participating in ancestor layout recalculations.
-  // This limits reflow thrashing when editing large documents.
-  contain: layout;
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  &.an-focused {
-    border-color: var(--an-focus-color, #{$an-primary});
-    // Fallback glow for browsers without color-mix() (pre-Chrome 111, Safari 15.3, Firefox 112).
-    // Uses the static $an-primary value so --an-focus-color overrides are ignored in those browsers.
-    box-shadow: 0 0 0 3px rgba($an-primary, 0.18);
-    // Modern browsers get a fully themeable glow that respects --an-focus-color.
-    @supports (color: color-mix(in srgb, red, blue)) {
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--an-focus-color, #{$an-primary}) 18%, transparent);
-    }
-  }
-
-  &.an-disabled {
-    // Hide toolbar only — read-only view has no editing controls.
-    .an-toolbar {
-      display: none;
-    }
-
-    // Allow the user to select and copy text but block actual editing.
-    // Do NOT set pointer-events:none or user-select:none on the container —
-    // that would prevent text selection inside the editable area.
-    .an-editable {
-      cursor: text;
-      user-select: text;
-      // No background change — keep the same appearance as editable mode
-      // so read-only content looks identical to the live editor.
-
-      // Block checklist checkbox interaction in read-only mode.
-      // Keep opacity:1 so disabled checkboxes are still clearly visible.
-      ul.an-checklist input[type='checkbox'] {
-        pointer-events: none;
-        cursor: default;
-        opacity: 1;
-      }
-
-      // Prevent images from being dragged out.
-      img {
-        -webkit-user-drag: none;
-      }
-
-      // Prevent video wrapper itself from being dragged, but keep pointer-events
-      // active so the video shield works and the iframe is visible/interactive.
-      .an-video-wrapper {
-        -webkit-user-drag: none;
-      }
-
-      // D-3: In read-only mode, disable the video shield so clicks reach the
-      // underlying <iframe> / <video> and users can play videos normally.
-      // The shield is only needed in edit mode to prevent accidental interaction.
-      .an-video-wrapper .an-video-shield {
-        pointer-events: none;
-      }
-    }
-  }
-
-  &.an-fullscreen {
-    position: fixed;
-    inset: 0;
-    z-index: 9990;
-    border-radius: 0;
-    border: none;
-
-    .an-editable {
-      flex: 1;
-      max-height: none !important;
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .an-container *,
-  .an-dialog-overlay *,
-  .an-slash-menu * {
-    scroll-behavior: auto !important;
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-// =============================================================================
-// Toolbar
-// =============================================================================
-
-.an-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: $an-toolbar-gap;
-  padding: $an-toolbar-pad;
-  background: $an-bg-toolbar;
-  border-bottom: 1px solid $an-border;
-  user-select: none;
-  // Round the top corners to match the container border-radius
-  border-radius: $an-radius $an-radius 0 0;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.an-btn-group {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-
-  // Icon-only toolbar buttons should not have horizontal padding so all
-  // buttons appear consistently square (min-width = height = $an-btn-height).
-  // Dialog buttons (.an-dialog-actions .an-btn) keep their padding via the
-  // lower-specificity .an-btn rule.
-  > .an-btn { padding: 0; }
-
-  // Separator between groups
-  & + .an-btn-group {
-    position: relative;
-    padding-left: $an-toolbar-gap + 4px;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 15%;
-      height: 70%;
-      width: 1px;
-      background: $an-border;
-    }
-  }
-}
-
-// Font-family (and generic) select dropdown in toolbar
-.an-select {
-  height: $an-btn-height;
-  padding: 0 24px 0 8px;
-  background: $an-bg url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 7px center;
-  background-size: 8px 5px;
-  border: 1px solid $an-border;
-  border-radius: $an-radius-sm;
-  font-family: inherit;
-  font-size: 12px;
-  color: $an-text;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  min-width: 110px;
-  max-width: 160px;
-  transition: border-color $an-transition, box-shadow $an-transition;
-
-  &:hover {
-    border-color: $an-primary;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: $an-primary;
-    box-shadow: 0 0 0 2px rgba($an-primary, 0.15);
-  }
-
-  option {
-    font-size: 13px;
-  }
-}
-
-// Narrow variant — used for short-value selects such as Line Height
-.an-select-narrow {
-  min-width: 76px;
-  max-width: 90px;
-  padding-right: 20px;
-}
-
-// Paragraph-style variant — Normal/H1-H6/Quote/Code labels
-.an-select-style {
-  min-width: 80px;
-  max-width: 92px;
-  padding-right: 20px;
-}
-
-// Table grid picker
-.an-table-picker-wrap {
-  position: relative;
-  display: inline-flex;
-}
-
-.an-table-picker-popup {
-  display: none;
-  position: fixed; // top/left set dynamically by JS — escapes overflow-clipping ancestors
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: 6px;
-  padding: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  z-index: 1100;
-  user-select: none;
-}
-
-.an-table-grid {
-  display: grid;
-  grid-template-columns: repeat(10, 18px);
-  gap: 2px;
-}
-
-.an-table-cell {
-  width: 18px;
-  height: 18px;
-  border: 1px solid $an-border;
-  border-radius: 2px;
-  cursor: pointer;
-  background: $an-bg;
-  transition: background $an-transition, border-color $an-transition;
-
-  &.active {
-    background: rgba($an-primary, 0.15);
-    border-color: $an-primary;
-  }
-}
-
-.an-table-label {
-  margin-top: 6px;
-  text-align: center;
-  font-size: 12px;
-  color: $an-muted;
-  min-height: 16px;
-}
-
-// Context menu — inline table grid panel
-.an-context-table-grid-panel {
-  padding: 6px 8px 8px;
-  border-top: 1px solid $an-border;
-}
-
-// =============================================================================
-// Color picker (text color / highlight color) toolbar widget
-// =============================================================================
-
-.an-color-picker-wrap {
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-}
-
-// Left part: icon + color strip stacked vertically
-.an-color-btn {
-  flex-direction: column !important;
-  gap: 2px !important;
-  padding: 4px 6px 3px !important;
-  height: auto !important;
-  min-height: $an-btn-height;
-
-  .an-color-strip {
-    display: block;
-    width: 100%;
-    min-width: 14px;
-    height: 3px;
-    border-radius: 1px;
-    flex-shrink: 0;
-  }
-}
-
-// Right part: small chevron arrow to open popup
-.an-color-arrow {
-  padding: 0 3px !important;
-  min-width: unset !important;
-  border-left: 1px solid transparent;
-
-  &:hover {
-    border-left-color: $an-border;
-  }
-}
-
-// Swatch popup panel
-.an-color-popup {
-  position: fixed;
-  // top / left are set dynamically by JS (getBoundingClientRect) so the popup
-  // escapes overflow:hidden / overflow:auto ancestors (toolbar scroll mode, etc.)
-  z-index: 1100;
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: 6px;
-  padding: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  min-width: 184px;
-  user-select: none;
-}
-
-.an-color-swatches {
-  display: grid;
-  grid-template-columns: repeat(8, 18px);
-  gap: 3px;
-  margin-bottom: 8px;
-}
-
-.an-color-swatch {
-  width: 18px;
-  height: 18px;
-  border-radius: 2px;
-  cursor: pointer;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  transition: transform 0.1s ease;
-  position: relative;
-
-  &:hover {
-    transform: scale(1.25);
-    z-index: 1;
-    outline: 2px solid $an-primary;
-    outline-offset: 1px;
-  }
-}
-
-.an-color-custom {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-top: 6px;
-  border-top: 1px solid $an-border;
-
-  input[type='color'] {
-    width: 28px;
-    height: 22px;
-    padding: 1px 2px;
-    border: 1px solid $an-border;
-    border-radius: 3px;
-    cursor: pointer;
-    background: none;
-    flex-shrink: 0;
-    appearance: none;
-    -webkit-appearance: none;
-
-    &::-webkit-color-swatch-wrapper { padding: 0; }
-    &::-webkit-color-swatch { border: none; border-radius: 2px; }
-
-    &:hover {
-      border-color: $an-primary;
-    }
-  }
-
-  span {
-    font-size: 11px;
-    color: $an-muted;
-    flex: 1;
-  }
-}
-
-.an-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: $an-btn-height;
-  min-width: $an-btn-height;
-  padding: $an-btn-padding;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: $an-radius-sm;
-  color: $an-text;
-  font-family: inherit;
-  font-size: 13px;
-  line-height: 1;
-  cursor: pointer;
-  transition: background $an-transition, border-color $an-transition, color $an-transition;
-  white-space: nowrap;
-  text-decoration: none;
-
-  // Make sure inline SVGs render cleanly
-  svg {
-    display: block;
-    flex-shrink: 0;
-    pointer-events: none;
-  }
-
-  &:hover {
-    background: $an-bg-btn-hover;
-    border-color: $an-border;
-    color: $an-primary;
-
-    svg {
-      stroke: $an-primary;
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid $an-primary;
-    outline-offset: 1px;
-  }
-
-  &.active {
-    background: $an-bg-btn-active;
-    border-color: $an-primary;
-    color: $an-primary-hover;
-
-    svg {
-      stroke: $an-primary-hover;
-    }
-  }
-
-  &.an-btn-primary {
-    background: $an-primary;
-    border-color: $an-primary;
-    color: #fff;
-
-    svg { stroke: #fff; }
-
-    &:hover {
-      background: $an-primary-hover;
-      border-color: $an-primary-hover;
-    }
-  }
-}
-
-// =============================================================================
-// Editable area
-// =============================================================================
-
-.an-editable {
-  position: relative; // Establishes containing block for the ::before placeholder
-  flex: 1;
-  padding: $an-editable-pad;
-  min-height: 0;
-  outline: none;
-
-
-  line-height: $an-line-height;
-  color: $an-text;
-  overflow-y: auto;
-  word-break: break-word;
-
-  // Placeholder — shown only when the editable is empty and not focused.
-  // Uses position:absolute so it never shifts the cursor or block content,
-  // and requires position:relative on this element (added above) so it is
-  // scoped to the editable area and never overlaps the toolbar.
-  &.an-placeholder:not(:focus)::before {
-    content: attr(data-placeholder);
-    color: $an-muted;
-    pointer-events: none;
-    position: absolute;
-    top: 12px;   // matches top padding from $an-editable-pad (12px 14px)
-    left: 14px;  // matches left padding
-    right: 14px;
-  }
-
-  // Content styles
-  p       { margin: 0 0 0.75em; }
-  h1, h2, h3, h4, h5, h6 { margin: 0.5em 0; line-height: 1.3; }
-  h1 { font-size: 2em; }
-  h2 { font-size: 1.5em; }
-  h3 { font-size: 1.25em; }
-  h4 { font-size: 1.1em; }
-  h5 { font-size: 1em; }
-  h6 { font-size: 0.875em; }
-  ul, ol  { margin: 0 0 0.75em 0; padding-left: 1.5em; list-style-position: inside; }
-  li      { margin-bottom: 0.25em; }
-
-  // Loose lists (markdown paste wraps item text in <p>): keep the list marker
-  // on the same line as the first paragraph (list-style-position: inside puts
-  // it in the inline flow), and use tighter margins than standalone <p>.
-  li > p {
-    margin: 0 0 0.5em;
-    &:first-child { display: inline; }
-    &:last-child  { margin-bottom: 0; }
-  }
-  li:has(> p) { margin-bottom: 0.6em; }
-  blockquote {
-    margin: 0.5em 0 0.5em 1em;
-    padding: 0.5em 1em;
-    border-left: 4px solid $an-border;
-    color: $an-muted;
-  }
-  pre, code {
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 0.9em;
-    background: $an-bg-toolbar;
-    border-radius: $an-radius-sm;
-  }
-  pre     { padding: 0.75em 1em; overflow-x: auto; }
-  code    { padding: 0.1em 0.3em; }
-  // Inside <pre> the wrapper already paints the background — reset the inner
-  // <code> so a plain (non-Prism) code fence isn't double-tinted.
-  pre > code { background: transparent; padding: 0; }
-
-  // Prism-highlighted blocks — <pre> gets class="language-*" mirrored from <code>
-  // Set dark background here as fallback for before Prism CSS loads from CDN.
-  pre[class*='language-'] {
-    background: #2d2d2d;
-    color: #ccc;
-    border-radius: $an-radius-sm;
-
-    > code[class*='language-'] {
-      background: transparent;
-      color: inherit;
-      padding: 0;
-    }
-  }
-
-  // Code block line numbers (toggled via CodeTooltip)
-  .an-code-line-numbers {
-    position: relative;
-    padding-left: 3.5em !important;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 3em;
-      background: rgba(0, 0, 0, 0.04);
-      border-right: 1px solid rgba(0, 0, 0, 0.1);
-      pointer-events: none;
-      z-index: 0;
-    }
-  }
-
-  a       { color: $an-primary; }
-  hr      { border: none; border-top: 2px solid $an-border; margin: 1em 0; }
-  img.an-image {
-    max-width: 100%;
-    height: auto;
-    display: inline-block;
-  }
-
-  .an-video-wrapper {
-    position: relative;
-    display: block;
-    max-width: 100%;
-    margin: 4px 0;
-
-    iframe,
-    video {
-      display: block;
-      max-width: 100%;
-    }
-
-    // Transparent overlay that intercepts mouse events on <iframe> embeds.
-    // iframes swallow all pointer events and prevent them from bubbling to the
-    // editable area; the shield sits on top so clicks/contextmenu bubble normally.
-    .an-video-shield {
-      position: absolute;
-      inset: 0;
-      z-index: 2;
-      cursor: default;
-      pointer-events: all; // Explicitly block pointer events reaching the iframe
-    }
-  }
-
-  // Ensure video shield stays effective even when a video copy moves outside
-  // .an-editable temporarily (e.g. native drag-and-drop).
-  // This global rule mirrors the scoped one above.
-  @at-root .an-video-wrapper .an-video-shield {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-    cursor: default;
-    pointer-events: all;
-  }
-
-  // Table styles — target both classed and unclassed tables
-  table, .an-table {
-    border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
-    margin: 0.75em 0;
-
-    td, th {
-      border: 1px solid $an-border;
-      padding: 6px 10px;
-      min-width: 40px;
-      vertical-align: top;
-      overflow-wrap: break-word;
-      word-break: break-word;
-    }
-
-    th {
-      background: $an-bg-toolbar;
-      font-weight: 600;
-
-      // Sort indicator — shows the active sorted column and direction
-      &.an-sort-asc::after,
-      &.an-sort-desc::after {
-        display: inline-block;
-        margin-left: 6px;
-        font-size: 0.7em;
-        opacity: 0.6;
-      }
-      &.an-sort-asc::after { content: '\25B2'; }
-      &.an-sort-desc::after { content: '\25BC'; }
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Link tooltip
-// ---------------------------------------------------------------------------
-
-.an-link-tooltip {
-  position: fixed;
-  z-index: 1300;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  height: 30px;
-  padding: 0 6px;
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: $an-radius-sm;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
-  white-space: nowrap;
-  pointer-events: all;
-
-  // URL preview label
-  .an-link-tooltip-url {
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 12px;
-    color: $an-primary;
-    cursor: default;
-    padding: 0 4px;
-  }
-
-  // Vertical divider
-  .an-link-tooltip-sep {
-    width: 1px;
-    height: 18px;
-    background: $an-border;
-    flex-shrink: 0;
-    margin: 0 2px;
-  }
-}
-
-.an-link-tooltip-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: $an-radius-sm;
-  background: transparent;
-  color: $an-muted;
-  cursor: pointer;
-  flex-shrink: 0;
-
-  svg { stroke: currentColor; display: block; }
-
-  &:hover {
-    background: $an-bg-btn-hover;
-    color: $an-text;
-  }
-
-  &:active,
-  &.an-link-tooltip-btn--copied {
-    background: $an-bg-btn-active;
-    color: $an-primary;
-  }
-
-  // Danger variant — used for Delete actions in image/video tooltips
-  &.an-link-tooltip-btn--danger {
-    color: #ef4444;
-
-    svg { stroke: #ef4444; }
-
-    &:hover {
-      background: rgba(#ef4444, 0.08);
-      color: #dc2626;
-      svg { stroke: #dc2626; }
-    }
-  }
-}
-
-// Shared modifier classes for image and video tooltips
-// (re-use all .an-link-tooltip styles, only override the label colour)
-.an-image-tooltip .an-link-tooltip-url {
-  color: $an-text;
-  font-weight: 500;
-}
-
-.an-video-tooltip .an-link-tooltip-url {
-  color: #7c3aed; // violet to match video accent
-  font-weight: 500;
-}
-
-.an-table-tooltip .an-link-tooltip-url {
-  color: #0369a1; // sky blue for table
-  font-weight: 500;
-}
-
-.an-code-tooltip .an-link-tooltip-url {
-  color: #059669; // emerald green for code
-  font-weight: 500;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  font-size: 11px;
-  letter-spacing: 0.02em;
-}
-
-// Color-strip variant for the cell shade button (mirrors .an-bubble-btn--color)
-.an-link-tooltip-btn--shade {
-  flex-direction: column;
-  gap: 1px;
-  padding: 4px 0 3px;
-  height: auto;
-
-  .an-bubble-btn-svg {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 0;
-    svg { display: block; }
-  }
-
-  .an-link-tooltip-color-strip {
-    display: block;
-    width: 13px;
-    height: 3px;
-    border-radius: 1px;
-    pointer-events: none;
-    background: transparent;
-  }
-}
-
-// Active state for toggle buttons in tooltips (e.g. Select Cells)
-.an-link-tooltip-btn--active {
-  background: rgba(#3b82f6, 0.12) !important;
-  color: #3b82f6 !important;
-  svg { stroke: #3b82f6; }
-}
-
-// Cells highlighted when select mode is active
-.an-cell-selected {
-  background-color: rgba(#3b82f6, 0.18) !important;
-  outline: 2px solid #3b82f6;
-  outline-offset: -2px;
-}
-
-// Cursor hint for all cells when select mode is on
-.an-table-select-mode td,
-.an-table-select-mode th {
-  cursor: cell;
-}
-
-// Size popover (column width / row height)
-.an-size-popover {
-  position: fixed;
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: 8px;
-  padding: 12px 14px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  z-index: 1200;
-  min-width: 200px;
-
-  .an-size-popover-title {
-    font-size: 12px;
-    font-weight: 600;
-    color: $an-text;
-    margin-bottom: 10px;
-  }
-
-  .an-size-popover-body {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-bottom: 12px;
-  }
-
-  .an-size-input {
-    width: 80px;
-    height: 28px;
-    padding: 0 8px;
-    border: 1px solid $an-border;
-    border-radius: $an-radius-sm;
-    font-size: 13px;
-    font-family: inherit;
-    color: $an-text;
-    outline: none;
-
-    &:focus {
-      border-color: $an-primary;
-      box-shadow: 0 0 0 2px rgba($an-primary, 0.15);
-    }
-  }
-
-  .an-size-unit {
-    font-size: 12px;
-    color: $an-muted;
-  }
-
-  .an-size-popover-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 6px;
-  }
-}
-
-// =============================================================================
-// Cell shade popover
-
-.an-cell-shade-popover {
-  position: fixed;
-  z-index: 1200;
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: 8px;
-  padding: 10px 10px 6px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-width: 166px;
-
-  .an-size-popover-title {
-    font-size: 11px;
-    font-weight: 600;
-    color: $an-muted;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 8px;
-  }
-
-  .an-shade-no-color {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 8px;
-    font-size: 12px;
-    color: $an-muted;
-    background: transparent;
-    border: 1px solid $an-border;
-    border-radius: $an-radius-sm;
-    cursor: pointer;
-    font-family: inherit;
-
-    &:hover {
-      background: $an-bg-btn-hover;
-      color: $an-text;
-    }
-  }
-
-  .an-shade-color-input {
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    border: 1px solid $an-border;
-    border-radius: $an-radius-sm;
-    cursor: pointer;
-    background: transparent;
-  }
-}
-
-// =============================================================================
-// Codeview textarea
-// =============================================================================
-
-.an-codeview {
-  flex: 1;
-  width: 100%;
-  min-height: 200px;
-  padding: $an-editable-pad;
-  border: none;
-  outline: none;
-  resize: vertical;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  background: #1e1e2e;
-  color: #cdd6f4;
-}
-
-// =============================================================================
-// Statusbar
-// =============================================================================
-
-.an-statusbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  height: $an-statusbar-h;
-  padding: 0 8px;
-  background: $an-statusbar-bg;
-  border-top: 1px solid $an-border;
-  font-size: 11px;
-  color: $an-muted;
-  user-select: none;
-  // Round the bottom corners to match the container border-radius
-  border-radius: 0 0 $an-radius $an-radius;
-}
-
-// When there is no statusbar, the editable area is the last child — round its bottom corners
-.an-container > .an-editable:last-child {
-  border-radius: 0 0 $an-radius $an-radius;
-}
-
-.an-status-info {
-  display: flex;
-  gap: 12px;
-}
-
-.an-resize-handle {
-  width: 14px;
-  height: 14px;
-  cursor: ns-resize;
-  background: repeating-linear-gradient(
-    -45deg,
-    $an-border,
-    $an-border 1px,
-    transparent 1px,
-    transparent 3px
-  );
-  border-radius: 2px;
-  flex-shrink: 0;
-
-  &:hover {
-    opacity: 0.7;
-  }
-}
-
-// =============================================================================
-// Dialogs
-// =============================================================================
-
-.an-dialog-overlay {
-  display: none; // toggled via JS
-  position: fixed;
-  inset: 0;
-  z-index: $an-dialog-z;
-  background: $an-dialog-bg;
-  align-items: center;
-  justify-content: center;
-}
-
-.an-dialog-box {
-  background: $an-bg;
-  border-radius: $an-dialog-radius;
-  padding: 24px;
-  width: min($an-dialog-width, 95vw);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.an-dialog-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 4px;
-}
-
-.an-dialog-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  flex-shrink: 0;
-  border-radius: 10px;
-  background: rgba($an-primary, 0.1);
-  color: $an-primary;
-
-  svg { display: block; stroke: currentColor; }
-}
-
-.an-dialog-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: $an-text;
-}
-
-.an-dialog-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 6px;
-}
-
-.an-dialog-hint {
-  margin: -4px 0 0;
-  font-size: 12px;
-  color: $an-muted;
-  min-height: 16px;
-}
-
-.an-align-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 10px;
-
-  input[type='radio'] { accent-color: $an-primary; cursor: pointer; }
-
-  .an-align-label {
-    font-size: 13px;
-    cursor: pointer;
-    user-select: none;
-  }
-}
-
-.an-label {
-  display: block;
-  font-size: 13px;
-  font-weight: 500;
-  color: $an-text;
-  margin-bottom: 2px;
-
-  &.an-label-inline {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: normal;
-    cursor: pointer;
-  }
-}
-
-// =============================================================================
-// Find & Replace — floating panel
-// =============================================================================
-
-.an-fr-dialog {
-  // Override centered-modal defaults: floating panel, no backdrop
-  background: transparent;
-  pointer-events: none;
-  align-items: flex-start;
-  justify-content: flex-end;
-  padding: 56px 16px 0 0;
-
-  .an-fr-box {
-    pointer-events: auto;
-    width: 360px;
-    padding: 14px 16px 16px;
-    gap: 8px;
-  }
-}
-
-.an-fr-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 2px;
-
-  .an-dialog-title { margin: 0; font-size: 14px; }
-}
-
-// Compact search bar: input + toggle buttons + counter in one row
-.an-fr-search-bar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  .an-fr-input {
-    flex: 1;
-    min-width: 0;
-    padding: 6px 8px;
-    font-size: 13px;
-  }
-}
-
-// Replace row
-.an-fr-replace-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-
-  .an-fr-input {
-    flex: 1;
-    min-width: 0;
-    padding: 6px 8px;
-    font-size: 13px;
-  }
-
-  .an-fr-replace-btn {
-    flex-shrink: 0;
-    padding: 5px 10px;
-    font-size: 12px;
-    white-space: nowrap;
-  }
-}
-
-// Icon buttons (Aa, ↑, ↓)
-.an-fr-icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  font-size: 12px;
-  font-weight: 600;
-  font-family: inherit;
-  border: 1px solid transparent;
-  border-radius: $an-radius-sm;
-  background: transparent;
-  color: $an-muted;
-  cursor: pointer;
-
-  svg { display: block; stroke: currentColor; }
-
-  &:hover {
-    background: $an-bg-btn-hover;
-    color: $an-text;
-    border-color: $an-border;
-  }
-
-  &.an-fr-icon-btn--active {
-    background: rgba($an-primary, 0.1);
-    color: $an-primary;
-    border-color: rgba($an-primary, 0.3);
-  }
-}
-
-.an-fr-counter {
-  font-size: 11px;
-  color: $an-muted;
-  white-space: nowrap;
-  min-width: 36px;
-  text-align: right;
-  flex-shrink: 0;
-}
-
-// =============================================================================
-
-.an-input {
-  width: 100%;
-  padding: 7px 10px;
-  border: 1px solid $an-border;
-  border-radius: $an-radius-sm;
-  font-family: inherit;
-  font-size: $an-font-size;
-  color: $an-text;
-  background: $an-bg;
-  outline: none;
-  transition: border-color $an-transition, box-shadow $an-transition;
-
-  &:focus {
-    border-color: $an-primary;
-    box-shadow: 0 0 0 3px rgba($an-primary, 0.15);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Context menu
-// ---------------------------------------------------------------------------
-
-.an-contextmenu {
-  position: fixed;
-  z-index: 10050;
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: 8px;
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
-  min-width: 180px;
-  padding: 5px 4px;
-  display: none;
-  user-select: none;
-}
-
-.an-context-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  text-align: left;
-  padding: 7px 14px;
-  background: transparent;
-  border: none;
-  border-radius: 5px;
-  font-size: 13px;
-  color: $an-text;
-  cursor: pointer;
-  transition: background 0.12s, color 0.12s;
-  line-height: 1.4;
-
-  &:hover {
-    background: $an-primary;
-    color: #fff;
-
-    .an-context-icon svg {
-      stroke: #fff;
-    }
-
-    .an-context-chevron svg {
-      stroke: #fff;
-    }
-  }
-
-  &:disabled {
-    opacity: 0.38;
-    cursor: default;
-    pointer-events: none;
-  }
-}
-
-// Submenu entry — chevron on the right
-.an-context-submenu {
-  .an-context-chevron {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    color: $an-muted;
-    flex-shrink: 0;
-
-    svg { display: block; }
-  }
-}
-
-// Back-navigation header button
-.an-context-back {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  text-align: left;
-  padding: 6px 14px 8px;
-  background: transparent;
-  border: none;
-  border-bottom: 1px solid $an-border;
-  border-radius: 5px 5px 0 0;
-  font-size: 12px;
-  font-weight: 600;
-  color: $an-muted;
-  cursor: pointer;
-  margin-bottom: 3px;
-  transition: background 0.12s, color 0.12s;
-
-  .an-context-icon svg { stroke: $an-muted; }
-
-  &:hover {
-    background: $an-bg-btn-hover;
-    color: $an-text;
-    .an-context-icon svg { stroke: $an-text; }
-  }
-}
-
-.an-context-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 16px;
-  color: $an-muted;
-  transition: color 0.12s;
-
-  svg {
-    display: block;
-    stroke: currentColor;
-  }
-}
-
-.an-context-label {
-  flex: 1;
-}
-
-.an-context-sep {
-  height: 1px;
-  margin: 5px 10px;
-  background: $an-border;
-}
-
-// Color-strip variant — SVG stacked above a thin color bar (matches toolbar)
-.an-context-icon--color {
-  flex-direction: column;
-  gap: 2px;
-  width: 16px;
-  align-items: center;
-
-  .an-context-icon-svg {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 0;
-  }
-}
-
-.an-context-color-strip {
-  display: block;
-  width: 100%;
-  height: 3px;
-  border-radius: 1px;
-  flex-shrink: 0;
-}
-
-// Color palette inside context menu
-.an-context-color-palette {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 3px;
-  padding: 6px 12px 2px;
-}
-
-.an-context-color-swatch {
-  width: 15px;
-  height: 15px;
-  border-radius: 3px;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  cursor: pointer;
-  flex-shrink: 0;
-  position: relative;
-  transition: transform 0.1s;
-
-  &:hover {
-    transform: scale(1.28);
-    z-index: 1;
-    border-color: rgba(0, 0, 0, 0.4);
-  }
-}
-
-.an-context-color-none {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff !important;
-  color: #999;
-
-  svg { display: block; }
-
-  &:hover { color: #333; }
-}
-
-.an-context-color-custom {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 12px 8px;
-  font-size: 12px;
-  color: $an-muted;
-  cursor: pointer;
-
-  input[type='color'] {
-    width: 18px;
-    height: 18px;
-    padding: 0;
-    border: 1px solid $an-border;
-    border-radius: 3px;
-    cursor: pointer;
-    background: transparent;
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  span { flex: 1; }
-  &:hover span { color: $an-text; }
-}
-
-// ---------------------------------------------------------------------------
-// Image resize overlay
-// ---------------------------------------------------------------------------
-
-.an-image-resizer {
-  position: absolute;
-  z-index: 10000;
-  box-sizing: border-box;
-  border: 2px solid $an-primary;
-  pointer-events: none;
-
-  .an-resize-handle {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    background: $an-primary;
-    border: 1px solid #fff;
-    border-radius: 1px;
-    box-sizing: border-box;
-    pointer-events: all;
-  }
-
-  // Corners
-  .an-resize-nw { top: -4px;             left: -4px;             cursor: nw-resize; }
-  .an-resize-ne { top: -4px;             right: -4px;            cursor: ne-resize; }
-  .an-resize-se { bottom: -4px;          right: -4px;            cursor: se-resize; }
-  .an-resize-sw { bottom: -4px;          left: -4px;             cursor: sw-resize; }
-
-  // Edge midpoints
-  .an-resize-n  { top: -4px;             left: calc(50% - 4px);  cursor: n-resize;  }
-  .an-resize-e  { top: calc(50% - 4px);  right: -4px;            cursor: e-resize;  }
-  .an-resize-s  { bottom: -4px;          left: calc(50% - 4px);  cursor: s-resize;  }
-  .an-resize-w  { top: calc(50% - 4px);  left: -4px;             cursor: w-resize;  }
-}
-
-// ---------------------------------------------------------------------------
-// Image crop overlay
-// ---------------------------------------------------------------------------
-
-// The scrim and crop box are appended to <body> and positioned fixed, so they
-// live outside .an-container. All styles are standalone (no SCSS nesting).
-
-.an-crop-scrim {
-  // Inline styles handle position/z-index/background for performance;
-  // clip-path is updated by JS every frame so we only declare the transition.
-  transition: clip-path 0s; // disable transition — updated synchronously on drag
-}
-
-.an-crop-box {
-  // Core layout & interaction via inline styles in JS (position changes every drag frame).
-  // Only declare the animated ring so it stays in sync with $an-primary.
-  outline: none !important;
-
-  // Subtle inner shadow that frames the "live" area
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45),
-              inset 0 0 0 1px rgba(255, 255, 255, 0.25);
-}
-
-.an-crop-handle {
-  // Inline styles handle size/position; declare hover highlight only.
-  &:hover, &:active {
-    background: #74affa !important; // $an-primary lightened ~14%
-  }
-}
-
-.an-crop-toolbar {
-  // Inline styles handle position; add a subtle entrance animation.
-  animation: an-crop-toolbar-in 0.12s ease;
-}
-
-@keyframes an-crop-toolbar-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-// Hide canvas-based crop overlay when printing
-@media print {
-  .an-crop-scrim,
-  .an-crop-box,
-  .an-crop-toolbar {
-    display: none !important;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Video resize overlay
-// ---------------------------------------------------------------------------
-
-$an-video-accent: #8b5cf6; // violet-500
-
-.an-video-resizer {
-  position: absolute;
-  z-index: 10000;
-  box-sizing: border-box;
-  border: 2px solid $an-video-accent;
-  pointer-events: none;
-
-  .an-resize-handle {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    background: $an-video-accent;
-    border: 1px solid #fff;
-    border-radius: 1px;
-    box-sizing: border-box;
-    pointer-events: all;
-  }
-
-  // Corners
-  .an-resize-nw { top: -4px;             left: -4px;             cursor: nw-resize; }
-  .an-resize-ne { top: -4px;             right: -4px;            cursor: ne-resize; }
-  .an-resize-se { bottom: -4px;          right: -4px;            cursor: se-resize; }
-  .an-resize-sw { bottom: -4px;          left: -4px;             cursor: sw-resize; }
-
-  // Edge midpoints
-  .an-resize-n  { top: -4px;             left: calc(50% - 4px);  cursor: n-resize;  }
-  .an-resize-e  { top: calc(50% - 4px);  right: -4px;            cursor: e-resize;  }
-  .an-resize-s  { bottom: -4px;          left: calc(50% - 4px);  cursor: s-resize;  }
-  .an-resize-w  { top: calc(50% - 4px);  left: -4px;             cursor: w-resize;  }
-}
-
-// .an-video-selected is applied by VideoResizer for JS state tracking.
-// Visual selection is handled entirely by the .an-video-resizer overlay,
-// so no CSS outline is needed here (two visible frames would appear otherwise).
-
-// ---------------------------------------------------------------------------
-// Icon dialog
-// ---------------------------------------------------------------------------
-
-// Wider box override
-.an-icon-box {
-  width: min(596px, 95vw);
-  gap: 0;
-  padding: 20px;
-}
-
-// Title row with close button
-.an-icon-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 14px;
-
-  .an-dialog-title {
-    margin: 0;
-  }
-}
-
-// Icon + title grouped together (used in emoji/icon/find dialogs)
-.an-dialog-title-group {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-// Small icon variant for dialogs with title-row layout
-.an-dialog-icon--sm {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: rgba($an-primary, 0.1);
-  color: $an-primary;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  svg { display: block; stroke: currentColor; }
-}
-
-.an-icon-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  font-size: 18px;
-  line-height: 1;
-  background: none;
-  border: none;
-  border-radius: $an-radius-sm;
-  cursor: pointer;
-  color: $an-muted;
-  flex-shrink: 0;
-
-  &:hover {
-    background: $an-bg-btn-hover;
-    color: $an-text;
-  }
-}
-
-// Search
-.an-icon-search {
-  width: 100%;
-  margin-bottom: 10px;
-  box-sizing: border-box;
-}
-
-// Category tabs
-.an-icon-cats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 10px;
-}
-
-.an-icon-cat {
-  height: 26px;
-  padding: 0 10px;
-  font-size: 12px;
-  font-family: $an-font-family;
-  background: none;
-  border: 1px solid $an-border;
-  border-radius: 13px;
-  cursor: pointer;
-  color: $an-muted;
-  white-space: nowrap;
-  transition: background $an-transition, color $an-transition, border-color $an-transition;
-
-  &:hover {
-    background: $an-bg-btn-hover;
-    color: $an-text;
-  }
-
-  &.active {
-    background: $an-primary;
-    border-color: $an-primary;
-    color: #fff;
-  }
-}
-
-// Icon grid
-.an-icon-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 56px);
-  gap: 3px;
-  height: 256px;
-  overflow-y: auto;
-  margin-bottom: 10px;
-  padding: 4px;
-  border: 1px solid $an-border;
-  border-radius: $an-radius;
-  background: $an-bg;
-  scrollbar-width: thin;
-  scrollbar-color: $an-border transparent;
-
-  &::-webkit-scrollbar       { width: 6px; }
-  &::-webkit-scrollbar-track { background: transparent; }
-  &::-webkit-scrollbar-thumb { background: $an-border; border-radius: 3px; }
-}
-
-.an-icon-cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
-  width: 56px;
-  height: 52px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: $an-radius-sm;
-  background: none;
-  cursor: pointer;
-  font-family: $an-font-family;
-  font-size: 10px;
-  color: $an-muted;
-  transition: background $an-transition, border-color $an-transition;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  i {
-    font-size: 17px;
-    color: $an-text;
-    line-height: 1;
-    pointer-events: none;
-  }
-
-  span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 52px;
-    pointer-events: none;
-  }
-
-  &:hover {
-    background: $an-bg-btn-hover;
-    border-color: $an-border;
-  }
-
-  &.active {
-    background: rgba($an-primary, 0.1);
-    border-color: $an-primary;
-    color: $an-primary;
-
-    i { color: $an-primary; }
-  }
-}
-
-// Empty state
-.an-icon-empty {
-  grid-column: 1 / -1;
-  padding: 24px 0;
-  text-align: center;
-  color: $an-muted;
-  font-size: 13px;
-}
-
-// Options row
-.an-icon-options {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px 10px;
-  margin-bottom: 10px;
-
-  .an-label {
-    margin: 0;
-    font-size: 12px;
-    white-space: nowrap;
-  }
-}
-
-.an-icon-option-select {
-  height: $an-btn-height;
-  padding: 0 6px;
-  font-size: 12px;
-  width: auto;
-}
-
-.an-icon-color {
-  width: 32px;
-  height: $an-btn-height;
-  padding: 2px;
-  border: 1px solid $an-border;
-  border-radius: $an-radius-sm;
-  cursor: pointer;
-  background: none;
-}
-
-.an-icon-use-color {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  margin: 0;
-  cursor: pointer;
-
-  input[type='checkbox'] {
-    cursor: pointer;
-  }
-}
-
-// Preview
-.an-icon-preview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 72px;
-  margin-bottom: 14px;
-  padding: 10px 12px;
-  border: 1px solid $an-border;
-  border-radius: $an-radius;
-  background: $an-bg-toolbar;
-
-  i {
-    line-height: 1;
-  }
-
-  .an-icon-preview-hint {
-    font-size: 12px;
-    color: $an-muted;
-  }
-}
-
-.an-icon-preview-name {
-  font-size: 12px;
-  color: $an-muted;
-  font-family: monospace;
-}
-
-// ---------------------------------------------------------------------------
-// Emoji dialog
-// ---------------------------------------------------------------------------
-
-.an-emoji-box {
-  width: min(520px, 95vw);
-  gap: 0;
-  padding: 20px;
-}
-
-.an-emoji-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 42px);
-  gap: 2px;
-  height: 288px;
-  overflow-y: auto;
-  margin-bottom: 10px;
-  padding: 4px;
-  border: 1px solid $an-border;
-  border-radius: $an-radius;
-  scrollbar-width: thin;
-  scrollbar-color: $an-border transparent;
-
-  &::-webkit-scrollbar { width: 6px; }
-  &::-webkit-scrollbar-track { background: transparent; }
-  &::-webkit-scrollbar-thumb { background: $an-border; border-radius: 3px; }
-}
-
-.an-emoji-cell {
-  width: 42px;
-  height: 42px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 22px;
-  line-height: 1;
-  border: 1px solid transparent;
-  border-radius: $an-radius-sm;
-  background: none;
-  cursor: pointer;
-  transition: background $an-transition, border-color $an-transition;
-
-  &:hover {
-    background: $an-bg-btn-hover;
-    border-color: $an-border;
-  }
-
-  &:active {
-    background: $an-bg-btn-active;
-  }
-}
-
-// =============================================================================
-// Sticky toolbar
-// =============================================================================
-
-.an-sticky-toolbar {
-  overflow: visible;
-
-  .an-toolbar {
-    position: sticky;
-    top: var(--an-sticky-top, 0px);
-    z-index: 100;
-    border-radius: $an-radius $an-radius 0 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
-  }
-}
-
-// =============================================================================
-// Image caption — figure / figcaption
-// =============================================================================
-
-.an-editable {
-  figure.an-figure {
-    display: inline-block;
-    max-width: 100%;
-    margin: 0.75em 0;
-    text-align: center;
-
-    img {
-      display: block;
-      max-width: 100%;
-      margin: 0 auto; // Centers img when figure uses fit-content or explicit width
-    }
-  }
-
-  figcaption.an-figcaption {
-    font-size: 0.85em;
-    font-style: italic;
-    color: $an-muted;
-    padding: 4px 0 2px;
-    text-align: center;
-    line-height: 1.4;
-    min-width: 60px;
-    outline: none;
-
-    &:focus {
-      background: rgba($an-primary, 0.06);
-      border-radius: 2px;
-    }
-  }
-}
-
-// =============================================================================
-// Keyboard shortcuts dialog
-// =============================================================================
-
-.an-shortcuts-box {
-  width: min(480px, 95vw);
-  max-height: 80vh;
-  overflow-y: auto;
-}
-
-.an-shortcuts-cat {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: $an-muted;
-  padding: 8px 0 4px;
-  border-bottom: 1px solid $an-border;
-  margin-bottom: 2px;
-
-  & + .an-shortcuts-table + & {
-    margin-top: 10px;
-  }
-}
-
-.an-shortcuts-table {
-  display: flex;
-  flex-direction: column;
-}
-
-.an-shortcuts-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 5px 4px;
-  border-radius: $an-radius-sm;
-
-  &:hover { background: $an-bg-btn-hover; }
-}
-
-.an-shortcuts-key {
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  font-size: 12px;
-  color: $an-text;
-  background: $an-bg-toolbar;
-  border: 1px solid $an-border;
-  border-bottom-width: 2px;
-  border-radius: $an-radius-sm;
-  padding: 2px 8px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.an-shortcuts-action {
-  font-size: 13px;
-  color: $an-text;
-  flex: 1;
-  padding-left: 14px;
-}
-
-// =============================================================================
-// Code block language selector (inside CodeTooltip)
-// =============================================================================
-
-.an-code-lang-select {
-  height: 22px;
-  padding: 0 20px 0 6px;
-  border: 1px solid $an-border;
-  border-radius: $an-radius-sm;
-  font-family: inherit;
-  font-size: 11px;
-  color: $an-text;
-  background: $an-bg url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 5px center;
-  background-size: 6px 4px;
-  appearance: none;
-  -webkit-appearance: none;
-  cursor: pointer;
-
-  &:focus { outline: none; border-color: $an-primary; }
-  &:hover { border-color: $an-primary; }
-}
-
-// =============================================================================
-// Dark theme — apply via options: { theme: 'dark' }
-// =============================================================================
-
-.an-theme-dark {
-  border-color: #3f3f5f;
-  background: #1e1e2e;
-  color: #cdd6f4;
-
-  &.an-focused {
-    border-color: #89b4fa;
-    box-shadow: 0 0 0 3px rgba(#89b4fa, 0.2);
-  }
-
-  .an-toolbar {
-    background: #181825;
-    border-color: #3f3f5f;
-  }
-
-  .an-btn {
-    color: #cdd6f4;
-
-    &:hover {
-      background: #2a2a3e;
-      border-color: #3f3f5f;
-      color: #cdd6f4;
-
-      svg { stroke: #cdd6f4; }
-    }
-
-    &.active {
-      background: #1a3a5c;
-      border-color: #89b4fa;
-      color: #89b4fa;
-
-      svg { stroke: #89b4fa; }
-    }
-
-    &.an-btn-primary {
-      background: #3b5bdb;
-      border-color: #3b5bdb;
-      color: #fff;
-    }
-  }
-
-  .an-select {
-    background-color: #1e1e2e;
-    border-color: #3f3f5f;
-    color: #cdd6f4;
-
-    &:hover, &:focus { border-color: #89b4fa; }
-  }
-
-  .an-editable {
-    background: #1e1e2e;
-    color: #cdd6f4;
-
-    a { color: #89b4fa; }
-
-    blockquote {
-      border-color: #3f3f5f;
-      color: #a6adc8;
-    }
-
-    pre:not([class*='language-']),
-    code:not([class*='language-']) {
-      background: #313244;
-      color: #cdd6f4;
-    }
-
-    pre:not([class*='language-']) > code { background: transparent; }
-
-    .an-code-line-numbers::before {
-      background: rgba(255, 255, 255, 0.05);
-      border-right-color: rgba(255, 255, 255, 0.1);
-    }
-
-    hr { border-color: #3f3f5f; }
-
-    table, .an-table {
-      td, th { border-color: #3f3f5f; }
-      th { background: #313244; }
-    }
-
-    &.an-placeholder::before { color: #6c7086; }
-
-    figcaption.an-figcaption { color: #6c7086; }
-  }
-
-  .an-statusbar {
-    background: #181825;
-    border-color: #3f3f5f;
-    color: #6c7086;
-  }
-
-  .an-link-tooltip,
-  .an-contextmenu {
-    background: #24273a;
-    border-color: #3f3f5f;
-    color: #cdd6f4;
-  }
-
-  .an-link-tooltip-url { color: #89b4fa; }
-
-  .an-link-tooltip-btn {
-    color: #a6adc8;
-
-    &:hover {
-      background: #2a2a3e;
-      color: #cdd6f4;
-    }
-  }
-
-  .an-dialog-overlay { background: rgba(0, 0, 0, 0.65); }
-
-  .an-dialog-box {
-    background: #24273a;
-    color: #cdd6f4;
-    border: 1px solid #3f3f5f;
-  }
-
-  .an-dialog-title { color: #cdd6f4; }
-
-  .an-dialog-icon,
-  .an-dialog-icon--sm {
-    background: rgba(#818cf8, 0.15);
-    color: #818cf8;
-  }
-
-  .an-fr-icon-btn {
-    color: #a6adc8;
-    &:hover { background: #313244; color: #cdd6f4; border-color: #45475a; }
-    &.an-fr-icon-btn--active { background: rgba(#818cf8, 0.15); color: #818cf8; border-color: rgba(#818cf8, 0.3); }
-  }
-
-  .an-fr-counter { color: #6c7086; }
-
-  .an-label { color: #cdd6f4; }
-
-  .an-input {
-    background: #313244;
-    border-color: #3f3f5f;
-    color: #cdd6f4;
-
-    &:focus {
-      border-color: #89b4fa;
-      box-shadow: 0 0 0 3px rgba(#89b4fa, 0.15);
-    }
-  }
-
-  .an-shortcuts-key {
-    background: #313244;
-    border-color: #3f3f5f;
-    color: #cdd6f4;
-  }
-
-  .an-shortcuts-action { color: #cdd6f4; }
-  .an-shortcuts-row:hover { background: #2a2a3e; }
-
-  .an-shortcuts-cat {
-    border-color: #3f3f5f;
-    color: #a6adc8;
-  }
-
-  .an-code-lang-select {
-    background-color: #24273a;
-    border-color: #3f3f5f;
-    color: #cdd6f4;
-  }
-
-  .an-color-popup,
-  .an-table-picker-popup,
-  .an-size-popover,
-  .an-cell-shade-popover {
-    background: #24273a;
-    border-color: #3f3f5f;
-    color: #cdd6f4;
-  }
-
-  .an-cell-shade-popover .an-shade-no-color {
-    border-color: #3f3f5f;
-    color: #a6adc8;
-
-    &:hover {
-      background: #313244;
-      color: #cdd6f4;
-    }
-  }
-
-  .an-link-tooltip-btn--active {
-    background: rgba(#6366f1, 0.2) !important;
-    color: #818cf8 !important;
-    svg { stroke: #818cf8; }
-  }
-
-  .an-cell-selected {
-    background-color: rgba(#6366f1, 0.25) !important;
-    outline-color: #6366f1;
-  }
-
-  .an-table-cell {
-    background: #24273a;
-    border-color: #3f3f5f;
-
-    &.active {
-      background: rgba(99, 102, 241, 0.3);
-      border-color: #6366f1;
-    }
-  }
-
-  // Color popup children
-  .an-color-custom {
-    border-top-color: #3f3f5f;
-    color: #cdd6f4;
-  }
-
-  .an-color-arrow:hover { border-left-color: #45475a; }
-
-  .an-table-label { color: #6c7086; }
-  .an-context-table-grid-panel { border-top-color: #3f3f5f; }
-
-  .an-context-item { color: #cdd6f4; }
-  .an-context-sep { background: #3f3f5f; }
-
-  .an-context-color-swatch {
-    border-color: rgba(255, 255, 255, 0.15);
-    &:hover { border-color: rgba(255, 255, 255, 0.5); }
-  }
-
-  .an-context-color-none {
-    background: #1e1e2e !important;
-    color: #888;
-    &:hover { color: #ccc; }
-  }
-
-  .an-context-color-custom {
-    input[type='color'] { border-color: #3f3f5f; }
-  }
-
-  .an-icon-cat {
-    border-color: #3f3f5f;
-    color: #a6adc8;
-
-    &.active {
-      background: #3b5bdb;
-      border-color: #3b5bdb;
-      color: #fff;
-    }
-  }
-
-  .an-icon-search {
-    border-color: #3f3f5f;
-    background: #313244;
-    color: #cdd6f4;
-  }
-
-  .an-icon-cell {
-    color: #a6adc8;
-
-    i { color: #cdd6f4; }
-
-    &:hover { background: #2a2a3e; border-color: #45475a; }
-
-    &.active {
-      background: rgba(#818cf8, 0.15);
-      border-color: #818cf8;
-      color: #818cf8;
-      i { color: #818cf8; }
-    }
-  }
-
-  .an-icon-close {
-    color: #a6adc8;
-
-    &:hover {
-      background: #2a2a3e;
-      color: #cdd6f4;
-    }
-  }
-
-  // Emoji dialog
-  .an-emoji-box { background: #1e1e2e; border-color: #45475a; }
-
-  .an-emoji-cell {
-    color: inherit;
-    &:hover { background: #313244; }
-  }
-
-  .an-emoji-grid {
-    scrollbar-color: #45475a transparent;
-  }
-
-  // Icon dialog
-  .an-icon-box { background: #1e1e2e; border-color: #45475a; }
-
-  .an-icon-grid { background: #181825; border-color: #45475a; }
-
-  .an-icon-options {
-    background: #181825;
-    border-color: #45475a;
-  }
-
-  .an-icon-preview {
-    background: #181825;
-    border-color: #45475a;
-    color: #cdd6f4;
-
-    .an-icon-preview-empty { color: #6c7086; }
-  }
-
-  .an-icon-option-select {
-    background: #313244;
-    border-color: #45475a;
-    color: #cdd6f4;
-  }
-
-  .an-icon-empty { color: #6c7086; }
-
-  // Bubble toolbar color picker
-  .an-bubble-color-picker {
-    background: #24273a;
-    border-color: #3f3f5f;
-
-    .an-context-color-custom {
-      border-color: #3f3f5f;
-      color: #a6adc8;
-    }
-  }
-
-  // Table tooltip (extends link-tooltip dark rules)
-  .an-table-tooltip { background: #24273a; border-color: #3f3f5f; }
-
-  // Find & Replace floating panel box
-  .an-fr-box { background: #1e1e2e; border-color: #45475a; }
-}
-
-
-// =============================================================================
-// Toolbar overflow modes
-// =============================================================================
-
-// Default: flex-wrap:wrap (already set on .an-toolbar).
-// When toolbarOverflow:'scroll', the consumer adds .an-toolbar-overflow-scroll
-// to the container; toolbar becomes a single horizontally scrollable row.
-.an-toolbar-overflow-scroll {
-  .an-toolbar {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    scrollbar-width: thin;
-
-    // WebKit scrollbar - kept minimal
-    &::-webkit-scrollbar {
-      height: 4px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: $an-border;
-      border-radius: 2px;
-    }
-  }
-}
-
-// =============================================================================
-// Responsive — mobile / small-viewport toolbar
-// =============================================================================
-//
-// On screens ≤ 640 px the default flex-wrap:wrap behaviour creates a multi-row
-// toolbar that pushes the editable area too far down.  We switch automatically
-// to a single horizontally-scrollable row (same as toolbarOverflow:'scroll'),
-// hide the scrollbar track, and compact the dropdown selects.
-
-@media (max-width: 640px) {
-  .an-toolbar {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    // Hide scrollbar visually — users swipe naturally on touch devices
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar { display: none; }
-  }
-
-  // Compact dropdown selects to save horizontal real-estate on small screens
-  .an-select {
-    min-width: 72px;
-    max-width: 90px;
-    font-size: 11px;
-  }
-
-  .an-select-style  { min-width: 62px; max-width: 76px; }
-  .an-select-narrow { min-width: 50px; max-width: 66px; }
-}
-
-// =============================================================================
-// RTL support
-// =============================================================================
-
-.an-dir-rtl {
-  .an-toolbar {
-    direction: rtl;
-  }
-}
-
-.an-editable[dir='rtl'] {
-  text-align: right;
-}
-
-// =============================================================================
-// Status-bar count warnings
-// =============================================================================
-
-.an-count-warn {
-  color: #f59e0b; // amber-400 — approaching limit
-  font-weight: 600;
-}
-
-.an-count-exceeded {
-  color: #ef4444; // red-500 — over limit
-  font-weight: 700;
-}
-
-// =============================================================================
-// Checklist (task list)
-// =============================================================================
-
-.an-editable {
-  ul.an-checklist {
-    list-style: none;
-    padding-left: 0;
-    margin: 0.5em 0;
-
-    li {
-      // Use padding-left + absolute checkbox so text is a normal inline flow
-      // (not an anonymous flex item). This ensures font-size, line-height and
-      // all inline formats are identical to regular paragraph text.
-      position: relative;
-      padding-left: 22px;
-      padding-top: 1px;
-      padding-bottom: 1px;
-      min-height: 1.4em;
-      line-height: inherit;
-      font-size: inherit;
-      font-family: inherit;
-
-      input[type='checkbox'] {
-        position: absolute;
-        left: 0;
-        top: 0.25em;
-        width: 14px;
-        height: 14px;
-        margin: 0;
-        cursor: pointer;
-        accent-color: $an-primary;
-      }
-
-      // Checked item: dim + strike-through the text node
-      &:has(input[type='checkbox']:checked) {
-        color: $an-muted;
-        text-decoration: line-through;
-      }
-    }
-  }
-}
-
-.an-theme-dark .an-editable ul.an-checklist li:has(input[type='checkbox']:checked) {
-  color: $an-dark-muted;
-}
-
-// =============================================================================
-// Auto theme — mirrors dark theme when OS prefers dark and no explicit theme set
-// =============================================================================
-
-@media (prefers-color-scheme: dark) {
-  .an-theme-auto {
-    border-color: #3f3f5f;
-    background: #1e1e2e;
-    color: #cdd6f4;
-
-    &.an-focused {
-      border-color: #89b4fa;
-      box-shadow: 0 0 0 3px rgba(#89b4fa, 0.2);
-    }
-
-    .an-toolbar {
-      background: #181825;
-      border-color: #3f3f5f;
-    }
-
-    .an-btn {
-      color: #cdd6f4;
-
-      &:hover {
-        background: #2a2a3e;
-        border-color: #3f3f5f;
-        color: #cdd6f4;
-
-        svg { stroke: #cdd6f4; }
-      }
-
-      &.active {
-        background: #1a3a5c;
-        border-color: #89b4fa;
-        color: #89b4fa;
-
-        svg { stroke: #89b4fa; }
-      }
-
-      &.an-btn-primary {
-        background: #3b5bdb;
-        border-color: #3b5bdb;
-        color: #fff;
-      }
-    }
-
-    .an-select {
-      background-color: #1e1e2e;
-      border-color: #3f3f5f;
-      color: #cdd6f4;
-
-      &:hover, &:focus { border-color: #89b4fa; }
-    }
-
-    .an-editable {
-      background: #1e1e2e;
-      color: #cdd6f4;
-
-      a { color: #89b4fa; }
-
-      blockquote {
-        border-color: #3f3f5f;
-        color: #a6adc8;
-      }
-
-      pre:not([class*='language-']),
-      code:not([class*='language-']) {
-        background: #313244;
-        color: #cdd6f4;
-      }
-
-      pre:not([class*='language-']) > code { background: transparent; }
-
-      hr { border-color: #3f3f5f; }
-
-      table, .an-table {
-        td, th { border-color: #3f3f5f; }
-        th { background: #313244; }
-      }
-
-      &.an-placeholder::before { color: #6c7086; }
-
-      figcaption.an-figcaption { color: #6c7086; }
-    }
-
-    .an-statusbar {
-      background: #181825;
-      border-color: #3f3f5f;
-      color: #6c7086;
-    }
-
-    .an-link-tooltip,
-    .an-contextmenu {
-      background: #24273a;
-      border-color: #3f3f5f;
-      color: #cdd6f4;
-    }
-
-    .an-link-tooltip-url { color: #89b4fa; }
-
-    .an-link-tooltip-btn {
-      color: #a6adc8;
-
-      &:hover {
-        background: #2a2a3e;
-        color: #cdd6f4;
-      }
-    }
-
-    .an-dialog-overlay { background: rgba(0, 0, 0, 0.65); }
-
-    .an-dialog-box {
-      background: #24273a;
-      color: #cdd6f4;
-      border: 1px solid #3f3f5f;
-    }
-
-    .an-dialog-title { color: #cdd6f4; }
-
-    .an-input {
-      background: #313244;
-      border-color: #3f3f5f;
-      color: #cdd6f4;
-
-      &:focus {
-        border-color: #89b4fa;
-        box-shadow: 0 0 0 3px rgba(#89b4fa, 0.15);
-      }
-    }
-
-    .an-color-popup,
-    .an-table-picker-popup,
-    .an-size-popover,
-    .an-cell-shade-popover {
-      background: #24273a;
-      border-color: #3f3f5f;
-      color: #cdd6f4;
-    }
-
-    .an-context-color-swatch {
-      border-color: rgba(255, 255, 255, 0.15);
-      &:hover { border-color: rgba(255, 255, 255, 0.5); }
-    }
-
-    .an-label { color: #cdd6f4; }
-  }
-
-  .an-theme-auto .an-editable ul.an-checklist li:has(input[type='checkbox']:checked) {
-    color: $an-dark-muted;
-  }
-}
-
-// =============================================================================
-// Print styles
-// =============================================================================
-
-@media print {
-  .an-container {
-    border: none;
-    box-shadow: none;
-    contain: none; // allow natural page flow when printing
-  }
-
-  .an-toolbar,
-  .an-statusbar {
-    display: none !important;
-  }
-
-  .an-editable {
-    overflow: visible;
-    height: auto !important;
-    max-height: none !important;
-    padding: 0;
-    color: #000;
-    background: #fff;
-  }
-
-  .an-video-wrapper .an-video-shield {
-    display: none; // allow clicking embedded media when printing is unlikely
-  }
-
-  .an-image-resizer,
-  .an-video-resizer {
-    display: none !important;
-  }
-}
-
-// =============================================================================
-// Auto-save restore banner (#2)
-// =============================================================================
-
-.an-asr-banner {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: #eff6ff;
-  border-bottom: 1px solid #bfdbfe;
-  font-size: 13px;
-  color: #1e40af;
-  flex-wrap: wrap;
-
-  .an-theme-dark & {
-    background: #1e3a5f;
-    border-bottom-color: #1e4d8c;
-    color: #93c5fd;
-  }
-}
-
-.an-asr-msg {
-  flex: 1;
-  min-width: 0;
-}
-
-.an-asr-btn-restore {
-  padding: 3px 10px;
-  font-size: 12px;
-  font-weight: 600;
-  background: $an-primary;
-  color: #fff;
-  border: none;
-  border-radius: $an-radius-sm;
-  cursor: pointer;
-  line-height: 1.5;
-
-  &:hover {
-    background: $an-primary-hover;
-  }
-}
-
-.an-asr-btn-discard {
-  padding: 3px 10px;
-  font-size: 12px;
-  background: transparent;
-  color: $an-muted;
-  border: 1px solid $an-border;
-  border-radius: $an-radius-sm;
-  cursor: pointer;
-  line-height: 1.5;
-
-  &:hover {
-    background: $an-bg-btn-hover;
-  }
-}
-
-// =============================================================================
-// Bubble toolbar (#4)
-// =============================================================================
-
-.an-bubble-toolbar {
-  display: none;
-  position: fixed;
-  z-index: 10040;
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: 8px;
-  padding: 4px 6px;
-  gap: 2px;
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
-  align-items: center;
-  animation: an-bubble-in 0.1s ease;
-  pointer-events: auto;
-  user-select: none;
-
-  .an-theme-dark & {
-    background: #24273a;
-    border-color: #3f3f5f;
-  }
-}
-
-@keyframes an-bubble-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.an-bubble-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 5px;
-  color: $an-text;
-  cursor: pointer;
-  transition: background $an-transition, color $an-transition;
-
-  svg {
-    pointer-events: none;
-    stroke: currentColor;
-  }
-
-  &:hover {
-    background: $an-bg-btn-hover;
-    color: $an-text;
-  }
-
-  &.an-active {
-    background: $an-bg-btn-active;
-    color: $an-primary;
-  }
-
-  // Color variant: SVG stacked above a thin color-indicator strip
-  &.an-bubble-btn--color {
-    flex-direction: column;
-    gap: 1px;
-    padding: 4px 0 3px;
-
-    .an-bubble-btn-svg {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      line-height: 0;
-
-      svg { display: block; }
-    }
-
-    .an-bubble-color-strip {
-      display: block;
-      width: 14px;
-      height: 3px;
-      border-radius: 1px;
-      pointer-events: none;
-    }
-  }
-
-  .an-theme-dark & {
-    color: #cdd6f4;
-
-    &:hover {
-      background: #313244;
-    }
-
-    &.an-active {
-      background: #1e3a5f;
-      color: #93c5fd;
-    }
-  }
-}
-
-// Bubble toolbar — color picker popup
-.an-bubble-color-picker {
-  position: fixed;
-  z-index: 10041;
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: 8px;
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
-  padding: 4px 0;
-  min-width: 160px;
-
-  .an-theme-dark & {
-    background: #24273a;
-    border-color: #3f3f5f;
-  }
-}
-
-// =============================================================================
-// @mention dropdown + chip (#5)
-// =============================================================================
-
-.an-mention-dropdown {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: $an-radius;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  min-width: 180px;
-  max-width: 280px;
-  max-height: 240px;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.an-mention-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  cursor: pointer;
-  font-size: 13px;
-  color: $an-text;
-  transition: background $an-transition;
-
-  &:hover,
-  &.an-mention-active {
-    background: $an-bg-btn-hover;
-  }
-}
-
-.an-mention-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-// Mention chip — inserted inline in the editor content
-.an-mention {
-  display: inline;
-  background: #eff6ff;
-  color: $an-primary;
-  border-radius: 3px;
-  padding: 0 3px;
-  font-weight: 500;
-  cursor: default;
-  user-select: all;
-
-  .an-theme-dark & {
-    background: #1e3a5f;
-    color: #93c5fd;
-  }
-}
-
-// =============================================================================
-// "/" command palette
-// =============================================================================
-
-.an-slash-menu {
-  display: none;
-  position: fixed;
-  z-index: 9998;
-  background: $an-bg;
-  border: 1px solid $an-border;
-  border-radius: $an-radius;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  min-width: 180px;
-  max-width: 260px;
-  max-height: 260px;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.an-slash-menu-item {
-  padding: 6px 12px;
-  cursor: pointer;
-  font-size: 13px;
-  color: $an-text;
-  transition: background $an-transition;
-
-  &:hover,
-  &.an-slash-menu-active {
-    background: $an-bg-btn-hover;
-  }
-}
-
-.an-slash-menu-empty {
-  padding: 6px 12px;
-  font-size: 13px;
-  color: $an-muted;
-}