/* 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 230px; 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-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; }
.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-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;
}

/* ---- 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). */
.sh-side-f .sh-tip { margin: 0 0 8px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.sh-side-f .sh-tip b { color: var(--text); font-weight: 600; }

/* ---- 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); }

.sh-ta {
  flex: 1 1 auto; min-width: 0; resize: none; overflow-y: auto;
  margin: 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); 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; border-color: var(--accent); }
.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 {
  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 { color: var(--text); border-color: var(--accent); }
.sh-ta-send .ico, .sh-ta-big .ico { width: 17px; height: 17px; }
/* 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 { 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; }