@layer components {
  /* The editor's image: the picture as the reader will see it, a bar laid over its top right corner (nothing moves when it
     shows) and a line under it with its text. */
  .visual-image { position: relative; margin: 12px 0; }
  .visual-image--center { text-align: center; }
  .visual-image--right { text-align: end; }
  .visual-image-picture { max-width: 100%; height: auto; border-radius: var(--radius-sm); vertical-align: middle; }
  .visual-image--w25 .visual-image-picture { width: 25%; }
  .visual-image--w50 .visual-image-picture { width: 50%; }
  .visual-image--w100 .visual-image-picture { width: 100%; }
  .visual-image[data-state="route"] .visual-image-picture { opacity: 0.55; }
  .visual-image-status {
    display: inline-flex; align-items: center; min-height: 56px; margin: 0; padding: 8px 14px;
    border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--muted);
    color: var(--muted-foreground); font-size: 13px;
  }
  .visual-image-status[hidden] { display: none; }
  .visual-image-line { margin: 4px 0 0; color: var(--muted-foreground); font-size: 13px; overflow-wrap: anywhere; }
  /* The state is written, and marked with a sign: colour never carries it alone. */
  .visual-image-line[data-missing="true"], :is(.visual-image[data-state="not_found"], .visual-image[data-state="expired"]) .visual-image-line {
    color: var(--destructive);
  }
  .visual-image-line[data-missing="true"]::before,
  :is(.visual-image[data-state="not_found"], .visual-image[data-state="expired"]) .visual-image-line::before {
    content: "⚠ " / "";
  }
  .visual-image.ProseMirror-selectednode { outline: 2px solid var(--jx-accent); outline-offset: 2px; }

  .visual-image-bar {
    position: absolute; top: 4px; right: 4px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover);
    color: var(--popover-foreground); box-shadow: var(--shadow-sm); font-size: 13px; opacity: 0; pointer-events: none;
  }
  /* Hidden by opacity, not display: its buttons stay in the tab order, and focus shows the bar. */
  .visual-image:is(:focus-within, .ProseMirror-selectednode) > .visual-image-bar { opacity: 1; pointer-events: auto; }
  /* A tap hovers too, and iOS Safari drops the click of a tap whose hover reveals content: a real hover only. */
  @media (hover: hover) { .visual-image:hover > .visual-image-bar { opacity: 1; pointer-events: auto; } }
  .visual-image[data-bar-dismissed] > .visual-image-bar { opacity: 0; pointer-events: none; }
  .visual-image-group { display: inline-flex; gap: 2px; }
  .visual-image-group[hidden], .visual-image-tool[hidden] { display: none; }
  .visual-image-tool {
    display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 6px;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer;
  }
  .visual-image-tool:is(:hover, :active) { background: var(--muted); }
  .visual-image-tool[aria-pressed="true"] {
    background: color-mix(in oklch, var(--primary) 14%, transparent); box-shadow: inset 0 -2px 0 var(--primary);
  }
  .visual-image-tool:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 1px; }
  /* A finger needs 44 px, and the bar stays inside the screen. */
  @media (max-width: 1099px), (pointer: coarse) {
    .visual-image-bar { max-width: calc(100% - 8px); }
    .visual-image-tool { position: relative; min-width: var(--tap); min-height: var(--tap); }
    .visual-image-tool::before { content: ""; position: absolute; inset: -1px; }
  }

  /* The dialog: source tabs, the text and the way out. */
  .document-image-dialog h2 { margin: 0; font-size: 1rem; }
  .document-image-counter { margin: 0; color: var(--muted-foreground); }
  .document-image-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
  .document-image-panel { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
  .document-image-panel[hidden], .document-image-dialog [hidden] { display: none; }
  .document-image-panel p, .document-image-alt p { margin: 0; }
  .document-image-alt { display: flex; flex-direction: column; gap: 6px; }
  .document-image-choose { align-self: flex-start; position: relative; cursor: pointer; }
  .document-image-choose:focus-within { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .document-image-chosen { overflow-wrap: anywhere; }
  .document-image-decorative { display: flex; align-items: center; gap: 8px; }
  .document-image-error { margin: 0; color: var(--destructive); font-size: 14px; }
  .document-image-error::before { content: "⚠ " / ""; }
  @media (pointer: coarse), (max-width: 767px) {
    .document-image-dialog .button, .document-image-dialog .input, .document-image-dialog .document-editor-tab {
      min-height: var(--tap);
    }
    .document-image-decorative { min-height: var(--tap); }
    .document-image-decorative input { width: 22px; height: 22px; }
  }
}