/**
 * RichTextEditor.css - 富文本编辑器样式
 */

.rich-text-editor-wrapper {
  position: relative;
  width: 100%;
  isolation: isolate;
}

/* 连接正文与左侧工具按钮，避免鼠标经过间隙时触发 hover 离开 */
.rich-text-editor-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -12px;
  width: 12px;
  height: 100%;
  pointer-events: auto;
}

.rich-text-editor {
  width: 100%;
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  min-height: 1.5em;
  transition: all 0.2s ease;
}

/* 可编辑状态 */
.rich-text-editor:not(.read-only) {
  cursor: text;
}

/* 移除hover和focus时的背景色 */
.rich-text-editor:not(.read-only):hover {
  /* background-color: rgba(0, 0, 0, 0.02); */
  /* border-radius: 2px; */
}

.rich-text-editor:not(.read-only):focus {
  /* background-color: rgba(24, 144, 255, 0.05); */
  /* border-radius: 2px; */
}

/* 占位符 */
.rich-text-editor:empty:before {
  content: attr(data-placeholder);
  color: #bfbfbf;
  pointer-events: none;
}

/* 只读模式 */
.rich-text-editor.read-only {
  cursor: default;
}

/* 富文本样式 - 使用最高优先级并添加明显的视觉效果 */
.rich-text-editor strong,
.rich-text-editor b,
.rich-text-editor-wrapper strong,
.rich-text-editor-wrapper b {
  font-weight: 900 !important; /* 使用更粗的字重 */
  /* 使用粗体效果更明显的字体 */
  font-family: "Microsoft YaHei", "微软雅黑", "Arial", "Helvetica", sans-serif !important;
  /* 添加文字阴影增强视觉效果 */
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
  /* 确保继承父元素的颜色 */
  color: inherit !important;
}

.rich-text-editor em,
.rich-text-editor i,
.rich-text-editor-wrapper em,
.rich-text-editor-wrapper i {
  font-style: italic !important;
  /* 增强斜体效果 */
  transform: skewX(-8deg);
  display: inline-block;
  /* 使用斜体效果更明显的字体 */
  font-family: "Times New Roman", "Georgia", "Palatino", serif !important;
  /* 确保继承父元素的颜色 */
  color: inherit !important;
}

.rich-text-editor u,
.rich-text-editor-wrapper u {
  text-decoration: underline !important;
  text-underline-offset: 2px;
  /* 确保继承父元素的颜色 */
  color: inherit !important;
}

/* span元素 - 完全不设置任何color规则，让内联样式自然生效 */

/* 选中文本高亮 */
.rich-text-editor::selection {
  background-color: #bae7ff;
}