/* 跨頁共用樣式：只放各頁定義完全相同的規則。功能模組編輯器共用的放 editor.css，imagetarget 專用的放 imagetarget.css */

/* 自訂捲軸 */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}

/* 一般頁面 (首頁以外、非功能模組，<body class="page-basic">)：手機版頂部列縮短，只讓 main 捲動 */
@media (max-width: 767px) {
    .page-basic header {
        height: 44px !important;
        min-height: 0;
        flex-shrink: 0;
    }

    .page-basic header .text-base {
        font-size: 1rem;
    }

    body.page-basic {
        height: 100dvh !important;
        overflow: hidden;
    }

    .page-basic main {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 手機橫向 (高度很矮) 時隱藏，例如底部步驟指示的文字 (UIStepIndicator) */
@media (max-height: 480px) {
    .sm-landscape\:hidden {
        display: none !important;
    }
}

/* 停用狀態 (各頁可自行加上 transition) */
.glass-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(100%);
}

/* 版面寬度分級：大螢幕 (≥1536px) 再放寬一級；3D 編輯步驟不套用，維持滿版 */
.layout-wide,
.layout-content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 首頁、專案管理、素材管理、模組底部進度列 */
.layout-wide {
    max-width: 80rem;
}

/* 模組的專案列表、素材選擇、頁面骨架、工具頁 */
.layout-content {
    max-width: 64rem;
}

@media (min-width: 1536px) {
    .layout-wide {
        max-width: 90rem;
    }

    .layout-content {
        max-width: 72rem;
    }
}

/* 首頁新手指南按鈕：尚未看過說明時的脈動點 */
.guide-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: guidePulse 1.8s ease-out infinite;
}

.guide-dot.hidden {
    display: none;
}

@keyframes guidePulse {
    to {
        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    }
}

/* 進場動畫：fill-mode 用 backwards，結束後不保留 transform，避免影響內部 position: fixed 元素 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out backwards;
}

/* 讀取中的佔位 (由 UISkeleton 產生) */
@keyframes skeletonShimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

.skeleton {
    display: block;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    border-radius: 0.375rem;
}

.skeleton-text {
    height: 0.75rem;
}

/* 頁面骨架 (#page-skeleton) 顯示期間，底部進度列的按鈕與步驟指示也呈現骨架；
   只改外觀、保留原尺寸，模組移除頁面骨架後自動恢復，不會跳動 */
body:has(#page-skeleton) footer :is(#prevStepBtn, #nextStepBtn, #stepIndicator .rounded-full, #stepIndicator span) {
    color: transparent !important;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
}

body:has(#page-skeleton) footer :is(#prevStepBtn, #nextStepBtn) svg,
body:has(#page-skeleton) #stepIndicator .h-px {
    visibility: hidden;
}

/* 頂部標題：lucide 尚未換成 SVG 前先保留圖示空間，避免文字跳動 */
#pageTitle i[data-lucide] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* 3D / 全景預覽區讀取中的覆蓋層 (UISkeleton.previewOverlay) */
.preview-loading,
#canvas-container > .preview-loading {
    position: absolute !important;
    inset: 0;
    z-index: 5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: #64748b;
    font-size: 0.875rem;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .skeleton,
    .guide-dot,
    body:has(#page-skeleton) footer :is(#prevStepBtn, #nextStepBtn, #stepIndicator .rounded-full, #stepIndicator span) {
        animation: none;
    }
}