:root{
      --uc-mini-h: 56px;
      --uc-mini-safe-top: 0px;
      --uc-mini-expanded-safe-gap: 0px;
      --uc-mini-top-expanded: 0px;
      --uc-mini-top-collapsed: 0px;
      /* sichtbarer "Grip" im eingeklappten Zustand (nahezu unsichtbar) */
      /* Hitbox bleibt angenehm (klickbar), visuell ist es trotzdem fast weg */
      --uc-mini-peek-h: 14px;
      --uc-mini-bg: rgba(20, 16, 32, .78);
      --uc-mini-border: rgba(255,255,255,.14);
      --uc-mini-shadow: 0 10px 28px rgba(0,0,0,.55);
      --uc-mini-radius: 16px;
      --uc-mini-text: rgba(255,255,255,.92);
      --uc-mini-sub: rgba(208, 194, 235, .88);
    }

    /* Platz schaffen, wenn Mini-Player sichtbar ist */
    .app-main-container{
      padding-top: var(--uc-mini-offset, 0px);
      transition: padding-top .15s ease;
    }

    .uc-mini-player{
      position: fixed;
      top: var(--uc-mini-top-expanded);
      left: 0;
      right: 0;
      z-index: 9100;
      height: calc(var(--uc-mini-h) + var(--uc-mini-safe-top) + var(--uc-mini-expanded-safe-gap));
      padding-top: 0;
      border-radius: 0;
      border: 0;
      border-bottom: 1px solid var(--uc-mini-border);
      background: var(--uc-mini-bg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: var(--uc-mini-shadow);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: calc(var(--uc-mini-safe-top) + var(--uc-mini-expanded-safe-gap)) 10px 10px;
      overflow: hidden;
      transform: translateY(0);
      transition: transform .18s ease;
      will-change: transform;
      /* Mobile: horizontales Wischen für Spulen (JS), vertikal darf weiter scrollen */
      touch-action: pan-y;
    }

    .uc-mini-player[hidden]{ display:none; }

    /* Nur iOS App-WebView: leichter Abstand zur Notch im Expanded-State */
    body.uc-ios-webview{
      --uc-mini-safe-top: max(27px, min(40px, env(safe-area-inset-top, 0px)));
      --uc-mini-expanded-safe-gap: 1px;
      --uc-mini-top-expanded: 0px;
      --uc-mini-top-collapsed: max(18px, calc(env(safe-area-inset-top, 0px) - 10px));
    }

    .uc-mini-cover{
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: linear-gradient(136deg, var(--uu-color-accent, #fe3a82) 0%, #ad78b8 100%);
      flex: 0 0 40px;
      display: grid;
      place-items: center;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,.6);
    }
    .uc-mini-cover img{ width:100%; height:100%; object-fit: cover; display:block; }
    .uc-mini-cover .material-icons{ color:var(--uu-color-white, #fff); font-size: 20px; opacity: .95; }

    .uc-mini-meta{
      min-width: 0;
      flex: 1;
      display:flex;
      flex-direction: column;
      gap: 2px;
    }
    .uc-mini-title{
      font-weight: 900;
      font-size: .92rem;
      color: var(--uc-mini-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.1;
    }
    .uc-mini-subline{
      font-size: .78rem;
      color: var(--uc-mini-sub);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.1;
    }

    .uc-mini-actions{
      display:flex;
      align-items:center;
      gap: 8px;
      flex: 0 0 auto;
    }

    .uc-mini-listeners{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-right: 4px;
    }
    .uc-mini-player .listener-avatar{
      width: 22px;
      height: 22px;
      border-radius: 999px;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.22);
      transition: opacity .18s ease, filter .18s ease, box-shadow .18s ease;
    }
    /* Keep Host/Joiner visually distinct (matches Together page). */
    .uc-mini-player .listener-avatar[data-listener="me"]{
      border-color: rgba(254,58,130,.55);
      background: rgba(254,58,130,.16);
    }
    .uc-mini-player .listener-avatar[data-listener="partner"]{
      border-color: rgba(113,255,167,.55);
      background: rgba(113,255,167,.14);
    }
    .uc-mini-player .listener-avatar img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .uc-mini-player .listener-initial{
      font-size: 10px;
      font-weight: 700;
      color: var(--uu-color-white, #fff);
      letter-spacing: .04em;
    }
    .uc-mini-player .listener-avatar.is-inactive{
      opacity: .45;
      filter: grayscale(100%);
    }
    .uc-mini-player .listener-avatar.is-active{
      opacity: 1;
      filter: none;
      box-shadow:
        0 0 0 2px rgba(254, 58, 130, 0.36),
        0 0 8px rgba(254, 58, 130, 0.42);
    }
    .uc-mini-player .listener-avatar[data-listener="partner"].is-active{
      box-shadow:
        0 0 0 2px rgba(113, 255, 167, 0.34),
        0 0 8px rgba(113, 255, 167, 0.40);
    }

    /* v13: "Open"-Button ausblenden – Mini-Player soll nicht zur Podcast-Seite navigieren */
    #uc-mini-open{ display:none !important; }

    .uc-mini-btn{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: var(--uu-color-white, #fff);
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    .uc-mini-btn:active{ transform: scale(.98); }
    .uc-mini-btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
    .uc-mini-btn .material-icons{ font-size: 22px; }


    .uc-mini-progress{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 18px;              /* großer Touch-Bereich */
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: ew-resize;
      touch-action: none;         /* wir scrubben selbst */
      -webkit-tap-highlight-color: transparent;
    }
    .uc-mini-progress-track{
      position: relative;
      width: calc(100% - 22px);
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,.16);
      overflow: visible;
    }
    #uc-mini-progress-bar{
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--uu-color-accent, #fe3a82), #ffb86c);
      transition: width .10s linear;
    }
    .uc-mini-progress-knob{
      position: absolute;
      top: 50%;
      left: 0%;
      width: 14px;
      height: 14px;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      background: rgba(255,255,255,.92);
      box-shadow: 0 10px 24px rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.22);
      pointer-events: none;
    }
    body.uc-mini-scrubbing #uc-mini-progress-bar{ transition: none; }
    /* Klickbarer Griff (sichtbar im eingeklappten Zustand) – super simpel: nur ein kleiner "Grip" (Tap = ausklappen) */
    .uc-mini-handle{
      position: absolute;
      left: 50%;
      right: auto;
      bottom: 0;
      height: var(--uc-mini-peek-h);
      width: min(156px, 38vw);
      min-width: 96px;
      max-width: 168px;
      transform: translateX(-50%);
      background:
        linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.10) 62%, rgba(147,111,198,.10)),
        radial-gradient(120% 120% at 50% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 68%);
      border: 1px solid rgba(255,255,255,.24);
      border-top-color: rgba(255,255,255,.34);
      border-radius: 999px;
      box-shadow:
        0 8px 20px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -6px 12px rgba(94,69,138,.22);
      backdrop-filter: blur(12px) saturate(125%);
      -webkit-backdrop-filter: blur(12px) saturate(125%);
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .uc-mini-wave{
      display: inline-flex;
      align-items: flex-end;
      justify-content: center;
      gap: 3px;
      width: 40px;
      height: 10px;
      pointer-events: none;
    }
    .uc-mini-wave-bar{
      display: inline-block;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,224,255,.66));
      box-shadow: 0 1px 4px rgba(0,0,0,.26);
      transform-origin: 50% 100%;
      transition: transform .14s linear, opacity .14s linear;
      will-change: transform, opacity;
    }
    .uc-mini-wave-bar:nth-child(1){ height: 4px; opacity: .72; }
    .uc-mini-wave-bar:nth-child(2){ height: 8px; opacity: .84; }
    .uc-mini-wave-bar:nth-child(3){ height: 11px; opacity: .94; }
    .uc-mini-wave-bar:nth-child(4){ height: 8px; opacity: .84; }
    .uc-mini-wave-bar:nth-child(5){ height: 4px; opacity: .72; }

    body.uc-mini-collapsed .uc-mini-player{
      top: var(--uc-mini-top-collapsed);
      height: var(--uc-mini-h);
      padding: 10px 10px;
      /* fast komplett ausblenden: nur --uc-mini-peek-h bleibt sichtbar */
      transform: translateY(calc(-1 * (var(--uc-mini-h) - var(--uc-mini-peek-h))));
      /* full-width stripe ausblenden: nur zentrierter Glass-Handle bleibt sichtbar */
      background: transparent;
      border-bottom-color: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    body.uc-mini-collapsed .uc-mini-handle{
      opacity: 0;
      pointer-events: none;
    }
    body.uc-mini-collapsed.uc-mini-live .uc-mini-handle{
      opacity: .78;
      pointer-events: auto;
    }
    body.uc-mini-collapsed .uc-mini-progress{
      opacity: 0;
      pointer-events: none;
    }

    body.uc-mini-collapsed .uc-mini-player .uc-mini-cover,
    body.uc-mini-collapsed .uc-mini-player .uc-mini-meta,
    body.uc-mini-collapsed .uc-mini-player .uc-mini-actions,
    body.uc-mini-collapsed .uc-mini-player .uc-mini-progress{
      opacity: 0;
      pointer-events: none;
    }

    /* Auf der Podcast-Seite nicht doppelt zeigen */
    body.uc-hide-mini-player:not(.uc-keepalive-on) .uc-mini-player{ display:none !important; }

    /* Keepalive-Navigation: Seitenwechsel im IFRAME, Audio bleibt im Parent */
    #uc-keepalive-frame{
      position: fixed;
      top: var(--uc-mini-offset, 0px);
      left: 0;
      right: 0;
      /* Platz lassen für Bottom-Nav (sonst liegt das IFRAME drüber) */
      bottom: calc(var(--tabbar-h, 72px) + var(--nav-inset, 0px));
      /* Unter Mini-Player & Modals, aber unter Bottom-Nav */
      z-index: 1040;
      background: rgba(24,26,32,1);
      pointer-events: auto;
    }
    #uc-keepalive-iframe{
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      background: transparent;
    }
    /* Wenn Overlay an ist, soll nur das IFRAME sichtbar/bedienbar sein */
    body.uc-keepalive-on .app-main-container{
      opacity: 0;
      pointer-events: none;
    }

    /* Keepalive aktiv: Transition-Overlay darf NICHT interaktionen blockieren */
    body.uc-keepalive-on #page-transition-overlay{
      pointer-events: none !important;
      opacity: 0 !important;
      transform: translateX(100%) !important;
      animation: none !important;
    }

    /* Embed-Views (inside keepalive iframe): keine extra Bottom-Nav-Padding-Höhe */
    body.uc-embed{ --tabbar-h: 0px; }
    body.uc-embed #bottomNav{ display:none !important; }
    body.uc-embed-runtime{ --tabbar-h: 0px; }
    body.uc-embed-runtime #bottomNav{ display:none !important; }
    body.uc-embed-runtime #uc-mini-player{ display:none !important; }
    body.uc-embed-runtime #uc-keepalive-frame{ display:none !important; }

    /* WebRTC Call: fullscreen UI soll NICHT von Bottom-Nav/Mini-Player verdeckt werden */
    html.webrtc-active #bottomNav{ display:none !important; }
    html.webrtc-active .uc-mini-player{ display:none !important; }
    html.webrtc-active body{ overflow: hidden !important; }