/* shared/ordner-picker.css — Aussehen des geteilten Ordner-Pickers.
 * (Spec 2026-09-11 §3, Bildschirm 2 des freigegebenen Entwurfs.)
 *
 * ── Warum diese Datei alles selbst setzt ────────────────────────────
 * Das Bauteil laeuft auf VIER Flaechen, und die laden nicht dieselben
 * Stilblaetter: die Chatseite bringt nur ``theme.css`` mit — weder
 * ``components.css`` (dort stehen ``.atr-modal`` und ``.btn``) noch
 * ``tokens.css``. Genau daran ist der Ziel-Picker schon einmal
 * auseinandergelaufen (560 px auf der Agentenflaeche, 620 px im Chat).
 * Deshalb steht hier jede Regel, die der Dialog braucht, unter dem
 * eigenen Praefix ``op-``; von aussen kommen nur die Merkmale, die
 * ``modal.js`` sucht (``.atr-modal``, ``[data-modal-close]``) und die
 * Wartepunkte aus ``companion-motion.css`` (``.cm-typing``).
 *
 * Farben und Radien ausschliesslich aus ``theme.css``/``tokens.css`` —
 * und nur Namen, die in BEIDEN stehen. Kein Hexwert: die einzige
 * Ausnahme waere die Blende, und die schreibt sich als ``rgba``, weil
 * ein Schleier keine Themenfarbe ist (dieselbe Zeile wie in
 * components.css).
 */

/* ── Rahmen ───────────────────────────────────────────────────────── */

/* Der Picker liegt UEBER allem, was ihn oeffnet. Gemessen an den
   Wirtsflaechen: „Mein Wissen" im Chat 1260, der Modal-Wirt des Chats
   2000, der Ziel-Wirt der Agentenflaeche 2200. ``--z-modal`` (60) waere
   unter jedem davon gelandet — der Dialog stand hinter der Flaeche, die
   ihn gerufen hat. Darum eine eigene Stufe mit 2300 als Boden; wer die
   Zahl senkt, schiebt den Picker wieder unter einen dieser drei. */
.op-host {
  position: fixed;
  inset: 0;
  z-index: var(--z-picker, 2300);
  display: grid;
  place-items: center;
  padding: 16px;
}

/* Stumm in zwei Lagen: die Blende laesst den Mausdruck durch, der Wirt
   faengt ihn mit ``@mousedown.self.prevent.stop`` ab. Ein Klick daneben
   darf den halb gewaehlten Ordner nicht wegwerfen. */
.op-blende {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  pointer-events: none;
}

html.dark .op-blende { background: rgba(0, 0, 0, 0.72); }

.op-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(920px, 100%);
  max-height: min(680px, calc(100vh - 32px));
  overflow: hidden;
  background: var(--surface, var(--card));
  color: var(--ink, var(--text-primary));
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-sm);
  animation: op-auf 140ms ease-out;
}

/* Der Koerper nimmt beim Oeffnen den Fokus (``tabindex="-1"``), damit
   Tab-Falle und Tastenschicht ab der ersten Sekunde leben. Er ist ein
   Behaelter und kein Bedienteil — ein Ring um den ganzen Dialog waere
   eine Falschmeldung. Ueber Tab erreichbar ist er nie. */
.op-modal:focus { outline: none; }

@keyframes op-auf {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

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

/* ── Kopf ─────────────────────────────────────────────────────────── */

.op-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--hair-2, var(--border));
  flex: none;
}

.op-titel {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink, var(--text-primary));
}

.op-untertitel {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-muted);
}

.op-schliessen {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r, 10px);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}

.op-schliessen:hover { background: var(--bg-hover); color: var(--ink, var(--text-primary)); }
.op-schliessen:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* ── Koerper: Quellen links, Ebene rechts ─────────────────────────── */

.op-koerper {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  min-height: 0;
  flex: 1 1 auto;
}

.op-quellen {
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  overflow-y: auto;
  border-right: 1px solid var(--hair-2, var(--border));
  background: var(--paper-2, var(--surface-2));
}

/* Nur die Kacheln rollen quer, nicht die Saetze darunter (schmale
   Fenster, siehe unten). Deshalb ein eigener Kasten. */
.op-quellen-band {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.op-spalten-titel {
  margin: 0 0 8px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.op-quelle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r, 10px);
  background: transparent;
  color: var(--ink, var(--text-primary));
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.op-quelle:hover { background: var(--bg-hover); }
.op-quelle:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }

.op-quelle.is-aktiv {
  background: var(--accent-soft);
  color: var(--accent-strong, var(--accent));
  font-weight: 600;
}

.op-quelle-zeichen {
  flex: none;
  display: inline-flex;
  color: var(--fg-muted);
}

.op-quelle.is-aktiv .op-quelle-zeichen { color: var(--accent); }

.op-quelle-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-spalte {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 18px 0;
}

/* ── Suche ────────────────────────────────────────────────────────── */

.op-suche-feld {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r, 10px);
  background: var(--paper, var(--surface-1));
}

.op-suche-feld:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.op-suche-zeichen { display: inline-flex; color: var(--fg-muted); }

.op-suche {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--ink, var(--text-primary));
  font: inherit;
  font-size: 0.875rem;
}

.op-suche:focus,
.op-suche:focus-visible { outline: none; }

/* ── Brotkrumen ───────────────────────────────────────────────────── */

.op-brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 10px 0 8px;
  font-size: 0.8125rem;
}

.op-krume-huelle { display: inline-flex; align-items: center; gap: 2px; }

.op-krume {
  padding: 3px 8px;
  border: 0;
  border-radius: var(--r-sm, 8px);
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  cursor: pointer;
}

.op-krume:hover { background: var(--bg-hover); color: var(--ink, var(--text-primary)); }
.op-krume:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }

/* Die letzte Krume ist kein Knopf: sie fuehrt dorthin, wo man steht. */
.op-krume--hier {
  color: var(--ink, var(--text-primary));
  font-weight: 600;
  cursor: default;
}

.op-krume--hier:hover { background: transparent; }

.op-krume-teiler { color: var(--fg-muted); opacity: 0.6; }

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

.op-liste {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.op-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r, 10px);
  cursor: pointer;
}

.op-zeile:hover { background: var(--bg-hover); }

.op-zeile.is-marke {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}

.op-zeile-zeichen { flex: none; display: inline-flex; color: var(--accent); }

.op-zeile-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }

.op-zeile-name {
  font-size: 0.875rem;
  color: var(--ink, var(--text-primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-zeile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--fg-muted);
}

.op-zu-gross {
  padding: 1px 7px;
  border-radius: var(--r-full, 999px);
  background: var(--warn-tint);
  color: var(--warn);
  font-weight: 600;
}

/* Der Chevron OEFFNET — er ist ein Knopf mit eigenem Namen, kein
   Zierat. Der Klick auf die Zeile markiert nur. */
.op-zeile-pfeil {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm, 8px);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}

.op-zeile-pfeil:hover { background: var(--bg-hover); color: var(--ink, var(--text-primary)); }
.op-zeile-pfeil:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }

.op-haken {
  flex: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 8px);
  background: var(--paper, var(--surface-1));
  color: var(--accent-on);
}

.op-haken.is-an { background: var(--accent); border-color: var(--accent); }

/* ── Zustaende ────────────────────────────────────────────────────── */

.op-warten {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.op-leer,
.op-gekuerzt {
  margin: 10px 2px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.op-fehler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--warn);
  border-radius: var(--r, 10px);
  background: var(--warn-tint);
  color: var(--ink, var(--text-primary));
  font-size: 0.8125rem;
  line-height: 1.5;
}

.op-nochmal {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 8px);
  background: var(--paper, var(--surface-1));
  color: var(--ink, var(--text-primary));
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.op-tastatur {
  flex: none;
  margin: 0;
  padding: 8px 2px 12px;
  border-top: 1px solid var(--hair-2, var(--border));
  font-size: 0.75rem;
  color: var(--fg-muted);
}

/* ── Gesammelte Ordner (Mehrfach-Modus) ───────────────────────────── */
/* Ein Ordner aus einer anderen Ebene oder aus dem Pfad-Feld steht sonst
   nirgends im Bild — der Zaehler im Knopf sagt „3", zeigt aber nicht,
   welche drei. */

.op-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 10px 22px;
  border-top: 1px solid var(--hair-2, var(--border));
}

.op-chips-titel {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg-muted);
}

.op-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 240px;
  padding: 3px 4px 3px 10px;
  border-radius: var(--r-full, 999px);
  background: var(--accent-soft);
  color: var(--accent-strong, var(--accent));
  font-size: 0.75rem;
}

.op-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-chip-weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full, 999px);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.op-chip-weg:hover { background: var(--bg-hover); }
.op-chip-weg:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }

/* ── Pfad eintippen ───────────────────────────────────────────────── */

.op-pfad {
  flex: none;
  padding: 12px 22px;
  border-top: 1px solid var(--hair-2, var(--border));
  background: var(--paper-2, var(--surface-2));
}

.op-pfad-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: var(--fg-muted);
}

.op-pfad-reihe { display: flex; gap: 8px; }

.op-pfad-feld {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r, 10px);
  background: var(--paper, var(--surface-1));
  color: var(--ink, var(--text-primary));
  font-family: var(--mono, var(--font-mono));
  font-size: 0.8125rem;
}

.op-pfad-feld:focus,
.op-pfad-feld:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ── Fuss ─────────────────────────────────────────────────────────── */

.op-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 12px 22px;
  border-top: 1px solid var(--hair-2, var(--border));
  background: var(--paper-2, var(--surface-2));
}

/* Die Reihenfolge im Bild ist nicht die im Markup: der Wurzel-Satz steht
   dort ZUERST, damit er im schmalen Fenster (unten) ohne zweiten
   Knotenbaum in seine eigene Zeile ueber die Knoepfe rutschen kann. */
.op-pfad-knopf { order: 0; margin-right: auto; }
.op-wurzel-hinweis { order: 1; }
.op-abbrechen { order: 2; }
.op-nehmen { order: 3; }

.op-wurzel-hinweis {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--fg-muted);
}

.op-knopf {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r, 10px);
  background: var(--paper, var(--surface-1));
  color: var(--ink, var(--text-primary));
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.op-knopf:hover { background: var(--bg-hover); }
.op-knopf:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

.op-knopf--still { border-color: transparent; background: transparent; color: var(--fg-muted); }
.op-knopf--still:hover { background: var(--bg-hover); color: var(--ink, var(--text-primary)); }

.op-knopf--primaer {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
}

.op-knopf--primaer:hover { background: var(--accent-strong, var(--accent)); }

.op-knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
.op-knopf--primaer[disabled]:hover { background: var(--accent); }

/* ── Schmale Fenster: die Quellen wandern nach oben ───────────────── */

@media (max-width: 720px) {
  .op-host { padding: 8px; }
  .op-koerper { grid-template-columns: minmax(0, 1fr); }
  .op-quellen {
    overflow-y: visible;
    border-right: 0;
    border-bottom: 1px solid var(--hair-2, var(--border));
  }
  .op-spalten-titel { display: none; }
  /* Nur das Band rollt quer. Die Kacheln behalten ihre Groesse
     (``flex: 0 0 auto``) — mit ``flex: 1`` waeren sie auf 420 px zu
     Schnipseln gequetscht —, und die Saetze darunter stehen ausserhalb
     des Bandes, sonst haetten sie den Rollweg mitverlaengert. */
  .op-quellen-band { flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
  .op-quelle { flex: 0 0 auto; width: auto; white-space: nowrap; }
  .op-quelle-name { max-width: 180px; }
  .op-spalte { padding: 12px 12px 0; }
  .op-kopf { padding: 14px 14px 12px; }
  .op-chips, .op-pfad, .op-fuss { padding-left: 14px; padding-right: 14px; }
  .op-modal { max-height: calc(100vh - 16px); }
  /* Der Wurzel-Satz bekommt seine eigene volle Zeile ueber den
     Knoepfen; sonst draengt er sie aus dem Fenster. */
  .op-wurzel-hinweis { order: -1; flex: 1 0 100%; }
  /* Drei Knoepfe passen hier nicht nebeneinander. Statt den
     Primaerknopf als Rest in eine halbe Zeile zu quetschen, bekommt er
     die ganze — er ist die Haupttat. */
  .op-nehmen { flex: 1 0 100%; }
  .op-pfad-reihe { flex-wrap: wrap; }
}