/* Deejai 26.9.1 — contrato visual único de cards, stories e miniplayer. */
:root {
  --deejai-card-stop-top: var(--profile-card-top-stop, 0px);
  --deejai-player-bottom: max(14px, env(safe-area-inset-bottom));
  --deejai-player-left: 12px;
  --deejai-player-right: 88px;
  --deejai-player-height: 72px;
  --deejai-actions-right: 14px;
  --deejai-actions-bottom: calc(var(--deejai-player-bottom) + var(--deejai-player-height) + 14px);
}

/* O gradiente gira; foto e botão permanecem estáveis e legíveis. */
.story-avatar-btn.has-story,
.avatar-ring.has-story,
.profile-avatar-wrap.has-story,
[data-story-user].has-story {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  animation: none !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
}
.story-avatar-btn.has-story::before,
.avatar-ring.has-story::before,
.profile-avatar-wrap.has-story::before,
[data-story-user].has-story::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border-radius: 999px;
  padding: 4px;
  background: conic-gradient(from 0deg, #ff2bd6, #7b2cff, #00e5ff, #ffdc48, #ff2bd6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: deejaiStoryRingSpin 2.25s linear infinite !important;
  pointer-events: none;
}
.story-avatar-btn.has-story img,
.avatar-ring.has-story img,
.profile-avatar-wrap.has-story img,
[data-story-user].has-story img {
  animation: none !important;
  transform: none !important;
  border-radius: 50% !important;
}
@keyframes deejaiStoryRingSpin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .story-avatar-btn.has-story::before,
  .avatar-ring.has-story::before,
  .profile-avatar-wrap.has-story::before,
  [data-story-user].has-story::before { animation-duration: 8s !important; }
}

/* Uma parada = um viewport útil. O navegador é o único responsável pelo snap. */
#feed,
.feed,
#profileFeed,
.profile-scroll {
  scroll-snap-type: y mandatory !important;
  overscroll-behavior-y: contain;
  scroll-behavior: auto !important;
}
#feed > .feed-card,
.feed > .feed-card,
#profileFeed > .feed-card,
#profileFeed .profile-card {
  min-height: calc(100dvh - var(--deejai-card-stop-top)) !important;
  height: calc(100dvh - var(--deejai-card-stop-top)) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: #050008;
}
.feed-card .feed-info,
.profile-card .feed-info {
  padding-bottom: calc(var(--deejai-player-height) + 112px + env(safe-area-inset-bottom)) !important;
  transform: translateY(-3px) !important;
}
.feed-card .feed-info p,
.profile-card .feed-info p {
  line-height: 1.42 !important;
  margin-top: 7px !important;
  margin-bottom: 8px !important;
}
.feed-card .feed-info .meta,
.profile-card .feed-info .meta,
.feed-card [data-playlist-meta],
.profile-card [data-profile-playlist-meta] {
  line-height: 1.45 !important;
  margin-top: 5px !important;
  margin-bottom: 10px !important;
}

/* Player fixo na mesma coordenada, com corredor reservado para as ações. */
#deejaiPersistentPlayer.deejai-persistent-player {
  position: fixed !important;
  z-index: 2147483100 !important;
  left: var(--deejai-player-left) !important;
  right: var(--deejai-player-right) !important;
  bottom: var(--deejai-player-bottom) !important;
  width: auto !important;
  height: var(--deejai-player-height) !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box;
}
#deejaiPersistentPlayer[hidden] {
  display: flex !important;
}

/* Like/comentário/compartilhar ficam entre o conteúdo/player e a barra global. */
.feed-card .side-actions,
.profile-card .side-actions,
.profile-card .profile-side-actions {
  position: absolute !important;
  z-index: 120 !important;
  right: var(--deejai-actions-right) !important;
  bottom: var(--deejai-actions-bottom) !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
}
nav.bottom-menu:not(.home-bottom-menu) {
  z-index: 130 !important;
}
nav.bottom-menu a[data-nav="albuns"],
nav.bottom-menu a[data-nav="radios"],
.desktop-feed-nav a[href*="tipo=albuns"],
.desktop-feed-nav a[href*="tipo=radios"] {
  display: none !important;
}

/* Perfil: capa termina aproximadamente na metade superior do avatar. */
body.public-profile-v11 .profile-hero {
  padding-top: 3px !important;
  align-items: flex-start !important;
}
body.public-profile-v11 .profile-classic-v268 {
  position: relative !important;
  overflow: hidden !important;
  padding-top: 62px !important;
}
body.public-profile-v11 .profile-cover-v2692 {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 116px;
  overflow: hidden;
  background: linear-gradient(135deg, #35113f, #12071b);
}
body.public-profile-v11 .profile-cover-v2692::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5,0,8,.82));
}
body.public-profile-v11 .profile-cover-v2692 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.public-profile-v11 .profile-classic-v268 .avatar-ring,
body.public-profile-v11 .profile-classic-v268 > :not(.profile-cover-v2692) {
  position: relative;
  z-index: 2;
}
body.public-profile-v11 .profile-classic-v268 .avatar-ring {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
body.public-profile-v11 .profile-classic-bio {
  line-height: 1.48 !important;
  margin-top: 7px !important;
}
body.public-profile-v11 .profile-classic-v268 .profile-action-row {
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
  margin-top: 10px !important;
}
body.public-profile-v11 .profile-classic-v268 .profile-hire-btn,
body.public-profile-v11 .profile-classic-v268 .profile-follow-btn {
  width: auto !important;
  min-width: 84px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg,#ff2ccf,#7b2cff) !important;
  box-shadow: 0 7px 18px rgba(171,44,255,.25) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

/* Painéis nunca ficam escondidos atrás do player nem ultrapassam a tela. */
.deejai-notify-menu {
  position: fixed !important;
  z-index: 2147483200 !important;
  top: max(72px, env(safe-area-inset-top)) !important;
  right: 82px !important;
  bottom: calc(var(--deejai-player-height) + var(--deejai-player-bottom) + 10px) !important;
  width: min(390px, calc(100vw - 100px)) !important;
  max-height: none !important;
  overflow: hidden !important;
}
.deejai-notify-list {
  max-height: 100% !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}
.deejai-notify-card { min-width: 0; }
.deejai-notify-card > div { min-width: 0; overflow-wrap: anywhere; }

.deejai-empty-card .feed-info { max-width: 34rem; }
.deejai-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.deejai-empty-actions .main-play,
.deejai-empty-actions .play-btn { width: auto !important; min-width: 138px; text-align: center; }

/* Imagem quebrada ainda preserva contraste e estrutura do card. */
.feed-card .bg,
.profile-card .bg {
  background: radial-gradient(circle at 32% 25%, #6f237f 0, #251034 36%, #07010b 78%) center/cover no-repeat;
}

@media (min-width: 769px) {
  :root {
    --deejai-player-left: max(24px, calc(50vw - 360px));
    --deejai-player-right: max(104px, calc(50vw - 360px));
  }
  .deejai-notify-menu { right: 96px !important; width: 390px !important; }
}

/* V26.10.7 — aro externo de story, sem cobrir a foto.
   O degradê e o recorte interno ficam atrás da imagem em todas as superfícies. */
html body .story-ring-dom > .story-avatar-ring-layer {
  display: none !important;
}

html body .avatar-ring.story-ring-dom {
  background: transparent !important;
  box-shadow: none !important;
}

html body.feed-page .feed-card .creator-row .story-ring-dom.has-story,
html body.feed-page.force-mobile-feed .feed-card .creator-row .story-ring-dom.has-story,
html body.public-profile-v11 .profile-card .creator-row .story-ring-dom.has-story {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  flex: 0 0 60px !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  overflow: visible !important;
  isolation: isolate !important;
  animation: none !important;
  transform: none !important;
  box-shadow: 0 0 15px rgba(255, 43, 214, .34) !important;
  box-sizing: border-box !important;
}

html body .story-ring-dom.has-story::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg,
    #ff2fc3 0deg,
    #ff55d8 82deg,
    #d84cff 174deg,
    #9845ff 268deg,
    #ff2fc3 360deg) !important;
  pointer-events: none !important;
  transform-origin: 50% 50% !important;
  animation: deejaiStoryRingSpin 1.65s linear infinite !important;
  will-change: transform !important;
}

html body .story-ring-dom.has-story::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 4px !important;
  z-index: 1 !important;
  border-radius: 50% !important;
  background: #05010a !important;
  pointer-events: none !important;
}

html body.feed-page .feed-card .creator-row .story-ring-dom.has-story > img,
html body.feed-page.force-mobile-feed .feed-card .creator-row .story-ring-dom.has-story > img,
html body.public-profile-v11 .profile-card .creator-row .story-ring-dom.has-story > img {
  display: block !important;
  position: relative !important;
  z-index: 3 !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  flex: 0 0 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #05010a !important;
  border-radius: 50% !important;
  background: #05010a !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html body.public-profile-v11 .profile-classic-v268 .avatar-ring.story-ring-dom.has-story {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  padding: 5px !important;
  border-radius: 50% !important;
  background: transparent !important;
  overflow: visible !important;
  isolation: isolate !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html body.public-profile-v11 .profile-classic-v268 .avatar-ring.story-ring-dom.has-story::after {
  inset: 5px !important;
}

html body.public-profile-v11 .profile-classic-v268 .avatar-ring.story-ring-dom.has-story > img {
  display: block !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 2px solid #05010a !important;
  border-radius: 50% !important;
  background: #05010a !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html body.public-profile-v11 .profile-classic-v268 .avatar-ring.story-ring-dom:not(.has-story) > img {
  width: 100% !important;
  height: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .story-ring-dom.has-story::before {
    animation-duration: 6s !important;
  }
}

/* V26.10.10 — aro SVG temático sem preenchimento central.
   A foto fica estável; somente o degradê lilás/rosa gira ao redor do avatar. */
html body .story-ring-dom.has-story::before,
html body .story-ring-dom.has-story::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

html body .story-ring-dom > .story-avatar-ring-layer {
  display: none !important;
}

html body .story-ring-dom > .story-avatar-ring-svg {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: 50% 50% !important;
}

html body .story-ring-dom.has-story > .story-avatar-ring-svg {
  display: block !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

html body .story-ring-dom.has-story > .story-avatar-ring-svg .story-ring-rotor {
  transform-box: view-box !important;
  transform-origin: 50px 50px !important;
  animation: deejaiStorySvgSpin 1.85s linear infinite !important;
  will-change: transform !important;
}

html body .story-avatar-ring-svg .story-ring-gradient-circle {
  fill: none !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}

html body.feed-page .feed-card .creator-row .story-ring-dom,
html body.feed-page.force-mobile-feed .feed-card .creator-row .story-ring-dom,
html body.public-profile-v11 .profile-card .creator-row .story-ring-dom {
  position: relative !important;
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  flex: 0 0 58px !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  overflow: visible !important;
  isolation: isolate !important;
  animation: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html body.feed-page .feed-card .creator-row .story-ring-dom > img,
html body.feed-page.force-mobile-feed .feed-card .creator-row .story-ring-dom > img,
html body.public-profile-v11 .profile-card .creator-row .story-ring-dom > img {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #05010a !important;
  border-radius: 50% !important;
  background: #211129 !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.public-profile-v11 .profile-classic-v268 .avatar-ring.story-ring-dom.has-story {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  overflow: visible !important;
  isolation: isolate !important;
  animation: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html body.public-profile-v11 .profile-classic-v268 .avatar-ring.story-ring-dom.has-story > img {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #05010a !important;
  border-radius: 50% !important;
  background: #211129 !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.public-profile-v11 .profile-classic-v268 .avatar-ring.story-ring-dom.has-story > .story-avatar-ring-svg {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

@keyframes deejaiStorySvgSpin {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  html body .story-ring-dom.has-story > .story-avatar-ring-svg .story-ring-rotor {
    animation-duration: 6s !important;
  }
}