/**
 * Document Editor Styles
 * 文档编辑器样式
 */

/* ============================================================================
 * 编辑器容器
 * ============================================================================ */

.document-editor {
  position: relative;
  background: transparent;
}

.document-editor--bordered {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background: white;
}

.document-editor--bordered.document-editor--focused {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.document-editor--readonly {
  background: #f9fafb;
}

/* ============================================================================
 * 内容区域
 * ============================================================================ */

.document-editor__content {
  padding: 0;
}

.document-editor--bordered .document-editor__content {
  padding: 1rem;
}

.document-editor__prosemirror {
  outline: none;
  min-height: 100%;
}

/* ProseMirror 默认样式覆盖 */
.document-editor__prosemirror .ProseMirror {
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.document-editor__prosemirror .ProseMirror-focused {
  outline: none;
}

/* ============================================================================
 * 占位符
 * ============================================================================ */

.document-editor__prosemirror .is-editor-empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
  position: absolute;
  height: 0;
}

.document-editor__prosemirror .is-editor-empty {
  position: relative;
}

/* ============================================================================
 * 段落
 * ============================================================================ */

.editor-paragraph {
  margin: 0;
  padding: 0.25rem 0;
  line-height: 1.75;
  color: #374151;
}

/* ============================================================================
 * 标题
 * ============================================================================ */

.editor-heading {
  margin: 0;
  padding: 0.5rem 0 0.25rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}

.editor-heading-1 {
  font-size: 1.5rem;
  padding-top: 1rem;
}

.editor-heading-2 {
  font-size: 1.25rem;
  padding-top: 0.75rem;
}

.editor-heading-3 {
  font-size: 1.125rem;
  padding-top: 0.5rem;
}

.editor-heading-4 {
  font-size: 1rem;
}

.editor-heading-5 {
  font-size: 0.875rem;
}

.editor-heading-6 {
  font-size: 0.75rem;
  color: #6b7280;
}

/* ============================================================================
 * 文本标记
 * ============================================================================ */

.editor-bold {
  font-weight: 600;
}

.editor-italic {
  font-style: italic;
}

.editor-inline-code {
  background: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.875em;
  color: #dc2626;
}

.editor-link {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.editor-link:hover {
  color: #1d4ed8;
}

.editor-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.editor-strike {
  text-decoration: line-through;
}

.editor-highlight {
  background-color: #fef08a;
  padding: 0.125rem 0;
  border-radius: 0.125rem;
}

/* ============================================================================
 * 列表
 * ============================================================================ */

.editor-bullet-list,
.editor-ordered-list {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.editor-bullet-list {
  list-style-type: disc;
}

.editor-ordered-list {
  list-style-type: decimal;
}

.editor-list-item {
  margin: 0.25rem 0;
  line-height: 1.75;
}

.editor-list-item > p {
  margin: 0;
}

/* 嵌套列表 */
.editor-bullet-list .editor-bullet-list,
.editor-ordered-list .editor-ordered-list,
.editor-bullet-list .editor-ordered-list,
.editor-ordered-list .editor-bullet-list {
  margin: 0.25rem 0;
}

/* ============================================================================
 * 引用块
 * ============================================================================ */

.editor-blockquote {
  margin: 0.75rem 0;
  padding: 0.5rem 1rem;
  border-left: 4px solid #e5e7eb;
  background: #f9fafb;
  color: #6b7280;
}

.editor-blockquote > p {
  margin: 0;
}

/* ============================================================================
 * 代码块
 * ============================================================================ */

.editor-code-block {
  margin: 0.75rem 0;
  padding: 1rem;
  background: #1f2937;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.editor-code-block code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #e5e7eb;
  white-space: pre;
}

/* ============================================================================
 * 分割线
 * ============================================================================ */

.editor-horizontal-rule {
  margin: 1.5rem 0;
  border: none;
  border-top: 2px solid #e5e7eb;
}

/* ============================================================================
 * 选中状态
 * ============================================================================ */

.document-editor__prosemirror ::selection {
  background: rgba(59, 130, 246, 0.2);
}

/* ============================================================================
 * Gap Cursor
 * ============================================================================ */

.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}

.ProseMirror-gapcursor:after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid #111827;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

/* ============================================================================
 * Drop Cursor
 * ============================================================================ */

.editor-drop-cursor {
  background: #3b82f6;
}

/* ============================================================================
 * 工具栏
 * ============================================================================ */

.document-editor__toolbar {
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* ============================================================================
 * 页脚
 * ============================================================================ */

.document-editor__footer {
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* ============================================================================
 * 图片
 * ============================================================================ */

.editor-image {
  margin: 1rem 0;
  text-align: center;
}

.editor-image--left {
  text-align: left;
}

.editor-image--center {
  text-align: center;
}

.editor-image--right {
  text-align: right;
}

.editor-image img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.editor-image img:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ProseMirror-selectednode .editor-image img {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* 图片上传状态 */
.editor-image--uploading {
  position: relative;
}

.editor-image--uploading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-image--uploading img {
  opacity: 0.5;
}

/* ============================================================================
 * Callout 提示框
 * ============================================================================ */

.editor-callout {
  margin: 0.75rem 0;
  padding: 1rem 1rem 1rem 3rem;
  border-radius: 0.5rem;
  position: relative;
}

.editor-callout__icon {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
}

.editor-callout__icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.editor-callout__content {
  min-height: 1.5rem;
}

.editor-callout__content > p {
  margin: 0;
}

/* Info */
.editor-callout--info {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
}

.editor-callout--info .editor-callout__icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

/* Warning */
.editor-callout--warning {
  background: #fefce8;
  border-left: 4px solid #eab308;
}

.editor-callout--warning .editor-callout__icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eab308' stroke-width='2'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

/* Success */
.editor-callout--success {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
}

.editor-callout--success .editor-callout__icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* Error */
.editor-callout--error {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
}

.editor-callout--error .editor-callout__icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
}

/* Note */
.editor-callout--note {
  background: #f9fafb;
  border-left: 4px solid #6b7280;
}

.editor-callout--note .editor-callout__icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

/* ============================================================================
 * 代码高亮 (highlight.js)
 * ============================================================================ */

/* 基础高亮样式 - 暗色主题 */
.editor-code-block .hljs-comment,
.editor-code-block .hljs-quote {
  color: #6b7280;
  font-style: italic;
}

.editor-code-block .hljs-keyword,
.editor-code-block .hljs-selector-tag,
.editor-code-block .hljs-addition {
  color: #f472b6;
}

.editor-code-block .hljs-number,
.editor-code-block .hljs-string,
.editor-code-block .hljs-meta .hljs-meta-string,
.editor-code-block .hljs-literal,
.editor-code-block .hljs-doctag,
.editor-code-block .hljs-regexp {
  color: #a5f3fc;
}

.editor-code-block .hljs-title,
.editor-code-block .hljs-section,
.editor-code-block .hljs-name,
.editor-code-block .hljs-selector-id,
.editor-code-block .hljs-selector-class {
  color: #fde047;
}

.editor-code-block .hljs-attribute,
.editor-code-block .hljs-attr,
.editor-code-block .hljs-variable,
.editor-code-block .hljs-template-variable,
.editor-code-block .hljs-class .hljs-title,
.editor-code-block .hljs-type {
  color: #fdba74;
}

.editor-code-block .hljs-symbol,
.editor-code-block .hljs-bullet,
.editor-code-block .hljs-subst,
.editor-code-block .hljs-meta,
.editor-code-block .hljs-meta .hljs-keyword,
.editor-code-block .hljs-selector-attr,
.editor-code-block .hljs-selector-pseudo,
.editor-code-block .hljs-link {
  color: #86efac;
}

.editor-code-block .hljs-built_in,
.editor-code-block .hljs-deletion {
  color: #fb7185;
}

.editor-code-block .hljs-formula {
  background: rgba(255, 255, 255, 0.1);
}

.editor-code-block .hljs-emphasis {
  font-style: italic;
}

.editor-code-block .hljs-strong {
  font-weight: bold;
}

/* ============================================================================
 * 表格
 * ============================================================================ */

.editor-table-wrapper {
  margin: 1rem 0;
  overflow-x: auto;
}

.editor-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

.editor-table-row {
  border-bottom: 1px solid #e5e7eb;
}

.editor-table-row:last-child {
  border-bottom: none;
}

.editor-table-cell,
.editor-table-header {
  border-right: 1px solid #e5e7eb;
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  min-width: 100px;
}

.editor-table-cell:last-child,
.editor-table-header:last-child {
  border-right: none;
}

.editor-table-header {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
}

.editor-table-cell {
  background: white;
}

.editor-table-cell > p,
.editor-table-header > p {
  margin: 0;
}

/* 表格选中状态 */
.ProseMirror-selectednode .editor-table-wrapper {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* 单元格焦点状态 */
.editor-table-cell:focus-within,
.editor-table-header:focus-within {
  background: #eff6ff;
}