/* ==UserStyle==
@name         Immersive Translate 位置與大小調整
@namespace    https://github.com/downwarjers/WebTweaks
@version      1.3
@description  Immersive Translate 字幕位置與遮擋問題
@author       downwarjers
@license      MIT
@updateURL    https://raw.githubusercontent.com/downwarjers/WebTweaks/main/UserStyles/immersive-translate-position-setting/immersive-translate-position-setting.user.css
==/UserStyle== */

/* ==UserStyle==
@name         Immersive Translate 位置與大小調整
@namespace    https://github.com/downwarjers/WebTweaks
@version      1.3
@description  Immersive Translate 字幕位置與遮擋問題
@author       downwarjers
@license      MIT
@updateURL    https://raw.githubusercontent.com/downwarjers/WebTweaks/main/UserStyles/immersive-translate-position-setting/immersive-translate-position-setting.user.css
==/UserStyle== */

@-moz-document domain("viki.com") {
/* 1. 針對字幕外層容器 (#immersive-translate-caption-window) */
    #immersive-translate-caption-window {
        /* 【定位策略】使用 absolute，相對於播放器 (#vmplayer_id) 定位 */
        position: absolute !important;
        
        /* 【暴力重置】覆蓋外掛 JS 寫入的座標 */
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important; /* 防止外掛用 translate 位移 */
        
        /* 【位置調整】 讓字幕浮在控制列上方 */
        bottom: 10px !important; 
        
        /* 【版面撐開】強制寬度 100%，讓內部文字能自然置中 */
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        /* 【排版】使用 Flex 讓字幕文字置中 */
        display: flex !important;
        justify-content: center !important; /* 水平置中 */
        align-items: flex-end !important;   /* 靠下對齊 */
        
        /* 【關鍵交互】滑鼠穿透 (Ghost Mode) */
        pointer-events: none !important;
        
        /* 【層級控制】設為 2000，確保在影片(通常為0-100)之上，但在控制列之下 */
        z-index: 2000 !important;
    }

    /* 2. 針對字幕內部樣式重置 */
    #immersive-translate-caption-window .imt-caption-window,
    #immersive-translate-caption-window .imt-captions-text {
        position: static !important;
        transform: none !important;
        margin-bottom: 0 !important;
        
        /* 加強文字陰影，確保在亮色背景也能看清 */
        text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
    }

    /* 3. 針對 Viki 控制列 */
    .vjs-control-bar,
    .vmp-control-bar {
        /* 確保控制列擁有最高層級，永遠在字幕上方 */
        z-index: 2147483647 !important;
        pointer-events: auto !important;
    }
}