/* mobile-mascot.css: 관리자 고정 마스코트 (모바일 크롬) */

#darkthread-fixed-mascot.darkthread-site-mobile-mascot,
.darkthread-fixed-mascot {
    background: transparent;
    line-height: 0;
    padding: 0;
    pointer-events: auto;
    display: none;
}

/* 관리자 마스코트: 내 메뉴 토글로 켠 경우에만 데스크톱에 표시 */
.darkthread-fixed-mascot.darkthread-fixed-mascot--visible {
    display: none;
}

.darkthread-fixed-mascot-image {
    display: block;
    pointer-events: auto;
    width: 100%;
    height: auto;
    user-select: none;
    transition: filter 0.16s ease;
}

.darkthread-fixed-mascot-message {
    position: absolute;
    right: 0.5rem;
    bottom: calc(100% + 0.75rem);
    width: max-content;
    max-width: min(15rem, calc(100vw - 2rem));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9999px;
    background: rgba(3, 3, 3, 0.88);
    color: var(--dt-fg);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.48);
    opacity: 0;
    padding: 0.6rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.darkthread-fixed-mascot.is-active .darkthread-fixed-mascot-message {
    opacity: 1;
    transform: translateY(0);
}

.darkthread-fixed-mascot-image:focus-visible {
    outline: 2px solid rgba(248, 113, 113, 0.72);
    outline-offset: 0.35rem;
}

@media (min-width: 1024px) {
    #darkthread-fixed-mascot.darkthread-fixed-mascot--visible,
    .darkthread-fixed-mascot.darkthread-fixed-mascot--visible {
        position: fixed;
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        z-index: 79;
        display: block;
        width: clamp(8.75rem, 13vw, 15rem);
        filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.58));
    }

    .darkthread-fixed-mascot.darkthread-fixed-mascot--visible:hover .darkthread-fixed-mascot-image {
        filter: brightness(1.22) drop-shadow(0 0 1.25rem rgba(248, 113, 113, 0.28));
    }
}

/* 드로어가 열린 동안에는 마스코트를 숨겨 우측 사이드 UI와 겹치지 않게 한다. */
body.darkthread-profile-open .darkthread-fixed-mascot.darkthread-fixed-mascot--visible,
body.darkthread-settings-open .darkthread-fixed-mascot.darkthread-fixed-mascot--visible,
body.darkthread-notification-open .darkthread-fixed-mascot.darkthread-fixed-mascot--visible,
body.darkthread-nav-drawer-open .darkthread-fixed-mascot.darkthread-fixed-mascot--visible {
    display: none !important;
}

/* 페이지별 body class 차이와 무관하게, 실제 드로어 open 상태를 기준으로 마스코트를 숨긴다. */
body:has(.darkthread-profile-root.darkthread-profile-root--open) .darkthread-fixed-mascot.darkthread-fixed-mascot--visible,
body:has(.darkthread-notification-root.darkthread-notification-root--open) .darkthread-fixed-mascot.darkthread-fixed-mascot--visible,
body:has(.darkthread-nav-drawer-root.darkthread-nav-drawer-root--open) .darkthread-fixed-mascot.darkthread-fixed-mascot--visible,
body:has(#darkthread-profile-drawer[aria-hidden="false"]) .darkthread-fixed-mascot.darkthread-fixed-mascot--visible,
body:has(#darkthread-settings-drawer[aria-hidden="false"]) .darkthread-fixed-mascot.darkthread-fixed-mascot--visible,
body:has(#darkthread-notification-drawer[aria-hidden="false"]) .darkthread-fixed-mascot.darkthread-fixed-mascot--visible {
    display: none !important;