/* 第1區塊：大螢幕響應式 */
/* 響應式設計 */
@media (max-width: 1400px) {
    .versions-container.single-view,
    .character-header-bar.single-mode {
        max-width: 70%;
    }
    
    .versions-container.compare-view,
    .character-header-bar.compare-mode {
        max-width: 100%;
    }
}

@media (max-width: 1200px) {
    .versions-container.single-view,
    .character-header-bar.single-mode {
        max-width: 80%;
    }
    
    .versions-container.compare-view,
    .character-header-bar.compare-mode {
        max-width: 100%;
    }
    
    .fullscreen-editor-container {
        width: 70vw;
        max-width: 70vw;
    }
}

/* 第2區塊：平板響應式 */
@media (max-width: 1024px) {
    .character-header-bar {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: stretch;
    }
    
    .character-title-section {
        text-align: center;
    }
    
    .character-controls {
        justify-content: center !important;
        flex-wrap: wrap !important; /* 🔧 手機版允許換行 */
        gap: 8px !important;
    }

        .character-main-title-fixed {
        max-width: 300px !important;
        flex: 1 1 100px !important;
    }
        .select-edit-header {
        max-width: 180px !important;
        flex: 0 1 150px !important;
    }
    .view-toggle-switch {
        min-width: 80px !important;
        flex-shrink: 0 !important;
    }
    
    .toggle-text {
        padding: 0 6px !important;
        font-size: 0.8em !important;
    }

        /* 讓列表容器滿版 */
    .item-list-container {
        padding: 0 16px !important;
    }

    .list-page-container {
        max-width: 100% !important;
    }

    /* 調整列表區塊的內距，讓內容不要貼邊 */
    #folders-section,
    #files-section {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* 列表項樣式調整 */
    .list-item {
        padding: 12px 16px;
        margin-bottom: 8px;
        gap: 12px;
        flex-wrap: wrap; /* 允許內容換行 */
    }

    /* 隱藏選擇框的預留空間 */
    .list-item-selection-box {
        width: auto;
    }

    /* 讓主要內容區佔滿整行 */
    .list-item-content {
        flex-basis: 100%; /* 強制換行 */
        order: 1; /* 視覺順序第一 */
        margin-left: -28px; /* 補償選擇框消失的空間 */
    }
    
    .list-item:not(:has(.list-selection-checkbox)) .list-item-content {
        margin-left: 0; /* 沒有選擇框時，不需要補償 */
    }

        .overview-controls {
        flex-wrap: wrap;
        padding: 16px 0px 16px 0px; /* 減少上下內邊距從 12px 到 8px */
        gap: 8px;
        margin-bottom: 0px; /* 減少下邊距從 16px 到 12px */
        margin-top: -5px; /* 確保沒有上邊距 */
    }
    
    /* 手機版按鈕調整 */
    .overview-controls .overview-btn {
        padding: 6px 10px;
        font-size: 0.8em;
        min-width: auto;
        flex-shrink: 0;
        order: 1; /* 第一行：按鈕們 */
    }
    
    /* 搜尋框和按鈕同一行 */
    .overview-controls .search-container {
        order: 1; /* 第一行：和按鈕們一起 */
        flex: 1; /* 佔用剩餘空間 */
        min-width: 120px; /* 最小寬度保證可用性 */
    }
    
    .overview-controls .search-input {
        width: 100%;
        font-size: 0.8em;
    }
    
    /* 第二行：排序下拉選單 */
    .overview-controls .overview-sort-dropdown {
        order: 2;
        flex: 1;
        min-width: 120px;
        font-size: 0.8em;
        flex-basis: auto; /* 不強制換行 */
    }
    
    /* 第二行：標籤篩選按鈕 */
    .overview-controls button[onclick*="showTagSelector"] {
        order: 2;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 0.8em;
    }
    
    /* 第三行：已選標籤（如果有的話） */
    .overview-controls #selected-tags {
        order: 3;
        flex: none;
        width: 100%;
        flex-basis: 100%; /* 強制換行 */
        margin-top: 4px;
    }
    
    /* 批量操作列手機版調整 */
    .batch-operations-bar,
    .favorite-operations-bar {
        padding: 0px 16px;
        margin-bottom: 20px;
    }
    
    .batch-operations-content,
    .favorite-operations-content {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        margin-top: -18px;
        align-items: stretch;
    }
    
    .batch-operations-left,
    .favorite-operations-left {
        text-align: center;
        margin-bottom: 8px;
    }
    
    .batch-operations-right,
    .favorite-operations-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    
    /* 手機版批量操作按鈕 - 更緊密的設計 */
    .batch-operations-right .overview-btn,
    .batch-operations-right .overview-danger-btn,
    .favorite-operations-right .overview-btn,
    .favorite-operations-right .btn-primary {
        font-size: 0.75em;
        padding: 5px 6px;
        flex: 1;
        min-width: 65px;
        max-width: 90px; 
        line-height: 1.2; 
        overflow: hidden; 
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* 新增項目卡片 */
    .add-item-card {
        padding: 12px 16px;
        margin-bottom: 8px; 
        min-height: 80px;   
        gap: 4px;
        justify-content: center; /* 水平置中 */
    }

    .add-item-icon svg {
        width: 20px;
        height: 20px;
    }

    .add-item-text {
        font-size: 0.85em;
        color: var(--text-muted);
    }

    .add-item-card:hover {
        border-color: var(--border-color);
        background-color: transparent;
    }

    .add-item-card:active {
        border-color: var(--accent-color);
        background-color: var(--bg-color);
    }

        .breadcrumb-container {
        padding: 0; /* 手機版左右 padding 為 0 */
    }

    .character-version-content {
        width: 100%; /* 手機版滿寬 */
        margin: 0;
        padding: 0 8px; /* 給一點內邊距避免貼邊 */
    }

    .versions-container.single-view,
    .character-header-bar.single-mode {
        max-width: 100%;
    }

    .persona-description-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .user-persona-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

}

@media (max-width: 992px) {
    .versions-container.single-view,
    .character-header-bar.single-mode {
        max-width: 100%;
    }

    .persona-description-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .user-persona-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

    .character-controls {
        justify-content: center !important;
        flex-wrap: wrap !important; /* 🔧 手機版允許換行 */
        gap: 8px !important;
    }

        .select-edit-header {
        max-width: 140px !important;
        min-width: 120px !important;
        flex: 0 1 120px !important;
    }
    
    .versions-container.compare-view,
    .character-header-bar.compare-mode {
        max-width: 100%;
    }

    .breadcrumb-container {
        padding: 0; /* 手機版左右 padding 為 0 */
    }

        /* 手機版批量操作按鈕 - 更緊密的設計 */
    .batch-operations-right .overview-btn,
    .batch-operations-right .overview-danger-btn,
    .favorite-operations-right .overview-btn,
    .favorite-operations-right .btn-primary {
        font-size: 0.75em;
        padding: 5px 6px;
        flex: 1;
        min-width: 65px;
        max-width: 90px; 
        line-height: 1.2; 
        overflow: hidden; 
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

        /* 🥰 頭像區域手機版布局調整 */
    .loveydovey-mode .avatar-section {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important; /* 與下方欄位保持距離 */
    }

       /* 🥰 頭像大小調整為220px正方形並置中 */
    .loveydovey-avatar {
        width: 280px !important;
        height: 280px !important;
        max-width: 280px !important;
        max-height: 280px !important;
        min-width: 280px !important;
        min-height: 280px !important;
        margin: 0 auto !important; /* 確保置中 */
    }

    
}

/* 預設隱藏手機版頭部 */
.mobile-header {
    display: none;
}

.mobile-menu-btn {
    display: none;
}

.mobile-app-title {
    display: none;
}

.mobile-top-nav {
    display: none;
}


/* 第3區塊：手機響應式  */
@media (max-width: 768px) {

    /* 隱藏電腦版麵包屑 */
    .breadcrumb-nav {
        display: none !important;
    }
    
    /* 隱藏電腦版麵包屑的容器 */
    .breadcrumb-nav + * {
        margin-top: 0 !important;
    }
    
    .bottom-container {
        flex-direction: row;
    }
    
    .sidebar {
        display: none;
    }

    /* 🔧 新增：手機版強制隱藏收合圖示列表 */
    .sidebar[style*="position: fixed"] #sidebar-collapsed-icons {
        display: none !important;
    }
    
    /* 🔧 確保手機版側邊欄顯示完整內容 */
    .sidebar[style*="position: fixed"] .sidebar-content {
        display: block !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    .sidebar[style*="position: fixed"] .sidebar-footer {
        display: block !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }


    .mobile-header {
        display: flex !important;
        align-items: center;
        padding: 12px 16px;
        background: transparent;
        border-bottom: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        height: 40px;
        box-sizing: border-box;
        /* box-shadow: var(--shadow-light); */ /* 🔧 移除陰影 */
    }

    /* 手機版導航列 */
    .mobile-top-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        background: var(--main-content-bg);
        border-bottom: none !important;
        box-shadow: none !important;
        height: 40px;
        display: flex !important;
        align-items: center;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important; 
    }

    .mobile-nav-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 16px;
        height: 100%;
    }

    .mobile-nav-hamburger,
    .mobile-nav-save {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 8px;
        border-radius: 4px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mobile-nav-hamburger:hover,
    .mobile-nav-save:hover {
        background: var(--bg-color);
        color: var(--primary-color);
    }

    .mobile-nav-breadcrumb {
        flex: 1;
        text-align: left;
        font-size: 0.9em;
        font-weight: 500;
        color: var(--text-color);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0 12px;
    }
    
    .main-content {
        background: var(--main-content-bg);
        margin-left: 0;
        margin-top: 0 !important;
        position: fixed !important;
        top: 40px !important; /* 導航條下方開始 */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        overflow-y: auto !important;
    }
    
    .content-area {
        background: var(--main-content-bg) !important;
        margin-top: 0 !important;
        padding: 12px 15px 12px 15px!important;
        min-height: 100%; 
        box-sizing: border-box;
    }
    
    
    /* 🔧 新增：手機版標題組容器 */
    .mobile-title-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
    }
    
    /* 🔧 更新：漢堡按鈕 - 模仿電腦版樣式 */
    .mobile-menu-btn {
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
    
    .mobile-menu-btn:hover {
        background: var(--bg-color);
        color: var(--primary-color);
    }
    
    /* 🔧 更新：手機版標題 - 模仿電腦版樣式 */
    .mobile-app-title {
        font-size: 1.2em;
        font-weight: 600;
        color: var(--text-color);
        margin: 0;
        cursor: pointer;
        transition: all 0.2s ease;
        line-height: 1;
        flex: 1;
    }
    
    .mobile-app-title:hover {
        color: var(--primary-color);
    }
    
    .versions-container.compare-view {
        grid-template-columns: 1fr;
    }
    
    .desktop-only-controls {
        display: none !important;
    }
    .mobile-only {
        display: flex !important;
    }

    .header-spacer {
        margin-right: auto; /* ✨ 魔法！這會吃掉所有左邊的可用空間，把右邊的兄弟們全部推到最右邊 */
    }

    /* 2. 保持按鈕組本身的佈局 */
    .mobile-action-buttons {
        display: flex;
        gap: 4px; /* 按鈕之間的間距 */
    }

    .main-action-buttons {
        gap: 4px; /* 確保按鈕之間有和手機版一致的間距 */
    }

    .character-header-bar.no-worldbook .main-action-buttons {
        display: none;
    }

    .character-header-bar {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        padding: 12px 15px !important;
        margin-bottom: 10px !important;
    }

    /* 第一行：角色名 + 4個按鈕 */
    .character-header-inner {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
    }
        
    .character-title-section {
        flex: 1 1 auto !important;
        min-width: 0 !important; /* 允許收縮 */
        text-align: left !important;
    }

    .character-main-title-fixed {
        font-size: 1.2em !important;
        font-weight: 600 !important;
        padding: 6px 8px !important;
        height: 32px !important;
        min-width: 100px !important;
    }
    
    .character-controls {
        display: flex;
        gap: 4px !important; /* 讓按鈕之間有點間距 */
    }

    .btn-edit-header {
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
        font-size: 0.8em !important;
        min-width: 28px !important;
    }

    /* 第二行：世界書選擇器 + 對比開關 */
    .character-header-second-row {
        justify-content: space-between !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
    }

    .select-edit-header {
        flex: 1 1 auto !important;
        height: 32px !important;
        font-size: 0.8em !important;
        padding: 6px 8px !important;
        min-width: 120px !important;
        max-width: none !important;
    }

    .select-edit-header option {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .view-toggle-switch {
        height: 32px !important;
        min-width: 80px !important;
        flex-shrink: 0 !important;
    }
    
    .toggle-text {
        padding: 0 6px !important;
        font-size: 0.75em !important;
    }
    .versions-container.single-view,
    .versions-container.compare-view,
    .character-header-bar.single-mode,
    .character-header-bar.compare-mode {
        max-width: 100%;
    }
    
    .fullscreen-editor-container {
        width: 95vw;
        height: 90vh;
    }
    
    .fullscreen-editor-header {
        padding: 30px 30px;
    }
    
    .fullscreen-editor-content {
        padding: 0 20px;
    }
    
    .fullscreen-editor-footer {
        padding: var(--spacing-lg) 20px;
    }
}

/* 總覽頁手機響應式 */
/* =================================
   手機版響應式樣式 (768px以下)
   ================================= */

@media (max-width: 768px) {
    .overview-controls {
        flex-wrap: wrap;
        padding: 0px 0px 16px 0px; /* 減少上下內邊距從 12px 到 8px */
        gap: 8px;
        margin-bottom: 0px;
        margin-top: -5px; /* 確保沒有上邊距 */
    }
    
    /* 手機版按鈕調整 */
    .overview-controls .overview-btn {
        padding: 6px 10px;
        font-size: 0.8em;
        min-width: auto;
        flex-shrink: 0;
        order: 1; /* 第一行：按鈕們 */
    }
    
    /* 搜尋框和按鈕同一行 */
    .overview-controls .search-container {
        order: 1; /* 第一行：和按鈕們一起 */
        flex: 1; /* 佔用剩餘空間 */
        min-width: 120px; /* 最小寬度保證可用性 */
    }
    
    .overview-controls .search-input {
        width: 100%;
        font-size: 0.8em;
    }
    
    /* 第二行：排序下拉選單 */
    .overview-controls .overview-sort-dropdown {
        order: 2;
        flex: 1;
        min-width: 120px;
        font-size: 0.8em;
        flex-basis: auto; /* 不強制換行 */
    }
    
    /* 第二行：標籤篩選按鈕 */
    .overview-controls button[onclick*="showTagSelector"] {
        order: 2;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 0.8em;
    }
    
    /* 第三行：已選標籤（如果有的話） */
    .overview-controls #selected-tags {
        order: 3;
        flex: none;
        width: 100%;
        flex-basis: 100%; /* 強制換行 */
        margin-top: 4px;
    }
    
    /* 批量操作列手機版調整 */
    .batch-operations-bar,
    .favorite-operations-bar {
        padding: 0px;
        margin: 0px 0px 20px 0px;
    }
    
    .batch-operations-content,
    .favorite-operations-content {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        margin-top: -18px;
        align-items: stretch;
    }
    
    .batch-operations-left,
    .favorite-operations-left {
        text-align: center;
        margin-bottom: 8px;
    }
    
    .batch-operations-right,
    .favorite-operations-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    
    /* 手機版批量操作按鈕 - 更緊密的設計 */
    .batch-operations-right .overview-btn,
    .batch-operations-right .overview-danger-btn,
    .favorite-operations-right .overview-btn,
    .favorite-operations-right .btn-primary {
        font-size: 0.75em;
        padding: 5px 6px;
        flex: 1;
        min-width: 65px;
        max-width: 150px; 
        line-height: 1.2; 
        overflow: hidden; 
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: auto;
        min-height: 28px;
    }

    /* 總覽頁卡片列表手機版 */
    .character-grid,
    .userpersona-grid {
        margin-top: 0px;
        gap: 8px 28px;
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
    }

    .loveydovey-grid {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
    }

    /* 移除卡片列表外層的左右邊距，實現滿版 */
    .overview-card-list-container {
        padding: 10px !important;
    }

    /* 調整卡片本身的大小和樣式 */
    .overview-card {
        width: 100% !important; /* 寬度由網格決定 */
    }

    .overview-card-body {
        height: auto !important; /* 高度由寬度和長寬比自動計算 */
        margin-bottom: 8px !important;
        box-shadow: none !important;
        border-radius: 2px !important;
    }

    .overview-folder-card-body,
    .overview-folder-card-stack {
        height: auto !important;
        border-radius: 2px !important;
    }

    .overview-card-name {
        font-size: 0.85em !important;
        line-height: 1.2 !important;
        margin-bottom: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .overview-folder-name {
        font-size: 0.9em !important;
        margin-bottom: 5px;
    }

    .overview-create-card-plus {
    font-size: 2em !important;
    margin-bottom: 4px !important;
    }

    .overview-create-card-text {
        font-size: 0.75em !important;
        line-height: 1.2 !important;
        padding: 0px 8px;
    }

    .overview-create-card-body,
    .overview-card-body,
    .overview-folder-card-body,
    .overview-folder-card-stack {
        border-radius: 2px !important;
    }

    .user-persona-content .avatar-preview {
        width: auto !important;
        height: 220px !important;
        aspect-ratio: 2/3 !important;
        max-width: 147px !important;
    }

    .persona-description-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .user-persona-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px !important;
    }

    /* 🎯 筆記本欄位手機版頂部控制列緊密佈局 */
    .custom-field-header {
        gap: 4px !important; /* 縮小左右區塊間距 */
        margin-bottom: 8px !important; /* 縮小與下方內容的間距 */
        align-items: center !important; /* 確保垂直對齊 */
    }

    /* 🎯 左側控制組緊密佈局 */
    .custom-field-left-controls {
        gap: 4px !important; /* 縮小拖曳柄與標題間距 */
        flex: 1 1 auto !important; /* 讓標題欄位佔用更多空間 */
        min-width: 0 !important; /* 允許收縮 */
    }

    /* 🎯 右側控制組緊密佈局 */
    .custom-field-right-controls {
        gap: 8px !important; /* 縮小按鈕間距 */
        flex-shrink: 0 !important; /* 防止被壓縮 */
        align-items: center !important;
    }

    /* 🎯 標題輸入框手機版優化 */
    .custom-field-name-input {
        min-width: 100px !important; /* 縮小最小寬度 */
        max-width: none !important; /* 移除最大寬度限制 */
        font-size: 0.9em !important; /* 稍微縮小字體 */
        padding: 4px 6px !important; /* 縮小內邊距 */
        height: 28px !important; /* 統一高度 */
    }

    /* 🎯 統計文字手機版優化 */
    .custom-field-stats {
        font-size: 0.75em !important; /* 縮小統計文字 */
        white-space: nowrap !important; /* 防止換行 */
        opacity: 0.8 !important; /* 降低透明度讓視覺更輕量 */
    }

    /* 🎯 全螢幕按鈕手機版優化 */
    .custom-field-header .fullscreen-btn {
        width: 28px !important;
        height: 28px !important;
        padding: 4px !important;
        font-size: 0.8em !important;
    }

    /* 🎯 刪除按鈕手機版優化 */
    .custom-field-header .delete-btn {
        width: 28px !important;
        height: 28px !important;
        padding: 4px !important;
    }

    /* 🎯 拖曳控制柄手機版優化 */
    .custom-field-drag-handle {
        width: 16px !important;
        height: 16px !important;
        padding: 2px !important;
    }

    /* =================================
    卿卿我我角色編輯頁手機版優化
    ================================= */


    /* 🎯 外容器寬度調整為100% */
    .loveydovey-content-section {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 🥰 頭像區域手機版布局調整 */
    .loveydovey-mode .avatar-section {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important; /* 與下方欄位保持距離 */
    }

    /* 🥰 頭像大小調整為220px正方形並置中 */
    .loveydovey-avatar {
        width: 220px !important;
        height: 220px !important;
        max-width: 220px !important;
        max-height: 220px !important;
        min-width: 220px !important;
        min-height: 220px !important;
        margin: 0 auto !important; /* 確保置中 */
    }

    /* 🎯 第一區塊重新布局：頭像獨立一行，基本欄位另一行 */
    .loveydovey-mode .avatar-section ~ div {
        width: 100% !important;
        flex: none !important;
        margin-top: 0 !important;
    }

    /* 🥺 creator-event-item 和 additional-info-item 內邊距縮小 */
    .creator-event-item,
    .additional-info-item {
        padding: 8px 12px !important; /* 從原本的 12px 16px 縮小 */
        margin-bottom: 10px !important; /* 也稍微縮小底部間距 */
    }

    /* 🥺 section-header 緊密化和字體優化 */
    .ld-section-header {
        padding: 6px 0 !important;
        margin: 6px 0 8px 0 !important;
    }

    .ld-section-header h3 {
        font-size: 1em !important;
        font-weight: 500 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .collapsible-header.ld-section-header.loveydovey-info {
        margin-top: -5px !important;
    
    }

    /* 🎯 調整各個大區塊的間距 */
    .field-section.collapsible-section {
        margin-bottom: 10px !important;
    }

    .field-section.collapsible-section:first-child {
        margin-top: 0 !important;
    }

    /* 🥰 優化摺疊箭頭的間距和大小 */
    .ld-section-header .collapse-icon {
        margin-right: 6px !important;
    }

    .ld-section-header .arrow-icon {
        width: 6px !important;
        height: 6px !important;
    }

}

/* 第4區塊：響應式匯出區域 */
/* 響應式匯出區域 */
@media (max-width: 1400px) {
    .versions-container.single-view + .export-section {
        max-width: 70%;
    }
}

@media (max-width: 1200px) {
    .versions-container.single-view + .export-section {
        max-width: 80%;
    }

    .versions-container.single-view,
    .character-header-bar.single-mode {
        max-width: 80%;
    }
    
    .versions-container.compare-view,
    .character-header-bar.compare-mode {
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    .versions-container.single-view + .export-section {
        max-width: 80%;
    }

    .versions-container.single-view,
    .versions-container.compare-view,
    .character-header-bar.single-mode,
    .character-header-bar.compare-mode {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .character-header-bar {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .versions-container {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 992px) {
    .versions-container.single-view + .export-section {
        max-width: 90%;
    }
    
    .versions-container.single-view,
    .versions-container.compare-view,
    .character-header-bar.single-mode,
    .character-header-bar.compare-mode {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .character-header-bar {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .versions-container {
        width: 100% !important;
        box-sizing: border-box !important;
    }

}

@media (max-width: 768px) {
    .versions-container.single-view + .export-section,
    .versions-container.compare-view + .export-section {
        max-width: 100%;
    }
}

/* 第5區塊：總覽列表頁手機響應式 */
/* =================================
   總覽列表頁 (List Page) 手機響應式
   ================================= */
@media (max-width: 768px) {
    /* 讓列表容器滿版 */
    .item-list-container {
        padding: 0 16px !important;
    }

    .list-page-container {
        max-width: 100% !important;
    }

    /* 調整列表區塊的內距，讓內容不要貼邊 */
    #folders-section,
    #files-section {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* 列表項樣式調整 */
    .list-item {
        padding: 12px 16px;
        margin-bottom: 8px;
        gap: 12px;
        flex-wrap: wrap; /* 允許內容換行 */
    }

    /* 隱藏選擇框的預留空間 */
    .list-item-selection-box {
        width: auto;
    }

    /* 讓主要內容區佔滿整行 */
    .list-item-content {
        flex-basis: 100%; /* 強制換行 */
        order: 1; /* 視覺順序第一 */
        margin-left: -28px; /* 補償選擇框消失的空間 */
    }
    
    .list-item:not(:has(.list-selection-checkbox)) .list-item-content {
        margin-left: 0; /* 沒有選擇框時，不需要補償 */
    }

    /* 手機版標題和統計資訊的容器 */
    .list-item-header,
    .list-item-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .list-item-header {
        margin-bottom: 6px;
    }

    /* 項目名稱 */
    .list-item-name {
        font-size: 1em; /* 稍微縮小字體 */
        gap: 8px;
    }

    .list-item-name svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* 統計和時間戳 */
    .list-item-stats,
    .list-item-timestamp {
        font-size: 0.8em;
        line-height: 1.3;
    }

    .list-item-timestamp {
    display: none;
}

    /* 讓統計資訊顯示在時間戳上面 */
    .list-item-footer {
        flex-direction: column-reverse; /* 倒轉順序 */
    }

    /* 操作按鈕（刪除） */
    .list-item-actions {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    .list-item-actions .delete-btn {
        /*
        opacity: 1;
        visibility: visible;
        padding: 4px 6px;
        */
        display: none;
    }
    
    .list-item-actions .delete-btn svg {
        width: 12px;
        height: 12px;
    }

    /* 新增項目卡片 */
    .add-item-card {
        padding: 12px 16px;
        margin-bottom: 8px; 
        min-height: 50px;   
        gap: 4px;
        justify-content: center; /* 水平置中 */
    }

    .add-item-icon svg {
        width: 20px;
        height: 20px;
        margin-bottom: -5px; 
    }

    .add-item-text {
        font-size: 0.85em;
        color: var(--text-muted);
    }

    .add-item-card:hover {
        border-color: var(--border-color);
        background-color: transparent;
    }

    .add-item-card:active {
        border-color: var(--accent-color);
        background-color: var(--bg-color);
    }
}

/* ========================================
   手機版模態框優化
   ======================================== */

/* 🎯 主要模態框容器 - 減小邊框、間距、圓角 */
@media (max-width: 768px) {

    /* 模態框背景遮罩 */
    .modal {
        overflow-y: auto !important;
    }
    
    .compact-modal-content {
        padding: 16px !important;
        border-radius: 8px !important; 
        max-width: 95vw !important;
        max-height: 85vh !important; 
        margin: 50vh auto 0 auto !important;
        border-width: 0.5px !important;
        overflow-y: auto !important;
    }

    /* 🎯 模態框標題區域 - 縮小間距和文字 */
    .compact-modal-header {
        gap: 6px !important; 
        margin-bottom: 12px !important; 
        padding-bottom: 8px !important; 
    }

    /* 🎯 模態框標題文字 - 縮小字體 */
    .compact-modal-title {
        font-size: 0.95em !important; 
        font-weight: 500 !important; 
    }

    /* 🎯 關閉按鈕 - 縮小尺寸 */
    .close-modal {
        width: 24px !important; 
        font-size: 18px !important;
        padding: 2px !important; 
    }

    /* 🎯 模態框區塊容器 - 減小間距 */
    .compact-section {
        padding: 12px !important; 
        margin-bottom: 12px !important; 
        border-radius: 6px !important; 
    }

    /* 🎯 區塊描述文字 - 縮小文字 */
    .compact-section-desc {
        font-size: 0.75em !important; 
        margin-bottom: 8px !important; 
    }

    /* 🎯 模態框描述文字 - 縮小文字和間距 */
    .compact-modal-desc {
        font-size: 0.8em !important; 
        margin-bottom: 12px !important; 
    }

    /* 🎯 模態框底部按鈕區域 - 減小間距 */
    .compact-modal-footer {
        gap: 8px !important; 
        margin-top: 16px !important; 
    }

    /* 🎯 模態框內的按鈕 - 縮小尺寸 */
    .compact-modal-footer .overview-btn {
        padding: 8px 12px !important; 
        font-size: 0.85em !important; 
    }

    /* 🎯 列表項目 - 縮小間距 */
    .compact-list-items {
        gap: 4px !important; /* 從 6px 減少到 4px */
    }

    .compact-list-item {
        font-size: 0.75em !important; /* 從 0.85em 減少到 0.75em */
        padding-left: 12px !important; /* 從 var(--spacing-md) 減少到 12px */
    }

    /* 🎯 搜尋結果項目 - 手機版優化 */
    .search-result-item {
        padding: 8px 12px !important; /* 從 12px 16px 減少到 8px 12px */
        margin-bottom: 6px !important; /* 從 8px 減少到 6px */
        border-radius: 4px !important; /* 從 6px 減少到 4px */
    }

    .tag-stats-container {
        font-size: 0.75em; /* 手機版字體稍微縮小 */
    }
    
    .tag-stat-text {
        display: none !important; /* 手機版隱藏文字 */
    }
    
    .tag-stat-number {
        font-size: 0.9em; /* 數字稍微放大補償 */
    }
    
    /* 🎯 標籤項目手機版整體優化 */
    .tag-item {
        padding: 10px 12px !important; /* 縮小內邊距 */
    }
    
    /* 🎯 標籤名稱區域手機版優化 */
    .tag-item > div:first-child {
        margin-bottom: 4px !important; /* 縮小底部間距 */
    }

    .theme-color {
    margin-top: 0px !important;
}
}

/* 第6區塊：手機版側邊欄和安全區域適配 */
@media (max-width: 768px) {
    /* 新增：手機版側邊欄展開時的高度和位置調整 */
    .sidebar[style*="position: fixed"] {
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: 100vh !important;
        
        /* 關鍵：使用可視區域高度，避免被瀏覽器UI遮擋 */
        height: 100dvh !important; /* dynamic viewport height - 會自動排除瀏覽器UI */
    }
    
    /* 讓側邊欄內容可以滾動，底部按鈕始終可見 */
    .sidebar[style*="position: fixed"] {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .sidebar[style*="position: fixed"] .sidebar-content {
        flex: 1 !important;
        overflow-y: auto !important;
        padding-bottom: 10px !important;
    }
    
    .sidebar[style*="position: fixed"] .sidebar-footer {
        flex-shrink: 0 !important;
        background: var(--sidebar-bg) !important;
        border-top: 0px solid var(--border-color);
        margin-top: auto !important;
    }
}

/* 超級簡潔的全域適配 */
@media (max-width: 768px) and (display-mode: standalone) {
    
    /* 定義全域安全區域變數 */
    :root {
        --pwa-safe-top: calc(env(safe-area-inset-top, 0px) + 8px);
        --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
        --pwa-safe-left: env(safe-area-inset-left, 0px);
        --pwa-safe-right: env(safe-area-inset-right, 0px);
    }
    
    /* 一次性處理所有需要適配的元素 */
    .mobile-top-nav,
    .sidebar[style*="position: fixed"],
    .main-content,
    .modal-overlay,
    .fullscreen-editor-container {
        /* 自動適配安全區域 */
        padding-top: var(--pwa-safe-top) !important;
        padding-bottom: var(--pwa-safe-bottom) !important;
        padding-left: var(--pwa-safe-left) !important;
        padding-right: var(--pwa-safe-right) !important;
    }
    
    /* 特殊調整 */
    .mobile-top-nav {
        background: var(--main-content-bg) !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .main-content {
        top: calc(25px + var(--pwa-safe-top)) !important;
        padding-top: 0px !important; /* 重設內容的 padding */
    }
}

@media (max-width: 768px) {
    /* 🚫 禁用手機版長按預設行為 */
    
    /* 禁用角色卡長按保存圖片 */
    .home-card,
    .overview-card,
    .overview-card img,
    .overview-card-image,
    .character-grid .home-card,
    .userpersona-grid .overview-card,
    .loveydovey-grid .overview-card {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        pointer-events: auto !important;
    }
    
    /* 禁用列表項目長按選取文字 */
    .list-item,
    .folder-card,
    .folder-list-item,
    .character-item {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* 🔧 確保卡片內的圖片無法被長按保存 */
    .home-card img,
    .overview-card img,
    .overview-folder-card-body,
    .overview-card-body img {
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        pointer-events: none !important; /* 圖片完全不響應觸摸 */
    }
    
    /* 🎯 但保留卡片本身的點擊功能 */
    .home-card,
    .overview-card,
    .list-item,
    .folder-card {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}