/* hub-composer.css — Hub 1 (Creation Entry), gemeinsam fuer alle vier Builder.
 *
 * Hub 1 und Hub 2 haben verschiedene Aufgaben: Hub 1 nimmt die Idee auf, Hub 2
 * zeigt die Arbeit daran. Sie muessen deshalb nicht gleich AUSSEHEN — aber sie
 * muessen erkennbar aus demselben System stammen. Diese Datei uebernimmt die
 * Designsprache des abgenommenen Hub-2-Composers: dieselben Radien, dieselbe
 * Randfarbe, derselbe sehr weiche Schatten, dieselbe Toolbar-Logik, derselbe
 * integrierte Primaerknopf.
 *
 * Alles ist auf `.hub-v2` begrenzt. Ohne diese Klasse bleibt Hub 1 exakt wie
 * bisher — das macht den Eingriff ins Builder-HTML auf eine Klasse klein und
 * jederzeit umkehrbar.
 *
 * Hub 2 wird von hier aus NICHT angefasst.
 */

.hub-v2 {
  --hc-ink: #1C0C26;
  --hc-ink-soft: #4A4152;
  --hc-muted: #767085;
  --hc-line: #E7E4EA;
  --hc-line-soft: #F0EEF2;
  --hc-surface: #FFFFFF;
  --hc-raise: #FAF9FB;
  --hc-accent: #3D2B55;
}

/* ── Hero: mehr Ruhe, klarere Rangfolge ───────────────────────────────────
 * Vorher konkurrierten Badge, Headline, Unterzeile, Composer, vier Ideen,
 * ein Hinweis, vier Schnellzugriffe und acht Themen-Pills gleichzeitig um
 * Aufmerksamkeit. Die Abstaende ordnen sie jetzt: Der Composer bekommt Luft,
 * alles Sekundaere rueckt zusammen und tritt zurueck.
 */
.hub-v2 .hub-hero { margin-bottom: 56px; }
.hub-v2 .hub-eyebrow { opacity: .72; margin-bottom: 22px; }
.hub-v2 .hub-title { letter-spacing: -0.024em; line-height: 1.06; }
/* Zweite Zeile im Emerv-Verlauf — identisch zur Landingpage-Headline, damit
   Einstieg und Aussenauftritt erkennbar aus demselben System stammen. */
.hub-v2 .hub-title .hub-grad {
  background: linear-gradient(100deg,#155AFF,#3D49FF 34%,#6C40F3 68%,#C33FE5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hub-v2 .hub-sub {
  max-width: 54ch; margin-left: auto; margin-right: auto;
  color: var(--hc-ink-soft); margin-bottom: 38px;
}

/* ── Composer: die Mitte von Hub 1 ───────────────────────────────────────── */
.hub-v2 .hub-prompt-card {
  max-width: 720px; margin: 0 auto;
  background: var(--hc-surface);
  border: 1px solid var(--hc-line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(28, 12, 38, .04), 0 8px 26px rgba(28, 12, 38, .06);
  transition: border-color .16s ease, box-shadow .16s ease;
  padding: 0;
  display: flex; flex-direction: column;
}
.hub-v2 .hub-prompt-card:focus-within {
  border-color: #C9C2D4;
  box-shadow: 0 1px 2px rgba(28, 12, 38, .05), 0 12px 34px rgba(28, 12, 38, .10);
}
.hub-v2 .hub-prompt-input {
  width: 100%; border: 0; outline: 0; resize: none; background: transparent;
  color: var(--hc-ink); font: inherit; font-size: 16px; line-height: 1.6;
  /* Rund doppelte Hoehe: Der zusaetzliche Platz geht ausschliesslich an den
     Text. Die Toolbar behaelt ihre Hoehe und bleibt am unteren Rand. */
  padding: 26px 24px 10px;
  min-height: 170px; max-height: 320px; overflow-y: auto;
}
.hub-v2 .hub-prompt-input::placeholder { color: var(--hc-muted); }

.hub-v2 .hub-prompt-foot {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px 14px 16px;
}
.hub-v2 .hub-foot-left { display: flex; align-items: center; gap: 2px; }
.hub-v2 .hub-icon-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 0;
  background: transparent; color: var(--hc-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s ease, color .14s ease;
}
.hub-v2 .hub-icon-btn:hover { background: var(--hc-raise); color: var(--hc-ink); }
.hub-v2 .hub-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Der Primaerknopf gehoert IN den Composer — kein schwebender Kreis daneben. */
.hub-v2 .hub-send {
  margin-left: auto;
  width: auto; height: 38px; min-width: 38px;
  padding: 0 12px;
  border-radius: 12px; border: 0; cursor: pointer;
  background: var(--hc-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 500;
  box-shadow: none;
  transition: background .14s ease, opacity .14s ease;
}
.hub-v2 .hub-send:hover:not(:disabled) { background: #2A1638; filter: none; transform: none; }
.hub-v2 .hub-send:disabled { opacity: .38; cursor: not-allowed; background: var(--hc-ink); }
.hub-v2 .hub-send svg { width: 17px; height: 17px; }
.hub-v2 .hub-send .hub-send-label { display: none; }
@media (min-width: 720px) { .hub-v2 .hub-send .hub-send-label { display: inline; } }

/* ── Sekundaeres: Ideen, Hinweis, Schnellzugriffe ────────────────────────── */
.hub-v2 .idea-row { max-width: 720px; margin: 18px auto 0; gap: 7px; }
.hub-v2 .idea-chip {
  border: 1px solid var(--hc-line); background: var(--hc-surface);
  color: var(--hc-ink-soft); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.hub-v2 .idea-chip:hover { background: var(--hc-raise); border-color: #D9D5DF; color: var(--hc-ink); }
.hub-v2 .idea-hint { color: var(--hc-muted); font-size: 12.5px; margin: 14px auto 0; max-width: 60ch; }

.hub-v2 .hub-quick-actions { margin: 26px auto 0; gap: 6px; opacity: .9; }
.hub-v2 .hub-qa-btn {
  border: 1px solid var(--hc-line-soft); background: transparent;
  color: var(--hc-muted); border-radius: 10px; padding: 7px 12px; font-size: 12.5px;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.hub-v2 .hub-qa-btn:hover { background: var(--hc-raise); color: var(--hc-ink); border-color: var(--hc-line); }
/* Einheitliche Icon-Sprache: gleiche Groesse, gleiche Strichstaerke, gleiche
   optische Gewichtung — reine Linien, keine Flaechen, keine Farbe. */
.hub-v2 .hub-qa-btn { display: inline-flex; align-items: center; gap: 7px; }
.hub-v2 .hub-qa-btn svg,
.hub-v2 .idea-chip svg,
.hub-v2 .hub-more svg {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
.hub-v2 .idea-chip { display: inline-flex; align-items: center; gap: 7px; }

/* ── Themen-Vorschlaege: eingeklappt statt Pill-Wand ─────────────────────
 * Die acht Themen bleiben vollstaendig erhalten und bedienbar, treten aber
 * hinter den eigentlichen Flow zurueck. Aufgeklappt wird ueber eine
 * Umschaltung, die hub-composer.js einfuegt.
 */
.hub-v2 .prompt-chips {
  display: none;
  max-width: 720px; margin: 14px auto 0;
  gap: 7px; justify-content: center; flex-wrap: wrap;
}
.hub-v2 .prompt-chips[data-open="1"] { display: flex; }
.hub-v2 .pchip {
  border: 1px solid var(--hc-line); background: var(--hc-surface);
  color: var(--hc-ink-soft); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.hub-v2 .pchip:hover { background: var(--hc-raise); border-color: #D9D5DF; color: var(--hc-ink); }

.hub-v2 .hub-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 16px auto 0; padding: 6px 12px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--hc-muted);
  border-radius: 8px; transition: color .14s ease, background .14s ease;
}
.hub-v2 .hub-more:hover { color: var(--hc-ink); background: var(--hc-raise); }
.hub-v2 .hub-more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.hub-v2 .hub-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.hub-v2 .hub-more-wrap { display: flex; justify-content: center; }

/* Tastaturbedienung muss immer sichtbar sein. */
.hub-v2 :focus-visible { outline: 2px solid #6B5B8A; outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .hub-v2 .hub-prompt-card,
  .hub-v2 .hub-send,
  .hub-v2 .idea-chip,
  .hub-v2 .pchip,
  .hub-v2 .hub-more,
  .hub-v2 .hub-more svg { transition: none; }
}