/* ============================================================================
   CONVERTLYZE LANDINGPAGE-ASSISTENT - style.css
   Stand: Toolbar-Layout (Kopfzeile über beiden Spalten)

   SELBSTTEST NACH DEM DEPLOY:
   Diese Datei im Browser oeffnen und nach "cvz-workspace-cols" suchen.
   Kein Treffer = jsDelivr liefert noch die alte Version, dann stimmt der
   Commit-Hash im Embed nicht.

   WICHTIG - SCOPING
   Diese Datei wird per <link> im Webflow-Embed geladen und gilt für das
   GESAMTE Dokument. Früher stand hier "body { display:flex; ... }" - das
   macht den kompletten Webflow-Body zu einem horizontalen Flex-Container,
   quetscht die Navbar zusammen und laesst sie auf dem Handy verschwinden.
   Regel: hier NIE auf body, html oder nackte Element-Selektoren (h1, p,
   input, *) stylen - immer unter .cvz-app oder .cvz-workspace hängen.

   LAYOUT-STRUKTUR:
   .cvz-workspace              (Spalte)
     .cvz-toolbar              (volle Breite: Titel, Sessions, Buttons)
     .cvz-workspace-cols       (Zeile, ab 1080px abwaerts Spalte)
       .cvz-chat-wrap          |  .cvz-preview-panel
   ============================================================================ */

:root {
  --cvz-bg: #0d1117;
  --cvz-bg-elevated: #161b22;
  --cvz-border: #30363d;
  --cvz-teal: #4fd1c5;
  --cvz-teal-dim: rgba(79, 209, 197, 0.12);
  --cvz-text: #e6edf3;
  --cvz-text-muted: #8b949e;
  --cvz-danger: #f87171;
  --cvz-radius: 0px;
  /* Zentrale Höhensteuerung für Chat + Vorschau auf dem Desktop. */
  --cvz-panel-height: 78vh;
  --cvz-panel-height-max: 780px;
}

/* Früher "* { box-sizing: border-box }" - global für die ganze Seite. */
.cvz-app, .cvz-app *,
.cvz-workspace, .cvz-workspace * { box-sizing: border-box; }

/* Früher standen font-family, color und background auf body.
   HINWEIS: Der dunkle SEITEN-Hintergrund kommt nicht mehr aus dieser Datei.
   Den bitte im Webflow-Designer am Body bzw. an der Section setzen. */
.cvz-app,
.cvz-workspace {
  /* Geist wird von der Host-Seite global geladen - hier nur referenziert. */
  font-family: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--cvz-text);
}

.cvz-app {
  width: 100%; max-width: 640px;
  margin: 0 auto; padding: 24px 0;
}

/* Utility: wird von app.js zum Ein-/Ausblenden des Freitextfeldes
   (business_type) und der Liste gefilterter Vorschläge genutzt. */
.cvz-hidden { display: none !important; }

/* ---------- Dev-Leiste: nur zum Testen, vor echtem Memberstack-Login entfernen ---------- */
.cvz-dev-bar {
  background: var(--cvz-bg-elevated);
  border: 1px dashed var(--cvz-border);
  border-radius: var(--cvz-radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.8rem;
  color: var(--cvz-text);
}
.cvz-dev-bar summary { cursor: pointer; color: var(--cvz-teal); font-weight: 600; }
.cvz-dev-bar input {
  width: 100%; margin-top: 8px; padding: 8px 10px;
  background: var(--cvz-bg); border: 1px solid var(--cvz-border);
  border-radius: 0px; color: var(--cvz-text); font-size: 0.8rem;
}

/* ---------- Formular-Karte ---------- */
.cvz-card {
  background: var(--cvz-bg-elevated);
  border: 1px solid var(--cvz-border);
  border-radius: 00px;
  padding: 40px;
  color: var(--cvz-text);
}

.cvz-steps {
  display: flex; gap: 6px; margin-bottom: 28px; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cvz-text-muted);
}
.cvz-steps .step { flex: 1; padding-bottom: 8px; border-bottom: 2px solid var(--cvz-border); }
.cvz-steps .step.active { color: var(--cvz-teal); border-bottom-color: var(--cvz-teal); font-weight: 600; }
.cvz-steps .step.done { color: var(--cvz-text); border-bottom-color: var(--cvz-text); }

/* h1 wird von Webflow global eingefaerbt - ohne explizites color gewinnt
   die Host-Regel gegen die Vererbung von .cvz-card. */
.cvz-app h1.cvz-title {
  font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; line-height: 1.25;
  color: var(--cvz-text);
}
.cvz-app p.cvz-subtitle { color: var(--cvz-teal); margin: 0 0 28px; font-size: 0.95rem; }

.cvz-app label.cvz-label {
  display: block; font-size: 0.82rem; font-weight: 600;
  color: var(--cvz-text); margin: 18px 0 6px;
}
.cvz-app label.cvz-label:first-of-type { margin-top: 0; }

.cvz-app input.cvz-input,
.cvz-app textarea.cvz-input,
.cvz-app select.cvz-input {
  width: 100%; padding: 12px 14px; background: var(--cvz-bg);
  border: 1px solid var(--cvz-border); border-radius: 10px;
  color: var(--cvz-text); font-size: 0.95rem; font-family: inherit;
}
/* appearance:none entfernt auch den nativen Dropdown-Pfeil - der wird
   unten als CSS-Chevron über .cvz-select-wrap wieder ergänzt. */
.cvz-app select.cvz-input { appearance: none; cursor: pointer; padding-right: 40px; }
/* Optionsliste rendert das Betriebssystem. Firefox und Windows-Chrome
   übernehmen aber background/color, wenn man sie setzt - sonst schwarze
   Schrift auf hellem Systemgrau. */
.cvz-app select.cvz-input option {
  background: var(--cvz-bg-elevated);
  color: var(--cvz-text);
}
.cvz-app input.cvz-input:focus,
.cvz-app textarea.cvz-input:focus,
.cvz-app select.cvz-input:focus {
  outline: none; border-color: var(--cvz-teal);
  box-shadow: 0 0 0 3px var(--cvz-teal-dim);
}
.cvz-app textarea.cvz-input { resize: vertical; min-height: 70px; }

.cvz-select-wrap { position: relative; }
.cvz-select-wrap::after {
  content: ''; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--cvz-text-muted);
  border-bottom: 2px solid var(--cvz-text-muted);
  transform: rotate(45deg); pointer-events: none;
}

/* Früher ungescoped - hat jedes File-Upload-Feld der Seite umgefaerbt. */
.cvz-app input[type="file"] { color: var(--cvz-text); font-size: 0.85rem; }
.cvz-app input[type="file"]::file-selector-button {
  background: var(--cvz-teal); color: var(--cvz-bg); border: none;
  border-radius: 0px; padding: 8px 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; margin-right: 10px;
}

.cvz-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cvz-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--cvz-teal-dim); border: 1px solid var(--cvz-teal);
  color: var(--cvz-teal); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem;
}
.cvz-chip button {
  background: none; border: none; color: var(--cvz-teal); cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 0;
}

.cvz-choice-row { display: flex; gap: 10px; margin-top: 8px; }
.cvz-choice {
  flex: 1; padding: 14px 10px; text-align: center; border-radius: 0px;
  border: 1px solid var(--cvz-border); background: var(--cvz-bg);
  color: var(--cvz-text); cursor: pointer; font-size: 0.88rem; font-weight: 600;
}
.cvz-choice.selected { border-color: var(--cvz-teal); color: var(--cvz-teal); background: var(--cvz-teal-dim); }

/* ---------- Wettbewerber-Auswahl ---------- */
.cvz-competitor-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--cvz-border); border-radius: 0px;
  margin-bottom: 10px; cursor: pointer;
}
.cvz-competitor-item.selected { border-color: var(--cvz-teal); background: var(--cvz-teal-dim); }
.cvz-competitor-item.locked { opacity: 0.45; cursor: not-allowed; }
.cvz-competitor-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--cvz-teal); }
.cvz-competitor-item .cvz-competitor-body { min-width: 0; flex: 1; }
/* .title / .url sind generische Klassennamen, die Webflow-Projekte haeufig
   selbst belegen. Ohne explizites color gewinnt die Host-Regel, weil
   Vererbung gegen jede direkt matchende Regel verliert. */
.cvz-competitor-item .title {
  font-weight: 600; font-size: 0.92rem; color: var(--cvz-text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cvz-competitor-item .url { font-size: 0.78rem; color: var(--cvz-text-muted); word-break: break-all; }

.cvz-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
  background: var(--cvz-teal-dim); color: var(--cvz-teal); border: 1px solid var(--cvz-teal);
}

.cvz-selection-count { font-size: 0.82rem; color: var(--cvz-text-muted); margin: 0 0 14px; }
.cvz-selection-count.limit { color: var(--cvz-teal); font-weight: 600; }

/* Ausgefilterte Vorschläge bleiben einklappbar sichtbar, damit der Filter
   nachvollziehbar ist und ein bewusst gewuenschter Treffer nicht verloren geht. */
.cvz-filtered-box {
  margin-top: 16px; border: 1px solid var(--cvz-border); border-radius: 0px;
  padding: 12px 16px; background: var(--cvz-bg);
}
.cvz-filtered-box summary {
  cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--cvz-text-muted);
}
.cvz-filtered-box summary:hover { color: var(--cvz-teal); }
.cvz-filtered-list { list-style: none; margin: 12px 0 0; padding: 0; }
.cvz-filtered-list li {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--cvz-border);
  font-size: 0.78rem; color: var(--cvz-text-muted); word-break: break-all;
}
.cvz-filtered-list .reason { color: var(--cvz-text-muted); white-space: nowrap; flex-shrink: 0; }
.cvz-filtered-list button {
  background: none; border: 1px solid var(--cvz-border); border-radius: 0px;
  color: var(--cvz-text); font-family: inherit; font-size: 0.72rem;
  padding: 4px 10px; cursor: pointer; flex-shrink: 0;
}
.cvz-filtered-list button:hover { border-color: var(--cvz-teal); color: var(--cvz-teal); }

.cvz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }

.cvz-app button.cvz-btn-primary, .cvz-app button.cvz-btn-secondary,
.cvz-workspace button.cvz-btn-primary, .cvz-workspace button.cvz-btn-secondary {
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  padding: 13px 26px; border-radius: 0px; cursor: pointer; border: none;
}
.cvz-app button.cvz-btn-primary,
.cvz-workspace button.cvz-btn-primary { background: var(--cvz-teal); color: var(--cvz-bg); }
.cvz-app button.cvz-btn-primary:disabled,
.cvz-workspace button.cvz-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.cvz-app button.cvz-btn-secondary,
.cvz-workspace button.cvz-btn-secondary { background: transparent; color: var(--cvz-text); }
.cvz-app button.cvz-btn-secondary:hover,
.cvz-workspace button.cvz-btn-secondary:hover { color: var(--cvz-teal); }

.cvz-hint { font-size: 0.78rem; color: var(--cvz-text-muted); margin-top: 6px; }
.cvz-error {
  background: rgba(248, 113, 113, 0.1); border: 1px solid var(--cvz-danger);
  color: var(--cvz-danger); border-radius: 0px; padding: 12px 14px;
  font-size: 0.85rem; margin-top: 16px;
}

/* ---------- Ladezustand ---------- */
.cvz-loading { text-align: center; padding: 60px 20px; }
.cvz-spinner {
  width: 32px; height: 32px; border: 3px solid var(--cvz-border);
  border-top-color: var(--cvz-teal); border-radius: 50%;
  margin: 0 auto 20px; animation: cvz-spin 0.8s linear infinite;
}
@keyframes cvz-spin { to { transform: rotate(360deg); } }
.cvz-loading p { color: var(--cvz-text-muted); font-size: 0.9rem; }

/* ============================ WORKSPACE ============================ */

/* flex-direction:column ist die Regel, an der man erkennt, ob diese Datei
   wirklich geladen ist: steht die Toolbar LINKS neben dem Chat statt
   darüber, laeuft noch eine alte Version. */
.cvz-workspace {
  display: none;              /* app.js schaltet auf flex */
  flex-direction: column;
  gap: 16px;
  width: 100%; max-width: 1400px;
  margin: 0 auto; padding: 24px 0;
}

/* ---------- Toolbar über die volle Breite ---------- */
.cvz-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 14px 20px;
  background: var(--cvz-bg-elevated);
  border: 1px solid var(--cvz-border);
  border-radius: 0px;
}
.cvz-toolbar .cvz-toolbar-title {
  font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--cvz-text);
}
.cvz-toolbar .quota { font-size: 0.8rem; color: var(--cvz-text-muted); }
/* margin-left:auto schiebt die Buttons an den rechten Rand, unabhängig
   davon wie lang Titel und Sessions-Text sind. */
.cvz-toolbar-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cvz-toolbar button.cvz-btn-secondary,
.cvz-preview-header button.cvz-btn-secondary {
  padding: 8px 14px; font-size: 0.82rem;
  border: 1px solid var(--cvz-border); border-radius: 0px;
  white-space: nowrap;
}
.cvz-toolbar button.cvz-btn-secondary:hover,
.cvz-preview-header button.cvz-btn-secondary:hover { border-color: var(--cvz-teal); }
.cvz-toolbar button.cvz-btn-secondary:disabled,
.cvz-preview-header button.cvz-btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

/* Fehlerzeile: flex-basis 100% = eigene Zeile unterhalb der Buttons.
   margin:0 gegen Webflows globale p-Abstaende. */
.cvz-toolbar-error {
  flex: 1 1 100%; margin: 0; text-align: right;
  font-size: 0.78rem; color: var(--cvz-danger);
}
/* Das hidden-Attribut setzt display:none nur im Browser-Standard-Stylesheet
   und würde von jeder Autoren-display-Regel geschlagen. Hier absichern. */
.cvz-workspace [hidden] { display: none !important; }

/* ---------- Spaltencontainer ---------- */
.cvz-workspace-cols {
  display: flex; gap: 20px; width: 100%; align-items: stretch;
}

/* Beide Spalten bekommen dieselbe Höhe aus derselben Variable.
   clamp() statt fixer 440px: auf breiten Monitoren wird die Chat-Spalte
   breiter, damit weniger Zeilenumbrueche entstehen. min-width:0 verhindert,
   dass langer Text die Spalte über den Container hinausdrueckt. */
.cvz-chat-wrap {
  display: flex; flex-direction: column; min-width: 0;
  flex: 0 0 clamp(400px, 32%, 560px);
  height: var(--cvz-panel-height); max-height: var(--cvz-panel-height-max);
}
.cvz-preview-panel {
  flex: 1 1 0; min-width: 0;
  height: var(--cvz-panel-height); max-height: var(--cvz-panel-height-max);
  display: flex; flex-direction: column;
  background: var(--cvz-bg-elevated); border: 1px solid var(--cvz-border); border-radius: 0px;
  overflow: hidden;
}

/* ---------- Chat ---------- */
/* border-top + obere Rundung sind noetig, seit der früher darüberliegende
   Chat-Header in die Toolbar gewandert ist. */
.cvz-chat-messages {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--cvz-bg-elevated);
  border: 1px solid var(--cvz-border); border-bottom: none;
  border-radius: 0px 0px 0 0;
  /* Verhindert Scroll-Chaining: am Listenende scrollt nicht ploetzlich die
     ganze Seite weiter. */
  overscroll-behavior: contain;
}
/* 85% liess in der schmalen Chat-Spalte unnötig viel Rand stehen. */
.cvz-msg { max-width: 92%; padding: 12px 16px; border-radius: 0px; font-size: 0.92rem; line-height: 1.5; }
.cvz-msg.user { align-self: flex-end; background: var(--cvz-teal); color: var(--cvz-bg); border-bottom-right-radius: 0px; white-space: pre-wrap; }
.cvz-msg.assistant {
  align-self: flex-start; background: var(--cvz-bg); border: 1px solid var(--cvz-border);
  border-bottom-left-radius: 0px; color: var(--cvz-text);
}

/* Die allererste Nachricht im Chat ist der automatisch erzeugte Kickoff-
   Prompt nach dem Formular. Er geht weiterhin an die API, soll aber nicht
   sichtbar sein - der Verlauf beginnt direkt mit der Analyse.
   :first-child trifft ausschliesslich die erste Nachricht überhaupt;
   spaetere eigene Nachrichten sind nie first-child und bleiben sichtbar.

   überGANGSLOESUNG: Sauberer waere, die Nachricht in app.js gar nicht erst
   in den DOM zu hängen (nur in den messages-Array für die API). Dann kann
   sie auch nicht kurz aufblitzen, bevor das Stylesheet greift, und
   Screenreader lesen sie nicht vor. */
.cvz-chat-messages > .cvz-msg.user:first-child { display: none; }

.cvz-msg.assistant.loading { color: var(--cvz-text-muted); font-style: italic; display: flex; align-items: center; gap: 10px; }
/* Kleiner Inline-Spinner für die Chat-Ladeblase - dieselbe cvz-spin-
   Animation wie oben, nur kompakter, damit bei langen Struktur-Turns
   sichtbar bleibt, dass noch gearbeitet wird. */
.cvz-spinner-inline {
  flex-shrink: 0; width: 14px; height: 14px; border: 2px solid var(--cvz-border);
  border-top-color: var(--cvz-teal); border-radius: 50%; animation: cvz-spin 0.8s linear infinite;
}
.cvz-loading-label { flex: 1; }

/* Markdown-Inhalte in Assistant-Bubbles: alle Farben EXPLIZIT setzen, damit
   kein Browser-Standardblau auf dunklem Hintergrund unlesbar wird. */
.cvz-msg.assistant p { margin: 0 0 10px; color: var(--cvz-text); }
.cvz-msg.assistant p:last-child { margin-bottom: 0; }
.cvz-msg.assistant h1, .cvz-msg.assistant h2, .cvz-msg.assistant h3 {
  color: var(--cvz-teal); margin: 10px 0 4px; font-size: 1.05rem; text-align: left; line-height: 1.25;
}
.cvz-msg.assistant h1:first-child, .cvz-msg.assistant h2:first-child, .cvz-msg.assistant h3:first-child { margin-top: 0; }
.cvz-msg.assistant strong { color: var(--cvz-text); font-weight: 700; }
.cvz-msg.assistant a { color: var(--cvz-teal); text-decoration: underline; }
.cvz-msg.assistant ul, .cvz-msg.assistant ol { margin: 0 0 10px; padding-left: 20px; color: var(--cvz-text); }
.cvz-msg.assistant li { margin-bottom: 4px; }
.cvz-msg.assistant table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.85rem;
}
/* GEAENDERT: Duplikat entfernt. Vorher stand dieser Block zweimal
   hintereinander - einmal mehrzeilig, einmal als Einzeiler. Der Einzeiler
   ist gestrichen, diese mehrzeilige Version bleibt als einzige. */
.cvz-msg.assistant th,
.cvz-msg.assistant td {
  border: 1px solid var(--cvz-border);
  padding: 8px 10px;
  text-align: left;
  color: var(--cvz-text);
  word-break: break-word;
}
.cvz-msg.assistant th { background: var(--cvz-bg-elevated); color: var(--cvz-teal); }
.cvz-msg.assistant code {
  background: var(--cvz-bg-elevated); border: 1px solid var(--cvz-border);
  border-radius: 0px; padding: 1px 5px; font-size: 0.85em; color: var(--cvz-teal);
}
.cvz-chat-input-row {
  display: flex; gap: 10px; padding: 16px 20px;
  border: 1px solid var(--cvz-border); border-top: none;
  border-radius: 0 0 0px 0px; background: var(--cvz-bg-elevated);
}
.cvz-chat-input-row textarea {
  flex: 1; min-width: 0; resize: none; padding: 12px 14px; border-radius: 0px;
  background: var(--cvz-bg); border: 1px solid var(--cvz-border);
  color: var(--cvz-text); font-family: inherit; font-size: 0.92rem; max-height: 120px;
}
.cvz-chat-input-row textarea:focus { outline: none; border-color: var(--cvz-teal); }
/* flex:0 0 auto - sonst kann der Senden-Button auf schmalen Breiten
   zusammengedrueckt oder aus dem sichtbaren Bereich geschoben werden. */
.cvz-chat-input-row button {
  flex: 0 0 auto;
  background: var(--cvz-teal); color: var(--cvz-bg); border: none;
  border-radius: 0px; padding: 0 22px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cvz-chat-input-row button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Vorschau ----------
   Zeigt IMMER nur die AKTUELLSTE Struktur-Version, keinen Verlauf. Der Chat
   bekommt bei einer neuen Version nur einen kurzen Hinweis-Text statt eines
   eigenen eingebetteten Mockups - sonst waeren dieselben Inhalte doppelt da. */
.cvz-preview-header {
  padding: 14px 20px; border-bottom: 1px solid var(--cvz-border);
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
}
.cvz-preview-header .title { font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--cvz-text); }
.cvz-preview-header .version { font-size: 0.8rem; color: var(--cvz-text-muted); }
.cvz-preview-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cvz-device-toggle { display: flex; gap: 4px; background: var(--cvz-bg); border: 1px solid var(--cvz-border); border-radius: 0px; padding: 3px; }
.cvz-device-btn {
  border: none; background: transparent; color: var(--cvz-text-muted);
  font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: 0px;
  cursor: pointer; font-family: inherit;
}
.cvz-device-btn.active { background: var(--cvz-teal-dim); color: var(--cvz-teal); }
/* Skalierter Rahmen statt horizontalem Scrollen: .cvz-preview-frame-outer
   bekommt die SICHTBARE (skalierte) Groesse und zentriert sich per
   margin:auto. .cvz-preview-frame-inner enthaelt das Iframe in NATUERLICHER
   Groesse und wird per transform:scale() verkleinert - das Iframe rendert
   intern weiter bei voller Geraetebreite, "Desktop" zeigt also wirklich das
   Desktop-Layout, nur verkleinert statt abgeschnitten. */
.cvz-preview-body {
  flex: 1; min-height: 0; overflow: auto; background: var(--cvz-bg);
  position: relative; padding: 16px;
  overscroll-behavior: contain;
}
.cvz-preview-empty {
  height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px; color: var(--cvz-text-muted); font-size: 0.9rem;
}
.cvz-preview-frame-outer {
  margin: 0 auto; overflow: hidden; border: 1px solid var(--cvz-border); border-radius: 8px; background: #fff;
}
.cvz-preview-frame-inner { transform-origin: top left; }
.cvz-preview-frame-inner iframe { display: block; border: none; }

/* ---------- Gestapeltes Layout (Tablet + Handy) ----------
   Die Höhe haengt hier NICHT am aeusseren Container, sondern an den
   tatsaechlich scrollenden Flaechen. Sonst fressen Kopfzeile und
   Eingabezeile einen fast konstanten Betrag, der auf dem Handy fast die
   ganze Höhe ausmacht. */
@media (max-width: 1080px) {
  .cvz-workspace-cols { flex-direction: column; gap: 16px; }

  .cvz-chat-wrap,
  .cvz-preview-panel { flex: none; width: 100%; height: auto; max-height: none; }

  /* flex:none, damit die feste Höhe nicht von flex:1 überschrieben wird.
     vh-Fallback zuerst, dann dvh (= sichtbare Höhe ohne Browser-Leiste). */
  .cvz-chat-messages {
    flex: none;
    height: 55vh;
    height: 55dvh;
  }
  .cvz-preview-body {
    flex: none;
    height: 62vh;
    height: 62dvh;
  }

  /* ---------- Tabellen als Karten ab Tablet ----------
     Greift nur bei Tabellen, die app.js per cvzLabelTablesForCards() mit
     data-label-Attributen und der Klasse cvz-table-cards versehen hat.
     Fällt das JS aus, bleibt die normale Tabellendarstellung erhalten -
     kein kopfloser Datensalat. */
  .cvz-msg.assistant table.cvz-table-cards,
  .cvz-msg.assistant table.cvz-table-cards tbody,
  .cvz-msg.assistant table.cvz-table-cards tr,
  .cvz-msg.assistant table.cvz-table-cards td {
    display: block;
    width: 100%;
  }
  .cvz-msg.assistant table.cvz-table-cards {
    overflow-x: visible;
    font-size: 0.88rem;
  }
  /* Header wird pro Zelle über ::before wiederholt und ist oben überflüssig. */
  .cvz-msg.assistant table.cvz-table-cards thead {
    display: none;
  }
  .cvz-msg.assistant table.cvz-table-cards tr {
    background: var(--cvz-bg);
    border: 1px solid var(--cvz-border);
    border-radius: 0px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .cvz-msg.assistant table.cvz-table-cards tr:last-child {
    margin-bottom: 0;
  }
  .cvz-msg.assistant table.cvz-table-cards td {
    border: none;
    border-bottom: 1px solid var(--cvz-border);
    padding: 8px 0;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .cvz-msg.assistant table.cvz-table-cards td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .cvz-msg.assistant table.cvz-table-cards td:first-child {
    padding-top: 0;
  }
  .cvz-msg.assistant table.cvz-table-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cvz-teal);
  }
  /* Leere Zellen erzeugen sonst eine Karte mit nacktem Label. */
  .cvz-msg.assistant table.cvz-table-cards td:empty {
    display: none;
  }
}

/* 767px = derselbe Schwellwert wie die window.innerWidth-Standardauswahl in
   app.js (cvzPreviewDevice), damit Default-Verhalten und sichtbare Optionen
   konsistent sind. Eine auf ~350px herunterskalierte 1440px-Desktopansicht
   ist unlesbar - der Desktop-Button wird hier entfernt, nicht deaktiviert. */
@media (max-width: 767px) {
  #cvz-device-desktop { display: none; }
  .cvz-msg { max-width: 94%; }
  .cvz-card { padding: 28px 20px; }

  .cvz-app, .cvz-workspace { padding: 12px 0; }

  /* Toolbar gestapelt: Titel, Sessions und die Buttonzeile jeweils
     untereinander. Nebeneinander wird es auf 390px zu gedraengt. */
  .cvz-toolbar {
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px 14px;
  }
  .cvz-toolbar .cvz-toolbar-title { font-size: 0.95rem; }
  .cvz-toolbar .quota { font-size: 0.75rem; }
  /* flex-basis:0 verteilt die Breite gleichmaessig auf beide Buttons,
     unabhängig von der Textlaenge. */
  .cvz-toolbar-actions { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  .cvz-toolbar-actions button { flex: 1 1 0; min-width: 0; }
  .cvz-toolbar-error { text-align: left; }

  .cvz-preview-header { padding: 12px 14px; gap: 8px 10px; }
  .cvz-preview-header .title { font-size: 0.95rem; }
  .cvz-preview-actions { flex: 1 1 100%; margin-left: 0; flex-wrap: nowrap; }
  .cvz-preview-actions button { flex: 1 1 0; min-width: 0; }
  .cvz-toolbar button.cvz-btn-secondary,
  .cvz-preview-header button.cvz-btn-secondary {
    padding: 8px 8px; font-size: 0.75rem;
    /* nowrap aus der Grundregel hier aufheben: bei zwei gleich breiten
       Buttons darf "Als HTML herunterladen" umbrechen statt überzulaufen. */
    white-space: normal;
  }

  /* Chat bekommt hier mehr Höhe als auf dem Tablet - auf dem Handy ist er
     die Hauptarbeitsflaeche, die Vorschau dient nur der Kontrolle. */
  .cvz-chat-messages {
    height: 60vh;
    height: 60dvh;
  }

  .cvz-preview-body { padding: 8px; }
  .cvz-chat-input-row { padding: 12px 14px; }
  .cvz-chat-input-row button { padding: 0 16px; }

  /* iOS Safari zoomt beim Antippen automatisch in Eingabefelder mit weniger
     als 16px Schriftgroesse hinein und reisst das Layout auseinander. */
  .cvz-chat-input-row textarea,
  .cvz-app input.cvz-input,
  .cvz-app textarea.cvz-input,
  .cvz-app select.cvz-input { font-size: 16px; }
}

/* ---------- Schutzblock gegen generische Klassennamen der Host-Seite ----------
   Muss am DATEIENDE stehen: bei gleicher Spezifitaet gewinnt die zuletzt
   definierte Regel. Deckt Namen ab, die Webflow-Projekte typischerweise
   selbst belegen. Langfristig besser: die Klassen im HTML auf cvz--Prefix
   umbenennen, dann faellt dieser Block weg. */
.cvz-app .title,
.cvz-workspace .title,
.cvz-app .url,
.cvz-workspace .url,
.cvz-workspace .version,
.cvz-workspace .quota,
.cvz-app .reason { color: var(--cvz-text); }
.cvz-app .url,
.cvz-workspace .version,
.cvz-workspace .quota,
.cvz-app .reason { color: var(--cvz-text-muted); }
/* font-size gehoert ebenfalls hierher: Webflow faerbt .title nicht nur ein,
   sondern setzt haeufig auch eine überschriftengroesse. */
.cvz-workspace .title { font-size: 1rem; line-height: 1.2; }
.cvz-workspace .version, .cvz-workspace .quota { font-size: 0.8rem; }

/* Sichtbarer Tastaturfokus - Webflow setzt haeufig outline:none global. */
.cvz-app :focus-visible,
.cvz-workspace :focus-visible {
  outline: 2px solid var(--cvz-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cvz-spinner, .cvz-spinner-inline { animation-duration: 2s; }
}