/* Screen-owned player layouts. Each screen opts into its own placement via data-gs-player-layout. */
body.ghostsocial-v2 .gs-player-host[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-player-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 9px 11px 7px;
  border: 0;
  border-radius: 17px;
  background: rgba(29, 28, 35, .96);
  color: var(--text);
  box-shadow: 0 8px 26px rgba(0,0,0,.24);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.ghostsocial-v2 .gs-player-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.ghostsocial-v2 .gs-player-cover-wrap {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 11px;
  background: rgba(179,154,244,.16);
  color: var(--primary);
}
body.ghostsocial-v2 .gs-player-cover { width: 100%; height: 100%; object-fit: cover; }
body.ghostsocial-v2 .gs-player-cover[hidden],
body.ghostsocial-v2 .gs-player-cover-fallback[hidden] { display: none !important; }
body.ghostsocial-v2 .gs-player-meta { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 1px; }
@property --gs-title-mask-left { syntax: "<percentage>"; inherits: true; initial-value: 7%; }
@property --gs-title-mask-right { syntax: "<percentage>"; inherits: true; initial-value: 93%; }
body.ghostsocial-v2 .gs-player-title-viewport { --gs-title-mask-left: 7%; --gs-title-mask-right: 93%; display: block; position: relative; width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gs-title-mask-left), #000 var(--gs-title-mask-right), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--gs-title-mask-left), #000 var(--gs-title-mask-right), transparent 100%); transition: --gs-title-mask-left 450ms ease, --gs-title-mask-right 450ms ease; }
/* Animate the gradient stops themselves: mask-image transitions are not interpolated reliably. */
body.ghostsocial-v2 .gs-player-title-viewport:has(.gs-player-title.is-at-left) { --gs-title-mask-left: 0%; --gs-title-mask-right: 93%; }
body.ghostsocial-v2 .gs-player-title-viewport:has(.gs-player-title.is-at-right) { --gs-title-mask-left: 7%; --gs-title-mask-right: 100%; }
body.ghostsocial-v2 .gs-player-title-track { display: inline-block; width: max-content; min-width: 100%; transform: translateX(0); will-change: transform; }
body.ghostsocial-v2 .gs-player-title,
body.ghostsocial-v2 .gs-player-subtitle { display: block; white-space: nowrap; }
body.ghostsocial-v2 .gs-player-title { width: max-content; min-width: 100%; font-size: 13px; line-height: 1.25; font-weight: 700; }
body.ghostsocial-v2 .gs-player-title.is-overflowing.is-moving-right { animation: gs-player-title-right var(--gs-title-travel, 6s) ease-in-out forwards; }
body.ghostsocial-v2 .gs-player-title.is-overflowing.is-moving-left { animation: gs-player-title-left var(--gs-title-travel, 6s) ease-in-out forwards; }
@keyframes gs-player-title-right {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--gs-title-overflow, 0px))); }
}
@keyframes gs-player-title-left {
  from { transform: translateX(calc(-1 * var(--gs-title-overflow, 0px))); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 .gs-player-title.is-overflowing { animation: none; }
}
body.ghostsocial-v2 .gs-player-subtitle { color: var(--sub); font-size: 11px; line-height: 1.2; }
body.ghostsocial-v2 .gs-player-transport { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
body.ghostsocial-v2 .gs-player-button {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  color: var(--text);
  font-size: 13px;
}
body.ghostsocial-v2 .gs-player-button:disabled { opacity: .36; }
body.ghostsocial-v2 .gs-player-button.gs-player-toggle {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  background: var(--primary);
  color: #17121f;
  font-size: 14px;
}
body.ghostsocial-v2 .gs-player-button.gs-player-close { flex-basis: 28px; width: 28px; height: 28px; font-size: 12px; background: rgba(255,255,255,.06); color: var(--sub); }
body.ghostsocial-v2 .gs-player-button.gs-player-close:hover { background: rgba(255,255,255,.14); color: var(--text); }
/* Main floating player: close is only an X, pinned to the panel's upper-right edge. */
body.ghostsocial-v2 .gs-player-host--feed-dock .gs-player-button.gs-player-close,
body.ghostsocial-v2 .gs-player-host--utility-dock .gs-player-button.gs-player-close {
  position: absolute;
  top: -8px;
  right: -7px;
  z-index: 2;
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  box-shadow: none;
}
body.ghostsocial-v2 .gs-player-host--feed-dock .gs-player-button.gs-player-close:hover,
body.ghostsocial-v2 .gs-player-host--utility-dock .gs-player-button.gs-player-close:hover { background: transparent; color: var(--primary); }
body.ghostsocial-v2 .gs-player-progress-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
body.ghostsocial-v2 .gs-player-seek-wrap { position: relative; flex: 1 1 auto; width: 100%; height: 14px; min-width: 0; }
body.ghostsocial-v2 .gs-player-buffer-track {
  position: absolute;
  z-index: 0;
  top: 5px;
  right: 0;
  left: 0;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255,255,255,.25);
}
body.ghostsocial-v2 .gs-player-buffer-fill,
body.ghostsocial-v2 .gs-player-play-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: inherit;
  transition: width 120ms linear;
}
body.ghostsocial-v2 .gs-player-buffer-fill { background: rgba(226,226,232,.88); }
body.ghostsocial-v2 .gs-player-play-fill { z-index: 1; background: var(--primary); }
body.ghostsocial-v2 .gs-player-seek {
  position: absolute;
  z-index: 2;
  inset: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}
body.ghostsocial-v2 .gs-player-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: transparent; }
body.ghostsocial-v2 .gs-player-seek::-moz-range-track { height: 4px; border-radius: 4px; background: transparent; }
body.ghostsocial-v2 .gs-player-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: transparent; }
body.ghostsocial-v2 .gs-player-seek::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(179,154,244,.16);
}
body.ghostsocial-v2 .gs-player-seek::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--primary); }
@media (prefers-reduced-motion: reduce) { body.ghostsocial-v2 .gs-player-buffer-fill, body.ghostsocial-v2 .gs-player-play-fill { transition: none; } }
body.ghostsocial-v2 .gs-player-seek:disabled { cursor: default; opacity: .45; }
body.ghostsocial-v2 .gs-player-time { flex: 0 0 auto; color: var(--sub); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.ghostsocial-v2 .gs-player-panel.is-loading .gs-player-subtitle::after { content: ' · загрузка'; color: var(--primary); }
body.ghostsocial-v2 .gs-player-panel.is-error .gs-player-subtitle { color: var(--red); }

/* Feed: persistent player dock stays above the bottom navigation. */
body.ghostsocial-v2 .gs-player-host--feed-dock,
body.ghostsocial-v2 .gs-player-host--utility-dock {
  position: fixed;
  z-index: 180;
  left: 50%;
  bottom: calc(var(--nav-h) + 7px);
  width: min(calc(100vw - 24px), 590px);
  transform: translateX(-50%);
}
body.ghostsocial-v2 .gs-player-host--feed-dock .gs-player-panel { background: rgba(29,28,35,.95); }

/* Search: inline card sits below the search field and scrolls with results. */
body.ghostsocial-v2 .gs-player-host--search-inline { position: sticky; top: calc(var(--head-h) + 5px); z-index: 25; display: block; margin: 8px 0 12px; }
body.ghostsocial-v2 .gs-player-host--search-inline .gs-player-panel { background: #211e29; }

/* Composer: slim transport stays attached to the editor rather than covering it. */
body.ghostsocial-v2 .gs-player-host--composer-inline { display: block; margin: 0 0 12px; }
body.ghostsocial-v2 .gs-player-host--composer-inline .gs-player-panel { padding: 7px 9px 5px; border-radius: 13px; background: #1b1a20; }
body.ghostsocial-v2 .gs-player-host--composer-inline .gs-player-cover-wrap { width: 32px; height: 32px; flex-basis: 32px; }
body.ghostsocial-v2 .gs-player-host--composer-inline .gs-player-button { width: 31px; height: 31px; flex-basis: 31px; }

/* Profile: progress is tucked under the profile's own music capsule. */
body.ghostsocial-v2 .gs-player-host--profile-progress { display: block; margin: -3px 0 9px; padding: 0 7px; }
body.ghostsocial-v2 .gs-player-host--profile-progress .gs-player-panel { padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.045); box-shadow: none; }
body.ghostsocial-v2 .gs-player-host--profile-progress.is-linked-profile .gs-player-main { display: none; }
body.ghostsocial-v2 .gs-player-host--profile-progress.is-linked-profile .gs-player-progress-row { gap: 7px; }
body.ghostsocial-v2 .gs-player-host--profile-progress:not(.is-linked-profile) .gs-player-panel { background: #211e29; }

/* Minisky: a low-profile control on the open side, away from the action rail. */
body.ghostsocial-v2 .gs-player-host--minisky-float {
  position: fixed;
  z-index: 150;
  left: 12px;
  bottom: calc(var(--nav-h) + 9px);
  width: min(66vw, 330px);
}
body.ghostsocial-v2 .gs-player-host--minisky-float .gs-player-panel { padding: 7px 9px 5px; border-radius: 15px; background: rgba(24,23,30,.88); }
body.ghostsocial-v2 .gs-player-host--minisky-float .gs-player-cover-wrap { flex-basis: 32px; width: 32px; height: 32px; border-radius: 50%; }
body.ghostsocial-v2 .gs-player-host--minisky-float .gs-player-subtitle,
body.ghostsocial-v2 .gs-player-host--minisky-float .gs-player-skip,
body.ghostsocial-v2 .gs-player-host--minisky-float .gs-player-time { display: none; }
body.ghostsocial-v2 .gs-player-host--minisky-float .gs-player-button.gs-player-toggle { width: 32px; height: 32px; flex-basis: 32px; }

/* Profile/player card and media controls respect reduced motion and small screens. */
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 .gs-player-button,
  body.ghostsocial-v2 .gs-player-panel { transition: none !important; }
}

/* Main player close control: only the X glyph, anchored to the panel's top-right edge. */
body.ghostsocial-v2 .gs-player-panel { position: relative; }
body.ghostsocial-v2 .gs-player-button.gs-player-close {
  position: absolute;
  z-index: 3;
  top: 2px;
  right: 3px;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sub);
  font-size: 13px;
  box-shadow: none;
}
body.ghostsocial-v2 .gs-player-button.gs-player-close:hover,
body.ghostsocial-v2 .gs-player-button.gs-player-close:active {
  background: transparent;
  color: var(--text);
}
body.ghostsocial-v2 .gs-player-panel .gs-player-main { padding-right: 16px; }


/* Slow, smooth center-out color wave for the play/pause control. */
body.ghostsocial-v2 .gs-player-button.gs-player-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--primary);
  color: #17121f;
  transition: color 900ms ease-in-out, background-color 900ms ease-in-out;
}
body.ghostsocial-v2 .gs-player-button.gs-player-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: #ffffff;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1100ms cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
body.ghostsocial-v2 .gs-player-button.gs-player-toggle[aria-label="Приостановить"]::before {
  clip-path: circle(75% at 50% 50%);
}
body.ghostsocial-v2 .gs-player-button.gs-player-toggle > i {
  position: relative;
  z-index: 1;
  transition: color 900ms ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  body.ghostsocial-v2 .gs-player-button.gs-player-toggle,
  body.ghostsocial-v2 .gs-player-button.gs-player-toggle::before,
  body.ghostsocial-v2 .gs-player-button.gs-player-toggle > i { transition: none !important; }
}