/* Results page — orb visualizer, report panels, story scroll */

/* Default (desktop / tablet landscape): mood orb beside track select — 컴팩트 높이용 축소 */
.orb-visualizer-wrap {
    --orb-accent: #5eead4;
    width: 5rem;
    height: 5rem;
    overflow: visible;
}

/* Shape from JS clip-path (organic blob, not a perfect circle) */
.orb-blob-face,
.orb-blob-glow {
    will-change: clip-path, transform;
}

/* Outer neon bloom (2D); --orb-accent set from results-loader */
.orb-glow-layer {
    z-index: 0;
    inset: -10px;
    background: radial-gradient(
        circle at 50% 50%,
        var(--orb-accent) 0%,
        rgba(99, 102, 241, 0.12) 48%,
        transparent 72%
    );
    filter: blur(12px);
    opacity: 0.45;
    transform: scale(1.12);
    transform-origin: center center;
    transition: opacity 0.2s ease-out, transform 0.12s ease-out;
    will-change: transform, opacity;
}

.orb-visualizer {
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.35s ease,
        filter 0.15s ease-out, opacity 0.15s ease-out;
    transform-origin: center center;
}

/* Face: layered glow + soft even inner rim (avoid top-only highlight → dark bottom-right) */
.orb-visualizer-face.visualizer-container {
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 0 18px rgba(94, 234, 212, 0.4),
        0 0 40px rgba(99, 102, 241, 0.32),
        inset 0 0 14px rgba(255, 255, 255, 0.06);
}

/* Scale is driven by inline script (initResultsOrb) to avoid fighting CSS transform */
.visualizer-container {
    animation: none;
}

/* Orb sits beside track dropdown; keep flush to row (no negative margin) */
#emotionCircle.orb-visualizer {
    margin-top: 0;
}

#storyLongScroll {
    scroll-behavior: smooth;
}

/* Expand story — selected hint chip */
.hint-chip.hint-chip-active {
    box-shadow: 0 0 0 2px rgb(99 102 241);
    border-color: rgb(129 140 248);
    background-color: rgba(49 46 129 / 0.45);
}

@media (max-width: 768px) {
    #leftReportPanel {
        order: 0;
    }

    /* Narrow viewports: 터치 타겟 유지하되 데스크톱 축소와 비례 */
    .orb-visualizer-wrap {
        width: 80px !important;
        height: 80px !important;
    }

    #emotionCircle.orb-visualizer {
        margin-top: 0 !important;
    }

    .orb-glow-layer {
        inset: -6px;
        filter: blur(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #storyLongScroll {
        scroll-behavior: auto;
    }

    .orb-glow-layer {
        filter: blur(6px);
        opacity: 0.65 !important;
        transform: scale(1.06) !important;
    }

    .orb-visualizer {
        transition: background 0.35s ease, box-shadow 0.2s ease;
    }
}

.results-typewriter-target.results-typewriter-plain {
    white-space: pre-wrap;
    word-break: break-word;
}

/* 주인공 닻 — 데스크톱 세부 접기(details): 기본 마커 숨김·열림 시 화살표 회전 */
.protagonist-anchor-extra-details .protagonist-anchor-extra-summary::-webkit-details-marker {
    display: none;
}

.protagonist-anchor-extra-details .protagonist-anchor-extra-summary::marker {
    content: none;
}

.protagonist-anchor-extra-details[open] .protagonist-anchor-extra-chevron {
    transform: rotate(180deg);
}

/* 추천 장면(details): 마커 숨김·열림 시 화살표 회전 */
.recommended-scene-details .recommended-scene-summary::-webkit-details-marker {
    display: none;
}

.recommended-scene-details .recommended-scene-summary::marker {
    content: none;
}

.recommended-scene-details[open] .recommended-scene-chevron {
    transform: rotate(180deg);
}

/* 스토리 카드: 접힌 상태에서 미리보기 높이(더보기로 전체 표시) */
#storyReadMoreInner.story-read-more--collapsed {
    max-height: min(78vh, 36rem);
    overflow: hidden;
}

/* 데스크톱: 미리보기 상한을 낮춰 더보기가 빨리 뜨고, VEE 카드 하단과 대략 맞추기 쉽게 */
@media (min-width: 768px) {
    #storyReadMoreInner.story-read-more--collapsed {
        max-height: min(48vh, 20rem);
    }
}