/* TipTap editor — Trịnh Lê Minh An */
.ed-wrap {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: #fff;
}
.ed-toolbar { border-radius: var(--border-radius) var(--border-radius) 0 0; }
.ed-content { border-radius: 0 0 var(--border-radius) var(--border-radius); }
.ed-wrap { position: relative; }
.ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.4rem;
  background: var(--paper);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 80px;
  z-index: 10;
}
.ed-btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-color);
  transition: background 0.15s;
}
.ed-btn:hover { background: rgba(0,0,0,.06); }
.ed-btn.is-active { background: var(--primary-color); color: #fff; }
.ed-btn i { width: 16px; height: 16px; }
.ed-sep {
  display: inline-block;
  width: 1px;
  background: var(--border-color);
  margin: 4px 4px;
  align-self: stretch;
}

.ed-content {
  min-height: 400px;
  padding: 2.5rem 3.5rem 4rem;
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-color);
}
.ed-content .ProseMirror > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  scroll-margin-top: 140px;
}
/* Block-type label chip in left margin (skip placeholder paragraphs) */
.ed-content .ProseMirror > h2:not(.is-editor-empty)::before,
.ed-content .ProseMirror > h3:not(.is-editor-empty)::before,
.ed-content .ProseMirror > p:not(.is-editor-empty)::before,
.ed-content .ProseMirror > blockquote:not(.is-editor-empty)::before,
.ed-content .ProseMirror > ul:not(.is-editor-empty)::before,
.ed-content .ProseMirror > ol:not(.is-editor-empty)::before,
.ed-content .ProseMirror > pre:not(.is-editor-empty)::before {
  position: absolute;
  left: -120px;
  top: .25rem;
  width: 100px;
  text-align: right;
  font-size: .7rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  opacity: .35;
  transition: opacity .15s;
  pointer-events: none;
}
.ed-content .ProseMirror > *:hover:not(.is-editor-empty)::before { opacity: .85; color: var(--primary-color); }
.ed-content .ProseMirror > h2:not(.is-editor-empty)::before { content: 'Tiêu đề lớn'; }
.ed-content .ProseMirror > h3:not(.is-editor-empty)::before { content: 'Tiêu đề phụ'; }
.ed-content .ProseMirror > p:not(.is-editor-empty)::before  { content: 'Đoạn văn'; }
.ed-content .ProseMirror > blockquote:not(.is-editor-empty)::before { content: 'Trích dẫn'; }
.ed-content .ProseMirror > ul:not(.is-editor-empty)::before { content: 'Danh sách'; }
.ed-content .ProseMirror > ol:not(.is-editor-empty)::before { content: 'Đánh số'; }
.ed-content .ProseMirror > pre:not(.is-editor-empty)::before { content: 'Đoạn mã'; }
/* Image as standalone block — clear card frame so user sees it sits between text */
.ed-content .ProseMirror > img,
.ed-content .ProseMirror > figure.ed-figure {
  padding: .35rem;
  background: #fff;
  border: 1px solid var(--border-color);
}
.ed-content .ProseMirror > figure.ed-figure { margin: 1.5rem auto; }
.ed-content .ProseMirror > figure.ed-figure img { margin: 0; border: 0; padding: 0; box-shadow: none; width: 100%; height: auto; }
/* Size presets — applies to image, figure, embed */
.ed-content .ProseMirror > img[data-size="sm"], .ed-content .ProseMirror > figure.sz-sm, .ed-content .ProseMirror > .ed-embed.sz-sm { max-width: 320px; }
.ed-content .ProseMirror > img[data-size="md"], .ed-content .ProseMirror > figure.sz-md, .ed-content .ProseMirror > .ed-embed.sz-md { max-width: 480px; }
.ed-content .ProseMirror > img[data-size="lg"], .ed-content .ProseMirror > figure.sz-lg, .ed-content .ProseMirror > .ed-embed.sz-lg { max-width: 720px; }
.ed-content .ProseMirror > img[data-size="full"], .ed-content .ProseMirror > figure.sz-full, .ed-content .ProseMirror > .ed-embed.sz-full { max-width: 100%; width: 100%; }

/* Embed iframe wrapper — responsive aspect ratio */
.ed-content .ProseMirror > .ed-embed,
.post-content .ed-embed {
  position: relative;
  margin: 1.5rem auto;
  background: #000;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.18);
  aspect-ratio: var(--aspect, 16/9);
}
.ed-content .ProseMirror > .ed-embed iframe,
.post-content .ed-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.ed-content .ProseMirror > .ed-embed.ProseMirror-selectednode { outline: 2px solid var(--primary-color); outline-offset: 4px; }
.ed-content .ProseMirror > .ed-embed::before { content: 'Video / Embed'; }

/* Floating size bar */
.ed-size-bar {
  position: absolute;
  display: none;
  background: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  padding: 4px;
  gap: 2px;
  z-index: 10000;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.35);
}
.ed-size-bar.is-open { display: inline-flex; align-items: center; }
.ed-size-bar button {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .76rem;
  font-weight: 600;
  font-family: inherit;
}
.ed-size-bar button:hover { background: rgba(255,255,255,.12); }
.ed-size-bar button.is-active { background: var(--primary-color); }
.ed-size-bar button i { width: 14px; height: 14px; }
.ed-size-bar .ed-sep { width: 1px; background: rgba(255,255,255,.18); align-self: stretch; margin: 4px 2px; }
.ed-content .ProseMirror > hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
  margin: 2.5rem auto;
  max-width: 200px;
}
.ed-content .ProseMirror > hr.ProseMirror-selectednode { background: var(--primary-color); height: 2px; }
.ed-content .ProseMirror > hr::before { content: 'Gạch phân cách'; }
.ed-content figcaption.ed-figcaption {
  font-size: .9rem;
  color: var(--text-muted);
  text-align: center;
  padding: .5rem .25rem 0;
  font-style: italic;
}
.ed-content .ProseMirror > img:not([alt]),
.ed-content .ProseMirror > img[alt=""] { position: relative; }
.ed-content:focus-within { outline: none; }
.ed-content .ProseMirror { outline: none; min-height: 360px; }
.ed-content .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--text-muted);
  pointer-events: none;
  height: 0;
}
.ed-content h2 { font-family: var(--font-display); font-size: 1.6rem; margin: 1.4rem 0 .6rem; }
.ed-content h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 1.2rem 0 .5rem; }
.ed-content p { margin: 0 0 1rem; }
.ed-content ul, .ed-content ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.ed-content li { margin: .25rem 0; }
.ed-content blockquote {
  border-left: 4px solid var(--secondary-color);
  background: var(--paper);
  margin: 1rem 0;
  padding: .6rem 1rem;
  font-style: italic;
  color: var(--text-light);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.ed-content pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 1rem;
  border-radius: var(--border-radius);
  overflow-x: auto;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: .9rem;
}
.ed-content code:not(pre code) {
  background: var(--paper);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: .9em;
}
.ed-content img.ed-img,
.ed-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin: 1.5rem auto;
  display: block;
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.15);
  outline: 2px dashed transparent;
  outline-offset: 4px;
  transition: outline-color .15s;
}
.ed-content img:hover { outline-color: var(--border-color); }
.ed-content img.ProseMirror-selectednode {
  outline: 2px solid var(--primary-color);
  outline-offset: 4px;
}
.ed-content .ProseMirror-selectednode {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}
.ed-content a {
  color: var(--primary-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Mention dropdown */
.ed-mention-pop {
  display: none;
  position: absolute;
}
.ed-mention-pop.is-open {
  display: block;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.22);
  max-width: 360px;
  min-width: 280px;
  max-height: 380px;
  overflow: auto;
  padding: 0.4rem;
}
/* Grid mode for book / author / translator browsing */
.ed-mention-pop.is-grid {
  max-width: 380px;
  min-width: 360px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem;
  padding: .4rem;
}
.ed-mention-pop.is-book-grid .ed-mention-item {
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: .35rem;
  gap: .35rem;
  border: 1px solid transparent;
}
.ed-mention-pop.is-book-grid .ed-mention-item img,
.ed-mention-pop.is-book-grid .ed-mention-item .ed-mention-ph {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 3/4;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.ed-mention-pop.is-book-grid .ed-mention-item.is-active {
  border-color: var(--primary-color);
  background: var(--paper);
}
.ed-mention-pop.is-book-grid .ed-mention-item span {
  font-size: .72rem;
  line-height: 1.25;
  gap: 1px;
}
.ed-mention-pop.is-book-grid .ed-mention-item strong {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
}
.ed-mention-pop.is-book-grid .ed-mention-item small {
  font-size: .66rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-mention-pop.is-people-grid .ed-mention-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .5rem .35rem;
  gap: .3rem;
  border: 1px solid transparent;
}
.ed-mention-pop.is-people-grid .ed-mention-item img,
.ed-mention-pop.is-people-grid .ed-mention-item .ed-mention-ph {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.ed-mention-pop.is-people-grid .ed-mention-item.is-active {
  border-color: var(--primary-color);
  background: var(--paper);
}
.ed-mention-pop.is-people-grid .ed-mention-item span {
  font-size: .82rem;
  line-height: 1.3;
}
.ed-mention-pop.is-people-grid .ed-mention-item strong {
  font-size: .85rem;
}
.ed-mention-pop.is-people-grid .ed-mention-item small {
  font-size: .7rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ed-mention-item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  font-family: inherit;
}
.ed-mention-item:hover, .ed-mention-item.is-active { background: var(--paper); }
.ed-mention-item img,
.ed-mention-item .ed-mention-ph {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gradient-warm);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.ed-mention-item span { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; font-size: .9rem; }
.ed-mention-item small { color: var(--text-muted); font-size: .76rem; }
.ed-mention-item small.type { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-color); margin-top: 2px; }
.ed-mention-empty { padding: .8rem; color: var(--text-muted); font-size: .85rem; line-height: 1.6; }
.ed-mention-empty code { background: var(--paper); padding: 1px 6px; border-radius: 4px; font-size: .85em; }

/* Keyboard hint footer */
.ed-mention-hint {
  font-size: .68rem;
  color: var(--text-muted);
  padding: .5rem .25rem .25rem;
  text-align: center;
  border-top: 1px solid var(--border-color);
  margin-top: .35rem;
  grid-column: 1 / -1;
}
.ed-mention-hint kbd {
  background: var(--paper);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0 .35rem;
  font-family: inherit;
  font-size: .68rem;
  margin: 0 1px;
}

/* Category menu (stage 1 of @) — compact rows */
.ed-mention-pop.is-category {
  min-width: 280px;
  max-width: 320px;
  padding: .3rem;
}
.ed-mention-pop.is-category .ed-mention-item {
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: .55rem .6rem;
  gap: .65rem;
  border-radius: 8px;
}
.ed-mention-pop.is-category .ed-mention-item .ed-mention-ph {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--gradient-warm);
  display: inline-flex; align-items: center; justify-content: center;
}
.ed-mention-pop.is-category .ed-mention-item .ed-mention-ph i {
  width: 16px; height: 16px; color: #fff;
}
.ed-mention-pop.is-category .ed-mention-item strong { font-size: .9rem; }
.ed-mention-pop.is-category .ed-mention-item small { color: var(--text-muted); font-size: .74rem; }
.ed-mention-pop.is-category .ed-mention-item.is-active { background: var(--paper); }

/* Inline chip */
.ed-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.45rem;
  background: var(--paper);
  border-radius: 100px;
  text-decoration: none;
  font-size: 0.92em;
  font-weight: 500;
  color: var(--primary-color);
  border: 1px solid var(--border-color);
  transition: background 0.15s;
}
.ed-chip:hover { background: #fff; border-color: var(--primary-color); }
.ed-chip-book { color: var(--primary-color); }
.ed-chip-author { color: #7a5fb1; }
.ed-chip-translator { color: #d97706; }
.ed-chip-mod { color: var(--accent-color); }
.ed-chip-blog { color: #2d7a2d; }