/* "Insert image" feature (RMS-61006 port): the toolbar divider that sets the
   content action apart from the system icons, and the markup dialog. */

/* a thin separator in the panel-actions row, before the system icons */
.pa-divider {
  align-self: center;
  width: 1px; height: 16px;
  margin: 0 4px;
  background: var(--border-strong);
}

/* fits the standard 360px .dlg — no min-width that would overflow the box */
.img-dlg { display: flex; flex-direction: column; gap: 12px; }
.img-dlg * { box-sizing: border-box; }

/* upload zone: drop a file or browse */
.img-drop {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 16px;
  border: 1.5px dashed var(--border-strong); border-radius: 9px;
  background: var(--surface2); color: var(--muted);
  text-align: center; cursor: pointer;
}
.img-drop:hover, .img-drop:focus-visible { border-color: var(--accent); outline: none; }
.img-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.img-drop-text { font-size: 12.5px; }

.img-result { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.img-row { display: flex; gap: 12px; align-items: flex-start; }
.img-preview {
  flex: none; width: 72px; height: 72px; object-fit: contain;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  image-rendering: pixelated;
}
.img-meta { min-width: 0; }
.img-name { font-weight: 600; font-size: 12.5px; word-break: break-all; }
.img-size { color: var(--muted); font-size: 11.5px; margin-top: 3px; font-family: var(--mono); }

.img-warnings { display: flex; flex-direction: column; gap: 4px; }
.img-warn {
  font-size: 11.5px; line-height: 1.4;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 6px; padding: 6px 9px;
}

.img-modes { display: flex; gap: 16px; font-size: 12.5px; }
.img-modes label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.img-markup {
  width: 100%; height: 84px; resize: vertical;
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface2); color: var(--ink);
  /* wrap the long base64 so it never widens the dialog */
  white-space: pre-wrap; word-break: break-all; overflow-y: auto;
}

.img-err {
  font-size: 11.5px; line-height: 1.4; color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 6px; padding: 6px 9px;
}
.img-preview { max-width: 96px; }