/* TobyKi — dunkles Halo-Design */

:root {
  --bg: #0b0f14;
  --panel: #121826;
  --panel2: #182134;
  --border: #24304a;
  --text: #e8edf6;
  --muted: #8a97ad;
  --accent: #7c5cff;
  --accent2: #2dd4bf;
  --danger: #f87171;
  --ok: #34d399;
  --warn: #fbbf24;
  /* Abnahme A38 (accessibility.responsive), gemessen mit
     tests/accessibility_responsive_contract.test.js:
     --border traegt Karten, Tabellen und Trenner. Fuer Bedienelemente reicht er
     nicht: gegen --panel2 kam er auf 1.22:1, WCAG 1.4.11 verlangt 3:1, damit ein
     Eingabefeld oder ein Symbolknopf ueberhaupt auffindbar ist. --rand-bedienelement
     erreicht gemessen 3.21:1 gegen --panel2 und 3.84:1 gegen --bg. */
  --rand-bedienelement: #54709f;
  /* Weisser Text auf dem alten Verlauf (--accent -> #5b3df5) erreichte gemessen
     4.10:1; WCAG 1.4.3 verlangt 4.5:1. Der tiefere Verlauf kommt auf 4.89:1 am
     hellen und 6.57:1 am dunklen Ende. --accent selbst bleibt unveraendert, weil
     er Logo, Chips und Fokusfarbe traegt. */
  --accent-tief: #6a46e8;
  --accent-tief2: #4e2fd8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #app { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
}

#app { display: flex; }

/* ---------- Seitenleiste ---------- */

#sidebar {
  width: 230px;
  min-width: 230px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 16px;
}

#logo { display: flex; align-items: center; gap: 10px; }

.logo-mark {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #0b0f14;
}

.logo-name { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; }
.logo-sub { font-size: 11px; color: var(--muted); }

#nav { display: flex; flex-direction: column; gap: 4px; }

.safe-eject {
  text-align: left;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.08);
  color: var(--warn);
}
.safe-eject.confirm {
  border-color: var(--danger);
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
}
#safe-eject-state { line-height: 1.35; min-height: 16px; }

.nav-btn {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}
.nav-btn:hover { background: var(--panel2); }
.nav-btn.active { background: var(--panel2); border-color: var(--border); }
.nav-project-group { display: flex; flex-direction: column; gap: 4px; }
.nav-project-child { margin-left: 12px; }

#provider-status {
  margin-top: auto;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
}
.ps-title { color: var(--muted); margin-bottom: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; }

/* ---------- Hauptbereich ---------- */

#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.view { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.view.active { display: flex; }

.view-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 24, 38, 0.6);
}
.view-head h2 { font-size: 16px; }
.chat-mode-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.chat-mode-label select { min-width: 145px; }

.pad { padding: 16px 18px; overflow-y: auto; flex: 1; }

.muted { color: var(--muted); font-size: 12px; }

button {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--rand-bedienelement);
  border-radius: 9px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
}
button:hover { border-color: var(--accent); }
button.primary {
  background: linear-gradient(135deg, var(--accent-tief), var(--accent-tief2));
  border: none;
  font-weight: 600;
}
button.primary:hover { filter: brightness(1.12); }

input, textarea, select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--rand-bedienelement);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
/* A38 / WCAG 2.4.7: Vorher stand hier outline:none, die Anzeige bestand allein
   aus dem Wechsel der Randfarbe. Der Ring bleibt jetzt erhalten und ist auch im
   dunklen Thema messbar - gemessen 6.9:1 gegen die Umgebung. */
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

.row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.row input[type="text"] { flex: 1; min-width: 180px; }

/* ---------- Chat ---------- */

#view-chat, #chat-messages { min-height: 0; }

#role-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  font-size: 12.5px;
}
.chip.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(124,92,255,0.25), rgba(45,212,191,0.15));
}
.drive-context-chip { cursor: default; font-size: 11.5px; padding: 4px 9px; }
.halo-context-badge { border-style: dashed; color: #d33682; background: rgba(211,54,130,.08); }
.flags-v2-active { border-style: solid; background: rgba(45,212,191,.08); }
.flags-v2-ambiguous { border-style: double; color: #dc322f; background: rgba(220,50,47,.08); }
.flags-v2-coverage { border-style: dashed; color: #b36b00; background: rgba(179,107,0,.09); }

#thread-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 24, 38, 0.35);
}
#chat-thread { flex: 1; max-width: 460px; }

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; white-space: normal; }
.msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #5b3df5, var(--accent));
  border-bottom-right-radius: 4px;
}
.msg.assistant {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.msg.error { align-self: flex-start; border: 1px solid var(--danger); color: var(--danger); background: rgba(248,113,113,0.08); }

.msg pre {
  background: #0a0d12;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  overflow-x: auto;
  margin: 8px 0;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px;
}
.msg code { font-family: Consolas, "Courier New", monospace; background: rgba(124,92,255,0.15); border-radius: 4px; padding: 1px 5px; }
.msg pre code { background: none; padding: 0; }

.msg-meta { font-size: 11px; color: var(--muted); margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.msg-meta button { padding: 2px 8px; font-size: 11px; border-radius: 6px; }

#chat-inputbar {
  display: flex; gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: rgba(18, 24, 38, 0.6);
  align-items: flex-end;
  flex: 0 0 auto;
}
#chat-input { flex: 1; resize: none; }
#chat-send { flex: 0 0 auto; min-width: 88px; position: relative; z-index: 2; }

.chat-haloformel-binding {
  margin: 0 18px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(18, 24, 38, 0.42);
}
.chat-haloformel-binding > summary { padding: 8px 10px; cursor: pointer; }
.chat-haloformel-binding input { min-width: 180px; }

#chat-file { display: none !important; }
#chat-attach, #chat-research { font-size: 16px; padding: 8px 11px; }
#chat-research.active {
  border-color: var(--accent2);
  background: rgba(45, 212, 191, 0.15);
  box-shadow: 0 0 0 1px var(--accent2) inset;
}

#chat-attachments {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 18px;
}
#chat-attachments:not(:empty) { padding-bottom: 8px; }
.att-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; background: var(--panel);
}
.att-chip button { border: none; background: none; padding: 0 2px; font-size: 12px; color: var(--muted); }
.att-chip button:hover { color: var(--danger); }

#view-chat.dragover #chat-messages { outline: 2px dashed var(--accent); outline-offset: -10px; border-radius: 12px; }

.msg-atts { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }
.msg-atts span { font-size: 11px; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; padding: 1px 8px; }

.typing { color: var(--muted); font-style: italic; }

/* ---------- Memory ---------- */

.tabbar { display: flex; gap: 6px; }
.tab { border-radius: 999px; padding: 6px 14px; font-size: 12.5px; }
.tab.active { border-color: var(--accent2); background: rgba(45,212,191,0.12); }

#mem-addbox { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.mem-entry {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.mem-entry .mem-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.mem-entry .mem-text { white-space: pre-wrap; line-height: 1.45; }
.mem-tags { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.mem-tag { font-size: 10.5px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--accent2); }

/* ---------- Cockpit / Halunto ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.card h3 { font-size: 14px; margin-bottom: 10px; color: var(--accent2); }
.card label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); }
.card label input, .card label select { width: 100%; }
#private-host-install-control-card { overflow-wrap: anywhere; }
#private-host-install-control-card .row { flex-wrap: wrap; }
#private-host-install-control-card input { min-width: 0; max-width: 100%; }

table.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mini th, table.mini td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.mini th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; border: 1px solid; }
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.bad { color: var(--danger); border-color: var(--danger); }
.badge.warn { color: var(--warn); border-color: var(--warn); }

.kv { display: grid; grid-template-columns: 200px 1fr; gap: 4px 12px; font-size: 13px; }
.kv .k { color: var(--muted); }

pre.raw {
  background: #0a0d12; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; overflow-x: auto; font-size: 12px; margin-top: 8px;
  font-family: Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}

/* ---------- TobyKi-Assistent (global) ---------- */

#assist-fab {
  position: fixed; right: 22px; bottom: 92px;
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 22px; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  /* A38 / WCAG 1.4.11: Der Verlauf allein kam gegen den Seitenhintergrund auf
     2.55:1. Die Begrenzung hebt den Symbolknopf messbar ab. */
  border: 1px solid var(--rand-bedienelement); z-index: 60; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
#assist-fab:hover { filter: brightness(1.15); }

#assist-panel {
  position: fixed; right: 18px; bottom: 152px;
  width: 400px; max-width: 92vw; height: 540px; max-height: 74vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  display: flex; flex-direction: column; z-index: 61;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#assist-panel.hidden { display: none; }

#assist-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600;
}
#assist-head button { padding: 2px 9px; }

#assist-msgs {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
#assist-msgs .msg { max-width: 92%; font-size: 13px; }

#assist-inputbar { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
#assist-input { flex: 1; resize: none; }

.assist-saved { font-size: 12px; color: var(--ok); margin-top: 6px; }

/* ---------- Hilfsklassen statt Inline-Styles ----------
   Befund 31.07.2026: Die Content-Security-Policy erlaubt nur style-src 'self'.
   Damit blockiert Chromium JEDES style="…"-Attribut im Markup — alle 62 Inline-Angaben
   in index.html und app.js waren wirkungslos. Deshalb hier als Klassen, die greifen.
   (Über JavaScript gesetzte Stile, el.style.display = …, sind davon nicht betroffen.) */

.mt6 { margin-top: 6px; }
.mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; }
.mb6 { margin-bottom: 6px; }
.mb8 { margin-bottom: 8px; }
.mb10 { margin-bottom: 10px; }
.m0 { margin: 0; }
.my8 { margin: 8px 0; }
.w100 { width: 100%; }
.grow { flex: 1; }
.hidden { display: none; }
.wrap { flex-wrap: wrap; }
.mitte { align-items: center; }
.tall { min-height: 44px; }
.mw120 { max-width: 120px; }
.minw110 { min-width: 110px; }
.minw180 { min-width: 180px; }
.pad-status { padding: 6px 18px 0; }
.mini-btn { margin-left: 8px; padding: 2px 10px; font-size: 11.5px; }

/* Eingabefelder in Karten füllen die Karte — vorher stand das nur inline und wirkte nie. */
.card textarea,
.card input[type="text"],
.card input[type="password"],
.card input[type="number"] { width: 100%; }
.card textarea { min-height: 64px; resize: vertical; }

/* Prüfbefund: eigener Block, NICHT .msg-meta.
   Befund 31.07.2026: .msg-meta ist display:flex — die Mängel landeten dadurch
   nebeneinander in einer Zeile statt untereinander. */
.pruefbefund {
  font-size: 12px;
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--accent2);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 8px 8px 0;
  line-height: 1.55;
}
.pruefbefund strong { color: var(--text); }

/* Umbau 31.07.2026 — Arbeitsplätze: aufklappbare Studio-Gruppen und Kapitel-Trenner */
.studiogruppe { margin-top: 8px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 4px 10px; }
.studiogruppe > summary { cursor: pointer; padding: 6px 2px; font-weight: 600; }
.studiogruppe > summary:hover { color: var(--accent2); }
.kapitel-titel { margin: 18px 0 6px; color: var(--muted); letter-spacing: 0.06em; font-size: 12px; text-transform: uppercase; }

/* Modell anwählen → erweiterte Anzeige nach unten (Owner-Wunsch 01.08.) */
.modellzeile { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.modellzeile > summary { cursor: pointer; padding: 8px 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modellzeile > summary:hover { background: rgba(255, 255, 255, 0.03); }
.modellzeile[open] { background: rgba(255, 255, 255, 0.02); border-radius: 8px; }
.modell-detail { padding: 4px 8px 12px 22px; }

/* Chat-Einstellungen: entfalten sich unter den Rollen-Chips (Owner-Wunsch 01.08.) */
#chat-konfig { margin: 0 14px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
#chat-konfig > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; color: var(--accent2); }
#chat-konfig[open] > summary { border-bottom: 1px solid var(--border); }
#chat-konfig .pad { padding: 12px; }
#chat-konfig[open] > .pad { max-height: min(42dvh, 30rem); overflow-y: auto; }
#chat-haloformel-binding[open] > .pad { max-height: min(30dvh, 22rem); overflow-y: auto; }
#chat-konfig[open]:has(+ #chat-haloformel-binding[open]) > .pad,
#chat-konfig[open] + #chat-haloformel-binding[open] > .pad { max-height: min(22dvh, 16rem); }
#chat-konfig label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
#ck-werkzeuge { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; }

/* Werkzeug-Auswahl sauber gelistet (Owner-Befund 01.08.: „nicht schön gelistet") —
   Kästchen links, Name und Zweck rechts, eine Zeile je Werkzeug. */
.wz-liste { display: flex; flex-direction: column; gap: 2px; }
.wz-zeile { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 8px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.wz-zeile:hover { background: rgba(255, 255, 255, 0.04); }
.wz-zeile input { margin: 2px 0 0; }
.wz-zeile .wz-name { font-weight: 600; }
.wz-zeile .wz-zweck { color: var(--muted); font-size: 12px; display: block; margin-top: 2px; }
#chat-ruestung { padding: 4px 14px 8px; font-size: 12px; }

/* Audit & Flags (02.08.2026) */
.audit-trenner { border: none; border-top: 1px solid #1d2733; margin: 18px 0; }
.audit-feld-mittel { width: 160px; }
.audit-feld-schmal { width: 110px; }
#karte-flaeche { max-height: 660px; overflow: auto; }

.stud-status { font-size: 12px; }

/* ---------- Gemeinsamer Browser-Renderer ----------
   Diese Regeln verändern die Desktop-App nicht. Im Web bleibt derselbe Renderer
   sichtbar; auf kleinen Bildschirmen wird lediglich dieselbe Seitenleiste zu
   einem einblendbaren Drawer. */
.tobyki-web body { padding-top: 38px; }
#web-session-badge {
  display: none;
  position: fixed; top: 6px; right: 10px; z-index: 90;
  padding: 6px 11px; border-radius: 999px; font-size: 12px;
  background: var(--panel); border: 1px solid var(--border);
}
#web-menu-toggle { display: none; }
.tobyki-web #web-session-badge { display: block; }
.tobyki-web #web-session-badge.ok { color: var(--ok); border-color: rgba(80, 200, 150, .5); }
.tobyki-web #web-session-badge.warn { color: var(--warn); }
#web-auth-overlay {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 20px; background: rgba(5, 8, 13, .94); backdrop-filter: blur(12px);
}
#web-auth-overlay.hidden { display: none; }
.web-auth-card {
  width: min(520px, 100%); padding: 24px; border: 1px solid var(--border);
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto;
  border-radius: 16px; background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.web-auth-card .logo-mark { margin-bottom: 12px; }
.web-auth-card h1 { margin: 0 0 8px; }
.web-auth-card h2 { margin: 0 0 6px; font-size: 18px; }
.web-auth-card label { display: grid; gap: 5px; margin: 14px 0; color: var(--muted); }
.web-auth-card input { width: 100%; }
.web-auth-choice-note { margin: 14px 0; padding: 10px 12px; border: 1px solid rgba(255, 196, 87, .45); border-radius: 10px; color: var(--warn); }
.web-auth-path { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.web-auth-path > .muted { margin: 0; }
.web-auth-path button { width: 100%; }

@media (max-width: 900px) {
  /* Abnahme A38 (accessibility.responsive) - 320px-/Mobile-Reflow und
     Skalierung der DESKTOP-Surface.
     Befund vor dieser Regel, gemessen bei 320 CSS-Pixeln: #sidebar belegt fix
     230px, #main bekommt 90px und schneidet als overflow:hidden 169px Inhalt ab,
     ohne dass er sich scrollen laesst - genau die harte Negativbedingung
     "abgeschnittener Inhalt". Erreichbar ist dieser Zustand im Desktopfenster
     (minWidth 980) ueber die Zoomstufen: 400 % ergeben 245, 300 % ergeben 327
     CSS-Pixel.
     Unterhalb von 900px wird die Anwendung deshalb zu einer einzigen scrollenden
     Spalte. Oberhalb - also im normalen Desktopfenster - aendert sich nichts.
     Die Regeln sind mit html:not(.tobyki-web) auf die Desktop-Surface begrenzt;
     im Browser bleibt die daneben stehende Schubladenloesung unveraendert. */
  html:not(.tobyki-web), html:not(.tobyki-web) body { height: auto; min-height: 100%; }
  html:not(.tobyki-web) #app { flex-direction: column; height: auto; min-height: 100%; }
  html:not(.tobyki-web) #sidebar {
    width: 100%; min-width: 0;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  html:not(.tobyki-web) #nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  html:not(.tobyki-web) #main { overflow: visible; min-width: 0; }
  html:not(.tobyki-web) .view { overflow: visible; }
  html:not(.tobyki-web) .view.active { display: flex; }
  html:not(.tobyki-web) .pad,
  html:not(.tobyki-web) #chat-messages { overflow: visible; }
  html:not(.tobyki-web) .view-head,
  html:not(.tobyki-web) #thread-row,
  html:not(.tobyki-web) #chat-inputbar { flex-wrap: wrap; }
  html:not(.tobyki-web) #chat-thread { max-width: none; min-width: 120px; }
  html:not(.tobyki-web) #chat-input { min-width: 140px; }
  html:not(.tobyki-web) .msg { max-width: 100%; }
  html:not(.tobyki-web) .kv { grid-template-columns: 1fr; }
  html:not(.tobyki-web) .row { flex-wrap: wrap; }
  html:not(.tobyki-web) .row input[type="text"] { min-width: 120px; }
  /* Auswahlfelder werden von ihrer laengsten Option breit gehalten. Bei 320
     CSS-Pixeln sprengten #kip-template (37 px) und #tc-repo-select (4 px)
     dadurch die Dokumentbreite; gemessen mit
     tests/accessibility_responsive_contract.test.js. */
  html:not(.tobyki-web) select,
  html:not(.tobyki-web) input,
  html:not(.tobyki-web) textarea { max-width: 100%; min-width: 0; }
  html:not(.tobyki-web) pre.raw, html:not(.tobyki-web) .msg pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  html:not(.tobyki-web) #karte-flaeche { max-height: none; }
  html:not(.tobyki-web) #assist-panel { right: 8px; left: 8px; bottom: 80px; width: auto; max-width: none; }
  html:not(.tobyki-web) #ck-werkzeuge { grid-template-columns: 1fr; }
  html:not(.tobyki-web) .audit-feld-mittel, html:not(.tobyki-web) .audit-feld-schmal { width: 100%; }
  html:not(.tobyki-web) .mw120, html:not(.tobyki-web) .minw110, html:not(.tobyki-web) .minw180 {
    max-width: none; min-width: 0;
  }

  .tobyki-web body { padding-top: 38px; overflow: hidden; }
  .tobyki-web #app { min-width: 0; height: calc(100vh - 38px); height: calc(100dvh - 38px); }
  .tobyki-web #sidebar {
    width: min(86vw, 330px); min-width: 0;
    height: calc(100vh - 38px); height: calc(100dvh - 38px); max-height: none;
    position: fixed; top: 38px; left: 0; right: auto; z-index: 70;
    border-right: 1px solid var(--border); border-bottom: 0;
    transform: translateX(calc(-100% - 12px)); transition: transform .2s ease;
    overflow-y: auto; box-shadow: 12px 0 30px rgba(0,0,0,.5);
  }
  .tobyki-web #sidebar.web-open { transform: translateX(0); }
  .tobyki-web #logo { position: sticky; top: 0; background: var(--panel); z-index: 2; }
  .tobyki-web #logo::after { content: '· Menü schliessen'; color: var(--muted); font-size: 11px; margin-left: auto; }
  .tobyki-web #web-menu-toggle {
    display: block; position: fixed; top: 4px; left: 8px; z-index: 91;
    padding: 6px 11px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border);
  }
  .tobyki-web #main { width: 100%; min-width: 0; height: 100%; }
  .tobyki-web .view-head { align-items: flex-start; flex-wrap: wrap; padding: 8px 10px; }
  .tobyki-web #role-chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tobyki-web #role-chips .chip { flex: 0 0 auto; }
  .tobyki-web #chat-konfig { margin: 0 8px 6px; }
  .tobyki-web #chat-ruestung { padding: 3px 10px 6px; }
  .tobyki-web #thread-row { flex-wrap: wrap; padding: 7px 8px; gap: 6px; }
  .tobyki-web #chat-thread { min-width: 140px; flex: 1; }
  .tobyki-web #chat-messages { padding: 10px 8px; gap: 9px; }
  .tobyki-web .msg { max-width: 94%; padding: 9px 11px; }
  .tobyki-web #chat-inputbar {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: end; gap: 5px; padding: 8px;
  }
  .tobyki-web #chat-inputbar button { padding-left: 9px; padding-right: 9px; }
  .tobyki-web input, .tobyki-web select, .tobyki-web textarea { font-size: 16px; }
  .tobyki-web #chat-konfig .row,
  .tobyki-web .row { flex-wrap: wrap; }
  .tobyki-web .card { min-width: 0; }
  .tobyki-web pre.raw { white-space: pre-wrap; overflow-wrap: anywhere; }
  .tobyki-web #assist-panel { right: 8px; bottom: 80px; width: calc(100vw - 16px); max-width: none; }
  #web-session-badge { max-width: 58vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* Aufnahmeanzeige des privaten Sprach-Roundtrips (Gate A37): sie muss auffallen,
   solange das Mikrofon offen ist. */
#stimme-aufnahme { border-color: #d33; }
#stimme-rec { color: #ff5a5a; }