/* ===================================
   Rich Editor - Component Styles
   ===================================
   Everything lives in @layer yjd so an app's unlayered CSS always wins —
   override any --rte-* token (or rule) with zero !important and no specificity
   battles. This wrapper is in the source itself so ALL shipped stylesheets
   (styles.css, styles.min.css, styles.css.js) honor the contract, even if a
   consumer links the raw file directly. */
@layer yjd {

/* === CORE EDITOR === */
.yjd-rich-editor {
  position: relative;
  /* Own stacking context: internal z-index (toolbars 1000, handles 997-999,
     dropdowns) never competes with the host page's popovers/modals. */
  isolation: isolate;
  background: var(--rte-bg, var(--rte-bg));
  border: 1px solid var(--rte-border, var(--rte-table-border));
  border-radius: 8px;
  /* visible (not hidden) so popovers/dropdowns can extend past a short editor
     without being clipped. Rounded corners are kept by rounding the toolbar top
     and statusbar bottom (see design-system layer). */
  overflow: visible;
  margin: 0 auto;
  font-family: var(--rte-ui);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
@layer base {
  .yjd-rich-editor .rich-editor-toolbar-container button,
  .yjd-rich-editor .rich-editor-toolbar-container input,
  .yjd-rich-editor .rich-editor-toolbar-container select,
  .yjd-rich-editor .rich-editor-toolbar-container optgroup,
  .yjd-rich-editor .rich-editor-toolbar-container textarea,
  .yjd-rich-editor .rich-editor-toolbar-container ::file-selector-button {
    font: normal 500 12px/1.4 var(--rte-ui) !important;
    letter-spacing: normal !important;
    font-feature-settings: normal !important;
    font-variation-settings: normal !important;
  }
    /* Ensure emoji button font size is applied with high specificity */
    .yjd-rich-editor .emoji-picker-popup .emoji-button,
    .yjd-rich-editor .emoji-picker-popup button.emoji-button {
      font-size: 20px !important;
    }
}
@layer base {

  .yjd-rich-editor .rich-editor-popup-container button,
  .yjd-rich-editor .rich-editor-popup-container input,
  .yjd-rich-editor .rich-editor-popup-container select,
  .yjd-rich-editor .rich-editor-popup-container optgroup,
  .yjd-rich-editor .rich-editor-popup-container textarea,
  .yjd-rich-editor .rich-editor-popup-container ::file-selector-button {
    /* Design default for popup text is 400; 500 is opted into per control
       (confirm/cancel buttons, current option) below. */
    font: normal 400 12.5px/1.4 var(--rte-ui) !important;
    letter-spacing: normal !important;
    font-feature-settings: normal !important;
    font-variation-settings: normal !important;
  }
    /* Ensure emoji button font size is applied with high specificity */
    .yjd-rich-editor .emoji-picker-popup .emoji-button,
    .yjd-rich-editor .emoji-picker-popup button.emoji-button {
      font-size: 20px !important;
    }
  /* v2 form popups run 13px inputs (find & replace stays compact at 12px);
     must live in this base layer — !important in an earlier sublayer beats
     any later-layer !important. */
  .yjd-rich-editor .rich-editor-popup-container .yjd-input,
  .yjd-rich-editor .rich-editor-popup-container .yjd-select-input {
    font: normal 400 13px/1.4 var(--rte-ui) !important;
  }
  .yjd-rich-editor .yjd-find-input {
    font: normal 400 12px/1.4 var(--rte-ui) !important;
  }
  /* Select popups: plain 12.5px/400 options; the active row carries 500. */
  .yjd-rich-editor .rich-editor-popup-container [class*="select-popup"] button {
    font: normal 400 12.5px/1.4 var(--rte-ui) !important;
  }
  .yjd-rich-editor .rich-editor-popup-container [class*="select-popup"] button.current {
    font-weight: 500 !important;
  }
  /* Find & replace: compact 11.5px/500 action buttons and toggle chips. */
  .yjd-rich-editor .yjd-find-replace button {
    font: normal 500 11.5px/1.4 var(--rte-ui) !important;
  }
  /* Ask AI pill runs the design's 12.5px/500. */
  .yjd-rich-editor .rich-editor-toolbar-container .ai-btn {
    font: normal 500 12.5px/1.4 var(--rte-ui) !important;
  }
  /* Toolbar select triggers (heading / font / size): 13px/400 per design. */
  .yjd-rich-editor .rich-editor-toolbar-container .custom-select-button {
    font: normal 400 13px/1.4 var(--rte-ui) !important;
  }
  .yjd-rich-editor .rich-editor-popup-container .yjd-button-confirm,
  .yjd-rich-editor .rich-editor-popup-container .yjd-button-cancel,
  .yjd-rich-editor .rich-editor-popup-container .link-popup-apply {
    font: normal 500 12px/1.4 var(--rte-ui) !important;
  }
  .yjd-rich-editor .rich-editor-popup-container .yjd-suggestion-button {
    font: normal 400 12px/1.4 var(--rte-ui) !important;
  }
}

.yjd-rich-editor .rich-editor-area {
  flex: 1 1 auto;
  min-height: 40px;
  font-size: 16px;
  line-height: 1.7;
  outline: none;
  padding: 20px 20px 20px 20px;
  background: var(--rte-bg, var(--rte-bg));
  color: var(--rte-ink, var(--rte-ink));
  font-family: inherit;
  overflow-y: auto;
  box-sizing: border-box;
  border: none;
  /* `start` (not `left`) so the editor follows dir="rtl"/"ltr" — a hardcoded
     `left` kept RTL text left-aligned. */
  text-align: start;
  position: relative;
}

/* Placeholder for contentEditable.
   Rendered INSIDE the first block (JS adds .rte-placeholder + data-placeholder to
   it) so the ::before inherits that block's direction / text-align / font /
   line-height — staying aligned with the caret when those change (RTL, alignment,
   font-size, line-spacing). Absolutely positioned within the block so it never
   adds layout height; the block carries the editor's padding via its position in
   the padded area, so top/inset-inline 0 lands on the content origin. */
.yjd-rich-editor .rich-editor-area > .rte-placeholder {
  position: relative;
}
.yjd-rich-editor .rich-editor-area > .rte-placeholder::before {
  content: attr(data-placeholder);
  color: var(--rte-muted, var(--rte-muted));
  pointer-events: none;
  position: absolute;
  inset: 0;               /* fill the block's padding box */
  padding: inherit;       /* re-inset by the block's OWN padding so the text lands
                             on the content origin (where the caret sits) even for
                             padded blocks like <pre> (code) and <blockquote>. */
  box-sizing: border-box;
  font: inherit;          /* inherit the block's font-size/family (upright) */
  line-height: inherit;   /* follow line-spacing changes on the block */
  text-align: inherit;    /* follow left/center/right alignment */
  direction: inherit;     /* follow LTR/RTL so it sits on the caret side */
  overflow: hidden;       /* keep a long placeholder inside a padded block */
  z-index: 1;
}

.yjd-rich-editor .rich-editor-area {
  font-size: 16px;
  line-height: 1.7;
  font-family: inherit;
  color: var(--rte-ink, var(--rte-ink));
  padding: 20px 20px;
  box-sizing: border-box;
}

/* inline elements */
.yjd-rich-editor .rich-editor-area b,
.yjd-rich-editor .rich-editor-area strong {
  font-weight: bold;
}

.yjd-rich-editor .rich-editor-area i,
.yjd-rich-editor .rich-editor-area em {
  font-style: italic;
}

.yjd-rich-editor .rich-editor-area u {
  text-decoration: underline;
}

.yjd-rich-editor .rich-editor-area a {
  color: var(--rte-link, var(--rte-link));
  text-decoration: underline;
  cursor: pointer;
}

/* block text */
.yjd-rich-editor .rich-editor-area p {
  margin: 0 0 1em;
}

/* headings */
.yjd-rich-editor .rich-editor-area h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
}

/* Horizontal rule: a flat themed line (execCommand inserts a bare <hr> that
   otherwise renders as the browser's beveled default). Matches .yjd-content hr
   so the editor and the read-view/preview look identical. */
.yjd-rich-editor .rich-editor-area hr {
  border: none;
  border-top: 1px solid var(--rte-table-border);
  margin: 1.5em 0;
}

.yjd-rich-editor .rich-editor-area h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.75em 0;
}

.yjd-rich-editor .rich-editor-area h3 {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0.83em 0;
}

.yjd-rich-editor .rich-editor-area h4 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 1em 0;
}

.yjd-rich-editor .rich-editor-area h5 {
  font-size: 1em;
  font-weight: bold;
  margin: 1.25em 0;
}

.yjd-rich-editor .rich-editor-area h6 {
  font-size: 0.875em;
  font-weight: bold;
  margin: 1.5em 0;
  color: var(--rte-muted, var(--rte-muted));
}

/* lists */
.yjd-rich-editor .rich-editor-area ul,
.yjd-rich-editor .rich-editor-area ol {
  margin: 0 0 1em 2em;
  padding: 0;
}

.yjd-rich-editor .rich-editor-area li {
  margin: 0.25em 0;
}

/* code & pre */
.yjd-rich-editor .rich-editor-area pre,
.yjd-rich-editor .rich-editor-area code {
  font-family: var(--rte-mono);
  background: var(--rte-code-bg, var(--rte-code-bg));
  color: var(--rte-code-ink, inherit);
  padding: 4px 6px;
  border-radius: 4px;
  overflow-x: auto;
}

.yjd-rich-editor .rich-editor-area pre {
  display: block;
  white-space: pre;
  margin: 1em 0;
}

.yjd-rich-editor .rich-editor-area code {
  display: inline;
}

/* blockquote */
.yjd-rich-editor .rich-editor-area blockquote {
  border-left: 4px solid var(--rte-quote-border, var(--rte-table-border));
  margin: 1em 0;
  padding: 4px 12px;
  color: var(--rte-quote-ink, var(--rte-muted));
  font-style: italic;
  background: var(--rte-quote-bg, var(--rte-quote-bg));
}
.yjd-rich-editor .rich-editor-area sub {
  font-size: 0.75em;
  vertical-align: sub;
  line-height: 1;
}

.yjd-rich-editor .rich-editor-area sup {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 1;
}
.yjd-rich-editor .rich-editor-area  a{
  cursor: pointer;
}
.yjd-rich-editor .rich-editor-area pre {
  background-color: var(--rte-code-block-bg, var(--rte-code-bg));
  width: 96%;
  padding: 10px 2% 10px 2%;
  font-family: var(--rte-mono);
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
}
/* Force contentEditable to create P tags instead of DIV on Enter */
.yjd-rich-editor .rich-editor-area div {
  display: block;
}

.yjd-rich-editor .rich-editor-area:empty::before {
  content: '';
  display: block;
}

.yjd-rich-editor .rich-editor-statusbar {
  position: relative;
  z-index: 1000;
  padding: 4px 12px;
  border-top: 1px solid var(--rte-table-border);
  background: var(--rte-quote-bg);
  font-size: 13px;
  color: var(--rte-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  min-height: 32px;
  box-sizing: border-box;
}

/* === TOOLBAR === */
.yjd-rich-editor .rich-editor-toolbar-container{
  border-bottom: 1px solid var(--rte-table-border);
  position: relative;
  z-index: 1000; /* Ensure toolbars are above resize handles */
}
.yjd-rich-editor .rich-editor-toolbar-1{
    padding:8px 16px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:var(--rte-chrome);
    align-items:center;
    min-height:44px;
    padding-bottom:8px;
    box-sizing:border-box;
    width:100%;
    overflow:hidden;
    z-index: 1000; /* Higher than resize handles */
    position: relative;
}
.yjd-rich-editor .rich-editor-toolbar-2{
  display:none;
  padding: 8px 16px;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--rte-chrome);
  align-items: center;
  min-height: 44px;
  padding-bottom: 8px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  z-index: 1000; /* Higher than resize handles */
  position: relative;
}
.yjd-rich-editor .rich-editor-toolbar-2.visible{
  display:flex;
}

/* === TOOLBAR GROUPS === */
.yjd-rich-editor .toolbar-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* === TOOLBAR BUTTONS === */

.yjd-rich-editor .rich-editor-toolbar-btn{
  height: 20px;
  min-width: 22px;
  width: 22px;
  display: inline-flex;
  border-radius: 4px;
  font-size: 14px;
  align-items: center;
  background:transparent;
  justify-content: center;
  font-weight: 500;
  border: none;
}
.yjd-rich-editor .custom-select-button span{
  justify-content: left !important;
}
.yjd-rich-editor .custom-select-button:focus  {
  outline: none;
    border-color: var(--rte-accent, var(--rte-focus));
    box-shadow: 0 0 0 3px var(--rte-accent-ring, rgba(59, 130, 246, 0.1));

}
.yjd-rich-editor .rich-editor-toolbar-btn span{
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.yjd-rich-editor .rich-editor-toolbar-btn:hover {
  background: var(--rte-chrome-2) !important;
  cursor: pointer;
}
/* Active toolbar-button + icon colours are owned by the design-system layer
   (accent), and icon sizing/stroke by the outline-icon layer — the old blue
   (#136FDF) / grey (var(--rte-ink)) overrides have been removed. */

/*block toolbar*/
.yjd-rich-editor .block-toolbar-btn{
  border:none;
  border-radius:4px;
  padding:4px;
  background:transparent;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  align-items:center;
  justify-content:center;
  display:inline-flex;
}
.yjd-rich-editor .block-toolbar-btn:hover{
  background:var(--rte-chrome-2);
}
.yjd-rich-editor .block-toolbar-btn.active{
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
}

.yjd-rich-editor .block-toolbar-btn.active svg,
.yjd-rich-editor .block-toolbar-btn.active .icon svg {
  fill: var(--rte-accent-ink);
}

.yjd-rich-editor .block-toolbar-btn.active svg path,
.yjd-rich-editor .block-toolbar-btn.active .icon svg path {
  fill: var(--rte-accent-ink);
}

/* Block toolbar container and arrow */
.yjd-rich-editor .block-toolbar-container {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 8px;
  background: var(--rte-bg);
  border-radius: var(--rte-radius-sm);
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
}

.yjd-rich-editor .block-toolbar-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--rte-accent-ink-on);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Table toolbar container and arrow */
.yjd-rich-editor .table-toolbar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: var(--rte-bg);
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
}

.yjd-rich-editor .table-toolbar-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--rte-accent-ink-on);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Update block toolbar to use flexbox for proper layout */
.yjd-rich-editor .block-toolbar {
  display: none;
  position: absolute;
  z-index: 1001;
  background: transparent;
  border: none;
  border-radius: var(--rte-radius-sm);
  box-sizing: border-box;
  padding: 0;
  gap: 0;
  flex-direction: column;
  align-items: center;
}

.yjd-rich-editor .block-toolbar.visible {
  display: flex;
}
/* === COLOR PICKER === */
.yjd-rich-editor .color-picker-popup {
  position: absolute;
  background: var(--rte-bg);
  display:none;
  border-radius: var(--rte-radius-sm);
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.yjd-rich-editor .color-picker-popup.visible{
  display:block !important;
}

/* === CUSTOM SELECT === */
.yjd-rich-editor .custom-select-popup, .yjd-rich-editor .heading-select-popup, .yjd-rich-editor .capitalization-select-popup, .yjd-rich-editor .font-family-select-popup, .yjd-rich-editor .line-height-select-popup, .yjd-rich-editor .text-size-select-popup {
  position: absolute;
  background: var(--rte-chrome, var(--rte-bg));
  display: none;
  border: 1px solid var(--rte-border, var(--rte-table-border));
  border-radius: var(--rte-radius-sm);
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 1002;
  /* Tall enough to show every option without scrolling (heading has 9 items,
     font-family 10): the old 200px cap hid Paragraph/Quote below the fold. */
  max-height: 360px;
  overflow-y: auto;
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.yjd-rich-editor .custom-select-popup.visible, .yjd-rich-editor .heading-select-popup.visible, .yjd-rich-editor .font-family-select-popup.visible, .yjd-rich-editor .line-height-select-popup.visible, .yjd-rich-editor .capitalization-select-popup.visible, .yjd-rich-editor .text-size-select-popup.visible {
  display: block !important;
}

.yjd-rich-editor .link-popup ,.yjd-rich-editor .image-popup,.yjd-rich-editor .video-popup, .yjd-rich-editor .tag-popup {
  width: 299px;
}
.yjd-rich-editor .item-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.yjd-rich-editor .heading-select-popup {
  width: 230px;
  max-width: 100vw;
}
/* Cap the heading preview sizes so H1 doesn't overflow the popup. */
.yjd-rich-editor .heading-select-popup h1,
.yjd-rich-editor .heading-select-popup h2,
.yjd-rich-editor .heading-select-popup h3,
.yjd-rich-editor .heading-select-popup h4,
.yjd-rich-editor .heading-select-popup h5,
.yjd-rich-editor .heading-select-popup h6,
.yjd-rich-editor .heading-select-popup p {
  margin: 0 !important;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.yjd-rich-editor .heading-select-popup h1 { font-size: 1.45em; }
.yjd-rich-editor .heading-select-popup h2 { font-size: 1.28em; }
.yjd-rich-editor .heading-select-popup h3 { font-size: 1.14em; }
.yjd-rich-editor .heading-select-popup h4 { font-size: 1.02em; }
.yjd-rich-editor .heading-select-popup h5 { font-size: 0.94em; }
.yjd-rich-editor .heading-select-popup h6 { font-size: 0.86em; color: var(--rte-muted); }
.yjd-rich-editor .heading-select-popup p { font-size: 0.95em; font-weight: 500; }

.yjd-rich-editor .capitalization-select-popup {
  width: 150px;
  max-width: 100vw;
}

.yjd-rich-editor .font-family-select-popup {
  width: 190px;
  max-width: 100vw;
}

.yjd-rich-editor .line-height-select-popup {
  width: 80px;
  max-width: 100vw;
}

.yjd-rich-editor .text-size-select-popup {
  width: 150px;
  max-width: 100vw;
}

.yjd-rich-editor .custom-select-item-button {
  width: 100%;
  padding: 4px 4px;
  border: none;
  background: transparent;
  border-radius: var(--rte-radius-sm);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  font-size: 14px;
  line-height: 1.4;
  color: var(--rte-ink, #111827);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Allow interaction with select item buttons */
  pointer-events: auto;
}

.yjd-rich-editor .custom-select-item-button:hover {
  background: var(--rte-chrome-2);
}

.yjd-rich-editor .custom-select-item-button.current {
  font-weight: 500;
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .custom-select-item-button .item-checkmark{
  display:none;
}
.yjd-rich-editor .custom-select-item-button.current .item-checkmark{
  display:block;
}
.yjd-rich-editor .item-text {
  flex: 1;
}
.yjd-rich-editor .dropdown-icon{
  display: inline-flex !important;
  align-items: center ;
  justify-content: center ;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
/* The chevron SVG keeps the `dropdown-icon` class (not `.icon`), so size it
   explicitly here — otherwise it has no dimensions and the arrow disappears. */
.yjd-rich-editor .dropdown-icon svg{
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  fill: none;
}


.yjd-rich-editor .color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px 4px;
  margin-bottom: 12px;
}

.yjd-rich-editor .color-button {
  width: 24px;
  height: 24px;
  border:none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
  /* Allow interaction with color buttons */
  pointer-events: auto;
}

.yjd-rich-editor .color-button:hover {
  transform: scale(1.1);
  border-color: var(--rte-ink);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.yjd-rich-editor .custom-color-container {
  position: relative;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 0;
  /* đảm bảo ::before không che nội dung */
}

.yjd-rich-editor .custom-color-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: calc(100% + 16px);
  /* 8px trái + 8px phải */
  height: 0;
  border-top: 1px solid var(--rte-border);
  z-index: -1;
  /* đặt phía sau nội dung */
}

.yjd-rich-editor .custom-color-label {
  font-size: 12px;
  color: var(--rte-muted);
  margin: 0;
}


.yjd-rich-editor .yjd-input-title{
  margin: 0;
  color: var(--rte-ink);
  font-size: 13.5px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.yjd-rich-editor .yjd-input-label{
  color: var(--rte-ink);
  margin: 0;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.yjd-rich-editor .yjd-input-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.yjd-rich-editor .yjd-input {
  padding: 10px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  max-height: 37px;
  border-radius: var(--rte-radius-sm);
  border: 1px solid var(--rte-border-strong);
  box-sizing: border-box;
  background: var(--rte-bg, var(--rte-bg));
  color: var(--rte-ink, var(--rte-ink));
  font-size: 14px;
  /* A value longer than the field shows an ellipsis (…) when the input isn't
     focused, instead of a hard cut at the edge. While typing the browser still
     scrolls to the caret as usual. */
  text-overflow: ellipsis;
  /* Allow interaction with inputs */
  pointer-events: auto;
}
.yjd-rich-editor .yjd-input::placeholder { color: var(--rte-muted); }
/* Same ellipsis-not-cut treatment for every other popup text input that can
   hold a long value (URLs, tag values, file names, hex colours). */
.yjd-rich-editor .yjd-select-input,
.yjd-rich-editor .tag-value-input,
.yjd-rich-editor .import-input,
.yjd-rich-editor .import-url-input,
.yjd-rich-editor .import-file-input,
.yjd-rich-editor .custom-color-input,
.yjd-rich-editor .table-popup input {
  text-overflow: ellipsis;
}
.yjd-rich-editor .yjd-input:focus {
  outline: none;
    border-color: var(--rte-accent, var(--rte-focus));
    box-shadow: 0 0 0 2px var(--rte-accent-ring, rgba(59, 130, 246, 0.1));
}
.yjd-rich-editor .yjd-button-container{
  display: flex ;
  justify-content: flex-end;
  gap: 4px;
}
.yjd-rich-editor .yjd-button-confirm{
  padding: 8px 15px;
  align-items: center;
  border-radius: 6px;
  background: var(--rte-accent);
  box-shadow: 0px 1px 3.3px 0px rgba(0, 0, 0, 0.04);
  /* Allow interaction with buttons */
  pointer-events: auto;
  color: var(--rte-accent-ink-on);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}
.yjd-rich-editor .yjd-button-cancel{
  border-radius: 6px;
  align-items: center;
  padding: 8px 15px;
  border: 1px solid var(--rte-border);
  background: var(--rte-bg);
  box-shadow: 0px 1px 3.3px 0px rgba(0, 0, 0, 0.04);
  color: var(--rte-ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}
.yjd-rich-editor .button-disable{
  cursor: not-allowed;
  /* Design btnPrimaryDisabled: quiet chrome fill, faint label. */
  border-color: var(--rte-border) !important;
  background: var(--rte-chrome-2) !important;
  color: var(--rte-faint) !important;
  box-shadow: none !important;
}
/* === LINK POPUP === */
.yjd-rich-editor .link-popup {
  position: absolute;
  background: var(--rte-bg);
  font-family: var(--rte-ui);
  display: none;
  border: none;
  border-radius: var(--rte-radius);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  margin: 0;
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.yjd-rich-editor .link-popup.visible {
  display: block !important;
}

.yjd-rich-editor .link-popup-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.yjd-rich-editor .yjd-input-upload-group{
  display: flex;
  align-items: center;
  gap: 4px;
}
.yjd-rich-editor .yjd-custom-upload-button {
  /* no !important: the video popup hides this button inline while a URL is
     typed (a URL and a file are mutually exclusive). */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rte-border);
  background: var(--rte-bg);
  width: 34px;
  height: var(--rte-ctl, 30px);
  border-radius: var(--rte-radius-sm);
  cursor: pointer;
}
.yjd-rich-editor .yjd-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.yjd-rich-editor .yjd-suggestion-button{
  border: none;
  display: flex;
  padding: 4px 10px;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  background:  var(--rte-chrome-2);
  cursor: pointer;
  font-size: 14px;
  color: var(--rte-ink) !important;
}
.yjd-rich-editor .yjd-select-input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 10px 10px 10px 10px;
  border-radius: var(--rte-radius-sm);
  border: 1px solid var(--rte-border);
  align-items: center;
  /* Same dropdown chevron as every other select (UI 2.0 family: 1.75 stroke). */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236d7480'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  font-size: 14px;
  color: var(--rte-ink) !important;
}
.yjd-rich-editor .yjd-select-input:focus {
  outline: none;
    border-color: var(--rte-accent, var(--rte-focus));
    box-shadow: 0 0 0 3px var(--rte-accent-ring, rgba(59, 130, 246, 0.1));
}


/* === TABLE POPUP === */
.yjd-rich-editor .table-popup {
  position: absolute;
  background: var(--rte-bg);
  font-family: var(--rte-ui);
  display: none;
  border: 1px solid var(--rte-table-border);
  border-radius: var(--rte-radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.yjd-rich-editor .table-popup.visible {
  display: block !important;
}

.yjd-rich-editor .table-popup-content {
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}

.yjd-rich-editor .table-popup-content>* {
  position: relative;
  width: 100%;
}

/* Kẻ đường phân cách giữa các phần tử, kéo dài vượt padding */
.yjd-rich-editor .table-popup-content>*:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -8px;
  /* nửa khoảng cách của gap: 12px */
  left: -8px;
  /* tràn ra ngoài padding 8px */
  right: -8px;
  height: 1px;
  background-color: var(--rte-chrome-2);
}

.yjd-rich-editor .table-grid-selector {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  border-bottom: 1px solid rgb(238, 238, 238);
}

.yjd-rich-editor .table-size-display{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rte-ui);
  color: var(--rte-ink) !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.yjd-rich-editor .table-grid-cell {
  width: 20px;
  height: 20px;
  background: var(--rte-bg, var(--rte-bg));
  border: 1px solid var(--rte-border-strong, rgb(238, 238, 238));
  cursor: pointer;
  transition: background-color 0.1s ease;
  border-radius: 2px;
}

.yjd-rich-editor .table-grid-cell:hover,
.yjd-rich-editor .table-grid-cell.highlighted {
  background: var(--rte-chrome-2);
}

/* === TABLE STYLES === */
.yjd-rich-editor .rich-editor-table {
  border-collapse: collapse;
  width: 100%;
  /* Never exceed the editor's content width, even mid-resize. */
  max-width: 100%;
  box-sizing: border-box;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  display: table;
  table-layout: fixed;
}

.yjd-rich-editor .rich-editor-table td,
.yjd-rich-editor .rich-editor-table th {
  /* border-box so a cell's min-width includes its padding+border — otherwise
     padding/borders push the table past the width set during resize. */
  box-sizing: border-box;
  border: 1px solid var(--rte-table-border);
  padding: 8px 12px;
  min-height: 28px;
  vertical-align: top;
  background: var(--rte-bg);
  overflow-wrap: break-word;
}
/* Header row cells: emphasised background + weight. */
.yjd-rich-editor .rich-editor-table th {
  background: var(--rte-chrome-2);
  font-weight: 600;
  text-align: start;
}
/* Drag-selected cells (for merge/align/background). */
.yjd-rich-editor .rich-editor-table td.yjd-cell-selected,
.yjd-rich-editor .rich-editor-table th.yjd-cell-selected {
  background: var(--rte-accent-weak) !important;
  outline: 1px solid var(--rte-accent);
  outline-offset: -1px;
}

/* Table Profile popup (portaled to <body>, so unprefixed). */
.yjd-table-profile {
  position: fixed;
  z-index: 2147483000;
  min-width: 150px;
  padding: 10px 12px;
  background: var(--rte-bg, #fff);
  color: var(--rte-ink);
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm, 8px);
  box-shadow: var(--rte-shadow, 0 10px 28px -8px rgba(16, 18, 23, 0.20), 0 2px 6px rgba(16, 18, 23, 0.06));
  font: 500 13px/1.5 var(--rte-ui);
}
.yjd-table-profile-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--rte-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.yjd-table-profile-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 2px 0;
}
.yjd-table-profile-row span { color: var(--rte-muted); }

.yjd-rich-editor .rich-editor-table td:focus {
  outline: 2px solid var(--rte-focus);
  outline-offset: -2px;
  background: var(--rte-chrome-2);
}

/* === TABLE TOOLBAR === */
.yjd-rich-editor .table-toolbar {
  position: absolute;
  display: none;
  z-index: 1002;
  background: transparent;
  border: none;
  border-radius: var(--rte-radius-sm);
  opacity: 0;
  pointer-events: none;
}

.yjd-rich-editor .table-toolbar-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.yjd-rich-editor .table-toolbar.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.yjd-rich-editor .table-toolbar-btn {
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--rte-ink);
  border:none;
  background:transparent;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.yjd-rich-editor .table-toolbar-btn:hover {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
}

.yjd-rich-editor .table-toolbar-btn:active {
  background: var(--rte-chrome-2);
  border-color: var(--rte-muted);
  color: var(--rte-accent-ink);
}

/* Responsive table toolbar */
@media (max-width: 768px) {
  .yjd-rich-editor .table-toolbar-container {
    flex-wrap: wrap;
    max-width: 200px;
    gap: 2px;
  }
  
  .yjd-rich-editor .table-toolbar-btn {
    height: 24px;
    min-width: 24px;
    font-size: 10px;
    padding: 2px 4px;
  }
}

/* === TEXT ALIGN PICKER === */
.yjd-rich-editor .text-align-picker-popup {
  position: absolute;
  background: var(--rte-bg);
  display: none;
  border: 1px solid var(--rte-table-border);
  border-radius: var(--rte-radius-sm);
  padding: 8px 4px 0 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}

.yjd-rich-editor .text-align-picker-popup.visible {
  display: block !important;
}

.yjd-rich-editor .align-button-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 98px;
  height: 115px;
  
}
.yjd-rich-editor .align-button .icon-wrapper{
  display: flex;
  margin-left: 8px;
  align-items: center;
  justify-content: center;
}
.yjd-rich-editor .align-button .label-text{
  color: var(--rte-ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.yjd-rich-editor .align-button {
  height: 24px;
  border-radius: var(--rte-radius-xs);
  background: var(--rte-bg);
  border: none;
  align-items: center;
  display: flex;
  width: 100%;
  cursor: pointer;
  padding: 0;
  gap: 4px;
  /* Allow interaction with align buttons */
  pointer-events: auto;
}

.yjd-rich-editor .align-button:hover {
  background: var(--rte-chrome-2);
  border-color: var(--rte-muted);
}

.yjd-rich-editor .align-button.active {
  background: var(--rte-chrome-2);
  border-color: var(--rte-muted);
}

.yjd-rich-editor .align-button svg {
  width: 16px;
  height: 16px;
  color: var(--rte-ink);
}

.yjd-rich-editor .align-button.active svg {
  color: var(--rte-ink);
}

/* === LIST PICKER === */
.yjd-rich-editor .list-picker-popup {
  position: absolute;
  background: var(--rte-bg);
  display: none;
  border-radius: var(--rte-radius-sm);
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.yjd-rich-editor .list-picker-popup.visible {
  display: block !important;
}

.yjd-rich-editor .list-button-container {
  display: grid;
    grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 12px 8px;
}

.yjd-rich-editor .list-button {

  border: none;
  border-radius: var(--rte-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  padding: 4px;
}

.yjd-rich-editor .list-button:hover {
  background: var(--rte-chrome-2);
}

/* Active = light accent wash + accent-ink icon (matches the toolbar button
   convention). The old style paired a light-grey background with a white icon,
   so the active icon was invisible/wrong; it also broke in dark mode. */
.yjd-rich-editor .list-button.active {
  background: var(--rte-accent-weak);
}

.yjd-rich-editor .list-button svg {
  height: 16px;
  color: var(--rte-ink);
}

.yjd-rich-editor .list-button.active svg {
  color: var(--rte-accent-ink);
}

/* === LIST FORMATTING === */
.yjd-rich-editor .rich-editor-area ul.checklist {
  list-style: none;
  padding-left: 0;
}

.yjd-rich-editor .rich-editor-area ul.checklist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 4px;
}

/* Pseudo-checkbox rendered from data-checked (no real <input>, which is awkward
   inside contentEditable and in serialisation). Click handling lives in the
   editor; theme-aware via --rte-* tokens. */
.yjd-rich-editor .rich-editor-area ul.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid var(--rte-border-strong);
  border-radius: 4px;
  background: var(--rte-bg);
  cursor: pointer;
}
.yjd-rich-editor .rich-editor-area ul.checklist li[data-checked="true"]::before {
  background: var(--rte-accent);
  border-color: var(--rte-accent);
}
.yjd-rich-editor .rich-editor-area ul.checklist li[data-checked="true"]::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: calc(0.2em + 2px);
  width: 5px;
  height: 9px;
  border: solid var(--rte-accent-ink-on);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.yjd-rich-editor .rich-editor-area ul.checklist li[data-checked="true"] {
  color: var(--rte-muted);
  text-decoration: line-through;
}

.yjd-rich-editor .rich-editor-area ul {
  margin: 12px 0;
  padding-left: 20px;
}

.yjd-rich-editor .rich-editor-area ol {
  margin: 12px 0;
  padding-left: 20px;
}

.yjd-rich-editor .rich-editor-area li {
  margin-bottom: 4px;
  line-height: 1.6;
}

/* === INDENT FORMATTING === */
.yjd-rich-editor .rich-editor-area .indented {
  transition: padding-left 0.2s ease;
}

.yjd-rich-editor .rich-editor-area [style*="padding-left"] {
  transition: padding-left 0.2s ease;
}

/* Indent button styles */
.yjd-rich-editor .indent-increase-btn svg,
.yjd-rich-editor .indent-decrease-btn svg {
  width: 16px;
  height: 16px;
  fill: var(--rte-ink);
}

.yjd-rich-editor .indent-increase-btn:hover svg,
.yjd-rich-editor .indent-decrease-btn:hover svg {
  fill: var(--rte-ink);
}

.yjd-rich-editor .indent-increase-btn:disabled,
.yjd-rich-editor .indent-decrease-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.yjd-rich-editor .indent-increase-btn:disabled svg,
.yjd-rich-editor .indent-decrease-btn:disabled svg {
  fill: var(--rte-muted);
}

/* === EMOJI PICKER === */
.yjd-rich-editor .emoji-picker-popup {
  position: absolute;
  z-index: 10000;
  background: var(--rte-bg);
  border-radius: var(--rte-radius-md);
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: none;
  overflow-y: auto;
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}

.yjd-rich-editor .emoji-picker-popup.visible {
  display: block;
}

.yjd-rich-editor .emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.yjd-rich-editor .emoji-button {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  padding: 0;
  border-radius: var(--rte-radius-xs);
  cursor: pointer;
  font-size: 20px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  /* Allow interaction with buttons */
  pointer-events: auto;
}

.yjd-rich-editor .emoji-button:hover {
  background-color: var(--rte-chrome-2);
}

.yjd-rich-editor .emoji {
  font-size: 1.1em;
  line-height: 1;
}

/* === IMAGE POPUP === */
.yjd-rich-editor .image-popup {
  position: absolute;
  z-index: 10000;
  background: var(--rte-bg);
  font-family: var(--rte-ui);
  border-radius: var(--rte-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: none;
  margin: 0;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.18);
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.yjd-rich-editor .image-popup.visible {
  display: block;
}

.yjd-rich-editor .image-popup-content {
  display: flex;
  flex-direction: column;
  /* The popup shell itself carries the design's 14px padding; element
     margins (title 12px, labels 5px, button row 14px) set the rhythm. */
  gap: 0;
  padding: 0;
}



.yjd-rich-editor .image-input-container {
  gap: 8px;
  display: flex;
  flex-direction: column;
}

.yjd-rich-editor .image-input-hidden{
  display: none;
}


/* === VIDEO POPUP === */
.yjd-rich-editor .video-popup {
  position: absolute;
  z-index: 10000;
  background: var(--rte-bg);
  font-family: var(--rte-ui);
  border-radius: var(--rte-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: none;
  margin: 0;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.18);
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.yjd-rich-editor .video-popup.visible {
  display: block;
}

.yjd-rich-editor .video-popup-content {
  display: flex;
  flex-direction: column;
  /* The popup shell itself carries the design's 14px padding; element
     margins (title 12px, labels 5px, button row 14px) set the rhythm. */
  gap: 0;
  padding: 0;
}

.yjd-rich-editor .video-input-container {
  gap: 8px;
  display: flex;
  flex-direction: column;
}

/* === INSERTED MEDIA === */
.yjd-rich-editor .inserted-image,
.yjd-rich-editor .inserted-video {
  max-width: 100%;
  height: auto;
  margin: 4px 0;
  border-radius: 4px;
  display: block;
}

/* Display caps for inserted/read-view images so a large upload doesn't blow out
   the frame. Off by default (none); set via options.image.maxHeight/maxWidth
   which write --rte-img-max-h / --rte-img-max-w on the wrapper. object-fit keeps
   aspect ratio. */
.yjd-rich-editor .rich-editor-area img,
.yjd-content img {
  max-height: var(--rte-img-max-h, none);
  object-fit: contain;
}
.yjd-rich-editor .rich-editor-area img,
.yjd-content img { max-width: var(--rte-img-max-w, 100%); }

/* Display cap for inserted videos so a tall/portrait clip doesn't blow out the
   frame on insert. Default 480px (matches typical read-view render caps, so a
   clip looks the same while composing as when viewed); override via
   options.video.maxHeight/maxWidth (writes --rte-video-max-h /
   --rte-video-max-w) or the tokens at :root. The resize module clears these
   inline (max-*: none) once the user drags a size, so dragging larger than the
   cap still works. */
.yjd-rich-editor .inserted-video,
.yjd-content .inserted-video,
.yjd-content video {
  max-height: var(--rte-video-max-h, 480px);
  max-width: var(--rte-video-max-w, 100%);
}

.yjd-rich-editor .inserted-video {
  background: #000;
}

/* === TAG POPUP === */
.yjd-rich-editor .tag-popup {
  position: absolute;
  z-index: 10000;
  background: var(--rte-bg);
  font-family: var(--rte-ui);
  border-radius: var(--rte-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: none;
  margin: 0;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.18);
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tag-popup {
  max-height: 80vh;
  /* không vượt quá 80% chiều cao viewport */
  overflow-y: auto;
  /* chỉ cuộn khi cần */
}

.tag-suggestions-container {
  max-height: 200px;
  /* nếu nhiều gợi ý thì chỉ cho hiển thị tối đa 200px */
  overflow-y: auto;
}
.yjd-rich-editor .tag-popup.visible {
  display: block;
}

.yjd-rich-editor .tag-popup-content {
  display: flex;
  flex-direction: column;
  /* The popup shell itself carries the design's 14px padding; element
     margins (title 12px, labels 5px, button row 14px) set the rhythm. */
  gap: 0;
  padding: 0;
}


.yjd-rich-editor .tag-type-container{
  gap: 8px;
  display: flex;
  flex-direction: column;
}

/* === CUSTOM TAGS === */
.yjd-rich-editor .custom-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  margin: 0 2px;
}

.yjd-rich-editor .custom-tag.tag-mention {
  background: var(--rte-info-weak);
  color: var(--rte-info);
}

.yjd-rich-editor .custom-tag.tag-hashtag {
  background: var(--rte-success-weak);
  color: var(--rte-success);
}

.yjd-rich-editor .custom-tag.tag-custom {
  background: var(--rte-warning-weak);
  color: var(--rte-warning);
}

.yjd-rich-editor .custom-tag:hover {
  opacity: 0.8;
}

/* === IMPORT POPUP === */
.yjd-rich-editor .import-popup {
  position: absolute;
  z-index: 10000;
  background: var(--rte-bg);
  border: 1px solid var(--rte-table-border);
  border-radius: var(--rte-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: none;
  width: 400px;
  max-width: 90vw;
  /* Prevent focus and click on popup container */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.yjd-rich-editor .import-popup.visible {
  display: block;
}

.yjd-rich-editor .import-popup-content {
  padding: 0;
}

.yjd-rich-editor .import-popup-title {
  margin: 0 0 20px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rte-ink);
}

.yjd-rich-editor .import-type-container {
  margin-bottom: 20px;
}

.yjd-rich-editor .import-input-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--rte-ink);
}

.yjd-rich-editor .import-type-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rte-table-border);
  border-radius: 6px;
  font-size: 14px;
  background: white;
  color: var(--rte-ink);
  cursor: pointer;
  box-sizing: border-box;
}

.yjd-rich-editor .import-type-select:focus {
  outline: none;
    border-color: var(--rte-accent, var(--rte-focus));
    box-shadow: 0 0 0 3px var(--rte-accent-ring, rgba(59, 130, 246, 0.1));
}

.yjd-rich-editor .import-file-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rte-table-border);
  border-radius: 6px;
  font-size: 14px;
  background: white;
  color: var(--rte-ink);
  margin-bottom: 16px;
  cursor: pointer;
  box-sizing: border-box;
}

.yjd-rich-editor .import-file-input:disabled {
  background-color: var(--rte-chrome-2);
  cursor: not-allowed;
  opacity: 0.5;
}

.yjd-rich-editor .import-file-input:focus {
  outline: none;
  border-color: var(--rte-accent, var(--rte-focus));
  box-shadow: 0 0 0 3px var(--rte-accent-ring, rgba(59, 130, 246, 0.1));
}

.yjd-rich-editor .import-file-info {
  padding: 12px;
  background-color: var(--rte-quote-bg);
  border: 1px solid var(--rte-border);
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--rte-ink);
}

.yjd-rich-editor .import-file-info div {
  margin-bottom: 4px;
}

.yjd-rich-editor .import-file-info div:last-child {
  margin-bottom: 0;
}

.yjd-rich-editor .import-button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.yjd-rich-editor .import-button {
  padding: 10px 20px;
  border: 1px solid var(--rte-table-border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.yjd-rich-editor .import-button:hover {
  background-color: var(--rte-chrome-2);
}

.yjd-rich-editor .import-button.import-button-main {
  background-color: var(--rte-accent);
  color: var(--rte-accent-ink-on, #ffffff);
  border-color: var(--rte-accent);
}

.yjd-rich-editor .import-button.import-button-main:hover {
  background-color: var(--rte-accent-ink);
}

.yjd-rich-editor .import-button.import-button-main:disabled {
  background-color: var(--rte-muted);
  border-color: var(--rte-muted);
  cursor: not-allowed;
}

.yjd-rich-editor .import-button.cancel-button {
  background-color: white;
  color: var(--rte-muted);
}

.yjd-rich-editor .import-button.cancel-button:hover {
  background-color: var(--rte-quote-bg);
}

/* === IMPORTED CONTENT === */
.yjd-rich-editor .imported-content {
  margin: 16px 0;
  padding: 16px;
  border: 1px dashed var(--rte-table-border);
  border-radius: 6px;
  background-color: var(--rte-quote-bg);
}

.yjd-rich-editor .imported-content.html-content {
  border-color: var(--rte-info);
  background-color: var(--rte-info-weak);
}

.yjd-rich-editor .imported-content.excel-content {
  border-color: var(--rte-success);
  background-color: var(--rte-success-weak);
}

.yjd-rich-editor .imported-content.text-content {
  border-color: var(--rte-warning);
  background-color: var(--rte-warning-weak);
}

.yjd-rich-editor .imported-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.yjd-rich-editor .imported-table th,
.yjd-rich-editor .imported-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--rte-border);
}

.yjd-rich-editor .imported-table th {
  background-color: var(--rte-chrome-2);
  font-weight: 600;
  color: var(--rte-ink);
}

.yjd-rich-editor .imported-table tr:hover {
  background-color: var(--rte-quote-bg);
}

.yjd-rich-editor .imported-content p {
  margin: 8px 0;
  line-height: 1.6;
  color: var(--rte-ink);
}

.yjd-rich-editor .imported-content p:first-child {
  margin-top: 0;
}

.yjd-rich-editor .imported-content p:last-child {
  margin-bottom: 0;
}

/* === CODE VIEW === */
.yjd-rich-editor .code-view-textarea {
  width: 100%;
  height: 500px;
  font-family: var(--rte-mono);
  font-size: 14px;
  line-height: 1.5;
  padding: 16px;
  background-color: var(--rte-chrome-2);
  color: var(--rte-ink);
  resize: vertical;
  border: none;
  outline: none;
  white-space: pre;
  word-wrap: break-word;
  tab-size: 2;
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .yjd-rich-editor .code-view-textarea {
    font-size: 13px;
    padding: 12px;
  }
  
  .yjd-rich-editor.code-view-active::after {
    top: 5px;
    right: 5px;
    font-size: 11px;
    padding: 3px 6px;
  }
}

/* === RESIZE HANDLES === */
.yjd-rich-editor .resize-handles-container {
  position: absolute;
  pointer-events: none;
  z-index: 997; /* Lower than all toolbar elements */
  display: none;
}

.yjd-rich-editor .resize-handles-container.active {
  display: block;
}

/* Image align bar (shown above a selected image). */
.yjd-rich-editor .yjd-image-align-bar {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--rte-bg);
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  box-shadow: var(--rte-shadow-sm);
  pointer-events: auto;
  z-index: 998;
}
/* Flipped below the image when there isn't room above (image near the top —
   otherwise the bar hides under the toolbar). */
.yjd-rich-editor .yjd-image-align-bar.below {
  top: calc(100% + 6px);
}
.yjd-rich-editor .yjd-image-align-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--rte-ink);
}
.yjd-rich-editor .yjd-image-align-btn:hover { background: var(--rte-chrome-2); }
.yjd-rich-editor .yjd-image-align-btn.active {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .yjd-image-align-btn .icon { display: inline-flex; }
.yjd-rich-editor .yjd-image-align-btn .icon svg { width: var(--rte-icon-size); height: var(--rte-icon-size); }

.yjd-rich-editor .resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--rte-focus);
  border: 1px solid var(--rte-accent-ink-on);
  border-radius: 50%;
  pointer-events: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  z-index: 999; /* Higher than container but lower than toolbars */
}

/* Invisible enlarged grab target around the small visible dot: an 8px handle is
   easy to miss by a few pixels, and a miss starts a text selection instead of a
   resize. This keeps the dot small but makes it ~24px easy to grab. */
.yjd-rich-editor .resize-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

.yjd-rich-editor .resize-handle:hover {
  background-color: var(--rte-link);
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.yjd-rich-editor .resize-handle-nw {
  top: -4px;
  left: -4px;
  cursor: nw-resize;
}

.yjd-rich-editor .resize-handle-ne {
  top: -4px;
  right: -4px;
  cursor: ne-resize;
}

.yjd-rich-editor .resize-handle-sw {
  bottom: -4px;
  left: -4px;
  cursor: sw-resize;
}

.yjd-rich-editor .resize-handle-se {
  bottom: -4px;
  right: -4px;
  cursor: se-resize;
}

/* Resizing state styles */
.yjd-rich-editor .inserted-image.resizing,
.yjd-rich-editor .inserted-video.resizing,
.yjd-rich-editor .rich-editor-table.resizing {
  outline: 2px solid var(--rte-focus);
  outline-offset: 2px;
  opacity: 0.8;
}

.yjd-rich-editor .inserted-image.resizing {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.yjd-rich-editor .inserted-video.resizing {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.yjd-rich-editor .rich-editor-table.resizing {
  -webkit-user-select: none;
  user-select: none;
}

.yjd-rich-editor .rich-editor-table.resizing td {
  pointer-events: none;
}

/* Selection indicator for resizable elements */
.yjd-rich-editor .inserted-image:hover,
.yjd-rich-editor .inserted-video:hover,
.yjd-rich-editor .rich-editor-table:hover {
  outline: 1px solid var(--rte-focus);
  outline-offset: 1px;
  cursor: pointer;
}



/* Responsive resize handles */
@media (max-width: 768px) {
  .yjd-rich-editor .resize-handle {
    width: 12px;
    height: 12px;
  }
  
  .yjd-rich-editor .resize-handle-nw {
    top: -6px;
    left: -6px;
  }
  
  .yjd-rich-editor .resize-handle-ne {
    top: -6px;
    right: -6px;
  }
  
  .yjd-rich-editor .resize-handle-sw {
    bottom: -6px;
    left: -6px;
  }
  
  .yjd-rich-editor .resize-handle-se {
    bottom: -6px;
    right: -6px;
  }
}



/* === RESPONSIVE DESIGN === */
/* Mobile and Tablet Styles - Screens smaller than 850px */
@media (max-width: 849px) {
  /* Editor wrapper adjustments */
  .yjd-rich-editor {
    margin: 0;
    width: 100% !important;
    max-width: 100% !important;
  }
    .yjd-rich-editor .link-popup,
    .yjd-rich-editor .image-popup,
    .yjd-rich-editor .video-popup,
    .yjd-rich-editor .tag-popup {
      width: unset !important;
    }
  /* Editor area adjustments */
  .yjd-rich-editor .rich-editor-area {
    padding: 12px;
    min-height: 150px;
    font-size: 14px;
    line-height: 1.4;
  }

  /* Status bar adjustments */
  .yjd-rich-editor .rich-editor-statusbar {
    padding: 6px 8px;
    font-size: 11px;
    flex-wrap: wrap;
    gap: 8px;
  }


  /* Popup and dropdown adjustments */
  .yjd-rich-editor .editor-popup,
  .yjd-rich-editor .editor-dropdown {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 320px !important;
    max-height: 80vh !important;
    overflow-y: auto;
    z-index: 10000;
  }

  .yjd-rich-editor .editor-popup::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

  /* Color picker adjustments */
  .yjd-rich-editor .color-picker {
    width: 100% !important;
    max-width: 280px !important;
  }

  .yjd-rich-editor .color-picker-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
  }

  .yjd-rich-editor .color-picker-item {
    width: 32px !important;
    height: 32px !important;
  }

  /* Table popup adjustments */
  .yjd-rich-editor .table-popup {
    max-width: 300px !important;
  }

  .yjd-rich-editor .table-size-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 2px !important;
  }

  .yjd-rich-editor .table-size-cell {
    width: 24px !important;
    height: 24px !important;
  }

  /* List picker adjustments */
  .yjd-rich-editor .list-picker {
    width: 100% !important;
    max-width: 250px !important;
  }

  .yjd-rich-editor .list-picker-btn {
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Text align picker adjustments */
  .yjd-rich-editor .text-align-picker {
    width: 100% !important;
    max-width: 200px !important;
  }

  /* Media popups adjustments */
  .yjd-rich-editor .image-popup,
  .yjd-rich-editor .video-popup,
  .yjd-rich-editor .link-popup,
  .yjd-rich-editor .import-popup {
    width: 90% !important;
    max-width: 350px !important;
  }

  .yjd-rich-editor .media-upload-area {
    min-height: 100px !important;
    padding: 20px !important;
  }

  /* Tag popup */
  .yjd-rich-editor .tag-popup {
    width: 90% !important;
    max-width: 320px !important;
  }



  /* Emoji picker adjustments */
  .yjd-rich-editor .emoji-picker {
    width: 100% !important;
    max-width: 300px !important;
    max-height: 350px !important;
  }

  .yjd-rich-editor .emoji-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 4px !important;
  }

  .yjd-rich-editor .emoji-item {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
  }

  /* Code view adjustments */
  .yjd-rich-editor .code-view-textarea {
    font-size: 12px !important;
    padding: 8px !important;
    line-height: 1.3 !important;
  }

  /* Content formatting adjustments */
  .yjd-rich-editor .rich-editor-area h1 {
    font-size: 1.5em !important;
    margin: 0.5em 0 !important;
  }

  .yjd-rich-editor .rich-editor-area h2 {
    font-size: 1.3em !important;
    margin: 0.5em 0 !important;
  }

  .yjd-rich-editor .rich-editor-area h3 {
    font-size: 1.1em !important;
    margin: 0.5em 0 !important;
  }

  .yjd-rich-editor .rich-editor-area p {
    margin: 0.8em 0 !important;
  }

  .yjd-rich-editor .rich-editor-area ul,
  .yjd-rich-editor .rich-editor-area ol {
    padding-left: 20px !important;
    margin: 0.8em 0 !important;
  }

  .yjd-rich-editor .rich-editor-area blockquote {
    padding-left: 12px !important;
    margin: 0.8em 0 !important;
    font-size: 14px !important;
  }

  .yjd-rich-editor .rich-editor-area table {
    font-size: 13px !important;
    overflow-x: auto !important;
    display: block !important;
    white-space: nowrap !important;
  }

  .yjd-rich-editor .rich-editor-area th,
  .yjd-rich-editor .rich-editor-area td {
    padding: 6px 8px !important;
    min-width: 60px !important;
  }


}

@media (max-width: 290px) {
  .yjd-rich-editor .emoji-picker {
    max-width: calc(100vw - 20px) !important;
  }

  .yjd-rich-editor .emoji-grid {
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)) !important;
  }
}

/* Print styles */
@media print {
  .yjd-rich-editor .rich-editor-toolbar-1,
  .yjd-rich-editor .rich-editor-toolbar-2,
  .yjd-rich-editor .rich-editor-statusbar {
    display: none !important;
  }

  .yjd-rich-editor {
    border: none !important;
    box-shadow: none !important;
  }

  .yjd-rich-editor .rich-editor-area {
    padding: 0 !important;
    background: white !important;
    color: black !important;
  }
}

/* === POPUP CONTAINER === */
.yjd-rich-editor .rich-editor-popup-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1005;
  /* Pure positioning layer — must NOT clip/scroll, or popovers get cut off in a
     short editor. Each popup caps its own height + scrolls individually. */
  overflow: visible;
}

/* Allow interaction with interactive elements inside popups */
.yjd-rich-editor .emoji-picker-popup button,
.yjd-rich-editor .color-picker-popup button,
.yjd-rich-editor .custom-select-popup button,
.yjd-rich-editor .heading-select-popup button,
.yjd-rich-editor .capitalization-select-popup button,
.yjd-rich-editor .font-family-select-popup button,
.yjd-rich-editor .line-height-select-popup button,
.yjd-rich-editor .text-size-select-popup button,
.yjd-rich-editor .link-popup button,
.yjd-rich-editor .link-popup input,
.yjd-rich-editor .link-popup select,
.yjd-rich-editor .image-popup button,
.yjd-rich-editor .image-popup input,
.yjd-rich-editor .image-popup select,
.yjd-rich-editor .video-popup button,
.yjd-rich-editor .video-popup input,
.yjd-rich-editor .video-popup select,
.yjd-rich-editor .tag-popup button,
.yjd-rich-editor .tag-popup input,
.yjd-rich-editor .tag-popup select,
.yjd-rich-editor .table-popup button,
.yjd-rich-editor .table-popup input,
.yjd-rich-editor .text-align-picker-popup button,
.yjd-rich-editor .list-picker-popup button,
.yjd-rich-editor .import-popup button,
.yjd-rich-editor .import-popup input,
.yjd-rich-editor .import-popup select,
.yjd-rich-editor .yjd-button-confirm,
.yjd-rich-editor .yjd-button-cancel,
.yjd-rich-editor .yjd-input,
.yjd-rich-editor .yjd-select-input,
.yjd-rich-editor .yjd-custom-upload-button,
.yjd-rich-editor .yjd-suggestion-button,
.yjd-rich-editor .list-button,
.yjd-rich-editor .table-toolbar-btn,
.yjd-rich-editor .custom-color-input,
.yjd-rich-editor .import-type-select,
.yjd-rich-editor .custom-tag,
.yjd-rich-editor .image-input-hidden,
.yjd-rich-editor .video-input-hidden,
.yjd-rich-editor .tag-type-select,
.yjd-rich-editor .tag-value-input,
.yjd-rich-editor .import-input,
.yjd-rich-editor .import-file-input,
.yjd-rich-editor .import-url-input,
.yjd-rich-editor .import-text-input,
.yjd-rich-editor .import-html-input,
.yjd-rich-editor .import-json-input,
.yjd-rich-editor .import-markdown-input,
.yjd-rich-editor .import-csv-input,
.yjd-rich-editor .import-xml-input,
.yjd-rich-editor .import-yaml-input,
.yjd-rich-editor .import-toml-input {
  pointer-events: auto !important;
}

.yjd-rich-editor .rich-editor-popup-container > * {
  pointer-events: auto;
}

/* Ensure popups in container have proper positioning */
.yjd-rich-editor .rich-editor-popup-container .link-popup,
.yjd-rich-editor .rich-editor-popup-container .color-picker-popup,
.yjd-rich-editor .rich-editor-popup-container .emoji-picker-popup,
.yjd-rich-editor .rich-editor-popup-container .image-popup,
.yjd-rich-editor .rich-editor-popup-container .video-popup,
.yjd-rich-editor .rich-editor-popup-container .table-popup,
.yjd-rich-editor .rich-editor-popup-container .tag-popup,
.yjd-rich-editor .rich-editor-popup-container .import-popup,
.yjd-rich-editor .rich-editor-popup-container .text-align-picker-popup,
.yjd-rich-editor .rich-editor-popup-container .list-picker-popup,
.yjd-rich-editor .rich-editor-popup-container .custom-select-popup {
  position: absolute !important;
  z-index: 1001 !important;
}
/* =====================================================================
   DESIGN SYSTEM v2 — "Calm writing studio"
   A friendly, cohesive theme. Everything below is driven by tokens so
   every surface (toolbar, popups, find/replace, tables, floating tools)
   shares the same palette, radius, shadow and motion.
   This block is appended last so it themes the components above.
   ===================================================================== */

/* Default token palette lives on :root (NOT .yjd-rich-editor) so an app can
   override any token at :root — or on any ancestor such as html[data-theme] —
   and the editor inherits it. Defining these on .yjd-rich-editor used to block
   ancestor/:root overrides. */
:root {
  /* Palette — Editor UI 2.0 */
  --rte-bg: #ffffff;
  --rte-bg-2: #fafbfc;
  --rte-chrome: #fcfcfd;
  --rte-chrome-2: #f3f4f6;
  --rte-chrome-3: #eceef1;
  --rte-border: #e3e5ea;
  --rte-border-strong: #ced2d9;
  --rte-hairline: #eceef1;
  --rte-ink: #15171c;
  --rte-ink-2: #3c424d;
  --rte-muted: #6d7480;
  --rte-faint: #98a0ac;
  --rte-accent: #5b5bd6;
  --rte-accent-ink: #4a49cf;
  --rte-accent-weak: #eeeefc;
  --rte-accent-ring: rgba(91, 91, 214, 0.24);
  --rte-accent-ink-on: #ffffff; /* text/icon colour on an accent fill */
  --rte-danger: #d0343a;
  --rte-danger-weak: #fdecec;
  --rte-success: #0f8a5f;
  --rte-success-weak: #e7f5ef;
  --rte-warning: #a86500;
  --rte-warning-weak: #fdf3e0;
  --rte-info: #1f6fdc;
  --rte-info-weak: #ebf3fd;
  --rte-focus: var(--rte-accent, #3b82f6);
  --rte-sel: rgba(91, 91, 214, 0.16);
  /* Content palette (editor body + read-view) */
  --rte-link: #2f5fd4;
  --rte-code-bg: #f2f3f5;
  --rte-code-ink: inherit;
  --rte-code-block-bg: #14161a;
  --rte-code-block-ink: #e6e8ec;
  --rte-quote-border: #ced2d9;
  --rte-quote-bg: #fafbfc;
  --rte-quote-ink: #4b515c;
  --rte-table-border: #dfe2e7;
  /* Shape & depth */
  --rte-radius: 10px;
  /* Concentric inner radius for the chrome bars (toolbar/statusbar/area) which
     sit 1px inside the container's border. Using the same radius as the outer
     frame makes the curves non-concentric, so the bar's background overlaps the
     1px border at the corners and the border looks broken there. Keep this in
     sync with the .yjd-rich-editor border-width (1px). */
  --rte-radius-inner: calc(var(--rte-radius) - 1px);
  --rte-radius-md: 8px;
  --rte-radius-sm: 6px;
  --rte-radius-xs: 4px;
  --rte-shadow-sm: 0 1px 2px rgba(16, 18, 23, 0.07);
  --rte-shadow: 0 10px 28px -8px rgba(16, 18, 23, 0.20), 0 2px 6px rgba(16, 18, 23, 0.06);
  --rte-shadow-lg: 0 28px 64px -16px rgba(16, 18, 23, 0.32), 0 4px 12px rgba(16, 18, 23, 0.08);
  --rte-t: 140ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Metrics: control height (buttons, inputs, selects) + standard gap.
     Density knobs — override at :root or on the wrapper. Controls grow to a
     44px touch target below 640px (see the mobile block). */
  --rte-ctl: 30px;
  --rte-gap: 6px;

  /* UI font for the chrome (toolbar, menus, popups). Content keeps the host
     app's font via `font-family: inherit` on the editor area. */
  --rte-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --rte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* One knob for every UI glyph (toolbar, menus, chips, popups). Override at
     :root, on any ancestor, or per-editor via options.iconSize. */
  --rte-icon-size: 16px;
}

.yjd-rich-editor {
  border: 1px solid var(--rte-border) !important;
  border-radius: var(--rte-radius) !important;
  background: var(--rte-bg);
  color: var(--rte-ink);
  box-shadow: var(--rte-shadow-sm);
  font-family: var(--rte-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Distraction-free full screen: fill the viewport (Esc exits). The editor area
   already flexes to fill the column, so no per-child sizing is needed. */
.yjd-rich-editor.yjd-fullscreen {
  /* position/inset/z-index are !important like width/height below: the editor
     sets an inline `position: relative` on this same wrapper (editor.js), and a
     layered rule can't beat an inline declaration — so fullscreen would only
     resize in-flow (grow taller) instead of overlaying. !important (author) wins
     over inline non-important and pins it to the viewport. */
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
body.yjd-fullscreen-lock { overflow: hidden; }

/* Use a friendly system stack everywhere (overrides the forced "Inter") */
.yjd-rich-editor .rich-editor-toolbar-container button,
.yjd-rich-editor .rich-editor-toolbar-container input,
.yjd-rich-editor .rich-editor-toolbar-container select,
.yjd-rich-editor .rich-editor-toolbar-container textarea,
.yjd-rich-editor .rich-editor-popup-container button,
.yjd-rich-editor .rich-editor-popup-container input,
.yjd-rich-editor .rich-editor-popup-container select,
.yjd-rich-editor .rich-editor-popup-container textarea {
  font-family: var(--rte-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}

/* Keep rounded frame corners now that the wrapper is overflow:visible (so the
   chrome bars don't show square corners over the rounded border). The outermost
   visible bar shows its radius; covered ones are harmless. */
.yjd-rich-editor .rich-editor-toolbar-container {
  border-top-left-radius: var(--rte-radius-inner);
  border-top-right-radius: var(--rte-radius-inner);
  /* Clip the (square-cornered, chrome-filled) toolbar rows to the rounded top
     corners — otherwise the top row's square background bleeds over the curved
     1px frame border and the border looks broken at the two top corners. */
  overflow: hidden;
}
/* The always-top row must carry the same rounded top corners so its background
   never fills the corner square (belt-and-suspenders with the clip above). */
.yjd-rich-editor .rich-editor-toolbar-1 {
  border-top-left-radius: var(--rte-radius-inner);
  border-top-right-radius: var(--rte-radius-inner);
}
.yjd-rich-editor .rich-editor-statusbar {
  border-bottom-left-radius: var(--rte-radius-inner);
  border-bottom-right-radius: var(--rte-radius-inner);
}
.yjd-rich-editor .rich-editor-area {
  border-radius: var(--rte-radius-inner); /* fallback when there's no toolbar/statusbar */
}

/* ---------- Toolbar ---------- */
.yjd-rich-editor .rich-editor-toolbar-container {
  background: var(--rte-chrome);
  border-bottom: 1px solid var(--rte-border);
}
/* The wrapper is a flex column: with a tall document the default flex-shrink
   COMPRESSED the toolbar (measured 15px) while the area overflowed. Chrome
   bars never shrink — the content area is the scroll surface. */
.yjd-rich-editor .rich-editor-toolbar-container,
.yjd-rich-editor .rich-editor-statusbar {
  flex-shrink: 0;
}
/* Long documents can still scroll the PAGE (auto-height hosts) — pin the
   chrome bar to the viewport top so the tools never scroll away mid-edit.
   The prompt layout's bar sits at the BOTTOM of its pill, so it opts out. */
.yjd-rich-editor:not([data-layout="prompt"]) .rich-editor-toolbar-container {
  position: sticky;
  top: 0;
  z-index: 1100;
}
.yjd-rich-editor .rich-editor-toolbar-1,
.yjd-rich-editor .rich-editor-toolbar-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start; /* pack left; override legacy space-between */
  column-gap: 0;
  row-gap: 4px;
  /* 30px controls + 7px vertical padding = the 44px chrome bar of UI 2.0. */
  padding: 7px 8px;
}
.yjd-rich-editor .rich-editor-toolbar-2.visible {
  border-top: 1px solid var(--rte-border);
}
/* UI 2.0: clusters separated by hairline dividers — the design's exact recipe
   (a 1px × 20px centred line with 4px breathing room on each side), on the
   primary row AND the overflow rows. The divider is a ::before inside each
   non-first group so the responsive reflow needs no extra DOM. */
.yjd-rich-editor .toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  border-right: none;
  margin: 0;
  padding: 0;
}
.yjd-rich-editor .rich-editor-toolbar-1 .toolbar-group + .toolbar-group {
  /* Spacing between toolbar GROUPS. --rte-toolbar-group-gap is the named knob;
     it falls back to the generic --rte-gap, then 6px — so the default is
     unchanged and an app can widen group separation with one token. */
  margin-left: var(--rte-toolbar-group-gap, var(--rte-gap, 6px));
}
/* Overflow rows: spacing comes ONLY from the row's flex gap (the packer's
   invariant) — the divider rides inside the group, no extra margin. */
.yjd-rich-editor .rich-editor-toolbar-1 .toolbar-group + .toolbar-group::before,
.yjd-rich-editor .rich-editor-toolbar-2-row .toolbar-group + .toolbar-group::before {
  content: '';
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 20px;
  background: var(--rte-border);
  /* Trailing side = this margin + the group's own 2px flex gap, so it lands on
     exactly the group gap — matching the token-driven lead side. */
  margin-right: max(0px, calc(var(--rte-toolbar-group-gap, var(--rte-gap, 6px)) - 2px));
}


/* ---------- Buttons (toolbar + dropdown triggers) ---------- */
.yjd-rich-editor .rich-editor-toolbar-btn,
.yjd-rich-editor .custom-select-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--rte-ctl, 30px);
  height: var(--rte-ctl, 30px);
  padding: 0 8px;
  font-size: 12.5px;
  border: 1px solid transparent;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-ink);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--rte-t), color var(--rte-t),
    box-shadow var(--rte-t), border-color var(--rte-t);
}
.yjd-rich-editor .rich-editor-toolbar-btn:hover,
.yjd-rich-editor .custom-select-button:hover {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
}
.yjd-rich-editor .rich-editor-toolbar-btn.active {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
  border-color: transparent;
}
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg,
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg path {
  fill: var(--rte-accent-ink);
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .rich-editor-toolbar-btn:disabled,
.yjd-rich-editor .rich-editor-toolbar-btn[disabled] {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}
.yjd-rich-editor .rich-editor-toolbar-btn:focus-visible,
.yjd-rich-editor .custom-select-button:focus-visible {
  outline: none;
  border-color: var(--rte-accent);
  box-shadow: 0 0 0 3px var(--rte-accent-ring);
}

/* ---------- Status bar ---------- */
.yjd-rich-editor .rich-editor-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  background: var(--rte-chrome-2);
  border-top: 1px solid var(--rte-border);
}
.yjd-rich-editor .rich-editor-breadcrumb,
.yjd-rich-editor .wordcount {
  color: var(--rte-muted);
  font-family: var(--rte-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Editor surface ---------- */
.yjd-rich-editor .rich-editor-area {
  color: var(--rte-ink);
  font-size: 16px;
  line-height: 1.72;
  padding: 22px 24px;
}
/* Text selection uses the accent wash so native selection, AI ranges and
   remote-peer highlights all read as the same system. */
.yjd-rich-editor .rich-editor-area ::selection,
.yjd-content ::selection {
  background: var(--rte-sel);
}
.yjd-rich-editor .rich-editor-area a {
  color: var(--rte-link);
  text-decoration-color: var(--rte-accent-ring);
  text-underline-offset: 2px;
}
/* Quiet editorial quote: hairline bar, no fill (UI 2.0). */
.yjd-rich-editor .rich-editor-area blockquote {
  border-left: 2px solid var(--rte-quote-border);
  background: var(--rte-quote-bg);
  border-radius: 0;
  padding: 4px 16px 4px 18px;
  color: var(--rte-quote-ink);
  margin: 12px 0;
}
.yjd-rich-editor .rich-editor-area code {
  background: var(--rte-code-bg);
  color: var(--rte-code-ink);
  border-radius: var(--rte-radius-xs);
  padding: 2px 5px;
  font-size: 0.88em;
}
.yjd-rich-editor .rich-editor-area pre {
  background: var(--rte-code-block-bg);
  color: var(--rte-code-block-ink);
  border-radius: var(--rte-radius-md);
  padding: 14px 16px;
  border: none;
}
.yjd-rich-editor .rich-editor-area pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* ---------- Popups (shared shell) ---------- */
.yjd-rich-editor .color-picker-popup,
.yjd-rich-editor .custom-select-popup,
.yjd-rich-editor .heading-select-popup,
.yjd-rich-editor .capitalization-select-popup,
.yjd-rich-editor .font-family-select-popup,
.yjd-rich-editor .line-height-select-popup,
.yjd-rich-editor .text-size-select-popup,
.yjd-rich-editor .link-popup,
.yjd-rich-editor .image-popup,
.yjd-rich-editor .video-popup,
.yjd-rich-editor .tag-popup,
.yjd-rich-editor .import-popup,
.yjd-rich-editor .table-popup,
.yjd-rich-editor .text-align-picker-popup,
.yjd-rich-editor .emoji-picker-popup {
  /* Popover recipe (UI 2.0): 1px strong border, 8px radius, --rte-shadow. */
  background: var(--rte-bg);
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md);
  box-shadow: var(--rte-shadow);
}

/* Dropdown list items */
.yjd-rich-editor .custom-select-item-button {
  border-radius: var(--rte-radius-sm);
  color: var(--rte-ink);
  transition: background var(--rte-t), color var(--rte-t);
}
.yjd-rich-editor .custom-select-item-button:hover {
  background: var(--rte-chrome-2);
}
.yjd-rich-editor .custom-select-item-button.current {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .custom-select-item-button.current .item-checkmark {
  color: var(--rte-accent-ink);
}

/* ---------- Forms inside popups ---------- */
.yjd-rich-editor .yjd-input,
.yjd-rich-editor .yjd-select-input {
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-sm);
  color: var(--rte-ink);
  transition: border-color var(--rte-t), box-shadow var(--rte-t);
}
.yjd-rich-editor .yjd-input:focus,
.yjd-rich-editor .yjd-select-input:focus {
  outline: none;
  border-color: var(--rte-accent);
  box-shadow: 0 0 0 3px var(--rte-accent-ring);
}
.yjd-rich-editor .yjd-input-title {
  color: var(--rte-ink);
  font-weight: 600;
}
.yjd-rich-editor .yjd-input-label {
  color: var(--rte-muted);
}
.yjd-rich-editor .yjd-button-confirm {
  background: var(--rte-accent);
  color: var(--rte-accent-ink-on);
  border: none;
  border-radius: var(--rte-radius-sm);
  transition: background var(--rte-t);
}
.yjd-rich-editor .yjd-button-confirm:hover {
  background: var(--rte-accent-ink);
}
.yjd-rich-editor .yjd-button-cancel {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  transition: background var(--rte-t);
}
.yjd-rich-editor .yjd-button-cancel:hover {
  background: var(--rte-chrome-3);
}
.yjd-rich-editor .yjd-custom-upload-button {
  border-radius: var(--rte-radius-sm);
  border: 1px solid var(--rte-border-strong);
  color: var(--rte-ink-2);
  background: var(--rte-chrome);
  transition: background var(--rte-t), border-color var(--rte-t);
}
.yjd-rich-editor .yjd-custom-upload-button:hover {
  border-color: var(--rte-accent);
}

/* ---------- Floating toolbars (block + table) ---------- */
.yjd-rich-editor .block-toolbar-container,
.yjd-rich-editor .table-toolbar-container {
  background: var(--rte-bg);
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md);
  box-shadow: var(--rte-shadow);
  padding: 4px;
  gap: 2px;
}
.yjd-rich-editor .block-toolbar-btn,
.yjd-rich-editor .table-toolbar-btn {
  border: 1px solid transparent;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-ink);
  transition: background var(--rte-t), color var(--rte-t);
}
.yjd-rich-editor .block-toolbar-btn:hover,
.yjd-rich-editor .table-toolbar-btn:hover {
  background: var(--rte-chrome-2);
}
.yjd-rich-editor .block-toolbar-btn.active {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .block-toolbar-btn.active .icon svg,
.yjd-rich-editor .block-toolbar-btn.active .icon svg path {
  fill: var(--rte-accent-ink);
}

/* ---------- Tables ---------- */
.yjd-rich-editor .rich-editor-table td {
  border: 1px solid var(--rte-border-strong) !important;
}
.yjd-rich-editor .rich-editor-table td:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--rte-accent);
  background: var(--rte-accent-weak);
}
.yjd-rich-editor .table-grid-cell.highlighted {
  background: var(--rte-accent);
  border-color: var(--rte-accent);
}

/* ---------- Resize handles ---------- */
.yjd-rich-editor .resize-handle {
  background: var(--rte-accent) !important;
  border: 2px solid var(--rte-accent-ink-on) !important;
  border-radius: 50% !important;
  box-shadow: var(--rte-shadow-sm) !important;
}

/* ---------- Find & Replace panel ---------- */
.yjd-rich-editor .yjd-find-replace {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1100;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--rte-bg);
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md);
  box-shadow: var(--rte-shadow);
  font: 13px/1.4 var(--rte-ui);
  max-width: calc(100% - 20px);
}
.yjd-rich-editor .yjd-find-replace.open {
  display: flex;
}
.yjd-rich-editor .yjd-find-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.yjd-rich-editor .yjd-find-input {
  flex: 1 1 auto;
  min-width: 150px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-sm);
  color: var(--rte-ink);
  background: var(--rte-bg);
  transition: border-color var(--rte-t), box-shadow var(--rte-t);
}
.yjd-rich-editor .yjd-find-input:focus {
  outline: none;
  border-color: var(--rte-accent);
  box-shadow: 0 0 0 3px var(--rte-accent-ring);
}
.yjd-rich-editor .yjd-find-count {
  min-width: 46px;
  text-align: center;
  color: var(--rte-muted);
  font-variant-numeric: tabular-nums;
}
.yjd-rich-editor .yjd-find-btn {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-chrome);
  color: var(--rte-ink);
  cursor: pointer;
  transition: background var(--rte-t), color var(--rte-t), border-color var(--rte-t),
    box-shadow var(--rte-t);
}
.yjd-rich-editor .yjd-find-btn:hover {
  background: var(--rte-chrome-2);
}
.yjd-rich-editor .yjd-find-btn:focus-visible {
  outline: none;
  border-color: var(--rte-accent);
  box-shadow: 0 0 0 3px var(--rte-accent-ring);
}
.yjd-rich-editor .yjd-find-icon {
  width: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}
.yjd-rich-editor .yjd-find-toggle.active {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
  border-color: transparent;
}
.yjd-rich-editor .yjd-find-replace .yjd-find-btn.yjd-find-close:hover {
  background: var(--rte-danger-weak);
  color: var(--rte-danger);
  border-color: #f6caca;
}
.yjd-rich-editor .yjd-find-replace-input {
  flex: 1 1 auto;
}
.yjd-rich-editor .yjd-find-row .yjd-find-btn:not(.yjd-find-icon) {
  flex: 0 0 auto;
}

/* Match highlights */
.yjd-rich-editor mark.yjd-find-hit {
  background: #fff1b8;
  color: inherit;
  border-radius: var(--rte-radius-xs);
}
.yjd-rich-editor mark.yjd-find-hit.active {
  background: var(--rte-accent);
  color: var(--rte-accent-ink-on);
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .yjd-rich-editor * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =====================================================================
   DESIGN SYSTEM v2.1 — minimal & light refinements
   Icon unification, friendlier popovers, lighter inputs & buttons.
   ===================================================================== */

/* ---------- Icons: one size, one color ---------- */
/* Convert the hard-coded greys to currentColor so every icon follows the
   button's text colour (and the accent on active). Outline icons (stroke)
   and the deliberately-coloured "no colour" swatch are left untouched. */
.yjd-rich-editor .icon svg [fill="var(--rte-ink)"],
.yjd-rich-editor .icon svg [fill="#231F20"],
.yjd-rich-editor .icon svg [fill="#010101"],
.yjd-rich-editor .icon svg[fill="var(--rte-ink)"],
.yjd-rich-editor .block-toolbar-btn svg [fill="var(--rte-ink)"],
.yjd-rich-editor .table-toolbar-btn svg [fill="var(--rte-ink)"] {
  fill: currentColor;
}

/* Consistent icon footprint — equal height, centered, never distorted. */
.yjd-rich-editor .rich-editor-toolbar-btn .icon,
.yjd-rich-editor .block-toolbar-btn .icon,
.yjd-rich-editor .table-toolbar-btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: inherit;
}
.yjd-rich-editor .rich-editor-toolbar-btn .icon svg,
.yjd-rich-editor .block-toolbar-btn .icon svg,
.yjd-rich-editor .table-toolbar-btn .icon svg {
  width: auto !important;
  height: var(--rte-icon-size) !important;
  max-width: calc(var(--rte-icon-size) + 2px);
  display: block;
}

/* Default icon colour = quiet ink; active = accent (overrides legacy blue). */
.yjd-rich-editor .rich-editor-toolbar-btn .icon svg,
.yjd-rich-editor .rich-editor-toolbar-btn .icon svg path {
  fill: currentColor;
}
.yjd-rich-editor .rich-editor-toolbar-btn { color: var(--rte-muted); }
.yjd-rich-editor .rich-editor-toolbar-btn:hover { color: var(--rte-ink); }
.yjd-rich-editor .rich-editor-toolbar-btn.active,
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg,
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg path,
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg [fill] {
  color: var(--rte-accent-ink) !important;
  fill: var(--rte-accent-ink) !important;
}

/* ---------- Toolbar: lighter weight ---------- */
.yjd-rich-editor .rich-editor-toolbar-btn,
.yjd-rich-editor .custom-select-button {
  box-shadow: none;
}
.yjd-rich-editor .custom-select-button {
  border-color: var(--rte-border);
  /* The trigger lives in the toolbar, so it reads the toolbar surface token
     (not --rte-bg): it stays in tone with the toolbar in every theme instead of
     turning into a bright pill when an app themes the chrome but not --rte-bg. */
  background: var(--rte-chrome);
  color: var(--rte-ink);
  font-weight: 500;
}
.yjd-rich-editor .custom-select-button:hover {
  border-color: var(--rte-border-strong);
  background: var(--rte-chrome-2);
}
.yjd-rich-editor .dropdown-icon { color: var(--rte-muted); }

/* ---------- Popovers: friendly & airy ---------- */
.yjd-rich-editor .color-picker-popup,
.yjd-rich-editor .custom-select-popup,
.yjd-rich-editor .heading-select-popup,
.yjd-rich-editor .capitalization-select-popup,
.yjd-rich-editor .font-family-select-popup,
.yjd-rich-editor .line-height-select-popup,
.yjd-rich-editor .text-size-select-popup,
.yjd-rich-editor .link-popup,
.yjd-rich-editor .image-popup,
.yjd-rich-editor .video-popup,
.yjd-rich-editor .tag-popup,
.yjd-rich-editor .import-popup,
.yjd-rich-editor .table-popup,
.yjd-rich-editor .text-align-picker-popup,
.yjd-rich-editor .emoji-picker-popup {
  border-color: var(--rte-border-strong);
  border-radius: var(--rte-radius-md);
  box-shadow: var(--rte-shadow);
}

/* roomier dropdown lists */
.yjd-rich-editor .custom-select-popup,
.yjd-rich-editor .heading-select-popup,
.yjd-rich-editor .capitalization-select-popup,
.yjd-rich-editor .font-family-select-popup,
.yjd-rich-editor .line-height-select-popup,
.yjd-rich-editor .text-size-select-popup {
  padding: 6px;
}
.yjd-rich-editor .custom-select-item-button {
  padding: 8px 10px;
}

/* gentle entrance for popovers (respects reduced motion below) */
.yjd-rich-editor .color-picker-popup.visible,
.yjd-rich-editor .custom-select-popup.visible,
.yjd-rich-editor .heading-select-popup.visible,
.yjd-rich-editor .font-family-select-popup.visible,
.yjd-rich-editor .line-height-select-popup.visible,
.yjd-rich-editor .capitalization-select-popup.visible,
.yjd-rich-editor .text-size-select-popup.visible,
.yjd-rich-editor .link-popup.visible,
.yjd-rich-editor .image-popup.visible,
.yjd-rich-editor .video-popup.visible,
.yjd-rich-editor .tag-popup.visible,
.yjd-rich-editor .table-popup.visible,
.yjd-rich-editor .text-align-picker-popup.visible,
.yjd-rich-editor .yjd-find-replace.open {
  animation: rte-pop-in 90ms ease-out;
}
@keyframes rte-pop-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Inputs: minimal & light ---------- */
.yjd-rich-editor .yjd-input,
.yjd-rich-editor .yjd-select-input,
.yjd-rich-editor .yjd-find-input {
  height: var(--rte-ctl, 30px);
  padding: 0 12px;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-bg);
  color: var(--rte-ink);
  font-size: 14px;
}
/* Selects grow with their text instead of clipping it: if the environment
   inflates the font (browser minimum-font-size, OS accessibility text size,
   host CSS that our scoping can't shield), a fixed height cut the label off
   at the bottom. min-height keeps the 30px control rhythm otherwise. (#67) */
.yjd-rich-editor .yjd-select-input {
  height: auto;
  min-height: var(--rte-ctl, 30px);
}
.yjd-rich-editor .yjd-input::placeholder,
.yjd-rich-editor .yjd-select-input::placeholder,
.yjd-rich-editor .yjd-find-input::placeholder {
  color: var(--rte-muted);
  opacity: 0.7;
}
.yjd-rich-editor .yjd-input:focus,
.yjd-rich-editor .yjd-select-input:focus,
.yjd-rich-editor .yjd-find-input:focus {
  border-color: var(--rte-accent);
  box-shadow: 0 0 0 3px var(--rte-accent-ring);
}

/* ---------- Buttons: minimal & light ---------- */
.yjd-rich-editor .yjd-button-confirm,
.yjd-rich-editor .yjd-button-cancel,
.yjd-rich-editor .yjd-find-btn {
  height: 28px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--rte-radius-sm);
  box-shadow: none;
  transition: background var(--rte-t), color var(--rte-t), border-color var(--rte-t);
}
.yjd-rich-editor .yjd-button-confirm {
  background: var(--rte-accent);
  border: 1px solid var(--rte-accent);
  color: var(--rte-accent-ink-on);
}
.yjd-rich-editor .yjd-button-confirm:hover {
  background: var(--rte-accent-ink);
  border-color: var(--rte-accent-ink);
}
/* Cancel & secondary find buttons → quiet, text-like */
.yjd-rich-editor .yjd-button-cancel {
  background: transparent;
  border: 1px solid var(--rte-border);
  color: var(--rte-muted);
}
.yjd-rich-editor .yjd-button-cancel:hover {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
}
.yjd-rich-editor .yjd-find-btn:not(.yjd-find-icon) {
  background: transparent;
  border: 1px solid var(--rte-border);
  color: var(--rte-ink);
}
.yjd-rich-editor .yjd-find-btn:not(.yjd-find-icon):hover {
  background: var(--rte-chrome-2);
}
.yjd-rich-editor .yjd-find-btn.yjd-find-icon {
  height: 32px;
  width: 32px;
  color: var(--rte-muted);
  background: transparent;
  border: 1px solid transparent;
}
.yjd-rich-editor .yjd-find-btn.yjd-find-icon:hover {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .yjd-rich-editor .color-picker-popup.visible,
  .yjd-rich-editor [class*="select-popup"].visible,
  .yjd-rich-editor [class$="-popup"].visible,
  .yjd-rich-editor .yjd-find-replace.open {
    animation: none !important;
  }
}

/* =====================================================================
   DESIGN SYSTEM v2.2 — outline icon set rendering
   Icons are now stroke-based (Lucide-style). Render them as outlines and
   neutralise the legacy fill-based rules above.
   ===================================================================== */
.yjd-rich-editor .icon svg {
  width: auto !important;
  height: var(--rte-icon-size) !important;
  max-width: calc(var(--rte-icon-size) + 4px);
  display: block;
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
/* outline paths never fill */
.yjd-rich-editor .icon svg path,
.yjd-rich-editor .icon svg line,
.yjd-rich-editor .icon svg polyline,
.yjd-rich-editor .icon svg rect {
  fill: none !important;
  stroke: currentColor;
}
/* solid accents (dots) keep their fill, no stroke */
.yjd-rich-editor .icon svg [fill="currentColor"] {
  fill: currentColor !important;
  stroke: none !important;
}

/* quiet default colour, accent on active */
.yjd-rich-editor .rich-editor-toolbar-btn .icon svg { color: var(--rte-muted); }
.yjd-rich-editor .rich-editor-toolbar-btn:hover .icon svg { color: var(--rte-ink); }
/* v2: active = ink fill, so pressed glyphs render in the PAPER colour. */
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg,
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg path,
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg line,
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg polyline,
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg rect {
  color: var(--rte-bg) !important;
  stroke: var(--rte-bg) !important;
  fill: none !important;
}
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg [fill="currentColor"] {
  fill: var(--rte-bg) !important;
  stroke: none !important;
}
.yjd-rich-editor .block-toolbar-btn.active .icon svg,
.yjd-rich-editor .block-toolbar-btn.active .icon svg path {
  stroke: var(--rte-bg) !important;
  fill: none !important;
}

/* =====================================================================
   DESIGN SYSTEM v2.4 — sync the list-picker popover with the others
   ===================================================================== */
.yjd-rich-editor .list-picker-popup {
  background: var(--rte-bg);
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-md);
  box-shadow: var(--rte-shadow);
  padding: 6px;
}
.yjd-rich-editor .list-picker-popup.visible {
  animation: rte-pop-in 90ms ease-out;
}
.yjd-rich-editor .list-button-container {
  display: flex;
  align-items: center;
  gap: 2px;
}
.yjd-rich-editor .list-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-muted);
  cursor: pointer;
  transition: background var(--rte-t), color var(--rte-t);
}
.yjd-rich-editor .list-button:hover {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
}
.yjd-rich-editor .list-button.active {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .list-button svg {
  width: auto !important;
  height: 16px !important;
  max-width: 20px;
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yjd-rich-editor .list-button svg [fill="currentColor"] {
  fill: currentColor !important;
  stroke: none !important;
}

/* =====================================================================
   DESIGN SYSTEM v2.5 — table-toolbar icons
   These buttons inject the SVG directly (no .icon wrapper), so size/stroke
   them here too. Outline icons only carry a viewBox, so without this the SVG
   blows up to its default size and gets clipped (icons appeared "missing").
   ===================================================================== */
.yjd-rich-editor .table-toolbar-btn svg {
  width: auto !important;
  height: 16px !important;
  max-width: 20px;
  display: block;
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yjd-rich-editor .table-toolbar-btn svg [fill="currentColor"] {
  fill: currentColor !important;
  stroke: none !important;
}
.yjd-rich-editor .table-toolbar-btn { color: var(--rte-muted); }
.yjd-rich-editor .table-toolbar-btn:hover { color: var(--rte-ink); }

/* =====================================================================
   DESIGN SYSTEM v2.6 — final popover consistency pass
   ===================================================================== */
/* Text-align picker items: match the other dropdown lists */
.yjd-rich-editor .align-button {
  height: auto;
  min-height: 32px;
  padding: 6px 10px;
  gap: 8px;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-ink);
  transition: background var(--rte-t), color var(--rte-t);
}
.yjd-rich-editor .align-button:hover {
  background: var(--rte-chrome-2);
  border-color: transparent;
}
.yjd-rich-editor .align-button.active {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
  border-color: transparent;
}
.yjd-rich-editor .align-button svg {
  width: auto !important;
  height: 16px !important;
  color: inherit;
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yjd-rich-editor .align-button.active svg { color: var(--rte-accent-ink); }

/* Upload affordance icon (outline) → accent, matches the dashed accent button */
.yjd-rich-editor .yjd-custom-upload-button svg {
  width: var(--rte-icon-size);
  height: var(--rte-icon-size);
  fill: none;
  stroke: currentColor;
}

/* keep align-picker labels on one line */
.yjd-rich-editor .text-align-picker-popup { min-width: 168px; }
.yjd-rich-editor .align-button { white-space: nowrap; }
.yjd-rich-editor .align-button .label-text { white-space: nowrap; }

/* =====================================================================
   DESIGN SYSTEM v2.7 — responsive toolbar (no wrapping; overflow -> "more")
   ===================================================================== */
.yjd-rich-editor .rich-editor-toolbar-1 {
  flex-wrap: nowrap !important;
  overflow: hidden;
}
.yjd-rich-editor .rich-editor-toolbar-2 {
  flex-wrap: wrap;
  border-top: 1px solid var(--rte-border);
}
.yjd-rich-editor .toolbar-group,
.yjd-rich-editor .rich-editor-toolbar-btn,
.yjd-rich-editor .custom-select-button {
  flex: 0 0 auto;
}
.yjd-rich-editor .rich-editor-toolbar-1 .more-btn {
  margin-left: 12px;
}
/* UI 2.0: undo/redo lead the row on the LEFT (no pinned right cluster). The
   right side belongs to the AI pill + "More" — the AI group carries the auto
   margin (see the component pass), and "More" keeps its own auto margin as a
   fallback when no AI group is present. */

/* =====================================================================
   PROMPT LAYOUT (options.layout:'prompt') — chat-style input.
   Rounded pill; the toolbar becomes a bottom action bar (flex `order` moves it
   under the text — no DOM change); one focus ring wraps the whole control.
   All opt-in behind [data-layout="prompt"], so it costs nothing when unused.
   ===================================================================== */
.yjd-rich-editor[data-layout="prompt"] {
  border-radius: 26px !important; /* beat the `border-radius: var(--rte-radius) !important` base */
  border: 1px solid var(--rte-border-strong);
  box-shadow: 0 1px 2px rgba(20, 24, 47, 0.04), 0 8px 24px rgba(20, 24, 47, 0.06);
  overflow: visible;
  /* The base rule isolates the editor's stacking context; a prompt input's "+"
     popover must overlay whatever sits above the pill (a chat input hugs the
     bottom), so opt back out — the popover's own z-index then wins over page
     content instead of being trapped inside the pill. */
  isolation: auto;
  transition: border-color var(--rte-t, .15s), box-shadow var(--rte-t, .15s);
}
.yjd-rich-editor[data-layout="prompt"]:focus-within {
  border-color: var(--rte-accent, var(--rte-focus));
  box-shadow: 0 0 0 4px var(--rte-accent-ring, rgba(59, 130, 246, 0.22));
}
/* Text on top (rounded top), action bar below (order overrides DOM insertion). */
.yjd-rich-editor[data-layout="prompt"] .rich-editor-area {
  order: 1;
  min-height: 28px;
  padding: 18px 22px 6px;
  border-radius: 25px 25px 0 0; /* 26px pill minus the 1px border */
}
/* Bottom action bar: one flush surface with the text — transparent, no border,
   no top-radius/clip, bottom corners rounded, popovers allowed to overflow. */
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-container {
  order: 3;
  background: transparent;
  border: 0;
  border-radius: 0 0 25px 25px;
  overflow: visible;
  z-index: 1;
}
/* Attachments tray: chat-style thumbnails between the text and the bottom bar. */
.yjd-rich-editor[data-layout="prompt"] .rte-prompt-attachments {
  order: 2;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 18px 6px;
}
.yjd-rich-editor[data-layout="prompt"] .rte-prompt-attachments.has-items { display: flex; }
/* Media tiles: 48px squares (design attachTile). Non-media: 32px rows. */
.rte-attach-chip {
  position: relative;
  flex: 0 0 auto;
  border: 1px solid var(--rte-border, var(--rte-table-border));
  overflow: hidden;
}
.rte-attach-chip.rte-attach-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--rte-radius-sm, 6px);
  background: var(--rte-chrome-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rte-attach-chip.rte-attach-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 6px;
  border-radius: var(--rte-radius-sm, 6px);
  background: var(--rte-bg);
  color: var(--rte-ink-2);
}
.rte-attach-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rte-attach-chip video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
/* Play badge sits bottom-left on video tiles (close occupies top-right). */
.rte-attach-play {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rte-accent-ink-on, #fff);
  background: rgba(0, 0, 0, 0.66);
  border-radius: 50%;
  pointer-events: none;
}
.rte-attach-play svg { width: 11px; height: 11px; margin-left: 1px; fill: currentColor; stroke: none; color: inherit; }
.rte-attach-row .rte-attach-ic {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rte-radius-xs, 4px);
  background: var(--rte-chrome-2);
  color: var(--rte-muted);
}
.rte-attach-row .rte-attach-ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; color: inherit; }
.rte-attach-row .rte-attach-name {
  max-width: 118px;
  font: 400 12px/1.2 var(--rte-ui);
  color: var(--rte-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Close: overlay circle on tiles, quiet inline X on rows. */
.rte-attach-close {
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rte-attach-tile .rte-attach-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
}
.rte-attach-tile .rte-attach-close:hover { background: rgba(0, 0, 0, 0.82); }
.rte-attach-row .rte-attach-close {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: transparent;
  color: var(--rte-faint);
}
.rte-attach-row .rte-attach-close:hover { color: var(--rte-ink); }

/* Remove/close affordances draw the shared `close` glyph instead of a text "×",
   so they follow --rte-icon-size like every other icon. Sized down (0.65) to sit
   inside the small circular button. */
.rte-attach-close svg,
.video-remove-button svg,
.image-remove-button svg {
  width: calc(var(--rte-icon-size) * 0.65);
  height: calc(var(--rte-icon-size) * 0.65);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* Context chip (@file / @selection) — same row shape, accent @ tile. */
.rte-attach-context .rte-attach-ic {
  font: 500 12px/1 var(--rte-mono, monospace);
  background: var(--rte-accent-weak, rgba(91, 91, 214, 0.1));
  color: var(--rte-accent-ink, #4a49cf);
}

/* Token/cost meter — a quiet counter left of the send button. */
.rte-token-meter {
  align-self: center;
  margin: 0 4px 0 auto;
  font: 500 11.5px/1 var(--rte-mono);
  color: var(--rte-muted);
  white-space: nowrap;
}

.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-1,
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-2 {
  background: transparent;
  min-height: 0;
  padding: 8px 12px 12px;
  border: 0;
  border-radius: 0;
  /* The prompt bar has no "More" overflow split, so let it wrap (rather than the
     design-system's nowrap+clip) — the send button on the right always stays
     visible when there are many tools on a narrow screen. */
  flex-wrap: wrap !important;
  overflow: visible;
  row-gap: 6px;
}
/* Design "Prompt / chat" bar: NO dividers between groups, tight 4px gap,
   and the send cluster pinned to the RIGHT edge behind a flex spacer. */
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-1 .toolbar-group + .toolbar-group::before,
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-2 .toolbar-group + .toolbar-group::before {
  display: none;
}
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-1,
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-2 {
  gap: 4px;
}
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-1 .toolbar-group.toolbar-group-send,
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-2 .toolbar-group.toolbar-group-send {
  margin-left: auto !important;
}

/* No word-count/breadcrumb bar in a compact prompt input. */
.yjd-rich-editor[data-layout="prompt"] .rich-editor-statusbar {
  display: none;
}

/* Send button — accent circle with an up-arrow; disabled (muted) while empty.
   Usable in any toolbar, but designed for the prompt bar where it sits far
   right. */
.yjd-rich-editor .rich-editor-toolbar-btn.rte-send-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rte-accent);
  color: var(--rte-accent-ink-on, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--rte-t, .15s), color var(--rte-t, .15s);
}
.yjd-rich-editor .rich-editor-toolbar-btn.rte-send-btn:hover:not(:disabled) {
  background: var(--rte-accent-ink);
  color: var(--rte-accent-ink-on, #fff);
}
.yjd-rich-editor .rich-editor-toolbar-btn.rte-send-btn:disabled {
  background: var(--rte-chrome-2);
  color: var(--rte-muted);
  cursor: default;
}
.yjd-rich-editor .rich-editor-toolbar-btn.rte-send-btn .icon svg {
  /* Beat the generic `.icon svg { color: var(--rte-muted) }` so the arrow takes
     the button's own colour (white on accent / muted when disabled). */
  color: inherit;
  fill: none;
  stroke: currentColor;
}
/* In the prompt bar the whole send group pins to the far right. */
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-1 .toolbar-group.toolbar-group-send,
.yjd-rich-editor[data-layout="prompt"] .rich-editor-toolbar-2 .toolbar-group.toolbar-group-send {
  margin-left: auto !important;
}

/* "+" add button — circular outline; accent tint while its menu is open. */
.yjd-rich-editor .rich-editor-toolbar-btn.rte-add-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--rte-border, var(--rte-table-border));
  border-radius: 50%;
}
.yjd-rich-editor .rich-editor-toolbar-btn.rte-add-btn.open {
  background: var(--rte-accent-weak);
  border-color: var(--rte-accent);
}
.yjd-rich-editor .rich-editor-toolbar-btn.rte-add-btn.open .icon svg { color: var(--rte-accent-ink); }

/* Add-menu popover (lazy component .rte-add-menu-popup). */
.rte-add-menu-popup {
  display: none;
  position: absolute;
  background: var(--rte-bg, #fff);
  border: 1px solid var(--rte-border, var(--rte-table-border));
  border-radius: var(--rte-radius-md, 14px);
  box-shadow: 0 8px 28px rgba(20, 24, 47, 0.14);
  padding: 5px;
  width: 186px;
  box-sizing: border-box;
  pointer-events: auto;
}
.rte-add-menu-popup.visible { display: block; }
.rte-add-head {
  padding: 5px 8px 6px;
  font-family: var(--rte-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rte-faint, #98a0ac);
}
.rte-add-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--rte-radius-sm, 6px);
  background: transparent;
  color: var(--rte-ink-2, #3c424d);
  font: 400 12.5px/1.2 inherit;
  text-align: left;
  cursor: pointer;
}
.rte-add-item:hover { background: var(--rte-chrome-2); color: var(--rte-ink); }
.rte-add-ic {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: inline-flex;
  color: inherit;
}
.rte-add-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; color: inherit; }
.rte-add-sep { height: 1px; background: var(--rte-border, var(--rte-table-border)); margin: 4px 0; }

/* =====================================================================
   DESIGN SYSTEM v2.8 — remove the triangle pointer on floating toolbars
   ===================================================================== */
.yjd-rich-editor .block-toolbar-arrow,
.yjd-rich-editor .table-toolbar-arrow {
  display: none !important;
}

/* =====================================================================
   DESIGN SYSTEM v2.9 — slash command menu (rendered on <body>, so unscoped)
   ===================================================================== */
.yjd-slash-menu {
  position: absolute;
  z-index: 2000;
  min-width: 264px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--rte-bg, var(--rte-bg));
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md, 12px);
  box-shadow: var(--rte-shadow, 0 10px 28px -8px rgba(16, 18, 23, 0.20), 0 2px 6px rgba(16, 18, 23, 0.06));
  font: 12.5px/1.4 var(--rte-ui);
  animation: yjd-slash-in 90ms ease-out;
}
@keyframes yjd-slash-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.yjd-slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--rte-ink, var(--rte-ink));
}
.yjd-slash-item:hover,
.yjd-slash-item.active { background: var(--rte-accent-weak, var(--rte-accent-weak)); color: var(--rte-accent-ink, var(--rte-accent-ink)); }
.yjd-slash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--rte-chrome-2, var(--rte-chrome-2));
  color: inherit;
}
.yjd-slash-item.active .yjd-slash-icon { background: var(--rte-bg, var(--rte-bg)); }
.yjd-slash-icon svg {
  width: auto;
  height: var(--rte-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yjd-slash-icon svg [fill="currentColor"] { fill: currentColor; stroke: none; }
.yjd-slash-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.yjd-slash-label { font-weight: 500; }
.yjd-slash-hint { font-size: 12px; color: var(--rte-muted, var(--rte-muted)); }
.yjd-slash-item.active .yjd-slash-hint { color: var(--rte-accent, #5b5bd6); }
@media (prefers-reduced-motion: reduce) { .yjd-slash-menu { animation: none; } }

/* ── Colour button swatch (v2.10) ─────────────────────────────────────────
   The text-colour and background-colour buttons carry a small bar that
   reflects the colour currently applied at the caret. */
.yjd-rich-editor .rich-editor-toolbar-btn.color-btn,
.yjd-rich-editor .rich-editor-toolbar-btn.background-btn {
  position: relative;
}
.yjd-rich-editor .rich-editor-toolbar-btn .rte-swatch {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--rte-ink);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* Background swatch defaults to a "no fill" look until a colour is chosen. */
.yjd-rich-editor .rich-editor-toolbar-btn.background-btn .rte-swatch {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rte-border, var(--rte-border));
}
.yjd-rich-editor .rich-editor-toolbar-btn.background-btn.has-color .rte-swatch {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* Nudge the icon up slightly so the swatch bar has room. */
.yjd-rich-editor .rich-editor-toolbar-btn.color-btn .icon,
.yjd-rich-editor .rich-editor-toolbar-btn.background-btn .icon {
  transform: translateY(-1px);
}

/* ── Inline link popup (v2.11) ────────────────────────────────────────────
   Compact link input anchored right at the selected text. */
.yjd-rich-editor .link-popup.link-popup--inline {
  width: auto;
  min-width: 262px;
  max-width: min(92vw, 320px);
  padding: 9px;
}
.yjd-rich-editor .link-popup--inline .link-popup-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yjd-rich-editor .link-popup--inline .link-popup-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.yjd-rich-editor .link-popup--inline .link-popup-row .yjd-input {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.yjd-rich-editor .link-popup--inline .link-popup-apply {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 10px;
  margin: 0;
}

/* ── Inputs, selects & options — design polish (v2.12) ────────────────────── */

/* Uniform, comfortable dropdown option rows (Heading / Font / Size / …). */
.yjd-rich-editor .custom-select-item-button {
  min-height: 34px;
  padding: 6px 10px !important;
  gap: 10px;
  border-radius: var(--rte-radius-sm) !important;
}
.yjd-rich-editor .custom-select-item-button:hover {
  background: var(--rte-accent-weak) !important;
  color: var(--rte-accent-ink) !important;
}
.yjd-rich-editor .custom-select-item-button.current {
  background: var(--rte-accent-weak) !important;
  color: var(--rte-accent-ink) !important;
  font-weight: 600;
}
/* Keep the size previews from breaking the row rhythm. */
.yjd-rich-editor .heading-select-popup .custom-select-item-button,
.yjd-rich-editor .font-family-select-popup .custom-select-item-button,
.yjd-rich-editor .text-size-select-popup .custom-select-item-button {
  line-height: 1.15;
}

/* Native <select> — make it look like the themed inputs, with a custom chevron
   (the OS-default control was the loudest mismatch among the popups). */
.yjd-rich-editor select,
.yjd-rich-editor .yjd-select-input,
.yjd-rich-editor .tag-type-select,
.yjd-rich-editor .import-type-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 36px 10px 12px;
  font: 500 14px/1.4 var(--rte-ui);
  color: var(--rte-ink);
  background-color: var(--rte-bg);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236d7480'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-sm);
  cursor: pointer;
  transition: border-color var(--rte-t), box-shadow var(--rte-t);
}
.yjd-rich-editor select:hover,
.yjd-rich-editor .yjd-select-input:hover,
.yjd-rich-editor .tag-type-select:hover,
.yjd-rich-editor .import-type-select:hover {
  border-color: var(--rte-accent);
}
.yjd-rich-editor select:focus,
.yjd-rich-editor .yjd-select-input:focus,
.yjd-rich-editor .tag-type-select:focus,
.yjd-rich-editor .import-type-select:focus {
  outline: none;
  border-color: var(--rte-accent);
  box-shadow: 0 0 0 3px var(--rte-accent-ring);
}

/* Consistent text-input metrics across every popup. */
.yjd-rich-editor .yjd-input,
.yjd-rich-editor .yjd-find-input {
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
}

/* Table size picker — accent (not grey) on hover, matching the highlight. */
.yjd-rich-editor .table-grid-cell:hover {
  background: var(--rte-accent-weak) !important;
  border-color: var(--rte-accent) !important;
}

/* ── Toolbar layout (v2.13) ───────────────────────────────────────────────
   Keep icon groups packed tight on the left and push only "More" to the right
   edge. This uses the full bar width (More is flush right) WITHOUT scattering
   big gaps between every group — which looked empty on mobile / narrow bars. */
.yjd-rich-editor .rich-editor-toolbar-1 {
  justify-content: flex-start !important;
}
.yjd-rich-editor .rich-editor-toolbar-1 .more-btn {
  margin-left: auto !important;
}

/* ── Mobile toolbar: one horizontal-scroll row (v2.14) ────────────────────
   Instead of wrapping every tool into a cramped multi-row "More" panel, mobile
   shows a single row you swipe sideways — the pattern used by Google Docs,
   Notion, etc. (The reflow JS keeps all groups in row 1 on touch devices.)
   Gated on touch (hover:none + pointer:coarse), NOT viewport width: a narrow
   desktop window keeps the "More" overflow split, so horizontal swipe-scroll is
   reserved for real touch devices. The reflow JS uses the same media query. */
@media (hover: none) and (pointer: coarse) {
  .yjd-rich-editor .rich-editor-toolbar-1 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
    justify-content: flex-start !important;
    padding: 6px 8px;
    scroll-padding: 8px;
  }
  .yjd-rich-editor .rich-editor-toolbar-1::-webkit-scrollbar {
    display: none;                    /* WebKit/Blink */
  }
  /* v2: the counted overflow works on mobile too — the toggle stays and the
     overflow row swipe-scrolls like the primary row. */
  /* Keep every group/button on one line and let the row scroll. No dividers
     on mobile — the design's swipe-row is a single uninterrupted strip. */
  .yjd-rich-editor .toolbar-group {
    flex: 0 0 auto;
  }
  .yjd-rich-editor .rich-editor-toolbar-1 .toolbar-group + .toolbar-group {
    margin-left: var(--rte-gap, 6px);
  }
  .yjd-rich-editor .rich-editor-toolbar-1 .toolbar-group + .toolbar-group::before {
    content: none;
  }
  /* 44px touch targets (UI 2.0) — the row swipes, so bigger buttons cost
     nothing horizontally. */
  .yjd-rich-editor {
    --rte-ctl: 44px;
  }
  .yjd-rich-editor .rich-editor-toolbar-btn,
  .yjd-rich-editor .custom-select-button {
    min-width: var(--rte-ctl, 44px);
    height: var(--rte-ctl, 44px);
    padding: 0 8px;
    flex: 0 0 auto;
  }
  /* Selects keep their label readable (no truncation) — the row scrolls. */
  .yjd-rich-editor .custom-select-button {
    max-width: none;
  }
}

/* Toolbar buttons hidden until usable (e.g. undo/redo before any history). */
.yjd-rich-editor .rich-editor-toolbar-btn.rte-hidden { display: none !important; }

/* ── First/last block margin reset (v2.15) ────────────────────────────────
   The first block must sit exactly at the content origin (top padding) so the
   caret/text aligns with the placeholder — on mobile, `p { margin: .8em 0 }`
   was pushing the first line ~13px below the placeholder. */
.yjd-rich-editor .rich-editor-area > :first-child { margin-top: 0 !important; }
.yjd-rich-editor .rich-editor-area > :last-child { margin-bottom: 0 !important; }

/* ── Align picker: icon-only, compact row (v2.16) ─────────────────────────
   Labels removed (tooltip carries the name) → lay the 4 alignment icons out
   as a tight horizontal row of square buttons instead of wide list rows. */
/* Design "List picker" card recipe: 186px pop, mono header, labelled rows. */
.yjd-rich-editor .text-align-picker-popup,
.yjd-rich-editor .list-picker-popup {
  width: 186px !important;
  padding: 5px;
  box-sizing: border-box;
}
.yjd-rich-editor .yjd-pick-head {
  padding: 5px 8px 6px;
  font-family: var(--rte-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rte-faint);
}
.yjd-rich-editor .align-button-container,
.yjd-rich-editor .list-button-container {
  display: flex;
  flex-direction: column !important;
  width: auto !important;
  height: auto !important;
  gap: 1px;
}
.yjd-rich-editor .align-button,
.yjd-rich-editor .list-button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 7px 9px !important;
  border: 0;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-ink-2);
  font-size: 12.5px !important;
  cursor: pointer;
}
.yjd-rich-editor .align-button .icon-wrapper,
.yjd-rich-editor .list-button .icon-wrapper {
  display: inline-flex;
  margin: 0 !important;
  flex: 0 0 auto;
}
.yjd-rich-editor .align-button svg,
.yjd-rich-editor .list-button svg { width: 14px !important; height: 14px !important; }
.yjd-rich-editor .align-button .label-text,
.yjd-rich-editor .list-button .label-text { font-size: 12.5px; color: inherit; }
.yjd-rich-editor .align-button:hover,
.yjd-rich-editor .list-button:hover { background: var(--rte-chrome-2); color: var(--rte-ink); }

/* ── "More" overflow row: single swipe-scroll row on TOUCH only (v2.17) ────
   On touch devices the secondary toolbar is one tidy row you swipe sideways,
   rather than a tall multi-row stack. On desktop it wraps to as many rows as
   needed (flex-wrap:wrap from the base rule) so every tool is visible without
   any horizontal scroll — swipe-scroll is reserved for real touch devices. */
@media (hover: none) and (pointer: coarse) {
  .yjd-rich-editor .rich-editor-toolbar-2 {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .yjd-rich-editor .rich-editor-toolbar-2::-webkit-scrollbar { display: none; }
  .yjd-rich-editor .rich-editor-toolbar-2 .toolbar-group { flex: 0 0 auto; }
}

/* ── Desktop "More" overflow: stacked, evenly-spaced rows with separators ──
   The reflow JS packs overflow groups into .rich-editor-toolbar-2-row wrappers
   (one per line that fits), because a flex-wrap container can't draw a border
   between its own wrapped lines. So toolbar-2 becomes a column of real rows;
   each row matches the primary toolbar's padding/height and gets a divider
   between rows — even spacing, clear structure. On touch this whole panel is
   hidden (the single swipe-scroll row is used instead), so these rules only
   shape the desktop overflow. */
.yjd-rich-editor .rich-editor-toolbar-2 {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  padding: 0;
  row-gap: 0;
  column-gap: 0;
  min-height: 0;
}
.yjd-rich-editor .rich-editor-toolbar-2-row {
  display: flex;
  align-items: center;
  /* Packed to fit one line, so normally no wrap. `wrap` is only a safety net for
     pathologically narrow editors where a single group is wider than the row —
     the group drops to a second line instead of scrolling sideways. */
  flex-wrap: wrap;
  gap: var(--rte-gap, 6px);  /* group spacing; the JS packer reads the same token
                                (dividers live inside the groups as ::before) */
  padding: 7px 16px;         /* horizontal padding is overwritten inline to match row 1 */
  min-height: 44px;
  box-sizing: border-box;
}
/* Spacing inside an overflow row comes ONLY from the row's flex gap, so the JS
   width-packer (which knows just the gap) can never overflow a row. Neutralise
   the sibling margin the groups carry in the primary row. */
.yjd-rich-editor .rich-editor-toolbar-2-row > .toolbar-group {
  margin: 0;
}
.yjd-rich-editor .rich-editor-toolbar-2-row + .rich-editor-toolbar-2-row {
  border-top: 1px solid var(--rte-border);
}

/* ── Labelled selects (v2.18) ─────────────────────────────────────────────
   A small header at the top of each dropdown + a leading icon on the trigger,
   so it's clear what Paragraph / Font / Size / Line-height / Case control. */
.yjd-rich-editor .custom-select-header {
  padding: 8px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rte-muted);
  border-bottom: 1px solid var(--rte-border);
  margin-bottom: 4px;
  white-space: nowrap;
}
.yjd-rich-editor .custom-select-button .select-lead-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rte-muted);
  margin-right: 4px;
}
.yjd-rich-editor .custom-select-button .select-lead-icon svg {
  width: var(--rte-icon-size);
  height: var(--rte-icon-size);
  display: block;
  stroke: currentColor;
  fill: none;
}


/* ── Select trigger: keep value on one line (v2.20) ───────────────────────
   Long values (e.g. "Times New Roman") must not wrap to a 2nd line and break
   the button height — clamp to one line with an ellipsis; icon + chevron stay. */
.yjd-rich-editor .custom-select-button {
  white-space: nowrap;
  overflow: hidden;
}
.yjd-rich-editor .custom-select-button .button-text {
  flex: 1 1 auto;
  min-width: 0;
  /* Must be block (not flex) for text-overflow:ellipsis to render — a shared
     `.rich-editor-toolbar-btn span { display:flex !important }` rule otherwise
     makes this a flex box, where ellipsis is ignored and a long value (e.g.
     "Times New Roman") is hard-cut with no "…". */
  display: block !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.yjd-rich-editor .custom-select-button .select-lead-icon,
.yjd-rich-editor .custom-select-button .dropdown-icon {
  flex: 0 0 auto;
}

/* ── Align popover: match the other popovers (v2.21) ───────────────────────
   It had asymmetric padding (bottom 0) + a one-off radius, so it looked out of
   sync. Use the shared shell's symmetric padding + token radius. */
.yjd-rich-editor .text-align-picker-popup {
  padding: 6px !important;
  border-radius: var(--rte-radius-md) !important;
}
.yjd-rich-editor .align-button-container {
  padding: 0 !important;
}

/* ── A11y: statusbar text contrast (v2.22) ────────────────────────────────
   --rte-muted (var(--rte-muted)) on the near-white statusbar was only 4.02:1; darken
   the breadcrumb + word-count to meet WCAG AA (>=4.5:1). */
.yjd-rich-editor .rich-editor-breadcrumb,
.yjd-rich-editor .wordcount {
  color: var(--rte-muted);
}

/* ── Find & Replace: icon buttons (v2.23) ─────────────────────────────────
   Center the SVG icons (prev/next/close) in the square nav buttons. */
.yjd-rich-editor .yjd-find-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yjd-rich-editor .yjd-find-icon .icon,
.yjd-rich-editor .yjd-find-icon .icon svg {
  width: var(--rte-icon-size);
  height: var(--rte-icon-size);
  display: block;
}
.yjd-rich-editor .yjd-find-icon .icon svg {
  stroke: currentColor;
  fill: none;
}

/* ── @mention token (v2.24) ───────────────────────────────────────────────
   The atomic token inserted by the mention module. Styled the same in the
   editor and in renderStatic() read-views so tagged names look identical. */
.mention {
  display: inline;
  padding: 0 2px;
  border-radius: 4px;
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.mention[data-trigger="#"] {
  background: var(--rte-info-weak);
  color: var(--rte-info);
}

/* ── @mention autocomplete menu (v2.24) ───────────────────────────────────
   Mirrors the slash-menu shell. Appended to <body>, positioned at the caret. */
.yjd-mention-menu {
  position: absolute;
  z-index: 2000;
  min-width: 220px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--rte-bg, var(--rte-bg));
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md, 12px);
  box-shadow: var(--rte-shadow, 0 10px 28px -8px rgba(16, 18, 23, 0.20), 0 2px 6px rgba(16, 18, 23, 0.06));
  font: 12.5px/1.4 var(--rte-ui);
  animation: yjd-slash-in 90ms ease-out;
}
.yjd-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--rte-ink, var(--rte-ink));
}
.yjd-mention-item:hover,
.yjd-mention-item.active { background: var(--rte-accent-weak, var(--rte-accent-weak)); color: var(--rte-accent-ink, var(--rte-accent-ink)); }
.yjd-mention-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--rte-chrome-2);
}
.yjd-mention-ico {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--rte-accent-weak, var(--rte-accent-weak)); color: var(--rte-accent-ink, var(--rte-accent-ink));
}
.yjd-mention-ico svg { width: var(--rte-icon-size); height: var(--rte-icon-size); stroke: currentColor; fill: none; }
.yjd-mention-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .yjd-mention-menu { animation: none; } }

/* ── AI assistant: selection toolbar + ghost text ─────────────────────── */
.yjd-ai-bar {
  position: absolute;
  z-index: 2100;
  width: 232px;
  max-width: calc(100vw - 16px);
  padding: 5px;
  background: var(--rte-bg, var(--rte-bg));
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md);
  box-shadow: var(--rte-shadow, 0 10px 28px -8px rgba(16, 18, 23, 0.20), 0 2px 6px rgba(16, 18, 23, 0.06));
  font: 13px/1.4 var(--rte-ui);
  color: var(--rte-ink, var(--rte-ink));
  animation: yjd-slash-in 90ms ease-out;
}
/* Vertical menu list (UI 2.0): icon + label rows under a mono header. */
.yjd-ai-head {
  padding: 5px 8px 6px;
  font-family: var(--rte-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rte-faint);
}
.yjd-ai-actions { display: flex; flex-direction: column; gap: 1px; }
.yjd-ai-act {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: none;
  background: transparent;
  border-radius: var(--rte-radius-sm);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  color: var(--rte-ink-2);
  font: inherit;
  font-size: 12.5px;
}
.yjd-ai-act:hover { background: var(--rte-chrome-2); color: var(--rte-ink, var(--rte-ink)); }
.yjd-ai-act-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--rte-muted);
}
.yjd-ai-act-ic svg { width: 14px; height: 14px; }
.yjd-ai-act:hover .yjd-ai-act-ic { color: var(--rte-accent-ink, var(--rte-accent)); }
.yjd-ai-act-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.yjd-ai-ask {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  padding: 6px 8px;
  border: 1px solid var(--rte-border, var(--rte-border));
  border-radius: var(--rte-radius-sm);
  background: var(--rte-chrome, var(--rte-bg));
  transition: border-color var(--rte-t), box-shadow var(--rte-t);
}
.yjd-ai-ask:focus-within {
  border-color: var(--rte-accent, var(--rte-accent));
  box-shadow: 0 0 0 3px var(--rte-accent-ring);
  background: var(--rte-bg, #fff);
}
.yjd-ai-ask-ic {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--rte-accent-ink, var(--rte-accent));
}
.yjd-ai-ask-ic svg { width: 13px; height: 13px; }
.yjd-ai-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--rte-ink, var(--rte-ink));
  background: transparent;
}
.yjd-ai-kbd {
  flex: 0 0 auto;
  font-family: var(--rte-mono);
  font-size: 10.5px;
  color: var(--rte-faint);
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-xs);
  padding: 1px 5px;
}
.yjd-ai-result {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: var(--rte-radius-md);
  background: var(--rte-accent-weak, var(--rte-accent-weak));
  color: var(--rte-ink, var(--rte-ink));
  white-space: pre-wrap;
  word-break: break-word;
}
.yjd-ai-result.is-error { background: var(--rte-danger-weak); color: var(--rte-danger); }
.yjd-ai-foot { display: flex; gap: 6px; margin-top: 8px; }
.yjd-ai-foot button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--rte-radius-sm);
  border: 1px solid var(--rte-border-strong);
  background: var(--rte-bg, var(--rte-bg));
  color: var(--rte-ink, var(--rte-ink));
  cursor: pointer;
  font: 500 12px/1 var(--rte-ui);
}
.yjd-ai-accept { background: var(--rte-accent, var(--rte-accent)) !important; color: var(--rte-accent-ink-on, var(--rte-accent-ink-on)) !important; border-color: var(--rte-accent, var(--rte-accent)) !important; }
.yjd-ai-foot button:hover { filter: brightness(0.97); }
.yjd-ai-ghost {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  color: var(--rte-muted);
  white-space: pre;
  font: inherit;
}
@media (prefers-reduced-motion: reduce) { .yjd-ai-bar { animation: none; } }

/* AI diff-edit: an inline word diff awaiting per-word accept/reject. */
.yjd-ai-diff {
  border-radius: var(--rte-radius-xs);
  padding: 0 1px;
  background: var(--rte-accent-weak, rgba(91, 91, 214, 0.07));
  box-shadow: 0 0 0 1px var(--rte-accent-ring);
}
.yjd-ai-diff del.yjd-ai-del {
  text-decoration: line-through;
  color: var(--rte-danger); background: var(--rte-danger-weak);
  border-radius: var(--rte-radius-xs); padding: 0 1px; cursor: pointer;
}
.yjd-ai-diff ins.yjd-ai-ins {
  text-decoration: none;
  color: var(--rte-success); background: var(--rte-success-weak);
  border-radius: var(--rte-radius-xs); padding: 0 1px; cursor: pointer;
}
.yjd-ai-diff del.yjd-ai-off { text-decoration: none; color: inherit; background: transparent; } /* kept original */
.yjd-ai-diff ins.yjd-ai-off { text-decoration: line-through; color: var(--rte-muted); background: transparent; } /* dropped addition */
.yjd-ai-diffbar {
  position: absolute;
  z-index: 2147483000;
  display: none;
  gap: 8px;
  align-items: center;
  background: var(--rte-bg, #fff);
  color: var(--rte-ink);
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md);
  padding: 6px 8px;
  box-shadow: var(--rte-shadow, 0 10px 28px -8px rgba(16, 18, 23, 0.20), 0 2px 6px rgba(16, 18, 23, 0.06));
  font: 500 12px/1 var(--rte-ui);
}
.yjd-ai-diffbar .yjd-ai-diffhint { color: var(--rte-muted); font-size: 12px; }

/* streamMarkdown: a blinking caret at the end of the reply while it "types". */
.yjd-md-stream::after {
  content: '';
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--rte-accent, #5b5bd6);
  animation: yjd-ai-caret 1s steps(1) infinite;
}
@keyframes yjd-ai-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .yjd-md-stream::after { animation: none; } }

/* AI authorship marks (ai.trackAuthorship): invisible until showAiMarks(true). */
.yjd-rich-editor.yjd-show-ai .yjd-ai-mark {
  background: var(--rte-accent-weak, rgba(91, 91, 214, 0.12));
  box-shadow: inset 0 -2px rgba(91, 91, 214, 0.45);
  border-radius: 2px;
}
.yjd-ai-diffbar button {
  display: inline-flex;
  align-items: center;
  height: 28px;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  padding: 0 12px;
  font: 500 12px/1 var(--rte-ui);
  cursor: pointer;
  background: var(--rte-chrome, #fff);
}

/* AI toolbar button — accent-tinted so the assistant reads as "special". */
.rich-editor-toolbar-btn.ai-btn { color: var(--rte-accent, var(--rte-accent)); }
.rich-editor-toolbar-btn.ai-btn:hover {
  background: var(--rte-accent-weak, var(--rte-accent-weak));
  color: var(--rte-accent-ink, var(--rte-accent-ink));
}

/* ── Static read-view (.yjd-content) (v2.24) ──────────────────────────────
   renderStatic() tags its host with .yjd-content. These rules mirror the
   editor's content typography so a saved post renders identically without an
   editor instance. Kept self-contained (not scoped under .yjd-rich-editor). */
.yjd-content {
  font-family: var(--rte-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--rte-ink);
  word-wrap: break-word;
}
.yjd-content > :first-child { margin-top: 0; }
.yjd-content > :last-child { margin-bottom: 0; }
.yjd-content p { margin: 0 0 1em; }
.yjd-content h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
.yjd-content h2 { font-size: 1.5em; font-weight: bold; margin: 0.75em 0; }
.yjd-content h3 { font-size: 1.25em; font-weight: bold; margin: 0.83em 0; }
.yjd-content h4 { font-size: 1.1em; font-weight: bold; margin: 1em 0; }
.yjd-content h5 { font-size: 1em; font-weight: bold; margin: 1.25em 0; }
.yjd-content h6 { font-size: 0.875em; font-weight: bold; margin: 1.5em 0; color: var(--rte-muted); }
.yjd-content ul, .yjd-content ol { margin: 0 0 1em 2em; padding: 0; }
.yjd-content li { margin: 0.25em 0; }
.yjd-content a { color: var(--rte-link); text-decoration: underline; }
.yjd-content code {
  font-family: var(--rte-mono);
  background: var(--rte-code-bg); padding: 2px 6px; border-radius: 4px;
}
.yjd-content pre {
  font-family: var(--rte-mono);
  background: var(--rte-code-bg); padding: 12px 14px; border-radius: 6px;
  margin: 1em 0; overflow-x: auto; white-space: pre;
}
.yjd-content pre code { background: none; padding: 0; }
.yjd-content blockquote {
  border-left: 4px solid var(--rte-table-border); margin: 1em 0; padding: 4px 12px;
  color: var(--rte-muted); font-style: italic; background: var(--rte-quote-bg);
}
.yjd-content img { max-width: 100%; height: auto; border-radius: 4px; }
.yjd-content hr { border: none; border-top: 1px solid var(--rte-table-border); margin: 1.5em 0; }
.yjd-content table {
  border-collapse: collapse; width: 100%; margin: 1em 0;
}
.yjd-content table td, .yjd-content table th {
  border: 1px solid var(--rte-table-border); padding: 8px 10px; text-align: left;
}
/* Header cells: match the editor's emphasised header row. */
.yjd-content table th {
  background: var(--rte-chrome-2); font-weight: 600; text-align: start;
}

/* Checklist / task list — mirror the editor so the pseudo-checkbox renders in
   read-views (renderStatic / preview) too. */
.yjd-content ul.checklist { list-style: none; padding-left: 0; }
.yjd-content ul.checklist li { position: relative; padding-left: 28px; margin-bottom: 4px; }
.yjd-content ul.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.2em;
  width: 16px; height: 16px; box-sizing: border-box;
  border: 1.5px solid var(--rte-border-strong); border-radius: 4px;
  background: var(--rte-bg);
}
.yjd-content ul.checklist li[data-checked="true"]::before {
  background: var(--rte-accent); border-color: var(--rte-accent);
}
.yjd-content ul.checklist li[data-checked="true"]::after {
  content: ""; position: absolute; left: 5.5px; top: calc(0.2em + 2px);
  width: 5px; height: 9px; border: solid var(--rte-accent-ink-on);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.yjd-content ul.checklist li[data-checked="true"] {
  color: var(--rte-muted); text-decoration: line-through;
}

/* ── File chip (v2.25) ────────────────────────────────────────────────────
   The attachment token inserted by options.file.upload. Same look in the
   editor and in renderStatic() read-views. */
.yjd-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  vertical-align: baseline;
  padding: 3px 10px 3px 8px;
  margin: 0 1px;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-md);
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
  text-decoration: none;
  font-size: 0.9em;
  line-height: 1.5;
  white-space: nowrap;
}
.yjd-file-chip:hover { border-color: var(--rte-accent); background: var(--rte-accent-weak); }
.yjd-file-chip[data-state="uploading"] { opacity: 0.6; }
.yjd-file-ico { display: inline-flex; flex: 0 0 auto; color: var(--rte-accent-ink); }
.yjd-file-ico svg { width: var(--rte-icon-size); height: var(--rte-icon-size); stroke: currentColor; fill: none; }
.yjd-file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; max-width: 22em; }
.yjd-file-size { color: var(--rte-muted); font-variant-numeric: tabular-nums; }

/* ── Upload loading state (v2.26) ─────────────────────────────────────────
   Spinner shown while an image/file is uploading, plus a drop-zone highlight.
   Scoped loosely so it works inside the editor AND in renderStatic views. */
@keyframes yjd-spin { to { transform: rotate(360deg); } }
.yjd-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 2px solid var(--rte-accent-weak, #d9d4ff);
  border-top-color: var(--rte-accent, var(--rte-accent));
  border-radius: 50%;
  animation: yjd-spin 0.7s linear infinite;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) { .yjd-spinner { animation-duration: 2s; } }

/* Image upload placeholder: a labelled loading box in the content flow. */
.yjd-upload {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  vertical-align: middle;
  max-width: 100%;
  padding: 10px 14px;
  margin: 2px 0;
  border: 1px dashed var(--rte-border-strong, #c9c5ec);
  border-radius: 10px;
  background: var(--rte-accent-weak, #f3f1ff);
  color: var(--rte-muted, var(--rte-muted));
  font-size: 0.9em;
  user-select: none;
}
.yjd-upload-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18em; }

/* Drag-and-drop target highlight (image or file dragged over the editor). */
.rich-editor-area.yjd-drag-over {
  position: relative; /* anchors the drop pill */
  outline: 1.5px dashed var(--rte-accent);
  outline-offset: -4px;
  /* accent at ~5% over the canvas (fixed rgba — no color-mix). */
  background: rgba(91, 91, 214, 0.05);
}

/* =====================================================================
   UI 2.0 — component pass
   Layout + chrome for the redesigned components: Ask AI pill, slash menu
   tiles/keys, mention rows, colour & table pickers, media bar, find chips.
   Appended after the earlier sections so these rules win.
   ===================================================================== */

/* =====================================================================
   UI 2.0 v2 — design revision (colour setup, counted overflow, states)
   ===================================================================== */

/* Toolbar icons render at 1.9 stroke in the chrome bar (the registry family
   stays 1.75 for menus/slash/pickers per the iconography spec). */
.yjd-rich-editor .rich-editor-toolbar-btn .icon svg {
  stroke-width: 1.9;
}

/* Active toolbar state = ink fill (v2), not the accent wash. */
.yjd-rich-editor .rich-editor-toolbar-btn.active,
.yjd-rich-editor .block-toolbar-btn.active {
  background: var(--rte-ink) !important;
  color: var(--rte-bg) !important;
  border-color: transparent;
}
/* Pressed glyphs: paper-coloured STROKES — outline icons must keep fill:none
   (a blanket fill turned B/U into solid blobs). Dot glyphs (fill=currentColor)
   are re-filled separately below. */
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg,
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg path,
.yjd-rich-editor .block-toolbar-btn.active .icon svg,
.yjd-rich-editor .block-toolbar-btn.active .icon svg path {
  color: var(--rte-bg) !important;
  fill: none !important;
}
.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg [fill="currentColor"],
.yjd-rich-editor .block-toolbar-btn.active .icon svg [fill="currentColor"] {
  fill: var(--rte-bg) !important;
  stroke: none !important;
}

/* Hover = chrome-3 (v2) for icon buttons in the chrome + floating bars.
   An ACTIVE tool ignores hover entirely — it's already in its pressed state. */
.yjd-rich-editor .rich-editor-toolbar-btn:not(.active):hover {
  background: var(--rte-chrome-3) !important;
}
.yjd-rich-editor .block-toolbar-btn:not(.active):hover,
.yjd-rich-editor .table-toolbar-btn:not(.active):hover {
  background: var(--rte-chrome-3);
}
/* Pin the pressed look through hover (beats every legacy :hover rule). */
.yjd-rich-editor .rich-editor-toolbar-btn.active:not(.more-btn):hover,
.yjd-rich-editor .block-toolbar-btn.active:hover {
  background: var(--rte-ink) !important;
  color: var(--rte-bg) !important;
  border-color: transparent !important;
}
.yjd-rich-editor .rich-editor-toolbar-btn.active:not(.more-btn):hover .icon svg,
.yjd-rich-editor .rich-editor-toolbar-btn.active:not(.more-btn):hover .icon svg path,
.yjd-rich-editor .block-toolbar-btn.active:hover .icon svg,
.yjd-rich-editor .block-toolbar-btn.active:hover .icon svg path {
  color: var(--rte-bg) !important;
  stroke: var(--rte-bg) !important;
  fill: none !important;
}
.yjd-rich-editor .rich-editor-toolbar-btn.active:not(.more-btn):hover .icon svg [fill="currentColor"] {
  fill: var(--rte-bg) !important;
  stroke: none !important;
}
/* The open "⋯ N" toggle keeps its own pressed chrome on hover. */
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn.active:hover {
  background: var(--rte-chrome-2) !important;
  color: var(--rte-ink) !important;
}
.yjd-rich-editor .block-toolbar-btn,
.yjd-rich-editor .table-toolbar-btn { color: var(--rte-ink-2); }

/* Bubble "✦ AI" entry (design bubbleAi) + hairline divider after it. */
.yjd-rich-editor .block-toolbar-btn.block-toolbar-ai {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--rte-radius-sm);
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
  font-family: var(--rte-ui);
  font-size: 12px;
  font-weight: 500;
}
.yjd-rich-editor .block-toolbar-btn.block-toolbar-ai:hover {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
  filter: brightness(0.97);
}
.yjd-rich-editor .block-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--rte-border);
  margin: 0 3px;
  flex: 0 0 auto;
}
/* "⋮" overflow sheet (design "Touch bubble · overflow menu"). */
.yjd-rich-editor .block-toolbar-more.open {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
}
.yjd-rich-editor .block-toolbar-sheet {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1001;
  width: 206px;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 212px;
  overflow-y: auto;
  background: var(--rte-bg);
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md);
  box-shadow: var(--rte-shadow);
}
.yjd-rich-editor .block-toolbar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-ink-2);
  font-family: var(--rte-ui);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.yjd-rich-editor .block-toolbar-item:hover { background: var(--rte-chrome-2); color: var(--rte-ink); }
.yjd-rich-editor .block-toolbar-item.danger { color: var(--rte-danger); }
.yjd-rich-editor .block-toolbar-item.danger:hover { background: var(--rte-danger-weak); color: var(--rte-danger); }
.yjd-rich-editor .block-toolbar-item svg { flex: 0 0 auto; }
.yjd-rich-editor .block-toolbar-item-label { flex: 1; }
.yjd-rich-editor .block-toolbar-kbd {
  font-family: var(--rte-mono);
  font-size: 10.5px;
  color: var(--rte-faint);
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-xs);
  padding: 1px 5px;
}
.yjd-rich-editor .block-toolbar-sheet-sep {
  height: 1px;
  background: var(--rte-border);
  margin: 4px 2px;
}
/* Touch: 44px comfortable rows per the design note. */
@media (hover: none) and (pointer: coarse) {
  .yjd-rich-editor .block-toolbar-item { min-height: 44px; }
}

/* Counted overflow toggle: bordered pill "⋯ +N"; pressed while open. */
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn {
  width: auto;
  min-width: var(--rte-ctl, 30px);
  padding: 0 8px;
  gap: 5px;
  border: 1px solid var(--rte-border);
  color: var(--rte-muted);
}
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn .rte-more-count {
  font-family: var(--rte-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn .rte-more-count:empty { display: none; }
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn.open,
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn.active {
  background: var(--rte-chrome-2) !important;
  color: var(--rte-ink) !important;
  border-color: var(--rte-border-strong);
}
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn.active .icon svg {
  color: var(--rte-ink) !important;
  fill: var(--rte-ink) !important;
}
/* The ⋯ dots are [fill="currentColor"] circles — the ink-fill active recipe
   paints those paper (for dark pressed tools), which vanishes on the
   more-btn's LIGHT pressed chrome. Re-ink them. */
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn.active .icon svg [fill="currentColor"],
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn.active:hover .icon svg [fill="currentColor"],
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn.active .icon svg path,
.yjd-rich-editor .rich-editor-toolbar-btn.more-btn.active:hover .icon svg path {
  fill: var(--rte-ink) !important;
  stroke: none !important;
}

/* Overflow row (v2): ONE horizontal-scroll row on chrome-2 with a label. */
.yjd-rich-editor .rich-editor-toolbar-2 { background: var(--rte-chrome-2); }
/* Desktop: WRAP to as many rows as needed — a hidden-scrollbar row reads as
   clipped (the last tools looked cut off and unreachable with a mouse).
   Touch keeps the design's single swipe-scroll row below. */
.yjd-rich-editor .rich-editor-toolbar-2-row.yjd-noscroll {
  flex-wrap: wrap;
  row-gap: 6px;
}
@media (hover: none) and (pointer: coarse) {
  .yjd-rich-editor .rich-editor-toolbar-2-row.yjd-noscroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .yjd-rich-editor .rich-editor-toolbar-2-row.yjd-noscroll::-webkit-scrollbar { display: none; }
}
.yjd-rich-editor .rich-editor-toolbar-2-row .toolbar-group { flex: 0 0 auto; }
/* Overflow buttons hover on chrome-3; dividers use the strong border there. */
.yjd-rich-editor .rich-editor-toolbar-2-row .toolbar-group + .toolbar-group::before {
  background: var(--rte-border-strong);
}

/* ---------- Popover/floating-bar active state = ink fill (v2 tbsOn) ---------- */
.yjd-rich-editor .yjd-image-align-btn.active,
.yjd-rich-editor .table-toolbar-btn.active {
  background: var(--rte-ink) !important;
  color: var(--rte-bg) !important;
  border-color: transparent !important;
}
/* Labelled picker rows (align/list): active = accent row, not ink tile. */
.yjd-rich-editor .align-button.active,
.yjd-rich-editor .list-button.active {
  background: var(--rte-accent-weak) !important;
  color: var(--rte-accent-ink) !important;
}
.yjd-rich-editor .align-button.active svg,
.yjd-rich-editor .list-button.active svg {
  color: var(--rte-accent-ink) !important;
  stroke: var(--rte-accent-ink) !important;
}
.yjd-rich-editor .yjd-image-align-btn.active svg,
.yjd-rich-editor .yjd-image-align-btn.active svg path,
.yjd-rich-editor .table-toolbar-btn.active svg,
.yjd-rich-editor .table-toolbar-btn.active svg path {
  color: var(--rte-bg) !important;
  stroke: var(--rte-bg) !important;
  fill: none !important;
}
.yjd-rich-editor .yjd-image-align-btn.active svg [fill="currentColor"],
.yjd-rich-editor .align-button.active svg [fill="currentColor"],
.yjd-rich-editor .list-button.active svg [fill="currentColor"] {
  fill: var(--rte-bg) !important;
  stroke: none !important;
}
/* …and pressed popover buttons ignore hover, same as the toolbar. */
.yjd-rich-editor .yjd-image-align-btn.active:hover,
.yjd-rich-editor .table-toolbar-btn.active:hover {
  background: var(--rte-ink) !important;
  color: var(--rte-bg) !important;
}
/* Labelled picker rows pin their ACCENT active state through hover. */
.yjd-rich-editor .align-button.active:hover,
.yjd-rich-editor .list-button.active:hover {
  background: var(--rte-accent-weak) !important;
  color: var(--rte-accent-ink) !important;
}
.yjd-rich-editor .align-button.active:hover svg,
.yjd-rich-editor .list-button.active:hover svg {
  color: var(--rte-accent-ink) !important;
  stroke: var(--rte-accent-ink) !important;
}

/* ---------- Popover form metrics (v2): 26px inputs & buttons ----------
   The design's popovers (link, find & replace) use compact 26px controls at
   12px type — noticeably smaller than the 30px chrome controls. */
.yjd-rich-editor .rich-editor-popup-container .yjd-input,
.yjd-rich-editor .rich-editor-popup-container .yjd-select-input {
  height: var(--rte-ctl, 30px);
  min-height: var(--rte-ctl, 30px);
  padding: 0 10px;
  border-color: var(--rte-border-strong);
  border-radius: var(--rte-radius-sm);
}
.yjd-rich-editor .yjd-find-input {
  height: 26px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: var(--rte-radius-sm);
}
.yjd-rich-editor .yjd-find-btn:not(.yjd-find-icon):not(.yjd-find-toggle) {
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 500;
}
.yjd-rich-editor .yjd-find-btn.yjd-find-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
}
.yjd-rich-editor .yjd-find-replace { padding: 9px; gap: 6px; }
.yjd-rich-editor .yjd-find-count { font-family: var(--rte-mono); font-size: 11px; }
.yjd-rich-editor .rich-editor-popup-container .yjd-button-confirm,
.yjd-rich-editor .rich-editor-popup-container .yjd-button-cancel,
.yjd-rich-editor .link-popup-apply {
  height: 28px;
  padding: 0 12px;
}
.yjd-rich-editor .link-popup {
  padding: 9px;
  width: 262px;
  box-sizing: border-box;
}
.yjd-rich-editor .link-popup .link-popup-row { gap: 6px; margin-bottom: 7px; }
.yjd-rich-editor .link-popup .link-popup-row:last-child { margin-bottom: 0; }
.yjd-rich-editor .link-popup .yjd-input { flex: 1; min-width: 0; }

/* ---------- Form popups (image / video / tag / import): v2 shell ----------
   Design cards "Video popup" / "Import popup" / "Tag popup": 14px card
   padding, h3 title 13.5/600, 11.5/500 labels, 30px inputs, 28px buttons. */
.yjd-rich-editor .image-popup,
.yjd-rich-editor .video-popup,
.yjd-rich-editor .tag-popup,
.yjd-rich-editor .import-popup {
  width: 300px;
  box-sizing: border-box;
  padding: 14px;
}
.yjd-rich-editor .rich-editor-popup-container .yjd-input-title,
.yjd-rich-editor .import-popup-title {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rte-ink);
}
.yjd-rich-editor .rich-editor-popup-container .yjd-input-label,
.yjd-rich-editor .import-input-label {
  display: block;
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rte-ink-2);
}
.yjd-rich-editor .yjd-input-upload-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.yjd-rich-editor .yjd-input-upload-group .yjd-input { flex: 1; min-width: 0; }
.yjd-rich-editor .rich-editor-popup-container .yjd-custom-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rte-ctl, 30px);
  height: var(--rte-ctl, 30px);
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-chrome);
  color: var(--rte-ink-2);
}
.yjd-rich-editor .rich-editor-popup-container .yjd-custom-upload-button svg {
  width: 15px;
  height: 15px;
}
.yjd-rich-editor .yjd-button-container {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 14px;
}
.yjd-rich-editor .rich-editor-popup-container .image-preview-container img,
.yjd-rich-editor .rich-editor-popup-container .video-preview-container video {
  border-radius: var(--rte-radius-md);
  max-width: 100%;
}
/* File preview gets a bottom scrim so the white controls stay legible. */
.yjd-rich-editor .rich-editor-popup-container .video-preview-container::after,
.yjd-rich-editor .rich-editor-popup-container .image-preview-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
/* Inline URL check under the video field: "Recognised host — …". */
.yjd-rich-editor .yjd-url-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--rte-success);
}
.yjd-rich-editor .yjd-url-check svg { flex: 0 0 auto; }
/* Drop zone inside the video/image popups while files are dragged over. */
.yjd-rich-editor .yjd-popup-dropzone {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 20px 14px;
  border: 1.5px dashed var(--rte-accent);
  border-radius: var(--rte-radius-sm);
  background: rgba(91, 91, 214, 0.06);
  color: var(--rte-accent-ink);
  text-align: center;
}
.yjd-rich-editor .yjd-popup-dropzone.active { display: flex; }
.yjd-rich-editor .yjd-popup-dropzone .yjd-dropzone-main { font-size: 12.5px; font-weight: 500; }
.yjd-rich-editor .yjd-popup-dropzone .yjd-dropzone-sub { font-size: 11px; color: var(--rte-muted); }

/* ---------- Import popup: type select, drop area, file row, notice ------- */
.yjd-rich-editor .import-popup .import-type-select {
  display: block;
  width: 100%;
  height: var(--rte-ctl, 30px);
  margin-bottom: 9px;
  padding: 0 9px;
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-bg);
  color: var(--rte-ink);
  font-size: 12.5px !important;
  cursor: pointer;
}
.yjd-rich-editor .import-drop-area {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px;
  border: 1px dashed var(--rte-border);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-chrome-2);
  color: var(--rte-faint);
  font-size: 12px;
  line-height: 1.5;
  cursor: not-allowed;
}
.yjd-rich-editor .import-drop-area.ready {
  color: var(--rte-muted);
  cursor: pointer;
}
.yjd-rich-editor .import-drop-area.drag {
  border-color: var(--rte-accent);
  border-style: dashed;
  background: rgba(91, 91, 214, 0.06);
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .import-drop-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-bg);
}
.yjd-rich-editor .import-file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-chrome);
}
.yjd-rich-editor .import-file-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-bg);
  color: var(--rte-muted);
}
.yjd-rich-editor .import-file-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.yjd-rich-editor .import-file-name {
  font-size: 12.5px;
  color: var(--rte-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yjd-rich-editor .import-file-size {
  font-family: var(--rte-mono);
  font-size: 10.5px;
  color: var(--rte-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yjd-rich-editor .import-file-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-faint);
  cursor: pointer;
}
.yjd-rich-editor .import-file-x:hover { color: var(--rte-ink); background: var(--rte-chrome-2); }
/* Inline "needs extra libraries" notice — replaces the post-pick alert(). */
.yjd-rich-editor .yjd-popup-notice {
  display: flex;
  gap: 9px;
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(168, 101, 0, 0.26);
  border-radius: var(--rte-radius-md);
  background: var(--rte-warning-weak);
  font-size: 12px;
  line-height: 1.55;
  color: var(--rte-ink-2);
}
.yjd-rich-editor .yjd-popup-notice svg { flex: 0 0 auto; margin-top: 1px; color: var(--rte-warning); }

/* ---------- Tag popup: suggestion chips ---------- */
.yjd-rich-editor .tag-popup .yjd-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.yjd-rich-editor .tag-popup .yjd-suggestion-button {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--rte-border);
  border-radius: 20px;
  background: var(--rte-bg);
  color: var(--rte-ink-2);
  font-size: 12px !important;
  cursor: pointer;
}
.yjd-rich-editor .tag-popup .yjd-suggestion-button:hover {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
}
.yjd-rich-editor .tag-popup .yjd-input-group { margin-bottom: 10px; }
.yjd-rich-editor .tag-popup .yjd-input-group:last-of-type { margin-bottom: 0; }
.yjd-rich-editor .tag-popup .yjd-select-input,
.yjd-rich-editor .tag-popup .yjd-input { width: 100%; box-sizing: border-box; }

/* ---------- Drag & drop: drop pill + visible drop caret ---------- */
.rich-editor-area.yjd-drag-over::after {
  content: "Drop to insert here";
  position: absolute;
  right: 12px;
  top: 10px;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 20px;
  background: var(--rte-accent);
  color: var(--rte-accent-ink-on, #fff);
  font-size: 11px;
  font-weight: 500;
  box-shadow: var(--rte-shadow-sm);
  pointer-events: none;
}
.yjd-drop-caret {
  position: fixed;
  width: 2px;
  border-radius: 2px;
  background: var(--rte-accent, #5b5bd6);
  pointer-events: none;
  z-index: 10000;
}
.yjd-drop-caret::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: inherit;
}
/* Unhandled-drop toast. */
.yjd-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(92vw, 380px);
  padding: 9px 13px;
  border: 1px solid var(--rte-border-strong, #ced2d9);
  border-radius: var(--rte-radius-md, 8px);
  background: var(--rte-bg, #fff);
  color: var(--rte-ink-2, #3c424d);
  font-size: 12.5px;
  box-shadow: var(--rte-shadow, 0 10px 28px -8px rgba(16, 18, 23, 0.2));
  animation: yjd-toast-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yjd-toast svg { flex: 0 0 auto; color: var(--rte-warning, #a86500); }
@keyframes yjd-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- Toolbar selects: quiet by default (design recipe) ----------
   The design's chrome-bar select has NO border and NO fill at rest — the
   chrome-2 wash and hairline border only appear on hover. */
.yjd-rich-editor .rich-editor-toolbar-container .custom-select-button {
  border-color: transparent;
  background: transparent;
  color: var(--rte-ink);
  font-size: 13px;
  font-weight: 400;
  gap: 6px;
  padding: 0 5px 0 8px;
  justify-content: space-between;
}
.yjd-rich-editor .rich-editor-toolbar-container .custom-select-button:hover {
  background: var(--rte-chrome-2);
  border-color: var(--rte-border);
}
/* Trigger stays pressed while its popup is open (v2 select spec). */
.yjd-rich-editor .rich-editor-toolbar-container .custom-select-button.open {
  background: var(--rte-chrome-2);
  border-color: var(--rte-border-strong);
}
.yjd-rich-editor .custom-select-button .dropdown-icon { color: var(--rte-muted); }

/* Select popup (v2 listbox recipe): 4px padding, mono group header, compact
   options — hover chrome-3, current = accent wash + 500 with the check right. */
.yjd-rich-editor .custom-select-popup,
.yjd-rich-editor .heading-select-popup,
.yjd-rich-editor .capitalization-select-popup,
.yjd-rich-editor .font-family-select-popup,
.yjd-rich-editor .line-height-select-popup,
.yjd-rich-editor .text-size-select-popup {
  padding: 4px;
}
.yjd-rich-editor .custom-select-header {
  padding: 6px 8px 5px;
  font-family: var(--rte-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rte-faint);
}
/* Higher specificity than the legacy per-popup rules (min-height 34 / 14px). */
.yjd-rich-editor .rich-editor-popup-container .custom-select-item-button,
.yjd-rich-editor .custom-select-item-button {
  min-height: 0;
  padding: 6px 8px;
  font-size: 12.5px !important;
  color: var(--rte-ink-2);
}
/* An option that IS the current value ignores hover (pressed state wins). */
.yjd-rich-editor .rich-editor-popup-container .custom-select-item-button:not(.current):hover,
.yjd-rich-editor .custom-select-item-button:not(.current):hover {
  background: var(--rte-chrome-3);
  color: var(--rte-ink);
}
/* Current row's checkmark: 15px accent-inked, right-aligned (v2 spec). */
.yjd-rich-editor .custom-select-item-button .item-checkmark svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}
.yjd-rich-editor .custom-select-item-button.current .item-checkmark {
  display: inline-flex;
  align-items: center;
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .custom-select-item-button.current {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
  font-weight: 500;
}

/* ---------- Ask AI pill (toolbar) ---------- */
.yjd-rich-editor .rich-editor-toolbar-btn .rte-btn-label {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.yjd-rich-editor .rich-editor-toolbar-btn.ai-btn {
  width: auto; /* labelled pill — don't inherit the fixed square width */
  padding: 0 10px;
  gap: 6px;
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
  border-color: var(--rte-accent-weak);
}
.yjd-rich-editor .rich-editor-toolbar-btn.ai-btn:hover {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
  border-color: var(--rte-accent);
}
/* v2 right cluster: the "⋯ +N" toggle carries the auto margin; the AI group
   follows it with a hairline divider and sits outermost right. */
.yjd-rich-editor .rich-editor-toolbar-1 .more-btn + .toolbar-group:has(> .ai-btn) {
  display: inline-flex;
  margin-left: 0;
}
.yjd-rich-editor .rich-editor-toolbar-1 .more-btn + .toolbar-group:has(> .ai-btn)::before {
  content: '';
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 20px;
  background: var(--rte-border);
  margin: 0 max(0px, calc(var(--rte-gap, 6px) - 2px)) 0 var(--rte-gap, 6px);
}

/* ---------- Slash menu: header, icon tiles, shortcut chips ---------- */
.yjd-slash-head {
  padding: 6px 8px 8px;
  font-family: var(--rte-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rte-faint);
}
.yjd-slash-item {
  gap: 10px;
}
.yjd-slash-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-bg);
  color: var(--rte-muted);
}
/* Active row: quiet chrome wash (not the accent), accent-tinted glyph. */
.yjd-slash-item:hover,
.yjd-slash-item.active {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
}
.yjd-slash-item:hover .yjd-slash-icon,
.yjd-slash-item.active .yjd-slash-icon {
  color: var(--rte-accent-ink);
  background: var(--rte-bg);
}
.yjd-slash-item.active .yjd-slash-hint { color: var(--rte-muted); }
.yjd-slash-key {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--rte-mono);
  font-size: 10.5px;
  color: var(--rte-faint);
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-xs);
  padding: 1px 5px;
}

/* ---------- Mention menu: two-line rows ---------- */
.yjd-mention-item:hover,
.yjd-mention-item.active {
  background: var(--rte-chrome-2);
  color: var(--rte-ink);
}
.yjd-mention-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.yjd-mention-initial {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yjd-mention-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  text-align: start;
}
.yjd-mention-name { font-size: 12.5px; }
.yjd-mention-handle {
  font-size: 11px;
  color: var(--rte-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Colour picker (UI 2.0 v2): 6-col grid + utility row + hex ---------- */
.yjd-rich-editor .color-picker-popup {
  width: 236px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--rte-border-strong);
}
.yjd-rich-editor .color-picker-head {
  padding: 2px 2px 8px;
  font-family: var(--rte-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rte-faint);
}
.yjd-rich-editor .color-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-bottom: 0;
}
.yjd-rich-editor .color-button {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(21, 23, 28, 0.16);
  border-radius: var(--rte-radius-xs);
}
.yjd-rich-editor .color-button:hover {
  transform: none;
  border-color: var(--rte-border-strong);
  box-shadow: 0 0 0 2px var(--rte-bg), 0 0 0 3.5px var(--rte-accent);
}
/* Bottom utility row: no-colour · white · black · custom · spacer · hex. */
.yjd-rich-editor .custom-color-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rte-border);
}
.yjd-rich-editor .custom-color-container::before { content: none; }
.yjd-rich-editor .custom-color-container .color-button {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-muted);
  padding: 0;
}
.yjd-rich-editor .custom-color-container .white-button { background: #ffffff; }
.yjd-rich-editor .custom-color-container .black-button {
  background: #000000;
  border-color: rgba(21, 23, 28, 0.22);
}
.yjd-rich-editor .custom-color-container .custom-color-button { color: var(--rte-ink-2); }
.yjd-rich-editor .color-row-spacer { flex: 1; }
.yjd-rich-editor .color-hex-readout {
  font-family: var(--rte-mono);
  font-size: 10px;
  color: var(--rte-faint);
}
/* The hidden <input type=color> must not take layout space in the row. */
.yjd-rich-editor .custom-color-input {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
}

/* ---------- Table size picker ---------- */
.yjd-rich-editor .table-grid-selector {
  gap: 3px;
  border-bottom: 0;
}
.yjd-rich-editor .table-grid-cell {
  width: 16px;
  height: 16px;
  border: 1px solid var(--rte-border);
  border-radius: 2px;
}
.yjd-rich-editor .table-grid-cell:hover,
.yjd-rich-editor .table-grid-cell.highlighted {
  background: var(--rte-accent-weak);
  border-color: var(--rte-accent);
}
.yjd-rich-editor .table-size-display {
  margin-top: 8px;
  font-family: var(--rte-mono) !important;
  font-size: 11px;
  color: var(--rte-muted) !important;
}

/* ---------- Media resize: square handles, size badge, delete ---------- */
.yjd-rich-editor .resize-handle {
  width: 8px !important;
  height: 8px !important;
  background: var(--rte-bg) !important;
  border: 1.5px solid var(--rte-accent) !important;
  border-radius: 2px !important;
  box-shadow: var(--rte-shadow-sm) !important;
}
.yjd-rich-editor .yjd-resize-size {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1000;
  font-family: var(--rte-mono);
  font-size: 10px;
  color: var(--rte-accent-ink-on);
  background: var(--rte-accent);
  border-radius: var(--rte-radius-xs);
  padding: 1px 5px;
  pointer-events: none;
  white-space: nowrap;
}
.yjd-rich-editor .yjd-image-align-sep {
  width: 1px;
  height: 16px;
  background: var(--rte-border);
  margin: 0 2px;
  align-self: center;
}
.yjd-rich-editor .yjd-image-delete-btn { color: var(--rte-danger); }
.yjd-rich-editor .yjd-image-delete-btn:hover {
  background: var(--rte-danger-weak);
  color: var(--rte-danger);
}

/* ---------- Find & replace: match-option chip ---------- */
.yjd-rich-editor .yjd-find-toggle {
  border: 1px solid var(--rte-border);
  border-radius: 20px;
  font-size: 11px;
  padding: 0 9px;
  color: var(--rte-ink-2);
}
.yjd-rich-editor .yjd-find-toggle.active {
  border-color: var(--rte-accent);
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .yjd-find-opts { gap: 5px; }
.yjd-rich-editor .yjd-find-regex { font-family: var(--rte-mono); }
/* Kill the UA-native button face (a legacy `background: 0 0` let Chromium
   paint white native buttons in dark mode) — same specificity, later wins. */
.yjd-rich-editor .yjd-find-btn:not(.yjd-find-icon):not(.yjd-find-toggle) {
  appearance: none;
  -webkit-appearance: none;
  background: var(--rte-chrome);
  color: var(--rte-ink);
  border: 1px solid var(--rte-border);
}
.yjd-rich-editor .yjd-find-btn:not(.yjd-find-icon):not(.yjd-find-toggle):hover {
  background: var(--rte-chrome-2);
}
.yjd-rich-editor .yjd-find-btn.yjd-find-toggle:not(.yjd-find-icon) {
  appearance: none;
  -webkit-appearance: none;
  background: var(--rte-bg);
}
.yjd-rich-editor .yjd-find-btn.yjd-find-toggle.active:not(.yjd-find-icon) {
  background: var(--rte-accent-weak);
}

/* ---------- Callout block (UI 2.0) ---------- */
.yjd-rich-editor .rich-editor-area .yjd-callout,
.yjd-content .yjd-callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin: 12px 0;
  border: 1px solid rgba(31, 111, 220, 0.22);
  border-radius: var(--rte-radius-md);
  background: var(--rte-info-weak);
}
.yjd-rich-editor .rich-editor-area .yjd-callout::before,
.yjd-content .yjd-callout::before {
  content: '';
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  background: var(--rte-info);
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%2016v-5'/%3E%3Cpath%20d='M12%208h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.yjd-rich-editor .rich-editor-area .yjd-callout > p,
.yjd-content .yjd-callout > p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 0.92em;
  line-height: 1.6;
  color: var(--rte-ink-2);
}
.yjd-callout[data-callout="success"] { background: var(--rte-success-weak) !important; border-color: rgba(15, 138, 95, 0.24) !important; }
.yjd-callout[data-callout="success"]::before { background: var(--rte-success) !important; }
.yjd-callout[data-callout="warning"] { background: var(--rte-warning-weak) !important; border-color: rgba(168, 101, 0, 0.26) !important; }
.yjd-callout[data-callout="warning"]::before { background: var(--rte-warning) !important; }
.yjd-callout[data-callout="danger"] { background: var(--rte-danger-weak) !important; border-color: rgba(208, 52, 58, 0.26) !important; }
.yjd-callout[data-callout="danger"]::before { background: var(--rte-danger) !important; }

/* ---------- Toggle block (UI 2.0, native details/summary) ---------- */
.yjd-rich-editor .rich-editor-area .yjd-toggle,
.yjd-content .yjd-toggle {
  margin: 12px 0;
  padding: 2px 0;
}
.yjd-rich-editor .rich-editor-area .yjd-toggle > summary,
.yjd-content .yjd-toggle > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--rte-radius-sm);
  padding: 2px 4px;
}
.yjd-rich-editor .rich-editor-area .yjd-toggle > summary::-webkit-details-marker { display: none; }
.yjd-rich-editor .rich-editor-area .yjd-toggle > summary::before,
.yjd-content .yjd-toggle > summary::before {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: var(--rte-faint);
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%2018%206-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--rte-t);
}
.yjd-rich-editor .rich-editor-area .yjd-toggle[open] > summary::before,
.yjd-content .yjd-toggle[open] > summary::before {
  transform: rotate(90deg);
}
.yjd-rich-editor .rich-editor-area .yjd-toggle > :not(summary),
.yjd-content .yjd-toggle > :not(summary) {
  margin-left: 22px;
}

/* ---------- Side panel: Outline · Comments · Versions (UI 2.0 rail) ---------- */
.yjd-rich-editor .yjd-side-layout {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  /* Respond to the EDITOR's own width, not the viewport: an editor embedded in
     a narrow column (or a split/preview pane) on a wide screen must still fold
     the rail. The container query below keys off this element's inline size. */
  container-type: inline-size;
  container-name: yjd-editor;
}
.yjd-rich-editor .yjd-side-layout > .rich-editor-area { flex: 1 1 auto; min-width: 0; }
.yjd-rich-editor .yjd-side-panel {
  flex: 0 0 268px;
  /* Hard cap: a nowrap row (resolved "Resolved by … — …") must ellipsise,
     not push the rail past its 268px basis via min-width:auto. */
  width: 268px;
  max-width: 268px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rte-border);
  background: var(--rte-chrome);
  min-height: 0;
  overflow: hidden;
}
.yjd-rich-editor .yjd-side-tabs {
  display: flex;
  gap: 1px;
  padding: 8px;
  border-bottom: 1px solid var(--rte-border);
}
.yjd-rich-editor .yjd-side-tab {
  flex: 1;
  height: 26px;
  border: 0;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-muted);
  font-family: var(--rte-ui);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--rte-t);
}
.yjd-rich-editor .yjd-side-tab:hover { background: var(--rte-chrome-2); }
.yjd-rich-editor .yjd-side-tab.active {
  background: var(--rte-accent-weak);
  color: var(--rte-accent-ink);
}
.yjd-rich-editor .yjd-side-body {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.yjd-rich-editor .yjd-side-empty {
  padding: 18px 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--rte-faint);
  text-align: center;
}
/* Outline rows */
.yjd-rich-editor .yjd-side-outline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-muted);
  font-family: var(--rte-ui);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.yjd-rich-editor .yjd-side-outline-row.lvl-1 { color: var(--rte-ink); font-weight: 500; font-size: 12.5px; }
.yjd-rich-editor .yjd-side-outline-row.lvl-2 { padding-left: 21px; }
.yjd-rich-editor .yjd-side-outline-row.lvl-3 { padding-left: 34px; }
.yjd-rich-editor .yjd-side-outline-row:hover { background: var(--rte-chrome-2); }
.yjd-rich-editor .yjd-side-tag {
  flex: 0 0 auto;
  font-family: var(--rte-mono);
  font-size: 9.5px;
  color: var(--rte-faint);
}
.yjd-rich-editor .yjd-side-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Comment cards */
.yjd-rich-editor .yjd-side-comment {
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-md);
  background: var(--rte-bg);
  cursor: pointer;
}
.yjd-rich-editor .yjd-side-comment.focus {
  border-color: var(--rte-border-strong);
  box-shadow: var(--rte-shadow-sm);
}
.yjd-rich-editor .yjd-side-comment-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.yjd-rich-editor .yjd-side-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rte-accent);
  color: var(--rte-accent-ink-on);
  font-size: 8.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yjd-rich-editor .yjd-side-who { font-size: 12px; font-weight: 500; color: var(--rte-ink); flex: 1; }
.yjd-rich-editor .yjd-side-time { font-size: 10.5px; color: var(--rte-faint); }
.yjd-rich-editor .yjd-side-x {
  border: 0;
  background: transparent;
  color: var(--rte-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--rte-radius-xs);
}
.yjd-rich-editor .yjd-side-x:hover { background: var(--rte-danger-weak); color: var(--rte-danger); }
.yjd-rich-editor .yjd-side-quote {
  font-size: 11.5px;
  color: var(--rte-muted);
  border-left: 2px solid var(--rte-quote-border);
  padding-left: 7px;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yjd-rich-editor .yjd-side-text { font-size: 12px; line-height: 1.5; color: var(--rte-ink-2); }
/* Version rows */
.yjd-rich-editor .yjd-side-version {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  border: 0;
  border-top: 1px solid var(--rte-hairline);
  background: transparent;
  border-radius: var(--rte-radius-sm);
  font-family: var(--rte-ui);
  cursor: pointer;
  text-align: left;
}
.yjd-rich-editor .yjd-side-version:first-child { border-top: 0; }
.yjd-rich-editor .yjd-side-version:hover { background: var(--rte-chrome-2); }
.yjd-rich-editor .yjd-side-version.current { background: var(--rte-accent-weak); }
.yjd-rich-editor .yjd-side-v { font-family: var(--rte-mono); font-size: 11px; color: var(--rte-muted); }
.yjd-rich-editor .yjd-side-version.current .yjd-side-v { color: var(--rte-accent-ink); }
.yjd-rich-editor .yjd-side-vwho { font-size: 12px; color: var(--rte-ink-2); }
.yjd-rich-editor .yjd-side-spacer { flex: 1; }
.yjd-rich-editor .yjd-side-vtag {
  font-size: 10px;
  color: var(--rte-muted);
  border: 1px solid var(--rte-border);
  border-radius: 20px;
  padding: 1px 6px;
}
.yjd-rich-editor .yjd-side-vtime { font-size: 10.5px; color: var(--rte-faint); font-family: var(--rte-mono); }
/* Comment marks in the content (design: warning wash + 2px underline). */
.yjd-rich-editor .yjd-comment-mark,
.yjd-content .yjd-comment-mark {
  background: var(--rte-warning-weak);
  border-bottom: 2px solid var(--rte-warning);
  border-radius: 2px 2px 0 0;
  padding: 1px 0;
  cursor: pointer;
}

/* ---------- Comments (design section 09 — Review) ---------- */
/* Thread popover / composer shell — anchored under the mark. */
.yjd-rich-editor .yjd-comment-pop {
  position: absolute;
  z-index: 1200;
  width: 262px;
  box-sizing: border-box;
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md);
  background: var(--rte-bg);
  box-shadow: var(--rte-shadow);
  overflow: hidden;
}
.yjd-rich-editor .yjd-c-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
.yjd-rich-editor .yjd-c-row { display: flex; gap: 9px; }
.yjd-rich-editor .yjd-c-col { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.yjd-rich-editor .yjd-c-head { display: flex; align-items: baseline; gap: 6px; }
.yjd-rich-editor .yjd-c-who { font-size: 12.5px; font-weight: 600; color: var(--rte-ink); }
.yjd-rich-editor .yjd-c-time { font-size: 10.5px; font-family: var(--rte-mono); color: var(--rte-faint); }
.yjd-rich-editor .yjd-c-body { font-size: 12.5px; line-height: 1.55; color: var(--rte-ink-2); }
.yjd-rich-editor .yjd-c-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--rte-accent-ink-on, #fff);
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yjd-rich-editor .yjd-c-avatar.sm { width: 20px; height: 20px; font-size: 9px; }
.yjd-rich-editor .yjd-c-replyrow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-top: 1px solid var(--rte-border);
  background: var(--rte-chrome-2);
}
.yjd-rich-editor .yjd-c-replyinput { flex: 1; min-width: 0; height: 26px !important; min-height: 26px !important; }
.yjd-rich-editor .yjd-c-replybtn { height: 26px; padding: 0 10px; }
.yjd-rich-editor .yjd-c-actions {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px 0;
}
.yjd-rich-editor .yjd-c-resolve {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-muted);
  font-size: 11.5px;
  cursor: pointer;
}
.yjd-rich-editor .yjd-c-resolve:hover { background: var(--rte-success-weak); color: var(--rte-success); }
/* Composer (design "New comment composer"). */
.yjd-rich-editor .yjd-c-composer { padding: 11px; }
.yjd-rich-editor .yjd-c-quote {
  font-size: 11.5px;
  color: var(--rte-muted);
  border-left: 2px solid var(--rte-warning);
  padding-left: 8px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.yjd-rich-editor .yjd-c-field {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rte-accent);
  border-radius: var(--rte-radius-sm);
  padding: 8px 9px;
  font: 400 12.5px/1.55 var(--rte-ui);
  color: var(--rte-ink);
  background: var(--rte-bg);
  resize: vertical;
  min-height: 52px;
  outline: none;
}
.yjd-rich-editor .yjd-c-field:focus { box-shadow: 0 0 0 2px var(--rte-accent-ring); }
.yjd-rich-editor .yjd-c-composer-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}
.yjd-rich-editor .yjd-c-cbtn { height: 26px !important; padding: 0 10px; }
.yjd-rich-editor .yjd-c-hint {
  margin-top: 9px;
  font-size: 10.5px;
  font-family: var(--rte-mono);
  color: var(--rte-faint);
  text-align: center;
}
/* Rail: Open/Resolved filter chips. */
.yjd-rich-editor .yjd-c-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
}
.yjd-rich-editor .yjd-c-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--rte-border);
  border-radius: 20px;
  background: var(--rte-bg);
  color: var(--rte-ink-2);
  font-size: 11.5px;
  cursor: pointer;
}
.yjd-rich-editor .yjd-c-chip.on {
  background: var(--rte-accent-weak);
  border-color: var(--rte-accent);
  color: var(--rte-accent-ink);
}
/* Rail: thread cards. */
.yjd-rich-editor .yjd-c-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-bg);
  cursor: pointer;
}
.yjd-rich-editor .yjd-c-card:hover { border-color: var(--rte-border-strong); }
.yjd-rich-editor .yjd-c-card.focus {
  border-color: var(--rte-accent);
  border-left-width: 2px;
}
.yjd-rich-editor .yjd-c-card .yjd-c-head { align-items: center; gap: 7px; }
.yjd-rich-editor .yjd-c-card .yjd-c-avatar { width: 18px; height: 18px; font-size: 8.5px; }
.yjd-rich-editor .yjd-c-replies { font-size: 11.5px; color: var(--rte-accent-ink); }
.yjd-rich-editor .yjd-c-orphan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--rte-warning);
}
/* Rail: resolved rows. */
.yjd-rich-editor .yjd-c-resolved {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius-sm);
  background: var(--rte-chrome-2);
  opacity: 0.72;
}
.yjd-rich-editor .yjd-c-check { color: var(--rte-success); display: inline-flex; flex: 0 0 auto; }
.yjd-rich-editor .yjd-c-resolved-text {
  font-size: 12.5px;
  color: var(--rte-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yjd-rich-editor .yjd-c-undo {
  font-size: 11.5px;
  color: var(--rte-muted);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--rte-ui);
  flex: 0 0 auto;
}
.yjd-rich-editor .yjd-c-undo:hover { color: var(--rte-ink); }
/* Touch: the popover re-pins as a bottom sheet with a grab handle. */
@media (hover: none) and (pointer: coarse) {
  .yjd-rich-editor .yjd-comment-pop {
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    top: auto !important;
    width: auto;
    transform: none !important;
    border-radius: 16px 16px 0 0;
    padding-top: 6px;
  }
  .yjd-rich-editor .yjd-comment-pop::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: var(--rte-border-strong);
    margin: 3px auto 6px;
  }
}

/* The rail collapses on narrow editors — keyed to the EDITOR's width (container
   query), so a narrow editor inside a wide viewport folds it too instead of
   squeezing the content column to a mid-word-wrapping sliver. Legacy viewport
   fallback kept for engines without container-query support. */
@container yjd-editor (max-width: 720px) {
  .yjd-rich-editor .yjd-side-panel { display: none; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .yjd-rich-editor .yjd-side-panel { display: none; }
  }
}

/* ---------- Block gutter: drag handle + plus (UI 2.0 editor surface) ---------- */
/* The design reserves a left gutter for the handles — widen the content's
   left padding while the module is active (desktop pointers only). */
@media (hover: hover) and (pointer: fine) {
  .yjd-rich-editor.yjd-has-block-handles .rich-editor-area {
    padding-left: 64px;
  }
}
.yjd-rich-editor .yjd-block-gutter {
  position: absolute;
  z-index: 998;
  display: inline-flex;
  gap: 2px;
  opacity: 0.65;
  transition: opacity var(--rte-t);
  pointer-events: auto;
}
.yjd-rich-editor .yjd-block-gutter:hover { opacity: 1; }
.yjd-rich-editor .yjd-block-gutter.dragging { opacity: 1; }
.yjd-rich-editor .yjd-block-drag,
.yjd-rich-editor .yjd-block-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--rte-radius-xs);
  background: transparent;
  color: var(--rte-faint);
  cursor: pointer;
  padding: 0;
}
.yjd-rich-editor .yjd-block-drag { cursor: grab; }
.yjd-rich-editor .yjd-block-gutter.dragging .yjd-block-drag { cursor: grabbing; }
.yjd-rich-editor .yjd-block-drag:hover,
.yjd-rich-editor .yjd-block-plus:hover {
  background: var(--rte-chrome-2);
  color: var(--rte-muted);
}
.yjd-rich-editor .yjd-block-drag svg,
.yjd-rich-editor .yjd-block-plus svg { width: 16px; height: 16px; }
.yjd-rich-editor .yjd-drop-indicator {
  position: absolute;
  z-index: 999;
  height: 2px;
  border-radius: 1px;
  background: var(--rte-accent);
  pointer-events: none;
}
.yjd-rich-editor .yjd-block-dragging { opacity: 0.4; }

/* ---------- Code-block tools: language label + Copy chip ---------- */
.yjd-rich-editor .yjd-codeblock-bar {
  position: absolute;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  box-sizing: border-box;
  pointer-events: auto;
}
/* Reserve the design's header strip inside code blocks so the lang/Copy line
   never overlaps the first line of code (module adds the wrapper class). */
.yjd-rich-editor.yjd-has-codetools .rich-editor-area pre {
  padding-top: 38px;
}
.yjd-rich-editor .yjd-codeblock-lang {
  font-family: var(--rte-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rte-code-block-ink);
  opacity: 0.45;
}
.yjd-rich-editor .yjd-codeblock-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--rte-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--rte-code-block-ink);
  font-family: var(--rte-mono);
  font-size: 11px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--rte-t), background var(--rte-t);
}
.yjd-rich-editor .yjd-codeblock-copy:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.yjd-rich-editor .yjd-codeblock-copy.copied { color: var(--rte-success); opacity: 1; }
.yjd-rich-editor .yjd-codeblock-copy svg { width: 12px; height: 12px; }

/* ---------- Date chip ---------- */
.yjd-rich-editor .yjd-date-chip,
.yjd-content .yjd-date-chip {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--rte-info-weak);
  color: var(--rte-info);
  font-size: 0.88em;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Loading skeleton (States · Loading) ----------
   Mirrors the real chrome heights (44px bar + body) so swapping the skeleton
   for the mounted editor causes zero layout shift. Markup:
   <div class="yjd-skeleton">
     <div class="yjd-skeleton-bar"><span class="yjd-skeleton-chip"></span> …
       <span class="yjd-skeleton-chip yjd-skeleton-chip--wide"></span></div>
     <div class="yjd-skeleton-body"><span class="yjd-skeleton-line" style="width:70%"></span> …</div>
   </div> */
.yjd-skeleton {
  border: 1px solid var(--rte-border, #e3e5ea);
  border-radius: var(--rte-radius, 10px);
  background: var(--rte-bg, #fff);
  overflow: hidden;
}
.yjd-skeleton-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  background: var(--rte-chrome, #fcfcfd);
  border-bottom: 1px solid var(--rte-border, #e3e5ea);
}
.yjd-skeleton-chip,
.yjd-skeleton-line {
  display: block;
  border-radius: var(--rte-radius-sm, 6px);
  background: linear-gradient(90deg, var(--rte-chrome-2, #f3f4f6) 25%, var(--rte-chrome-3, #eceef1) 37%, var(--rte-chrome-2, #f3f4f6) 63%);
  background-size: 400% 100%;
  animation: yjd-skeleton-shimmer 1.3s ease infinite;
}
.yjd-skeleton-chip { width: 26px; height: 26px; flex: 0 0 auto; }
.yjd-skeleton-chip--wide { width: 86px; }
.yjd-skeleton-body { padding: 20px; }
.yjd-skeleton-line { height: 13px; border-radius: 5px; margin-bottom: 12px; width: 80%; }
@keyframes yjd-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .yjd-skeleton-chip, .yjd-skeleton-line { animation: none; }
}

/* ---------- Error states (UI 2.0 input-error recipe) ---------- */
.yjd-rich-editor .yjd-input.yjd-input--error {
  border-color: var(--rte-danger);
  box-shadow: 0 0 0 3px rgba(208, 52, 58, 0.18);
}
.yjd-rich-editor .yjd-input.yjd-input--error:focus {
  border-color: var(--rte-danger);
  box-shadow: 0 0 0 3px rgba(208, 52, 58, 0.18);
}
.yjd-rich-editor .link-popup-error {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--rte-danger);
}
.yjd-rich-editor .link-popup-error svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* Attachment chip upload status: progress bar while pending, danger ring +
   "!" badge on failure (chip keeps the file so the user can retry/remove). */
/* Upload status (design "Upload status"): spinner ring while pending; error
   chips go danger-weak with an inline retry affordance. */
.rte-attach-chip[data-status="error"] {
  border-color: rgba(208, 52, 58, 0.4) !important;
  background: var(--rte-danger-weak, #fdecec);
}
.rte-attach-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid var(--rte-border);
  border-top-color: var(--rte-accent);
  border-radius: 50%;
  animation: yjd-spin 0.9s linear infinite;
}
/* Row chips: the spinner takes the icon tile's place (flex order — the span
   is appended after the close button). */
.rte-attach-row[data-status="pending"] .rte-attach-ic { display: none; }
.rte-attach-row .rte-attach-spin { width: 16px; height: 16px; order: -1; }
/* Tiles: spinner floats centred over the preview. */
.rte-attach-tile .rte-attach-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  width: 16px;
  height: 16px;
  border-color: rgba(255, 255, 255, 0.55);
  border-top-color: #fff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
}
@keyframes yjd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rte-attach-spin { animation: none; opacity: 0.6; }
}
.rte-attach-retry {
  border: 0;
  padding: 0;
  background: none;
  font: 400 10.5px/1 var(--rte-mono, monospace);
  color: var(--rte-danger);
  text-decoration: underline;
  cursor: pointer;
  flex: 0 0 auto;
}
.rte-attach-tile .rte-attach-retry {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  text-align: center;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}

/* ---------- Link view bar: href · edit · copy · unlink ---------- */
.link-bar {
  position: absolute;
  z-index: 10000;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px 5px;
  background: var(--rte-bg, #fff);
  border: 1px solid var(--rte-border-strong);
  border-radius: var(--rte-radius-md);
  box-shadow: var(--rte-shadow, 0 10px 28px -8px rgba(16, 18, 23, 0.20));
  font-family: var(--rte-ui);
}
.link-bar.visible { display: inline-flex; }
/* Popup containers are pointer-events:none by default; the bar re-enables. */
.link-bar, .link-bar * { pointer-events: auto; }
.link-bar-url {
  font-size: 12px;
  color: var(--rte-link);
  text-decoration: none;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
}
.link-bar-url:hover { text-decoration: underline; }
.link-bar-sep {
  width: 1px;
  height: 16px;
  background: var(--rte-border);
  margin: 0 2px;
}
.link-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--rte-radius-sm);
  background: transparent;
  color: var(--rte-muted);
  cursor: pointer;
  transition: background var(--rte-t), color var(--rte-t);
}
.link-bar-btn svg { width: 14px; height: 14px; }
.link-bar-btn:hover { background: var(--rte-chrome-2); color: var(--rte-ink); }
.link-bar-copy.copied { color: var(--rte-success); }
.link-bar-unlink { color: var(--rte-danger); }
.link-bar-unlink:hover { background: var(--rte-danger-weak); color: var(--rte-danger); }

/* ---------- Emoji picker: search + sections + category tabs ---------- */
.yjd-rich-editor .emoji-picker-popup {
  width: 264px;
  box-sizing: border-box;
  padding: 5px;
}
.yjd-rich-editor .emoji-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 7px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--rte-border);
  color: var(--rte-faint);
  pointer-events: auto;
}
.yjd-rich-editor .emoji-search svg { width: 13px; height: 13px; flex: 0 0 auto; }
.yjd-rich-editor .emoji-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--rte-ui);
  font-size: 12px;
  color: var(--rte-ink);
}
.yjd-rich-editor .emoji-search input::placeholder { color: var(--rte-faint); }
.yjd-rich-editor .emoji-head {
  padding: 5px 8px 6px;
  font-family: var(--rte-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rte-faint);
}
.yjd-rich-editor .emoji-picker-popup .emoji-grid {
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 0 3px 4px;
  max-height: 208px;
}
.yjd-rich-editor .emoji-picker-popup .emoji-button {
  width: 100%;
  height: 28px;
  border-radius: var(--rte-radius-xs);
}
.yjd-rich-editor .emoji-empty {
  grid-column: 1 / -1;
  padding: 14px 0 16px;
  text-align: center;
  font-size: 12px;
  color: var(--rte-muted);
}
.yjd-rich-editor .emoji-cats {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  padding: 5px 4px 1px;
  border-top: 1px solid var(--rte-border);
  pointer-events: auto;
}
.yjd-rich-editor .emoji-cat {
  border: 0;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: var(--rte-radius-xs);
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.6;
  transition: opacity var(--rte-t), background var(--rte-t);
}
.yjd-rich-editor .emoji-cat:hover { background: var(--rte-chrome-2); opacity: 0.9; }
.yjd-rich-editor .emoji-cat.active {
  background: var(--rte-accent-weak);
  filter: none;
  opacity: 1;
}

/* ---------- Floating bars: 28px buttons (design bubble metrics) ---------- */
.yjd-rich-editor .block-toolbar-btn,
.yjd-rich-editor .table-toolbar-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Table bar groups read as clusters: hairline divider between groups, and the
   destructive commands carry the danger ink (UI 2.0). */
.yjd-rich-editor .table-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.yjd-rich-editor .table-toolbar-group + .table-toolbar-group {
  border-left: 1px solid var(--rte-border);
  margin-left: 5px;
  padding-left: 5px;
}
.yjd-rich-editor .table-toolbar-btn[data-command="deleteTable"],
.yjd-rich-editor .table-toolbar-btn[data-command="deleteRow"],
.yjd-rich-editor .table-toolbar-btn[data-command="deleteCol"] {
  color: var(--rte-danger);
}
.yjd-rich-editor .table-toolbar-btn[data-command="deleteTable"]:hover,
.yjd-rich-editor .table-toolbar-btn[data-command="deleteRow"]:hover,
.yjd-rich-editor .table-toolbar-btn[data-command="deleteCol"]:hover {
  background: var(--rte-danger-weak);
  color: var(--rte-danger);
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE (v2.27)
   The whole UI is token-driven, so dark mode = redefining the --rte-* tokens.
   Activated by options.theme:'dark' / editor.setTheme('dark') (sets
   data-theme="dark" on the wrapper), the .yjd-theme-dark class, or
   theme:'auto' which follows the OS via prefers-color-scheme. Portaled menus
   (mention/slash) get data-theme set on them by JS so they match too.
   To MATCH YOUR APP instead, just override any --rte-* var on :root, on a
   shared ancestor, or on .yjd-rich-editor — no dark class needed.

   ANCESTOR THEME: dark tokens are declared ON the [data-theme="dark"] element
   (e.g. <html>), so an inherit-mode editor/read-view inside it goes dark by
   inheritance — zero per-editor config. Declaring on the ancestor (not the
   wrapper) is deliberate: it keeps the app's own :root/[data-theme] token
   overrides winning via the @layer (an unlayered rule on the same element beats
   our layered one). A forced theme:'light' editor re-declares light on itself.
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"],
.yjd-rich-editor[data-theme="dark"],
.yjd-rich-editor.yjd-theme-dark,
.yjd-mention-menu[data-theme="dark"],
.yjd-slash-menu[data-theme="dark"],
.yjd-content[data-theme="dark"],
.yjd-content.yjd-theme-dark {
  --rte-bg: #101216;
  --rte-bg-2: #14171b;
  --rte-chrome: #15181d;
  --rte-chrome-2: #1c2027;
  --rte-chrome-3: #232830;
  --rte-border: #262b33;
  --rte-border-strong: #353b45;
  --rte-hairline: #1f242b;
  --rte-ink: #e8eaee;
  --rte-ink-2: #c2c8d1;
  --rte-muted: #949ca8;
  --rte-faint: #6f7783;
  --rte-accent: #7c7cf0;
  --rte-accent-ink: #a8a8ff;
  --rte-accent-weak: #1e2040;
  --rte-accent-ring: rgba(124, 124, 240, 0.34);
  --rte-accent-ink-on: #0d0e14;
  --rte-danger: #f0666b;
  --rte-danger-weak: #2c1a1c;
  --rte-success: #3fbc8b;
  --rte-success-weak: #12261f;
  --rte-warning: #e0a247;
  --rte-warning-weak: #2a2015;
  --rte-info: #68a6f5;
  --rte-info-weak: #141f2e;
  --rte-focus: var(--rte-accent, #5b9bff);
  --rte-sel: rgba(124, 124, 240, 0.26);
  --rte-link: #8ab4ff;
  --rte-code-bg: #1c2027;
  --rte-code-ink: #e8eaee;
  --rte-code-block-bg: #0a0c0f;
  --rte-code-block-ink: #dfe2e8;
  --rte-quote-border: #3a4150;
  --rte-quote-bg: #161a1f;
  --rte-quote-ink: #b6bdc8;
  --rte-table-border: #2b313a;
  --rte-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --rte-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --rte-shadow-lg: 0 28px 64px -16px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Force light on the wrapper/read-view (theme:'light') so it stays light even
   inside a [data-theme="dark"] ancestor. Re-declares the light :root values. */
.yjd-rich-editor[data-theme="light"],
.yjd-content[data-theme="light"] {
  --rte-bg: #ffffff;
  --rte-bg-2: #fafbfc;
  --rte-chrome: #fcfcfd;
  --rte-chrome-2: #f3f4f6;
  --rte-chrome-3: #eceef1;
  --rte-border: #e3e5ea;
  --rte-border-strong: #ced2d9;
  --rte-hairline: #eceef1;
  --rte-ink: #15171c;
  --rte-ink-2: #3c424d;
  --rte-muted: #6d7480;
  --rte-faint: #98a0ac;
  --rte-accent: #5b5bd6;
  --rte-accent-ink: #4a49cf;
  --rte-accent-weak: #eeeefc;
  --rte-accent-ring: rgba(91, 91, 214, 0.24);
  --rte-accent-ink-on: #ffffff;
  --rte-danger: #d0343a;
  --rte-danger-weak: #fdecec;
  --rte-success: #0f8a5f;
  --rte-success-weak: #e7f5ef;
  --rte-warning: #a86500;
  --rte-warning-weak: #fdf3e0;
  --rte-info: #1f6fdc;
  --rte-info-weak: #ebf3fd;
  --rte-focus: var(--rte-accent, #3b82f6);
  --rte-sel: rgba(91, 91, 214, 0.16);
  --rte-link: #2f5fd4;
  --rte-code-bg: #f2f3f5;
  --rte-code-ink: inherit;
  --rte-code-block-bg: #14161a;
  --rte-code-block-ink: #e6e8ec;
  --rte-quote-border: #ced2d9;
  --rte-quote-bg: #fafbfc;
  --rte-quote-ink: #4b515c;
  --rte-table-border: #dfe2e7;
  --rte-shadow-sm: 0 1px 2px rgba(16, 18, 23, 0.07);
  --rte-shadow: 0 10px 28px -8px rgba(16, 18, 23, 0.20), 0 2px 6px rgba(16, 18, 23, 0.06);
  --rte-shadow-lg: 0 28px 64px -16px rgba(16, 18, 23, 0.32), 0 4px 12px rgba(16, 18, 23, 0.08);
}

/* theme:'auto' → follow the operating system. */
@media (prefers-color-scheme: dark) {
  .yjd-rich-editor[data-theme="auto"],
  .yjd-content[data-theme="auto"] {
    --rte-bg: #101216;
    --rte-bg-2: #14171b;
    --rte-chrome: #15181d;
    --rte-chrome-2: #1c2027;
    --rte-chrome-3: #232830;
    --rte-border: #262b33;
    --rte-border-strong: #353b45;
    --rte-hairline: #1f242b;
    --rte-ink: #e8eaee;
    --rte-ink-2: #c2c8d1;
    --rte-muted: #949ca8;
    --rte-faint: #6f7783;
    --rte-accent: #7c7cf0;
    --rte-accent-ink: #a8a8ff;
    --rte-accent-weak: #1e2040;
    --rte-accent-ring: rgba(124, 124, 240, 0.34);
    --rte-accent-ink-on: #0d0e14;
    --rte-danger: #f0666b;
    --rte-danger-weak: #2c1a1c;
    --rte-success: #3fbc8b;
    --rte-success-weak: #12261f;
    --rte-warning: #e0a247;
    --rte-warning-weak: #2a2015;
    --rte-info: #68a6f5;
    --rte-info-weak: #141f2e;
    --rte-focus: var(--rte-accent, #5b9bff);
    --rte-sel: rgba(124, 124, 240, 0.26);
    --rte-link: #8ab4ff;
    --rte-code-bg: #1c2027;
    --rte-code-ink: #e8eaee;
    --rte-code-block-bg: #0a0c0f;
    --rte-code-block-ink: #dfe2e8;
    --rte-quote-border: #3a4150;
    --rte-quote-bg: #161a1f;
    --rte-quote-ink: #b6bdc8;
    --rte-table-border: #2b313a;
    --rte-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --rte-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --rte-shadow-lg: 0 28px 64px -16px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
  }
}

/* A few surfaces still use literal light colours; flip them under dark. */
.yjd-rich-editor[data-theme="dark"] .yjd-slash-menu,
.yjd-rich-editor.yjd-theme-dark .yjd-slash-menu,
.yjd-slash-menu[data-theme="dark"] {
  background: var(--rte-bg);
  border-color: var(--rte-border);
  color: var(--rte-ink);
}
.yjd-content[data-theme="dark"] a,
.yjd-content.yjd-theme-dark a { color: var(--rte-link); }
.yjd-content[data-theme="dark"] code,
.yjd-content.yjd-theme-dark code { background: var(--rte-code-bg); color: var(--rte-code-ink); }
.yjd-content[data-theme="dark"] pre,
.yjd-content.yjd-theme-dark pre { background: var(--rte-code-block-bg); color: var(--rte-code-block-ink); }
.yjd-content[data-theme="dark"] blockquote,
.yjd-content.yjd-theme-dark blockquote {
  border-color: var(--rte-quote-border); background: var(--rte-quote-bg); color: var(--rte-quote-ink);
}
.yjd-content[data-theme="dark"] table td,
.yjd-content[data-theme="dark"] table th,
.yjd-content.yjd-theme-dark table td,
.yjd-content.yjd-theme-dark table th { border-color: var(--rte-table-border); }
.yjd-content[data-theme="dark"],
.yjd-content.yjd-theme-dark { color: var(--rte-ink); background: var(--rte-bg); }

} /* end @layer yjd */

/* ── Un-layered structural guard ─────────────────────────────────────────────
   The @layer contract means ANY unlayered app CSS outranks the styles above —
   including blanket resets (`* { padding: 0 }`) that were never aimed at the
   editor, which collapsed popup chrome (inputs flush to the edge, squashed
   buttons). The box-model rules below sit OUTSIDE the layer so a
   zero-specificity reset can't flatten them. Overriding stays easy and
   fight-free: redefine the --rte-popup-… / --rte-input-pad tokens, or use any
   unlayered selector of the same or higher specificity. Values mirror the
   in-layer popup spec exactly — this block changes nothing on pages without
   aggressive resets. */
.yjd-rich-editor .image-popup,
.yjd-rich-editor .video-popup,
.yjd-rich-editor .tag-popup,
.yjd-rich-editor .import-popup { padding: var(--rte-popup-pad, 14px); }
.yjd-rich-editor .link-popup { padding: var(--rte-popup-pad-inline, 9px); }
.yjd-rich-editor .link-popup-content { padding: var(--rte-popup-pad-lg, 16px); }
.yjd-rich-editor .table-popup-content { padding: var(--rte-popup-pad-sm, 8px); }
.yjd-rich-editor .yjd-input { padding: var(--rte-input-pad, 0 10px); }
.yjd-rich-editor .yjd-button-confirm,
.yjd-rich-editor .yjd-button-cancel { padding: var(--rte-popup-btn-pad, 8px 15px); }
/* Compact side-panel buttons (comment thread reply + composer) reuse
   .yjd-button-confirm/.yjd-button-cancel but must NOT inherit the popup
   button's 8px 15px padding / 14px text — the unlayered guard above would
   otherwise beat their layered compact rules and blow them up next to the 26px
   input. Keep them tight to match the thread composer. */
.yjd-rich-editor .yjd-c-replybtn,
.yjd-rich-editor .yjd-c-cbtn { padding: 0 10px; font-size: 12px; }
.yjd-rich-editor .link-popup-apply { padding: var(--rte-popup-btn-pad-inline, 0 12px); }
.yjd-rich-editor .link-popup--inline .link-popup-apply { padding: var(--rte-popup-btn-pad-inline, 0 10px); }
.yjd-rich-editor .import-popup .import-type-select,
.yjd-rich-editor .tag-popup .yjd-suggestion-button { padding: var(--rte-popup-ctl-pad, 0 9px); }

/* Body-level popover portal (popup:'fixed'/'auto'): a zero-size, non-clipping,
   top-of-stack anchor that carries the editor theme class so portaled popovers
   keep their yjd styling. Unlayered so a host reset can't neutralise the
   pointer-events / positioning that make it work. Its children (the popovers)
   are position:fixed in viewport coordinates (set inline by popup-helper). */
.yjd-popup-portal {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
}
.yjd-popup-portal > * { pointer-events: auto; }