/* ══════════ Grundlagen ══════════ */

:root {
  --bg:      #1a1816;
  --rail:    #141210;
  --panel:   #1c1a17;
  --panel-2: #211f1c;
  --raised:  #2d2925;
  --sunken:  #16140f;
  --line:    #2b2823;
  --line-2:  #383430;

  --text:    #ece7df;
  --text-2:  #c8c2b8;
  --dim:     #a09a90;
  --mute:    #6f6960;
  --faint:   #4a453e;

  --accent:  #e0a355;
  --accent-2:#f0b96a;
  --green:   #6bbf72;
  --red:     #e0705a;
  --violet:  #cf9bc4;
  --blue:    #7ba7d4;

  --rail-w:  68px;
  --side-w:  244px;
  --files-w: 300px;
  --read:    720px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --ui: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/*
 * Höhe auf dem Telefon.
 *
 * 100% reicht bei iOS nicht: Beim Start als eigene App entstehen dadurch
 * oben und unten Streifen, weil die Seite die Fläche unter Statusleiste
 * und Home-Anzeige nicht ausfüllt. 100dvh meint die tatsächlich sichtbare
 * Höhe und wandert mit, wenn Safari seine Leisten ein- und ausblendet.
 */
/*
 * Die Fläche wird gesetzt, nicht gerechnet.
 *
 * Auf dem iPhone meldet 100dvh in der installierten App eine zu kleine
 * Höhe — unter dem Eingabefeld blieb dadurch ein Streifen von gut zwei
 * Zentimetern leer. Ein fest verankerter Rumpf füllt dagegen immer genau
 * den sichtbaren Bereich, unabhängig davon, was der Browser meldet.
 */
html { height: 100%; }

/*
 * Die Fläche des Seitenrumpfs.
 *
 * Hier stand zwischenzeitlich position:fixed, um die Höhe zu erzwingen.
 * Genau das ist auf iOS die Ursache für den leeren Streifen unten: Safari
 * hält die Fläche der Adresszeile frei, sobald ein fest verankerter Rumpf
 * im Spiel ist — auch in der installierten App, wo es gar keine Adresszeile
 * gibt. Deshalb bleibt der Rumpf im normalen Fluss.
 *
 * 100dvh meint die tatsächlich sichtbare Höhe; wo das unbekannt ist,
 * greift die Zeile darüber.
 */
/*
 * Echte Prozentangabe statt vh/dvh.
 *
 * iOS rechnet 100dvh im App-Betrieb ohne den unteren Systemrand — die
 * Seite ist dann genau um diesen Streifen zu kurz, und darunter zeigt
 * sich der Systemhintergrund. Mit height:100% auf html und body
 * entfällt die Rechnung.
 */
body {
  height: 100%;
  overflow: hidden;
}

body { overflow: hidden; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.dim { color: var(--mute); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); background-clip: padding-box; }

.icon-btn {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--mute); transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--raised); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0; display: inline-block; }
.dot.ok { background: var(--green); }

/* ══════════ Anmeldung ══════════ */

.gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 70% at 50% 0%, #24211c 0%, var(--bg) 62%);
  padding: 32px calc(32px + env(safe-area-inset-left)) calc(32px + var(--safe-b));
}
.gate-inner { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; }
.gate-logo {
  width: 66px; height: 66px; border-radius: 19px; background: var(--accent); color: var(--rail);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(224,163,85,.24);
}
.gate-logo svg { width: 34px; height: 34px; }
.gate h1 { margin: 22px 0 7px; font-size: 27px; font-weight: 700; letter-spacing: -.7px; }
.gate-host { margin: 0 0 46px; font-family: var(--mono); font-size: 12.5px; color: var(--mute); }
.gate-name {
  width: 100%; min-height: 50px; margin: -24px 0 14px; padding: 0 16px; border-radius: 13px;
  background: var(--raised); border: 1px solid var(--line-2); font-size: 16px; text-align: center;
}
.gate-name:focus { border-color: var(--accent); }

.gate-btn {
  width: 100%; min-height: 56px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  background: var(--accent); color: var(--rail); border: 1px solid var(--accent);
  font-size: 16px; font-weight: 600;
  box-shadow: 0 8px 28px rgba(224,163,85,.2);
  transition: all .2s;
}
.gate-btn:hover { background: var(--accent-2); }
.gate-btn svg { width: 21px; height: 21px; }
.gate-btn.waiting { background: var(--raised); color: var(--accent); border-color: var(--accent); box-shadow: none; }
.gate-btn.done { background: rgba(107,191,114,.14); color: var(--green); border-color: var(--green); box-shadow: none; }
.gate-btn.error { background: rgba(224,112,90,.12); color: var(--red); border-color: var(--red); box-shadow: none; }

.gate-hint {
  margin: 16px 0 30px; min-height: 40px;
  font-size: 13px; color: var(--mute); text-align: center; line-height: 1.6; text-wrap: pretty;
}
.gate-facts { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.gate-facts div {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 11px;
  background: rgba(40,37,33,.6); border: 1px solid #2e2b26;
  font-size: 13px; color: var(--dim);
}
.gate-facts svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }

/* ══════════ Aufbau ══════════ */

.app { display: flex; height: 100%; }

/* Projektleiste */
.rail {
  width: var(--rail-w); flex-shrink: 0; background: var(--rail);
  display: flex; flex-direction: column; align-items: center;
  padding: 11px 0 11px; gap: 9px;
  padding-top: calc(11px + var(--safe-t));
  padding-bottom: calc(11px + var(--safe-b));
}
/* Die Bereiche, oben in der Leiste.
   Sie schrumpfen nicht: Lieber rutscht die Projektliste darunter zusammen —
   die scrollt ohnehin — als dass aus den Symbolen Ovale werden. */
.rail-bereiche {
  width: 100%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.rail-bereich {
  /* Positioniert, damit die Zahl der Startseite an IHREM Symbol klebt und
     nicht am nächsten positionierten Vorfahren — bisher war das keiner. */
  position: relative; flex: none;
  width: 42px; height: 42px; min-width: 42px; min-height: 42px;
  border-radius: 13px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  transition: background .16s, color .16s, border-color .16s;
}
.rail-bereich svg { width: 20px; height: 20px; }
.rail-bereich:hover { color: var(--text); border-color: var(--mute); }
.rail-bereich.active { background: var(--accent); border-color: var(--accent); color: var(--rail); }
/* Wer mit Tab hierher kommt, muss sehen, wo er steht. */
.rail-bereich:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail-sep { width: 30px; height: 2px; border-radius: 1px; background: #2e2b26; flex-shrink: 0; }
.rail-list { flex: 1; width: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.rail-list::-webkit-scrollbar { display: none; }

.rail-item {
  position: relative; width: 100%; min-height: 42px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rail-pill {
  position: absolute; left: 0; width: 4px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--text); transition: height .16s;
}
.rail-item.live .rail-pill { height: 9px; }
.rail-item.active .rail-pill { height: 34px; }
.rail-icon {
  /* Ohne feste Grösse staucht die Leiste die Kürzel, sobald mehrere Projekte
     untereinander stehen — aus dem Kreis wird ein Oval. */
  position: relative; flex: none;
  width: 42px; height: 42px; min-width: 42px; min-height: 42px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: -.3px;
  transition: border-radius .16s, background .16s, color .16s;
}
.rail-item:hover .rail-icon { border-radius: 15px; }
.rail-item.active .rail-icon { border-radius: 13px; background: var(--accent); color: var(--rail); border-color: var(--accent); }
.rail-badge {
  position: absolute; bottom: -2px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); border: 2.5px solid var(--rail); color: var(--rail);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
}
.rail-live {
  position: absolute; bottom: -1px; right: -1px;
  width: 12px; height: 12px; aspect-ratio: 1;
  border-radius: 50%; background: var(--green);
  /* Ganzzahliger Rand: 2,5 px werden auf hochauflösenden Bildschirmen oben und
     unten anders gerundet als links und rechts — daraus wird ein Ei. */
  border: 2px solid var(--rail);
  box-sizing: border-box;
}
.rail-add {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--panel-2); border: 1px dashed var(--line-2); color: var(--mute);
  display: flex; align-items: center; justify-content: center;
}
.rail-add:hover { color: var(--accent); border-color: var(--accent); }
.rail-add svg { width: 17px; height: 17px; }

/* Sessions */
.side {
  width: var(--side-w); flex-shrink: 0; background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .18s ease;
}
.side.collapsed { width: 0; border-right: none; }
.side > * { min-width: var(--side-w); }

.side-head {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 9px 0 15px; border-bottom: 1px solid var(--line);
  padding-top: var(--safe-t); height: calc(52px + var(--safe-t));
}
.side-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-search, .files-search {
  display: flex; align-items: center; gap: 8px; margin: 10px 11px 8px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px;
}
.side-search svg, .files-search svg { width: 13px; height: 13px; color: var(--mute); flex-shrink: 0; }
.side-search input, .files-search input { flex: 1; min-width: 0; font-size: 12.5px; }
.side-search input::placeholder, .files-search input::placeholder { color: var(--mute); }
.files-search:focus-within { border-color: var(--accent); }
.files-search:focus-within svg { color: var(--accent); }

.side-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }

.grp { margin-bottom: 6px; }
.grp-head {
  display: flex; align-items: center; gap: 5px; padding: 7px 6px 5px; cursor: pointer; user-select: none;
}
.grp-head svg { width: 9px; height: 9px; color: var(--mute); transition: transform .14s; flex-shrink: 0; }
.grp.open .grp-head svg { transform: rotate(90deg); }
.grp-label { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mute); }
.grp-count { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--faint); }
.grp-body { display: none; flex-direction: column; gap: 1px; }
.grp.open .grp-body { display: flex; }

.sess {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border-radius: 7px; cursor: pointer; min-height: 34px;
}
.sess:hover { background: rgba(255,255,255,.03); }
.sess.active { background: var(--raised); }
.sess-name { flex: 1; font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess.live .sess-name { color: var(--text-2); }
.sess.active .sess-name { color: var(--text); font-weight: 500; }
.sess .dot.live { background: var(--green); box-shadow: 0 0 7px rgba(107,191,114,.55); }
.sess-alert {
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--rail);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}

/* ── Aufräumen: die zwei Zeichen am rechten Rand einer Sitzungszeile ──
 *
 * ABSOLUT GESETZT, und das ist der ganze Punkt. Stünden sie im Fluss, machte
 * ihr Erscheinen die Zeile höher: Ein 20px-Knopf plus 2×7px Polsterung sind
 * 34px, und genau dort steht die Mindesthöhe — jedes Pixel darüber schöbe
 * beim Überfahren die halbe Liste nach unten. Absolut gesetzt können sie an
 * Höhe und Lage der Zeile nichts ändern. Nachgemessen, nicht behauptet:
 * pruefungen/aufraeumen-pruefen.mjs vergleicht Höhe und Titelposition auf
 * das Pixel genau, vor und nach dem Erscheinen.
 *
 * Der Titel bekommt beim Überfahren rechts Luft, damit er früher abbricht
 * statt unter die Zeichen zu laufen. Die Polsterung liegt INNEN
 * (box-sizing: border-box gilt global): Der Kasten bleibt derselbe, nur der
 * Text darin wird kürzer — das verschiebt nichts.
 */
.sess { position: relative; }

.sess-tat {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 1px;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.sess:hover .sess-tat, .sess-tat:focus-within { opacity: 1; pointer-events: auto; }
.sess:hover .sess-name { padding-right: 46px; }

.sess-tat-knopf {
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--mute); cursor: pointer;
}
.sess-tat-knopf svg { width: 13px; height: 13px; }
.sess-tat-knopf:hover { background: var(--raised); color: var(--text-2); }
.sess-tat-knopf.weg:hover { color: var(--red); }
.sess-tat-knopf:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* Auf dem Telefon gibt es kein Überfahren — dort stehen die Zeichen immer da,
 * und der Titel hat dauerhaft Platz für sie. Grösser, weil ein 20px-Ziel mit
 * dem Daumen niemand trifft. */
html[data-layout="narrow"] .sess-tat { opacity: 1; pointer-events: auto; }
html[data-layout="narrow"] .sess-name { padding-right: 72px; }
html[data-layout="narrow"] .sess-tat-knopf { width: 32px; height: 32px; border-radius: 8px; }
html[data-layout="narrow"] .sess-tat-knopf svg { width: 15px; height: 15px; }

.side-new {
  display: flex; align-items: center; gap: 8px; margin: 2px 10px 8px;
  padding: 8px 9px; border-radius: 7px; color: var(--mute); font-size: 13px;
}
.side-new:hover { background: var(--raised); color: var(--text); }
.side-new svg { width: 14px; height: 14px; }

.side-foot {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border-top: 1px solid var(--line); background: var(--panel);
  padding-bottom: calc(9px + var(--safe-b));
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--raised); border: 1px solid var(--line-2); color: var(--dim);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700;
}
.side-foot-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.side-foot-text strong { font-size: 12px; font-weight: 600; }
.conn { font-size: 10px; font-family: var(--mono); }
.conn.ok { color: var(--green); }
.conn.off { color: var(--red); }

/* Chat */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.main-head {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 10px; border-bottom: 1px solid var(--line);
  padding-top: var(--safe-t); height: calc(52px + var(--safe-t));
}
.main-head-title { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.hash { color: var(--faint); font-size: 12px; }
.chat-title { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title[contenteditable="true"] { outline: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px; }
.chat-path { font-family: var(--mono); font-size: 11px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-head-right { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.pill { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.pill.live { color: var(--green); }
.pill.busy { color: var(--accent); }
.pill.idle { color: var(--mute); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.busy::before { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.mode-btn {
  display: flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: 11px; color: var(--dim); font-weight: 500;
}
.mode-btn:hover { border-color: var(--line-2); color: var(--text); }
.mode-btn .dot { background: var(--accent); }
.mode-btn[data-mode="streng"]  .dot { background: var(--red); }
.mode-btn[data-mode="autonom"] .dot { background: var(--green); }
.mode-btn[data-mode="lauf"]    .dot { background: var(--blue); }

.badge {
  position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--accent); color: var(--rail);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; font-style: normal;
}

/* Sanft scrollen, solange man liest — aber nicht beim Wechsel in eine
   Sitzung: Dort würde der Blick sichtbar von ganz oben nach unten fahren,
   durch den halben Verlauf hindurch. `springt` schaltet das kurz ab. */
.chat { flex: 1; overflow-y: auto; padding: 28px 0 12px; scroll-behavior: smooth; }
.chat.springt { scroll-behavior: auto; }
.chat-inner { max-width: var(--read); margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 22px; }
.empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--mute); font-size: 14px; }

.msg-user { display: flex; justify-content: flex-end; }
.msg-user .bubble {
  max-width: 82%; background: var(--raised); border: 1px solid var(--line-2);
  border-radius: 14px 14px 4px 14px; padding: 12px 16px;
  font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.msg-claude { display: flex; flex-direction: column; gap: 12px; }

/* Markdown */
.md { font-size: 15px; line-height: 1.72; word-break: break-word; }
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md p { margin: 0 0 .9em; }
.md h1, .md h2, .md h3, .md h4 { margin: 1.4em 0 .55em; line-height: 1.3; font-weight: 600; letter-spacing: -.2px; }
.md h1 { font-size: 1.4em; } .md h2 { font-size: 1.22em; } .md h3 { font-size: 1.08em; } .md h4 { font-size: 1em; }
.md ul, .md ol { margin: 0 0 .9em; padding-left: 1.35em; }
.md li { margin: .28em 0; }
.md li::marker { color: var(--mute); }
.md blockquote { margin: 0 0 .9em; padding: .1em 0 .1em 1em; border-left: 2px solid var(--line-2); color: var(--dim); }
.md hr { border: none; border-top: 1px solid var(--line); margin: 1.4em 0; }
.md strong { font-weight: 600; color: #fff; }
.md em { font-style: italic; }
.md code {
  font-family: var(--mono); font-size: .87em; background: var(--panel-2);
  padding: 2px 6px; border-radius: 5px; color: var(--accent);
}
.md pre code { background: none; padding: 0; color: inherit; }
.md table { width: 100%; border-collapse: collapse; margin: 0 0 .9em; font-size: .93em; display: block; overflow-x: auto; }
.md th, .md td { padding: 7px 11px; border: 1px solid var(--line); text-align: left; }
.md th { background: var(--panel-2); font-weight: 600; }

/* Code-Blöcke */
.code {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--sunken); margin: 0 0 .9em;
}
.code-head {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.code-lang { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.code-copy {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 6px; background: var(--raised);
  border: 1px solid var(--line-2); font-size: 10.5px; color: var(--dim); font-weight: 500;
}
.code-copy:hover { color: var(--text); }
.code-copy.done { color: var(--green); border-color: var(--green); }
.code-copy svg { width: 11px; height: 11px; }
.code pre { margin: 0; padding: 13px 15px; overflow-x: auto; }
.code code { font-family: var(--mono); font-size: 12.5px; line-height: 1.72; }

.tk-kw  { color: var(--violet); }
.tk-str { color: #9fc48c; }
.tk-num { color: var(--accent); }
.tk-com { color: var(--mute); font-style: italic; }
.tk-fn  { color: var(--blue); }
.tk-typ { color: #d9c07a; }
.tk-key { color: var(--violet); }
.tk-op, .tk-pun { color: var(--dim); }
.dl-add { color: var(--green); display: block; background: rgba(107,191,114,.09); }
.dl-del { color: var(--red);   display: block; background: rgba(224,112,90,.09); }

/* Werkzeug-Aufrufe */
.tool { border: 1px solid var(--line); border-radius: 9px; background: #1e1c19; overflow: hidden; }
.tool.err { border-color: #4d3229; }
.tool.running { border-color: var(--accent); }
.tool-head { display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; user-select: none; }
.tool-head:hover { background: rgba(255,255,255,.02); }
.tool-head > svg.chev { width: 11px; height: 11px; color: var(--mute); transition: transform .14s; flex-shrink: 0; }
.tool.open .tool-head > svg.chev { transform: rotate(90deg); }
.tool-name { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--dim); flex-shrink: 0; }
.tool.err .tool-name { color: var(--red); }
.tool-cmd { font-family: var(--mono); font-size: 11.5px; color: var(--mute); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-time { font-family: var(--mono); font-size: 10.5px; color: var(--mute); flex-shrink: 0; }
.tool-badge {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 9px;
  background: rgba(107,191,114,.16); color: var(--green);
}
.tool.err .tool-badge { background: rgba(224,112,90,.16); color: var(--red); }
.tool.running .tool-badge { background: rgba(224,163,85,.16); color: var(--accent); }
.tool-body { display: none; border-top: 1px solid var(--line); background: var(--sunken); }
.tool.open .tool-body { display: block; }
.tool-body pre {
  margin: 0; padding: 11px 13px 12px 34px; overflow-x: auto;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: var(--dim);
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto;
}

.spin { width: 9px; height: 9px; border: 1.5px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Freigabe */
.perm {
  border: 1px solid #5c4a2e; border-radius: 12px; padding: 15px 17px;
  background: linear-gradient(180deg, #2a2318 0%, #241f18 100%);
  display: flex; flex-direction: column; gap: 13px;
}
.perm.settled { opacity: .6; }
.perm-top { display: flex; align-items: flex-start; gap: 11px; }
.perm-top > svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.perm-body { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.perm-title { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.perm-cmd {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  background: var(--sunken); border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 11px; white-space: pre-wrap; word-break: break-all; line-height: 1.5;
}
.perm-note { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.perm-btns { display: flex; gap: 8px; padding-left: 28px; flex-wrap: wrap; }
.perm-btns button {
  padding: 7px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
}
.perm-btns button:hover { color: var(--text); border-color: var(--line-2); }
.perm-btns .primary { background: var(--accent); border-color: var(--accent); color: var(--rail); }
.perm-btns .primary:hover { background: var(--accent-2); color: var(--rail); }
.perm-result { margin-left: auto; display: flex; align-items: center; font-family: var(--mono); font-size: 11.5px; color: var(--mute); }

.turn-end { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; color: var(--faint); padding: 2px 0; }
.turn-end::before, .turn-end::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Was ein Zug geschrieben hat — offen daneben, nicht im zugeklappten
   Werkzeugkasten versteckt. Wer eine Mail oder ein SQL-Skript erzeugen lässt,
   soll sie danach nicht im Dateibaum suchen müssen. */
.geschrieben {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 0 2px;
}
.geschrieben-titel {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute); margin-right: 2px;
}
.geschrieben-datei {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: inherit; font-size: 12px;
  padding: 4px 10px; border-radius: 8px;
  background: var(--raised); border: 1px solid var(--line-2);
  color: var(--text-2); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.geschrieben-datei:hover { border-color: var(--accent); color: var(--text); }
.geschrieben-datei:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Ausserhalb des Projekts gibt es nichts zu öffnen — der Klick kopiert dann
   nur den Pfad. Das darf man vorher sehen. */
.geschrieben-datei.fremd { border-style: dashed; }
.geschrieben-datei .gd-name { font-weight: 500; }
.geschrieben-datei .gd-wie {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--mute);
}

/* Neue Dateien */

/* Eingabe */
.composer { flex-shrink: 0; padding: 0 24px 18px; padding-bottom: calc(18px + var(--safe-b)); }
.composer-box {
  max-width: var(--read); margin: 0 auto;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 9px;
}
.composer-box:focus-within { border-color: var(--mute); }
.composer textarea {
  width: 100%; resize: none; font-size: 14.5px; line-height: 1.55;
  min-height: 24px; max-height: 220px; overflow-y: auto;
}
.composer textarea::placeholder { color: var(--mute); }
.composer-bar { display: flex; align-items: center; gap: 9px; }
.send-btn {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent); color: var(--rail);
  display: flex; align-items: center; justify-content: center;
}
.send-btn:hover { background: var(--accent-2); }
.send-btn:disabled { background: var(--raised); color: var(--faint); cursor: default; }
.send-btn svg { width: 15px; height: 15px; }
.stop-btn {
  margin-left: auto; padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--line-2); font-size: 12px; color: var(--dim);
}
.stop-btn:hover { color: var(--red); border-color: var(--red); }
.stop-btn + .send-btn { margin-left: 0; }

/* Auswahl von Modell und Aufwand */
.pick {
  display: flex; align-items: center; gap: 5px; padding: 4px 8px;
  border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--dim); font-weight: 500; white-space: nowrap;
}
.pick:hover { border-color: var(--line-2); color: var(--text); }
.pick svg { width: 9px; height: 9px; opacity: .6; }
.pick.busy { opacity: .5; pointer-events: none; }

.menu {
  position: fixed; z-index: 90; min-width: 232px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 11px;
  box-shadow: 0 16px 46px rgba(0,0,0,.55); padding: 5px; overflow: hidden;
}
.menu-label {
  padding: 8px 11px 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--mute);
}
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 8px; cursor: pointer; min-height: 40px;
}
.menu-item:hover { background: var(--raised); }
.menu-item.on { background: var(--raised); }
.menu-item .tick { width: 13px; flex-shrink: 0; color: var(--accent); }
.menu-item .tick svg { width: 13px; height: 13px; }
.menu-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-item-text b { font-size: 13px; font-weight: 500; }
.menu-item.on .menu-item-text b { color: var(--accent); }
.menu-item-text span { font-size: 11px; color: var(--mute); }
.menu-note {
  padding: 8px 11px; margin: 3px; border-radius: 7px;
  background: rgba(224,163,85,.08); font-size: 11px; color: var(--dim); line-height: 1.45;
}

/* Explorer */
.files {
  width: var(--files-w); flex-shrink: 0; background: var(--panel);
  border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden;
}
/* Eingeklappt wie die Seitenspalte — dasselbe Mittel für dieselbe Sache.
   Im Raster steht er von sich aus zu: Dort zählt jeder Pixel Fläche, und wer
   Dateien sucht, ist im Gespräch und nicht im Überblick. */
.files.collapsed { width: 0; border-left: none; }
.files > * { min-width: var(--files-w); }
.files-head {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 9px 0 15px; border-bottom: 1px solid var(--line);
  padding-top: var(--safe-t); height: calc(52px + var(--safe-t));
}
.files-title { font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--dim); }
.files-head .mono { font-size: 10.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-tree { flex: 1; overflow: auto; padding: 2px 6px 10px; }
.files-foot {
  display: flex; align-items: center; gap: 7px; padding: 9px 15px;
  border-top: 1px solid var(--line); font-size: 11px; color: var(--mute);
  padding-bottom: calc(9px + var(--safe-b));
}

.node {
  display: flex; align-items: center; gap: 5px; padding: 5px 7px;
  border-radius: 6px; cursor: pointer; min-height: 28px; white-space: nowrap;
}
.node:hover { background: rgba(255,255,255,.03); }
/* ── Zuletzt erzeugt ───────────────────────────────────────────
   Über dem Baum, weil die Frage «was ist gerade entstanden» häufiger ist
   als «wo liegt Datei X». Zu, solange nichts da ist. */
.zuletzt { border-bottom: 1px solid var(--line); flex-shrink: 0; }
.zuletzt-kopf {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  cursor: pointer; user-select: none;
}
.zuletzt-kopf:hover { background: rgba(255,255,255,.03); }
.zuletzt-kopf svg { width: 9px; height: 9px; color: var(--mute); transition: transform .14s; flex-shrink: 0; }
.zuletzt.open .zuletzt-kopf svg { transform: rotate(90deg); }
.zuletzt-titel { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mute); }
.zuletzt-zahl { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--faint); }
.zuletzt-liste { display: none; flex-direction: column; padding-bottom: 4px; max-height: 30vh; overflow-y: auto; }
.zuletzt.open .zuletzt-liste { display: flex; }
.zl-eintrag {
  display: flex; align-items: baseline; gap: 7px; width: 100%;
  padding: 4px 10px 4px 26px; background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: var(--text);
}
.zl-eintrag:hover { background: rgba(255,255,255,.04); }
.zl-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-wann { margin-left: auto; font-size: 10px; color: var(--faint); flex-shrink: 0; }
.zl-art { font-size: 9.5px; font-weight: 700; letter-spacing: .4px; flex-shrink: 0; }

/* ── Gefalteter Zug (Knapp-Modus) ──────────────────────────────
   Eine Zeile statt zwanzig. Der Inhalt ist einen Klick entfernt, nicht weg. */
.zugfalte { margin: 2px 0 8px; }
.zugfalte-kopf {
  display: flex; align-items: center; gap: 7px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 7px;
  cursor: pointer; user-select: none; color: var(--mute);
}
.zugfalte-kopf:hover { background: rgba(255,255,255,.03); color: var(--text-2); }
.zugfalte-kopf .chev { width: 9px; height: 9px; transition: transform .14s; flex-shrink: 0; }
.zugfalte.offen .zugfalte-kopf .chev { transform: rotate(90deg); }
.zugfalte-wort { font-size: 11.5px; }
.zugfalte-inhalt { display: none; padding-top: 6px; }
.zugfalte.offen .zugfalte-inhalt { display: block; }

/* Der Antwortform-Umschalter: «an» heisst knapp. */
.tool-pill.an { color: var(--accent, #e0a355); border-color: rgba(224,163,85,.4); }
.tool-pill.busy { opacity: .5; pointer-events: none; }

.node.fresh { background: rgba(224,163,85,.07); }
/* Kurzes Aufleuchten, wenn der Baum zu einer Datei geführt hat — ohne das
   landet man an der richtigen Stelle und sieht trotzdem nicht, welche Zeile
   gemeint war. */
.node.gezeigt { background: rgba(224,163,85,.22); box-shadow: inset 2px 0 0 var(--accent, #e0a355); }
@media (prefers-reduced-motion: no-preference) {
  .node.gezeigt { transition: background .25s ease-out; }
}
.node-chev { width: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.node-chev svg { width: 9px; height: 9px; color: var(--dim); transition: transform .12s; }
.node.open > .node-chev svg { transform: rotate(90deg); }
.node-tag {
  width: 30px; flex-shrink: 0; text-align: right;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700; color: var(--mute);
}
.node-name { flex: 1; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.node.dir > .node-name { font-weight: 600; color: var(--text); }
.node.fresh > .node-name { color: var(--accent); }
.node-path { font-family: var(--mono); font-size: 10px; color: var(--mute); margin-left: auto; flex-shrink: 0; }
.node-dl { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; }
.node:hover .node-dl { opacity: .8; }
.node-dl:hover { opacity: 1 !important; background: var(--raised); }
.node-dl svg { width: 11px; height: 11px; color: var(--accent); }
.node-skip { font-size: 10px; color: var(--faint); font-style: italic; }

/* Overlay */
.scrim { position: fixed; inset: 0; background: rgba(10,9,8,.55); z-index: 40; }

.toast {
  position: fixed; bottom: calc(24px + var(--safe-b)); left: 50%; transform: translateX(-50%);
  z-index: 200; padding: 11px 18px; border-radius: 10px;
  background: var(--raised); border: 1px solid var(--line-2);
  font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.45);
  max-width: 90vw; text-align: center;
}
.toast.err { border-color: var(--red); color: var(--red); }

.only-mobile { display: none !important; }

/* ══════════ Mobil ══════════ */


/* ══════════ Protokoll ══════════ */

.logview {
  position: fixed; z-index: 70;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1080px, 92vw); height: min(720px, 86vh);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.log-head {
  height: 50px; flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.log-title { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.log-tabs { display: flex; gap: 3px; }
.log-tabs button {
  padding: 5px 12px; border-radius: 7px; font-size: 12.5px; color: var(--dim);
  border: 1px solid transparent;
}
.log-tabs button:hover { color: var(--text); }
.log-tabs button.active { background: var(--raised); border-color: var(--line-2); color: var(--text); font-weight: 500; }
.log-follow { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mute); cursor: pointer; }
.log-follow input { accent-color: var(--accent); }

.log-filter {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.log-filter svg { width: 13px; height: 13px; color: var(--mute); flex-shrink: 0; }
.log-filter input {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px;
}
.log-filter input:focus { border-color: var(--accent); }
.log-filter select {
  font-size: 12px; color: var(--dim); background: var(--sunken);
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; cursor: pointer;
}
.log-filter .mono { font-size: 10.5px; flex-shrink: 0; }

.log-body { flex: 1; overflow: auto; padding: 6px 0; }
.log-foot { padding: 7px 14px; border-top: 1px solid var(--line); font-size: 10.5px; }

.log-row {
  display: grid; grid-template-columns: 86px 132px 1fr;
  gap: 12px; padding: 5px 14px; align-items: baseline;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  border-left: 2px solid transparent;
}
.log-row:hover { background: rgba(255,255,255,.025); }
.log-row.deny  { border-left-color: var(--red); background: rgba(224,112,90,.05); }
.log-row.allow { border-left-color: var(--green); }
.log-row.wait  { border-left-color: var(--accent); }
.log-row.bad   { border-left-color: var(--red); }

.log-time { color: var(--faint); white-space: nowrap; }
.log-event { color: var(--dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-row.deny .log-event { color: var(--red); }
.log-row.allow .log-event { color: var(--green); }
.log-detail { color: var(--text-2); word-break: break-word; white-space: pre-wrap; }
.log-detail b { color: var(--accent); font-weight: 500; }
.log-detail .k { color: var(--mute); }
.log-empty { padding: 40px; text-align: center; color: var(--mute); font-size: 13px; }


/* ══════════ Datei-Ansicht ══════════ */

.viewer {
  position: fixed; z-index: 75;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1180px, 94vw); height: min(840px, 90vh);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.viewer-head {
  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 11px;
  padding: 0 9px 0 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.viewer-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px; padding: 4px 7px;
  border-radius: 5px; background: var(--raised); color: var(--accent); flex-shrink: 0;
}
.viewer-title { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.viewer-title strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-title .mono { font-size: 10.5px; flex-shrink: 0; }

.viewer-body { flex: 1; overflow: auto; background: var(--sunken); }
.viewer-body.pad { padding: 30px 38px; background: var(--bg); }
.viewer-body.center { display: flex; align-items: center; justify-content: center; padding: 24px; background: #100e0c; }

.viewer-body img, .viewer-body video {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.viewer-body iframe { width: 100%; height: 100%; border: none; background: #fff; }

.vcode { display: flex; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; }
.vcode-nums {
  flex-shrink: 0; padding: 14px 12px 14px 16px; text-align: right;
  color: var(--faint); user-select: none; background: var(--panel);
  border-right: 1px solid var(--line); position: sticky; left: 0;
  /* Die Nummern kommen als «1\n2\n3…» — ohne diese Zeile werden die
     Umbrüche zu Leerzeichen und alle stehen nebeneinander in einer Reihe. */
  white-space: pre;
  line-height: inherit;
}
.vcode-body { padding: 14px 18px; white-space: pre; overflow-x: auto; flex: 1; }
.vcode-body.wrap { white-space: pre-wrap; word-break: break-word; }

.viewer-md { max-width: 780px; margin: 0 auto; }
.viewer-md .md { font-size: 15.5px; }
.viewer-md .md h1 { font-size: 1.85em; margin-top: 0; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
.viewer-md .md h2 { font-size: 1.4em; padding-bottom: .25em; border-bottom: 1px solid var(--line); }
.viewer-md .md img { max-width: 100%; border-radius: 8px; }

.viewer-note { padding: 50px; text-align: center; color: var(--mute); font-size: 13.5px; line-height: 1.7; }
.viewer-note button {
  margin-top: 16px; padding: 10px 18px; border-radius: 9px;
  background: var(--accent); color: var(--rail); font-weight: 600; font-size: 13.5px;
}


/* ══════════ Kontext- und Nutzungsanzeige ══════════ */

.meter { display: flex; align-items: center; gap: 6px; }
.meter i {
  width: 44px; height: 4px; border-radius: 2px; background: var(--line);
  position: relative; overflow: hidden; display: block;
}
.meter i::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: var(--fill, 0%); background: var(--accent); transition: width .4s;
}
.meter.warn i::after { background: #d9a441; }
.meter.hot  i::after { background: var(--red); }
.meter b { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--mute); }
.meter.hot b { color: var(--red); }

.limits { padding: 8px 11px 2px; display: flex; flex-direction: column; gap: 7px; }
.limit-row { display: flex; flex-direction: column; gap: 4px; }
.limit-top { display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; }
.limit-top strong { font-weight: 600; color: var(--dim); }
.limit-top span { margin-left: auto; font-family: var(--mono); color: var(--mute); }
.limit-bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.limit-bar i { display: block; height: 100%; background: var(--green); width: 100%; transition: width .4s; }
.limit-row.warn .limit-bar i { background: var(--accent); }
.limit-row.blocked .limit-bar i { background: var(--red); }
.limit-row.blocked .limit-top strong { color: var(--red); }

/* ══════════ Schlagworte an Sitzungen ══════════ */

.sess-tags {
  padding: 0 9px 7px 23px;
  font-size: 10.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sess-tags span { cursor: pointer; }
.sess-tags span:hover { color: var(--accent); }
.sess-tags i { font-style: normal; opacity: .45; padding: 0 2px; }

/* ══════════ Suche über alles ══════════ */

.finder {
  position: fixed; z-index: 85; left: 50%; top: 64px; transform: translateX(-50%);
  width: min(860px, 94vw); max-height: min(720px, 82vh);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.finder-bar {
  display: flex; align-items: center; gap: 11px; padding: 12px 10px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.finder-bar svg { width: 17px; height: 17px; color: var(--mute); flex-shrink: 0; }
.finder-bar input { flex: 1; font-size: 16px; }
.finder-bar input::placeholder { color: var(--mute); }

.finder-tabs { display: flex; gap: 3px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.finder-tabs button {
  padding: 5px 12px; border-radius: 7px; font-size: 12.5px; color: var(--dim);
  border: 1px solid transparent;
}
.finder-tabs button:hover { color: var(--text); }
.finder-tabs button.active { background: var(--raised); border-color: var(--line-2); color: var(--text); font-weight: 500; }

.finder-body { flex: 1; overflow-y: auto; padding: 6px; }
.find-group { padding: 10px 12px 5px; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mute); }

.find-hit { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.find-hit:hover, .find-hit.sel { background: var(--raised); }
.find-hit-top { display: flex; align-items: baseline; gap: 9px; }
.find-hit-top strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-hit-top .proj {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,.05); color: var(--dim); flex-shrink: 0;
}
.find-hit-top .when { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); flex-shrink: 0; }
.find-hit p { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.find-hit .snippet {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-2);
  background: var(--sunken); border-radius: 6px; padding: 7px 9px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 62px; overflow: hidden;
}
.find-hit .snippet mark { background: rgba(224,163,85,.28); color: var(--accent-2); border-radius: 2px; }
.find-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.find-tags span { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.05); color: var(--mute); }
.find-tags span.on { background: rgba(224,163,85,.16); color: var(--accent); }

.tagcloud { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px; }
.tagcloud button {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 20px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--text-2);
}
.tagcloud button:hover { border-color: var(--accent); color: var(--accent); }
.tagcloud button b { font-family: var(--mono); font-size: 10.5px; color: var(--mute); font-weight: 500; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px; }
.gal-item {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--sunken); cursor: pointer; display: flex; flex-direction: column;
}
.gal-item:hover { border-color: var(--accent); }
.gal-thumb {
  height: 96px; display: flex; align-items: center; justify-content: center;
  background: #100e0c; overflow: hidden;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb span { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--mute); }
.gal-meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.gal-meta strong { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-meta span { font-size: 10px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.find-empty { padding: 44px; text-align: center; color: var(--mute); font-size: 13px; line-height: 1.7; }

/* ══════════ Stillstands-Meldung ══════════ */

.stall {
  position: fixed; z-index: 210; left: 50%; transform: translateX(-50%);
  top: calc(14px + var(--safe-t));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 16px; border-radius: 12px;
  background: linear-gradient(180deg, #3a2f1c 0%, #2e2618 100%);
  border: 1px solid var(--accent);
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  max-width: min(560px, 94vw);
}
.stall > svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; }
.stall-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.stall-text strong { font-size: 13px; font-weight: 600; color: var(--accent); }
.stall-text span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.stall #stall-go {
  padding: 7px 13px; border-radius: 8px; background: var(--accent); color: var(--rail);
  font-size: 12.5px; font-weight: 600; flex-shrink: 0;
}


/* ══════════ Startmaske ══════════ */

.side-new.accent { color: var(--accent); }
.side-new.accent:hover { background: rgba(224,163,85,.1); }

.launcher {
  position: fixed; z-index: 88; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(880px, 94vw); height: min(800px, 90vh);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.lx-head {
  height: 54px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 10px 0 18px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.lx-steps { display: flex; align-items: center; gap: 10px; flex: 1; }
.lx-steps span { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.lx-steps span.on { color: var(--accent); font-weight: 600; }
.lx-steps span.done { color: var(--green); }
.lx-steps i { width: 22px; height: 1px; background: var(--line-2); flex-shrink: 0; }

.lx-body { flex: 1; overflow-y: auto; padding: 26px 30px; }
.lx-foot {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-top: 1px solid var(--line); background: var(--panel-2);
}
.lx-foot .grow { flex: 1; }

.btn {
  padding: 9px 17px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line-2); color: var(--dim); background: transparent;
}
.btn:hover { color: var(--text); border-color: var(--mute); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--rail); }
.btn.primary:hover { background: var(--accent-2); }
.btn:disabled { opacity: .4; cursor: default; }

.lx-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.lx-field {
  width: 100%; background: var(--sunken); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; font-size: 14.5px; line-height: 1.6; resize: vertical; min-height: 44px;
}
.lx-field:focus { border-color: var(--accent); }
.lx-hint { font-size: 12.5px; color: var(--mute); line-height: 1.6; margin-top: 9px; text-wrap: pretty; }

.lx-project { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; flex-wrap: wrap; }
.lx-project button {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--line); font-size: 13px; color: var(--dim); background: var(--panel-2);
}
.lx-project button.on { border-color: var(--accent); color: var(--accent); background: rgba(224,163,85,.08); }
.lx-project button b { font-family: var(--mono); font-size: 10px; opacity: .6; font-weight: 500; }

.lx-working { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 60px 20px; text-align: center; }
.lx-working .spin { width: 26px; height: 26px; border-width: 2.5px; }
.lx-working strong { font-size: 15px; font-weight: 600; }
.lx-working span { font-size: 13px; color: var(--mute); line-height: 1.6; max-width: 420px; }

.lx-q { border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px; margin-bottom: 13px; background: var(--panel-2); }
.lx-q .q { font-size: 14.5px; font-weight: 600; line-height: 1.5; margin-bottom: 7px; }
.lx-q .why { font-size: 12.5px; color: var(--mute); line-height: 1.55; margin-bottom: 11px; }
.lx-q .why b { color: var(--dim); font-weight: 500; }
.lx-q textarea { min-height: 40px; font-size: 14px; }
.lx-q .use-default {
  margin-top: 8px; font-size: 12px; color: var(--accent); cursor: pointer; display: inline-block;
}
.lx-q .use-default:hover { text-decoration: underline; }

.card { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.card > header {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.card > header strong { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }
.card > header .count { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.card .inner { padding: 14px; }
.card ul { margin: 0; padding-left: 20px; }
.card li { font-size: 13.5px; line-height: 1.65; margin: 5px 0; }
.card li::marker { color: var(--mute); }
.card .goal { font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; }

.tool-grant { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px 12px; align-items: center; font-size: 12.5px; }
.tool-grant .tg-tool { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.tool-grant .tg-pat { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); background: var(--sunken); padding: 3px 8px; border-radius: 5px; }
.tool-grant .tg-why { color: var(--mute); font-size: 12px; }
.tool-grant input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }

.limit-inputs { display: flex; gap: 16px; flex-wrap: wrap; }
.limit-inputs label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--mute); }
.limit-inputs input {
  width: 110px; background: var(--sunken); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 10px; font-family: var(--mono); font-size: 13px;
}
.limit-inputs input:focus { border-color: var(--accent); }

.sched-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sched-row select, .sched-row input {
  background: var(--sunken); border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.sched-row select:focus, .sched-row input:focus { border-color: var(--accent); }

/* ══════════ Läufe ══════════ */

.runs {
  position: fixed; z-index: 78; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(980px, 94vw); height: min(760px, 88vh);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.runs-body { flex: 1; overflow-y: auto; padding: 12px; }

.run-card { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 11px; overflow: hidden; background: var(--panel-2); }
.run-top { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.run-state {
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; flex-shrink: 0;
}
.st-running { background: rgba(107,191,114,.15); color: var(--green); }
.st-waiting_quota { background: rgba(224,163,85,.15); color: var(--accent); }
.st-interrupted { background: rgba(224,163,85,.15); color: var(--accent); }
.st-paused { background: rgba(255,255,255,.06); color: var(--dim); }
.st-queued { background: rgba(255,255,255,.06); color: var(--dim); }
.st-done { background: rgba(107,191,114,.1); color: var(--green); }
.st-failed, .st-stopped { background: rgba(224,112,90,.14); color: var(--red); }

.run-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.run-title strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-title span { font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-acts { display: flex; gap: 5px; flex-shrink: 0; }
.run-acts button {
  padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line);
  font-size: 11.5px; color: var(--dim);
}
.run-acts button:hover { color: var(--text); border-color: var(--mute); }
.run-acts button.danger:hover { color: var(--red); border-color: var(--red); }

.run-meta {
  display: flex; gap: 16px; padding: 0 15px 12px; font-family: var(--mono);
  font-size: 11px; color: var(--mute); flex-wrap: wrap;
}
.run-meta b { color: var(--text-2); font-weight: 500; }

.iters { border-top: 1px solid var(--line); background: var(--sunken); padding: 4px 0; }
.iter {
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: 11px;
  padding: 7px 15px; align-items: baseline; font-size: 12.5px;
}
.iter:hover { background: rgba(255,255,255,.02); }
.iter .n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.iter .sum { color: var(--text-2); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iter .fnd { font-family: var(--mono); font-size: 10.5px; color: var(--green); }
.iter .fnd.zero { color: var(--faint); }
.iter .when { font-family: var(--mono); font-size: 10px; color: var(--faint); }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 26px; padding: 0 15px 10px; }
.spark i { flex: 1; background: var(--accent); border-radius: 1px; min-height: 2px; opacity: .8; }
.spark i.zero { background: var(--line-2); }

.plan-card { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 11px; padding: 13px 15px; background: var(--panel-2); }
.plan-top { display: flex; align-items: center; gap: 11px; }
.plan-top strong { font-size: 14px; flex: 1; }
.plan-when { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.plan-off .plan-when { color: var(--faint); }
.plan-sub { font-size: 11.5px; color: var(--mute); margin-top: 5px; font-family: var(--mono); }


/* ══════════ Sprechen ══════════ */

.talk {
  position: fixed; z-index: 92; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 94vw); height: min(760px, 90vh);
  background: radial-gradient(120% 60% at 50% 0%, #24211c 0%, var(--bg) 55%);
  border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  display: flex; flex-direction: column; overflow: hidden;
}
.talk-head {
  height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 10px 0 18px; border-bottom: 1px solid var(--line);
}
.talk-who { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.talk-who strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk-who span { font-size: 11.5px; color: var(--mute); }

.talk-body {
  flex: 1; overflow-y: auto; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px; justify-content: flex-end;
}
.tk-line { display: flex; flex-direction: column; gap: 3px; }
.tk-line .who { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); }
.tk-line .txt { font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.tk-line.me { align-items: flex-end; }
.tk-line.me .txt {
  background: var(--raised); border: 1px solid var(--line-2);
  border-radius: 14px 14px 4px 14px; padding: 9px 14px; max-width: 86%; font-size: 15px;
}
.tk-line.claude .txt { color: var(--text); }
.tk-line.claude.speaking .txt { color: var(--accent); }

.talk-stage {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 18px 20px 8px;
}

.orb { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.orb .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--line-2); opacity: 0; transform: scale(.7);
}
.orb-core {
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--mute);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .25s, color .25s, border-color .25s;
}
.orb-core svg { width: 32px; height: 32px; }

/* Zuhören: Ringe atmen mit der Lautstärke */
.talk[data-phase="listening"] .orb-core { background: var(--raised); color: var(--accent); border-color: var(--accent); }
.talk[data-phase="listening"] .ring { opacity: .5; border-color: var(--accent); animation: pulseRing 2.4s ease-out infinite; }
.talk[data-phase="listening"] .r2 { animation-delay: .8s; }
.talk[data-phase="listening"] .r3 { animation-delay: 1.6s; }
@keyframes pulseRing {
  0%   { transform: scale(.62); opacity: .55; }
  100% { transform: scale(1);   opacity: 0; }
}

/* Denken: langsames Kreisen */
.talk[data-phase="thinking"] .orb-core { background: var(--raised); color: var(--dim); border-color: var(--line-2); }
.talk[data-phase="thinking"] .r1 {
  opacity: .8; border-color: transparent; border-top-color: var(--accent);
  transform: scale(.86); animation: spin 1.1s linear infinite;
}

/* Sprechen: ruhiges Leuchten */
.talk[data-phase="speaking"] .orb-core { background: var(--accent); color: var(--rail); border-color: var(--accent); }
.talk[data-phase="speaking"] .ring { opacity: .35; border-color: var(--accent); animation: pulseRing 1.6s ease-out infinite; }
.talk[data-phase="speaking"] .r2 { animation-delay: .5s; }
.talk[data-phase="speaking"] .r3 { animation-delay: 1s; }

.talk-state { font-size: 14.5px; font-weight: 600; color: var(--text); min-height: 20px; }
.talk[data-phase="listening"] .talk-state { color: var(--accent); }
.talk[data-phase="speaking"]  .talk-state { color: var(--accent); }
.talk-hint { font-size: 12.5px; color: var(--mute); text-align: center; line-height: 1.5; min-height: 34px; padding: 0 20px; text-wrap: pretty; }

.talk-foot {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-top: 1px solid var(--line);
  padding-bottom: calc(13px + var(--safe-b));
}
.talk-foot .grow { flex: 1; }
.talk-foot .mono { font-size: 10.5px; }

.voice-pick { max-height: 340px; overflow-y: auto; }
.voice-pick .menu-item .tick { color: var(--accent); }


/* ══════════ Werkzeuge im Eingabefeld ══════════ */

.composer-bar { flex-wrap: wrap; gap: 6px; }

.tool-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 8px;
  border: 1px solid transparent; color: var(--mute);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.tool-pill:hover { background: var(--raised); color: var(--text); border-color: var(--line); }
.tool-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.tool-pill .chev { width: 9px; height: 9px; opacity: .5; }
.tool-pill:disabled { opacity: .35; cursor: default; }
.tool-pill:disabled:hover { background: none; border-color: transparent; color: var(--mute); }

/* Der Sprechknopf trägt die Farbe — er ist der einzige, der etwas öffnet. */
#btn-voice { color: var(--accent); }
#btn-voice:hover { background: rgba(224,163,85,.12); border-color: rgba(224,163,85,.3); }
#btn-voice.live { background: var(--accent); color: var(--rail); border-color: var(--accent); }

.tool-pill.mode .dot { width: 6px; height: 6px; background: var(--accent); }
.tool-pill.mode[data-mode="streng"]  .dot { background: var(--red); }
.tool-pill.mode[data-mode="autonom"] .dot { background: var(--green); }
.tool-pill.mode[data-mode="lauf"]    .dot { background: var(--blue); }

.pill-sep { width: 1px; height: 16px; background: var(--line); flex-shrink: 0; margin: 0 2px; }
.send-hint { margin-left: auto; font-size: 10.5px; }
.composer-bar .stop-btn { margin-left: 0; }
.composer-bar .send-btn { margin-left: 0; }
.send-hint + .stop-btn, .send-hint + .send-btn { margin-left: 0; }


/* ══════════ Nutzungsfenster im Kopf ══════════ */

.head-limits { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.win {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--mute); white-space: nowrap; cursor: default;
}
.win .dot { width: 5px; height: 5px; background: var(--green); }
.win b { font-weight: 600; color: var(--dim); }
.win span { font-family: var(--mono); font-size: 10.5px; }

.win.blocked .dot { background: var(--red); }
.win.blocked b, .win.blocked span { color: var(--red); }

/* Der Kontextbalken bekommt eine Beschriftung, damit klar ist, was 4% heisst */
.meter::before {
  content: 'Kontext'; font-size: 11px; color: var(--mute); font-weight: 600;
}


/* ══════════ Kopfzeile: Verbrauch ══════════ */

.head-usage { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.gauge { display: flex; align-items: center; gap: 7px; cursor: default; }
.gauge > b {
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--faint);
}
.gauge-bar {
  width: 52px; height: 5px; border-radius: 3px; background: var(--line);
  position: relative; overflow: hidden;
}
.gauge-bar i {
  position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%);
  background: var(--green); border-radius: 3px; transition: width .5s ease;
}
.gauge.warn  .gauge-bar i { background: var(--accent); }
.gauge.hot   .gauge-bar i { background: var(--red); }
.gauge.unknown .gauge-bar i { background: var(--line-2); width: 100%; opacity: .4; }
.gauge > span {
  font-family: var(--mono); font-size: 10.5px; color: var(--mute);
  min-width: 30px;
}
.gauge.hot > span { color: var(--red); }

.head-sep { width: 1px; height: 18px; background: var(--line); flex-shrink: 0; }


/* ══════════ Ordner auswählen ══════════ */

.picker {
  position: fixed; z-index: 94; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, 94vw); height: min(640px, 88vh);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
  display: flex; flex-direction: column; overflow: hidden;
}
.pk-head {
  height: 52px; flex-shrink: 0; display: flex; align-items: center;
  padding: 0 10px 0 18px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.pk-head strong { flex: 1; font-size: 14.5px; font-weight: 600; }

.pk-path {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px;
}
.pk-path button { color: var(--dim); padding: 3px 6px; border-radius: 5px; }
.pk-path button:hover { background: var(--raised); color: var(--accent); }
.pk-path i { color: var(--faint); font-style: normal; }

.pk-body { flex: 1; overflow-y: auto; padding: 6px; }
.pk-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 8px; cursor: pointer; min-height: 40px;
}
.pk-row:hover { background: rgba(255,255,255,.03); }
.pk-row.sel { background: var(--raised); border: 1px solid var(--accent); }
.pk-row.skip { opacity: .4; }
.pk-row svg { width: 16px; height: 16px; color: var(--mute); flex-shrink: 0; }
.pk-row.dir svg { color: var(--accent); }
.pk-row span.n { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row .tag {
  font-size: 9.5px; padding: 2px 6px; border-radius: 4px;
  background: rgba(107,191,114,.14); color: var(--green); flex-shrink: 0;
}
.pk-row .mono { font-size: 10px; color: var(--faint); flex-shrink: 0; }

.pk-foot {
  flex-shrink: 0; display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel-2);
  padding-bottom: calc(12px + var(--safe-b));
}
.pk-foot .grow { flex: 1; }
.pk-foot .mono { font-size: 10.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════ Ziehen und Ablegen ══════════ */

.drop-over { position: relative; }
.drop-over::after {
  content: 'Loslassen zum Hochladen';
  position: absolute; inset: 6px; z-index: 5;
  border: 2px dashed var(--accent); border-radius: 12px;
  background: rgba(224,163,85,.09); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--accent);
  pointer-events: none;
}

/* Über dem Gespräch bedeutet Ablegen etwas anderes als im Dateibaum: die Datei
   wird an die Nachricht gehängt, nicht ins Projekt einsortiert. Deshalb eine
   eigene Beschriftung. `.main` scrollt selbst nicht (das tut `.chat` darin),
   also bleibt das Feld stehen, wo es hingehört. */
.zieh-ueber { position: relative; }
.zieh-ueber::after {
  content: 'Loslassen — kommt an die Nachricht';
  position: absolute; inset: 8px; z-index: 5;
  border: 2px dashed var(--accent); border-radius: 12px;
  background: rgba(224,163,85,.09); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--accent);
  pointer-events: none;
}

.attach-row {
  display: flex; gap: 7px; flex-wrap: wrap; padding: 0 0 9px;
}
.attach {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 5px; border-radius: 9px;
  background: var(--raised); border: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--text-2);
}
.attach img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
.attach .fx {
  width: 30px; height: 30px; border-radius: 5px; background: var(--sunken);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--accent);
}
/* Der Name darf lang sein, die Kachel nicht: abschneiden statt die Zeile sprengen. */
.attach > span:not(.x):not(.attach-groesse) {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-groesse { color: var(--mute); font-variant-numeric: tabular-nums; flex: none; }
.attach .x { color: var(--mute); cursor: pointer; padding: 0 3px; }
.attach .x:hover { color: var(--red); }
.attach.up { opacity: .55; }

/* ══════════════════════════════════════════════════════════════
   Bildschirmbreiten
   ══════════════════════════════════════════════════════════════

   Alle Regeln, die von der Fensterbreite abhängen, stehen bewusst hier
   am Ende und von breit nach schmal sortiert.

   Vorher waren sie über die Datei verteilt — und weil bei gleicher
   Spezifität die spätere Regel gewinnt, hoben nachfolgende Desktop-Regeln
   die Mobilfassung wieder auf. Auf dem Telefon sah alles aus wie am
   Schreibtisch.

   Neue Regeln für schmale Fenster gehören ans Ende dieses Abschnitts,
   nicht mitten in die Datei.
   ────────────────────────────────────────────────────────────── */


/* ── bis 1320 px ── */
@media (max-width: 1320px) { .head-usage .gauge:nth-child(n+3) { display: none; } }


/* ── bis 1240 px ── */
@media (max-width: 1240px) {
  .win span { display: none; }        /* nur noch Punkt und Kürzel */
  .meter::before { display: none; }
}


/* ── bis 1180 px ── */
@media (max-width: 1180px) {
  .files { position: fixed; right: 0; top: 0; bottom: 0; z-index: 50; box-shadow: -14px 0 44px rgba(0,0,0,.5); }
  .files:not(.open) { display: none; }
}


/* ── bis 1100 px ── */
@media (max-width: 1100px) { .gauge > b { display: none; } }


/* ── bis 860 px ── */
@media (max-width: 860px) {
  :root { --side-w: 262px; }
  .only-mobile { display: flex !important; }
  .only-desktop { display: none !important; }

  /*
   * Beide Spalten fahren von links herein.
   *
   * Wichtig: BEIDE stehen bei left:0 und werden über die Verschiebung
   * positioniert. Vorher sass die Sitzungsspalte bei left:68px und wurde
   * nur um ihre eigene Breite verschoben — dadurch blieben rechts 68 Pixel
   * im Bild stehen, sichtbar als schmaler Streifen mit abgeschnittenem Text.
   */
  .rail, .side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    transition: transform .22s ease;
    will-change: transform;
  }
  .rail { transform: translateX(-100%); }
  .side {
    width: var(--side-w);
    transform: translateX(calc(-100% - var(--rail-w)));
    box-shadow: 14px 0 44px rgba(0,0,0,.55);
  }

  /* Offen: Leiste an den Rand, Sitzungen direkt daneben. */
  .app.nav-open .rail { transform: translateX(0); }
  .app.nav-open .side { transform: translateX(var(--rail-w)); }

  /* Die Leiste kostet hier keine Breite — sie fährt von aussen herein. Was
     eng wird, ist die Höhe: fünf Bereiche über der Projektliste, auf einem
     Telefon im Querformat. Also etwas kleiner. */
  .rail-bereiche { gap: 6px; }
  .rail-bereich { width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 12px; }
  .rail-bereich svg { width: 18px; height: 18px; }

  /* Eingeklappt gilt am Telefon nicht — dort ist die Spalte ohnehin verborgen. */
  .side.collapsed { width: var(--side-w); }

  .main { width: 100%; }
  .main-head { padding: 0 6px; gap: 6px; }
  .main-head-title { justify-content: center; flex-direction: column; gap: 1px; align-items: center; }
  .chat-title { font-size: 15px; }
  .main-head-right { gap: 4px; }
  .mode-btn { padding: 4px 7px; }

  .chat { padding: 16px 0 8px; }
  .chat-inner { padding: 0 16px; gap: 18px; }
  .md { font-size: 15.5px; }
  .msg-user .bubble { max-width: 86%; font-size: 15px; border-radius: 16px 16px 5px 16px; }

  .composer { padding: 8px 16px; padding-bottom: calc(10px + var(--safe-b)); border-top: 1px solid var(--line); }
  .composer-box { border-radius: 20px; padding: 8px 8px 8px 16px; flex-direction: row; align-items: flex-end; gap: 8px; }
  .composer textarea { font-size: 16px; padding: 6px 0; }
  .composer-bar { flex-direction: column; gap: 0; }
  .send-btn { width: 40px; height: 40px; border-radius: 50%; }
  .send-btn svg { width: 17px; height: 17px; }

  .new-files { margin: 0 16px 6px; width: calc(100% - 32px); min-height: 44px; }

  .files { width: 100%; left: 0; border-left: none; border-top: 1px solid var(--line-2); }
  .files.open { display: flex; top: auto; height: 78%; border-radius: 22px 22px 0 0; box-shadow: 0 -14px 44px rgba(0,0,0,.5); }
  .files-head { border-radius: 22px 22px 0 0; padding-top: 0; height: 56px; }
  .node { min-height: 42px; padding: 8px 8px; }
  .node-name { font-size: 14px; }
  .node-dl { opacity: .8; width: 40px; height: 40px; }
  .node-dl svg { width: 15px; height: 15px; }

  .perm-btns { padding-left: 0; flex-direction: column; }
  .perm-btns button { min-height: 44px; width: 100%; }
  .perm-btns .row2 { display: flex; gap: 8px; width: 100%; }
  .perm-result { margin: 0; justify-content: center; }
  .tool-head { min-height: 44px; }
  .sess { min-height: 46px; }
  .grp-head { min-height: 34px; }
}
@media (max-width: 860px) {
  .logview { width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none; }
  .log-head { flex-wrap: wrap; height: auto; padding: 10px 8px 10px 14px; padding-top: calc(10px + var(--safe-t)); }
  .log-follow { font-size: 11px; }
  .log-filter { flex-wrap: wrap; }
  .log-filter input { min-width: 100%; }
  .log-row { grid-template-columns: 1fr; gap: 2px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
  .log-time { font-size: 10.5px; }
  .log-foot { padding-bottom: calc(7px + var(--safe-b)); }
}
@media (max-width: 860px) {
  .viewer { width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none; }
  .viewer-head { padding-top: var(--safe-t); height: calc(52px + var(--safe-t)); }
  .viewer-body.pad { padding: 20px 18px calc(20px + var(--safe-b)); }
  .vcode-nums { display: none; }
  .vcode-body { font-size: 12px; padding: 14px; }
}
@media (max-width: 860px) {
  .finder { width: 100vw; max-height: 100%; height: 100%; top: 0; transform: none; left: 0; border-radius: 0; border: none; }
  .finder-bar { padding-top: calc(12px + var(--safe-t)); }
  .finder-bar input { font-size: 16px; }
  .find-hit { padding: 12px; min-height: 54px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .stall { left: 8px; right: 8px; transform: none; max-width: none; }
  .limits { padding: 6px 11px 0; }
}
@media (max-width: 860px) {
  .launcher, .runs { width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none; }
  .lx-head { padding-top: var(--safe-t); height: calc(54px + var(--safe-t)); }
  .lx-steps span { font-size: 11px; }
  .lx-steps i { width: 10px; }
  .lx-body { padding: 18px 16px; }
  .lx-foot { padding-bottom: calc(13px + var(--safe-b)); }
  .runs-body { padding: 10px; }
  .iter { grid-template-columns: 26px 1fr auto; }
  .iter .when { display: none; }
  .btn { min-height: 44px; }
}
@media (max-width: 860px) {
  .talk { width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none; }
  .talk-head { padding-top: var(--safe-t); height: calc(56px + var(--safe-t)); }
  .orb { width: 168px; height: 168px; }
  .orb-core { width: 104px; height: 104px; }
  .orb-core svg { width: 40px; height: 40px; }
  .talk-stage { padding: 24px 20px 10px; }
  .talk-state { font-size: 16px; }
  .btn { min-height: 46px; }
}
@media (max-width: 860px) {
  /* Auf dem Telefon steht die Leiste über dem Eingabefeld, nicht daneben. */
  .composer-box { flex-direction: column; align-items: stretch; padding: 10px 12px; border-radius: 18px; }
  .composer-bar { flex-direction: row; align-items: center; gap: 4px; order: 2; }
  .composer textarea { order: 1; }
  .tool-pill { padding: 7px 8px; min-height: 36px; font-size: 11.5px; }
  .tool-pill .chev { display: none; }
  .send-hint { display: none; }
  .composer-bar .send-btn { margin-left: auto; }
}
@media (max-width: 860px) {
  .head-limits { display: none; }     /* auf dem Telefon zu eng */
  .meter::before { display: none; }
}
@media (max-width: 860px)  { .head-usage { display: none; } }
@media (max-width: 860px) {
  .picker { width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none; }
  .pk-head { padding-top: var(--safe-t); height: calc(52px + var(--safe-t)); }
  .pk-row { min-height: 46px; }
}


/* ══════════════════════════════════════════════════════════════
   Schmale Ansicht — noch einmal, über ein Merkmal am Dokument
   ══════════════════════════════════════════════════════════════

   Dieselben Regeln wie im 860-Pixel-Block oben, aber gebunden an
   html[data-layout="narrow"]. Das Merkmal setzt JavaScript, nachdem es
   die Fensterbreite tatsächlich gemessen hat.

   Warum doppelt: Auf dem Telefon griff die reine Bildschirmregel nicht,
   und Raten half nicht weiter. Die gemessene Variante ist unabhängig
   davon, wie ein Browser die Bildschirmbreite auslegt — und sie lässt
   sich nachsehen: das Wurzelelement trägt data-vw mit der gemessenen Breite.
   ────────────────────────────────────────────────────────────── */

html[data-layout="narrow"] {
  --side-w: 262px;
}

html[data-layout="narrow"] .only-mobile {
  display: flex !important;
}

html[data-layout="narrow"] .only-desktop {
  display: none !important;
}

html[data-layout="narrow"] .rail,
html[data-layout="narrow"] .side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
  transition: transform .22s ease;
  will-change: transform;
}

html[data-layout="narrow"] .rail {
  transform: translateX(-100%);
}

html[data-layout="narrow"] .side {
  width: var(--side-w);
  transform: translateX(calc(-100% - var(--rail-w)));
  box-shadow: 14px 0 44px rgba(0,0,0,.55);
}

html[data-layout="narrow"] .app.nav-open .rail {
  transform: translateX(0);
}

html[data-layout="narrow"] .app.nav-open .side {
  transform: translateX(var(--rail-w));
}

/* Siehe oben: nicht die Breite wird knapp, sondern die Höhe. */
html[data-layout="narrow"] .rail-bereiche { gap: 6px; }
html[data-layout="narrow"] .rail-bereich {
  width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 12px;
}
html[data-layout="narrow"] .rail-bereich svg { width: 18px; height: 18px; }

html[data-layout="narrow"] .side.collapsed {
  width: var(--side-w);
}

html[data-layout="narrow"] .main {
  width: 100%;
}

html[data-layout="narrow"] .main-head {
  padding: 0 6px; gap: 6px;
}

html[data-layout="narrow"] .main-head-title {
  justify-content: center; flex-direction: column; gap: 1px; align-items: center;
}

html[data-layout="narrow"] .chat-title {
  font-size: 15px;
}

html[data-layout="narrow"] .main-head-right {
  gap: 4px;
}

html[data-layout="narrow"] .mode-btn {
  padding: 4px 7px;
}

html[data-layout="narrow"] .chat {
  padding: 16px 0 8px;
}

html[data-layout="narrow"] .chat-inner {
  padding: 0 16px; gap: 18px;
}

html[data-layout="narrow"] .md {
  font-size: 15.5px;
}

html[data-layout="narrow"] .msg-user .bubble {
  max-width: 86%; font-size: 15px; border-radius: 16px 16px 5px 16px;
}

html[data-layout="narrow"] .composer {
  padding: 8px 16px; padding-bottom: calc(10px + var(--safe-b)); border-top: 1px solid var(--line);
}

html[data-layout="narrow"] .composer-box {
  border-radius: 20px; padding: 8px 8px 8px 16px; flex-direction: row; align-items: flex-end; gap: 8px;
}

html[data-layout="narrow"] .composer textarea {
  font-size: 16px; padding: 6px 0;
}

html[data-layout="narrow"] .composer-bar {
  flex-direction: column; gap: 0;
}

html[data-layout="narrow"] .send-btn {
  width: 40px; height: 40px; border-radius: 50%;
}

html[data-layout="narrow"] .send-btn svg {
  width: 17px; height: 17px;
}

html[data-layout="narrow"] .new-files {
  margin: 0 16px 6px; width: calc(100% - 32px); min-height: 44px;
}

html[data-layout="narrow"] .files {
  width: 100%; left: 0; border-left: none; border-top: 1px solid var(--line-2);
}

html[data-layout="narrow"] .files.open {
  display: flex; top: auto; height: 78%; border-radius: 22px 22px 0 0; box-shadow: 0 -14px 44px rgba(0,0,0,.5);
}

html[data-layout="narrow"] .files-head {
  border-radius: 22px 22px 0 0; padding-top: 0; height: 56px;
}

html[data-layout="narrow"] .node {
  min-height: 42px; padding: 8px 8px;
}

html[data-layout="narrow"] .node-name {
  font-size: 14px;
}

html[data-layout="narrow"] .node-dl {
  opacity: .8; width: 40px; height: 40px;
}

html[data-layout="narrow"] .node-dl svg {
  width: 15px; height: 15px;
}

html[data-layout="narrow"] .perm-btns {
  padding-left: 0; flex-direction: column;
}

html[data-layout="narrow"] .perm-btns button {
  min-height: 44px; width: 100%;
}

html[data-layout="narrow"] .perm-btns .row2 {
  display: flex; gap: 8px; width: 100%;
}

html[data-layout="narrow"] .perm-result {
  margin: 0; justify-content: center;
}

html[data-layout="narrow"] .tool-head {
  min-height: 44px;
}

html[data-layout="narrow"] .sess {
  min-height: 46px;
}

html[data-layout="narrow"] .grp-head {
  min-height: 34px;
}

html[data-layout="narrow"] .logview {
  width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none;
}

html[data-layout="narrow"] .log-head {
  flex-wrap: wrap; height: auto; padding: 10px 8px 10px 14px; padding-top: calc(10px + var(--safe-t));
}

html[data-layout="narrow"] .log-follow {
  font-size: 11px;
}

html[data-layout="narrow"] .log-filter {
  flex-wrap: wrap;
}

html[data-layout="narrow"] .log-filter input {
  min-width: 100%;
}

html[data-layout="narrow"] .log-row {
  grid-template-columns: 1fr; gap: 2px; padding: 9px 14px; border-bottom: 1px solid var(--line);
}

html[data-layout="narrow"] .log-time {
  font-size: 10.5px;
}

html[data-layout="narrow"] .log-foot {
  padding-bottom: calc(7px + var(--safe-b));
}

html[data-layout="narrow"] .viewer {
  width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none;
}

html[data-layout="narrow"] .viewer-head {
  padding-top: var(--safe-t); height: calc(52px + var(--safe-t));
}

html[data-layout="narrow"] .viewer-body.pad {
  padding: 20px 18px calc(20px + var(--safe-b));
}

html[data-layout="narrow"] .vcode-nums {
  display: none;
}

html[data-layout="narrow"] .vcode-body {
  font-size: 12px; padding: 14px;
}

html[data-layout="narrow"] .finder {
  width: 100vw; max-height: 100%; height: 100%; top: 0; transform: none; left: 0; border-radius: 0; border: none;
}

html[data-layout="narrow"] .finder-bar {
  padding-top: calc(12px + var(--safe-t));
}

html[data-layout="narrow"] .finder-bar input {
  font-size: 16px;
}

html[data-layout="narrow"] .find-hit {
  padding: 12px; min-height: 54px;
}

html[data-layout="narrow"] .gallery {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

html[data-layout="narrow"] .stall {
  left: 8px; right: 8px; transform: none; max-width: none;
}

html[data-layout="narrow"] .limits {
  padding: 6px 11px 0;
}

html[data-layout="narrow"] .launcher,
html[data-layout="narrow"] .runs {
  width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none;
}

html[data-layout="narrow"] .lx-head {
  padding-top: var(--safe-t); height: calc(54px + var(--safe-t));
}

html[data-layout="narrow"] .lx-steps span {
  font-size: 11px;
}

html[data-layout="narrow"] .lx-steps i {
  width: 10px;
}

html[data-layout="narrow"] .lx-body {
  padding: 18px 16px;
}

html[data-layout="narrow"] .lx-foot {
  padding-bottom: calc(13px + var(--safe-b));
}

html[data-layout="narrow"] .runs-body {
  padding: 10px;
}

html[data-layout="narrow"] .iter {
  grid-template-columns: 26px 1fr auto;
}

html[data-layout="narrow"] .iter .when {
  display: none;
}

html[data-layout="narrow"] .btn {
  min-height: 44px;
}

html[data-layout="narrow"] .talk {
  width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none;
}

html[data-layout="narrow"] .talk-head {
  padding-top: var(--safe-t); height: calc(56px + var(--safe-t));
}

html[data-layout="narrow"] .orb {
  width: 168px; height: 168px;
}

html[data-layout="narrow"] .orb-core {
  width: 104px; height: 104px;
}

html[data-layout="narrow"] .orb-core svg {
  width: 40px; height: 40px;
}

html[data-layout="narrow"] .talk-stage {
  padding: 24px 20px 10px;
}

html[data-layout="narrow"] .talk-state {
  font-size: 16px;
}

html[data-layout="narrow"] .btn {
  min-height: 46px;
}

html[data-layout="narrow"] /* Auf dem Telefon steht die Leiste über dem Eingabefeld,
html[data-layout="narrow"] nicht daneben. */
  .composer-box {
  flex-direction: column; align-items: stretch; padding: 10px 12px; border-radius: 18px;
}

html[data-layout="narrow"] .composer-bar {
  flex-direction: row; align-items: center; gap: 4px; order: 2;
}

html[data-layout="narrow"] .composer textarea {
  order: 1;
}

html[data-layout="narrow"] .tool-pill {
  padding: 7px 8px; min-height: 36px; font-size: 11.5px;
}

html[data-layout="narrow"] .tool-pill .chev {
  display: none;
}

html[data-layout="narrow"] .send-hint {
  display: none;
}

html[data-layout="narrow"] .composer-bar .send-btn {
  margin-left: auto;
}

html[data-layout="narrow"] .head-limits {
  display: none;
}

html[data-layout="narrow"] /* auf dem Telefon zu eng */
  .meter::before {
  display: none;
}

html[data-layout="narrow"] .head-usage {
  display: none;
}

html[data-layout="narrow"] .picker {
  width: 100vw; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; border: none;
}

html[data-layout="narrow"] .pk-head {
  padding-top: var(--safe-t); height: calc(52px + var(--safe-t));
}

html[data-layout="narrow"] .pk-row {
  min-height: 46px;
}


/* ── Kopfzeile: der Titel darf nie über seine Spalte hinauswachsen ── */

/*
 * In einer zentrierten Spalte (align-items: center) bekommt ein Kind seine
 * Inhaltsbreite — ein langer Sitzungstitel wuchs dadurch über den Kopf
 * hinaus und legte sich über die Symbole. min-width:0 erlaubt das
 * Schrumpfen, max-width:100% deckelt es.
 */
.main-head-title { min-width: 0; max-width: 100%; }
.chat-title, .chat-path {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

html[data-layout="narrow"] .main-head { gap: 4px; }
html[data-layout="narrow"] .main-head-title {
  min-width: 0; max-width: 100%; overflow: hidden;
}
html[data-layout="narrow"] .chat-title {
  max-width: 100%; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Zustand steht am Telefon unter dem Titel statt daneben. */
html[data-layout="narrow"] .main-head-right { flex-shrink: 0; gap: 2px; }


/* ══════════════════════════════════════════════════════════════
   Als App auf dem iPhone
   ══════════════════════════════════════════════════════════════ */

/*
 * Der Grund ist die Hintergrundfarbe: Die Fläche unter Statusleiste und
 * Home-Anzeige zeigt, was DAHINTER liegt. Ohne durchgehend gefärbtes
 * Wurzelelement sieht man dort dunkle Streifen.
 */
html { background: var(--bg); }

.app { height: 100%; }

/* Kopf und Fuss reichen unter die Systembereiche und färben sie mit. */
.main-head { background: var(--bg); }
.composer  { background: var(--bg); }

@supports (padding: max(0px)) {
  html[data-layout="narrow"] .main-head {
    padding-top: max(var(--safe-t), 0px);
    height: calc(52px + max(var(--safe-t), 0px));
  }
  html[data-layout="narrow"] .composer {
    /*
     * Kein eigenes Polster mehr oben auf den Systemrand: iOS hält unten
     * bereits 34 Pixel für die Home-Anzeige frei — den Strich, mit dem man
     * zum Startbildschirm wischt. Alles darüber hinaus wirkt nur wie eine
     * Lücke. Ohne gemeldeten Systemrand (Safari mit sichtbarer Leiste)
     * bleiben 8 Pixel als Mindestabstand.
     */
    padding-bottom: max(var(--safe-b), 8px);
  }
  /* Seitliche Ränder im Querformat, damit nichts unter der Rundung klebt. */
  html[data-layout="narrow"] .chat-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  html[data-layout="narrow"] .composer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Als eigene App: kein Textmarkieren an der Bedienoberfläche, kein Halte-Menü. */
@media (display-mode: standalone) {
  body { -webkit-touch-callout: none; }
  .rail, .side, .main-head, .composer-bar, .files-head, .talk-head,
  .tool-pill, .btn, .icon-btn, .sess, .grp-head, .node {
    -webkit-user-select: none; user-select: none;
  }
  /* Text im Gespräch bleibt markierbar — den will man kopieren. */
  .chat, .md, .tool-body, .viewer-body { -webkit-user-select: text; user-select: text; }
}

/*
 * Eingabefelder nie unter 16px: Darunter zoomt iOS beim Antippen ins Feld
 * und die Ansicht bleibt verschoben zurück.
 */
html[data-layout="narrow"] input,
html[data-layout="narrow"] textarea,
html[data-layout="narrow"] select {
  font-size: 16px;
}

/* Ruckelfreies Scrollen in allen Bereichen, die scrollen. */
.chat, .side-list, .files-tree, .runs-body, .lx-body,
.log-body, .finder-body, .viewer-body, .talk-body, .pk-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* ══════════════════════════════════════════════════════════════
   Zielflächen am Telefon
   ══════════════════════════════════════════════════════════════

   30 Pixel sind mit dem Daumen nicht zuverlässig zu treffen. Alles, was
   angetippt wird, bekommt hier mindestens 44 — und im Kopf stehen nur
   noch drei Ziele statt sechs. Der Rest liegt hinter dem Mehr-Knopf.
   ────────────────────────────────────────────────────────────── */

html[data-layout="narrow"] .icon-btn {
  width: 44px; height: 44px; border-radius: 12px;
}
html[data-layout="narrow"] .icon-btn svg { width: 21px; height: 21px; }
html[data-layout="narrow"] .icon-btn:active { background: var(--raised); }

html[data-layout="narrow"] .main-head { padding: 0 4px; gap: 2px; }
html[data-layout="narrow"] .main-head-right { gap: 0; }

/* Der Zähler auf dem Dateisymbol wandert mit der grösseren Fläche mit. */
html[data-layout="narrow"] .badge { top: 6px; right: 6px; }

/* Werkzeuge im Eingabefeld: ebenfalls fingergerecht. */
html[data-layout="narrow"] .tool-pill {
  min-height: 44px; padding: 8px 11px; border-radius: 11px; font-size: 12.5px;
}
html[data-layout="narrow"] .tool-pill svg { width: 17px; height: 17px; }
html[data-layout="narrow"] .tool-pill:active { background: var(--raised); }
html[data-layout="narrow"] .composer-bar { gap: 5px; }
html[data-layout="narrow"] .send-btn { width: 46px; height: 46px; }
html[data-layout="narrow"] .send-btn svg { width: 19px; height: 19px; }

/* Einträge in Listen und Menüs ebenso. */
html[data-layout="narrow"] .menu-item { min-height: 50px; font-size: 15px; }
html[data-layout="narrow"] .menu-item-text b { font-size: 15px; }
html[data-layout="narrow"] .menu { min-width: 250px; border-radius: 14px; }
html[data-layout="narrow"] .code-copy { min-height: 36px; padding: 7px 12px; }
html[data-layout="narrow"] .run-acts button { min-height: 40px; padding: 8px 13px; }
html[data-layout="narrow"] .finder-tabs button,
html[data-layout="narrow"] .log-tabs button,
html[data-layout="narrow"] .runs-tabs button { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }


/* Der Eingabebereich sitzt am unteren Rand und hält Abstand zur Home-Anzeige. */
html[data-layout="narrow"] .main { min-height: 0; }
html[data-layout="narrow"] .chat { min-height: 0; }

/* ── Die App weicht der Tastatur aus ── */

/* Bei offener Tastatur schrumpft die sichtbare Fläche — dvh folgt dem
   von selbst, es braucht keine eigene Rechnung. */

/* Bei offener Tastatur ist kein Platz für Systemabstände unten. */
html[data-keyboard="open"][data-layout="narrow"] .composer {
  padding-bottom: 8px;
}


/* Der Eingabebereich färbt die Zone der Home-Anzeige mit, damit dort kein
   andersfarbiger Streifen entsteht. */
html[data-layout="narrow"] .composer {
  background: var(--bg);
  padding-top: 8px;
}


/* ══════════════════════════════════════════════════════════════
   Eingabebereich am Telefon: fest verankert
   ══════════════════════════════════════════════════════════════

   Im normalen Fluss hing der Eingabebereich davon ab, welche Höhe iOS für
   das Fenster meldet — und die stimmte nicht mit dem überein, was man sieht.
   Ergebnis war ein Streifen von rund neun Zentimetern Restfläche.

   Fest am unteren Rand verankert entfällt die Rechnung: Er sitzt dort, wo
   der sichtbare Bereich endet, egal was gemeldet wird. Die Unterhaltung
   bekommt unten so viel Polster, wie der Bereich hoch ist — gemessen und
   als Wert hinterlegt.
   ────────────────────────────────────────────────────────────── */

/*
 * Der Eingabebereich bleibt im Fluss am Ende der Spalte — fest verankert
 * löste er dasselbe Verhalten aus wie der feste Rumpf.
 */
html[data-layout="narrow"] .composer {
  flex-shrink: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 8px 16px max(env(safe-area-inset-bottom), 8px);
}


/* Der Kopf rückt unter die Statusleiste, statt darunter zu verschwinden. */
html[data-layout="narrow"] .main-head {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(52px + env(safe-area-inset-top, 0px));
  background: var(--bg);
}
html[data-layout="narrow"] .rail,
html[data-layout="narrow"] .side {
  padding-top: max(env(safe-area-inset-top, 0px), 12px);
}


/* Ablaufmeldungen im Gespräch — eigene Zeile, damit die Phasenanzeige
   sie nicht überschreibt. */
.talk-trace {
  font-size: 10.5px; color: var(--faint); text-align: center;
  min-height: 15px; padding: 0 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.talk-trace.bad { color: var(--red); }

/* ── Einmalige Mitteilungen (Gerätetoken) ────────────────────── */

.blatt-hinter {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .5);
  display: grid; place-items: center;
  backdrop-filter: blur(3px);
}
.blatt {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; width: min(520px, 92vw);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.blatt h3 { margin: 0; font-size: 15px; }
.token-anzeige { display: flex; flex-direction: column; gap: 10px; }
.token-anzeige p { margin: 0; font-size: 13px; color: var(--dim); }
.token-anzeige code {
  display: block; padding: 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px;
  word-break: break-all; user-select: all; line-height: 1.5;
}
.token-anzeige .hint { font-size: 12px; color: var(--dim); }

/* ── Befehlsauswahl über «/» ─────────────────────────────────── */

.palette {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 12px; right: 12px;
  max-height: 320px; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
  padding: 5px;
  display: none;
  z-index: 60;
}
.palette.open { display: block; }

.palette-item {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
}
.palette-item:hover,
.palette-item.on { background: var(--hover, rgba(255, 255, 255, .07)); }

.palette-art {
  flex: none;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .07);
  color: var(--dim);
  min-width: 46px;
  text-align: center;
}
.palette-name { font-weight: 500; }
.palette-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Der Verfasser braucht einen Bezugspunkt, damit die Auswahl darüber sitzt. */
.composer { position: relative; }

/* ── Alle Projekte ───────────────────────────────────────────── */

.rail-mehr { color: var(--dim); }
.rail-alle:hover .rail-mehr { color: var(--fg); }
.rail-mehr svg { width: 17px; height: 17px; }

.blatt.projektwahl { padding: 0; width: min(560px, 94vw); gap: 0; }
.projektwahl-suche { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.projektwahl-suche input {
  width: 100%; background: none; border: 0; outline: none;
  color: var(--fg); font-size: 15px; font-family: inherit;
}
.projektwahl-liste { max-height: 58vh; overflow-y: auto; padding: 6px; }
.projektwahl-leer { padding: 22px; text-align: center; color: var(--dim); font-size: 13px; }

.projektwahl-zeile {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
}
.projektwahl-zeile:hover { background: rgba(255, 255, 255, .06); }
.projektwahl-zeile.on { background: rgba(255, 255, 255, .09); }

.projektwahl-kuerzel {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}
.projektwahl-text { min-width: 0; flex: 1; }
.projektwahl-name { font-size: 13px; font-weight: 500; }
.projektwahl-pfad {
  font-size: 11px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left;
}
.projektwahl-zahlen {
  flex: none; display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--dim);
}

/* ── Angemeldete Geräte ──────────────────────────────────────── */

.geraete { display: flex; flex-direction: column; gap: 8px; }
.geraete .hint { margin: 0; font-size: 13px; color: var(--dim); }

.geraet {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
}
.geraet-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.geraet-text strong { font-size: 13px; }
.geraet-text span { font-size: 11px; color: var(--dim); }

/* ── Einstellungsseite ───────────────────────────────────────── */

.einst-hinter { align-items: stretch; }

.einst {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: min(680px, 94vw);
  max-height: min(86vh, 900px);
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.einst-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.einst-kopf h2 { margin: 0; font-size: 17px; }

.einst-koerper { overflow-y: auto; padding: 6px 22px 24px; }

.einst-block { padding: 20px 0; border-bottom: 1px solid var(--line); }
.einst-block:last-child { border-bottom: 0; }
.einst-block h3 {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--dim);
}

.einst-inhalt { display: flex; flex-direction: column; gap: 3px; }
.einst-laedt, .einst-leer { font-size: 13px; color: var(--dim); padding: 6px 0; }
.einst-fehler { font-size: 13px; color: #f08a7a; margin: 0; padding: 6px 0; }

.einst-zeile {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 0;
}
.einst-zeile + .einst-zeile { border-top: 1px solid var(--line); }

.einst-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.einst-zeile-text strong { font-size: 13.5px; font-weight: 500; }
.einst-zeile-text span { font-size: 11.5px; color: var(--dim); line-height: 1.45; }

.einst-zeile-tat { flex: none; display: flex; align-items: center; gap: 9px; }

.einst-liste { display: flex; flex-direction: column; }
.einst-liste .einst-zeile:first-child { border-top: 1px solid var(--line); }

.einst-lampe { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.einst-lampe i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dim); opacity: .5;
}
.einst-lampe.an i { background: #4ec98a; opacity: 1; }
.einst-lampe.an { color: var(--fg); }

.einst-zahl { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

.einst-wahl {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 9px; font-size: 12.5px; font-family: inherit;
  max-width: 190px;
}

.einst-balken {
  width: 92px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .1); overflow: hidden;
}
.einst-balken i { display: block; height: 100%; background: var(--accent, #d97757); }

.einst-hinweis {
  margin: 10px 0 0; font-size: 11.5px; color: var(--dim);
  line-height: 1.5; padding: 9px 11px;
  background: rgba(255, 255, 255, .04); border-radius: 7px;
}

@media (max-width: 700px) {
  .einst { max-height: 100vh; border-radius: 0; width: 100vw; }
  .einst-zeile { flex-direction: column; align-items: flex-start; gap: 8px; }
  .einst-zeile-tat { width: 100%; }
}

/* ── Ziehen und Ablegen im Dateibaum ─────────────────────────── */

.node.ablage-ziel {
  background: rgba(224, 163, 85, .16);
  box-shadow: inset 0 0 0 1px var(--accent);
  border-radius: 6px;
}
/* Der Ordnername tritt hervor, damit klar ist, wo es landet. */
.node.ablage-ziel .node-name { color: var(--text); font-weight: 500; }
.node.ablage-ziel .node-chev { color: var(--accent); }

/* Solange eine Zeile das Ziel ist, tritt die Hervorhebung des ganzen
   Bereichs zurück — sonst leuchten beide und man weiss nicht, was gilt. */
#files.drop-over:has(.node.ablage-ziel) { box-shadow: none; background: none; }

/* ── Statuspunkte: drei Stufen ───────────────────────────────── */

/* Grün heisst «arbeitet gerade», Bernstein «steht bereit», Rot «wartet auf
   dich». Der Unterschied zwischen den ersten beiden war bisher unsichtbar —
   man sah nur, dass ein Prozess lebt, nicht ob er etwas tut. */

.rail-live.arbeitet {
  background: var(--green);
  animation: pochen 1.5s ease-in-out infinite;
}
.rail-live.bereit { background: var(--accent); animation: none; }
.rail-live.aus    { display: none; }

.sess .dot.arbeitet {
  background: var(--green);
  box-shadow: 0 0 7px rgba(107, 191, 114, .55);
  animation: pochen 1.5s ease-in-out infinite;
}
.sess .dot.bereit   { background: var(--accent); box-shadow: 0 0 6px rgba(224, 163, 85, .4); }
.sess .dot.freigabe { background: var(--red);    box-shadow: 0 0 7px rgba(224, 112, 90, .6); }
.sess .dot.aus      { background: var(--faint); box-shadow: none; }

/* Das Pochen ist zurückhaltend — es soll am Rand auffallen, nicht ablenken. */
@keyframes pochen {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-live.arbeitet, .sess .dot.arbeitet { animation: none; }
}

/* ── «Arbeitet gerade» ───────────────────────────────────────── */

/* Zwischen zwei Werkzeugaufrufen können Minuten liegen. Ohne ein Zeichen
   ist ein denkender Prozess von einem fertigen nicht zu unterscheiden. */

/* Eigener Name, nicht bloss «arbeitet»: Diese Klasse stand sonst auch an den
   Statuspunkten, und deren 6 Pixel wuchsen durch das Padding hier auf 13 —
   aus jedem Punkt wurde ein Ei. Ein zu allgemeiner Klassenname reicht, um
   zwei Dinge zu verbinden, die nichts miteinander zu tun haben. */
.arbeit-laeuft {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px 4px;
  color: var(--dim); font-size: 13px;
}

.arbeit-punkte { display: inline-flex; gap: 4px; align-items: center; }
.arbeit-punkte i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: huepfen 1.25s ease-in-out infinite;
}
.arbeit-punkte i:nth-child(2) { animation-delay: .16s; }
.arbeit-punkte i:nth-child(3) { animation-delay: .32s; }

.arbeit-wort {
  font-family: var(--mono); font-size: 11.5px; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Die Uhr am laufenden Zustand: leise, aber da. */
.arbeit-uhr {
  margin-left: .4em;
  opacity: .55;
  font-variant-numeric: tabular-nums;
  font-size: .92em;
}

@keyframes huepfen {
  0%, 70%, 100% { opacity: .3; transform: translateY(0); }
  35%           { opacity: 1;  transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .arbeit-punkte i { animation: none; opacity: .8; }
}

/* Am geöffneten Projekt ist das Kürzel selbst bernsteinfarben. Ein Punkt in
   derselben Farbe verschwände darauf, deshalb rückt er weiter nach aussen —
   dort liegt er auf dem dunklen Grund der Leiste und hebt sich ab. */
.rail-item.active .rail-live {
  bottom: -3px; right: -3px;
  border-width: 3px;
  aspect-ratio: 1;
}
.rail-item.active .rail-live.bereit {
  background: var(--text-2);
}
.rail-item.active .rail-badge { bottom: -4px; right: -5px; }

/* ── Lange eigene Nachrichten falten ─────────────────────────── */

/* Eine eingefügte Tabelle mit zwanzig Zeilen noch einmal in voller Länge zu
   sehen, kostet nur den Überblick — man hat sie ja selbst geschrieben. */

.msg-user { flex-direction: column; align-items: flex-end; gap: 5px; }

.msg-user .bubble.gefaltet {
  max-height: 190px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.blase-mehr {
  background: none; border: 0; padding: 2px 4px;
  font-family: inherit; font-size: 11.5px;
  color: var(--mute); cursor: pointer;
  transition: color .14s;
}
.blase-mehr:hover { color: var(--accent); }

/* ── Werkzeugaufrufe zusammenfassen ──────────────────────────── */

/* Einzeln untereinander nehmen fünf Aufrufe mehr Platz ein als die Antwort,
   um die es geht — und nachgesehen wird selten, was ein Read gelesen hat. */

.werkzeuge {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #1e1c19;
  overflow: hidden;
}
.werkzeuge.hat-fehler { border-color: #4d3229; }
.werkzeuge.laeuft { border-color: var(--accent); }

.werkzeuge-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  cursor: pointer; user-select: none;
}
.werkzeuge-kopf:hover { background: rgba(255, 255, 255, .02); }
.werkzeuge-kopf > svg.chev {
  width: 11px; height: 11px; color: var(--mute);
  transition: transform .14s; flex-shrink: 0;
}
.werkzeuge.offen .werkzeuge-kopf > svg.chev { transform: rotate(90deg); }

.werkzeuge-wort {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.werkzeuge.hat-fehler .werkzeuge-wort { color: var(--red); }

.werkzeuge-zeit {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Zu ist der Regelfall. Die Liste erscheint erst auf Klick. */
.werkzeuge-liste { display: none; padding: 0 8px 8px; }
.werkzeuge.offen .werkzeuge-liste { display: flex; flex-direction: column; gap: 6px; }

/* Innerhalb der Gruppe brauchen die einzelnen Kästen keinen eigenen Rahmen —
   sonst steht Kasten in Kasten in Kasten. */
.werkzeuge-liste .tool { border-color: var(--line); background: var(--sunken); }

/* ── Unteragenten: ihre Schritte gehören in sie hinein ───────── */

.tool.agent { border-color: var(--violet); }
.tool.agent .tool-name { color: var(--violet); }
.tool.agent.running { border-color: var(--accent); }

.tool.agent .tool-body { padding: 0; }

.unter-liste {
  display: flex; flex-direction: column; gap: 5px;
  padding: 4px 10px 10px 22px;
  position: relative;
}
/* Eine Linie am linken Rand: Sie zeigt, dass alles darin zu einem gehört —
   wie die Einrückung im Terminal. */
.unter-liste::before {
  content: ''; position: absolute;
  left: 11px; top: 2px; bottom: 12px; width: 1px;
  background: var(--line-2);
}

.unter-liste > .tool { background: var(--sunken); border-color: var(--line); }
.unter-liste > .tool .tool-head { padding: 7px 11px; }
.unter-liste > .tool .tool-name { font-size: 11px; }

/* Was der Unteragent zwischendurch sagt. */
.unter-wort {
  font-size: 12px; line-height: 1.5; color: var(--dim);
  padding: 3px 2px;
}

/* Im Kopf steht der Fortschritt statt einer Dauer, die erst am Ende feststeht. */
.tool.agent.running .tool-time { color: var(--accent); }

/* ── Wartende Nachrichten ────────────────────────────────────── */

/* Sie erscheinen sofort — man will sehen, dass sie angekommen sind —, aber
   erkennbar noch nicht dran. Ihren Platz im Verlauf bekommen sie erst, wenn
   sie an der Reihe sind. */

.warteschlange {
  display: flex; flex-direction: column; gap: 6px;
  align-self: flex-end;
  max-width: 82%;
}

.wartet {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 14px;
  border: 1px dashed var(--line-2);
  border-radius: 14px 14px 4px 14px;
  background: rgba(255, 255, 255, .015);
}

.wartet-marke {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}
/* Ein ruhiges Pochen: Es soll sagen «gleich», nicht «Alarm». */
.wartet-marke { animation: wartepuls 2.2s ease-in-out infinite; }
@keyframes wartepuls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.wartet-text {
  font-size: 13.5px; line-height: 1.55; color: var(--dim);
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Was nie ausgeführt wurde, weil der Prozess vorher endete. */
.msg-user.nie-ausgefuehrt .bubble {
  border-style: dashed;
  border-color: var(--red);
  opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
  .wartet-marke { animation: none; }
}

/* ── Laufende Unteragenten in der Kopfzeile ──────────────────── */

/* Sie erscheint nur, wenn welche laufen. Eine Leiste, die immer etwas
   anzeigt, sieht man nach zwei Tagen nicht mehr. */

.agenten-leiste {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--dim);
  font-family: inherit; font-size: 11.5px;
  cursor: pointer;
  max-width: 260px;
  transition: border-color .15s, color .15s;
}
.agenten-leiste:hover { border-color: var(--accent); color: var(--text); }
.agenten-leiste.hidden { display: none; }

.agenten-punkt {
  flex: none; width: 6px; height: 6px; aspect-ratio: 1;
  border-radius: 50%; background: var(--green);
  animation: agentenpuls 1.6s ease-in-out infinite;
}
.agenten-leiste.verdaechtig { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); }
.agenten-leiste.verdaechtig .agenten-punkt { background: var(--accent); }

.agenten-wort {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenten-neben {
  font-family: var(--mono); font-size: 10.5px; color: var(--mute);
  white-space: nowrap; flex-shrink: 0;
}

@keyframes agentenpuls { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .agenten-punkt { animation: none; }
}

@media (max-width: 860px) { .agenten-leiste { display: none; } }

/* ── Der Leitstand ───────────────────────────────────────────── */

.leitstand {
  position: fixed; z-index: 75;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1120px, 94vw); max-height: 88vh;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; overflow: hidden;
}
.leitstand.hidden { display: none; }

.leitstand-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.leitstand-titel { font-size: 14px; font-weight: 600; }
.leitstand-kopf .mono { font-size: 11px; }
.leitstand-kopf .icon-btn { margin-left: auto; }

/* Die Bühne: dunkler als der Rest, damit die Figuren stehen. */
.leitstand-buehne {
  background: var(--sunken);
  padding: 16px 24px;
  overflow-x: auto;
  flex: none;
  min-height: 120px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
#leitstand-bild {
  image-rendering: pixelated;
  display: block;
}
.leitstand-leer {
  position: absolute; margin: 0;
  font-size: 13px; color: var(--mute);
}
.leitstand-leer.hidden { display: none; }

.leitstand-liste { overflow-y: auto; padding: 6px; }

.leitstand-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  cursor: pointer; font-size: 12.5px;
}
.leitstand-zeile:hover { background: rgba(255, 255, 255, .04); }

.leitstand-punkt {
  flex: none; width: 7px; height: 7px; aspect-ratio: 1;
  border-radius: 50%; background: var(--faint);
}
.leitstand-zeile.arbeitet .leitstand-punkt { background: var(--green); }
.leitstand-zeile.still .leitstand-punkt { background: var(--dim); }
.leitstand-zeile.vermutlich_fest .leitstand-punkt { background: var(--accent); }
.leitstand-zeile.gescheitert .leitstand-punkt { background: var(--red); }

.leitstand-auftrag {
  flex: 1; min-width: 0; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leitstand-tut {
  flex: none; font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.leitstand-zeile.vermutlich_fest .leitstand-tut { color: var(--accent); }
.leitstand-zeit {
  flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  font-variant-numeric: tabular-nums; min-width: 92px; text-align: right;
}

@media (max-width: 700px) {
  .leitstand { width: 100vw; max-height: 100vh; border-radius: 0; }
  .leitstand-zeit { display: none; }
}

/* ── Die Übersicht als Raster ────────────────────────────────── */

/* Sie liegt im Hauptbereich statt darüber: Eine Startseite ist keine
   Unterbrechung, und man soll sie offen lassen können. */

.uebersicht { flex: 1; overflow-y: auto; padding: 26px 24px 40px; }
.uebersicht.hidden { display: none; }
.chat.hidden, .composer.hidden { display: none; }

.uebersicht-kopf {
  max-width: 1100px; margin: 0 auto 18px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.uebersicht-kopf h2 { margin: 0; font-size: 19px; font-weight: 600; }
.uebersicht-kopf .mono { font-size: 11.5px; }
.uebersicht-kopf .btn { margin-left: auto; font-size: 12px; padding: 5px 12px; }

/* Das Raster. Zeilen und Spalten statt freier Plätze: Ein Baustein belegt
   ganze Einheiten, dann bricht es auf jedem Bildschirm sinnvoll um. */
.raster {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--spalten, 2), 1fr);
  grid-auto-rows: 190px;
  gap: 14px;
}

/* Konnte etwas nicht geladen oder gespeichert werden, steht es über dem
   Raster — ein stiller Fehlschlag sähe aus wie ein gespeicherter Stand. */
.startseite-meldung {
  max-width: 1100px; margin: 0 auto 12px;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px;
  border: 1px solid var(--red); border-radius: 10px;
  background: rgba(224, 112, 90, .08);
  font-size: 12.5px; color: var(--text-2);
}
.startseite-meldung .btn { margin-left: auto; font-size: 12px; padding: 4px 11px; }

.baustein {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-2);
  display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;
}

.baustein-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.baustein-titel { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* Der Griff erscheint erst beim Umordnen — sonst verschiebt man beim Lesen. */
.baustein-griff {
  margin-left: auto; color: var(--faint); cursor: grab;
  font-size: 13px; line-height: 1; letter-spacing: -1px;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.raster.bearbeiten .baustein-griff { opacity: 1; pointer-events: auto; }
.raster.bearbeiten .baustein { border-style: dashed; border-color: var(--line-2); }
.baustein-griff:active { cursor: grabbing; }

.baustein.zieht { opacity: .4; }
.baustein.ziel { border-color: var(--accent); }

.baustein-koerper { flex: 1; overflow-y: auto; padding: 10px; min-height: 0; }

/* ── Der Sitzungs-Baustein: kleine Szenen ───────────────────── */

.szenen-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

/* Ist die Übersicht nicht erreichbar, bleiben die Tiere stehen. Verblasst
   heisst: Das ist der letzte bekannte Stand, nicht der jetzige. */
.szenen-gitter.veraltet { opacity: .45; }

.szenen-leer {
  grid-column: 1 / -1;
  margin: 0; padding: 30px 0;
  text-align: center; font-size: 13px; color: var(--mute);
}

.szene {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px 8px;
  border: 1px solid transparent; border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  cursor: pointer; text-align: left;
  font-family: inherit; color: inherit;
  position: relative;
  transition: background .15s, border-color .15s;
}
.szene:hover { background: rgba(255, 255, 255, .06); border-color: var(--line-2); }

.szene canvas {
  image-rendering: pixelated;
  width: 100%; height: auto;
  /* Die Szene ist breiter als hoch; ohne Deckel wüchse sie in schmalen
     Bausteinen ins Riesenhafte. */
  max-width: 204px;
  align-self: center;
}

.szene-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.szene-text strong {
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.szene-text span { font-family: var(--mono); font-size: 10.5px; color: var(--mute); }

/* Was auf eine Entscheidung wartet, ist das Einzige, was wirklich dringt. */
.szene.freigabe { border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.szene.freigabe .szene-text span { color: var(--red); }
.szene.arbeitet .szene-text span { color: var(--green); }
.szene.ruht { opacity: .65; }

.szene-agenten {
  position: absolute; top: 6px; right: 7px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9.5px; color: var(--dim);
}
.szene-agenten.hidden { display: none; }

@media (max-width: 860px) {
  .raster { grid-template-columns: 1fr; grid-auto-rows: 260px; }
}

/* ── Die Zahl am Symbol der Startseite ──────────────────────── */
/* Der Name stammt vom Logo, an dem sie zuerst hing; die Startseite ist heute
   ein Bereich unter fünf, und die Zahl klebt an ihrem Symbol. */

.rail-logo-zahl {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; border: 2px solid var(--rail);
  background: var(--dim); color: var(--rail);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
}
.rail-logo-zahl.dringend { background: var(--red); }
.rail-logo-zahl.hidden { display: none; }

/* ── Vorgänge ───────────────────────────────────────────────── */
/*
 * Kein neuer Farbkanon: Zustände nehmen die Merkmale der Läufe (.st-*),
 * Karten deren Aufbau (.run-card / .run-top / .run-meta / .run-acts), der
 * Rahmen den der Einstellungen (.blatt-hinter). Neu ist hier nur, was es
 * vorher nicht gab — die Spalten nach Richtung und die Kachel auf der
 * Startseite.
 */

.vorg-hinter { align-items: stretch; }

/* Die Liste füllt den Hauptbereich, wie die Übersicht und die Post — kein
   schwebendes Blatt mit Schatten und runden Ecken mehr. Der einzelne Vorgang
   bleibt eins: er liegt unverändert in `.blatt-hinter`. */
.vorgaengebereich { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.vorgaengebereich.hidden { display: none; }
.vorgaengebereich .vorg {
  background: transparent; border: none; border-radius: 0;
  width: 100%; height: 100%; max-height: none; margin: 0; box-shadow: none;
}

.vorg {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: min(1100px, 95vw);
  max-height: min(88vh, 940px);
  margin: auto;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.vorg-einzeln { width: min(820px, 94vw); z-index: 1; }

.vorg-koerper { flex: 1; overflow-y: auto; padding: 12px 14px 20px; }

.vorg-filter select, .vorg-filter input { font-family: var(--ui); }
.vorg-filter .btn { padding: 6px 14px; font-size: 12.5px; }

.vorg-zahlen {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 2px 2px 12px; font-size: 12px; color: var(--mute);
}
.vorg-dringend { color: var(--red); }
.vorg-klein {
  margin-left: auto; padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--line); font-size: 11.5px; color: var(--dim);
}
.vorg-klein:hover { color: var(--text); border-color: var(--mute); }
.vorg-klein:disabled { opacity: .4; }
/* Der zweite Knopf steht neben dem ersten, nicht am anderen Rand: das
   margin-left:auto oben schiebt nur den ersten der Reihe nach rechts. */
.vorg-klein + .vorg-klein { margin-left: 0; }

/*
 * Der Rückweg in die Datei.
 *
 * Es ist eine Frage, keine Meldung — deshalb ein Blatt mit den betroffenen
 * Zeilen darin und nicht ein Hinweisstreifen mit Zahlen. Wer schreibt, soll
 * vorher gesehen haben, was er schreibt.
 */
.vorg-rueckweg {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px; margin-bottom: 14px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2);
}
.vorg-rueckweg-kopf { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.vorg-rueckweg-kopf .vorg-klein { margin-left: auto; }
.vorg-rueckweg-summe { margin: 0; font-size: 12.5px; color: var(--text); }
.vorg-rueckweg-faelle { margin: 0; font-size: 12px; color: var(--dim); }
.vorg-rueckweg-halt { margin: 0; font-size: 12.5px; color: var(--accent); }
.vorg-rueckweg-hinweis { margin: 0; font-size: 11.5px; color: var(--mute); }

.vorg-rueckweg-zeilen {
  max-height: 320px; overflow: auto;
  border: 1px solid var(--line); border-radius: 9px; background: var(--sunken);
  padding: 7px 0;
}
.vorg-rueckweg-zeile {
  display: flex; gap: 8px; align-items: baseline;
  padding: 1px 11px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
}
.vorg-rueckweg-nr { flex-shrink: 0; min-width: 42px; text-align: right; color: var(--faint); }
.vorg-rueckweg-mark { flex-shrink: 0; width: 10px; color: var(--mute); }
.vorg-rueckweg-text { min-width: 0; white-space: pre-wrap; word-break: break-word; }
.vorg-rueckweg-zeile.dazu .vorg-rueckweg-mark, .vorg-rueckweg-zeile.dazu .vorg-rueckweg-text { color: var(--green); }
.vorg-rueckweg-zeile.weg .vorg-rueckweg-mark, .vorg-rueckweg-zeile.weg .vorg-rueckweg-text { color: var(--red); }
.vorg-rueckweg-alt { display: block; color: var(--red); text-decoration: line-through; }
.vorg-rueckweg-neu { display: block; color: var(--green); }

/*
 * Drei Spalten, weil es drei Antworten gibt. Sie stehen nebeneinander und
 * nicht hinter Reitern: Die Frage «schulde ich das oder wartet es auf jemand
 * anderen» beantwortet man durch Hinsehen, nicht durch Umschalten.
 */
.vorg-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vorg-spalte { min-width: 0; }
.vorg-spalte h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dim);
}
.vorg-spalte h3 b {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  color: var(--mute); letter-spacing: 0;
}
.vorg-spalte[data-richtung="keine"] h3 { color: var(--mute); }

.vorg-karte { margin-bottom: 9px; }
.vorg-karte .run-top { padding: 10px 12px; gap: 9px; }
.vorg-karte .run-meta { padding: 0 12px 10px; font-family: var(--ui); font-size: 11.5px; }
.vorg-karte .run-title strong { font-size: 13px; white-space: normal; overflow: visible; }
.vorg-karte .run-acts button { padding: 4px 8px; font-size: 11px; }

.vorg-haken {
  width: 19px; height: 19px; flex-shrink: 0;
  border: 1px solid var(--line-2); border-radius: 6px; background: var(--sunken);
  color: var(--green); font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vorg-haken:hover { border-color: var(--mute); }
.vorg-haken.an { border-color: var(--green); }
.vorg-haken:disabled { opacity: .4; }

.vorg-weglegen {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0 12px 11px;
}
.vorg-weglegen button, .vorg-weglegen input {
  padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line);
  font-size: 11.5px; color: var(--dim); background: var(--sunken);
}
.vorg-weglegen button:hover { color: var(--text); border-color: var(--mute); }

.vorg-leer { font-size: 12.5px; color: var(--mute); padding: 6px 2px; margin: 0; }
.vorg-warnung {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--panel-2);
  font-size: 12.5px; color: var(--accent);
}

.vorg-formular {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; margin-bottom: 14px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2);
}
.vorg-formular-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.vorg-formular-reihe .lx-field { flex: 1; min-width: 130px; padding: 8px 11px; font-size: 13px; min-height: 0; }
.vorg-formular .lx-field { padding: 9px 12px; font-size: 14px; }

/* ── Der einzelne Vorgang ───────────────────────────────────── */

.vorg-blatt { padding: 4px 6px 20px; }
.vorg-blatt + .vorg-blatt { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 22px; }
.vorg-blatt-titel { margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.2px; }
.vorg-angaben { padding: 0 0 12px; font-family: var(--ui); font-size: 12.5px; gap: 6px 18px; }
.vorg-blatt-knoepfe { padding: 4px 0 16px; }

.vorg-schlagworte { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 12px; }
.vorg-schlagwort {
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--sunken); font-size: 11px; color: var(--dim);
}

.vorg-herkuenfte { padding-bottom: 14px; }
.vorg-herkuenfte h3 {
  margin: 0 0 7px; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--mute);
}
.vorg-herkunft { display: flex; gap: 9px; align-items: baseline; font-size: 12px; color: var(--dim); padding: 3px 0; }
.vorg-herkunft code { font-family: var(--mono); font-size: 11px; color: var(--accent); flex-shrink: 0; }
.vorg-herkunft span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.vorg-text { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; }

/* ── Der Baustein auf der Startseite ────────────────────────── */

.vorg-baustein { display: flex; flex-direction: column; gap: 1px; }
.vorg-baustein.alt { opacity: .5; }
.vorg-baustein-zeile {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 7px 8px; border-radius: 7px; border: 0; background: transparent;
  text-align: left; color: var(--text-2);
}
.vorg-baustein-zeile:hover { background: var(--raised); color: var(--text); }
.vorg-baustein-titel {
  flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vorg-baustein-frist { font-size: 11px; color: var(--mute); flex-shrink: 0; }

@media (max-width: 980px) {
  .vorg-spalten { grid-template-columns: 1fr; gap: 18px; }
}
html[data-layout="narrow"] .vorg,
html[data-layout="narrow"] .vorg-einzeln {
  width: 100vw; max-height: 100%; height: 100%; border-radius: 0; border: 0;
}

/* ══════════════════════════════════════════════════════════════
   Die Post
   ══════════════════════════════════════════════════════════════

   Drei Spalten in einem Blatt über dem Hauptbereich, mit eigenem
   Vorhang (.blatt-hinter) wie die Vorgänge und die Einstellungen.
   #scrim wird bewusst nicht angefasst: dessen Buchhaltung zählen
   sieben Schliessfunktionen von Hand ab.

   Die Breiten sind nicht gleichmässig, weil die Aufgaben es nicht
   sind: Ordner ändern sich selten (schmal), die Liste ist die
   Arbeitsfläche (mittel), gelesen wird im Rest.

   Es entsteht KEINE neue Farbe. Kontozustände laufen über die
   vorhandenen .st-*-Klassen, Dringliches über .vorg-dringend.
   ────────────────────────────────────────────────────────────── */

.post-hinter { align-items: stretch; }

/* Die Post füllt den Hauptbereich, wie die Übersicht — kein schwebendes Blatt
   mit Schatten und abgerundeten Ecken mehr. Sie ist ein Ort, kein Zwischenruf. */
.postbereich { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.postbereich.hidden { display: none; }

.post {
  background: transparent;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex; flex-direction: column; overflow: hidden;
}

.post-kontowahl {
  font-family: var(--ui); font-size: 12.5px;
  background: var(--sunken); color: var(--text-2);
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px;
}
.post-ampel { flex-shrink: 0; }
.post-zu { margin-left: auto; }
/* Der Abgleich-Knopf steht neben der Ampel, nicht am anderen Rand: das
   margin-left:auto von .vorg-klein würde ihn sonst dorthin schieben. */
.log-head .vorg-klein { margin-left: 0; }

.post-spalten {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 200px 340px 1fr;
}
.post-spalten > * { min-width: 0; overflow-y: auto; }
.post-ordner { border-right: 1px solid var(--line); padding: 8px 6px; }
.post-liste { border-right: 1px solid var(--line); }
.post-lesen { display: flex; flex-direction: column; overflow: hidden; }

.post-leer { margin: 0; padding: 14px; font-size: 12.5px; color: var(--mute); }

/* ── Die Ordnerspalte ────────────────────────────────────────── */

.post-ordner-zeile {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 8px; background: transparent;
  text-align: left; color: var(--text-2);
}
.post-ordner-zeile:hover { background: var(--raised); color: var(--text); }
.post-ordner-zeile.an { background: var(--raised); color: var(--text); }
/* Ein Ordner, den der Server nicht mehr listet, wird NIE automatisch
   geräumt — er wird abgeblendet und sagt es in seiner zweiten Zeile. */
.post-ordner-zeile.fort { opacity: .55; }
.post-ordner-oben { display: flex; align-items: baseline; gap: 8px; }
.post-ordner-name {
  flex: 1; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-ordner-zahl {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--accent);
}
.post-ordner-unten { font-size: 10.5px; color: var(--mute); }
.post-ordner-fehler {
  margin: 0 0 8px; padding: 7px 9px; border-radius: 8px;
  background: rgba(224, 112, 90, .12); color: #f08a7a; font-size: 11.5px;
}

/* ── Die Liste ───────────────────────────────────────────────── */

.post-zeile {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 9px 13px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; text-align: left; color: var(--text-2);
}
.post-zeile:hover { background: var(--panel-2); }
.post-zeile.an { background: var(--raised); color: var(--text); }
/* Ungelesen ist eine Schriftstärke und kein Punkt: Der Punkt braucht eine
   Spalte, die bei einem Absender mit langem Namen fehlt. */
.post-zeile.ungelesen .post-zeile-betreff { font-weight: 700; color: var(--text); }
.post-zeile.ungelesen .post-zeile-von { color: var(--text); }
.post-zeile-kopf { display: flex; align-items: baseline; gap: 7px; }
.post-zeile-von {
  flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-zeile-datum { flex-shrink: 0; font-size: 10.5px; color: var(--mute); }
.post-marke { flex-shrink: 0; font-size: 11px; color: var(--accent); }
.post-klammer { flex-shrink: 0; font-size: 10px; opacity: .7; }
.post-zeile-betreff {
  font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-zeile-vorschau {
  font-size: 11.5px; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Die Leseansicht ─────────────────────────────────────────── */

.post-lesen-kopf {
  flex-shrink: 0; padding: 12px 16px 10px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.post-lesen-oben { display: flex; align-items: baseline; gap: 10px; }
.post-lesen-oben h2 { margin: 0; font-size: 15px; line-height: 1.35; min-width: 0; }
.post-lesen-zeile {
  margin: 0; font-size: 12px; color: var(--dim);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.post-lesen-adresse { color: var(--mute); }
.post-lesen-datum { margin-left: auto; color: var(--mute); flex-shrink: 0; }

.post-zurueck {
  flex-shrink: 0; padding: 3px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent;
  font-size: 11.5px; color: var(--dim);
}
.post-zurueck:hover { color: var(--text); border-color: var(--mute); }

.post-anhaenge {
  flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 7px;
  padding: 9px 16px; border-bottom: 1px solid var(--line);
}
.post-anhang {
  display: flex; align-items: baseline; gap: 8px; text-decoration: none;
  padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--sunken); color: var(--text-2);
}
.post-anhang:hover { color: var(--text); border-color: var(--mute); }
.post-anhang-name { font-size: 12px; }
.post-anhang-gross { font-size: 10.5px; color: var(--mute); }

/*
 * Der abgeschottete Rahmen.
 *
 * Er füllt die Spalte und scrollt selbst. Die Höhe wird NICHT an den Inhalt
 * angepasst — das ginge nur, wenn wir hineinsehen dürften, und genau das ist
 * der Punkt der Abschottung.
 */
.post-rahmen {
  flex: 1; min-height: 0; width: 100%;
  border: 0; background: var(--panel);
}
.post-hinweis {
  flex-shrink: 0; margin: 0; padding: 7px 16px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--mute);
}

/* ── Kein Konto ──────────────────────────────────────────────── */

.post-leerzustand {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px; text-align: center;
}
.post-leerzustand h3 { margin: 0; font-size: 15px; }
.post-leerzustand p { margin: 0; max-width: 44ch; font-size: 13px; color: var(--dim); line-height: 1.6; }

/* ── Das Formular in den Einstellungen ───────────────────────── */

.post-formular {
  display: flex; flex-direction: column; gap: 10px;
  padding: 13px; margin-top: 12px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2);
}
.post-formular h4 { margin: 0; font-size: 13px; }
.post-formular-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.post-formular-reihe .lx-field { flex: 1; min-width: 150px; }
.post-json { min-height: 64px; font-family: var(--mono); font-size: 11.5px; }
.post-formular-hinweis { margin: 0; font-size: 11.5px; color: var(--mute); line-height: 1.5; }
.post-formular-gut { margin: 0 0 6px; font-size: 12.5px; color: var(--green); }
.post-formular-ordner { display: flex; flex-wrap: wrap; gap: 6px; }
.post-formular-ordnerzeile {
  padding: 3px 9px; border-radius: 6px; background: var(--sunken);
  border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2);
}

/* ── Der Baustein auf der Startseite ─────────────────────────── */

.post-baustein { display: flex; flex-direction: column; gap: 1px; }
.post-baustein.alt { opacity: .5; }
.post-baustein-kopf {
  width: 100%; padding: 5px 8px; border: 0; border-radius: 7px;
  background: transparent; text-align: left;
  font-size: 11.5px; color: var(--accent); font-weight: 600;
}
.post-baustein-kopf:hover { background: var(--raised); }
.post-baustein-zeile {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 6px 8px; border-radius: 7px; border: 0; background: transparent;
  text-align: left; color: var(--text-2);
}
.post-baustein-zeile:hover { background: var(--raised); color: var(--text); }
.post-baustein-von {
  flex-shrink: 0; max-width: 34%; font-size: 12px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-baustein-betreff {
  flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-baustein-datum { flex-shrink: 0; font-size: 10.5px; color: var(--mute); }

/* ══ Schmal: eine Spalte statt drei ══════════════════════════════

   Drei Spalten auf einem Telefon sind drei unbenutzbare Spalten. Also
   umschalten statt quetschen: Ordner und Liste teilen sich die Fläche,
   und die geöffnete Mail legt sich darüber. Der Rückweg ist der
   ‹-Knopf — und die Zurück-Taste des Browsers, weil die Adresse ihn
   mitträgt.
   ────────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .post-spalten { grid-template-columns: 170px 1fr; }
  .post-lesen { display: none; }
  .postbereich.liest .post-spalten { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .postbereich.liest .post-ordner, .postbereich.liest .post-liste { display: none; }
  .postbereich.liest .post-lesen { display: flex; }
}

html[data-layout="narrow"] .post {
  width: 100vw; height: 100%; border-radius: 0; border: 0;
}
/* Eine Spalte, zwei Reihen: Die Ordner liegen als schmales Band obenauf und
   scrollen seitwärts, die Liste bekommt den Rest. Ohne die Reihenangabe
   teilten sich beide die Höhe zu gleichen Teilen, und die Liste zeigte drei
   Zeilen. */
html[data-layout="narrow"] .post-spalten {
  grid-template-columns: 1fr; grid-template-rows: auto 1fr;
}
html[data-layout="narrow"] .post-ordner {
  border-right: 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 7px;
}
html[data-layout="narrow"] .post-ordner-zeile { width: auto; flex-shrink: 0; }
html[data-layout="narrow"] .post-ordner-unten { display: none; }
html[data-layout="narrow"] .post-lesen { display: none; }
html[data-layout="narrow"] .postbereich.liest .post-ordner,
html[data-layout="narrow"] .postbereich.liest .post-liste { display: none; }
html[data-layout="narrow"] .postbereich.liest .post-spalten { grid-template-rows: 1fr; }
html[data-layout="narrow"] .postbereich.liest .post-lesen { display: flex; }

/* ══ Die Post: arbeiten statt nur lesen ══════════════════════════

   Kennzeichen, Verschieben, Papierkorb und die Mehrfachauswahl. Der
   Grundsatz dieses Blocks ist derselbe wie im Rest der Postansicht:
   keine neuen Farben. Alles läuft über die vorhandenen Marken —
   --accent für «markiert», --red für den Grund eines Rückfalls,
   --raised für das Gewählte.

   Und eine Regel, die man sehen muss: Was gerade BEHAUPTET, aber noch
   nicht bestätigt ist, sieht anders aus als das Bestätigte. Eine
   Anzeige, die eine Behauptung wie eine Tatsache malt, lügt — auch
   dann, wenn sie meistens recht hat.
   ────────────────────────────────────────────────────────────── */

/* Die Zeile trägt jetzt Knöpfe. Sie liegen am rechten Rand über der
   Vorschau, und dafür braucht die Zeile einen Bezugsrahmen. */
.post-zeile { position: relative; }

.post-zeile-tat {
  position: absolute; right: 8px; top: 6px;
  display: flex; gap: 2px;
  padding: 2px; border-radius: 8px;
  background: var(--panel-2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  /* Drei Knöpfe je Zeile wären bei sechzig Zeilen hundertachtzig
     Ablenkungen. Sie kommen beim Überfahren — und bei Tastaturbedienung,
     weil dort niemand überfährt. */
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
.post-zeile:hover .post-zeile-tat,
.post-zeile:focus-within .post-zeile-tat,
.post-zeile.zeigt .post-zeile-tat,
.post-zeile.an .post-zeile-tat { opacity: 1; pointer-events: auto; }

.post-tat {
  min-width: 24px; height: 22px; padding: 0 5px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--dim); font-family: var(--ui); font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.post-tat:hover { background: var(--raised); color: var(--text); }
.post-tat.an { color: var(--accent); }
.post-tat:disabled { opacity: .4; }

/* Gewählt ist nicht dasselbe wie offen: Die offene Mail hat den hellen
   Grund (.an), die gewählten einen Streifen am Rand. Wer zwanzig Zeilen
   auswählt, während eine offen ist, muss beides gleichzeitig sehen. */
.post-zeile.gewaehlt { background: var(--panel-2); }
.post-zeile.gewaehlt::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
/* Wo die Tastatur steht. Ein Rahmen und keine Füllung — sonst wäre er von
   «offen» nicht zu unterscheiden. */
.post-zeile.zeigt { box-shadow: inset 0 0 0 1px var(--line-2); }

/* Behauptet, noch nicht bestätigt. */
.post-zeile.schwebt { opacity: .55; }
/* Sichtbar zurückgefallen. Kurz und deutlich: Der Grund steht oben im
   Klartext, das hier sagt nur, WELCHE Zeile es betrifft. */
.post-zeile.zurueck { animation: post-zurueck 2.4s ease-out; }
@keyframes post-zurueck {
  0%, 40% { background: rgba(224, 112, 90, .22); }
  100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .post-zeile.zurueck { animation: none; box-shadow: inset 0 0 0 1px var(--red); }
}

/* ── Die Leiste der Mehrfachauswahl ──────────────────────────── */

/* EIN klebender Behälter für beide. Zwei Elemente mit «sticky top:0»
   legten sich übereinander, sobald der Grund und die Auswahl gleichzeitig
   dastehen — und genau dann braucht man beide. */
.post-kopfleiste { position: sticky; top: 0; z-index: 4; }

.post-auswahl {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  background: var(--raised);
}
.post-auswahl-zahl { font-size: 12px; font-weight: 700; color: var(--text); }
.post-auswahl-weg { margin-left: auto; }

/* Der Grund, warum zuletzt etwas zurückfiel. Er bleibt stehen, bis
   jemand ihn wegräumt oder der nächste Zug gelingt — eine Meldung, die
   nach drei Sekunden verschwindet, hat der übersehen, der gerade
   woanders hinsah. */
.post-melder {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  background: rgba(224, 112, 90, .14); color: #f08a7a;
}
.post-melder-text { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.45; }
.post-melder-zu {
  flex-shrink: 0; border: 0; background: transparent;
  color: inherit; font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 5px;
}
.post-melder-zu:hover { background: rgba(224, 112, 90, .2); }

/* ── Die kleinen Knöpfe in Leiste und Leseansicht ────────────── */

.post-klein {
  font-family: var(--ui); font-size: 11.5px;
  padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--line-2); background: var(--sunken); color: var(--text-2);
}
.post-klein:hover { color: var(--text); border-color: var(--mute); }
.post-klein:disabled { opacity: .45; }
.post-klein.an { color: var(--accent); border-color: var(--accent); }
.post-wohin { padding-right: 5px; }

/* Die Werkzeugleiste an der offenen Mail. Sie steht im Kopf und scrollt
   deshalb NICHT mit dem Rahmen weg — bei einer langen Mail wäre der
   Papierkorb sonst zweitausend Pixel weiter unten. */
.post-lesen-tat {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.post-lesen-tat:empty { display: none; }

/* Solange ein Zug unterwegs ist. Kein Balken, kein Drehkreuz — nur der
   Zeiger und die abgeblendeten Knöpfe (die setzt die Oberfläche selbst
   auf disabled). Ein Ladebalken für eine Bewegung, die meistens 40 ms
   dauert, blinkt bloss. */
.postbereich.arbeitet .post-liste { cursor: progress; }

/*
 * ══════════ Der Tresor ══════════
 *
 * Bewusst karg. Was hier steht, sind Namen und Zeitpunkte — der Wert ist nach
 * dem Anlegen fort und kommt nie zurück. Die Anordnung übernimmt Kopf und
 * Filterzeile vom Protokoll (.log-head, .log-filter), damit ein sechster
 * Bereich nicht wie eine sechste Formensprache aussieht.
 */
.tresorbereich { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tresorbereich.hidden { display: none; }
.tresor { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.tresor-zahl { margin-left: auto; font-size: 11px; }
.tresor-satz { flex: 1; min-width: 0; font-size: 12px; color: var(--mute); }
.tresor-koerper { flex: 1; overflow-y: auto; padding: 14px; }

.tresor-leer { max-width: 60ch; margin: 24px auto; text-align: center; font-size: 13px; color: var(--mute); }

/*
 * ══════════ Das Terminal ══════════
 *
 * Kopf und Leiste wie Tresor und Protokoll. Darunter nur die Fläche — das
 * Terminal zeichnet sich selbst. Etwas dunkler als der Rest, damit klar ist,
 * dass hier eine Shell und keine Ansicht der App liegt.
 */
.terminalbereich { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.terminalbereich.hidden { display: none; }
.terminal { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.terminal-zustand { margin-left: auto; font-size: 11px; }
.terminal-leiste { flex-wrap: wrap; }
.terminal-satz { flex: 1; min-width: 12ch; font-size: 12px; color: var(--mute); }
.terminal-flaeche { flex: 1; min-height: 0; padding: 8px 10px; background: #141210; }
.terminal-flaeche .xterm { height: 100%; }
.terminal-flaeche .xterm-viewport { background: #141210 !important; }

.tresor-reihe {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  padding: 12px 14px; margin-bottom: 10px;
}
.tresor-reihe.offen { border-color: var(--line-2); }
.tresor-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tresor-name { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); }
.tresor-laenge { font-size: 11px; }
/* Der kurze Wert wird NICHT maskiert — das muss man sehen, nicht ahnen. */
.tresor-warn { font-size: 11px; color: var(--red); }
.tresor-kopf .vorg-klein { margin-left: 0; }
.tresor-kopf .vorg-klein:first-of-type { margin-left: auto; }
.tresor-beschreibung { margin: 7px 0 0; font-size: 12.5px; color: var(--dim); }
.tresor-fuss { margin: 6px 0 0; font-size: 10.5px; }

.tresor-form {
  display: flex; flex-direction: column; gap: 11px;
  margin: 12px 0 4px; padding: 13px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--sunken);
}
.tresor-feld { display: flex; flex-direction: column; gap: 4px; }
.tresor-marke { font-size: 11.5px; color: var(--mute); }
.tresor-hinweis { font-size: 11px; color: var(--mute); }
.tresor-feld input {
  font-family: var(--ui); font-size: 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px;
}
.tresor-feld input.mono { font-family: var(--mono); }
.tresor-feld input:focus { border-color: var(--accent); }
.tresor-form .btn { align-self: flex-start; padding: 7px 16px; font-size: 12.5px; }

/* ══════════ Die Übersicht: wo stehen wir ══════════
 *
 * Sie beantwortet drei Fragen und sonst nichts: wo stehen wir, läuft es,
 * braucht jemand etwas von mir. Deshalb ist die Reihenfolge von oben nach
 * unten die Reihenfolge der Dringlichkeit — die wartende Frage steht ganz
 * oben, weil sie die einzige ist, die eine Handlung verlangt.
 */

.vorhabenbereich {
  position: absolute; inset: 0; left: var(--rail-w);
  overflow-y: auto; padding: 28px 32px 64px;
  background: var(--bg);
}
@media (max-width: 720px) { .vorhabenbereich { left: 0; padding: 20px 16px 64px; } }

.vh-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap; margin-bottom: 26px;
}
.vh-titel { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -.015em; }
.vh-ziel { margin: 6px 0 0; color: var(--text-2); max-width: 62ch; line-height: 1.5; }
.vh-kopf-rechts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.vh-spez {
  font-size: 12px; color: var(--dim); padding: 4px 10px;
  border: 1px solid var(--line-2); border-radius: 20px;
}
.vh-spez.eingefroren, .vh-spez.erweitert { color: var(--text-2); border-color: var(--accent); }
.vh-luecke { color: var(--accent); margin-left: 6px; }
.vh-integration { font-size: 12px; color: var(--accent); }

/* Die wartende Frage: das Einzige, was eine Handlung verlangt. */
.vh-fragen { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.vh-frage {
  border: 1px solid var(--accent); border-radius: 12px; padding: 16px 18px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.vh-frage-kopf { display: flex; align-items: baseline; gap: 10px; }
.vh-frist { font-size: 12px; color: var(--dim); margin-left: auto; }
.vh-frage-text { margin: 8px 0 12px; color: var(--text-2); }
.vh-frage-knoepfe { display: flex; gap: 8px; }
.vh-frage-knoepfe button {
  font: inherit; font-size: 13px; padding: 7px 16px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--raised); color: var(--text);
  cursor: pointer;
}
.vh-ja { border-color: var(--accent) !important; }
.vh-frage-knoepfe button:hover { background: var(--panel-2); }
.vh-frage-fuss { margin-top: 10px; font-size: 12px; color: var(--mute); line-height: 1.45; }

/* Die Zahlen. Zwei, die zählen — und der Satz, der «offen» erklärt. */
.vh-zahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 30px;
}
.vh-zahl {
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  background: var(--panel);
}
.vh-zahl-wert { font-size: 34px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.vh-zahl-name { margin-top: 6px; color: var(--text-2); font-size: 13px; }
.vh-zahl-zusatz { margin-top: 3px; color: var(--mute); font-size: 12px; }

.vh-ueberschrift {
  margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute);
}

/* Meilensteine: was ein Nutzer danach kann. */
.vh-steine { display: flex; flex-direction: column; gap: 2px; margin-bottom: 32px; }
.vh-stein {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: 8px; background: var(--panel);
  border: 1px solid transparent;
}
.vh-stein:hover { border-color: var(--line); }
.vh-stein-text { flex: 1; line-height: 1.4; }
.vh-stein.erreicht .vh-stein-text { color: var(--text-2); }
.vh-marke {
  font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums;
  white-space: nowrap; padding: 3px 10px; border-radius: 20px;
  border: 1px solid var(--line-2);
}
.vh-marke.gut { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }

/* Die Bühne. Was sich regt, kommt aus den Ereignissen — nie von selbst. */
.vh-buehne {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.vh-platz {
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 14px 14px;
  background: var(--panel); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.vh-platz:hover { border-color: var(--line-2); background: var(--panel-2); }
.vh-tier { height: 40px; display: flex; align-items: flex-end; justify-content: center; }
.tier { image-rendering: pixelated; }
.ton-matt { opacity: .38; }
.ton-akzent, .ton-schlecht, .ton-violett { opacity: 1; }

.vh-rolle { margin-top: 10px; font-size: 13px; font-weight: 600; }
.vh-tut { margin-top: 2px; font-size: 12px; color: var(--dim); }
.vh-woran {
  margin-top: 6px; font: 11px var(--mono); color: var(--mute);
}

/* Zustände. «ruft» ist der einzige, der auffallen DARF — er verlangt etwas. */
.vh-platz.ruft { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.vh-platz.ruft .vh-tut { color: var(--accent); }
.vh-platz.ruht .vh-rolle { color: var(--dim); }

/* Werkeln und Regen: eine kleine Bewegung, die AUFHÖRT, wenn nichts kommt.
 * Ein Dauerlauf wäre ein Bildschirmschoner und liesse Stillstand nach Arbeit
 * aussehen. */
.vh-platz.werkelt .tier { animation: vh-werkeln 1.1s steps(2, end) infinite; }
.vh-platz.regt .tier { animation: vh-regen 2.4s ease-in-out infinite; }
@keyframes vh-werkeln { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes vh-regen { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .vh-platz.werkelt .tier, .vh-platz.regt .tier { animation: none; }
}

.vh-leer {
  color: var(--mute); padding: 20px; border: 1px dashed var(--line-2);
  border-radius: 12px; line-height: 1.5;
}

/* Vorgelegte Regeln: was zweimal nicht griff. Sie stehen UNTEN, nicht oben —
 * sie sind wichtig, aber nicht dringend. Wer sie oben hätte, würde sie
 * irgendwann überlesen wie einen Werbebanner. */
.vh-regeln { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.vh-regel {
  padding: 12px 16px; border-radius: 8px; background: var(--panel);
  border-left: 2px solid var(--violet);
}
.vh-regel-text { line-height: 1.45; color: var(--text-2); }
.vh-regel-fuss { margin-top: 5px; font-size: 12px; color: var(--mute); }
.vh-hinweis {
  margin: 10px 0 0; font-size: 12px; color: var(--mute);
  line-height: 1.5; max-width: 68ch;
}

/* Der Schalter: Loslegen oder Anhalten. Er ist der einzige Knopf, der Agenten
 * startet — deshalb steht er oben rechts und nicht in einem Menü. */
.vh-schalter {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 18px;
  border-radius: 8px; border: 1px solid var(--accent); cursor: pointer;
  background: var(--accent); color: var(--sunken);
}
.vh-schalter.laeuft { background: transparent; color: var(--text-2); border-color: var(--line-2); }
.vh-schalter:hover { filter: brightness(1.08); }
.vh-schalter:disabled { opacity: .6; cursor: default; }

/* Das Formular für ein neues Vorhaben. */
.vh-neu { max-width: 62ch; }
.vh-feld { display: block; margin: 20px 0; }
.vh-feld > span {
  display: block; margin-bottom: 6px; font-size: 12px; color: var(--text-2);
}
.vh-feld input, .vh-feld textarea, .vh-feld select {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 12px;
  border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--sunken); color: var(--text); resize: vertical;
}
.vh-feld textarea { line-height: 1.5; }
.vh-feld input:focus, .vh-feld textarea:focus, .vh-feld select:focus {
  outline: none; border-color: var(--accent);
}
.vh-neu-fuss { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.vh-neu-fuss button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 9px 22px;
  border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--sunken); cursor: pointer;
}
.vh-fehler { color: var(--red); font-size: 13px; }

/* ══════════ Das Raster ══════════
   Mehrere Sitzungen nebeneinander. Der Bereich verhält sich wie Post und
   Vorgänge — er nimmt den Platz des Gesprächs ein, aber NICHT den der
   Eingabe: die bleibt unten stehen und gehört der gewählten Kachel. */

.rasterbereich {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.raster-kopf {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.raster-kopf-wo { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; }
.raster-kopf-wo svg { width: 16px; height: 16px; stroke: var(--accent); }
.raster-trenner { width: 1px; height: 22px; background: var(--line); }
.raster-luecke { flex-grow: 1; }

.raster-hinweis { font-size: 11.5px; color: var(--mute); }

/* Der einzige Ruf im Kopf. Er springt zur Kachel, ohne die Anordnung zu
   ändern — wer eine Kachel sucht, will sie sehen, nicht verschieben. */
.raster-ruf {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 9px; border-radius: 9px;
  border: 1px solid #5c4a2e;
  background: linear-gradient(180deg, #2a2318 0%, #241f18 100%);
  color: var(--accent); font: 600 12px var(--ui); cursor: pointer;
}
.raster-ruf::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 7px rgba(224,112,90,.6); }

.raster-feld {
  flex-grow: 1;
  min-height: 0;
  padding: 12px;
  display: flex;
  overflow: hidden;
}

/* ── Die Teilung ───────────────────────────────────────────────
   Verschachtelte Flächen statt eines Gitters aus Spalten. Ein Gitter kann
   nicht, was hier der Normalfall ist: links eine hohe Kachel, rechts drei
   übereinander. */

.teilung { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; }
.teilung.quer   { flex-direction: row; }
.teilung.laengs { flex-direction: column; }
.teil { display: flex; min-width: 0; min-height: 0; }
.teil > * { flex: 1 1 0; min-width: 0; min-height: 0; }

/* Die Fuge zwischen zwei Kacheln. Schmal gezeichnet, breit zu treffen —
   ein Griff von drei Pixeln findet niemand mit der Maus. */
.fuge { position: relative; flex: 0 0 10px; }
.fuge::after {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 2px;
  background: transparent;
  transition: background .12s;
}
.fuge:hover::after { background: var(--line-2); }
.teilung.quer   > .fuge { cursor: col-resize; }
.teilung.laengs > .fuge { cursor: row-resize; }
body.zieht-fuge { cursor: col-resize; user-select: none; }
body.zieht-fuge .kachel { pointer-events: none; }

/* ── Die Kachel ────────────────────────────────────────────────
   Der Rahmen sagt die Lage. Drei Zustände, nicht mehr — jede weitere
   Abstufung kostet mehr Lernen, als sie an Information bringt. */

/* `flex: 1 1 0` gehört an die Kachel selbst, nicht nur an `.teil`: Liegt eine
   einzelne im Raster, ist sie DIREKTES Kind des Feldes — ohne diese Zeile
   schrumpfte sie dort auf die Grösse ihres Textes, statt die Fläche zu füllen. */
.kachel {
  flex: 1 1 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.kachel-innen { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

/* «Hier bist du» — derselbe weisse Balken wie in der Projektleiste. */
.kachel::before {
  content: '';
  width: 3px; flex-shrink: 0;
  background: transparent;
  transition: background .12s;
}
.kachel.aktiv::before { background: var(--text); }

/* Wartet auf dich: der Ton der Freigabekarte im Gespräch. Dieselbe Sache
   sieht gleich aus, egal wo man sie sieht. */
.kachel.wartet { border-color: #5c4a2e; }
.kachel.wartet .kachel-kopf { background: linear-gradient(180deg, #2a2318 0%, #241f18 100%); border-bottom-color: #33291c; }

/* Läuft: der Rahmen atmet. Ein stehender grüner Rand sähe aus wie «fertig». */
.kachel.laeuft { border-color: rgba(107,191,114,.42); }
@keyframes kachel-atem {
  0%, 100% { border-color: rgba(107,191,114,.42); }
  50%      { border-color: rgba(107,191,114,.72); }
}
.kachel.laeuft { animation: kachel-atem 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .kachel.laeuft { animation: none; } }

.kachel-kopf {
  height: 34px; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  cursor: grab;
}
.kachel.aktiv .kachel-kopf { background: var(--raised); border-bottom-color: var(--line-2); }
.kachel-kopf:active { cursor: grabbing; }
.kachel-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.kachel.laeuft .kachel-punkt { background: var(--green); box-shadow: 0 0 7px rgba(107,191,114,.55); }
.kachel.wartet .kachel-punkt { background: var(--red); box-shadow: 0 0 7px rgba(224,112,90,.6); }
.kachel-titel { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-kuerzel { font: 500 10px var(--mono); color: var(--mute); flex-shrink: 0; }
.kachel-kopf .icon-btn { width: 22px; height: 22px; flex-shrink: 0; }
.kachel-kopf .icon-btn svg { width: 13px; height: 13px; }

.kachel-koerper {
  flex-grow: 1; min-height: 0;
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 9px;
  overflow: auto;
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
  cursor: pointer;
}
.kachel-koerper > .md { margin: 0; }
.kachel-koerper pre { max-height: 160px; overflow: auto; }

/* Der Weg als eine Zeile. Sie ist der Beweis, dass gearbeitet wurde, und
   der Griff, um es im Gespräch nachzulesen. */
.kachel-weg {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--sunken);
  padding: 6px 10px;
  font: 400 11.5px var(--mono); color: var(--mute);
  flex-shrink: 0;
}
.kachel-weg b { color: var(--dim); font-weight: 500; }

.kachel-leer { color: var(--mute); font-style: italic; }

.kachel-fuss {
  height: 27px; flex-shrink: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
  font: 400 10.5px var(--mono); color: var(--mute);
}
.kachel-fuss .luecke { flex-grow: 1; }

/* ── Wohin es fällt ────────────────────────────────────────────
   Ein Balken an der Kante, an der die Kachel landen würde. Ohne ihn ist «an
   welcher Kante bin ich gerade» blosses Raten — und der Unterschied zwischen
   «rechts daneben» und «darunter» entscheidet über die ganze Aufteilung. */

.kachel[data-ablage]:not([data-ablage=""])::after,
.raster-feld[data-ablage]:not([data-ablage=""])::after {
  content: '';
  position: absolute;
  background: rgba(224,163,85,.28);
  border: 1px solid var(--accent);
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
}
.kachel[data-ablage="links"]::after  { inset: 3px 50% 3px 3px; }
.kachel[data-ablage="rechts"]::after { inset: 3px 3px 3px 50%; }
.kachel[data-ablage="oben"]::after   { inset: 3px 3px 50% 3px; }
.kachel[data-ablage="unten"]::after  { inset: 50% 3px 3px 3px; }
/* «Mitte» heisst tauschen — deshalb die ganze Fläche, nicht eine Hälfte. */
.kachel[data-ablage="mitte"]::after  { inset: 3px; }
/* Die Vorschau des leeren Rasters sitzt am FELD, nicht am Text darin: Dort
   wird sie gesetzt, und ein Zuhörer am Text hätte die Fläche daneben nicht
   erfasst. Eine einzelne Kachel füllt danach die ganze Fläche. */
.raster-feld { position: relative; }
.raster-feld[data-ablage="mitte"]::after { inset: 12px; }

.raster-leer { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--mute); text-align: center; }
.raster-leer b { color: var(--text-2); font-weight: 600; }

/* Die Eingabe im Raster sagt, wem sie gehört. */
.composer-fuer {
  display: flex; align-items: center; gap: 7px;
  padding: 0 4px 6px;
  font-size: 11.5px; color: var(--mute);
}
.composer-fuer b { color: var(--text-2); font-weight: 600; }

/* Was schon im Raster liegt. Ein Zeichen genügt — die Zeile ist schon voll. */
.sess.im-raster .sess-name::after {
  content: '';
  display: inline-block;
  width: 9px; height: 7px;
  margin-left: 6px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  border-left-width: 4px;
  opacity: .75;
  vertical-align: baseline;
}

.raster-leer .btn { margin-top: 4px; }

/* ── Die Bilder im Verlauf ─────────────────────────────────────
   Ein Chip, der erst auftaucht, wenn er gebraucht wird. Ab dem 21. Bild in
   einer Anfrage weist die API alles über 2000 px ab — und Bilder aus früheren
   Zügen zählen mit. Bis dahin wäre die Zahl blosses Rauschen. */

.bilder-warnung {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--panel-2);
  color: var(--dim); font: 500 11.5px var(--ui);
  cursor: pointer; white-space: nowrap;
}
.bilder-warnung:hover { border-color: var(--accent); color: var(--text-2); }
.bilder-warnung::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mute);
}
/* Knapp vor der Grenze — noch Zeit, aber nicht mehr viel. */
.bilder-warnung.eng { border-color: #5c4a2e; color: var(--accent); }
.bilder-warnung.eng::before { background: var(--accent); }
/* Darüber: Der nächste Zug mit einem grossen Bild scheitert. */
.bilder-warnung.voll { border-color: var(--red); color: var(--red); }
.bilder-warnung.voll::before { background: var(--red); box-shadow: 0 0 7px rgba(224,112,90,.6); }

/* ── Teilen ────────────────────────────────────────────────────
   Der Link ist der ganze Schlüssel. Deshalb steht im Blatt auch, was das
   heisst — man soll es einmal lesen, bevor man ihn weitergibt. */

.teilen-blatt { max-width: 460px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.teilen-blatt h3 { margin: 0; font-size: 16px; }
.teilen-was { margin: 0; font: 500 13px var(--ui); color: var(--text-2); }
.teilen-hinweis { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.teilen-hinweis b { color: var(--text-2); font-weight: 600; }
.teilen-warnung {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--dim);
  border: 1px solid #5c4a2e; border-radius: 9px; padding: 10px 12px;
  background: linear-gradient(180deg, #2a2318 0%, #241f18 100%);
}
.teilen-warnung b { color: var(--accent); font-weight: 600; }
.teilen-link { display: flex; gap: 7px; }
.teilen-link input {
  flex: 1; min-width: 0;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; color: var(--text-2); font: 400 12px var(--mono);
}
.btn.gefahr { border-color: #5c3430; color: var(--red); }
.btn.gefahr:hover { border-color: var(--red); background: rgba(224,112,90,.08); }