/**
 * idf-app-service-panel - die Hülle des rechten Panels
 *
 * Rechte Entsprechung zur linken `app-sidebar`: eine feste Schiene am
 * Bildschirmrand, die auf- und zuklappt und ihren Platz als `body`-Padding
 * reserviert. Was DRIN steht, weiß diese Datei nicht - sie kennt nur die
 * Schiene, ihren Zustand und den Platz.
 *
 * Hieß bis #660 `app-toni-panel`. Der Name war schon damals falsch: der
 * Baustein war nie Toni-spezifisch, er trug nur zufällig den Namen seines
 * ersten Bewohners. Mit der Hilfe (#660) zieht ein zweiter ein, und deshalb
 * ist die Hülle jetzt ein eigener Baustein mit eigenem Namen.
 *
 * **Genau ein Inhalt ist offen.** Das `body`-Padding hängt an EINEM Zustand:
 * zwei unabhängige Panels würden ihre Paddings addieren (Inhalt rutscht
 * doppelt weg) oder sich überschreiben (Inhalt läuft unter das offene
 * Panel). Der Zustand steht als `html[data-service-panel="<id>"]`, ohne
 * Attribut ist zu.
 *
 * Die Inhalte bringen ihr eigenes Markup mit, inklusive Kopfzeile und
 * Einklapp-Knopf. Diese Datei stylt davon nichts.
 */

:root {
  /* 0 statt der frueheren 56 px (#639): eingeklappt ist vom Panel nichts mehr
     zu sehen, weil seine Launcher im Header stehen. Die Schiene hielt sonst
     dauerhaft Inhaltsbreite fuer einen einzigen Knopf. */
  --idf-service-panel-w-collapsed: 0px;
  --idf-service-panel-w-expanded: 380px;
  --idf-service-panel-w: var(--idf-service-panel-w-collapsed);
}

/* Attribut GESETZT und nicht leer = ein Inhalt ist offen. Der Wert ist die
   Inhalts-Id (`agent`, `hilfe`, …); wer nur wissen will, OB offen ist,
   fragt das Attribut ohne Wert ab. */
html[data-service-panel]:not([data-service-panel=""]) {
  --idf-service-panel-w: var(--idf-service-panel-w-expanded);
}

/* Padding nur, wenn ueberhaupt ein Inhalt registriert ist (das JS setzt das
   Attribut erst dann). Zugeklappt sind das 0 px - die Regel bleibt trotzdem
   stehen, weil sie den weichen Uebergang traegt. */
html[data-service-panel] body {
  padding-right: var(--idf-service-panel-w);
  transition: padding-right var(--motion-medium, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}


/* === Schiene ============================================================== */

.idf-service-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--idf-service-panel-w);
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border-left: 1px solid var(--line, #e5e5e5);
  z-index: var(--z-sticky, 10);
  overflow: hidden;
  transition: width var(--motion-medium, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.idf-service-panel[data-state="expanded"] {
  width: var(--idf-service-panel-w-expanded);
}

/* Zugeklappt ist die Schiene 0 px breit (#639). Ohne diese Regel bliebe ihre
   linke Rahmenlinie als 1-px-Strich am rechten Bildschirmrand stehen - ein
   Strich, den niemand zuordnen kann. */
.idf-service-panel[data-state="collapsed"] {
  border-left: 0;
}

/* Je Inhalt ein Wirt. Nur der aktive ist sichtbar; die uebrigen bleiben im
   DOM, damit ein Wechsel nichts wegwirft (der Agent verlaere sonst seinen
   Chat-Verlauf, die Hilfe ihre Scroll-Position). */
.idf-service-panel-host {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.idf-service-panel-host[hidden] {
  display: none;
}

/* === Launcher im Header ====================================================
   Ein Knopf je Inhalt, gerendert in den Header-Slot
   `[data-header-slot="service"]`. Sie tragen `.idf-app-header-tool` und damit
   die Geometrie der uebrigen Icon-Werkzeuge (Suche, Glocke): gleiche Groesse,
   gleicher Hover, gleicher Fokus-Ring.

   ICONS, KEINE PORTRAITS (Joerg 21.08.2026, #639). Ein rundes Agenten-Foto
   neben dem runden Foto des angemeldeten Menschen liest sich als zweiter
   Nutzer. Rund ist hier der Mensch, eckig das Werkzeug. Wer der Agent ist,
   sagt der Tooltip; sein Foto steht im Kopf des geoeffneten Panels.

   Eigene Regeln braucht der Launcher deshalb nicht. Die Klasse
   `.idf-service-launch` bleibt als Griff fuers JS (aria-expanded,
   is-popover-open).
   ========================================================================= */


/* === Mobile ===============================================================
   Wie die Sidebar: das Panel ueberlagert statt zu schieben. */
@media (max-width: 720px) {
  body {
    padding-right: 0;
  }
  .idf-service-panel {
    transform: translateX(100%);
  }
  .idf-service-panel[data-state="expanded"] {
    transform: translateX(0);
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.25));
  }
}

/* === Handy: gar kein Panel ================================================
   Am Handy gibt es das Panel nicht (#450, Joerg nach dem Blick aufs Geraet).
   Die frueher eingeklappte Schiene war 48 px breit und nahm auf einem
   375-px-Bildschirm 13 % der Breite weg - dauerhaft, fuer einen Einstieg,
   den man dort nicht benutzt. Die Karten der Liste endeten sichtbar vor dem
   rechten Rand.

   Beides muss weg: das Panel selbst UND das `padding-right` am body, das den
   Platz reserviert. Nur eins von beiden zu nehmen hinterlaesst entweder
   einen leeren Streifen oder ein Panel ueber dem Inhalt.

   Steht bewusst am DATEIENDE: `.idf-service-panel { display: flex }` weiter
   oben hat dieselbe Spezifitaet, und bei Gleichstand gewinnt die spaetere
   Regel. Ein Media-Query aendert daran nichts.
   ========================================================================= */
@media (max-width: 720px) {
  .idf-service-panel { display: none; }
  html[data-service-panel] body { padding-right: 0; }
}