/* ==========================================================================
   system-status.css - 中控動態實心圖塊 (極致效能優化版)
   ========================================================================== */

   .center-status-island {
    position: absolute;
    top: -7.5px;
    height: 110px;
    border-radius: 29.5px;
    
    --gap: 14.5px;
    left: calc(122.5px + var(--gap));
    right: calc(102.5px + var(--gap));
    
    background: #3a3a3c; 
    border: 1px solid var(--search-border);
    
    z-index: 5500;
    pointer-events: none; 
    
    /* 🛑 修改這裡：預設為「隱藏並縮小」狀態，等待 JS 呼叫 */
    transform: scale(0.85);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s var(--apple-spring), opacity 0.3s ease, visibility 0s 0.3s;
}

/* 🚀 新增：未來的喚醒開關！只要用 JS 加上這個 class 就會彈出來 */
.center-status-island.is-active {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    /* 顯示時立刻拔除 visibility 延遲 */
    transition: transform 0.4s var(--apple-spring), opacity 0.3s ease, visibility 0s 0s;
}

@media (prefers-color-scheme: dark) {
    .center-status-island {
        background: #d1d1d6;
        border: 1px solid rgba(220, 220, 230, 0.15) !important; 
    }
}

/* =========================================
   🟢 全域隱藏與退場邏輯 (輕量化淡出 + 涵蓋所有選單)
   ========================================= */

/* 涵蓋情境：
   1. searching -> 搜尋
   2. menu-active -> 膠囊選單展開
   3. hamburger-active -> 左側通知展開
   4. main-menu-active -> 右側主選單展開 (新增)
   5. universal-active -> 通用頁面/利用規約 (新增)
   6. detail-overlay.active -> 點開卡片詳情
*/
body.searching .center-status-island,
body.menu-active .center-status-island,
body.hamburger-active .center-status-island,
body.main-menu-active .center-status-island,
body.universal-active .center-status-island,
body:has(.detail-overlay.active) .center-status-island {
    
    opacity: 0 !important;
    visibility: hidden !important;
    
    /* ✨ 效能優化：不使用耗能的上下滑動，只做單純的原地微縮小 (0.85) */
    transform: scale(0.85) !important;
    
    pointer-events: none !important;
    
    /* ✨ 讓退場時間縮短到 0.15s，像氣泡一樣瞬間消散，不跟底下的重量級動畫搶資源 */
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, visibility 0s 0.15s !important;
}

/* ==========================================================================
   🟢 狀態指示燈：全域比例控制與獨立發光系統 (移轉自 style.css)
   ========================================================================== */
   .status-tag {
    /* 🚀 控制台：主控膠囊與圖示大小 */
    --status-font-size: 0.85rem;    
    --status-pad-y: 0.6em;         
    --status-pad-x: 0.85em;         
    --status-icon-size: 1.35em;     
    --status-icon-gap: 6px;         

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--status-icon-gap);
    font-size: var(--status-font-size);
    padding: var(--status-pad-y) var(--status-pad-x);
    
    border: 1px solid var(--border-color);
    background: var(--tag-bg);
    border-radius: 100px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    width: fit-content;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ✨ SVG 統一預設狀態：不顯眼的低調科技灰 */
.status-tag svg {
    width: var(--status-icon-size) !important;
    height: var(--status-icon-size) !important;
    stroke-width: 2.2px !important; /* 預設的暗燈粗細 */
    flex-shrink: 0; 
    
    color: rgba(255, 255, 255, 0.25) !important; 
    filter: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🚀 單獨微調：打叉圖示原地等比放大 (保留你的完美對齊設定) */
.status-tag svg.lucide-x {
    transform: scale(1.25);
}

/* ==========================================================================
   ✨ 亮起狀態 (Active)：光學膨脹效應與雙層霓虹光暈
   ========================================================================== */

/* 🟢 通用亮起物理特效：模擬通電後的光學膨脹 (線條變粗) */
.status-tag svg.active {
    stroke-width: 2.8px !important; 
}

/* 0. 心跳 (Activity) */
.status-tag svg.lucide-activity.active {
    color: #FF9500 !important; /* 科技感亮橘色 */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}

/* 1. 雨風 (Cloud Rain Wind) - 偏亮白灰色 */
.status-tag svg.lucide-cloud-rain-wind.active {
    color: #E5E5EA !important; /* 偏白亮的科技灰 */
    /* 同樣疊加雙層白光，做出通電發光的質感 */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}

/* 2. 雪花 (Snowflake) */
.status-tag svg.lucide-snowflake.active {
    color: #0A84FF !important; 
    /* ✨ 雙層光暈魔法：第一層(2px)作為高光核心，第二層(7px)作為向外發散的柔光 */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}

/* 3. 打叉 (X) */
.status-tag svg.lucide-x.active {
    color: #FF453A !important; 
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}

/* 4. 三角形 (Triangle) */
.status-tag svg.lucide-triangle.active {
    color: #FFD60A !important; 
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}

/* 5. 圓形 (Circle) */
.status-tag svg.lucide-circle.active {
    color: #32D74B !important; 
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}

/* 6. 注意 (Warning) */
.status-tag svg.lucide-message-square-warning.active {
    /* 因為圖示本身就是純白 (#FFFFFF)，如果疊加純白高光會糊成一團 */
    /* 所以這裡只給它一層適中的柔光，讓它保持清晰銳利 */
    color: #FFFFFF !important; 
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); 
}

/* ==========================================================================
   🚀 動態隱藏系統：未亮起的「心跳」、「雪花」與「注意」自動消失、膠囊自動縮排
   ========================================================================== */
   .status-tag svg.lucide-activity:not(.active),
   .status-tag svg.lucide-cloud-rain-wind:not(.active),
   .status-tag svg.lucide-snowflake:not(.active),
   .status-tag svg.lucide-message-square-warning:not(.active) {
       display: none !important;
   }