/* ===== 世界書條目樣式系統 ===== */
:root {
    --wb-entry-gap: 8px;
}

/* 1. 容器層級 */
.wb-entry-panel {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    background: var(--header-bg);
}

.wb-entry-header-grid {
    display: flex;
    gap: var(--wb-entry-gap);
    margin: 10px;
    align-items: center;
}

/* ✨ 新增：為標題列微調樣式 ✨ */
.entry-header-labels {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8em;
    color: var(--text-muted);
    font-weight: 500;
}

.wb-entry-content {
    padding: 0 10px;
    display: none;
}

/* 2. 拖拽控制 */
.wb-drag-handle-block {
    display: block;
}

/* 3. 切換按鈕 */
.wb-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-muted);
    padding: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. 自定義開關系統 */
.wb-toggle-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 8px;
}

.wb-toggle-hidden-input {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}

.wb-toggle-switch {
    width: 28px;
    height: 16px;
    border-radius: 10px;
    position: relative;
    transition: all 0.2s ease;
}

.wb-toggle-switch-enabled {
    background: var(--primary-color);
}

.wb-toggle-switch-disabled {
    background: var(--border-color);
}

.wb-toggle-circle {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.wb-toggle-circle-enabled {
    left: 14px;
}

.wb-toggle-circle-disabled {
    left: 4px;
}

/* 5. 欄位組覆蓋 - 解決spacing衝突 */
.wb-field-no-margin {
    margin-bottom: 0 !important;
}

.wb-field-flex {
    flex: 1;
    margin-right: 0px !important;
    padding-right: 0px !important;
    min-width: 150px;
}

.wb-field-margin-right {
    margin-right: 0px !important;
    padding-right: 0px !important;
}

/* 6. 輸入框寬度系統 */
.wb-input-bold {
    font-weight: 500;
}

.wb-input-width-55 {
    width: 55px !important;
}

.wb-input-width-60 {
    width: 60px !important;
}

.wb-input-width-150 {
    width: 55px;
}

/* 7. 按鈕間距 */
.wb-add-btn-spacing {
    margin-top: 16px !important;
}

/* 標題輸入框容器 - 占滿剩餘空間 */
.wb-entry-header-grid > .wb-field-flex {
    flex: 1;
    min-width: 120px;
}

/* 標題輸入框內的輸入框也要設定最小寬度 */
.wb-entry-header-grid > .wb-field-flex .field-input {
    min-width: 120px;
    width: 100%;
}

/* ===== 世界書條目詳細內容樣式 ===== */

/* 網格布局 */
.wb-detail-grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 120px !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

/* 標籤樣式 */
.wb-detail-label {
    margin-bottom: 4px !important;
    font-size: 0.85em !important;
}

.wb-detail-label-flex {
    margin-bottom: 4px !important;
    font-size: 0.85em !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 統計文字 */
.wb-detail-stats {
    margin-left: 8px !important;
    font-size: 0.8em !important;
    color: var(--text-muted) !important;
}

/* 全屏按鈕 */
.wb-detail-fullscreen-btn {
    margin-left: 6px !important;
}

/* UID文字 */
.wb-detail-uid {
    font-size: 0.8em !important;
    color: var(--text-muted) !important;
}

/* 右側控件區域 */
.wb-detail-right-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 文本框 */
.wb-detail-textarea {
    min-height: 200px !important;
    resize: vertical !important;
}

/* ===== Advanced Settings 樣式 ===== */

.wb-details-no-margin {
    margin-bottom: 0 !important;
}

.wb-summary-advanced {
    cursor: pointer !important;
    color: var(--text-color) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    font-size: 0.9em !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
}

.wb-chevron-transition {
    transition: transform 0.2s ease !important;
}

.wb-advanced-content {
    padding: 8px 0 !important;
    border-top: 1px solid var(--border-color) !important;
}

.wb-grid-2fr-1fr {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    align-items: end !important;
}

.wb-label-row-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 4px !important;
}

.wb-label-small {
    margin-bottom: 0 !important;
    font-size: 0.85em !important;
}

.wb-group-priority-container {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--header-bg) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border-color) !important;
}

.wb-priority-text {
    font-size: 0.75em !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
}

.wb-checkbox-no-margin {
    margin: 0 !important;
}

.wb-height-24-flex {
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 4px !important;
}

.wb-label-tiny {
    margin-bottom: 0 !important;
    font-size: 0.8em !important;
}

/* ===== Triggers 觸發設定樣式 ===== */

.wb-triggers-container {
    margin-bottom: 12px !important;
}

.wb-triggers-display {
    min-height: 32px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
    padding: 4px 8px !important;
}

.wb-triggers-empty {
    color: var(--text-muted) !important;
    font-size: 0.9em !important;
}

.wb-triggers-dropdown {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    z-index: 1000 !important;
    padding: 8px !important;
}

.wb-trigger-option {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 4px !important;
    font-size: 0.85em !important;
}

.wb-trigger-text {
    margin-left: 6px !important;
}

.wb-grid-3-equal {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

/* ===== 遞歸控制區域樣式 ===== */
.wb-grid-recursion {
    display: flex !important; /* ✨ 1. 從 grid 改為 flex */
    flex-wrap: wrap !important; /* ✨ 2. 允許換行 */
    gap: 12px !important;
    margin-bottom: 12px !important;
    align-items: start !important;
}

/* 為左側區塊（遞歸選項）設定彈性 */
.wb-grid-recursion > div:first-child {
    flex: 1; /* 佔據主要剩餘空間 */
    min-width: 250px; /* 給它一個最小寬度，避免被過度擠壓 */
}

/* 為右側區塊（數值設定）設定彈性 */
.wb-values-right {
    flex: 1; /* 也讓它參與空間分配 */
    min-width: 300px; /* 給它一個最小寬度，決定了它何時會換行 */
}

.wb-recursion-title {
    font-size: 0.85em !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
    margin-bottom: 8px !important;
}

.wb-recursion-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.wb-recursion-option {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 0.85em !important;
}

/* ===== 右側數值設定區域樣式 ===== */
.wb-values-right {
    justify-self: end !important;
}

.wb-grid-3x150-mb,
.wb-grid-3x150 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)) !important;
    gap: 8px !important;
}

.wb-grid-3x150-mb {
    margin-bottom: 8px !important;
}

/* ===== 額外匹配來源區域樣式 ===== */
.wb-details-margin-top {
    margin-top: 12px !important;
}

.wb-grid-2-equal {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

/* 手機版標籤 - 桌面版預設隱藏 */
.wb-mobile-label {
    display: none;
}

/* ===== 桌面版樣式 (769px以上) ===== */
.wb-entry-col-left,
.wb-entry-col-main,
.wb-entry-col-right {
    display: flex;
    align-items: center;
    gap: 4px; /* 統一內部間距 */
}

/* 這一段是新增的，確保中間區塊能正確伸展和換行 */
.wb-entry-col-main {
    flex-wrap: wrap;
    flex-grow: 1; /* 佔據所有剩餘空間 */
    min-width: 0;
    gap: var(--wb-entry-gap); /* 讓內部元素之間也有間距 */
}

/* 確保主內容區域的標題輸入框能正常填滿 */
.wb-entry-col-main .wb-field-flex {
    flex-grow: 1;
    min-width: 150px;
}

/* ✨ 新增：讓標題列內的元素也能正確顯示 ✨ */
.header-label-item {
    display: flex;
    align-items: center;
    padding: 0 4px; /* 增加一點內邊距，讓文字更好看 */
}


/* ===== 平板與中等視窗響應式樣式 (992px以下) ===== */
@media (max-width: 992px) {
    .wb-mobile-label {
        display: inline-block !important;
        font-size: 0.7em;
        color: var(--text-muted);
        margin-right: 3px;
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* 隱藏桌面版的標題列 */
    .entry-header-labels {
        display: none !important;
    }

    /* 提前將 header 從 grid 切換為 flex，賦予彈性 */
    .wb-entry-header-grid {
        display: flex;
        gap: 6px;
        margin: 6px 0;
    }

    /* 提前讓這三個包裝容器生效，從 display: contents 變為 flex */
    .wb-entry-col-left,
    .wb-entry-col-main,
    .wb-entry-col-right {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* 讓中間區塊可以自動延展並允許內部項目換行 */
    .wb-entry-col-main {
        flex-wrap: wrap;
        flex-grow: 1;
        min-width: 0;
    }

    /* 確保中間區塊的標題輸入框能正常填滿 */
    .wb-entry-col-main .wb-field-flex {
        width: 100%;
        min-width: 120px;
    }
}

/* ===== 手機版響應式樣式 (768px以下) ===== */
@media (max-width: 768px) {

    /* 世界書條目面板調整 */
    .wb-entry-panel {
        width: 100%;
        padding: 8px 8px; /* 左右padding設為0 */
        margin-bottom: 12px;
    }
    
.wb-entry-header-grid {
    display: flex;
    gap: 6px; /* 欄之間的間距 */
    margin: 6px 0; /* 左右margin設為0 */
    align-items: center; /* 垂直居中對齊三欄 */
}

    .entry-header-labels {
        display: none !important;
    } 

    .wb-entry-header-grid .wb-numeric-field-mobile {
        display: flex;
        align-items: center;
        gap: 2px;
    }


    /* 移除手機版條目內容區域的左右內邊距 */
    .wb-entry-content {
        padding-left: 2px;
        padding-right: 2px;
    }
    
    /* === 組件尺寸調整 === */

    /* 移除啟用開關右側多餘的間距 */
    .wb-toggle-wrapper {
        margin-right: 2 !important;
    }
    
    /* 所有輸入框基礎樣式調整 */
    .wb-entry-header-grid .field-input.compact-input {
        padding: 3px 5px;
        font-size: 11px;
        height: 26px;
        border-radius: 4px;
    }

    /* 標題輸入框完全移除所有間距 */
    .wb-entry-header-grid .wb-field-flex {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 觸發模式選擇框 */
    .wb-entry-header-grid .wb-input-width-55 {
        width: 52px !important;
        min-width: 52px !important; /* 確保最小寬度 */
        font-size: 10px;
        text-align: center;
        flex-shrink: 0; /* 防止被擠壓 */
    }

    /* 插入位置選擇框 */
    .wb-entry-header-grid .wb-input-width-150 {
        width: 115px !important;
        min-width: 115px !important; /* 確保最小寬度 */
        font-size: 10px;
        flex-shrink: 0; /* 防止被擠壓 */
    }
    
    /* 數值輸入框（深度、順序、機率） */
    .wb-entry-header-grid .wb-input-width-60 {
        width: 50px !important;
        font-size: 10px;
        text-align: center;
    }

    .wb-entry-header-grid .copy-btn {
        flex-shrink: 0;
    }

    .wb-entry-header-grid .delete-btn {
        flex-shrink: 0;
    }
    
    /* 複製和刪除按鈕 */
    .wb-entry-header-grid .copy-btn,
    .wb-entry-header-grid .delete-btn {
        width: 32px;
        height: 32px; 
        padding: 5px;
        border-radius: 6px;
        flex-shrink: 0;
    }

    .wb-entry-header-grid .copy-btn svg,
    .wb-entry-header-grid .delete-btn svg {
        width: 14px;
        height: 14px;
    }
    
    /* 啟用開關調整 */
    .wb-toggle-switch {
        width: 25px !important;
        height: 14px !important;
        border-radius: 8px;
    }
    
    .wb-toggle-circle {
        width: 8px !important;
        height: 8px !important;
        top: 3px !important;
    }
    
    .wb-toggle-circle-enabled {
        left: 13px !important;
    }
    
    .wb-toggle-circle-disabled {
        left: 3px !important;
    }
    
    /* 標題輸入框特殊樣式 */
    .wb-entry-header-grid .wb-input-bold {
        font-weight: 500;
        font-size: 12px;
    }

    /* 手機版間距統一優化 */
    .wb-entry-header-grid .wb-field-margin-right {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 只保留元素之間的gap間距（已在.wb-entry-header-grid設定為4px） */
    .wb-entry-header-grid .wb-field-no-margin {
        margin-bottom: 0 !important;
    }

    /* 手機版數值輸入框標籤顯示 */
    .wb-mobile-label {
        display: inline-block !important;
        font-size: 0.6em;
        color: var(--text-muted);
        margin-right: 2px;
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .wb-entry-col-left,
    .wb-entry-col-main,
    .wb-entry-col-right {
        display: flex; /* 在手機版上啟用 flex 佈局 */
        align-items: center;
        gap: 4px; /* 欄內項目間距 */
    }

    .wb-entry-col-right {
        flex-direction: column; /* ✨ 核心改動：將按鈕從水平排列改為垂直堆疊 */
        gap: 4px; /* 調整一下垂直堆疊時的間距 */
    }

    .wb-entry-col-main {
        flex-wrap: wrap; /* 允許中間的元素換行 */
        flex-grow: 1; /* 佔據所有剩餘空間 */
        min-width: 0; /* 確保在空間不足時可以被壓縮 */
    }

    /* 確保主內容區域的標題輸入框能正常填滿 */
    .wb-entry-col-main .wb-field-flex {
        width: 100%;
        min-width: 120px;
    }
    

    /* ===== 遞歸控制與數值設定區域響應式調整 ===== */

    /* 讓裡面的輸入框寬度不再寫死，而是自動填滿可用空間 */
    .wb-values-right .wb-input-width-150 {
        width: 100% !important;
    }
}

/* 批量模式樣式 */
.batch-checkbox {
    display: flex;
    align-items: center;
}

.batch-checkbox-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.batch-toolbar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    z-index: 100;
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.batch-toolbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.batch-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-count {
    font-weight: 500;
    color: var(--text-color);
}

.batch-actions {
    display: flex;
    gap: 8px;
}

.batch-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.9em;
}

.batch-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== 額外版本管理樣式 ===== */

/* 版本管理模態框 */
.content-versions-modal {
    max-width: 800px !important;
    max-height: 85% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 版本管理內容滾動容器 */
.content-versions-content {
    flex: 1;
    overflow-y: auto;
    margin-top: 0px;
    padding-right: 12px;
}

/* 版本項目容器 */
.content-version-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--header-bg);
    position: relative;
    transition: all 0.2s ease;
}

/* 當前主內容特殊樣式 */
.content-version-current {
    border: 2px solid var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 8%, var(--header-bg)) !important;
}

/* 版本項目標題列 */
.content-version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* 版本標題左側區域 */
.content-version-title-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 版本標題文字 */
.content-version-title {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-color);
    flex-shrink: 0;
}

/* 版本備註輸入框（透明風格） */
.content-version-note-input {
    font-size: 0.8em;
    font-style: italic;
    color: var(--text-muted);
    font-weight: normal;
    margin-left: 8px;
    max-width: 200px;
    min-width: 80px;
    padding: 2px 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: border-color 0.15s, background 0.15s;
}

.content-version-note-input:hover {
    border-color: var(--border-color);
}

.content-version-note-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.content-version-note-input::placeholder {
    color: var(--text-muted);
    font-style: italic;
    opacity: 0.6;
}

/* 當前主內容標題高亮 */
.content-version-current .content-version-title {
    color: var(--accent-color);
}

/* 版本操作按鈕區域 */
.content-version-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 採用此版本按鈕 */
.use-version-btn {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
}

.use-version-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 版本文本區域 */
.content-version-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}

/* 版本底部工具列 */
.content-version-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

/* 版本統計文字 */
.content-version-stats {
    font-size: 0.85em;
    color: var(--text-muted);
}

/* 版本新增按鈕容器 */
.content-versions-add-container {
    margin: 0px 0 20px 0;
}

/* 版本說明提示 */
.content-versions-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 12px 16px;
    font-size: 0.85em;
    font-style: italic;
}