/* Image layout in the prose editor (Thầy 2026-07-14: "hình cho resize và move
   được + chọn chế độ text wrapping như Word").

   Four flow-based wrap modes (Thầy chose the flow set over free-floating
   absolute so pagination stays intact):
     .img-wrap-inline  → In Line with Text (image flows like a big glyph)
     .img-wrap-left    → Square, image floats left, text wraps right
     .img-wrap-right   → Square, image floats right, text wraps left
     .img-wrap-block   → Top-and-Bottom (own line, text above/below) + align

   Layout is stored as CLASSES on the <figure> (or bare <img>) + the HTML
   `width` attribute on the <img> — NEVER inline style, because
   Editor._sanitizeInlineStyles() strips every style on load (keeping only
   font-family/font-size). Classes + width attr survive the save/load cycle.
   EditorImage (editor-image.js) is the only writer of these. */

/* Base: the image unit sizes itself to the <img width> attr, never exceeds
   the page column. `.img-fig` is applied to the <figure> when present, else to
   the <img> directly (old inserts have no <figure>). */
#editor-content .img-fig {
  margin: 8px 0;
  max-width: 100%;
}
#editor-content figure.img-fig {
  padding: 0;
}
#editor-content .img-fig img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* Move cursor signals the image body is draggable (Word-style) — resize
   handles override with their own cursors. */
#editor-content img { cursor: move; }
#editor-content img.img-fig {
  border-radius: 8px;
}

/* In Line with Text — behaves like an inline glyph so it can sit amid a run
   of text; on its own it just sits on a line. */
#editor-content figure.img-wrap-inline,
#editor-content img.img-wrap-inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
  max-width: 100%;
}
#editor-content figure.img-wrap-inline figcaption { display: none; }

/* Square wrap — float so paragraph text flows alongside. Capped at 60% of the
   column so there is always room for the wrapping text (Word does the same).
   width:fit-content shrink-wraps a <figure> to its image; a bare <img> already
   sizes itself from its `width` attr, so fit-content must NOT touch it (it
   would override the attr and collapse the image to its intrinsic size). */
#editor-content figure.img-wrap-left,
#editor-content img.img-wrap-left {
  float: left;
  clear: left;
  margin: 4px 18px 10px 0;
  max-width: 60%;
}
#editor-content figure.img-wrap-right,
#editor-content img.img-wrap-right {
  float: right;
  clear: right;
  margin: 4px 0 10px 18px;
  max-width: 60%;
}
#editor-content figure.img-wrap-left,
#editor-content figure.img-wrap-right { width: fit-content; }

/* Top-and-Bottom — a block on its own line; align picks left / center / right
   (auto margins; fit-content only on the <figure>). */
#editor-content figure.img-wrap-block,
#editor-content img.img-wrap-block {
  display: block;
  float: none;
  clear: both;
  max-width: 100%;
}
#editor-content figure.img-wrap-block { width: fit-content; }
#editor-content .img-wrap-block.img-align-left   { margin-left: 0;    margin-right: auto; }
#editor-content .img-wrap-block.img-align-center { margin-left: auto; margin-right: auto; }
#editor-content .img-wrap-block.img-align-right  { margin-left: auto; margin-right: 0;    }

#editor-content .img-fig figcaption {
  font-size: 12px;
  color: var(--text-tertiary, #9ca3af);
  text-align: center;
  margin-top: 4px;
}

/* ── Selection overlay (position:fixed, painted over the image rect) ────────
   getBoundingClientRect already accounts for the editor's CSS `zoom`, so a
   fixed overlay built from the rect lines up at any zoom level. */
.img-sel-overlay {
  position: fixed;
  z-index: 60;
  border: 1.5px solid var(--accent-blue, #2563eb);
  pointer-events: none;      /* clicks fall through to the image (for move) */
  box-sizing: border-box;
}
.img-sel-handle {
  position: fixed;
  z-index: 61;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;     /* centre on the anchor point */
  background: #fff;
  border: 1.5px solid var(--accent-blue, #2563eb);
  border-radius: 2px;
  pointer-events: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.img-sel-handle[data-dir="nw"], .img-sel-handle[data-dir="se"] { cursor: nwse-resize; }
.img-sel-handle[data-dir="ne"], .img-sel-handle[data-dir="sw"] { cursor: nesw-resize; }
.img-sel-handle[data-dir="n"],  .img-sel-handle[data-dir="s"]  { cursor: ns-resize; }
.img-sel-handle[data-dir="e"],  .img-sel-handle[data-dir="w"]  { cursor: ew-resize; }

/* Horizontal drop indicator while dragging the image between blocks. */
.img-drop-line {
  position: fixed;
  z-index: 62;
  height: 3px;
  background: var(--accent-blue, #2563eb);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.5);
}

/* ── Layout Options toolbar (mirrors .tbl-toolbar look/behaviour) ──────────*/
.img-toolbar {
  position: fixed;
  z-index: 63;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.14));
}
.img-toolbar .toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-sm, 5px);
  color: var(--text-secondary, #4b5563);
  cursor: pointer;
}
.img-toolbar .toolbar-btn:hover { background: var(--bg-tertiary, #eef0f3); }
.img-toolbar .toolbar-btn.on {
  background: var(--accent-blue-soft, rgba(37, 99, 235, 0.14));
  color: var(--accent-blue, #2563eb);
}
.img-toolbar .toolbar-sep {
  width: 1px;
  height: 18px;
  margin: 0 3px;
  background: var(--border, #e5e7eb);
}
.img-toolbar svg { width: 18px; height: 14px; display: block; }
.img-toolbar svg line { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.img-toolbar svg rect { fill: currentColor; opacity: 0.85; }
.img-toolbar svg path { stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }

/* Mobile: no overlay/toolbar (editor image editing is desktop-only, matching
   the paginator + view module). */
@media (max-width: 900px) {
  .img-sel-overlay, .img-sel-handle, .img-toolbar, .img-drop-line { display: none !important; }
}