/* =============================================================================
 * Seitenpanel — kapselte Komponente (#iconpanel.seitenpanel-komponente)
 * Nur .seitenpanel-* Klassen; kein globales .profil-raster / .profil-karte
 * Scroll: ausschließlich .seitenpanel-scroll
 * ============================================================================= */

#ansicht-chat {
  min-height: 0;
  overflow: hidden;
}

#ansicht-chat #seiteMessenger.seite-messenger {
  flex: 1 1 0%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  max-height: 100%;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

#seiteMessenger .seite-messenger-inhalt {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

#iconpanel.seitenpanel-komponente {
  --seitenpanel-portraet: 72px;
  --seitenpanel-abstand: 10px;
  --seitenpanel-innen: 16px;
  --seitenpanel-breite: calc(var(--seitenpanel-portraet) + 2 * var(--seitenpanel-innen));

  flex: 0 0 var(--seitenpanel-breite);
  width: var(--seitenpanel-breite);
  min-width: var(--seitenpanel-breite);
  max-width: var(--seitenpanel-breite);
  box-sizing: border-box;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-right: 1px solid var(--linie, rgba(255, 255, 255, 0.08));
  background: var(--eingabe, rgba(12, 14, 20, 0.92));
  z-index: 4;
  isolation: isolate;
  contain: layout style;
}

/* —— Einziger Scroll-Owner —— */
#iconpanel.seitenpanel-komponente > .seitenpanel-scroll {
  flex: 1 1 0%;
  height: 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  padding-left: var(--seitenpanel-innen);
  padding-right: var(--seitenpanel-innen);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

#iconpanel.seitenpanel-komponente > .seitenpanel-scroll::-webkit-scrollbar {
  width: 4px;
}

#iconpanel.seitenpanel-komponente > .seitenpanel-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

#iconpanel.seitenpanel-komponente .seitenpanel-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--seitenpanel-portraet);
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}

#ansicht-chat.posteingang-zeigt-lobby #iconpanel.seitenpanel-komponente .seitenpanel-inhalt,
#iconpanel.seitenpanel-komponente .seitenpanel-inhalt[hidden] {
  display: none !important;
}

#iconpanel.seitenpanel-komponente .seitenpanel-stapel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--seitenpanel-portraet);
  margin: 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

#iconpanel.seitenpanel-komponente .seitenpanel-liste-huelle {
  display: block;
  width: 100%;
  max-width: var(--seitenpanel-portraet);
  margin: 0;
  padding: 0;
  overflow: visible;
  border: none;
  background: transparent;
}

#iconpanel.seitenpanel-komponente .seitenpanel-liste-huelle[hidden] {
  display: none !important;
}

#iconpanel.seitenpanel-komponente .seitenpanel-liste {
  display: grid;
  grid-template-columns: minmax(0, var(--seitenpanel-portraet));
  justify-items: center;
  align-content: start;
  justify-content: center;
  gap: var(--seitenpanel-abstand);
  width: 100%;
  max-width: var(--seitenpanel-portraet);
  margin: 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
  list-style: none;
}

#iconpanel.seitenpanel-komponente .seitenpanel-karte {
  display: block;
  grid-column: 1;
  justify-self: center;
  width: var(--seitenpanel-portraet);
  height: var(--seitenpanel-portraet);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}

#iconpanel.seitenpanel-komponente .seitenpanel-karte .seitenpanel-kreis,
#iconpanel.seitenpanel-komponente .seitenpanel-karte .seitenpanel-bild {
  pointer-events: none;
}

#iconpanel.seitenpanel-komponente .seitenpanel-kreis {
  position: relative;
  display: block;
  width: var(--seitenpanel-portraet);
  height: var(--seitenpanel-portraet);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: var(--schattenKlein, 0 2px 8px rgba(0, 0, 0, 0.35));
}

#iconpanel.seitenpanel-komponente .seitenpanel-bild {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  box-sizing: border-box;
  border: 2px solid var(--oberflaeche, rgba(255, 255, 255, 0.12));
  box-shadow: none;
}

#iconpanel.seitenpanel-komponente .seitenpanel-karte--aktiv .seitenpanel-kreis {
  box-shadow: 0 0 0 3px var(--akzent, #818cf8);
}

#iconpanel.seitenpanel-komponente .seitenpanel-karte--aktiv .seitenpanel-bild {
  border-color: transparent;
}

#iconpanel.seitenpanel-komponente .seitenpanel-status-punkt {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 11px;
  height: 11px;
  z-index: 2;
  pointer-events: none;
  background: var(--live, #4ade80);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--oberflaeche, rgba(12, 14, 20, 0.95));
}

#iconpanel.seitenpanel-komponente .seitenpanel-status-punkt--offline {
  background: rgba(0, 0, 0, 0.45);
}

/* Schnellwahl (Gruppenköpfe im Panel) */
#iconpanel.seitenpanel-komponente #mobil-schweb-chat-koepfe.seitenpanel-schnellwahl {
  display: none;
  flex: none;
  flex-direction: unset;
  align-items: unset;
  align-self: unset;
  max-width: var(--seitenpanel-portraet);
  grid-template-columns: minmax(0, var(--seitenpanel-portraet));
  justify-items: center;
  gap: var(--seitenpanel-abstand);
  width: 100%;
  margin: 0 auto var(--seitenpanel-abstand);
  padding: 0;
  overflow: visible;
  -webkit-overflow-scrolling: auto;
  scrollbar-width: auto;
}

#iconpanel.seitenpanel-komponente #mobil-schweb-chat-koepfe.seitenpanel-schnellwahl.seitenpanel-schnellwahl--sichtbar {
  display: grid;
}

#iconpanel.seitenpanel-komponente .seitenpanel-schnellwahl-kopf {
  grid-column: 1;
  justify-self: center;
  width: var(--seitenpanel-portraet);
  height: var(--seitenpanel-portraet);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  filter: none;
}

#iconpanel.seitenpanel-komponente .seitenpanel-schnellwahl-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--oberflaeche, rgba(255, 255, 255, 0.12));
  box-sizing: border-box;
}

#iconpanel.seitenpanel-komponente .seitenpanel-schnellwahl-bild img,
#iconpanel.seitenpanel-komponente .seitenpanel-schnellwahl-bild svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

#iconpanel.seitenpanel-komponente .seitenpanel-schnellwahl-kopf--aktiv .seitenpanel-schnellwahl-bild {
  box-shadow: 0 0 0 3px var(--akzent, #818cf8);
}

/* Schnellblick-Kontakte im Panel */
#iconpanel.seitenpanel-komponente .seitenpanel-schnellblick {
  display: grid;
  grid-template-columns: minmax(0, var(--seitenpanel-portraet));
  justify-items: center;
  gap: var(--seitenpanel-abstand);
  width: 100%;
  margin: 0 0 var(--seitenpanel-abstand);
  padding: 0;
  overflow: visible;
}

#iconpanel.seitenpanel-komponente .seitenpanel-schnellblick[hidden] {
  display: none !important;
}

#iconpanel.seitenpanel-komponente .seitenpanel-schnellblick-knopf {
  grid-column: 1;
  justify-self: center;
  width: var(--seitenpanel-portraet);
  height: var(--seitenpanel-portraet);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

#iconpanel.seitenpanel-komponente .seitenpanel-schnellblick-ring {
  width: var(--seitenpanel-portraet);
  height: var(--seitenpanel-portraet);
  margin: 0 auto;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
}

#iconpanel.seitenpanel-komponente .seitenpanel-schnellblick-ring img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Kopf-Werkzeuge (Messenger, außerhalb Panel-Inhalt) */
.iconpanel-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--textLeise, rgba(255, 255, 255, 0.55));
  cursor: pointer;
  touch-action: manipulation;
}

.iconpanel-knopf--aktiv {
  background: var(--akzentWeich, rgba(99, 102, 241, 0.22));
  color: var(--akzent, #818cf8);
}

.iconpanel-knopf-symbol svg {
  display: block;
  width: 24px;
  height: 24px;
}

#ansicht-chat.gruppenchat-zeigt-online #iconpanel-videocall {
  background: var(--akzentWeich, rgba(99, 102, 241, 0.22));
  color: var(--akzent, #818cf8);
}

@media (max-width: 380px) {
  #iconpanel.seitenpanel-komponente {
    --seitenpanel-portraet: 64px;
    --seitenpanel-innen: 14px;
  }
}