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

Handy-Darstellung (AL-20261012-22 und AL-20261012-37, Betreiber 12.10.2026).
Alles hier gilt nur bis 700 px Breite (Wischleisten bis 760 px wie bisher);
am PC bleibt jede Ansicht, wie sie war. Die Regeln stehen absichtlich in einer
eigenen Datei, die nach contentfactory-chatbox.css geladen wird: die
Vorgänger-Regeln sind mehrfach mit !important und hoher Spezifität gesetzt
(control-center, polish, mobil-freigaben, chatbox).

Inhalt:
1. KI-Video: Bildknöpfe unter dem Eingabefeld zweispaltig, voller Name.
2. Titel der Produktionsfenster: am Handy nur der Werkzeugname.
3. Abo-Fenster: Tarife zuerst, das Werbefoto danach.
4. Studio-Start: kompakter Kopf, damit die Werkzeuge früher sichtbar sind.
5. "Alle herunterladen" unter der Überschrift statt rechts darüber hinaus.
6. Wischleisten (Veröffentlichen-Filter, Coach-Vorschläge): sanfter Verlauf am
   rechten Rand zeigt, dass es weitergeht. Bewusst kein Umbruch: die
   einzeilige Wischleiste war Betreiberwunsch (AL-20261003-04, -49).
*/

/* 1. KI-Video: Start-/End-/Referenzbild und Vorlage -------------------------- */
@media (max-width: 700px) {
  body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-frame-dock,
  body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-frame-dock.mit-vorlage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-frame-dock > .video-chat-frame-tile,
  body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-frame-dock > .video-chat-vorlage-tile {
    grid-row: auto;
    grid-column: auto;
    min-height: 40px;
    height: auto;
  }
  body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-frame-dock > .video-chat-frame-tile strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Die Haarlinie und die Anhänge stehen unter beiden Kachelzeilen, jeder Halter über die volle Breite. */
  body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-frame-dock.has-attachments::before {
    grid-row: 3;
  }
  body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-frame-dock > .video-chat-attachments {
    grid-row: auto;
    grid-column: 1 / -1;
  }
}

/* 2. Titel der Produktionsfenster ---------------------------------------------- */
/* Der Vorsatz sieht aus wie der übrige Titel (kein Kursiv, keine Kennzeilen-Schrift). */
.generic-tool-modal .generic-tool-modal-head strong > .generic-tool-modal-vorsatz { font: inherit; font-style: normal; color: inherit; letter-spacing: inherit; text-transform: none; }
@media (max-width: 700px) {
  .generic-tool-modal .generic-tool-modal-vorsatz { display: none; }
}

/* 3. Abo-Fenster: erst das Werbefoto, danach Tarife und Bestellung ------------------ */
/* WL14-28 (Betreiber 15.10.2026: „Das Bild muss in der Mobilansicht ganz oben sein.“) - vorher standen die
   Tarife zuerst. Über dem Foto bleibt der Platz für den schwebenden Zurück-Pfeil (Innenabstand der Ansicht). */
@media (max-width: 760px) {
  body.factory-upgrade-focus .factory-upgrade-view {
    display: flex !important;
    flex-direction: column;
  }
  body.factory-upgrade-focus .factory-upgrade-view > .factory-upgrade-ad {
    order: 1;
    border-radius: 20px 20px 0 0 !important;
  }
  body.factory-upgrade-focus .factory-upgrade-view > .factory-upgrade-checkout {
    order: 2;
    border-top: 0;
    border-radius: 0 0 20px 20px !important;
  }
}

/* 4. Studio-Start: kompakter Kopf ------------------------------------------------ */
@media (max-width: 700px) {
  html body .factory-hero {
    min-height: 0;
  }
  html body .factory-hero .hero-copy h1 {
    font-size: clamp(28px, 8.4vw, 34px);
    line-height: 1.08;
    margin: 8px 0 10px;
  }
  html body .factory-hero .hero-copy p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  /* Die drei Kurzzusagen und das Titelbild wiederholen die Überschrift; die Werkzeuge sollen ohne Rollen sichtbar sein. */
  html body .factory-hero .hero-proof,
  html body .factory-hero .hero-showcase {
    display: none;
  }
}

/* 5. "Alle herunterladen" unter der Überschrift ---------------------------------- */
@media (max-width: 700px) {
  #workspace-body .video-history-gallery > header:has(.verlauf-alle-laden),
  #workspace-body .tool-history-head:has(.verlauf-alle-laden) {
    flex-wrap: wrap;
  }
  #workspace-body .video-history-gallery > header:has(.verlauf-alle-laden) > h3,
  #workspace-body .tool-history-head:has(.verlauf-alle-laden) > :first-child {
    flex: 1 1 100%;
  }
  #workspace-body .verlauf-alle-laden {
    margin-left: 0;
  }
}

/* 6. Wischleisten mit Verlauf am rechten Rand ------------------------------------- */
@media (max-width: 760px) {
  /* Der Innenabstand rechts ist so breit wie der Verlauf: am Ende der Leiste steht der letzte Eintrag voll sichtbar. */
  .vs-filter {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  html body .cc-shell.is-coach-shell:has(.coach-form) .coach-prompts {
    padding-right: 32px !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
}