@oix1987/yjd 1.0.2 → 2.0.0

package/lib/styles.css

@@ -0,0 +1,3373 @@
+/* ===================================
+   Rich Editor - Component Styles
+   ===================================*/
+
+/* === CORE EDITOR === */
+.yjd-rich-editor {
+  position: relative;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 0 auto;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+@layer base {
+  .yjd-rich-editor .toolbar-container button,
+  .yjd-rich-editor .toolbar-container input,
+  .yjd-rich-editor .toolbar-container select,
+  .yjd-rich-editor .toolbar-container optgroup,
+  .yjd-rich-editor .toolbar-container textarea,
+  .yjd-rich-editor .toolbar-container ::file-selector-button {
+    font: normal 500 14px/1.4 "Inter", Arial, sans-serif !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 {
+    font: normal 500 14px/1.4 "Inter", Arial, sans-serif !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;
+    }
+}
+
+.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: #fff;
+  color: #2c3e50;
+  font-family: inherit;
+  overflow-y: auto;
+  box-sizing: border-box;
+  border: none;
+  text-align: left;
+  position: relative;
+}
+
+/* Placeholder styles for contentEditable.
+   Inherit the editor's padding + font so the placeholder lands exactly on the
+   content origin (where the caret/first character sits) at ANY padding/size —
+   instead of hardcoded offsets that drifted out of alignment. */
+.yjd-rich-editor .rich-editor-area[data-placeholder]:before {
+  content: attr(data-placeholder);
+  color: #9ca3af;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: inherit;
+  box-sizing: border-box;
+  font: inherit;
+  font-style: italic;
+  line-height: inherit;
+  display: none;
+  z-index: 1;
+}
+
+.yjd-rich-editor .rich-editor-area[data-placeholder].placeholder-visible:before {
+  display: block;
+}
+
+.yjd-rich-editor .rich-editor-area {
+  font-size: 16px;
+  line-height: 1.7;
+  font-family: inherit;
+  color: #2c3e50;
+  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: #2563eb;
+  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;
+}
+
+.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: #555;
+}
+
+/* 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: Consolas, Menlo, Monaco, "Courier New", monospace;
+  background: #f1f2f3;
+  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 #d1d5db;
+  margin: 1em 0;
+  padding: 4px 12px;
+  color: #555;
+  font-style: italic;
+  background: #f9fafb;
+}
+.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: #f1f2f3;
+  width: 96%;
+  padding: 10px 2% 10px 2%;
+  font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
+  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 #d1d5db;
+  background: #f9fafb;
+  font-size: 13px;
+  color: #6b7280;
+  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 #d1d5db;
+  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:#FCFCFC;
+    align-items:center;
+    min-height:48px;
+    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: #FCFCFC;
+  align-items: center;
+  min-height: 48px;
+  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: #3b82f6;
+    box-shadow: 0 0 0 1px 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: #EEEEEE !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 (#454545) 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:#EEEEEE;
+}
+.yjd-rich-editor .block-toolbar-btn.active{
+  background:#CCCCCC;
+  color: #136FDF !important;
+}
+
+.yjd-rich-editor .block-toolbar-btn.active svg,
+.yjd-rich-editor .block-toolbar-btn.active .icon svg {
+  fill: #136FDF !important;
+}
+
+.yjd-rich-editor .block-toolbar-btn.active svg path,
+.yjd-rich-editor .block-toolbar-btn.active .icon svg path {
+  fill: #136FDF !important;
+}
+
+/* Block toolbar container and arrow */
+.yjd-rich-editor .block-toolbar-container {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  padding: 8px;
+  background: #fff;
+  border-radius: 6.9px;
+  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 #fff;
+  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: #fff;
+  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 #fff;
+  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: 6.9px;
+  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: #fff;
+  display:none;
+  border-radius: 6.9px;
+  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: #fff;
+  display: none;
+  border: 1px solid #d1d5db;
+  border-radius: 6.9px;
+  padding: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  z-index: 1002;
+  max-height: 200px;
+  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: 190px;
+  max-width: 100vw;
+}
+
+.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: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  line-height: 1.4;
+  color: #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: #EEEEEE;
+}
+
+.yjd-rich-editor .custom-select-item-button.current {
+  font-weight: 500;
+  background: #EEEEEE !important;
+}
+.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: #374151;
+  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 #e5e7eb;
+  z-index: -1;
+  /* đặt phía sau nội dung */
+}
+
+.yjd-rich-editor .custom-color-label {
+  font-size: 12px;
+  color: #6b7280;
+  margin: 0;
+}
+
+
+.yjd-rich-editor .yjd-input-title{
+  margin: 0;
+  color: #252424;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+.yjd-rich-editor .yjd-input-label{
+  color: #252424;
+  margin: 0;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  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: 10px;
+  border: 1px solid #E1E1E1;
+  box-sizing: border-box;
+  color: #252424 !important;
+  font-size: 14px;
+  /* Allow interaction with inputs */
+  pointer-events: auto;
+}
+.yjd-rich-editor .yjd-input:focus {
+  outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px 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: #181616;
+  box-shadow: 0px 1px 3.3px 0px rgba(0, 0, 0, 0.04);
+  /* Allow interaction with buttons */
+  pointer-events: auto;
+  color: #FFF;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  cursor: pointer;
+}
+.yjd-rich-editor .yjd-button-cancel{
+  border-radius: 6px;
+  align-items: center;
+  padding: 8px 15px;
+  border: 1px solid #E0E0E0;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 3.3px 0px rgba(0, 0, 0, 0.04);
+  color: #2A2727;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  cursor: pointer;
+}
+.yjd-rich-editor .button-disable{
+  cursor: not-allowed;
+}
+/* === LINK POPUP === */
+.yjd-rich-editor .link-popup {
+  position: absolute;
+  background: #fff;
+  font-family: 'Lato', sans-serif;
+  display: none;
+  border: none;
+  border-radius: 10px;
+  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 {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid #E1E1E1;
+  background: #FFF;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  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:  #F5F5F5;
+  cursor: pointer;
+  font-size: 14px;
+  color: #252424 !important;
+}
+.yjd-rich-editor .yjd-select-input{
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  padding: 10px 10px 10px 10px;
+  border-radius: 10px;
+  border: 1px solid #E1E1E1;
+  max-height: 37px;
+  align-items: center;
+  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"%3E%3Cpath d="M4.55859 7.94141C4.80273 8.18555 5.19922 8.18555 5.44336 7.94141L9.19336 4.19141C9.4375 3.94727 9.4375 3.55078 9.19336 3.30664C8.94922 3.0625 8.55274 3.0625 8.30859 3.30664L5 6.61523L1.69141 3.30859C1.44727 3.06445 1.05078 3.06445 0.806641 3.30859C0.5625 3.55273 0.5625 3.94922 0.806641 4.19336L4.55664 7.94336L4.55859 7.94141Z" fill="%23A4A7AE" /%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 10px;
+  font-size: 14px;
+  color: #252424 !important;
+}
+.yjd-rich-editor .yjd-select-input:focus {
+  outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+}
+
+
+/* === TABLE POPUP === */
+.yjd-rich-editor .table-popup {
+  position: absolute;
+  background: #fff;
+  font-family: 'Lato', sans-serif;
+  display: none;
+  border: 1px solid #d1d5db;
+  border-radius: 6.9px;
+  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: #e5e7eb;
+}
+
+.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: 'Lato', sans-serif;
+  color: #252424 !important;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.yjd-rich-editor .table-grid-cell {
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border: 1px solid 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: #EEEEEE;
+}
+
+/* === 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 {
+  /* 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 #d1d5db;
+  padding: 8px 12px;
+  min-height: 28px;
+  vertical-align: top;
+  background: #fff;
+  overflow-wrap: break-word;
+}
+
+.yjd-rich-editor .rich-editor-table td:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+  background: #fefefe;
+}
+
+/* === TABLE TOOLBAR === */
+.yjd-rich-editor .table-toolbar {
+  position: absolute;
+  display: none;
+  z-index: 1002;
+  background: transparent;
+  border: none;
+  border-radius: 6.9px;
+  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: #374151;
+  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: #f3f4f6;
+  color: #111827;
+}
+
+.yjd-rich-editor .table-toolbar-btn:active {
+  background: #e5e7eb;
+  border-color: #9ca3af;
+  color: #136FDF !important;
+}
+
+/* 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: #fff;
+  display: none;
+  border: 1px solid #d1d5db;
+  border-radius: 6.9px;
+  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: #252424;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.yjd-rich-editor .align-button {
+  height: 24px;
+  border-radius: 3.456px;
+  background: #fff;
+  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: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.yjd-rich-editor .align-button.active {
+  background: #e5e7eb;
+  border-color: #6b7280;
+}
+
+.yjd-rich-editor .align-button svg {
+  width: 16px;
+  height: 16px;
+  color: #374151;
+}
+
+.yjd-rich-editor .align-button.active svg {
+  color: #1f2937;
+}
+
+/* === LIST PICKER === */
+.yjd-rich-editor .list-picker-popup {
+  position: absolute;
+  background: #fff;
+  display: none;
+  border-radius: 6.9px;
+  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: 3.46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  padding: 4px;
+}
+
+.yjd-rich-editor .list-button:hover {
+  background: #f3f4f6;
+}
+
+.yjd-rich-editor .list-button.active {
+  background: #eeeeee;
+}
+
+.yjd-rich-editor .list-button svg {
+  height: 16px;
+  color: #374151;
+}
+
+.yjd-rich-editor .list-button.active svg {
+  color: #fff;
+}
+
+/* === 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: 25px;
+  margin-bottom: 4px;
+}
+
+.yjd-rich-editor .rich-editor-area ul.checklist li input[type="checkbox"] {
+  position: absolute;
+  left: 0;
+  top: 2px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.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: #454545;
+}
+
+.yjd-rich-editor .indent-increase-btn:hover svg,
+.yjd-rich-editor .indent-decrease-btn:hover svg {
+  fill: #454545;
+}
+
+.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: #9ca3af;
+}
+
+/* === EMOJI PICKER === */
+.yjd-rich-editor .emoji-picker-popup {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  border-radius: 8px;
+  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-text-message{
+  margin-top: 4px;
+  color: #71787C;
+  text-align: center;
+  font-family: 'Segoe UI', Arial, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.yjd-rich-editor .emoji-button {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  padding: 0;
+  border-radius: 4px;
+  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: #f3f4f6;
+}
+
+.yjd-rich-editor .emoji {
+  font-size: 1.1em;
+  line-height: 1;
+}
+
+/* === IMAGE POPUP === */
+.yjd-rich-editor .image-popup {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  font-family: 'Lato', sans-serif;
+  border-radius: 10px;
+  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;
+  gap: 16px;
+  padding: 16px;
+}
+
+
+
+.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: #fff;
+  font-family: 'Lato', sans-serif;
+  border-radius: 10px;
+  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;
+  gap: 16px;
+  padding: 16px;
+}
+
+.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;
+}
+
+.yjd-rich-editor .inserted-video {
+  background: #000;
+}
+
+/* === TAG POPUP === */
+.yjd-rich-editor .tag-popup {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  font-family: 'Lato', sans-serif;
+  border-radius: 10px;
+  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;
+  gap: 16px;
+  padding: 16px;
+}
+
+
+.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: #dbeafe;
+  color: #1d4ed8;
+}
+
+.yjd-rich-editor .custom-tag.tag-hashtag {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.yjd-rich-editor .custom-tag.tag-custom {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.yjd-rich-editor .custom-tag:hover {
+  opacity: 0.8;
+}
+
+/* === IMPORT POPUP === */
+.yjd-rich-editor .import-popup {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  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: 20px;
+}
+
+.yjd-rich-editor .import-popup-title {
+  margin: 0 0 20px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.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: #374151;
+}
+
+.yjd-rich-editor .import-type-select {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  background: white;
+  color: #374151;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.yjd-rich-editor .import-type-select:focus {
+  outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+}
+
+.yjd-rich-editor .import-file-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  background: white;
+  color: #374151;
+  margin-bottom: 16px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.yjd-rich-editor .import-file-input:disabled {
+  background-color: #f3f4f6;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.yjd-rich-editor .import-file-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+}
+
+.yjd-rich-editor .import-file-info {
+  padding: 12px;
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: #374151;
+}
+
+.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 #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.yjd-rich-editor .import-button:hover {
+  background-color: #f3f4f6;
+}
+
+.yjd-rich-editor .import-button.import-button-main {
+  background-color: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.yjd-rich-editor .import-button.import-button-main:hover {
+  background-color: #2563eb;
+}
+
+.yjd-rich-editor .import-button.import-button-main:disabled {
+  background-color: #9ca3af;
+  border-color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.yjd-rich-editor .import-button.cancel-button {
+  background-color: white;
+  color: #6b7280;
+}
+
+.yjd-rich-editor .import-button.cancel-button:hover {
+  background-color: #f9fafb;
+}
+
+/* === IMPORTED CONTENT === */
+.yjd-rich-editor .imported-content {
+  margin: 16px 0;
+  padding: 16px;
+  border: 1px dashed #d1d5db;
+  border-radius: 6px;
+  background-color: #f9fafb;
+}
+
+.yjd-rich-editor .imported-content.html-content {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.yjd-rich-editor .imported-content.excel-content {
+  border-color: #10b981;
+  background-color: #f0fdf4;
+}
+
+.yjd-rich-editor .imported-content.text-content {
+  border-color: #f59e0b;
+  background-color: #fffbeb;
+}
+
+.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 #e5e7eb;
+}
+
+.yjd-rich-editor .imported-table th {
+  background-color: #f3f4f6;
+  font-weight: 600;
+  color: #374151;
+}
+
+.yjd-rich-editor .imported-table tr:hover {
+  background-color: #f9fafb;
+}
+
+.yjd-rich-editor .imported-content p {
+  margin: 8px 0;
+  line-height: 1.6;
+  color: #374151;
+}
+
+.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: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px;
+  background-color: #f8fafc;
+  color: #374151;
+  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;
+}
+
+.yjd-rich-editor .resize-handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: #3b82f6;
+  border: 1px solid #fff;
+  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 */
+}
+
+.yjd-rich-editor .resize-handle:hover {
+  background-color: #2563eb;
+  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 #3b82f6;
+  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 #3b82f6;
+  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;
+  overflow: visible;
+  max-height: 90%;
+    /* không vượt quá chiều cao editor */
+  overflow-y: auto;
+    /* chỉ cuộn khi nội dung vượt quá */
+}
+
+/* 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.
+   ===================================================================== */
+
+.yjd-rich-editor {
+  /* Palette */
+  --rte-bg: #ffffff;
+  --rte-chrome: #fbfbfd;
+  --rte-chrome-2: #f2f2f7;
+  --rte-border: #e9e9f1;
+  --rte-border-strong: #dadae6;
+  --rte-ink: #20242f;
+  --rte-muted: #767c8e;
+  --rte-accent: #6d5efc;
+  --rte-accent-ink: #5a48ee;
+  --rte-accent-weak: #efedff;
+  --rte-accent-ring: rgba(109, 94, 252, 0.28);
+  --rte-danger: #e5484d;
+  /* Shape & depth */
+  --rte-radius: 14px;
+  --rte-radius-md: 11px;
+  --rte-radius-sm: 8px;
+  --rte-shadow-sm: 0 1px 2px rgba(20, 24, 46, 0.06);
+  --rte-shadow: 0 12px 32px -8px rgba(20, 24, 46, 0.20), 0 4px 10px -4px rgba(20, 24, 46, 0.10);
+  --rte-t: 140ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* Use a friendly system stack everywhere (overrides the forced "Inter") */
+.yjd-rich-editor .toolbar-container button,
+.yjd-rich-editor .toolbar-container input,
+.yjd-rich-editor .toolbar-container select,
+.yjd-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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+}
+
+/* ---------- Toolbar ---------- */
+.yjd-rich-editor .rich-editor-toolbar-container {
+  background: var(--rte-chrome);
+  border-bottom: 1px solid var(--rte-border);
+}
+.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;
+  padding: 8px 12px;
+}
+.yjd-rich-editor .rich-editor-toolbar-2.visible {
+  border-top: 1px solid var(--rte-border);
+}
+/* Group by spacing, not dividers: tight within a group, airy between groups. */
+.yjd-rich-editor .toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  border-right: none;
+  margin: 0;
+  padding: 0;
+}
+.yjd-rich-editor .toolbar-group + .toolbar-group {
+  margin-left: 12px;
+}
+
+/* ---------- 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: 32px;
+  height: 32px;
+  padding: 0 8px;
+  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 14px;
+  background: var(--rte-chrome);
+  border-top: 1px solid var(--rte-border);
+}
+.yjd-rich-editor .rich-editor-breadcrumb,
+.yjd-rich-editor .wordcount {
+  color: var(--rte-muted);
+  font-size: 12px;
+  letter-spacing: 0.01em;
+}
+
+/* ---------- Editor surface ---------- */
+.yjd-rich-editor .rich-editor-area {
+  color: var(--rte-ink);
+  font-size: 16px;
+  line-height: 1.75;
+  padding: 22px 24px;
+}
+.yjd-rich-editor .rich-editor-area a {
+  color: var(--rte-accent-ink);
+  text-decoration-color: var(--rte-accent-ring);
+  text-underline-offset: 2px;
+}
+.yjd-rich-editor .rich-editor-area[data-placeholder].placeholder-visible:before {
+  color: var(--rte-muted);
+  opacity: 0.55;
+}
+.yjd-rich-editor .rich-editor-area blockquote {
+  border-left: 3px solid var(--rte-accent);
+  background: var(--rte-accent-weak);
+  border-radius: 0 var(--rte-radius-sm) var(--rte-radius-sm) 0;
+  padding: 8px 16px;
+  color: var(--rte-ink);
+  margin: 12px 0;
+}
+.yjd-rich-editor .rich-editor-area code {
+  background: var(--rte-chrome-2);
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 0.9em;
+}
+.yjd-rich-editor .rich-editor-area pre {
+  background: #20242f;
+  color: #ececf5;
+  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 {
+  background: var(--rte-bg);
+  border: 1px solid var(--rte-border);
+  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: #fff;
+  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: #e9e9f2;
+}
+.yjd-rich-editor .yjd-custom-upload-button {
+  border-radius: var(--rte-radius-sm);
+  border: 1px dashed var(--rte-border-strong);
+  color: var(--rte-accent-ink);
+  background: var(--rte-accent-weak);
+  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);
+  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 #fff !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);
+  border-radius: var(--rte-radius-md);
+  box-shadow: var(--rte-shadow);
+  font: 13px/1.4 system-ui, -apple-system, sans-serif;
+  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: #fdecec;
+  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: 3px;
+}
+.yjd-rich-editor mark.yjd-find-hit.active {
+  background: var(--rte-accent);
+  color: #fff;
+}
+
+/* ---------- 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="#454545"],
+.yjd-rich-editor .icon svg [fill="#231F20"],
+.yjd-rich-editor .icon svg [fill="#010101"],
+.yjd-rich-editor .icon svg[fill="#454545"],
+.yjd-rich-editor .block-toolbar-btn svg [fill="#454545"],
+.yjd-rich-editor .table-toolbar-btn svg [fill="#454545"] {
+  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: 16px !important;
+  max-width: 18px;
+  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: #4b5060; }
+.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);
+  background: var(--rte-bg);
+  color: var(--rte-ink);
+  font-weight: 500;
+}
+.yjd-rich-editor .custom-select-button:hover {
+  border-color: var(--rte-border-strong);
+  background: var(--rte-bg);
+}
+.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);
+  border-radius: var(--rte-radius-md);
+  box-shadow: 0 10px 30px -10px rgba(20, 24, 46, 0.18), 0 2px 6px -2px rgba(20, 24, 46, 0.08);
+}
+
+/* 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: 36px;
+  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;
+}
+.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: 36px;
+  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: #fff;
+}
+.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: 16px !important;
+  max-width: 20px;
+  display: block;
+  fill: none !important;
+  stroke: currentColor;
+  stroke-width: 2;
+  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: #565b6b; }
+.yjd-rich-editor .rich-editor-toolbar-btn:hover .icon svg { color: var(--rte-ink); }
+.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-accent-ink) !important;
+  stroke: var(--rte-accent-ink) !important;
+  fill: none !important;
+}
+.yjd-rich-editor .rich-editor-toolbar-btn.active .icon svg [fill="currentColor"] {
+  fill: var(--rte-accent-ink) !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-accent-ink) !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: #565b6b;
+  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: 2;
+  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: 2;
+  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: #565b6b; }
+.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: 2;
+  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: 17px;
+  height: 17px;
+  fill: none;
+  stroke: var(--rte-accent-ink);
+}
+
+/* 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;
+}
+
+/* =====================================================================
+   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: #ffffff;
+  border: 1px solid #e9e9f1;
+  border-radius: 12px;
+  box-shadow: 0 12px 32px -8px rgba(20, 24, 46, 0.20), 0 4px 10px -4px rgba(20, 24, 46, 0.10);
+  font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  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: #20242f;
+}
+.yjd-slash-item:hover,
+.yjd-slash-item.active { background: #efedff; color: #5a48ee; }
+.yjd-slash-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border-radius: 7px;
+  background: #f2f2f7;
+  color: inherit;
+}
+.yjd-slash-item.active .yjd-slash-icon { background: #ffffff; }
+.yjd-slash-icon svg {
+  width: auto;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  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: #767c8e; }
+.yjd-slash-item.active .yjd-slash-hint { color: #8b7ff0; }
+@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, #20242f);
+  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, #e9e9f1);
+}
+.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: 320px;
+  max-width: min(92vw, 420px);
+  padding: 10px;
+}
+.yjd-rich-editor .link-popup--inline .link-popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.yjd-rich-editor .link-popup--inline .link-popup-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.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: 8px 16px;
+  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 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  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='%23767c8e'%20stroke-width='2'%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 at this width.) */
+@media (max-width: 640px) {
+  .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 */
+  }
+  /* The overflow row + "More" button aren't used on mobile. */
+  .yjd-rich-editor .rich-editor-toolbar-2,
+  .yjd-rich-editor .rich-editor-toolbar-1 .more-btn {
+    display: none !important;
+  }
+  /* Keep every group/button on one line and let the row scroll. */
+  .yjd-rich-editor .toolbar-group {
+    flex: 0 0 auto;
+  }
+  .yjd-rich-editor .toolbar-group + .toolbar-group {
+    margin-left: 8px;
+  }
+  .yjd-rich-editor .rich-editor-toolbar-btn,
+  .yjd-rich-editor .custom-select-button {
+    min-width: 32px;
+    height: 32px;
+    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. */
+.yjd-rich-editor .align-button-container {
+  flex-direction: row !important;
+  width: auto !important;
+  height: auto !important;
+  gap: 4px;
+}
+.yjd-rich-editor .align-button {
+  width: 34px !important;
+  min-height: 34px !important;
+  height: 34px !important;
+  padding: 0 !important;
+  gap: 0 !important;
+  justify-content: center !important;
+}
+.yjd-rich-editor .text-align-picker-popup {
+  width: auto !important;
+}
+
+/* ── "More" overflow = one extra row, not a crammed wrap (v2.17) ───────────
+   The secondary toolbar stays hidden until "More" is pressed; when shown it's
+   a single tidy row (scrolls sideways if it ever exceeds the width) instead of
+   wrapping its groups into several stacked rows. */
+.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; }
+
+/* ── 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: 16px;
+  height: 16px;
+  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;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.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 (#767c8e) 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: #5b6373;
+}
+
+/* ── 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: 16px;
+  height: 16px;
+  display: block;
+}
+.yjd-rich-editor .yjd-find-icon .icon svg {
+  stroke: currentColor;
+  fill: none;
+}