/* Shell-Terminal (features/shell.js, Ansicht '::term[/<ordner>]' → Modus
   „Shell"). Eine KONSOLE, keine Unterhaltung: links die offenen Terminals,
   rechts das Bild des PTY.

   Farben laufen wie überall über die App-Tokens (--bg/--panel/--panel2/--line/
   --text/--muted/--accent) — hell, dunkel und html.modern stimmen dadurch ohne
   Sonderregel. Die Farben IM Terminal setzt dagegen xterm.js selbst (JS,
   themeOf() liest dieselben Tokens aus) — es zeichnet seine Zeilen mit eigenen
   Stilen, an die von hier aus nicht heranzukommen ist. */

/* --sh-h setzt features/shell.js aus dem visualViewport, sobald die
   Bildschirmtastatur etwas verdeckt: dann ist die Ansicht genau so hoch wie das,
   was man WIRKLICH sieht — Tastenleiste unmittelbar über der Tastatur statt
   dahinter. Ohne Tastatur bleibt es bei „so hoch wie der Platz" (auto). */
.sh {
  position: absolute; inset: 0; height: var(--sh-h, auto);
  display: flex; flex-direction: column; min-height: 0; background: var(--bg);
}

/* ---- Kopf --------------------------------------------------------------- */
.sh-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  background: var(--panel); flex: 0 0 auto;
}
.sh-burger { display: none; }
.sh-ico { display: flex; color: var(--accent); flex: 0 0 auto; }
.sh-ico .ico { width: 20px; height: 20px; }
.sh-title { display: flex; flex-direction: column; min-width: 0; }
.sh-title h1 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.2; }
.sh-cwd {
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font: 11px/1.35 ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
  color: var(--muted); max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-cwd:hover { color: var(--accent); }
.sh-spacer { flex: 1 1 auto; }
.sh-head .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Verbindungszustand — bewusst klein: im Normalfall („verbunden") soll er
   nicht auffallen, im Fehlerfall aber sofort erklären, warum nichts passiert. */
.sh-state { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sh-state-ok { color: var(--ok, #29a745); }
.sh-state-busy { color: var(--muted); }
.sh-state-off { color: var(--warn, #f5a524); }
.sh-state-err { color: var(--danger, #e5484d); }

/* ---- Rumpf & Terminal-Liste --------------------------------------------- */
.sh-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }

.sh-side {
  flex: 0 0 280px; min-width: 0; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line); background: var(--panel);
}
.sh-side-h {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 8px 9px 14px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line);
}
.sh-side-h > span { flex: 1 1 auto; }
.sh-side-x { display: none; }
.sh-side-h .icon-btn { padding: 3px; }
.sh-side-h .icon-btn .ico { width: 15px; height: 15px; }
.sh-old.on { color: var(--accent); background: var(--accent-dim); }
.sh-list { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 6px; }
.sh-empty { margin: 12px 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* Beendete Sitzungen unter den laufenden: grau, Klick setzt fort. */
.sh-sec {
  margin: 12px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.sh-item.tm-off .sh-item-t b { color: var(--muted); font-weight: 400; }
.sh-more {
  display: block; width: 100%; margin: 4px 0; padding: 6px 8px; text-align: left;
  background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer;
  border-radius: var(--radius, 8px);
}
.sh-more:hover { background: var(--panel2); color: var(--text); }
.sh-scrim { display: none; }

.sh-item {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 7px 8px; border-radius: var(--radius, 8px);
  cursor: pointer; border: 1px solid transparent;
}
.sh-item:hover { background: var(--panel2); }
.sh-item.on { background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.sh-item-ico { display: flex; color: var(--muted); flex: 0 0 auto; }
.sh-item-ico .ico { width: 15px; height: 15px; }
.sh-item.on .sh-item-ico { color: var(--accent); }
.sh-item-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sh-item-t b { font-size: 13px; font-weight: 500; line-height: 1.3; }
.sh-item.on .sh-item-t b { cursor: text; }
.sh-item-rename { font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; width: 100%; min-width: 0;
  padding: 1px 4px; margin: -2px -5px; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--bg); color: var(--fg, inherit); outline: none; }
.sh-item-t small {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-item-x { opacity: 0; flex: 0 0 auto; }
.sh-item:hover .sh-item-x, .sh-item.on .sh-item-x { opacity: .7; }
.sh-item-x:hover { opacity: 1; }

.sh-side-f { border-top: 1px solid var(--line); padding: 10px 12px; }
.sh-side-f p { margin: 0 0 6px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
/* Derselbe Befehl, mit dem man sich per SSH danebensetzt — das ist der Beweis,
   dass hier kein Sonderweg läuft, sondern eine ganz normale tmux-Sitzung. */
.sh-attach-cmd {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2);
  font: 10.5px/1.4 ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
  color: var(--muted); overflow-wrap: anywhere;
}
.sh-attach-cmd:hover { color: var(--text); border-color: var(--accent); }

/* ---- Terminal ------------------------------------------------------------ */
.sh-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

/* Der Rahmen ist der Maßstab: xterm.js rechnet Spalten und Zeilen aus DIESER
   Fläche aus — genauer: der Fit-Zusatz nimmt die HÖHE DES ELTERN (.sh-term,
   inkl. dessen Polster, weil box-sizing: border-box gilt) und zieht davon nur
   das Polster des .xterm ab. Saß das Polster am Elter, rechnete er mit 12 px
   zu viel: bei 15 px Zeilenhöhe eine Zeile zu viel, und die unterste Zeile —
   in `claude` die EINGABEZEILE — lag unter dem Fensterrand.
   Deshalb: Polster ins Element, nicht zwischen Messung und Zeichnung. */
.sh-term { flex: 1 1 auto; min-height: 0; position: relative; }
.sh-term .xterm { height: 100%; padding: 6px 4px 6px 10px; }
.sh-term .xterm-viewport { background: transparent !important; }
.sh-term .xterm-viewport::-webkit-scrollbar { width: 10px; }
.sh-term .xterm-viewport::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 5px;
}

/* ---- Bildlaufleiste (nur Touch, features/term-scrollbar.js) ------------- */
/* Breite Trefferfläche (22 px) am rechten Rand, sichtbar nur ein schmaler
   Griff. Beim Ziehen wird er breiter. `touch-action: none`: das Ziehen gehört
   der Leiste, nicht dem Seiten-Scroll. */
.sh-sb {
  position: absolute; top: 4px; bottom: 4px; right: 0; width: 22px; z-index: 6;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.sh-sb::before {                     /* Schiene */
  content: ''; position: absolute; top: 0; bottom: 0; right: 4px; width: 3px;
  border-radius: 2px; background: var(--line); opacity: .35;
}
.sh-sb-thumb {
  position: absolute; top: 0; right: 3px; width: 5px; min-height: 36px;
  border-radius: 3px; background: var(--muted); opacity: .55;
  transition: width .12s, right .12s, opacity .12s;
}
.sh-sb.scrolled .sh-sb-thumb { background: var(--accent); opacity: .8; }
.sh-sb.active .sh-sb-thumb { width: 10px; right: 1px; opacity: 1; }
.sh-sb-end {
  position: absolute; right: 30px; bottom: 12px; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel, var(--bg)); color: var(--text);
  font-size: 20px; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  display: none; align-items: center; justify-content: center; cursor: pointer;
}
.sh-sb-end.show { display: flex; }

/* ---- Sondertasten (nur Touch) ------------------------------------------- */
/* Ohne diese Leiste ist ein Terminal am Handy unbedienbar: die
   Bildschirmtastatur hat weder Esc noch Strg noch Tab — also kein Strg+C,
   keine Vervollständigung, kein Abbruch.

   Reihe 1 trägt, was man dauernd braucht, und passt ohne Wischen auf ein
   Handy. Reihe 2 ist der Rest und lässt sich mit „⋯" wegklappen — jede Reihe
   kostet Terminalzeilen. */
.sh-keys { display: none; }
.sh-touch .sh-keys {
  display: block; flex: 0 0 auto;
  border-top: 1px solid var(--line); background: var(--panel);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sh-keyrow {
  display: flex; gap: 5px; overflow-x: auto; padding: 6px 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sh-keyrow::-webkit-scrollbar { display: none; }
.sh-keyrow-1 { padding-bottom: 0; }
/* Reihe 1 teilt sich die Breite zu gleichen Teilen — ALLE ihre Tasten müssen
   ohne Wischen erreichbar sein, sonst ist ^C im Ernstfall nicht da. */
.sh-keyrow-1 { overflow: hidden; }
.sh-keyrow-1 .sh-key { flex: 1 1 0; min-width: 0; padding-inline: 2px; font-size: 12.5px; }
.sh-keyrow-2 { display: none; border-top: 1px dashed var(--line); margin-top: 6px; }
.sh-keys2 .sh-keyrow-2 { display: flex; }
.sh-keys2 .sh-key-more { background: var(--accent-dim); border-color: var(--accent); }

.sh-key {
  flex: 0 0 auto; min-width: 40px; min-height: 38px; padding: 9px 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel2);
  color: var(--text); font-size: 13.5px; line-height: 1; cursor: pointer;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Rückmeldung kommt beim ANTIPPEN (pointerdown) — :active greift auf Touch
   erst verzögert, und die Leiste soll sich so schnell anfühlen wie eine
   Tastatur. */
.sh-key.pressed, .sh-key:active { background: var(--accent-dim); border-color: var(--accent); }
/* „einmal scharf": die Taste bleibt markiert, bis die nächste sie verbraucht. */
.sh-key.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.sh-key-mod { font-family: inherit; font-weight: 600; }
.sh-key-wide { font-family: inherit; padding-inline: 14px; }
.sh-key-sep { flex: 0 0 auto; width: 1px; background: var(--line); margin: 4px 3px; }

/* ---- Handy -------------------------------------------------------------- */
@media (max-width: 860px) {
  .sh-burger { display: inline-flex; }
  .sh-head { padding: 8px 10px; gap: 8px; }
  .sh-head .btn span { display: none; }
  .sh-head .btn { padding: 7px 10px; }
  .sh-cwd { max-width: 46vw; }
  .sh-state { display: none; }

  .sh-side {
    position: absolute; inset: 0 auto 0 0; z-index: 5;
    width: min(320px, 84vw); flex: 0 0 auto;
    transform: translateX(-101%); transition: transform .18s ease;
    box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .4));
  }
  .sh-side-open .sh-side { transform: none; }
  .sh-side-x { display: inline-flex; }
  .sh-side-open .sh-scrim {
    display: block; position: absolute; inset: 0; z-index: 4;
    background: rgba(0, 0, 0, .45);
  }
  .sh-item-x { opacity: .7; }

  .sh-term .xterm { padding: 4px 2px 4px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-side { transition: none; }
}

/* Offene Bildschirmtastatur: Der Kopf gibt Zeilen ab (jede zählt, wenn vom
   Bildschirm nur noch ein Drittel übrig ist) — der Pfad steht ohnehin im Tab. */
.sh-kbd .sh-head { padding-block: 4px; }
.sh-kbd .sh-cwd { display: none; }
.sh-kbd .sh-title h1 { font-size: 13px; }

/* Der Hinweis zum Markieren steht in der Seitenleiste, weil er nur EINMAL
   erklärt werden muss (Maus an tmux = Auswahl braucht die Umschalttaste). */

/* ---- Eingabebox ---------------------------------------------------------- */
/* Ein ECHTES Textfeld unter dem Terminalbild — der Grund steht ausführlich in
   features/shell.js. Kurz: xterm.js hat nur ein verstecktes Ein-Zeichen-Feld,
   das es nach jedem Anschlag leerräumt. Diktat, Markieren, „markiertes
   löschen", Cursor in die Wortmitte setzen und Strg+V brauchen aber ein Feld,
   das den Text WÄHREND des Schreibens behält. Also gibt es hier eins. */
.sh-input {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px;
  padding: 7px 8px; border-top: 1px solid var(--line); background: var(--panel);
}
/* Der Rahmen wandert beim Fokus auf die Akzentfarbe: man muss SEHEN, wo das
   Getippte landet — im Terminal gibt es zwei mögliche Ziele. */
.sh-input.on { background: var(--panel2); }

/* Das sichtbare „Feld": Rahmen um Anhänge (Chips) + Textarea. */
.sh-field {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.sh-field:focus-within { border-color: var(--accent); }
.sh-ta {
  flex: 1 1 auto; min-width: 0; resize: none; overflow-y: auto;
  margin: 0; padding: 8px 10px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--text);
  font: 13.5px/1.45 ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
  /* Markieren MUSS erlaubt bleiben: die Terminal-Regeln drumherum schalten
     user-select ab, damit ein Wisch über die Tastenleiste nichts markiert —
     hier ist es die halbe Funktion. */
  user-select: text; -webkit-user-select: text;
  touch-action: auto;
}
.sh-ta:focus { outline: none; }
.sh-ta::placeholder { color: var(--muted); opacity: .75; }
/* Ist der Text länger als der Deckel, darf man in der Box selbst scrollen. */
.sh-ta-full { overscroll-behavior: contain; }

.sh-ta-send, .sh-ta-big, .sh-ta-attach, .sh-ta-paste, .sh-ta-cam {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel2); color: var(--muted);
}
.sh-ta-send { background: var(--accent); border-color: var(--accent); color: #fff; }
.sh-ta-send:hover { filter: brightness(1.08); }
.sh-ta-big:hover, .sh-ta-attach:hover, .sh-ta-paste:hover, .sh-ta-cam:hover { color: var(--text); border-color: var(--accent); }
.sh-ta-send .ico, .sh-ta-big .ico, .sh-ta-attach .ico, .sh-ta-paste .ico, .sh-ta-cam .ico { width: 17px; height: 17px; }
/* Anhang lädt hoch: Büroklammer pulsiert. */
.sh-uploading .sh-ta-attach { color: var(--accent); border-color: var(--accent); animation: term-pulse 1s ease-in-out infinite; }
/* Datei wird über die Terminal-Fläche gezogen. */
.sh-main.sh-drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
.sh-up:disabled { opacity: .35; cursor: default; }
/* Aufgeklappt bleibt der Knopf markiert — sonst sucht man, wie man zurückkommt. */
.sh-big .sh-ta-big { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Aufgeklappte Schreibfläche ----------------------------------------- */
/* Ein diktierter Absatz passt nicht in eine Zeile. Aufgeklappt bekommt die Box
   den halben Bildschirm, damit der Text GANZ dasteht und sich durchlesen lässt,
   bevor er abgeht. Die Höhe rechnet features/shell.js (autoGrow) — hier steht
   nur, was sich sonst noch ändert. */
.sh-big .sh-input { align-items: stretch; }
/* Die Knöpfe nach oben, damit sie bei hoher Box erreichbar bleiben statt am
   unteren Rand zu kleben. */
.sh-big .sh-ta-send, .sh-big .sh-ta-big, .sh-big .sh-ta-attach, .sh-big .sh-ta-paste, .sh-big .sh-ta-cam { align-self: flex-start; }
.sh-big .sh-ta { overscroll-behavior: contain; }


/* ---- Handy --------------------------------------------------------------- */
@media (max-width: 860px) {
  /* 16px ist keine Geschmacksfrage: unter 16px zoomt iOS die ganze Seite
     hinein, sobald das Feld den Fokus bekommt — und zoomt nie zurück. */
  .sh-ta { font-size: 16px; padding: 7px 9px; }
  .sh-input { padding: 6px; gap: 5px; }
  .sh-ta-send, .sh-ta-big { width: 40px; height: 40px; }
}

/* Bei offener Tastatur zählt jede Zeile — die Box behält ihre Höhe, das
   Terminal gibt ab (es ist der elastische Teil, s. .sh-term flex:1). */
.sh-kbd .sh-input { padding-block: 5px; }

/* ---- Claude-Zustand je Terminal (features/term-status.js) ----------------
   Farben s. features.css (--term-*): gelb arbeitet, grün fertig, blau aktiv,
   grau ohne Claude. */
.sh-item .sh-item-ico { color: var(--term-off); }
.sh-item.tm-busy .sh-item-ico { color: var(--term-busy); animation: term-pulse 1.4s ease-in-out infinite; }
.sh-item.tm-busy .sh-item-t small { color: var(--term-busy); }
.sh-item.tm-done .sh-item-ico { color: var(--term-done); }
.sh-item.tm-done .sh-item-t small { color: var(--term-done); }
.sh-item.tm-idle .sh-item-ico { color: var(--term-idle); }
.sh-item.tm-ask .sh-item-ico { color: var(--term-ask); animation: term-pulse 1s ease-in-out infinite; }
.sh-item.tm-ask .sh-item-t small { color: var(--term-ask); }
.sh-burger { position: relative; }
.sh-burger.tm-busy::after, .sh-burger.tm-done::after, .sh-burger.tm-ask::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--term-idle); box-shadow: 0 0 0 2px var(--panel);
}
.sh-burger.tm-busy::after { background: var(--term-busy); animation: term-pulse 1.4s ease-in-out infinite; }
.sh-burger.tm-done::after { background: var(--term-done); }
.sh-burger.tm-ask::after { background: var(--term-ask); }

/* ---- Baum links: Ordner → Sitzungen (features/shell.js paintList) -------- */
/* Eine Zeile je Sitzung: Titel kleiner und gekürzt, Zeit/Zustand rechts. */
.sh-list { padding: 4px; }
.sh-fold {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  margin-top: 4px; padding: 4px 6px; border-radius: 6px; cursor: pointer; user-select: none;
  font-size: 12.5px; color: var(--text);
  /* Ordner = EINE Zeile auf abgesetztem Grund, Ort klein dahinter.
     Sitzungen darunter sind eingerückt und tragen die Farben. */
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
}
.sh-list > .sh-fold:first-child { margin-top: 0; }
.sh-fold:hover { background: var(--panel2); }
.sh-fold-chev { display: flex; color: var(--muted); transition: transform .12s; flex: 0 0 auto; }
.sh-fold-chev .ico { width: 12px; height: 12px; }
.sh-fold.open .sh-fold-chev { transform: rotate(90deg); }
.sh-fold-ico { display: flex; flex: 0 0 auto; color: var(--text); opacity: .85; }
.sh-fold-ico .ico { width: 14px; height: 14px; }
.sh-fold-t { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
.sh-fold-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.sh-fold-where {
  flex: 0 10 auto; min-width: 0; font-size: 10.5px; color: var(--muted); font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sh-fold.cur { box-shadow: inset 3px 0 0 var(--accent); }
.sh-fold.cur .sh-fold-name { font-weight: 600; }
.sh-fold.sh-fold-hidden { opacity: .5; }
.sh-fold.sh-fold-hidden .sh-fold-name { font-style: italic; }
.sh-fold-body { margin: 2px 0 4px 20px; padding-left: 8px; border-left: 1px solid var(--line); }

.sh-row { padding: 3px 6px; gap: 6px; }
.sh-row .sh-item-ico .ico { width: 13px; height: 13px; }
.sh-row .sh-item-t b {
  font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--text) 85%, var(--muted)); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.sh-row.on .sh-item-t b { font-weight: 600; }
.sh-row-meta {
  flex: 0 0 auto; font-size: 10.5px; color: var(--muted); white-space: nowrap;
  max-width: 40%; overflow: hidden; text-overflow: ellipsis;
}
.sh-row.tm-busy .sh-row-meta, .sh-fold.tm-busy .sh-row-meta { color: var(--term-busy); }
.sh-row.tm-done .sh-row-meta, .sh-fold.tm-done .sh-row-meta { color: var(--term-done); }
.sh-row.tm-ask .sh-row-meta, .sh-fold.tm-ask .sh-row-meta { color: var(--term-ask); }
.sh-row .sh-item-x { padding: 2px; }
.sh-row .sh-item-x .ico { width: 12px; height: 12px; }
.sh-row .sh-item-rename { font-size: 12px; }
.sh-fold-body .sh-empty { margin: 6px 8px; font-size: 12px; }
.sh-fold-body .sh-more { font-size: 11.5px; padding: 4px 6px; }

/* Ein anderes Gerät gibt die Terminal-Größe vor (lib/shell-term.js fitSize):
   kleiner Hinweis oben rechts, Klick übernimmt die Größe für dieses Gerät. */
.sh-main { position: relative; }
.sh-size-pill {
  display: none; position: absolute; top: 8px; right: 12px; z-index: 5;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--muted);
  font-size: 11.5px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.sh-size-pill:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.sh-size-pill:disabled { cursor: default; }
.sh-foreign-size .sh-size-pill { display: block; }
.sh-term { overflow: hidden; }

/* ---- Anhänge als Chips im Feld + Vorschau ------------------------------- */
.sh-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 6px 0; max-height: 92px; overflow-y: auto; }
.sh-chips[hidden] { display: none; }
.sh-chip {
  display: inline-flex; align-items: center; max-width: 220px; height: 30px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--text);
}
.sh-chip.on { border-color: var(--accent); }
.sh-chip-open {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 100%;
  padding: 0 4px 0 4px; border: 0; background: none; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer;
}
.sh-chip-thumb { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; background: var(--bg); }
.sh-chip-ico { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.sh-chip-ico .ico { width: 16px; height: 16px; }
.sh-chip-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-chip-x {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 24px; height: 100%; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
}
.sh-chip-x:hover { color: var(--text); }
.sh-chip-x .ico { width: 13px; height: 13px; }

.sh-peek {
  position: fixed; z-index: 2000; display: flex; flex-direction: column;
  width: min(360px, calc(100vw - 16px)); max-height: min(420px, 60vh);
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.28); overflow: hidden;
}
.sh-peek-h { display: flex; align-items: center; gap: 7px; padding: 6px 6px 6px 10px; border-bottom: 1px solid var(--line); }
.sh-peek-h b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.sh-peek-b { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.sh-peek-b img, .sh-peek-b video { display: block; max-width: 100%; max-height: min(330px, 48vh); object-fit: contain; }
.sh-peek-b audio { width: 100%; margin: 14px 10px; }
.sh-peek-pdf { width: min(420px, calc(100vw - 16px)); }
.sh-peek-b iframe { width: 100%; height: min(330px, 48vh); border: 0; background: #fff; }
.sh-peek-txt {
  align-self: stretch; margin: 0; padding: 8px 10px; width: 100%; max-height: min(330px, 48vh); overflow: auto;
  font: 11.5px/1.45 ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}
.sh-peek-big { padding: 22px; color: var(--muted); }
.sh-peek-big .ico { width: 56px; height: 56px; }
.sh-peek-f { padding: 5px 10px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Lesemodus (features/term-reader.js) -------------------------------- */
/* Derselbe Inhalt als echter Text über dem Terminal-Bild: der Browser scrollt
   (mit Schwung) und markiert selbst — am Handy per Langdruck mit Griffen. */
.trd {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
}
.trd[hidden] { display: none; }
.trd-bar {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, var(--text));
}
.trd-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--line); }
.trd-tab {
  border: 0; background: transparent; color: var(--text-dim, var(--text));
  padding: 5px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.trd-tab.on { background: var(--bg); color: var(--text); font-weight: 600; }
.trd-tab[hidden] { display: none; }
.trd-sp { flex: 1 1 auto; }
.trd-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  border-radius: 8px; padding: 5px 9px; font-size: 13px; cursor: pointer;
}
.trd-btn svg, .trd-acopy svg, .trd-down svg { width: 15px; height: 15px; }
.trd-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.trd-body {
  padding: 10px 12px 28px; font-size: 14px; line-height: 1.55;
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  overflow-wrap: anywhere;
}
.trd-body * { -webkit-user-select: text; user-select: text; }
.trd-user {
  margin: 14px 0 8px auto; max-width: 92%; width: fit-content;
  padding: 8px 11px; border-radius: 12px 12px 2px 12px;
  background: color-mix(in srgb, var(--accent, #4a7cff) 18%, var(--bg));
  white-space: pre-wrap;
}
.trd-turn { margin: 6px 0 12px; }
.trd-p { white-space: pre-wrap; margin: 4px 0; }
.trd-h { display: inline-block; margin-top: 4px; }
.trd-body code {
  font-family: var(--mono, ui-monospace, monospace); font-size: 0.92em;
  padding: 0 3px; border-radius: 4px; background: var(--line);
}
.trd-code, .trd-pre {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.45;
  white-space: pre-wrap; margin: 6px 0; padding: 8px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--text) 6%, var(--bg));
}
.trd-pre { background: transparent; padding: 0; }
.trd-meta {
  font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.4;
  opacity: 0.62; white-space: pre-wrap; margin: 2px 0;
  max-height: 7.2em; overflow: hidden;
}
.trd-meta.trd-error { color: var(--danger, #d33); opacity: 0.9; }
.trd-acopy {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  border: 0; background: transparent; color: var(--text-dim, var(--text)); opacity: 0.75;
  font-size: 12px; padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.trd-acopy:active, .trd-acopy:hover { opacity: 1; background: var(--line); }
.trd-more { display: block; margin: 4px auto 10px; }
.trd-note, .trd-empty { font-size: 12.5px; opacity: 0.7; margin: 6px 0 10px; }
.trd-down {
  position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--text);
  display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); cursor: pointer;
}
.trd-down[hidden] { display: none; }
@media (max-width: 700px) {
  .trd-body { font-size: 15px; }
  .trd-btn span { display: none; }
}

/* ---- Foto aufnehmen (features/term-camera.js) ---------------------------- */
.tcam {
  position: fixed; inset: 0; z-index: 10050; background: #000; color: #fff;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.tcam-v, .tcam-shot { width: 100%; height: 100%; object-fit: contain; }
.tcam-v[hidden], .tcam-shot[hidden], .tcam [hidden] { display: none !important; }
.tcam-mirror .tcam-v { transform: scaleX(-1); }
.tcam-top {
  position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 12px 12px;
}
.tcam-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center;
}
.tcam-btn .ico { width: 22px; height: 22px; }
.tcam-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 16px max(22px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  display: flex; flex-direction: column; gap: 12px;
}
.tcam-bar { display: flex; justify-content: center; align-items: center; gap: 14px; }
/* Auslöser genau in der Mitte, „Einfügen (N)" rechts daneben. */
.tcam-live .tcam-side { flex: 1 1 0; display: flex; justify-content: flex-end; min-width: 0; }
/* Leiste der gemachten Fotos: wischbar, neuestes rechts. */
.tcam-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 2px;
  touch-action: pan-x; scrollbar-width: none;
}
.tcam-strip::-webkit-scrollbar { display: none; }
.tcam-th {
  position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 8px;
  border: 2px solid rgba(255,255,255,.7); overflow: visible; cursor: pointer;
}
.tcam-th.on { border-color: var(--accent); }
.tcam-th img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.tcam-th-x {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.8); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.tcam-th-x .ico { width: 13px; height: 13px; }
.tcam-shot { position: absolute; inset: 0; background: #000; }
.tcam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.tcam-flash.go { animation: tcam-flash .25s ease-out; }
@keyframes tcam-flash { from { opacity: .7; } to { opacity: 0; } }
.tcam-danger { background: #c0392b; border-color: #c0392b; }
.tcam-ask {
  position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; text-align: center; font-size: 17px;
}
.tcam-ask div { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tcam-shutter {
  width: 72px; height: 72px; border-radius: 50%; cursor: pointer;
  border: 4px solid #fff; background: rgba(255,255,255,.25); box-shadow: inset 0 0 0 4px #000;
}
.tcam-shutter:active { background: #fff; }
.tcam-pill {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 12px 20px; border-radius: 999px; font-size: 16px;
  border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.5); color: #fff;
}
.tcam-pill .ico { width: 18px; height: 18px; }
.tcam-use { background: var(--accent); border-color: var(--accent); }
.tcam-msg {
  position: absolute; inset: 0 0 160px; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 16px;
}
.tcam-use { white-space: nowrap; }
@media (max-width: 420px) {
  .tcam-use { padding: 11px 14px; font-size: 15px; }
  .tcam-use .ico { display: none; }
}