/* APXCall — Anruf-Overlay (B775). Prefix apxc-, keine Klasse ausserhalb. */
.apxc {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  width: 340px; max-width: calc(100vw - 24px);
  font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
}
.apxc-card {
  background: #1b1d2a; border: 1px solid #232537; border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
}
.apxc-who { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.apxc-name {
  font-family: 'Outfit', system-ui, sans-serif; font-size: 18px; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apxc-status { font-size: 13px; color: #b7b9c9; }
.apxc-timer { font-size: 13px; color: #35d0c5; font-variant-numeric: tabular-nums; }
.apxc-ring {
  width: 12px; height: 12px; border-radius: 50%; background: #35d0c5; margin-bottom: 6px; opacity: 0;
}
.apxc[data-phase="ringing"] .apxc-ring,
.apxc[data-phase="incoming"] .apxc-ring { opacity: 1; animation: apxc-pulse 1.2s ease-out infinite; }
.apxc[data-phase="reconnecting"] .apxc-status { color: #f5b942; }
@keyframes apxc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 208, 197, .6); }
  100% { box-shadow: 0 0 0 16px rgba(53, 208, 197, 0); }
}
.apxc-note {
  font-size: 13px; line-height: 1.45; color: #ffd9a8; background: rgba(245, 185, 66, .1);
  border: 1px solid rgba(245, 185, 66, .35); border-radius: 12px; padding: 8px 10px;
}
.apxc-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.apxc-b {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; color: #d9dbe7; font: inherit; font-size: 12px; cursor: pointer; padding: 0;
  min-width: 64px;
}
.apxc-b .apxc-ic {
  width: 52px; height: 52px; padding: 14px; box-sizing: border-box; border-radius: 50%;
  background: #232537; stroke-width: 1.8;
}
.apxc-b:hover .apxc-ic { background: #2c2f45; }
.apxc-b:focus-visible { outline: none; }
.apxc-b:focus-visible .apxc-ic { box-shadow: 0 0 0 3px rgba(53, 208, 197, .6); }
.apxc-b-accept .apxc-ic { background: #1fb57a; color: #fff; }
.apxc-b-accept:hover .apxc-ic { background: #23c887; }
.apxc-b-hangup .apxc-ic { background: #e5484d; color: #fff; }
.apxc-b-hangup:hover .apxc-ic { background: #f05a5f; }
.apxc-b[aria-pressed="true"] .apxc-ic { background: #fff; color: #14141e; }
.apxc-media { position: relative; margin: -18px -18px 0; background: #14141e; aspect-ratio: 4 / 3; }
.apxc-media[hidden] { display: none; }
.apxc-remote { width: 100%; height: 100%; object-fit: cover; display: block; background: #14141e; }
.apxc-local {
  position: absolute; right: 10px; bottom: 10px; width: 28%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: #0e0f16; transform: scaleX(-1);
}
.apxc-audio { display: none; }
.apxc-ic { display: block; }
@media (max-width: 600px) {
  .apxc { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .apxc:has(.apxc-media:not([hidden])) { top: 12px; }
  .apxc:has(.apxc-media:not([hidden])) .apxc-card { height: 100%; box-sizing: border-box; }
  .apxc:has(.apxc-media:not([hidden])) .apxc-media { flex: 1; aspect-ratio: auto; }
}
/* Kopf-Knoepfe im Messenger (app.js openDmChat, nur mobil sichtbar): eigene Zeile unter "Direct message" */
.ch-calls { display: flex; gap: 6px; margin-top: 4px; }
.ch-calls[hidden] { display: none; }
.ch-callb {
  background: rgba(255, 255, 255, .06); border: 0; color: inherit; cursor: pointer; padding: 4px 10px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ch-callb .apxc-ic { width: 18px; height: 18px; stroke-width: 1.8; }
.ch-callb:hover { background: rgba(255, 255, 255, .08); }
.ch-callb:focus-visible { outline: 2px solid rgba(53, 208, 197, .7); outline-offset: 1px; }
/* Profil-Karte im Messenger (Desktop): Call / Video unter "View Profile" */
.mp-calls { display: flex; gap: 10px; margin-top: 12px; }
.mp-calls[hidden] { display: none; }
.mp-call {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 41px; background: none; color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.mp-call .apxc-ic { width: 18px; height: 18px; stroke-width: 1.8; }
.mp-call:hover { background: #35d0c5; border-color: #35d0c5; color: #14141e; }
.mp-call:focus-visible { outline: 2px solid rgba(53, 208, 197, .8); outline-offset: 2px; }