/* Deejai CLUB™ — V26.10.10: interações, comentários, avatares e controles móveis. */

html body #deejaiShellLogo,
html body #deejaiShellLogo *,
html body .deejai-logo-link,
html body .deejai-logo-link *,
html body .mobile-feed-logo,
html body .mobile-feed-logo *,
html body button.main-play,
html body button.main-play *,
html body button.inline-pause,
html body button.inline-pause *,
html body #deejaiPersistentPlayer button,
html body #deejaiPersistentPlayer button * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -webkit-touch-callout: none !important;
    outline: 0 !important;
    touch-action: manipulation;
    user-select: none !important;
    -webkit-user-select: none !important;
}

html body #deejaiShellLogo:focus,
html body #deejaiShellLogo:focus-visible,
html body #deejaiShellLogo:active,
html body .deejai-logo-link:focus,
html body .deejai-logo-link:focus-visible,
html body .deejai-logo-link:active,
html body .mobile-feed-logo:focus,
html body .mobile-feed-logo:focus-visible,
html body .mobile-feed-logo:active {
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

html body button.main-play:focus,
html body button.main-play:focus-visible,
html body button.main-play:active,
html body button.inline-pause:focus,
html body button.inline-pause:focus-visible,
html body button.inline-pause:active,
html body #deejaiPersistentPlayer button:focus,
html body #deejaiPersistentPlayer button:focus-visible,
html body #deejaiPersistentPlayer button:active {
    outline: 0 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

html body #deejaiShellLogo::-moz-focus-inner,
html body .deejai-logo-link::-moz-focus-inner,
html body button.main-play::-moz-focus-inner,
html body button.inline-pause::-moz-focus-inner,
html body #deejaiPersistentPlayer button::-moz-focus-inner {
    border: 0 !important;
}

/* Um único SVG branco é usado no feed principal e em todos os cards do perfil. */
html body .feed-comment-bubble-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #fff !important;
    fill: none !important;
    stroke: none !important;
}

html body .feed-comment-bubble-icon .feed-comment-bubble-shape {
    fill: #fff !important;
    stroke: none !important;
}

html body .feed-comment-bubble-icon .feed-comment-bubble-dot {
    fill: #4a4650 !important;
    stroke: none !important;
}

/* O campo de comentário sempre fica livre: o player retorna ao fechar o painel. */
html.comments-open body #deejaiPersistentPlayer,
html body.comments-open #deejaiPersistentPlayer,
html.comments-open body #deejaiPersistentPlayer.deejai-persistent-player,
html body.comments-open #deejaiPersistentPlayer.deejai-persistent-player {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Botão de envio único em todas as janelas de comentários. */
html body #commentsPanel #commentForm.tiktok-comment-form .comment-send,
html body #commentsPanel .tiktok-comment-form button.comment-send,
html body .comments-panel #commentForm button.comment-send,
html body .comments-panel .tiktok-comment-form .comment-send {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: linear-gradient(135deg,#f02db2 0%,#c62be3 48%,#812cff 100%) !important;
    box-shadow: 0 8px 20px rgba(145,36,221,.30), 0 0 16px rgba(240,45,178,.16) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-tap-highlight-color: transparent !important;
}

html body #commentsPanel #commentForm.tiktok-comment-form .comment-send svg,
html body #commentsPanel .tiktok-comment-form button.comment-send svg,
html body .comments-panel #commentForm button.comment-send svg,
html body .comments-panel .tiktok-comment-form .comment-send svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* V26.10.10 — trava final do avatar/aro após estilos dinâmicos do App Shell. */
html body .avatar-ring.story-ring-dom {
    background: transparent !important;
    box-shadow: none !important;
}

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

html body .story-ring-dom.has-story > .story-avatar-ring-svg {
    display: block !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;
}

html body .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;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #05010a !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    object-fit: cover !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body.feed-page .feed-card .creator-row .story-avatar-btn.story-ring-dom,
html body.feed-page.force-mobile-feed .feed-card .creator-row .story-avatar-btn.story-ring-dom,
html body.public-profile-v11 .profile-card .creator-row .story-avatar-btn.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;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body.feed-page .feed-card .creator-row .story-avatar-btn.story-ring-dom > img,
html body.feed-page.force-mobile-feed .feed-card .creator-row .story-avatar-btn.story-ring-dom > img,
html body.public-profile-v11 .profile-card .creator-row .story-avatar-btn.story-ring-dom > img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
}

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

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

/* Sem has-story o SVG permanece oculto; a foto nunca depende da animação. */
html body .story-ring-dom:not(.has-story) > .story-avatar-ring-svg {
    display: none !important;
    animation: none !important;
}

/* Remove o realce azul nativo do Android somente dos controles laterais. */
html body nav.bottom-menu:not(.home-bottom-menu) a,
html body nav.bottom-menu:not(.home-bottom-menu) button,
html body nav.bottom-menu:not(.home-bottom-menu) .deejai-notify-wrap,
html body .side-actions .side-action-btn,
html body .side-actions .side-action-btn *,
html body .deejai-story-create-side,
html body .deejai-story-create-side *,
html body .deejai-notify-btn,
html body .deejai-notify-btn * {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    outline: 0 !important;
}

html body nav.bottom-menu:not(.home-bottom-menu) a:focus,
html body nav.bottom-menu:not(.home-bottom-menu) a:focus-visible,
html body nav.bottom-menu:not(.home-bottom-menu) button:focus,
html body nav.bottom-menu:not(.home-bottom-menu) button:focus-visible,
html body .side-actions .side-action-btn:focus,
html body .side-actions .side-action-btn:focus-visible,
html body .deejai-notify-btn:focus,
html body .deejai-notify-btn:focus-visible {
    outline: 0 !important;
}

html body #commentsPanel #commentForm.tiktok-comment-form .comment-send:disabled,
html body .comments-panel .tiktok-comment-form .comment-send:disabled {
    opacity: .58 !important;
}