/* NextGenBuilders Live – CI wie nextgenbuilders.io */

:root {
  --dark: #0D0D1A;
  --mid: #1A1A2E;
  --panel: #131325;
  --accent: #7C3AED;
  --accent-light: #9D6BFF;
  --mint: #07c997;
  --warm-white: #F5F3FF;
  --danger: #F87171;

  --text: var(--warm-white);
  --muted: rgba(245, 243, 255, 0.66);
  --faint: rgba(245, 243, 255, 0.42);
  --line: rgba(124, 58, 237, 0.20);
  --line-soft: rgba(245, 243, 255, 0.07);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --radius: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--dark);
  color: var(--text);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Grundbausteine ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 100px; text-decoration: none; padding: 13px 24px;
  font-weight: 600; font-size: 0.97rem;
  transition: transform .25s var(--ease), background .3s ease, color .3s ease, box-shadow .3s ease;
}
.btn-primary { background: var(--mint); color: var(--dark); }
.btn-primary:hover { background: var(--accent); color: #fff; transform: scale(1.03); }
.btn-primary:disabled { opacity: .5; cursor: progress; transform: none; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent-light); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid rgba(248, 113, 113, .35); }
.btn-danger:hover { background: rgba(248, 113, 113, .12); }
.btn-sm { padding: 8px 14px; font-size: .86rem; }

.field { display: grid; gap: 6px; font-size: .88rem; color: var(--muted); font-weight: 500; }
.field input {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 1rem; color: var(--text); transition: border-color .2s, background .2s;
}
.field input:focus { outline: none; border-color: var(--accent-light); background: rgba(124, 58, 237, .08); }

.card {
  background: linear-gradient(160deg, rgba(124, 58, 237, .10), rgba(255, 255, 255, .02));
  border: 1px solid var(--line); border-radius: var(--radius);
}

.error { color: var(--danger); font-size: .9rem; min-height: 1.35em; }
.notice { color: var(--mint); font-size: .9rem; }

/* ── Verbindungs-Banner ─────────────────────────────────────────────── */

.banner {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: #2a1d10; color: #FBBF24; border: 1px solid rgba(251, 191, 36, .35);
  padding: 8px 16px; border-radius: 100px; font-size: .88rem; font-weight: 500;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
}
.banner::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }

/* ── Login ──────────────────────────────────────────────────────────── */

.login {
  min-height: 100%; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(124, 58, 237, .22), transparent 60%),
    radial-gradient(700px 420px at 110% 110%, rgba(7, 201, 151, .12), transparent 60%),
    var(--dark);
}
.login-card { width: min(420px, 100%); padding: 36px 30px 30px; display: grid; gap: 22px; }
.login-logo { height: 38px; width: auto; justify-self: start; }
.login h1 { font: 700 1.7rem/1.15 var(--font-display); letter-spacing: -.01em; }
.login h1 em { font-style: normal; color: var(--mint); }
.login .sub { color: var(--muted); margin-top: 6px; }
.login form { display: grid; gap: 14px; }
.login .btn { margin-top: 4px; width: 100%; }
.session-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px;
  background: rgba(7, 201, 151, .1); color: var(--mint); font-size: .85rem; font-weight: 600;
}
.session-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }
.session-chip.off { background: rgba(245, 243, 255, .06); color: var(--faint); }
.session-chip.off::before { animation: none; }

/* ── App-Gerüst ─────────────────────────────────────────────────────── */

.app { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); position: relative; }
.app > .topbar { grid-row: 1; position: relative; z-index: 30; }
.app > .present-banner { grid-row: 2; }
.app > .stage, .app > .closed-view { grid-row: 3; grid-column: 1; }
/* Liegt Play oder die Galerie darüber, rechnen die Kacheln darunter nicht unsichtbar mit
   (Layout, Markdown, Scrollen) – das hielt „▶ Play“ spürbar auf. */
.app:has(> .play:not([hidden])) > .stage, .app:has(> .gallery:not([hidden])) > .stage { content-visibility: hidden; }
.app > .composer { grid-row: 4; position: relative; z-index: 20; }
/* In der Galerie wird nicht geschrieben – Eingabe weg, Galerie bis ganz unten */
.app:has(> .gallery:not([hidden])) > .composer { display: none; }
/* Begrüßungsvideo: man sieht nur das Video – Kopfleiste, Banner und Eingabe sind solange weg */
.app:has(> .intro:not([hidden])) > :is(.topbar, .present-banner, .composer) { display: none; }

.app > .intro { grid-row: 3 / 5; grid-column: 1; min-height: 0; z-index: 26; position: relative;
  display: grid; place-items: center; background: #05050c; animation: rise .25s var(--ease); }
.intro-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.intro-start { position: absolute; font-size: 1.1rem; padding: 16px 28px; box-shadow: 0 10px 40px -10px rgba(7, 201, 151, .6); }
.intro-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px;
  padding: 26px 18px 12px; background: linear-gradient(transparent, rgba(5, 5, 12, .85)); }
.intro-progress { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.intro-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--accent), var(--mint));
  transition: width .25s linear; }
.intro-volume { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px;
  background: rgba(13, 13, 26, .7); border: 1px solid var(--line-soft); backdrop-filter: blur(6px); }
.intro-mute { border: none; background: none; padding: 0; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.intro-volume input[type=range] { width: 110px; accent-color: var(--mint); cursor: pointer; }

.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 10px 18px; border-bottom: 1px solid var(--line-soft);
  background: rgba(13, 13, 26, .85); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 32px; height: 32px; flex: none; }
.brand-text { display: grid; min-width: 0; line-height: 1.25; }
.brand-text strong { font: 600 1rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: .8rem; color: var(--muted); }
.brand-text span b { color: var(--mint); font-weight: 600; }

.views {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft); border-radius: 100px;
}
.views button, .views select {
  border: none; background: transparent; color: var(--muted);
  padding: 7px 16px; border-radius: 100px; font-size: .88rem; font-weight: 500;
  transition: background .2s, color .2s;
}
.views button:hover, .views select:hover { color: var(--text); }
.views button:disabled { opacity: .45; cursor: default; color: var(--muted); }
.app.allein .tile-btn.zurueck { display: none; }
.views [aria-selected="true"] { background: var(--accent); color: #fff; }
.views select { appearance: none; padding-right: 30px; max-width: 190px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.views select option { background: var(--mid); color: var(--text); }

.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.avatars { display: flex; align-items: center; }
.avatar {
  --c: var(--accent-light);
  width: 32px; height: 32px; border-radius: 50%; margin-left: -6px; flex: none;
  display: grid; place-items: center; position: relative;
  font: 600 .74rem var(--font-display); color: var(--dark);
  background: var(--c); border: 2px solid var(--dark); padding: 0;
  transition: transform .2s var(--ease), opacity .2s;
}
.avatar:hover { transform: translateY(-2px); z-index: 1; }
.avatar.offline { opacity: .35; filter: grayscale(.6); }
.avatar.typing::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--c); animation: ring 1.1s ease-out infinite;
}
.avatar-more { margin-left: 6px; font-size: .8rem; color: var(--muted); }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-soft); background: transparent; color: var(--muted); transition: color .2s, border-color .2s;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent-light); }
.icon-btn svg { width: 17px; height: 17px; }

/* ── Bühne: Raster und Fokus ────────────────────────────────────────── */

.stage { min-height: 0; overflow: auto; padding: 16px 18px; }
.stage.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  grid-auto-rows: minmax(250px, 1fr);
}
.stage.focus { display: flex; justify-content: center; }
.stage.focus .tile { width: min(860px, 100%); height: 100%; }

.empty-stage { grid-column: 1 / -1; display: grid; place-items: center; color: var(--faint); text-align: center; }

/* ── Kachel = Terminal ──────────────────────────────────────────────── */

.tile {
  --c: var(--accent-light);
  position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease, opacity .3s;
}
.tile.mine { border-color: rgba(124, 58, 237, .55); box-shadow: 0 0 0 1px rgba(124, 58, 237, .25), 0 18px 44px -24px rgba(124, 58, 237, .6); }
.tile.typing { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.tile.offline { opacity: .55; }
.tile.flash { animation: flash .7s ease-out; }

.tile-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px;
  background: rgba(255, 255, 255, .025); border-bottom: 1px solid var(--line-soft);
}
.tile-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  background: none; border: none; padding: 2px 0; text-align: left;
}
.tile-name .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 10px -1px var(--c); }
.tile-name .name { font: 600 .95rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-name .you { font-size: .72rem; color: var(--accent-light); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tile-name:hover .name { color: var(--c); }
.status { margin-left: auto; font-size: .76rem; color: var(--faint); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.online { color: var(--mint); }
.status.typing { color: var(--c); }
.status.typing::before { animation: pulse .9s ease-in-out infinite; }
.tile-btn {
  border: none; background: transparent; color: var(--faint); border-radius: 8px;
  padding: 4px 8px; font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; transition: color .2s, background .2s;
}
.tile-btn:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.tile-btn svg { width: 14px; height: 14px; }

.tile-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 10px;
  font: 400 .88rem/1.55 var(--font-mono);
  scrollbar-width: thin; scrollbar-color: rgba(245, 243, 255, .15) transparent;
  overflow-anchor: none;
}
.stage.focus .tile-body { padding: 22px 26px 14px; font-size: .95rem; }
.msgs { list-style: none; padding: 0; display: grid; gap: 10px; }
.msg {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .035); border: 1px solid var(--line-soft);
  animation: rise .25s var(--ease);
}
.msg .prompt, .draft .prompt { color: var(--c); font-weight: 700; user-select: none; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.msg time { grid-column: 2; font-size: .72rem; color: var(--faint); margin-top: 2px; }

.draft {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px;
  padding: 9px 12px; margin-top: 10px; border-radius: var(--radius-sm);
  border: 1px dashed color-mix(in srgb, var(--c) 40%, transparent);
  color: var(--muted);
}
.draft-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.draft-text::after {
  content: ""; display: inline-block; width: .55em; height: 1.1em; margin-left: 1px;
  vertical-align: text-bottom; background: var(--c); animation: blink 1s steps(1) infinite;
}
.tile-empty { color: var(--faint); font-size: .84rem; padding: 4px 2px; }
.tile-empty .prompt { color: var(--c); margin-right: 8px; }

.new-pill {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  border: none; border-radius: 100px; padding: 6px 14px; font-size: .8rem; font-weight: 600;
  background: var(--accent); color: #fff; box-shadow: 0 8px 22px -8px rgba(124, 58, 237, .9);
  animation: rise .25s var(--ease);
}

/* ── Eingabe ────────────────────────────────────────────────────────── */

.composer { padding: 10px 18px 14px; border-top: 1px solid var(--line-soft); background: var(--dark); }
.composer form { width: min(860px, 100%); margin: 0 auto; }
.composer-box {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 8px 16px;
  background: var(--mid); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.composer-box:focus-within { border-color: var(--accent-light); box-shadow: 0 0 0 4px rgba(124, 58, 237, .15); }
.composer-box .prompt { font: 700 1rem/26px var(--font-mono); color: var(--accent-light); padding-bottom: 3px; }
.composer textarea {
  flex: 1; min-width: 0; resize: none; border: none; background: transparent; outline: none;
  font: 400 .95rem/1.6 var(--font-mono); max-height: calc(1.6em * 6 + 6px); padding: 3px 0; min-height: 32px;
}
/* Beim Tippen keine Ligaturen der Code-Schrift (aus „....“ oder „->“ würden Zierzeichen, Text und
   Cursor verrutschen) – jedes Zeichen steht genau da, wo es getippt wurde. */
.composer textarea, .doku-src, .mp-suche, input, textarea {
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;
}
.composer textarea::placeholder { color: var(--faint); }
.send {
  width: 34px; height: 34px; border-radius: 50%; border: none; flex: none;
  display: grid; place-items: center; background: var(--mint); color: var(--dark);
  transition: background .2s, transform .2s var(--ease), opacity .2s;
}
.send:hover:not(:disabled) { background: var(--accent); color: #fff; transform: scale(1.06); }
.send:disabled { opacity: .3; cursor: default; }
.send svg { width: 18px; height: 18px; }
.hint { font-size: .74rem; color: var(--faint); text-align: center; margin-top: 7px; }
.hint kbd { font: 500 .7rem var(--font-mono); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .04); }

/* ── Admin ──────────────────────────────────────────────────────────── */

.admin { width: min(920px, 100%); margin: 0 auto; padding: 28px 16px 60px; display: grid; gap: 20px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-head img { height: 34px; }
.admin h1 { font: 700 1.5rem var(--font-display); }
.admin h2 { font: 600 1.1rem var(--font-display); margin-bottom: 14px; }
.admin .card { padding: 22px; }
.admin form.row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.pw-wrap { display: flex; gap: 8px; }
.pw-wrap input { flex: 1; min-width: 0; }
.share {
  display: grid; gap: 4px; padding: 16px 18px; margin-top: 16px; border-radius: var(--radius-sm);
  background: rgba(7, 201, 151, .08); border: 1px solid rgba(7, 201, 151, .3);
}
.share span { font-size: .8rem; color: var(--muted); }
.share strong { font: 600 1.25rem var(--font-mono); color: var(--mint); overflow-wrap: anywhere; }
.session-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.session-line .meta { color: var(--muted); font-size: .9rem; }
.people { width: 100%; border-collapse: collapse; font-size: .92rem; }
.people th { text-align: left; font-weight: 500; color: var(--faint); font-size: .8rem; padding: 0 8px 8px; }
.people td { padding: 10px 8px; border-top: 1px solid var(--line-soft); }
.people td:last-child { text-align: right; }
.people .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }

/* ── Bewegung ───────────────────────────────────────────────────────── */

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes ring { from { opacity: .9; transform: scale(.85); } to { opacity: 0; transform: scale(1.25); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes flash { from { box-shadow: 0 0 0 2px var(--c); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Schmal ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; padding: 10px 14px; }
  .views { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .views button, .views select { flex: 1; padding: 7px 10px; }
  .views select { max-width: none; }
  .avatars { display: none; }
}
@media (max-width: 640px) {
  .stage { padding: 12px; }
  .stage.grid { grid-auto-rows: minmax(220px, 46vh); }
  .composer { padding: 8px 12px 12px; }
  .hint { display: none; }
  .admin form.row { grid-template-columns: 1fr; }
}

.head-actions { display: flex; gap: 10px; }
.session-line .meta { margin-top: 8px; }
.form-error { margin-top: 10px; }
.meta.faint { color: var(--faint); }

/* ══ Phase 1b: Konten, Claude, Panel, Präsentation ═════════════════ */

.field small { color: var(--faint); font-weight: 400; margin-left: 4px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.auth-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-form { display: grid; gap: 14px; }
.auth-form h2 { font: 600 1.25rem var(--font-display); }
.auth-form .btn { width: 100%; margin-top: 4px; }
.big-check { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(7, 201, 151, .15); color: var(--mint); font-size: 1.6rem; font-weight: 700; }
.ai-note { font-size: .84rem; color: var(--muted); padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(124, 58, 237, .1); border: 1px solid var(--line); }
.ai-note strong { color: var(--accent-light); }

.tabs { display: flex; gap: 2px; padding: 4px; border-radius: 100px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft); }
.tabs button { flex: 1; border: none; background: transparent; color: var(--muted); padding: 8px 12px;
  border-radius: 100px; font-size: .9rem; font-weight: 500; transition: background .2s, color .2s; }
.tabs button:hover { color: var(--text); }
.tabs [aria-selected="true"] { background: var(--accent); color: #fff; }

/* ── Einblendungen ─────────────────────────────────────────────────── */

.toasts { position: fixed; z-index: 60; right: 16px; bottom: 120px; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast { max-width: min(380px, calc(100vw - 32px)); padding: 11px 16px; border-radius: var(--radius-sm);
  background: var(--mid); border: 1px solid var(--line); color: var(--text); font-size: .9rem;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8); animation: rise .25s var(--ease); pointer-events: auto; }
.toast.ok { border-color: rgba(7, 201, 151, .45); }
.toast.warn { border-color: rgba(251, 191, 36, .45); }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }

/* ── Kachel: Kopf mit Modell, Claude-Antworten ─────────────────────── */

.tile-name .who { display: grid; min-width: 0; line-height: 1.15; }
.tile-name .nick { font-size: .72rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-badge { font: 600 .68rem var(--font-body); letter-spacing: .02em; padding: 3px 8px; border-radius: 100px;
  background: rgba(124, 58, 237, .16); color: var(--accent-light); white-space: nowrap; }
.status.thinking, .status.writing { color: var(--accent-light); }
.status.thinking::before, .status.writing::before { animation: pulse .9s ease-in-out infinite; }

.ai { padding: 10px 12px 10px 14px; border-radius: var(--radius-sm); border-left: 3px solid var(--accent);
  background: linear-gradient(160deg, rgba(124, 58, 237, .12), rgba(124, 58, 237, .03));
  font-family: var(--font-body); font-size: .9rem; line-height: 1.6; animation: rise .25s var(--ease); }
.ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .72rem; color: var(--muted); }
.ai-badge { font: 700 .64rem var(--font-body); letter-spacing: .06em; padding: 2px 6px; border-radius: 5px;
  background: var(--accent); color: #fff; }
.ai-head time { margin-left: auto; color: var(--faint); }
.ai.refusal, .ai.stopped, .ai.error { border-left-color: var(--faint); }
.ai .note { font-size: .78rem; color: var(--faint); margin-top: 6px; font-style: italic; }
.thinking-dots { display: inline-flex; gap: 4px; padding: 4px 0; color: var(--muted); font-size: .84rem; align-items: center; }
.thinking-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); animation: pulse 1s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .15s; }
.thinking-dots i:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
.stage.focus .ai { font-size: .98rem; }

/* Markdown in Claude-Antworten */
.md > * + * { margin-top: .6em; }
.md h1, .md h2, .md h3 { font: 600 1.02em var(--font-display); color: #fff; }
.md ul, .md ol { padding-left: 1.3em; }
.md li + li { margin-top: .2em; }
.md code { font: .88em var(--font-mono); padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); }
.md pre { font: .82rem/1.55 var(--font-mono); padding: 10px 12px; border-radius: 10px; overflow-x: auto;
  background: #0a0a16; border: 1px solid var(--line-soft); }
.md pre code { padding: 0; background: none; font-size: inherit; }
.md blockquote { border-left: 3px solid var(--line); padding-left: 10px; color: var(--muted); }
.md a { color: var(--mint); }
.md strong { color: #fff; }

/* ── Eingabe: Modell-Chip, Stopp, Sperre ───────────────────────────── */

.model-chip { appearance: none; border: 1px solid var(--line); background-color: rgba(124, 58, 237, .14); color: var(--accent-light);
  font: 600 .78rem var(--font-body); padding: 7px 26px 7px 12px; border-radius: 100px; cursor: pointer; align-self: center;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 52%, calc(100% - 9px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
.model-chip option { background: var(--mid); color: var(--text); }
.send .i-stop { display: none; }
.send.stop { background: var(--warm-white); color: var(--dark); }
.send.stop .i-send { display: none; }
.send.stop .i-stop { display: block; width: 14px; height: 14px; }
.composer.locked .composer-box { display: none; }
.composer.locked .locked-note { display: block !important; }
.locked-note { text-align: center; color: var(--accent-light); font-weight: 500; padding: 12px; }
.hint .ai-badge { margin-right: 4px; }

/* ── Präsentation ──────────────────────────────────────────────────── */

.present-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px;
  background: linear-gradient(90deg, rgba(124, 58, 237, .35), rgba(7, 201, 151, .22)); color: #fff; font-weight: 600; font-size: .92rem; }
.present-banner::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #F87171; animation: pulse 1.2s infinite; }
.app.presenting .views { opacity: .45; pointer-events: none; }
.app.presenting .stage.focus .tile { width: min(1100px, 100%); }
.app.presenting .tile-btn { visibility: hidden; }
.app.presenting .tile-name { pointer-events: none; }

.closed-view { display: grid; place-items: center; padding: 24px; }
.closed-view .card { padding: 28px; display: grid; gap: 12px; max-width: 420px; text-align: center; }
.closed-view h2 { font: 600 1.3rem var(--font-display); }

/* ── Panel ─────────────────────────────────────────────────────────── */

.badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 100px;
  background: #F87171; color: #fff; font-size: .7rem; font-weight: 700; margin-left: 4px; }
.panel { position: absolute; z-index: 40; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
  display: flex; flex-direction: column; background: #111124; border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .8); animation: slide-in .25s var(--ease); }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.panel-head h2 { font: 600 1.15rem var(--font-display); }
.panel-tabs { margin: 0 18px 12px; }
.panel-body { flex: 1; overflow-y: auto; padding: 0 18px 24px; }
/* minmax(0, 1fr): breite Inhalte (Eingabefelder, Tabellen) dürfen das Panel nicht nach rechts aufdrücken */
.panel-body section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.panel h3 { font: 600 .95rem var(--font-display); }
.panel h3.mt { margin-top: 10px; }
.pcard { padding: 16px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.panel.no-session .needs-session { opacity: .4; pointer-events: none; }
.meta { font-size: .82rem; color: var(--muted); }
.row-form { display: flex; gap: 8px; }
.row-form input { flex: 1; min-width: 0; background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; color: var(--text); }
.row-form input:focus { outline: none; border-color: var(--accent-light); }
.live-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft); }
.seg button { flex: 1; border: none; background: transparent; color: var(--muted); padding: 9px 6px; border-radius: 9px; font-size: .85rem; font-weight: 600; }
.seg button:hover { color: var(--text); }
.seg [aria-checked="true"] { background: var(--accent); color: #fff; }
.present-btn { width: 100%; padding: 15px; font-size: 1rem; }
.present-btn.on { background: #F87171; color: #fff; }
.meter { height: 8px; border-radius: 100px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: var(--mint); border-radius: inherit; transition: width .4s var(--ease); }
.meter span.high { background: #FBBF24; }
.meter span.full { background: #F87171; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: .8rem;
  background: rgba(255, 255, 255, .05); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--mint)); }
.ulist { list-style: none; padding: 0; display: grid; gap: 8px; }
.urow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 12px;
  border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); }
.urow .who { min-width: 0; }
.urow .who strong { font-size: .92rem; }
.urow .who span { display: block; font-size: .76rem; color: var(--faint); }
.urow .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.urow .acts .btn { padding: 6px 10px; font-size: .78rem; }
#user-list .urow { grid-template-columns: 1fr; }
#user-list .urow .acts { justify-content: flex-start; }
.ulist .empty { color: var(--faint); font-size: .85rem; padding: 4px 2px; }
.status-tag { font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 100px; margin-left: 6px; text-transform: uppercase; letter-spacing: .04em; }
.status-tag.active { background: rgba(7, 201, 151, .15); color: var(--mint); }
.status-tag.locked { background: rgba(248, 113, 113, .15); color: var(--danger); }
.status-tag.pending { background: rgba(251, 191, 36, .15); color: #FBBF24; }
.status-tag.admin { background: rgba(124, 58, 237, .2); color: var(--accent-light); }
.chat-person { margin-top: 14px; display: grid; gap: 6px; }
.chat-person header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-msg { font-size: .84rem; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.assistant { border-left: 3px solid var(--accent); }
.chat-msg b { font-size: .72rem; color: var(--faint); display: block; margin-bottom: 2px; }

/* ══ Pulldowns im CI-Stil ═══════════════════════════════════════════ */

.dd { position: relative; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  border: 1px solid var(--line); background: rgba(124, 58, 237, .12); color: var(--text);
  padding: 8px 12px 8px 14px; border-radius: 100px; font-size: .88rem; font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
}
.dd-btn:hover:not(:disabled) { border-color: var(--accent-light); background: rgba(124, 58, 237, .2); }
.dd-btn:disabled { opacity: .45; cursor: default; }
.dd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; }
.dd-chev { width: 15px; height: 15px; flex: none; color: var(--accent-light); transition: transform .2s var(--ease); }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd.open .dd-btn { border-color: var(--accent-light); background: rgba(124, 58, 237, .24); }
.dd-user-label { display: inline-flex; align-items: center; gap: 8px; }
.dd-user-label .badge { margin-left: 2px; }

.dd-menu {
  position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; min-width: 260px; max-width: min(340px, calc(100vw - 24px));
  max-height: min(60vh, 460px); overflow-y: auto; padding: 6px;
  background: #17172c; border: 1px solid rgba(124, 58, 237, .35); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  animation: dd-in .16s var(--ease); scrollbar-width: thin; scrollbar-color: rgba(245, 243, 255, .15) transparent;
}
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } }
.dd.up .dd-menu { top: auto; bottom: calc(100% + 10px); animation-name: dd-in-up; }
@keyframes dd-in-up { from { opacity: 0; transform: translateY(4px); } }
.dd.right .dd-menu { left: auto; right: 0; }
.dd-head { padding: 8px 10px 6px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.dd-sep { height: 1px; margin: 6px 4px; background: var(--line-soft); }
.dd-empty { padding: 12px 10px; color: var(--faint); font-size: .86rem; }
.dd-item {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  border: none; background: transparent; color: var(--text); padding: 9px 10px; border-radius: 11px;
  transition: background .15s;
}
.dd-item > * { pointer-events: none; }   /* Klickziel ist immer der Eintrag selbst */
.dd-item:hover, .dd-item:focus-visible { background: rgba(124, 58, 237, .18); outline: none; }
.dd-item[aria-selected="true"] { background: rgba(124, 58, 237, .28); }
.dd-item.danger b { color: var(--danger); }
.dd-item.danger:hover { background: rgba(248, 113, 113, .12); }
.dd-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c, var(--accent-light)); box-shadow: 0 0 8px -1px var(--c, var(--accent-light)); }
.dd-dot.off { opacity: .35; box-shadow: none; }
.dd-main { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.dd-main b { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-main small { font-size: .74rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-meta { font-size: .72rem; color: var(--faint); white-space: nowrap; }
.dd-meta.on { color: var(--mint); }
.dd-meta.busy { color: var(--accent-light); }
.dd-check { color: var(--mint); font-weight: 700; }

/* Person-Pulldown sitzt im Ansichtsumschalter */
.views .dd-person .dd-btn { border: none; background: transparent; color: var(--muted); padding: 7px 12px 7px 16px; font-weight: 500; }
.views .dd-person .dd-btn:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .05); }
.views .dd-person[aria-selected] { background: transparent; padding: 0; }
.views .dd-person[aria-selected="true"] .dd-btn { background: var(--accent); color: #fff; }
.views .dd-person[aria-selected="true"] .dd-chev { color: #fff; }
.views .dd-person .dd-btn { max-width: 210px; }

/* Modell-Pulldown im Eingabefeld */
.composer textarea:placeholder-shown { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dd-model { align-self: center; flex: none; }
.dd-model .dd-btn { padding: 6px 10px 6px 12px; font-size: .78rem; color: var(--accent-light); background: rgba(124, 58, 237, .16); }
.dd-model .dd-menu { min-width: 300px; }

/* ══ Eigene Kachel: deutlich hervorgehoben ══════════════════════════ */

.tile.mine, .tile.mine.typing {
  border: 2px solid var(--accent-light);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .16), 0 22px 50px -22px rgba(124, 58, 237, .85);
}
.tile.mine .tile-head { background: linear-gradient(90deg, rgba(124, 58, 237, .55), rgba(124, 58, 237, .14) 70%); border-bottom-color: rgba(157, 107, 255, .35); }
.tile.mine .tile-name .name { color: #fff; }
.tile-name .you {
  background: var(--mint); color: var(--dark); padding: 2px 9px; border-radius: 100px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tile.mine .draft { border-color: rgba(7, 201, 151, .45); }

/* ══ Geteilte Ansicht: links ich, rechts die andere Person – Eingabe mittig wie überall ══ */

.stage.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stage.split .tile { height: 100%; min-height: 0; }
.stage .tile.mine { order: -1; }
.stage.split .tile:not(.mine) { border-width: 2px; border-color: color-mix(in srgb, var(--c) 45%, transparent); }

@media (max-width: 800px) {
  .stage.split { grid-template-columns: 1fr; }
  .stage.split .tile.mine { display: none; }
}

@media (max-width: 640px) {
  .views .dd-person .dd-btn { max-width: none; width: 100%; justify-content: center; }
  .views .dd-person { flex: 1; min-width: 0; }
  .dd-menu { min-width: min(280px, calc(100vw - 24px)); }
  .dd-model .dd-menu { min-width: min(300px, calc(100vw - 40px)); }
  .tile-head .model-badge { display: none; }
  .panel { width: 100%; }
  .toasts { bottom: 100px; right: 12px; }
  .model-chip { padding: 6px 22px 6px 9px; font-size: .72rem; }
}

/* Panel-Knopf links neben dem Benutzermenü */
.panel-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(7, 201, 151, .45); background: rgba(7, 201, 151, .12); color: var(--mint);
  padding: 8px 14px; border-radius: 100px; font-size: .88rem; font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
}
.panel-btn svg { width: 16px; height: 16px; }
.panel-btn:hover { background: rgba(7, 201, 151, .2); border-color: var(--mint); }
.panel-btn.on { background: var(--mint); color: var(--dark); border-color: var(--mint); }
.panel-btn .badge { margin-left: 0; }

/* Kosten der laufenden Session links neben „Galerie“ – nur für Emma (panel.js) */
.cost-chip {
  padding: 8px 12px; border-radius: 100px; border: 1px solid rgba(7, 201, 151, .3); color: var(--mint);
  font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Auswahl „Wer präsentiert?“ im Panel */
.dd-presenter .dd-btn { width: 100%; justify-content: space-between; padding: 11px 14px; }
.dd-presenter .dd-menu { min-width: 100%; }

/* ══ Phase 1c: Medien, Galerie, Detailansicht, Modelle, Kosten ══════ */

.gallery-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: rgba(124, 58, 237, .12); color: var(--accent-light);
  padding: 8px 14px; border-radius: 100px; font-size: .88rem; font-weight: 600; transition: background .2s, border-color .2s;
}
.gallery-btn svg { width: 16px; height: 16px; }
.gallery-btn:hover, .gallery-btn[aria-expanded="true"] { background: rgba(124, 58, 237, .25); border-color: var(--accent-light); }

/* Modus-Schalter im Eingabefeld */
.dd-mode { align-self: center; flex: none; }
.dd-mode .dd-btn { padding: 6px 10px 6px 12px; font-size: .78rem; background: rgba(7, 201, 151, .12); border-color: rgba(7, 201, 151, .35); color: var(--mint); }
.dd-mode .dd-chev { color: var(--mint); }
.composer[data-mode="image"] .composer-box, .composer[data-mode="video"] .composer-box,
.composer[data-mode="audio"] .composer-box { border-color: rgba(7, 201, 151, .5); }
.quota { color: var(--mint); font-weight: 600; }

/* Medienkarten in der Kachel */
.media-card { padding: 10px 12px; border-radius: var(--radius-sm); border-left: 3px solid var(--mint);
  background: linear-gradient(160deg, rgba(7, 201, 151, .10), rgba(7, 201, 151, .02)); animation: rise .25s var(--ease); }
.media-card.failed, .media-card.nsfw { border-left-color: var(--faint); background: rgba(255, 255, 255, .03); }
.kind-tag { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px;
  border-radius: 5px; background: rgba(7, 201, 151, .18); color: var(--mint); }
.media-prompt { font: .84rem/1.5 var(--font-mono); color: var(--muted); margin: 2px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.media-prompt .prompt { color: var(--c); margin-right: 8px; font-weight: 700; }
.media-body { position: relative; }
.media-body img, .media-body video { display: block; width: 100%; max-height: 360px; object-fit: contain;
  border-radius: 10px; background: #0a0a16; }
.media-body img { cursor: zoom-in; }
.stage.focus .media-body img, .stage.focus .media-body video, .stage.split .media-body img, .stage.split .media-body video { max-height: 520px; }
.media-body audio { width: 100%; }
.media-open { position: absolute; right: 8px; top: 8px; border: none; border-radius: 100px; padding: 4px 10px;
  font-size: .72rem; font-weight: 600; background: rgba(13, 13, 26, .75); color: #fff; backdrop-filter: blur(6px); }
.media-card.audio .media-open, .media-body audio + .media-open { position: static; margin-top: 6px; }

/* Galerie */
/* Die Galerie liegt nur über dem Mittelteil – Kopfleiste und Eingabefeld bleiben sichtbar */
.app > .gallery { grid-row: 3; grid-column: 1; min-height: 0; z-index: 25; display: flex; flex-direction: column;
  background: var(--dark); border-top: 1px solid var(--line-soft); animation: rise .2s var(--ease); }
.gallery-head { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.gallery-head h2 { font: 700 1.3rem var(--font-display); margin-right: auto; }
.gallery-tabs { min-width: min(420px, 100%); }
.gallery-body { flex: 1; overflow-y: auto; padding: 18px 20px 40px; }
.g-group { margin-bottom: 26px; }
.g-group h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font: 600 1rem var(--font-display); }
.g-date { color: #fff; }
.g-session { color: var(--accent-light); font-weight: 500; font-size: .9rem; }
.g-count { margin-left: auto; font-size: .78rem; color: var(--faint); }
.g-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.g-card { position: relative; aspect-ratio: 1; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden;
  padding: 0; background: var(--panel); transition: transform .2s var(--ease), border-color .2s; }
.g-card:hover { transform: translateY(-3px); border-color: var(--accent-light); }
.g-card img, .g-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(13, 13, 26, .7); color: #fff; font-size: 1rem; }
.g-audio { height: 100%; display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; text-align: center;
  background: linear-gradient(160deg, rgba(124, 58, 237, .25), rgba(7, 201, 151, .12)); }
.g-wave { font-size: 2.2rem; color: var(--mint); }
.g-text { font-size: .8rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; text-align: left; display: grid;
  background: linear-gradient(transparent, rgba(13, 13, 26, .92)); font-size: .74rem; line-height: 1.3; }
.g-meta b { color: #fff; font-size: .78rem; }
.g-meta span { color: var(--muted); }
.g-empty { color: var(--faint); text-align: center; padding: 60px 0; }
.gallery-sentinel { height: 1px; }

/* Detailansicht */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
  background: rgba(5, 5, 12, .82); backdrop-filter: blur(6px); animation: rise .15s var(--ease); }
.lightbox-card { width: min(1200px, 100%); max-height: calc(100vh - 40px); display: grid; grid-template-columns: 1fr 340px;
  background: var(--mid); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lightbox-media { display: grid; place-items: center; background: #07070f; min-height: 300px; }
.lightbox-media img, .lightbox-media video { max-width: 100%; max-height: calc(100vh - 40px); object-fit: contain; display: block; }
.lightbox-media audio { width: calc(100% - 40px); }
.lightbox-info { position: relative; padding: 22px 20px; overflow-y: auto; display: grid; gap: 14px; align-content: start; }
.lightbox-x { position: absolute; right: 12px; top: 12px; }
.lightbox-info h2 { font: 600 1.1rem var(--font-display); padding-right: 40px; }
/* Rahmen am Kasten, nicht am gekürzten Text – sonst schaut unten eine halbe Zeile heraus */
.lb-prompt-box { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--accent); }
.lb-prompt { font: .86rem/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.lb-prompt.open { max-height: 45vh; overflow-y: auto; }

/* Lange Prompts: gekürzt mit „Ganzen Prompt anzeigen“ */
.long-text { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.long-text > .clamp:not(.open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 6);
  line-clamp: var(--lines, 6); overflow: hidden; }
.long-text > p { justify-self: stretch; }
.more-btn { border: none; background: none; padding: 2px 0; font-size: .78rem; font-weight: 600; color: var(--accent-light); cursor: pointer; }
.more-btn:hover { color: #fff; text-decoration: underline; }
.lt-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.lt-actions:not(:has(> :not([hidden]))) { display: none; }
.long-text .copy-btn { color: var(--muted); margin-left: auto; }
.lb-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .86rem; }
.lb-facts dt { color: var(--faint); }
.lb-facts dd { margin: 0; overflow-wrap: anywhere; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Panel: Kosten, Limits, Modelle */
.cost-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cost-table th { text-align: right; color: var(--faint); font-weight: 500; font-size: .76rem; padding: 0 4px 6px; }
.cost-table td { padding: 5px 4px; border-top: 1px solid var(--line-soft); text-align: right; font-variant-numeric: tabular-nums; }
.cost-table td:first-child, .cost-table th:first-child { text-align: left; }
.cost-table tr.sum td { font-weight: 700; color: #fff; }
.budget-line { display: grid; gap: 4px; margin-top: 8px; }
.limits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.limits-grid .field input, .model-form .field input, .model-form .field textarea, .model-form select {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--text); font-size: .9rem; width: 100%; min-width: 0; }
.model-form textarea { font: .8rem var(--font-mono); resize: vertical; }
.limits-grid .field, .model-form .field { font-size: .78rem; gap: 4px; }
.field .std { color: #FBBF24; font-weight: 600; margin-left: 0; }
.switch { position: relative; width: 44px; height: 24px; border-radius: 100px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .08); padding: 0; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--faint); transition: transform .2s var(--ease), background .2s; }
.switch.on { background: var(--mint); border-color: var(--mint); }
.switch.on::after { transform: translateX(20px); background: var(--dark); }
.model-row { grid-template-columns: minmax(0, 1fr) auto; }
.model-row .model-edit { grid-column: 1 / -1; }
.model-edit summary, .add-model summary, .project-teams summary, .add-project summary { cursor: pointer; font-size: .8rem; color: var(--accent-light); font-weight: 600; }
.model-form { display: grid; gap: 8px; margin-top: 8px; }
.model-kind h4 { font: 600 .82rem var(--font-display); color: var(--muted); margin: 6px 0; text-transform: uppercase; letter-spacing: .05em; }
.chip.key i { background: var(--danger); }
.chip.key.ok i { background: var(--mint); }
.panel code { font: .78rem var(--font-mono); background: rgba(255, 255, 255, .06); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.panel-body { overflow-x: hidden; }
.urow .who .status-tag { display: inline-block; }
.model-row .who { overflow-wrap: anywhere; }

@media (max-width: 800px) {
  .lightbox-card { grid-template-columns: 1fr; overflow-y: auto; }
  .lightbox-media img, .lightbox-media video { max-height: 55vh; }
  .gallery-btn, .panel-btn { padding: 8px 10px; font-size: 0; gap: 0; }
  .gallery-btn svg, .panel-btn svg { width: 18px; height: 18px; }
  .panel-btn .badge { font-size: .7rem; margin-left: 4px; }
  .g-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ══ Panel › Projekte (Phase 2) ══════════════════════════════════════ */

.project-list { display: grid; gap: 12px; }
.project-card.archived { opacity: .6; }
.project-card h3 { display: flex; align-items: center; flex-wrap: wrap; }
.repo-link { color: var(--accent-light); text-decoration: none; overflow-wrap: anywhere; }
.repo-link:hover { text-decoration: underline; }
.check.ok { color: var(--mint); }
.check.bad { color: var(--danger); }
.team-list { margin-top: 8px; }
.team-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 180px); gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.team-row .who { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row .who strong { color: var(--text); }
.dd-team .dd-btn { width: 100%; justify-content: space-between; padding: 7px 10px; font-size: .82rem; }
.dd-team .dd-menu { min-width: 100%; }
.bereiche { display: grid; gap: 6px; justify-items: start; }
.bereich-rows { display: grid; gap: 6px; width: 100%; }
.bereich-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.bereich-row input { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; color: var(--text); font-size: .88rem; width: 100%; min-width: 0; }
.check-line { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--muted); }
.add-project > summary { font-size: .95rem; }
.add-project[open] > summary { margin-bottom: 10px; }

/* ══ Code-Modus in der Kachel (Phase 2) – Optik wie Claude Code ═════ */

.msgs .code { list-style: none; font: .82rem/1.5 var(--font-mono); animation: rise .2s var(--ease); }
.code-user { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline;
  padding: 8px 10px; border-radius: 10px; background: rgba(124, 58, 237, .12); border-left: 3px solid var(--accent); }
.code-user .code-prompt { color: var(--accent-light); }
.code-user .msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: .9rem; }
.code-user time { font-size: .7rem; color: var(--faint); }
.code-text { padding: 6px 2px; font-family: var(--font-body); }
.code-text .md { font-size: .9rem; }
.code-tool { padding: 2px 4px 2px 6px; }
.tool-row { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.tool-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); transform: translateY(-1px); }
.code-tool[data-status="run"] .tool-dot { background: var(--accent-light); animation: pulse 1s ease-in-out infinite; }
.code-tool[data-status="err"] .tool-dot { background: var(--danger); }
.tool-name { color: var(--text); font-weight: 700; flex: none; }
.tool-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tool-stat { flex: none; margin-left: auto; font-size: .76rem; }
.tool-stat .add, .tool-pre .add { color: var(--mint); }
.tool-stat .del, .tool-pre .del { color: #F87171; }
.tool-more { margin: 2px 0 2px 16px; }
.tool-more summary { cursor: pointer; font-size: .74rem; color: var(--faint); }
.tool-pre { margin: 4px 0; padding: 8px 10px; border-radius: 8px; background: #07070f; border: 1px solid var(--line-soft);
  font: .76rem/1.45 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.tool-out { font: .76rem/1.45 var(--font-mono); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.tool-err { margin: 2px 0 0 16px; color: #F87171; font-size: .76rem; }
.code-thread { display: flex; gap: 6px; padding: 1px 4px 1px 22px; color: var(--accent-light); font-size: .78rem; }
.code-thread .thread-text { color: var(--muted); overflow-wrap: anywhere; }
.code-ask { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(251, 191, 36, .6); background: rgba(251, 191, 36, .08);
  display: grid; gap: 6px; font-family: var(--font-body); }
.code-ask .ask-title { margin: 0; font-weight: 600; font-size: .85rem; color: #FBBF24; }
.code-ask .ask-label { font: .78rem var(--font-mono); overflow-wrap: anywhere; }
.code-ask .ask-done { margin: 0; font-size: .8rem; color: var(--muted); }
.code-note .note { margin: 2px 0; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04);
  font-family: var(--font-body); font-size: .82rem; color: var(--muted); }
.code-note.note-budget .note, .code-note.note-fehler .note { color: #FBBF24; }
.code-push { display: flex; gap: 8px; align-items: baseline; padding: 2px 4px 2px 6px; color: var(--mint); font-size: .78rem; }
.code-push time { color: var(--faint); margin-left: auto; }
.code-thinking { display: flex; gap: 8px; align-items: center; padding: 2px 6px; color: var(--accent-light); font-size: .8rem; }
.code-thinking .spark { display: inline-block; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.area-badge { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.tile-foot { padding: 5px 12px; border-top: 1px solid var(--line-soft); font: .7rem/1.4 var(--font-mono); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.coding .tile-foot { color: var(--accent-light); }
.project-chip { justify-self: start; margin-top: 3px; padding: 1px 9px; border-radius: 100px; border: 1px solid var(--line);
  background: rgba(124, 58, 237, .1); color: var(--accent-light); font-size: .72rem; font-weight: 600; cursor: pointer;
  max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-chip:hover { border-color: var(--accent-light); color: #fff; }
.composer[data-mode="code"] .composer-box { border-color: rgba(157, 107, 255, .6); }


/* Eingabefeld wie bei Claude: Textfeld oben über die ganze Breite, darunter die Leiste mit
   Modus, Modell, Plan und Senden – so bleibt das Textfeld immer breit. */
.composer-text { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding-right: 6px; }
.composer-text textarea { flex: 1; min-width: 0; }
.composer-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.composer-tools .send { margin-left: auto; }
.composer-tools > .dd-mode, .composer-tools > .dd-model { flex: 0 1 auto; min-width: 0; }
.composer-tools .dd-btn { max-width: 100%; min-width: 0; }
.composer-tools .dd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .composer-box { padding: 8px 8px 8px 12px; }
  .composer-box .prompt { display: none; }
}
/* Lange Pfade/Befehle in der Code-Kachel umbrechen statt seitlich zu scrollen */
.msgs .code { min-width: 0; overflow-wrap: anywhere; }
.code-thread .thread-text { min-width: 0; }

/* ══ ▶ Play – integrierter Browser (Phase 2, Etappe 5) ══════════════ */

.app > .play { grid-row: 3; grid-column: 1; min-height: 0; z-index: 24; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 12px; padding: 12px;
  background: var(--dark); border-top: 1px solid var(--line-soft); animation: rise .2s var(--ease); }
.app > .play.side-off { grid-template-columns: minmax(0, 1fr) 0; gap: 0; }
.app > .play.halb:not(.side-off) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* Chat und Spiel halb/halb */
.play.side-off .play-side { display: none; }
.play-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden; background: #07070f; }
.play-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel);
  border-bottom: 1px solid var(--line-soft); min-width: 0; flex-wrap: wrap; }
.play-bar .icon-btn { flex: none; }
.dd-source { flex: 1 1 200px; min-width: 0; }
.dd-source .dd-btn { width: 100%; justify-content: space-between; padding: 7px 12px; font-size: .84rem;
  background: rgba(255, 255, 255, .04); border-radius: 100px; }
.dd-source .dd-menu { min-width: min(340px, calc(100vw - 40px)); }
.play-status { flex: none; border: 1px solid var(--line-soft); background: transparent; color: var(--muted);
  font: .74rem var(--font-mono); padding: 5px 10px; border-radius: 100px; cursor: default; }
.play-status.neu { color: var(--mint); border-color: rgba(7, 201, 151, .5); cursor: pointer; animation: pulse 1.6s ease-in-out 3; }
.play-devices { flex: none; }
.play-devices button { padding: 6px 9px; font-size: .74rem; }
.play-stage { min-height: 0; display: grid; place-items: center; overflow: auto; }
.play-frame-wrap { width: 100%; height: 100%; display: grid; place-items: center; position: relative; }
.play-stumm { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1; cursor: pointer; color: #fff;
  background: rgba(13, 13, 26, .72); border: 1px solid rgba(255, 255, 255, .18); opacity: .7; transition: opacity .15s, background .15s; }
.play-stumm:hover, .play-stumm:focus-visible { opacity: 1; background: rgba(124, 58, 237, .85); outline: none; }
.play-stumm[aria-pressed="true"] { opacity: .95; background: rgba(248, 113, 113, .35); }
.play-frame-wrap.device { width: min(100%, var(--device-w)); border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.play-frame-wrap:fullscreen { background: #000; border: none; width: 100%; }
.play-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; background: #0D0D1A; }
.play-empty { max-width: 460px; padding: 28px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.play-empty h3 { font: 600 1.15rem var(--font-display); }
.play-empty p { color: var(--muted); font-size: .92rem; margin: 0; }
.play-empty .chips { justify-content: center; }
.chip.example { cursor: pointer; border: 1px solid var(--line); background: rgba(124, 58, 237, .1); color: var(--text); }
.chip.example:hover { border-color: var(--accent-light); }
.play-side { min-height: 0; min-width: 0; display: grid; }
.play-side > .tile { height: 100%; min-height: 0; }
/* Play: Fußleiste behält die einzeilige Höhe; mehrzeiliger Text wächst nach oben über das Spiel.
   Sie liegt dann über dem Spiel, damit Pulldowns und das gewachsene Feld nicht verdeckt werden. */
.app:has(> .play:not([hidden])) > .composer { z-index: 28; }
.app:has(> .play:not([hidden])) > .composer.has-base { height: var(--base-h, auto); }
.app:has(> .play:not([hidden])) > .composer.has-base > form {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: min(860px, calc(100% - 36px));
}
@media (max-width: 640px) {
  .app:has(> .play:not([hidden])) > .composer.has-base > form { bottom: 12px; width: calc(100% - 24px); }
}
.play-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-left: 6px;
  vertical-align: middle; animation: pulse 1.4s ease-in-out infinite; }
.play-try { margin-left: 6px; border: 1px solid rgba(7, 201, 151, .45); background: rgba(7, 201, 151, .1); color: var(--mint);
  border-radius: 100px; padding: 1px 9px; font: 600 .74rem var(--font-body); cursor: pointer; }
.play-try:hover { background: rgba(7, 201, 151, .2); }
.tile-foot { display: flex; align-items: center; gap: 8px; }
.tile-foot .foot-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-play { flex: none; margin-left: auto; border: none; background: none; color: var(--mint); font: 700 .72rem var(--font-body);
  cursor: pointer; padding: 0 2px; }
.foot-play:hover { text-decoration: underline; }
.hint-btn { border: 1px solid var(--line); background: rgba(124, 58, 237, .12); color: var(--accent-light); border-radius: 100px;
  padding: 1px 9px; font: 600 .74rem var(--font-body); cursor: pointer; }
.hint-btn:hover { border-color: var(--accent-light); color: #fff; }
@media (max-width: 900px) {
  .app > .play { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 38%); padding: 8px; gap: 8px; }
  .app > .play.side-off { grid-template-rows: minmax(0, 1fr) 0; }
  .app > .play.halb:not(.side-off) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .play-devices { display: none; }
}
.team-row { grid-template-areas: "who dd" "git git"; }
.team-row .who { grid-area: who; }
.team-row .dd-team { grid-area: dd; }
.team-git { grid-area: git; font: .72rem/1.5 var(--font-mono); color: var(--faint); overflow-wrap: anywhere; }
.team-git code { color: var(--muted); }
.team-link { color: var(--accent-light); text-decoration: none; }
.team-link:hover { text-decoration: underline; }
.team-link.ok { color: var(--mint); }
.team-link.bad { color: var(--danger); }
.team-pr { padding: 2px 8px !important; font-size: .7rem !important; }
.team-base { font-size: .78rem; margin: 6px 0 0; }
.team-merge { background: rgba(7, 201, 151, .14); border-color: rgba(7, 201, 151, .5); color: var(--mint); }
.team-merge:disabled { opacity: .45; cursor: not-allowed; }
.team-row .merge-right { grid-column: 1 / -1; font-size: .74rem; }
.play-merge { flex: none; padding: 5px 12px; font-size: .78rem; background: rgba(7, 201, 151, .14);
  border: 1px solid rgba(7, 201, 151, .5); color: var(--mint); }
.play-merge:hover { background: rgba(7, 201, 151, .24); }

/* Play-Leiste: auf breiten Schirmen einzeilig – Quelle und Stand-Anzeige geben Platz ab */
@media (min-width: 641px) {
  .play-bar { flex-wrap: nowrap; }
  .dd-source { flex: 1 1 150px; }
  .play-status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Rückfragen (dialog.js) – ersetzt window.confirm */
.ask-dialog {
  width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--mid); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(124, 58, 237, .08);
}
.ask-dialog[open] { animation: ask-in .18s var(--ease); }
.ask-dialog::backdrop { background: rgba(8, 6, 20, .62); backdrop-filter: blur(3px); }
.ask-dialog .ask-box { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 22px 22px 18px; }
.ask-icon {
  grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.05rem var(--font-display); color: var(--accent-light); background: rgba(124, 58, 237, .16);
  border: 1px solid rgba(157, 107, 255, .35);
}
.ask-dialog.danger .ask-icon { color: var(--danger); background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .35); }
.ask-title { margin: 6px 0 0; font: 600 1.06rem/1.35 var(--font-display); }
.ask-text { margin: 6px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.ask-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn-danger-solid { background: var(--danger); color: var(--dark); border: 1px solid var(--danger); }
.btn-danger-solid:hover { background: #ff8e8e; }
@keyframes ask-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ask-dialog[open] { animation: none; } }

/* Planmodus (Code): Schalter im Eingabefeld, Plan-Karte in der Kachel */
.plan-toggle { flex: none; align-self: center; padding: 6px 11px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 .78rem var(--font-body); }
.plan-toggle:hover { border-color: var(--accent-light); color: var(--text); }
.plan-toggle[aria-pressed="true"] { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .6); color: #FBBF24; }
.composer[data-plan="on"] .composer-box { border-color: rgba(251, 191, 36, .6); }
.composer[data-plan="on"] .composer-box:focus-within { box-shadow: 0 0 0 4px rgba(251, 191, 36, .14); }
.code-plan { border: 1px solid rgba(251, 191, 36, .45); border-radius: var(--radius-sm); padding: 10px 12px;
  background: rgba(251, 191, 36, .05); }
.code-plan .plan-acts { margin-top: 10px; }
.plan-done { margin-top: 8px; font-size: .78rem; color: #FBBF24; }

/* Checklisten in Markdown (Pläne) */
.md li.task { list-style: none; margin-left: -1.2em; }
.md .task-box { color: var(--muted); }
.md li.task.done { color: var(--muted); }
.md li.task.done .task-box { color: var(--mint); }

/* ▶ Play › 📄 Doku */
.dd-ansicht { flex: none; }
.dd-ansicht .dd-btn { padding: 7px 12px; font-size: .84rem; min-width: 96px; justify-content: space-between; }
.play.doku .play-devices, .play.doku #play-full { display: none; }
.play-doku { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  align-self: stretch; justify-self: stretch; }
.doku-list { min-height: 0; overflow: auto; padding: 10px 8px; border-right: 1px solid var(--line-soft); display: grid; align-content: start; gap: 2px; }
/* Rubriken zum Auf-/Zuklappen, „Pläne“ als Unterpunkt */
.doku-klapp { display: grid; gap: 2px; }
.doku-klapp.rubrik + .doku-klapp.rubrik { margin-top: 6px; }
.doku-klapp-kopf { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: none; background: transparent;
  padding: 6px 6px; border-radius: 8px; cursor: pointer; color: var(--faint); }
.doku-klapp-kopf:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.doku-klapp.rubrik > .doku-klapp-kopf { font: 600 .7rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.doku-klapp.plaene > .doku-klapp-kopf { font: 600 .78rem var(--font-body); color: var(--muted); padding-left: 10px; }
.doku-klapp-kopf .pfeil { display: inline-block; width: 10px; transition: transform .15s var(--ease); font-size: .95rem; line-height: 1; }
.doku-klapp-kopf[aria-expanded="true"] .pfeil { transform: rotate(90deg); }
.doku-klapp-kopf .titel { flex: 1; min-width: 0; }
.doku-klapp-kopf .anzahl { font: 600 .66rem var(--font-body); color: var(--faint); background: rgba(255, 255, 255, .06);
  border-radius: 100px; padding: 1px 7px; letter-spacing: 0; }
.doku-klapp-inhalt { display: grid; gap: 2px; padding-left: 10px; }
.doku-klapp-inhalt[hidden] { display: none; }
.doku-klapp.plaene .doku-item { font-size: .8rem; }
.doku-item { text-align: left; border: none; background: transparent; color: var(--muted); padding: 7px 9px; border-radius: 8px;
  font: .84rem/1.3 var(--font-body); cursor: pointer; overflow-wrap: anywhere; }
.doku-item:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.doku-item[aria-current="true"] { background: rgba(124, 58, 237, .18); color: #fff; }
/* Die Seite scrollt über die ganze Breite (Scrollleiste ganz rechts, CI-Farben); der Text bleibt lesbar schmal */
.doku-text { min-height: 0; overflow: auto; padding: 18px max(24px, calc(100% - 860px)) 28px 24px; font-size: .92rem; line-height: 1.6; }
.doku-text, .doku-list { scrollbar-width: thin; scrollbar-color: rgba(157, 107, 255, .45) transparent; }
.doku-text h1 { font-size: 1.35em; }
.doku-text h2 { font-size: 1.12em; margin-top: 1.2em; }
.doku-text h3 { margin: 0 0 .4em; }
@media (max-width: 640px) {
  .play-doku { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .doku-list { border-right: none; border-bottom: 1px solid var(--line-soft); max-height: 38vh; }
}
/* Tabellen in Markdown (Doku) */
.md-table { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: .9em; }
.md th, .md td { border: 1px solid var(--line-soft); padding: 5px 10px; text-align: left; vertical-align: top; }
.md th { color: #fff; background: rgba(255, 255, 255, .04); }
/* Play-Leiste bei mittlerer Breite: Knöpfe nur mit Symbol, Quelle bleibt lesbar */
.dd-source { min-width: 120px; }
@media (max-width: 1180px) {
  .play-bar .lbl { display: none; }
  .play-status { max-width: 140px; }
  .play-devices { display: none; }       /* Geräte-Breiten erst auf großen Schirmen – Quelle bleibt lesbar */
  .dd-source { min-width: 156px; }
}
@media (max-width: 640px) {
  .plan-toggle .lbl { display: none; }
  .plan-toggle { padding: 6px 9px; }
}

/* Doku bearbeiten (▶ Play › Doku) */
.doku-main { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.doku-main > .doku-text { flex: 1; }
.doku-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 24px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.doku-bar .btn { padding: 5px 12px; font-size: .78rem; }
.doku-pfad { font: .74rem var(--font-mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.doku-wo { font-size: .74rem; color: var(--mint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.doku-luecke { flex: 1; }
.doku-neu { margin-top: 10px; justify-self: start; padding: 5px 10px !important; font-size: .78rem !important; }
.doku-edit { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.doku-src { min-height: 0; resize: none; border: none; outline: none; padding: 16px 18px 24px 24px; background: rgba(255, 255, 255, .02);
  color: var(--text); font: .88rem/1.65 var(--font-mono);
  scrollbar-width: thin; scrollbar-color: rgba(157, 107, 255, .45) transparent; }
.doku-src:focus { background: rgba(124, 58, 237, .05); }
.ask-input { grid-column: 1 / -1; margin-top: 14px; width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--dark); color: var(--text); font: inherit; outline: none; }
.ask-input:focus { border-color: var(--accent-light); }
@media (max-width: 900px) {
  .doku-wo { display: none; }
}

/* Doku leer: kein leerer linker Streifen, sondern eine Karte in der Mitte */
.play-doku.leer { grid-template-columns: minmax(0, 1fr); }
.play-doku.leer .doku-list { display: none; }
.doku-leer { max-width: 460px; margin: 12vh auto 0; text-align: center; display: grid; gap: 10px; justify-items: center; }
.doku-leer h3 { font: 600 1.1rem var(--font-display); color: #fff; }
.doku-leer p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.doku-leer-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }

/* Kachelkopf: bei wenig Platz (Play-Seitenspalte, viele Kacheln) zuerst Nebensachen ausblenden,
   damit der Name lesbar bleibt */
.tile { container-type: inline-size; }
.tile-name { min-width: 60px; }
.tile-head .area-badge, .tile-head .model-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 560px) {
  .tile-head .status.online, .tile-head .status.offline { display: none; }
}
@container (max-width: 460px) {
  .tile-head .model-badge { display: none; }
  .tile-head .tile-btn span { display: none; }
  .tile-head { gap: 8px; }
}
@container (max-width: 340px) {
  .tile-name .you { display: none; }
  .tile-head .status { font-size: .7rem; }
}

/* Panel › Live › „Modelle dieser Werkstatt“ */
.check-grid { display: grid; gap: 4px; margin-top: 4px; }
.pcard h4.mt { margin-top: 10px; font: 600 .76rem var(--font-body); color: var(--muted); }
.code-stats { margin-top: 6px; }

/* ── Medien-IDs (/fotos/B7K3F) und Auswahl im Eingabefeld ───────────── */
.id-chip { font: 600 .7rem/1 var(--font-mono); letter-spacing: .04em; color: var(--accent-light); padding: 4px 7px;
  border: 1px solid rgba(157, 107, 255, .4); border-radius: 7px; background: rgba(124, 58, 237, .12); cursor: copy; }
.id-chip:hover, .id-chip:focus-visible { background: rgba(124, 58, 237, .28); color: #fff; outline: none; }
.g-id { position: absolute; top: 8px; left: 8px; font: 600 .7rem/1 var(--font-mono); letter-spacing: .04em; color: #fff;
  padding: 4px 7px; border-radius: 7px; background: rgba(13, 13, 26, .72); }
.composer form { position: relative; }
.mp { position: absolute; z-index: 70; left: 0; right: 0; bottom: calc(100% + 10px); max-height: min(52vh, 420px);
  display: flex; flex-direction: column; padding: 6px; background: #17172c; border: 1px solid rgba(124, 58, 237, .35);
  border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85); animation: dd-in-up .16s var(--ease); }
.mp-head { display: flex; align-items: center; gap: 12px; padding: 6px 6px 8px 10px; }
.mp-titel { flex: none; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mp-suche { flex: 1; min-width: 0; font: inherit; font-size: .86rem; color: var(--text); padding: 7px 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-soft); border-radius: 10px; outline: none; }
.mp-suche:focus { border-color: var(--accent-light); box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
.mp-suche::placeholder { color: var(--faint); }
@media (max-width: 520px) { .mp-titel { display: none; } }
.mp-list { overflow-y: auto; min-height: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  scrollbar-width: thin; scrollbar-color: rgba(245, 243, 255, .15) transparent; }
.mp-list[data-art="audio"] { grid-template-columns: 1fr; }
.mp-empty { grid-column: 1 / -1; padding: 12px 10px; color: var(--faint); font-size: .86rem; }
.mp-item { position: relative; display: grid; grid-template-rows: auto auto; gap: 6px; padding: 6px; text-align: left;
  border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text); }
.mp-item:hover, .mp-item[aria-selected="true"] { background: rgba(124, 58, 237, .22); border-color: rgba(157, 107, 255, .5); }
.mp-item img, .mp-item video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; display: block; pointer-events: none; }
.mp-item.audio { grid-template-rows: none; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.mp-play { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(13, 13, 26, .7); font-size: .8rem; color: #fff; cursor: pointer;
  transition: background .15s, opacity .15s; }
.mp-play:hover { background: var(--accent); }
.mp-play.an { opacity: .35; }
.mp-item:hover .mp-play.an { opacity: 1; }
.mp-hoeren { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(7, 201, 151, .18);
  color: var(--mint); font-size: .8rem; }
.mp-hoeren:hover { background: rgba(7, 201, 151, .35); }
.mp-text { display: grid; gap: 2px; min-width: 0; font-size: .76rem; pointer-events: none; }
.mp-code { font: 600 .74rem/1.2 var(--font-mono); color: var(--accent-light); }
.mp-prompt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Internet im Chat: Bilder (nur durchgereicht) und Quellen ───────── */
.md-bild { display: inline-grid; gap: 4px; margin: 6px 0; max-width: min(100%, 420px); vertical-align: top; }
.md-bild img { max-width: 100%; max-height: 320px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel); }
.md-bild-quelle { font-size: .7rem; color: var(--faint); }
.quellen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; font-size: .76rem; color: var(--faint); }
.quellen a { color: var(--mint); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Befehle („/“) wie in Claude Code ──────────────────────────────── */
.bf { position: absolute; z-index: 71; left: 0; bottom: calc(100% + 10px); min-width: min(440px, 100%); max-width: 100%;
  max-height: min(50vh, 360px); overflow-y: auto; padding: 6px; background: #17172c; border: 1px solid rgba(124, 58, 237, .35);
  border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85); animation: dd-in-up .14s var(--ease); }
.bf-item { width: 100%; display: grid; grid-template-columns: minmax(84px, auto) 1fr; align-items: baseline; gap: 14px;
  padding: 7px 10px; border: none; border-radius: 9px; background: transparent; color: var(--text); text-align: left; }
.bf-item > * { pointer-events: none; }
.bf-item[aria-selected="true"] { background: rgba(124, 58, 237, .28); }
.bf-name { font: 600 .86rem/1.3 var(--font-mono); color: var(--accent-light); }
.bf-item[aria-selected="true"] .bf-name { color: #fff; }
.bf-text { font-size: .82rem; color: var(--muted); }

/* Gesperrte Einträge in Pulldowns (z. B. wer offline ist) */
.dd-item:disabled { opacity: .45; cursor: default; }
.dd-item:disabled:hover { background: transparent; }

/* ── Stimmen-Galerie (ElevenLabs) ───────────────────────────────────── */
.stimme-chip { flex: none; align-self: center; padding: 6px 11px; border-radius: 100px; cursor: pointer; font: inherit;
  font-size: .82rem; color: var(--text); background: rgba(7, 201, 151, .12); border: 1px solid rgba(7, 201, 151, .45);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stimme-chip:hover { background: rgba(7, 201, 151, .24); }
.sg { position: absolute; z-index: 72; left: 0; right: 0; bottom: calc(100% + 10px); max-height: min(60vh, 480px);
  display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #17172c; border: 1px solid rgba(7, 201, 151, .4);
  border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85); animation: dd-in-up .16s var(--ease); }
.sg-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 0 10px; }
.sg-reiter, .sg-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
.sg-tab, .sg-chip { font: inherit; font-size: .78rem; padding: 5px 11px; border-radius: 100px; cursor: pointer;
  color: var(--muted); background: transparent; border: 1px solid var(--line-soft); }
.sg-tab[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.sg-chip[aria-pressed="true"] { background: rgba(7, 201, 151, .18); border-color: rgba(7, 201, 151, .6); color: var(--text); }
.sg-tab:hover, .sg-chip:hover { color: var(--text); }
.sg-list { overflow-y: auto; min-height: 0; display: grid; gap: 2px; scrollbar-width: thin;
  scrollbar-color: rgba(245, 243, 255, .15) transparent; }
.sg-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; width: 100%;
  text-align: left; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text); cursor: pointer; }
.sg-item:hover, .sg-item[aria-selected="true"] { background: rgba(124, 58, 237, .22); border-color: rgba(157, 107, 255, .5); }
.sg-text { display: grid; gap: 2px; min-width: 0; pointer-events: none; }
.sg-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sg-name b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-tags { font-size: .72rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-beschreibung { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-hoeren.aus { opacity: .3; }
@media (max-width: 520px) { .stimme-chip { max-width: 110px; } }