/* Letzte Cleaning Prüfung: 03.10.2026 */
/* Letztes Cleaning: 25.09.2026 */

/*
 * Eine Chatbox fuer alle Produktionsseiten (Nutzerwunsch 25.09.2026,
 * CFAI-MOB-20260925-129: "die KI-Generierungs-Chatbox sieht jedes Mal anders
 * aus - am besten gefaellt mir die von Video erstellen").
 *
 * Chatboxen gibt es in drei Werkzeugen: Video erstellen (eigener Baustein in
 * contentfactory-video-generator-rebuild.js) sowie Thumbnail und Social-Post
 * (gemeinsamer Baustein .tk-composer). Alle anderen Produktionsseiten sind
 * Formulare. Vorbild ist die Video-Chatbox; ihre Werte wurden im echten Chrome
 * gemessen (PC 1440 px, Telefon 412 px) und hier fuer .tk-composer gesetzt:
 *
 *                 Video (Vorbild)            vorher Thumbnail / Social
 *   Feld          22 px Innenabstand, 1,45   24 px, 1,55
 *   Rahmen        #3b4558, 18 px, Schatten   #3c4558, flacher Schatten
 *   Zauberstab    34 px, 9 px vom Rand       36 px, 14 px vom Rand
 *   Einstellungen 38 px rund, gefuellt       57x34 Pille mit Pfeil / 34 rund
 *   Start         44 px, 13 px/700           40 px, 11 px/750
 *   Leiste        12 px seitlich, Start 12 px  14 px
 *   Anhaenge      190x38, 13 px Ecke         148x42 bzw. 190x38 mit 12 px
 *   Telefon       nur Zahnrad + Start (44)   Chips/Start 30-40 px, zweizeilig
 *
 * Die Regeln stehen gebuendelt und mit !important, weil die bisherigen Werte
 * ueber ai-contentfactory-pages.css und contentfactory-mobil-freigaben.css
 * verteilt sind. Die Farben des aktiven Start-Knopfs bleiben unberuehrt.
 */

.tk-composer .tk-box .tk-thema-feld textarea,
.tk-composer .tk-box .tk-thema-feld input[type="text"] {
  padding: 22px 60px 80px 22px !important;
  border: 1px solid #3b4558 !important;
  border-radius: 18px !important;
  background: rgba(12, 15, 23, .94) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .3) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.tk-composer .tk-prompt-assistent {
  top: 9px !important;
  right: 9px !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #3a4151 !important;
  border-radius: 10px !important;
  background: #222631 !important;
  color: #ff526c !important;
  font-size: 17px !important;
  box-shadow: none !important;
}

.tk-composer .tk-eingabe-aktionen {
  left: 12px !important;
  right: 12px !important;
  bottom: 17px !important;
}

/* Einstellungen: runder, gefuellter Knopf wie das Zahnrad im Video - ohne
   Pfeil daneben. */
.tk-composer .tk-konfig-trigger {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid #303543 !important;
  border-radius: 999px !important;
  background: #222631 !important;
  color: #eef1f6 !important;
  font-size: 16px !important;
}
.tk-composer .tk-konfig-trigger .mdi-chevron-down,
.tk-composer .tk-konfig-trigger .mdi-chevron-up { display: none !important; }

.tk-composer .tk-leiste-rechts .workspace-run.tk-start {
  height: 44px !important;
  min-height: 44px !important;
  padding-left: 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Gleiche Breite wie im Video auf allen Geraeten: hoechstens 900 px, sonst
   16 px Rand zum Bildschirm. Der Thumbnail-Dialog hat seitlich mehr
   Innenabstand (PC 849, Tablet 737, Telefon 341 px statt 900/788/380); die
   Box ragt deshalb gleichmaessig darueber hinaus. */
.thumbnail-production-modal .tk-composer {
  width: min(900px, calc(100vw - 32px)) !important;
  max-width: none !important;
  margin-left: calc((100% - min(900px, calc(100vw - 32px))) / 2) !important;
  margin-right: 0 !important;
}

/* Touch-Geraete: Zauberstab 40 px wie im Video (Tippflaeche). */
@media (pointer: coarse) {
  .tk-composer .tk-prompt-assistent { width: 40px !important; height: 40px !important; }
}

/* Anhaenge unter der Box wie die Bildkacheln im Video. */
.tk-composer .tk-anhang-dock { padding: 11px 0 0 !important; gap: 9px !important; }
.tk-composer .tk-anhang-dock .tk-anhang-knopf,
.sp-composer .sp-anhang-feld .video-file-picker {
  min-width: 190px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px 0 8px !important;
  border: 1px solid rgba(137, 147, 169, .24) !important;
  border-style: solid !important;
  border-radius: 13px !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Telefon: wie im Video nur Zahnrad und Start in einer Zeile, der Start
   fuellt den Rest und zeigt Symbol und Credits (Umschaltpunkt wie im Video). */
@media (max-width: 650px) {
  .tk-composer .tk-box .tk-thema-feld textarea,
  .tk-composer .tk-box .tk-thema-feld input[type="text"] {
    padding: 18px 60px 64px 16px !important;
    min-height: 212px !important;
  }
  .tk-composer .tk-prompt-assistent { width: 40px !important; height: 40px !important; }
  .tk-composer .tk-eingabe-aktionen {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .tk-composer .tk-param-chips,
  .sp-composer .tk-param-chips { display: none !important; }
  .tk-composer .tk-konfig-halter { flex: 0 0 auto !important; }
  .tk-composer .tk-konfig-trigger {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
  .tk-composer .tk-leiste-rechts { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
  .tk-composer .tk-leiste-rechts .workspace-run.tk-start {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
  /* Social-Post: die Leiste war hier ein zweizeiliges Raster (Werte oben,
     Start darunter). Jetzt eine Zeile wie im Video. Die Bildauswahl bleibt
     auf dem Telefon oben im Einstellungsfeld (CFAI-MOB-20260925-098). */
  .sp-composer .tk-eingabe-aktionen { display: flex !important; grid-template-columns: none !important; align-items: center !important; }
  .sp-composer .tk-konfig-halter { flex: 0 0 auto !important; }
  .sp-composer .tk-konfig-trigger { flex: 0 0 34px !important; }
  .sp-composer .tk-leiste-rechts { grid-column: auto !important; margin: 0 !important; }
}

/*
 * Feinschliff (Nutzerwunsch 25.09.2026, CFAI-MOB-20260925-134: "sieht wenig
 * polished aus ... mobil ist alles ganz oben, zentriert in der Hoehe waere
 * besser"). Gilt fuer alle drei Chatboxen gleich; im echten Chrome gemessen:
 *
 *                     vorher                        jetzt
 *   Box               flach #0c0f17, Rand #3b4558   Verlauf, heller Innenrand,
 *                                                   Tiefe, Fokus-Leuchten
 *   Start leer        grau, 55-70 % Deckkraft       Markenrot, 55 % - bleibt als
 *                                                   Hauptknopf erkennbar
 *   Start aktiv       Video flach, Bild Verlauf     ueberall derselbe Verlauf
 *   Start Telefon     nur Symbole (Schrift 0)       mit Beschriftung
 *   Chips             10 px Schrift, 34 px          12 px, 32 px, ruhiger Grund
 *   Zauberstab/Zahnrad gefuellte Kaesten            zurueckhaltende Glasflaeche
 *   Telefon/Tablet    Box oben, Rest leer           senkrecht mittig (ohne
 *                                                   Ergebnis; mit Ergebnis oben)
 */
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .video-production-inner .video-generator-form.is-chat-composer,
.tk-composer .tk-box .tk-thema-feld textarea,
.tk-composer .tk-box .tk-thema-feld input[type="text"] {
  border: 1px solid rgba(148, 160, 186, .18) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(25, 29, 40, .97), rgba(12, 15, 22, .97)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 28px 80px rgba(0, 0, 0, .45) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .video-production-inner .video-generator-form.is-chat-composer:focus-within,
.tk-composer .tk-box .tk-thema-feld textarea:focus,
.tk-composer .tk-box .tk-thema-feld input[type="text"]:focus {
  border-color: rgba(255, 82, 108, .55) !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 4px rgba(255, 48, 79, .1), 0 28px 80px rgba(0, 0, 0, .45) !important;
}
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-generator-prompt textarea { border-radius: 22px !important; }

/* Zauberstab und Zahnrad: Glasflaeche statt gefuellter Kasten. */
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .video-prompt-optimize-button,
.tk-composer .tk-prompt-assistent {
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .05) !important;
  box-shadow: none !important;
}
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-config-gear,
.tk-composer .tk-konfig-trigger {
  border: 1px solid rgba(255, 255, 255, .09) !important;
  background: rgba(255, 255, 255, .05) !important;
}
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .video-prompt-optimize-button:hover,
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-config-gear:hover,
.tk-composer .tk-prompt-assistent:hover,
.tk-composer .tk-konfig-trigger:hover {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .09) !important;
}

/* Parameter-Chips: lesbare Schrift, einheitliche Hoehe, ruhiger Grund.
   Nicht die aufgeklappte Liste - sie haengt im selben Behaelter und war
   sonst auf 32 px Hoehe gedrueckt (Nutzermeldung 26.09.2026).
   Seit AL-20261001-65 (02.10.2026) kompakter: 30 statt 32 px hoch, 9 statt
   12 px Innenrand, 11,5 statt 12 px Schrift - siehe "Parameterleiste in
   einer Zeile" weiter unten. */
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-param-chips > :not(.video-param-popover),
.tk-composer .tk-param-chip {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #e3e7ef !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-param-chips > :not(.video-param-popover):hover,
.tk-composer .tk-param-chip:hover {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .08) !important;
}

/* Parameterleiste in einer Zeile (AL-20261001-65, Betreiber 02.10.2026:
   "manchmal kommt es zum haesslichen zeilenumbruch der params. bitte etwas
   kompakter machen"). Bei 900 px Chatbox, Grok Imagine 1.5, 4 Videos und
   1.160 Credits rutschte das Ton-Symbol allein in eine zweite Zeile - und
   die lag im unteren Innenabstand des Feldes, also im Text (AL-20261001-40).
   Bild erstellen bricht nicht um, schnitt aber die letzten Chips einfach ab
   (bei 1100 px fehlte "1 Bild").
   Deshalb, nur ab Tablet-Breite (darunter zeigt das Telefon eigene Leisten):
   - die Chips bleiben in einer Zeile; reicht der Platz nicht, wird nur der
     Modellname mit "..." gekuerzt, die uebrigen Chips behalten ihre Breite;
   - wird die Leiste schmal, zeigt Stil bzw. Bildart nur das Symbol und
     Format, Aufloesung, Dauer, Anzahl nur den Text (er sagt dasselbe).
   Der volle Wert steht weiter im Tooltip und in der Auswahlliste.
   Gemessen im echten Chrome bei 1920/1400/1100/1024/820/768 px. */
@media (min-width: 701px) {
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-actions {
    container: video-leiste / inline-size;
  }
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-param-chips {
    flex-wrap: nowrap;
    gap: 5px;
  }
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-param-chips > :not(.video-param-popover) {
    flex: none;
    gap: 4px;
  }
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-param-chips > [data-video-param="model"] {
    flex: 0 1 auto;
    min-width: 0;
  }
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-param-chip > i {
    flex: none;
  }
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-param-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-actions > .video-config-gear,
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-actions > [data-video-rebuild-start] {
    flex-shrink: 0;
  }
}
@container video-leiste (max-width: 820px) {
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-param-chip[data-video-param="style"] > span {
    display: none;
  }
}
@container video-leiste (max-width: 780px) {
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-param-chip:is([data-video-param="aspect"], [data-video-param="resolution"], [data-video-param="duration"], [data-video-param="variants"]) > i {
    display: none;
  }
}

@media (min-width: 561px) {
  .tk-composer .tk-eingabe-aktionen {
    container: tk-leiste / inline-size;
  }
  .tk-composer .tk-eingabe-aktionen .tk-param-chips {
    gap: 5px;
  }
  .tk-composer .tk-eingabe-aktionen .tk-param-chip {
    flex: none;
    gap: 4px;
  }
  .tk-composer .tk-eingabe-aktionen .tk-param-chip:is([data-tk-param="openrouter_image_model"], [data-sp-modell-chip]) {
    flex: 0 1 auto;
    min-width: 0;
  }
  .tk-composer .tk-eingabe-aktionen .tk-param-chip > i {
    flex: none;
  }
  .tk-composer .tk-eingabe-aktionen .tk-param-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@container tk-leiste (max-width: 700px) {
  .tk-composer .tk-eingabe-aktionen .tk-param-chip:is([data-tk-param="verwendung"], [data-tk-param="scene_variant"]) > span {
    display: none;
  }
}
@container tk-leiste (max-width: 560px) {
  .tk-composer .tk-eingabe-aktionen .tk-param-chip:is([data-tk-param="format"], [data-tk-param="image_resolution"], [data-tk-param="variant_count"]) > i {
    display: none;
  }
}
/* Tablet (Chatbox unter 520 px): "Thumbnail erstellen" allein war breiter
   als alle Chips zusammen. Der Start zeigt dann Symbol und Credits; der
   Wortlaut bleibt als Tooltip/Bezeichnung des Knopfs erhalten. */
@container tk-leiste (max-width: 520px) {
  .tk-composer .tk-eingabe-aktionen .tk-leiste-rechts .workspace-run.tk-start .tk-start-label {
    display: none;
  }
}

/* Start: ueberall derselbe Markenverlauf. Leer bleibt er als Hauptknopf
   erkennbar und ist nur gedaempft, statt grau zu verschwinden. */
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-actions > [data-video-rebuild-start],
.tk-composer .tk-leiste-rechts .workspace-run.tk-start {
  border: 1px solid rgba(255, 92, 118, .7) !important;
  background: linear-gradient(135deg, #ff3153, #f20d3d) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(255, 29, 72, .28) !important;
  opacity: 1 !important;
}
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-actions > [data-video-rebuild-start]:disabled,
.tk-composer .tk-leiste-rechts .workspace-run.tk-start:disabled,
.tk-composer .tk-leiste-rechts .workspace-run.tk-start.ist-ohne-thema {
  color: #fff !important;
  box-shadow: none !important;
  opacity: .55 !important;
  cursor: not-allowed !important;
}
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-actions > [data-video-rebuild-start]:disabled *,
.tk-composer .tk-leiste-rechts .workspace-run.tk-start:disabled *,
.tk-composer .tk-leiste-rechts .workspace-run.tk-start.ist-ohne-thema * { color: inherit !important; }
/* Ohne Thema nur gedimmt, aber klickbar - der Klick erklaert, was fehlt (AL-20261001-78). */
.tk-composer .tk-leiste-rechts .workspace-run.tk-start.ist-ohne-thema { cursor: pointer !important; }

/* Bildfelder unter der Box (Start-/Endbild, Referenzen): lesbar statt blass. */
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .video-chat-frame-dock > *,
.tk-composer .tk-anhang-dock .tk-anhang-knopf,
.sp-composer .sp-anhang-feld .video-file-picker {
  border-color: rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .03) !important;
  color: #c9cfdb !important;
}
html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .video-chat-frame-dock > *:hover,
.tk-composer .tk-anhang-dock .tk-anhang-knopf:hover,
.sp-composer .sp-anhang-feld .video-file-picker:hover {
  border-color: rgba(255, 82, 108, .45) !important;
  background: rgba(255, 48, 79, .06) !important;
  color: #fff !important;
}

@media (max-width: 650px) {
  /* Telefon: der Start sagt, was er tut ("Video erstellen" statt nur
     Symbole). Platz ist da - daneben steht nur das Zahnrad. */
  html body.factory-page-active #workspace-body:is([data-tool="video-generator"],[data-tool="video-editor"]) .is-chat-composer .video-chat-actions > [data-video-rebuild-start],
  .tk-composer .tk-leiste-rechts .workspace-run.tk-start {
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

/* Telefon und Tablet: die Produktion steht senkrecht mittig, solange noch
   kein Ergebnis darunter liegt. Mit Ergebnis ist das Fenster hoeher als der
   Bildschirm; "safe" haelt es dann oben statt es abzuschneiden. */
@media (max-width: 1024px) {
  html body.factory-page-active #workspace-body .video-production-modal.is-open,
  html body.factory-page-active .thumbnail-production-modal.is-open {
    display: flex !important;
    flex-direction: column !important;
    justify-content: safe center !important;
  }
  html body.factory-page-active #workspace-body .video-production-modal.is-open > .video-production-dialog,
  html body.factory-page-active .thumbnail-production-modal.is-open > .thumbnail-production-dialog {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Creator Coach: seine Chatbox ist die Vorlage, an der der Thumbnail-Composer
   bisher ausgerichtet war (contentfactory-thumbnail-chatbox-coachform). Damit
   beide weiter uebereinstimmen, bekommt der Coach dieselbe Zeilenhoehe und
   dieselbe Lage der Leiste wie Video und Thumbnail. Sein uebriges Aussehen
   bleibt; er ist keine Produktionsseite. */
.cc-shell:has(.coach-form) .coach-form .cc-textarea { line-height: 1.45 !important; }
.cc-shell:has(.coach-form) .coach-form footer {
  left: 12px !important;
  right: 12px !important;
  bottom: 17px !important;
}

/* Symbol eines Seitenverhaeltnisses (format-zeichen.js, CFAI-MOB-20260925-130):
   ein Rahmen in der Form des Formats statt Monitor/Handy/Quadrat. Die Groesse
   setzt das Skript, die Farbe kommt von der jeweiligen Umgebung. */
.cf-format-zeichen {
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  border: 1.6px solid currentColor;
  border-radius: 2.5px;
  vertical-align: middle;
  font-size: 0;
}

/* WL-08 (12.10.2026): Die Kachel "Referenzbilder" ist fest 38 px hoch; die
   Anzahl ("1 Bild") stand als zweite Rasterzeile darunter und ragte unten aus
   der Kachel. Jetzt steht sie in derselben Zeile: "Referenzbilder · 1 Bild". */
.tk-composer .tk-anhang-dock .tk-anhang-knopf {
  grid-template-columns: 23px auto minmax(0, auto) !important;
  column-gap: 7px !important;
}
.tk-composer .tk-anhang-dock .tk-anhang-knopf > small {
  grid-column: 3 !important;
  grid-row: 1 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-composer .tk-anhang-dock .tk-anhang-knopf > small::before { content: "· "; }