/*
 * Editing-only layout guard.
 * Public rendered mixed content keeps its normal grid gap; editable surfaces
 * collapse unknown browser-created grid rows so Enter can never jump 20px+.
 */
.mixed-content[data-editor-line-model="1"] {
  row-gap: 0 !important;
}

.admin-mixed-preview .mixed-content[data-editor-line-model="1"],
#commentPreview .mixed-content[data-editor-line-model="1"] {
  --editor-block-gap: 11px;
}

.admin-mixed-preview .mixed-content[data-editor-line-model="1"] {
  --editor-block-gap: 20px;
}

.mixed-content[data-editor-line-model="1"] > .mixed-text + .mixed-text {
  margin-top: var(--editor-block-gap, 16px) !important;
}

.mixed-content[data-editor-line-model="1"] > .mixed-image {
  position: relative;
  width: min(100%, var(--mixed-image-width, 100%));
  max-width: 100%;
  justify-self: start;
  overflow: visible;
  margin-top: var(--editor-block-gap, 16px) !important;
  margin-bottom: var(--editor-block-gap, 16px) !important;
}
.mixed-content[data-editor-line-model="1"] > .mixed-image > img {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  border-radius: inherit;
}
.mixed-content[data-editor-line-model="1"] .mixed-image-size-control {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 3;
  width: min(320px, calc(100vw - 80px));
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) 42px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 12px;
  background: rgba(31,27,36,.86);
  color: #fff;
  font: 700 10px/1 var(--sans);
  box-shadow: 0 8px 24px rgba(20,16,25,.18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .15s ease;
}
.mixed-content[data-editor-line-model="1"] .mixed-image:focus-within > .mixed-image-size-control,
.mixed-content[data-editor-line-model="1"] .mixed-image:focus > .mixed-image-size-control,
.mixed-content[data-editor-line-model="1"] .mixed-image:hover > .mixed-image-size-control { opacity: 1; pointer-events: auto; }
.mixed-content[data-editor-line-model="1"] .mixed-image-size-control input { width: 100%; accent-color: #c8b3ff; }
.mixed-content[data-editor-line-model="1"] .mixed-image-size-control output { text-align: right; }

/* Browser-generated fallback blocks must behave like plain lines, not cards. */
.mixed-content[data-editor-line-model="1"] > div:not(.mixed-image),
.mixed-content[data-editor-line-model="1"] > p:not(.mixed-text) {
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Chromium does not always paint a new line for one trailing BR. This empty
 * inline box gives the line a height without adding text or another BR, so it
 * is naturally ignored by the existing HTML -> markup serializers.
 */
.mixed-content[data-editor-line-model="1"] [data-editor-filler="1"] {
  display: inline-block !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  vertical-align: text-bottom;
  pointer-events: none;
  user-select: none;
}