/* Vertify – gemeinsame UI-Styles
   Serviert via /app/scripts/ai-support.css
   Farben: Türkis #00AFCB, Anthrazit #3C3C3C
*/

:root{
  --brand:#00AFCB;
  --brand-25: rgba(0,175,203,.25);
  --anth:#3C3C3C;

  --fg:#111;
  --muted:#666;
  --border:#ddd;
  --bg:#fff;

  /* Hellgrau (eine Nuance dunkler) */
  --card:#E6EAED;

  /* Footer-Hintergrund (hellgrau, über volle Breite) */
  --footer:#EEF2F5;

  --link:#0a58ca;

  /* Range-Slider Vars */
  --thumb-size: 18px;
  --track-h: 6px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }

/* Seite nutzt volle Breite, ~50px Rand links/rechts */
body{
  margin: 32px 50px;
  max-width: none;
  color: var(--fg);
  background: var(--bg);
  font-family: "Montserrat", "Poppins", "Work Sans", "Archivo", Arial, sans-serif;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%; /* iOS: respektiere 100% Schriftgrößen, kein Auto-Zoom */
}

/* Titel oben – Desktop wie früher, Mobile separat reduziert */
h1{
  margin:0 0 6px 0;
  font-weight:300;
  font-size: 36px; /* Desktop restored */
}
@media (max-width: 768px){
  /* Einheitliche Mobile-Größe für alle Seiten */
  h1{ font-size: 23px !important; line-height: 1.2; }
}

p.small{ color: var(--muted); margin-top:4px; }

/* Header / Navigation (rechts), aktive Seite unterstrichen */
/* Topbar: identisches Alignment auf allen Seiten (Desktop); Mobile-Regeln unten) */
.topbar{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; position:relative; padding:0; }

/* Logo links vom Titel */
.brandwrap{ display:flex; align-items:baseline; gap:10px; }
.brandwrap .brandmark{ height:28px; width:auto; display:inline-block; vertical-align:middle; }

.mainnav{ display:flex; gap:25px; align-items:center; }
.mainnav-toggle{ display:none; background:transparent; border:0; width:36px; height:28px; position:absolute; right:0; top:0; margin-top:-2px; cursor:pointer; }
.mainnav-toggle .bar{ display:block; height:2px; background: var(--fg); margin:6px 0; }
.mainnav .navlink{
  color: var(--fg); text-decoration:none;
  padding-bottom: 3px; border-bottom:1px solid transparent; /* dünner */
}
.mainnav .navlink:hover{ border-bottom-color: rgba(0,0,0,.25); }
.mainnav .navlink.active{ border-bottom-color: currentColor; }

/* Layout oben
   NEU: standardmässig EINSPALTIG (Input volle Breite).
   Wenn noch eine Agents-Card existiert, aktivieren wir via :has() wieder 2 Spalten. */
.grid-top{
  display:grid; gap:14px; align-items:start;
  grid-template-columns: 1fr; /* Standard: volle Breite */
}
@supports selector(.grid-top:has(> section)){
  .grid-top:has(> section[aria-labelledby="agentsLabel"]){
    grid-template-columns: 2fr 360px; /* Backcompat: alte Agents-Card */
  }
}

/* Karten / Subboxen: eckig, hellgrau */
.card{
  border:1px solid var(--border);
  border-radius:0;
  background: var(--card);
  padding:12px;
}

/* Hauptboxen (details.group): anthrazit */
details.group{
  position: relative;
  background: var(--anth);
  color:#fff;
  border:1px solid var(--anth);
  border-radius:0;
  padding: 0 50px 40px;      /* L/R 50px, unten 40px */
  margin-top: 32px;          /* Standard-Desktop: kein Negativrand */
}
@media (max-width: 768px){
  /* Mobile: keine negativen Seitenränder, symmetrische Innenabstände verhindern Overflow */
  details.group{ margin: 24px 0 0; padding: 0 16px 28px; }
  body{ margin: 16px 12px; }
}

/* Titel der Hauptboxen – Desktop wie früher, Mobile kleiner */
details.group > summary{
  color:#fff;
  font-weight:200 !important;
  font-size: 32px !important; /* Desktop restored */
  margin: 20px 0 0; /* Standardisiert wie andere Boxen */
  cursor:pointer;
  list-style: none;
  padding-right: 34px;
  margin-bottom: 12px;
}

/* Chat-Panel Titel explizit auf Standard bringen (falls Überschreibungen) */
#chatPanel > summary{ margin-top: 20px !important; }
@media (max-width: 768px){
  details.group > summary{
    font-size: 22px !important; /* Mobile reduziert */
    margin-top: 18px;
    margin-bottom: 10px;
  }
  /* Force Chat main-box title to match Orders in mobile */
  #chatPanel > summary{ font-size:22px !important; }
}
details.group > summary::-webkit-details-marker{ display:none; }
details.group > summary::marker{ content:""; }

/* Dezenter Pfeil oben rechts */
details.group > summary::after{
  content:"▾";
  position:absolute;
  top: 14px;
  right: 16px;
  color: rgba(255,255,255,.8);
  transition: transform .15s ease;
  font-size: 18px;
}
details.group[open] > summary::after{ transform: rotate(180deg); }

/* --- Abstände innerhalb der Hauptboxen ---------------------------------- */
/* Erstes Element nach summary bleibt bündig */
details.group > summary + .section-card,
details.group > summary + .grid-top,
details.group > summary + *:is(section){
  margin-top: 0 !important;
}
/* Alle weiteren Top-Level-Geschwister innerhalb der Hauptbox: 25px Abstand. */
details.group > * + *{
  margin-top: 25px;
}

/* Sicherstellen: Nach dem 2-Spalten-Grid folgt „Initialer Auftrag“ mit 25px (nicht 16px aus .mt) */
details.group > .grid-top + .card,
details.group > .grid-top + .card.mt{
  margin-top: 25px !important;
}

/* Sub-Boxen innerhalb der Hauptboxen */
details.group .section-card{
  background: var(--card);
  color: var(--fg);
  border:1px solid var(--border);
  border-radius:0;
  padding:12px;
  margin-top: 10px;          /* Unterkante-Polster */
}
details.group .section-card + .section-card{ margin-top:25px; }

/* Untertitel in Sub-Boxen (einheitlich Main/Admin) – Desktop größer wie früher */
.h3{
  margin: 8px 0 6px;
  font-weight:700;
  font-size: 1.25rem; /* Desktop restored ~20px */
}
@media (max-width: 768px){
  .h3{ font-size: 1.0rem; }
}

/* ---------- NEU: Sub-Details „Rahmenbedingungen“ (zuklappbar) ---------- */
details.sub{
  background: var(--card);
  color: var(--fg);
  border:1px solid var(--border);
  border-radius:0;
  padding:12px;
  overflow: hidden; /* verhindert Durchscheinen von Inhalt im zugeklappten Zustand */
}
details.sub > summary{
  margin: 0 0 6px 0;
  font-weight:700;
  font-size: 1.25rem;   /* gleich wie .h3 Desktop */
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
@media (max-width: 768px){
  details.sub > summary{ font-size: 1.0rem; }
  /* Admin: Freitext-Box (collapsed) kompakt halten – Inhalt nicht anzeigen */
  #ragFreeTextBox:not([open]){ max-height: 44px; }
  #ragFreeTextBox:not([open]) > :not(summary){ display: none; }
}
details.sub > summary::-webkit-details-marker{ display:none; }
details.sub > summary::marker{ content:""; }
details.sub > summary::after{
  content:"▾";
  position:absolute;
  right: 6px; top: 2px;
  color:#444;
  transition: transform .15s ease;
}
details.sub[open] > summary::after{ transform: rotate(180deg); }

/* Auftragsverlauf: Summary im gleichen Stil wie .h3 */
details.card.log > summary{
  margin: 0 0 6px 0;
  font-weight:700;
  font-size: 1.25rem;  /* Desktop wie .h3 */
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:24px;
}
@media (max-width: 768px){
  details.card.log > summary{ font-size: 1.0rem; }
}
details.card.log > summary::-webkit-details-marker{ display:none; }
details.card.log > summary::marker{ content:""; }
details.card.log > summary::after{
  content:"▾";
  position:absolute;
  right:6px; top:2px;
  color:#444;
  transition: transform .15s ease;
}
details.card.log[open] > summary::after{ transform: rotate(180deg); }

/* Inhalt in „Rahmenbedingungen“: Grid für Sliders + Agents-Bereich */
.settings-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
}
@media (max-width:980px){
  .settings-grid{ grid-template-columns:1fr; }
}

.setting{
  background:#fff;
  border:1px solid var(--border);
  padding:10px;
}
.setting .label-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom:8px;
}
.setting .label-row .lbl{
  font-weight:600;
}
.value-badge{
  display:inline-block;
  min-width: 34px;
  padding:2px 8px;
  border:1px solid var(--border);
  background:#fff;
  text-align:center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* ---------- Utilities / Spacing ---------- */
.hide{ display:none !important; }
.row{ margin-top:8px; }        /* Standard-Topabstand für horizontale Reihen */
.mt{ margin-top:16px; }
.mt-s{ margin-top:12px; }
.mb{ margin-bottom:12px; }
.flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.space-between{ justify-content:space-between; }
.center{ align-items:center; }
.right{ display:flex; justify-content:flex-end; }
.gap8{ gap:8px; }
.muted{ color: var(--muted); }
.note{ color: var(--muted); font-size:13px; }

/* ---------- BÜNDIGKEITS-FIX: „Agents“-Card (falls alt) bündig mit „Input“ ---------- */
#topGrid > section.card{ margin-top:0 !important; }
#topGrid > section.card > :first-child{ margin-top:0 !important; padding-top:0 !important; }
#topGrid > section.card[aria-labelledby="agentsLabel"] > .flex:first-child{ margin-top:0 !important; }
#topGrid > section.card[aria-labelledby="agentsLabel"] .agents-list.row:first-of-type{ margin-top:0 !important; }
.section-card .h3 + .row{ margin-top:0 !important; }

/* Form Controls – eckig, weiß */
label{ font-weight:600; display:block; margin-bottom:6px; }
textarea, input[type="text"], input[type="search"], input[type="number"],
input[type="email"], select{
  width:100%;
  border:1px solid var(--border);
  border-radius:0;
  background:#fff;
  color:#111;
  padding:10px;
  font-size:14px;
  font-family: inherit;
}
textarea{ min-height:180px; resize:vertical; }

/* Speziell: readonly Textarea für „Initialer Auftrag“ mit Auto-Resize */
textarea.readonlyline{
  white-space: pre-wrap;
  overflow: hidden;       /* für Auto-Resize */
  resize: none;           /* vom Script gesteuert */
  min-height: 70px;       /* höher, damit es „sauber“ wirkt */
}

/* Einheitliche Placeholder (Main/Admin gleich) */
::placeholder{ color: var(--muted); opacity:1; }
::-webkit-input-placeholder{ color: var(--muted); }
::-moz-placeholder{ color: var(--muted); }
:-ms-input-placeholder{ color: var(--muted); }

/* Tipp-Zeile in „Input“ wie Placeholder stylen */
.small.subtle{
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
/* Normalize keyboard hints: inherit typography in tip lines */
.small.subtle kbd{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  border:0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Select: „Platzhalteroption“ ebenfalls muted */
select:has(option[value=""]:checked),
select:has(option:checked:disabled),
select:has(option:checked[data-placeholder="1"]){
  color: var(--muted);
}
select option[value=""],
select option[disabled],
select option[data-placeholder="1"]{
  color: var(--muted);
}

/* Buttons – eckig, Türkis (außer .link) */
.btn, label.btn{
  display:inline-block;
  padding:6px 12px;         /* global: gleiche Höhe wie Toggle-Buttons */
  border:0;
  border-radius:0;
  background: var(--brand);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  font-family: inherit;
}
.btn:hover, label.btn:hover{ filter: saturate(110%) brightness(1.02); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Link-Style-Buttons (neutral) */
.btn.link{ background:transparent; color:var(--fg); border:1px solid var(--border); }
.btn.link:hover{ background:#fff; }

/* Toggle-Buttons (Filter/Agents) */
.btn.toggle{
  background: transparent;
  border:1px solid var(--border);
  color: var(--fg);
  padding:6px 12px;
}
.btn.toggle.active{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}

/* Checkboxen/Radio in Türkis */
input[type="checkbox"], input[type="radio"]{ accent-color: var(--brand); }

/* ===========================================================
   RANGE/SLIDER Styling (RAG-Bezug, Freiheitsgrad) – Türkis-Fill
   =========================================================== */

/* Basis */
input[type="range"]{
  width: 100%;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  height: var(--thumb-size);          /* größerer Klickbereich */
  outline: none;
}

/* Füllstand: wird per JS über --_fill (0%..100%) gesetzt */
input[type="range"].has-fill{ --_fill: 0%; }

/* WebKit (Chrome, Edge(Chromium), Safari) */
input[type="range"].has-fill::-webkit-slider-runnable-track{
  height: var(--track-h);
  background:
    linear-gradient(to right,
      var(--brand) 0 var(--_fill),
      #dfe4e8 var(--_fill) 100%);
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  margin-top: calc((var(--track-h) - var(--thumb-size)) / 2);
  transition: box-shadow .15s ease, transform .1s ease;
}
input[type="range"]:hover::-webkit-slider-thumb{
  box-shadow: 0 0 0 6px var(--brand-25);
}
input[type="range"]:active::-webkit-slider-thumb{
  transform: scale(0.98);
}

/* Firefox */
input[type="range"]{ -moz-appearance: none; }
input[type="range"].has-fill::-moz-range-track{
  height: var(--track-h);
  background:
    linear-gradient(to right,
      var(--brand) 0 var(--_fill),
      #dfe4e8 var(--_fill) 100%);
  border-radius: 999px;
}
input[type="range"]::-moz-range-thumb{
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  transition: box-shadow .15s ease, transform .1s ease;
}
input[type="range"]:hover::-moz-range-thumb{
  box-shadow: 0 0 0 6px var(--brand-25);
}
input[type="range"]:active::-moz-range-thumb{
  transform: scale(0.98);
}

/* Legacy Edge / IE (Fallback) */
input[type="range"].has-fill::-ms-track{
  height: var(--track-h);
  background-color: #dfe4e8;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-thumb{
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
}

/* Focus States */
input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 6px var(--brand-25);
}
input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow: 0 0 0 6px var(--brand-25);
}

/* Disabled */
input[type="range"]:disabled{
  cursor: not-allowed;
  opacity: .6;
}
input[type="range"]:disabled.has-fill{ --_fill: 0%; }

/* ===== Zahlenanzeigen im „Rahmenbedingungen“-Bereich ausblenden ===== */
/* aktuelle Werte (im Label) & Badges */
#ragVal, #freeVal, #ragBadge, #freeBadge,
.setting .value-badge{
  display:none !important;
}
/* die Min/Max-Zahlen links/rechts vom Slider */
.settings-grid .setting:has(input[type="range"]) .flex.space-between{
  display:none !important;
}

/* Ergebnisblock – Platzhalter/Text */
.resultblock{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:0;
  background:#fff;
  font-size:14px;
  white-space:pre-wrap;
  color: var(--muted);
  font-family: inherit;
}
.resultblock:has(*){ color: var(--fg); }
.resultblock *{ font-family: inherit; }

/* Zeit/Datum-Badge im Ergebnis: dezent wie Textboxen */
.badge{
  font-size:14px;
  color: var(--muted);
  font-weight: 400;
}
.badge.loading::after{ content:" …"; animation: dots 1.2s steps(3,end) infinite; }
@keyframes dots { 0%{content:""} 33%{content:" ."} 66%{content:" .."} 100%{content:" ..."} }

/* Agents-Liste (Chip-Look) */
.agents-list{ display:flex; flex-wrap:wrap; gap:8px; }
.agents-list .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--border);
  border-radius:999px; background:#fff; color: var(--fg);
  user-select:none;
  font-weight: 400; /* NICHT fett in den Bubbles (überschreibt label{font-weight:600}) */
}
.agents-list input{ transform: translateY(1px); }

/* Footer – linksbündig, hellgrau, voller Viewport, 50px Seitenabstand */
.site-footer{
  margin: 40px -50px 0;      /* negative Seitenränder für volle Breite */
  padding: 24px 50px;
  background: var(--footer);
  border-top: 1px solid var(--border);
  color: var(--anth);        /* Footer-Text in Anthrazit */
}
/* Desktop: Footer wieder exakt am Body-Rand ausgerichtet */
@media (min-width: 769px){
  body{ margin: 32px 50px; }
  .site-footer{ margin: 40px -50px 0; padding: 24px 50px; }
}
/* Oben rechts: TST-Badge dezent, fixed */
body::after{
  content: 'TST';
  position: fixed;
  top: 6px; right: 8px;
  z-index: 2147483647; /* über allem */
  font-size: 11px;
  line-height: 1;
  color: #fff;
  background: #3C3C3C;
  padding: 3px 5px;
  border-radius: 3px;
  opacity: 0.75;
  pointer-events: none;
}
.site-footer .stack{ max-width: 680px; }
.site-footer .stack .h3{
  margin: 0 0 6px;
  font-weight: 400;          /* nicht fett */
  font-size: 26px;           /* ~10px größer als Subtitel */
}
.site-footer .sep{ height: 14px; }
.site-footer a:not(.btn){ color: var(--brand); text-decoration: none; }
.site-footer a:not(.btn):hover{ text-decoration: underline; }
.site-footer .btn{ text-decoration:none; color:#fff; } /* Kontakt-Button: weiße Schrift */

/* Responsive */
@media (max-width:980px){
  .grid-top{ grid-template-columns:1fr; }
  textarea{ min-height:160px; }
}

/* Hilfsklasse für a11y (ersetzt Inline-Style im HTML) */
.visually-hidden{
  position:absolute!important;
  height:1px; width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* ===========================================================
   Ergebnis-Felder (Management Summary, Datei, Annahmen, Quotes)
   =========================================================== */

/* Wenn strukturierte Ergebnis-Felder vorhanden sind:
   äußerer weißer „resultblock“ soll verschwinden → Felder direkt in grauer Card */
#result.resultblock:has(.result-fields){
  background: transparent;
  border: 0;
  padding: 0;
}

/* Grid für die einzelnen Ergebnis-Felder */
.result-fields{
  display: grid;
  gap: 12px;
  margin: 0;         /* keine zusätzliche Außenabstände */
  padding: 0;
}

/* --- Felder: weißer Hintergrund + kompakte Innenabstände --- */
.result-fields .field{
  background:#fff;
  border:1px solid var(--border);
  padding:8px 10px;            /* kompakt – kein großer Top/Bottom-Spacing */
}

/* Feldtitel – identischer Stil wie bei den einklappbaren Summarys */
.result-fields .ftitle{
  font-weight:700;
  font-size: 1.0rem;           /* einheitlich wie Quotes/Details */
  line-height: 1.35;
  margin:0 0 6px 0;            /* minimaler Abstand nach unten, oben 0 */
  color: var(--fg);
}

/* Inhalte: p/ul/ol Margins straffen; Top/Bottom des ersten/letzten Elements auf 0 */
.result-fields .fcontent{
  color: var(--fg);
  font-size:14px;
  line-height:1.45;
}
.result-fields .fcontent > *:first-child{ margin-top:0 !important; }
.result-fields .fcontent > *:last-child{ margin-bottom:0 !important; }
.result-fields .fcontent p{ margin: 0 0 10px; }
.result-fields .fcontent ul,
.result-fields .fcontent ol{
  margin: 0 0 10px 18px;
  padding-left: 18px;
}
.result-fields .fcontent ul:last-child,
.result-fields .fcontent ol:last-child{ margin-bottom:0; }

/* Sicherheitsnetz: entfernt eventuelle Außenabstände im Feld */
.result-fields .field > *:first-child{ margin-top:0; }
.result-fields .field > *:last-child{ margin-bottom:0; }

/* Headings im Content kompakter & ohne große Standard-Margins/Größen */
.result-fields .fcontent h1,
.result-fields .fcontent h2,
.result-fields .fcontent h3,
.result-fields .fcontent h4,
.result-fields .fcontent h5,
.result-fields .fcontent h6{
  margin:0 0 6px 0;
  font-size: 1rem;      /* nicht größer als der Feldtitel */
  font-weight:700;
  line-height:1.35;
}

/* Doppelte Headline im Content verstecken:
   1) erste Überschrift im Content  2) ein erster Absatz, der nur aus <strong>…</strong> besteht */
.result-fields .field .fcontent > :is(h1,h2,h3,h4,h5,h6):first-child{ display:none; }
.result-fields .field .fcontent > p:first-child:has(> strong:only-child){ display:none; }

/* --- Einklappbare Felder (Quotes, Annahmen) – weiß + kompakt --- */
details.result-fold{
  background:#fff;
  border:1px solid var(--border);
  padding:8px 10px;            /* identisch zu .field */
}
details.result-fold > summary{
  margin: 0;                   /* kein zusätzlicher Abstand oben */
  font-weight:700;
  font-size: 1.0rem;
  line-height:1.35;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 24px;         /* Platz für Pfeil rechts */
}
details.result-fold > summary::-webkit-details-marker{ display:none; }
details.result-fold > summary::marker{ content:""; }
details.result-fold > summary::after{
  content:"▾";
  position:absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color:#444;
  transition: transform .15s ease;
}
details.result-fold[open] > summary::after{
  transform: translateY(-50%) rotate(180deg);
}

/* Inhalt innerhalb der einklappbaren Felder – gleiche Abstände wie oben */
details.result-fold .fcontent{ margin-top:6px; }
details.result-fold .fcontent > *:first-child{ margin-top:0 !important; }
details.result-fold .fcontent > *:last-child{ margin-bottom:0 !important; }
details.result-fold .fcontent p{ margin:0 0 10px; }
details.result-fold .fcontent ul,
details.result-fold .fcontent ol{
  margin: 0 0 10px 18px;
  padding-left: 18px;
}
details.result-fold .fcontent ul:last-child,
details.result-fold .fcontent ol:last-child{ margin-bottom:0; }

/* Chat viewport: sync font to textarea (14px) */
.chat-viewport{ font-size:14px; max-height:60vh; min-height:180px; }
@media (max-width: 768px){ .chat-viewport{ max-height:55vh; } }
@media (max-width: 480px){ .chat-viewport{ max-height:50vh; } }

/* Chat Toolbar – Desktop exakte Ausrichtung und einheitliche Höhe */
.chat-toolbar{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.chat-toolbar .input-flex{ flex:1 1 auto; min-width:0; display:flex; align-items:center; }
.chat-toolbar .input-flex textarea{
  width:100%;
  height:40px; min-height:40px;
  padding:8px 10px; /* reduziert optisch, gleich mit Buttons */
  font-size:16px; resize:none; line-height:22px; /* vertikal mittig */
}
.chat-toolbar .right-tools{ display:flex; align-items:center; gap:8px; margin-left:8px; }
.chat-toolbar .btn{ min-height:40px; height:40px; display:inline-flex; align-items:center; }

/* Kantenbündigkeit: Toolbar nutzt gleiche Innenkante wie Chat-Viewport */
#chatHistoryBox .chat-toolbar{ margin-left:0; margin-right:0; }

/* Mobile-Speziallayout: 3 Zeilen – Input, Senden, Archiv/Löschen */
@media (max-width: 480px){
  .chat-actions{ display:flex; gap:10px; flex-direction: column; align-items: stretch; }
  #chatHistoryBox #chatInput{ font-size:16px; padding:10px 12px; min-height:44px; width:100%; }
  #chatHistoryBox #chatSend{ align-self:center; padding:10px 16px; min-width:56px; }
  #chatHistoryBox .mobile-actions-row{ display:flex; justify-content:center; gap:10px; }
  #chatHistoryBox #chatArchive, #chatHistoryBox #chatDelete{ padding:8px 12px; }
}

/* Topbar responsive – nur auf kleinen Screens sticky, Desktop unverändert */
@media (max-width: 768px){
  .topbar{ position:sticky; top:env(safe-area-inset-top,0); z-index:20; padding:8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
  .topbar .brandwrap{ display:flex; align-items:center; gap:8px; }
  /* Bug-042: Logo-Höhe an mobile Headline anpassen (Höhe ~ Buchstabe „V") */
  .topbar .brandmark{ height:23px; width:auto; }
  .mainnav-toggle{ display:block; }
  .mainnav-toggle .bar{ background: #111; } /* dunkler für iPhone Erkennbarkeit */
  /* Mobile dropdown: fit to content with 5px side padding, avoid overflow */
  .mainnav{ position:absolute; right:0; top:36px; background:#fff; border:1px solid var(--border); padding:8px 5px; display:none; flex-direction:column; gap:8px; width:max-content; max-width: calc(100vw - 10px); box-sizing:border-box; }
  .mainnav.open{ display:flex; }
  .mainnav .navlink{ padding:6px 8px; border-bottom:0; white-space:nowrap; }
  /* Safety: before JS init, force menu closed to avoid initial open state */
  body.is-nav-init .mainnav{ display:none; }
  /* Remove aggressive !important; let nav.js control .open state */
  .mainnav.open{ display:flex; }
}
/* Remove fixed 80vw width on very small screens; rely on max-content with max-width */
@media (max-width: 480px){ .mainnav{ width:auto; } }

/* Containerbreiten – Desktop unverändert (body-margin bleibt), nur auf Mobile etwas innen Padding ergänzen */
@media (max-width: 1024px){ main{ padding:8px; } }
@media (max-width: 768px){ main{ padding:6px; } }
@media (max-width: 480px){ main{ padding:4px; } }

/* Settings-Grid responsiv */
@media (max-width: 768px){ .settings-grid{ gap:8px; grid-template-columns:1fr !important; } }

/* Archivliste responsiv */
.result-field{ gap:8px; }
@media (max-width: 480px){ .result-field .small{ font-size:12px; } }