/* ── Popup-specific layout + animations (sits on the salvaged design system) ─── */

.pp-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim);
  transition: background 160ms ease, box-shadow 160ms ease;
  flex-shrink: 0;
}
.pp-status-dot.is-ok { background: var(--success); box-shadow: 0 0 6px var(--success); }
.pp-status-dot.is-err { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

/* ── desktop-app connect nag (shown in popup body when not connected) ─────────── */
.pp-connect-alert {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 12px 2px; padding: 10px 12px;
  border: 1px solid rgba(167,139,250,.45);
  background: linear-gradient(135deg, rgba(167,139,250,.16), rgba(96,165,250,.12));
  border-radius: 11px;
  animation: pp-alert-in 180ms ease;
}
.pp-connect-alert.hidden { display: none !important; }
.pp-connect-alert-ico { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.pp-connect-alert-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pp-connect-alert-text strong { font-size: 12px; font-weight: 700; color: var(--text-main); }
.pp-connect-alert-text span { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.pp-connect-alert-btn {
  flex-shrink: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 8px; color: var(--text-main);
  background: linear-gradient(135deg, rgba(167,139,250,.42), rgba(96,165,250,.34));
  border: 1px solid rgba(167,139,250,.6);
  transition: transform .12s, border-color .15s;
}
.pp-connect-alert-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.pp-connect-alert-btn:active { transform: scale(.97); }
.pp-connect-alert-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes pp-alert-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.pp-subbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 14px;
  font-size: 10px; letter-spacing: .04em;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.pp-count { font-weight: 600; color: var(--text-muted); }

/* Row insert / removal animations (cosmetic only) */
.pp-row-in { animation: pp-slide-in .26s ease both; }
.pp-item.pp-row-out {
  transition: height .26s ease, margin .26s ease, opacity .26s ease, transform .26s ease !important;
  overflow: hidden; pointer-events: none;
}

.pp-empty.hidden { display: none !important; }

/* ── Now-playing: let a media card FLOW instead of the clipped 48px plain layout ─
 * The plain card uses position:absolute content inside a fixed-height body, which
 * clips extra rows. When media is present we switch to normal flow so the
 * transport row AND the seekbar render in full.
 */
.pp-item--plain.is-media { height: auto; }
.pp-item--plain.is-media .pp-item-body { height: auto; overflow: visible; }
.pp-item--plain.is-media .pp-item-content {
  position: static; height: auto;
  justify-content: center; gap: 6px;
  padding: 8px 8px 8px 10px;
}
.pp-item.is-media .pp-thumb-wrap { height: auto; align-self: stretch; }
.pp-media-art { filter: brightness(.8); }

/* show/hide transport + seekbar */
.pp-transport-row.hidden,
.pp-card-seekbar.hidden { display: none !important; }

/* 100% mark sits at the correct spot on a 0–600 track */
.pp-vol-mid-tick { left: 16.667% !important; }

/* seekbar + time */
.pp-card-seekbar { width: 100%; display: flex; align-items: center; padding: 2px 2px 0; gap: 8px; }
.pp-seek-time {
  font-size: 9px; color: var(--text-dim); flex-shrink: 0;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

.pp-play-inline.pp-bounce { animation: pp-bounce .34s cubic-bezier(.36,.07,.19,.97); }

@media (prefers-reduced-motion: reduce) {
  .pp-row-in { animation: none; }
  .pp-item.pp-row-out { transition: none !important; }
  .pp-item, .pp-play-inline, .pp-gact-btn, .pp-plain-act, .pp-card-act,
  .pp-vol-fill, .pp-seek-fill { transition: none !important; }
  .pp-play-inline.pp-bounce { animation: none; }
}

/* ── Phase 5: accessibility focus rings ──────────────────────────────────────── */
.pp-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pp-icon-btn:focus-visible,
.pp-plain-act:focus-visible,
.pp-transport-btn:focus-visible,
.pp-vol-icon-btn:focus-visible,
.pp-play-inline:focus-visible,
.pp-vol-input:focus-visible,
.pp-seek-input:focus-visible,
.pp-media-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.pp-item:focus { outline: none; } /* only show ring for keyboard focus */

/* ── Phase 5: loading spinner micro-interaction ──────────────────────────────── */
.pp-load-spin {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  border-radius: 50%; z-index: 4; display: none;
  animation: pp-spin .8s linear infinite;
}
.pp-item.is-loading .pp-load-spin { display: block; }
.pp-item.is-loading .pp-thumb-placeholder,
.pp-item.is-loading .pp-thumb-favicon { opacity: .25; }

/* ── Phase 5: error banner ───────────────────────────────────────────────────── */
.pp-error {
  text-align: center;
  padding: 8px 14px;
  color: var(--danger);
  font-size: 11px;
  background: rgba(248,113,113,.08);
  border-top: 1px solid rgba(248,113,113,.2);
  flex-shrink: 0;
}
.pp-error.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pp-load-spin { animation: none; }
}