/* Letzte Cleaning Prüfung: 09.10.2026
   Letztes Cleaning: 09.10.2026 */

/*
 * Bildeditor „Bild im Mittelpunkt“ (TOOL04-07, Betreiber 09.10.2026).
 *
 * Vorbild Photoshop im Web, gewählt als „Variante 2“: oben eine dünne
 * Kopfzeile, in der Mitte groß das Bild, darunter schwebend „Mit KI ändern“,
 * rechts das Panel des gewählten Werkzeugs und ganz rechts die Werkzeugleiste
 * mit Beschriftung. Bei Hochkant passt sich das Fenster an: Es ist nur so
 * breit wie Bild und Werkzeuge, statt links und rechts leere Flächen zu
 * zeigen (Wahl „C“).
 *
 * Die Anordnung kommt ganz aus dieser Datei, ab 1100 px Fensterbreite.
 * Figur, Bühne, Werkzeugkasten und KI-Bereich werden mit display: contents
 * aufgelöst; ihre Teile liegen direkt im Raster von .image-result-finished.
 * Am DOM ändert sich nichts. installBildeditorRahmen() in ai-contentfactory.js
 * ergänzt nur Kopfzeile, Reiter „Info“ und Panel-Überschrift. Schmalere
 * Fenster behalten den Aufbau aus ai-contentfactory-result.css.
 *
 * Die Datei steht in index.html nach allen älteren Regeln des Editor-Fensters
 * (nur die Galerie folgt), weil diese Höhen und Spalten teils mit !important
 * festlegen.
 */

/* Kopfzeile, Info-Reiter und Panel-Überschrift gibt es nur im breiten Editor. */
.bildeditor-kopf,
.bildeditor-panel-titel,
.factory-mini-toolbar .bildeditor-info-reiter { display: none; }

@media (min-width: 1100px) {
  /* --- Fenster ------------------------------------------------------------
     Breite = Bildspalte + Panel + Leiste. Die Bildspalte ist so breit wie
     das Bild bei voller Höhe (Seitenverhältnis aus --vorschau-verhaeltnis,
     gesetzt von ai-contentfactory.js), mindestens 600 px für die KI-Leiste.
     Querformat stößt an die Bildschirmbreite, Hochkant bleibt schmal. */
  .thumbnail-editor-modal .thumbnail-editor-modal-dialog:has(.image-result-finished),
  .thumbnail-editor-modal:has(.thumbnail-editor-nav) .thumbnail-editor-modal-dialog:has(.image-result-finished) {
    width: fit-content;
    max-width: calc(100vw - 160px);
    border: 1px solid #1d212b;
    background: #07080c;
    overflow: hidden;
  }
  .thumbnail-editor-modal-dialog:has(.image-result-finished) > .thumbnail-editor-modal-head { display: none; }
  .thumbnail-editor-modal-dialog:has(.image-result-finished) .thumbnail-editor-modal-content { padding: 0; }

  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished {
    --bildeditor-bildhoehe: calc(100dvh - 36px - 54px - 150px);
    display: grid !important;
    grid-template-columns: minmax(0, max(720px, calc(var(--bildeditor-bildhoehe) * var(--vorschau-verhaeltnis, 1.7778) + 64px))) 320px 76px !important;
    grid-template-rows: 54px auto minmax(0, 1fr) !important;
    grid-template-areas: "kopf kopf kopf" "buehne titel leiste" "buehne panel leiste" !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100dvh - 36px);
    margin: 0 !important;
    padding: 0 !important;
    background: radial-gradient(circle at 40% 45%, #12151d, #07080c 70%);
  }
  .thumbnail-editor-modal-dialog:has(.thumbnail-editor-modal-foot) .image-result-finished { height: calc(100dvh - 36px - 74px); }
  /* Flächen von Panel und Leiste: eigene Rasterzellen hinter den Inhalten. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished::before,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished::after {
    content: "";
    grid-row: 2 / 4 !important;
    border-left: 1px solid #1b1f28;
    background: #0d0f15;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished::before { grid-column: 2; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished::after { grid-column: 3; }

  /* Hüllen auflösen: ihre Teile werden Rasterzellen. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished > .factory-image-result,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-image-stage,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished > .factory-editor-shell,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-editor-shell > .factory-image-edit {
    display: contents !important;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished > .result-success-line,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished > .factory-image-result > figcaption { display: none !important; }

  /* --- Kopfzeile ------------------------------------------------------------ */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished > .bildeditor-kopf {
    grid-area: kopf !important;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid #1b1f28;
    background: #0d0f15;
  }
  .bildeditor-kopf strong { flex: 1; color: #f1f3f7; font-size: 14px; font-weight: 700; }
  .bildeditor-kopf button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    min-width: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #c7ccd8;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  .bildeditor-kopf button i { font-size: 19px; }
  .bildeditor-kopf .bildeditor-schliessen { padding: 0; }
  .bildeditor-kopf .bildeditor-schliessen:hover { background: #1b1f28; color: #fff; }
  .bildeditor-kopf .bildeditor-herunterladen { background: #ff304f; color: #fff; font-weight: 700; }
  .bildeditor-kopf .bildeditor-herunterladen:hover { background: #ff4762; }

  /* --- Bild ------------------------------------------------------------------ */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-image-media {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    align-self: center;
    justify-self: center;
    width: fit-content !important;
    max-width: calc(100% - 64px) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 120px !important;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-image-result img,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-image-result canvas {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: var(--bildeditor-bildhoehe) !important;
    border-radius: 6px;
    object-fit: contain;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-image-revision-progress { grid-column: 1; grid-row: 2 / 4; align-self: center; justify-self: center; z-index: 3; }

  /* --- Mit KI ändern: schwebende Leiste unter dem Bild -------------------------- */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-change-request {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: end;
    justify-self: center;
    z-index: 2;
    box-sizing: border-box;
    width: min(760px, calc(100% - 40px));
    margin: 0 0 20px;
    padding: 0;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-change-request > span,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-change-request > small { display: none; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-change-request .factory-chat-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #2a2f3b;
    border-radius: 14px;
    background: rgba(16, 18, 25, .96);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .55);
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-change-request textarea {
    flex: 1 1 200px;
    /* Zwei Zeilen fest, wächst bis vier: der eingeblendete Beispieltext ließ die
       Leiste sonst bei jedem Zeilenumbruch springen. */
    field-sizing: content;
    height: auto !important;
    min-height: 58px !important;
    max-height: 100px !important;
    padding: 10px 12px;
    border: 1px solid #262b36;
    border-radius: 9px;
    background: #0a0c11;
    font-size: 13px;
    line-height: 1.4;
    resize: none;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-change-request .factory-attachment-chips:not(:empty) { order: -1; flex-basis: 100%; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-change-request .factory-chat-bar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    margin: 0;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-change-request .factory-image-revise {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 40px;
    padding: 0 14px;
    white-space: nowrap;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-image-edit-feedback:not(:empty) {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: end;
    justify-self: center;
    z-index: 2;
    margin: 0 0 118px;
    padding: 6px 12px;
    border-radius: 9px;
    background: rgba(16, 18, 25, .92);
  }

  /* --- Werkzeugleiste rechts, beschriftet ---------------------------------------- */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar {
    grid-area: leiste !important;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px;
    min-height: 0 !important;
    padding: 10px 8px !important;
    border: 0 !important;
    background: transparent;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar > span { display: none; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar button,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar .bildeditor-info-reiter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: auto;
    min-height: 58px;
    padding: 8px 2px;
    border-radius: 10px;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar button i { font-size: 21px; }
  /* Name unter dem Symbol statt Tooltip beim Überfahren. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar button::after {
    /* contentfactory-hinweise.css blendet ::after der Leiste mit !important aus. */
    content: attr(aria-label) !important;
    display: block !important;
    position: static;
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    opacity: 1;
    transform: none;
    pointer-events: none;
  }
  /* Das Wort unter „Text im Bild“ (data-caption) entfällt: die Leiste beschriftet alle Knöpfe. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar button[data-caption]::before { content: none !important; display: none !important; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar { align-self: stretch !important; height: auto !important; max-height: none !important; }
  /* „Text im Bild“ färbt sich wie die anderen erst, wenn es gewählt ist. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar button[data-editor-mode="design"]:not(.active) { color: #9aa3b5 !important; }
  /* Info und Original stehen unten. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar .bildeditor-info-reiter { order: 1; margin-top: auto; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-mini-toolbar [data-reset-image-filter] { order: 2; }

  /* --- Panel des gewählten Werkzeugs ------------------------------------------------ */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .bildeditor-panel-titel {
    grid-area: titel !important;
    z-index: 1;
    display: block;
    margin: 0;
    padding: 18px 18px 4px;
    color: #f1f3f7;
    font-size: 15px;
    font-weight: 700;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished:has([data-editor-mode="info"].active) .bildeditor-panel-titel { display: none; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-image-filters,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished [data-annotation-tools],
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished [data-banner-designer],
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-generation-info {
    grid-area: panel !important;
    z-index: 1;
    box-sizing: border-box;
    align-self: start;
    width: auto !important;
    max-height: 100% !important;
    min-height: 0;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-image-filters { padding: 12px 18px 18px !important; }
  /* Filter: drei Spalten statt einer waagrecht scrollenden Reihe. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-filter-presets {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-filter-preset { background: transparent; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .filter-swatch { height: 64px !important; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-filter-preset b { font-size: 11.5px !important; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-filter-adjustments { grid-template-columns: minmax(0, 1fr) !important; padding: 0 !important; }
  /* KI: die Markierwerkzeuge im Panel, untereinander. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished [data-annotation-tools]:not([hidden]) {
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    padding: 12px 18px 18px !important;
  }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished [data-annotation-tools] .factory-annotation-shapes { flex: 1 0 100%; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished [data-banner-designer]:not([hidden]) { padding: 12px 18px 18px !important; }
  /* Text im Bild: einspaltig wie bisher bei Hochkant (contentfactory-banner-designer.css),
     jetzt für alle Formate - das Panel ist 320 px breit. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .banner-designer-compact > header { align-items: stretch; flex-direction: column; gap: 6px; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .banner-designer-compact .banner-designer-pane[data-designer-pane] { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto !important; min-width: 0; align-content: start; align-items: start; gap: 6px; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .banner-designer-compact [data-designer-pane="text"] > * { grid-column: 1 !important; grid-row: auto !important; min-width: 0; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .banner-designer-compact [data-designer-pane="text"] .banner-designer-message textarea { box-sizing: border-box; width: 100%; min-height: 64px; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .banner-designer-compact [data-designer-pane="text"] .banner-designer-text-grid { grid-template-columns: minmax(0, 1fr) 40px !important; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .banner-designer-compact [data-designer-pane="text"] .banner-designer-align,
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .banner-designer-compact [data-designer-pane="text"] .banner-designer-effects { grid-column: 1 / -1 !important; }
  /* Erzeugungswerte nur im Reiter „Info“. */
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished .factory-generation-info { display: none !important; }
  html body .thumbnail-editor-modal .thumbnail-editor-modal-dialog .thumbnail-editor-modal-content .image-result-finished:has([data-editor-mode="info"].active) .factory-generation-info {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    height: auto !important;
    padding: 18px !important;
  }
}