/* OSANIME Profile UI Stage 5 v281
 * Interaction & modal UX polish. No backend/API contract changes.
 */
body.profile-ui-stage5-v281 {
    --profile-s5-panel: rgba(8, 18, 35, .96);
    --profile-s5-panel-2: rgba(13, 27, 49, .96);
    --profile-s5-line: rgba(255,255,255,.10);
    --profile-s5-muted: #9eacc1;
    --profile-s5-pink: #ff4f93;
    --profile-s5-pink-soft: #ff86b5;
    --profile-s5-danger: #ff8b9a;
}

/* Follow / like feedback becomes a real toast instead of shifting the hero. */
body.profile-ui-stage5-v281 .profile-social-feedback {
    position: fixed !important;
    z-index: 1350 !important;
    left: 50% !important;
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px)) !important;
    width: max-content !important;
    max-width: min(92vw, 520px) !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    background: rgba(8,18,35,.97) !important;
    box-shadow: 0 18px 52px rgba(0,0,0,.42) !important;
    color: #eaf1fb !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, 12px) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}
body.profile-ui-stage5-v281 .profile-social-feedback.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}
body.profile-ui-stage5-v281 .profile-social-feedback.success {
    border-color: rgba(67, 210, 154, .28) !important;
}
body.profile-ui-stage5-v281 .profile-social-feedback.error {
    border-color: rgba(255, 100, 122, .34) !important;
    color: #ffd8de !important;
}

/* Restricted lists stay discoverable. Mobile users can tap them to learn why. */
body.profile-ui-stage5-v281 [data-profile-social-list][aria-disabled="true"] {
    opacity: .72 !important;
    cursor: help !important;
}
body.profile-ui-stage5-v281 [data-profile-social-list][data-profile-list-access="login"] {
    border-color: rgba(255, 180, 92, .18) !important;
}
body.profile-ui-stage5-v281 [data-profile-social-list][data-profile-list-access="private"] {
    filter: saturate(.72) !important;
}
body.profile-ui-stage5-v281 .profile-stat-button[aria-disabled="true"] .profile-stat-icon,
body.profile-ui-stage5-v281 .profile-sidebar-social-trigger[aria-disabled="true"] .member-stat-icon {
    background: rgba(255,255,255,.055) !important;
    color: #aab7c9 !important;
}

/* Pending actions cannot visually jump as optimistic state changes. */
body.profile-ui-stage5-v281 .profile-social-btn {
    position: relative !important;
    overflow: hidden !important;
}
body.profile-ui-stage5-v281 .profile-social-btn[aria-busy="true"] {
    cursor: progress !important;
}
body.profile-ui-stage5-v281 .profile-social-btn[aria-busy="true"]::after {
    content: "" !important;
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
    border: 2px solid rgba(255,255,255,.32) !important;
    border-top-color: currentColor !important;
    border-radius: 50% !important;
    animation: profileS5Spin .68s linear infinite !important;
}

body.profile-ui-stage5-v281 :where(.js-share-profile,.js-copy-profile-link)[aria-busy="true"] {
    opacity: .72 !important;
    cursor: progress !important;
    pointer-events: none !important;
}

/* Dialogs: readable desktop modal + safe mobile bottom sheet. */
body.profile-ui-stage5-v281 .profile-login-modal,
body.profile-ui-stage5-v281 .profile-social-list-modal {
    padding: clamp(12px, 2vw, 22px) !important;
}
body.profile-ui-stage5-v281 .profile-login-dialog {
    width: min(100%, 440px) !important;
    max-height: min(88dvh, 680px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    border-radius: 20px !important;
}
body.profile-ui-stage5-v281 .profile-social-list-dialog {
    width: min(100%, 500px) !important;
    max-height: min(82dvh, 690px) !important;
    border-radius: 20px !important;
}
body.profile-ui-stage5-v281 .profile-social-list-head {
    flex: 0 0 auto !important;
    padding: 18px 18px 14px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.025), transparent) !important;
}
body.profile-ui-stage5-v281 .profile-social-list-head h2 {
    font-size: clamp(18px, 2vw, 21px) !important;
}
body.profile-ui-stage5-v281 .profile-social-list-head small,
body.profile-ui-stage5-v281 .profile-login-dialog p {
    font-size: 12px !important;
}
body.profile-ui-stage5-v281 .profile-social-list-body {
    min-height: 220px !important;
    padding: 9px !important;
    scroll-padding-block: 8px !important;
}
body.profile-ui-stage5-v281 .profile-social-user-row {
    min-height: 66px !important;
    grid-template-columns: 50px minmax(0,1fr) 20px !important;
    gap: 11px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
}
body.profile-ui-stage5-v281 .profile-social-user-row img {
    width: 50px !important;
    height: 50px !important;
}
body.profile-ui-stage5-v281 .profile-social-user-row b {
    font-size: 12.5px !important;
    overflow-wrap: anywhere !important;
}
body.profile-ui-stage5-v281 .profile-social-user-row small {
    font-size: 10.5px !important;
    overflow-wrap: anywhere !important;
}
body.profile-ui-stage5-v281 .profile-social-list-more {
    min-height: 44px !important;
    margin: 0 14px 14px !important;
    border-radius: 11px !important;
    font-size: 11.5px !important;
}
body.profile-ui-stage5-v281 .profile-social-list-more.has-error {
    border-color: rgba(255, 108, 128, .34) !important;
    color: #ffd4db !important;
    background: rgba(255, 89, 112, .08) !important;
}
body.profile-ui-stage5-v281 .profile-social-list-retry {
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 11.5px !important;
}
body.profile-ui-stage5-v281 .profile-social-list-close,
body.profile-ui-stage5-v281 .profile-login-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
}
body.profile-ui-stage5-v281 .profile-login-primary,
body.profile-ui-stage5-v281 .profile-login-secondary {
    min-height: 46px !important;
    font-size: 12px !important;
}
body.profile-ui-stage5-v281 .profile-login-register {
    font-size: 10.5px !important;
}

/* Keep keyboard focus highly visible inside overlays. */
body.profile-ui-stage5-v281 :where(
    .profile-login-primary,
    .profile-login-secondary,
    .profile-login-close,
    .profile-social-list-close,
    .profile-social-list-more,
    .profile-social-list-retry,
    .profile-social-user-row,
    [data-profile-social-list]
):focus-visible {
    outline: 2px solid var(--profile-s5-pink) !important;
    outline-offset: 2px !important;
}

@media (max-width: 780px) {
    body.profile-ui-stage5-v281 .profile-login-modal,
    body.profile-ui-stage5-v281 .profile-social-list-modal {
        place-items: end center !important;
        padding: 0 !important;
    }
    body.profile-ui-stage5-v281 .profile-login-dialog,
    body.profile-ui-stage5-v281 .profile-social-list-dialog {
        width: 100% !important;
        max-width: none !important;
        max-height: min(90dvh, 760px) !important;
        margin: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 22px 22px 0 0 !important;
    }
    body.profile-ui-stage5-v281 .profile-login-dialog {
        padding: 28px 18px max(20px, calc(env(safe-area-inset-bottom) + 16px)) !important;
    }
    body.profile-ui-stage5-v281 .profile-social-list-head {
        padding-top: 25px !important;
    }
    body.profile-ui-stage5-v281 .profile-social-list-body {
        min-height: 230px !important;
        padding: 8px 10px !important;
    }
    body.profile-ui-stage5-v281 .profile-social-list-more {
        margin-bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px)) !important;
    }
    body.profile-ui-stage5-v281 .profile-social-feedback {
        bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)) !important;
        width: calc(100vw - 22px) !important;
        max-width: 460px !important;
        min-height: 46px !important;
        padding: 11px 13px !important;
        font-size: 11.5px !important;
    }
}

@media (max-width: 430px) {
    body.profile-ui-stage5-v281 .profile-login-actions {
        grid-template-columns: 1fr !important;
    }
    body.profile-ui-stage5-v281 .profile-social-user-row {
        min-height: 64px !important;
        grid-template-columns: 46px minmax(0,1fr) 18px !important;
        padding-inline: 8px !important;
    }
    body.profile-ui-stage5-v281 .profile-social-user-row img {
        width: 46px !important;
        height: 46px !important;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    body.profile-ui-stage5-v281 .profile-login-modal,
    body.profile-ui-stage5-v281 .profile-social-list-modal {
        place-items: center !important;
        padding: 8px !important;
    }
    body.profile-ui-stage5-v281 .profile-login-dialog,
    body.profile-ui-stage5-v281 .profile-social-list-dialog {
        width: min(92vw, 560px) !important;
        max-height: calc(100dvh - 16px) !important;
        border: 1px solid var(--profile-s5-line) !important;
        border-radius: 16px !important;
    }
}

@keyframes profileS5Spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    body.profile-ui-stage5-v281 .profile-social-feedback,
    body.profile-ui-stage5-v281 .profile-social-btn,
    body.profile-ui-stage5-v281 .profile-login-dialog,
    body.profile-ui-stage5-v281 .profile-social-list-dialog {
        transition: none !important;
    }
    body.profile-ui-stage5-v281 .profile-social-btn[aria-busy="true"]::after {
        animation: none !important;
    }
}

/* Locked social counters remain understandable on touch devices where title
 * tooltips do not exist. */
body.profile-ui-stage5-v281 [data-profile-social-list][aria-disabled="true"] .profile-stat-copy small::before,
body.profile-ui-stage5-v281 .profile-sidebar-social-trigger[aria-disabled="true"] small::before {
    content: "\f023" !important;
    margin-right: 5px !important;
    font-family: "Font Awesome 6 Free" !important;
    font-size: .72em !important;
    font-weight: 900 !important;
}
body.profile-ui-stage5-v281 .profile-sidebar-social-trigger[data-profile-list-access="private"] .profile-social-list-arrow {
    display: none !important;
}