/* 第5區塊：編輯器頂部控制  */
/* 角色標題與控制區域 */
.character-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px 15px 20px;
    background: var(--content-bg);
    border-radius: var(--radius-lg);
    margin-bottom: 15px; /* 原本內聯的 margin-bottom */
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-light);
    box-sizing: border-box;
}

.character-header-bar.single-mode {
    max-width: 60%;
    margin: 0 auto var(--spacing-xl) auto;
    margin-bottom: 12px;
}

.character-header-bar.compare-mode {
    max-width: 100%;
    margin: 0 auto var(--spacing-xl) auto;
    margin-bottom: 12px;
}

.character-title-section {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    gap: 0px;
    margin-right: 8px;
}

.character-main-title-fixed {
    font-size: 1.5em !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    color: var(--text-color) !important;
    transition: all 0.2s ease !important;
    height: 36px !important; /* 🆕 從內聯移過來 */
    min-width: 80px !important;
    flex: 1 1 0px !important;
    max-width: 700px !important;
    width: auto !important;
    box-sizing: border-box !important; /* 🆕 確保邊距計算正確 */
}

.character-main-title-fixed:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    background: var(--bg-color) !important;
}

.character-main-title-fixed:hover {
    border-color: var(--border-color) !important;
}

.character-main-title {
    font-size: 1.4em !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: var(--padding-md) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    color: var(--text-color) !important;
    transition: all 0.2s ease !important;
}

.character-main-title:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    background: var(--bg-color) !important;
}

.character-main-title:hover {
    border-color: var(--border-color) !important;
}

.character-controls {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
}
/* 控制按鈕適當縮小 */
.character-controls > * {
    flex-shrink: 1 !important;
}
/* 版本標題欄內部容器 */
.character-header-inner {
    width: 98%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 版本面板容器 */
.version-header-container {
    width: 98%;
    margin: 0 auto;
}

/* 版本標題行 */
.version-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 500px;
    overflow-x: auto;
    margin-bottom: -10px;
}

/* 版本控制按鈕組 */
.version-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    justify-content: flex-end;
    min-width: 140px;
}

/* 版本標籤行 */
.version-tags-row {
    margin: 0px 0 8px 0;
    padding: 0 12px;
}

/* 版本統計樣式 */
.version-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    color: var(--text-muted);
    padding: 0 12px;
}

.version-stats.has-tags {
    margin-top: 4px;
}

.version-stats.no-tags {
    margin-top: 8px;
}

/* 版本分隔線 */
.version-divider {
    border-top: 1px solid var(--border-color);
    margin: 5px 0 20px 0;
}


.version-panel {
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xxl);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-light);
}

.version-panel:hover {
    box-shadow: var(--shadow-medium);
}

.version-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: -10px;
    padding-bottom: var(--spacing-lg);
    gap: 12px;
    width: 100%;
    min-width: 500px;
    overflow-x: auto;
}

.version-title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--accent-color);
    background: transparent;
    border: 1px solid transparent;
    padding: 5px 8px;
    border-radius: 0px; /* 保持圓角 */
    transition: all 0.2s ease;
    margin: 0;
    flex: 1 1 350px;
    min-width: 350px;
    max-width: none;
}

.version-title:hover {
    border-color: var(--border-color);
}

.version-title:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--bg-color);
}


/* 世界書選擇器 */
.select-edit-header {
    padding: 8px 12px; 
    border: 1px solid var(--border-color); 
    border-radius: 4px; 
    background: var(--surface-color); 
    color: var(--text-color);
    font-size: 0.85em;
    width: auto !important; 
    min-width: 100px !important; 
    max-width: 280px !important; 
    flex: 0 1 280px !important;
    height: 36px;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
    flex-shrink: 1 !important; 
}

/* 視圖切換開關 */
.view-toggle-switch {
    position: relative;
    border: 0px solid color-mix(in srgb, var(--accent-color) 60%, transparent);
    border-radius: 6px;
    padding: 2px;
    background: color-mix(in srgb, var(--accent-color) 40%, transparent);
    cursor: pointer;
    transition: all 0.3s ease;
    height: 36px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    width: auto !important; /* 🔧 改為自動寬度 */
    min-width: auto !important; /* 🔧 移除固定最小寬度 */
    flex-shrink: 0 !important; /* 🔧 保持不被壓縮 */
}
/* 🆕 滑動背景的樣式 */
.toggle-background {
    position: absolute;
    top: 2px;
    height: calc(100% - 4px);
    background: var(--accent-color);
    border-radius: 4px;
    transition: all 0.3s ease;
    width: calc(50% - 2px);
}

/* 🆕 單一模式的背景位置 */
.view-toggle-switch.single-mode .toggle-background {
    left: 2px;
}

/* 🆕 對比模式的背景位置 */
.view-toggle-switch.compare-mode .toggle-background {
    right: 2px;
}

/* 🆕 文字容器的基本樣式 */
.toggle-text {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: 0.85em;
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap;
    color: var(--text-color);
}

/* 🆕 激活狀態的文字顏色 */
.view-toggle-switch.single-mode .toggle-text.single {
    color: white;
}

.view-toggle-switch.compare-mode .toggle-text.compare {
    color: white;
}

/* 編輯頁頂部控制欄按鈕 */
.btn-edit-header {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-md);
    transition: all 0.2s ease;
    text-decoration: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    flex-shrink: 0 !important;
    min-width: 36px !important;
    /* 編輯頁專用樣式（整合自內聯樣式） */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.existing-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.timestamp-text {
    font-size: 0.75em;
    opacity: 0.8;
}

/* 版本標籤彈窗 */
.version-tag-modal {
    position: fixed;
    top: auto;
    right: auto;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    box-shadow: var(--shadow-medium);
    z-index: 10000;
    display: none;
    min-width: 200px;
}

/* 版本標籤輸入框（field-input 的專用版本） */
.version-tag-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.85em;
}

/* 版本標籤建議列表 */
.version-tag-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 120px;
    overflow-y: auto;
    z-index: 10001;
    display: none;
}

/* 版本標籤建議項目 */
.version-tag-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
    font-size: 0.85em;
}

.version-tag-suggestion:hover {
    background: var(--border-color);
}

/* 角色版本內容主容器 */
.character-version-content {
    width: 98%;
    margin: 0 auto;
}

/* 角色基本資訊第一行：創作者 + 版本 */
.character-basic-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

/* 取消 field-group 下邊距的輔助 class */
.field-group.no-bottom-margin {
    margin-bottom: 0;
}

/* creatorNotes 區塊專用樣式 */
.field-group.creator-notes-group {
    margin-bottom: 8px;
}

.field-label.creator-notes-label {
    margin-bottom: 4px;
}

/* creatorNotes textarea 固定高度樣式 */
.field-input.creator-notes-textarea {
    height: 148px;
    resize: none !important;
    min-height: 148px;
    max-height: 148px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* 自定義欄位頂部控制列 */
.custom-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* 左側控制組（拖曳 + 標題） */
.custom-field-left-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 右側控制組（全螢幕 + 統計 + 刪除） */
.custom-field-right-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 自定義欄位拖曳控制柄 */
.custom-field-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.custom-field-drag-handle:hover {
    color: var(--text-color);
    background-color: var(--border-color);
}

/* 自定義欄位名稱輸入框 */
.custom-field-name-input {
    padding: 4px 8px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-color);
    min-width: 250px;
    width: auto;
}

/* 自定義欄位統計文字 */
.custom-field-stats {
    color: var(--text-muted);
}

/* 通用的標準 textarea 樣式（自定義欄位 + 統一文字欄位） */
.standard-textarea {
    min-height: 200px;
    max-height: 70vh;
    resize: vertical;
}

/* 替代問候語管理按鈕 */
.alternate-greetings-btn {
    float: right;
    height: 24px !important;
    font-size: 0.85em;
    z-index: 1000;
    position: relative;
    pointer-events: auto;
}

/* 有額外版本時的按鈕樣式 */
.alternate-greetings-btn.has-versions {
    background: color-mix(in srgb, var(--text-muted) 20%, transparent);
}

.alternate-greetings-btn.has-versions:hover {
    background: var(--accent-color);
    filter: brightness(1.1);
}

/* 版本按鈕組容器樣式 */
.version-button-group {
    display: flex;
    gap: 8px;
    flex-shrink: 0;

}

.empty-state {
    text-align: center;
    padding: 80px;
    color: var(--text-muted);
}

/* 載入狀態主要文字 */
.loading-main-text {
    font-size: 1.1em;
    margin-bottom: 12px;
}

/* 載入狀態副文字 */
.loading-sub-text {
    font-size: 0.9em;
    opacity: 0.7;
}

.mobile-only {
    display: none; /* 手機版專用區塊預設隱藏 */
}

.character-controls .desktop-only-controls {
    display: flex;
    align-items: center;
    gap: 8px; /* 根據你的設計調整 */
}

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

@media (max-width: 768px) {

    /* 手機版角色編輯頁面優化 */
    .character-version-content {
        padding: 12px 8px; /* 減少內邊距 */
    }

    /* 手機版基本資訊區域調整 */
    .character-basic-info {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    /* 手機版頭像區域 - 置中縮小 */
    .character-basic-info .avatar-section {
        order: -1; /* 確保頭像在最上方 */
        align-self: center;
    }

    .character-basic-info .avatar-preview {
        height: 220px !important;
        margin: 0 auto;
    }

    /* 手機版基本資訊欄位 - 改為一行一個 */
    .character-basic-info-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .basic-info-fields {
        width: 100%;
        max-width: none;
    }

    /* 手機版版本面板邊距調整 */
    .version-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px 0 !important; /* 移除左右邊距，避免超出 */
    padding: 16px 12px !important; /* 減少內邊距 */
    box-sizing: border-box !important; /* 確保邊距包含在寬度內 */
    overflow-x: hidden !important; /* 防止水平滾動 */
    }

    /* 🔧 版本面板內部容器也要配合 */
    .version-header-container {
        width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* 🔧 版本標題行也要防止溢出 */
    .version-header {
        flex-direction: row !important; /* 改回水平排列 */
        align-items: center !important;
        gap: 8px !important;
        min-width: auto !important;
        overflow: visible !important;
    }

    /* 🔧 版本標題輸入框調整 */
    .version-title {
        width: 100% !important;
        min-width: auto !important; /* 移除最小寬度 */
        flex: 1 1 auto !important;
        max-width: none !important;
        order: 2;
    }

    /* 🔧 版本控制按鈕組換行顯示 */
    .version-controls {
        display: flex !important;
        flex: 0 0 auto !important; /* 不拉伸，保持緊湊 */
        justify-content: flex-end !important;
        flex-wrap: nowrap !important; /* 不換行，保持在一行 */
        gap: 4px !important; /* 縮小間距讓按鈕更緊湊 */
        order: 2 !important; /* 按鈕在右邊 */
        min-width: auto !important;
    }

    .version-button-group {
        gap: 4px;
    }

    /* 🔧 版本控制按鈕調整 */
    .version-panel-btn {
        padding: 6px 8px !important; /* 縮小內邊距 */
        font-size: 0.8em !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important; /* 按鈕不被壓縮 */
    }

    /* 🔧 如果有標籤選擇器也要適配 */
    .version-controls select {
        flex: 0 0 auto !important;
        min-width: 120px !important;
        max-width: 100% !important;
    }

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

    /* 🔧 版本容器本身也要調整 */
    .versions-container.single-view,
    .versions-container.compare-view {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0px !important; /* 給整體一點邊距 */
        box-sizing: border-box !important;
    }

}


/* ===== 預設提示詞樣式系統 ===== */

/* 1. 容器層級 */
.preset-version-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0px 8px;
}

/* 2. 分頁系統 */
.preset-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.preset-tab {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9em;
    font-weight: 500;
}

.preset-tab:hover {
    background: var(--bg-color);
    border-color: var(--accent-color);
}

.preset-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 3. 控制按鈕區域 */
.preset-controls {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    margin-bottom: 16px;
}

/* 4. 條目面板 - 參考 WorldBook 樣式 */
.preset-entry-panel {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    background: var(--header-bg);
}

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

/* 5. 條目內容區域 */
.preset-entry-content {
    padding: 0 10px;
    display: none;
}

/* 6. 欄位布局 - 參考 WorldBook */
.preset-prompt-name {
    flex: 1;
    margin-right: 8px;
    min-width: 150px;
}

.preset-prompt-name .field-input {
    font-weight: 500;
    min-width: 150px;
    width: 100%;
}

.preset-prompt-role {
    width: 100px;
    margin-right: 8px;
}

.preset-prompt-type {
    width: 120px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preset-prompt-injection {
    width: 80px;
    margin-right: 8px;
}

.preset-prompt-injection .field-input {
    width: 80px;
    text-align: center;
}

/* 7. 標籤樣式 */
.tag-marker {
    background: var(--border-color);
    color: var(--text-muted);
    opacity: 0.8;
}

.tag-editable {
    background: var(--primary-color);
    color: white;
}

/* 8. 響應式調整 - 參考 WorldBook */
@media (max-width: 992px) {
    .preset-entry-header {
        display: flex;
        gap: 6px;
        margin: 6px 0;
        flex-wrap: wrap;
    }

    .preset-prompt-name {
        width: 100%;
        min-width: 120px;
        margin-bottom: 8px;
    }
    
    .preset-prompt-role,
    .preset-prompt-injection {
        min-width: 80px;
    }
    
    .preset-prompt-type {
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .preset-entry-panel {
        padding: 8px;
        margin-bottom: 12px;
    }
    
    .preset-entry-header {
        gap: 4px;
        margin: 6px 0;
    }
    
    .preset-entry-header .field-input.compact-input {
        padding: 3px 5px;
        font-size: 11px;
        height: 26px;
        border-radius: 4px;
    }
    
    .preset-prompt-name .field-input {
        font-size: 12px;
        font-weight: 500;
    }
    
    .preset-prompt-role select,
    .preset-prompt-injection input {
        font-size: 10px;
        text-align: center;
    }
    
    .preset-controls {
        flex-direction: column;
        gap: 8px;
    }
    
    .preset-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .preset-tab {
        font-size: 0.85em;
        padding: 6px 12px;
    }
}

/* 9. 空狀態樣式 */
.prompts-list .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-style: italic;
}

/* 10. 容器樣式 */
.prompts-entries-container {
    margin-top: 8px;
}

.prompts-list {
    width: 100%;
}

/* 禁用狀態的條目樣式 
.preset-entry-disabled {
    opacity: 0.6;
}*/


/* ===== 預覽模式樣式 ===== */

/* 預覽模式頂部欄樣式 */
.character-header-bar.preview-mode {
    max-width: 100%;
    margin: 0 auto var(--spacing-xl) auto;
    margin-bottom: 12px;
}

/* 預覽視圖容器 - 使用獨立樣式避免影響對比模式 */
.versions-container.preview-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: var(--spacing-xxl);
    max-width: 100%;
    margin: 0 auto;
}

/* 預覽模式下的 version-panel 獨立滾動設置 */
.versions-container.preview-view > .version-panel {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* 預覽標題輸入框 - 移除唯讀時的互動效果 */
.preset-preview-panel .version-title[readonly]:hover,
.preset-preview-panel .version-title[readonly]:focus {
    border-color: transparent !important;
    outline: none !important;
}

/* 預覽統計樣式 */
.preset-preview-stats {
    padding: 8px 12px 0px 12px;
    font-size: 0.85em;
    color: var(--text-muted);
}

/* 預覽內容包裝器 */
.preset-preview-content-wrapper {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

/* 預覽內容基礎樣式 */
.preset-preview-content {
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--text-color);
    white-space: pre-wrap;
    word-wrap: break-word;
    letter-spacing: 0.3px;
}

/* 字體切換樣式 */
.preset-preview-content.font-monospace {
    font-family: 'Courier New', Monaco, monospace;
}

.preset-preview-content.font-serif {
    font-family: 'Georgia', 'Times New Roman', '微軟正黑體', serif;
    letter-spacing: 0.3px;
}

/* 字體按鈕激活狀態 */
.version-panel-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 來源標記樣式 */
.preset-preview-source {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85em;
    margin: 8px 0;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
}

/* 預覽條目分隔線 - 不可選取 */
.preset-preview-separator {
    border-top: 1px dashed var(--border-color);
    margin: 16px 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

/* 預覽條目標籤 - 不可選取 */
.preset-preview-label {
    font-size: 0.75em;
    color: var(--text-muted);
    margin-bottom: 6px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
    opacity: 0.7;
}

/* 預覽條目內容 */
.preset-preview-entry {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 確保編輯面板內容不被壓縮 */
.versions-container.preview-view .version-panel > div {
    flex-shrink: 0;
}

/* 手機版預覽模式 */
@media (max-width: 768px) {
    .versions-container.preview-view {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .versions-container.preview-view > .version-panel {
        max-height: 40vh;
    }
    
    .preset-preview-content-wrapper {
        max-height: 40vh;
    }
}

/* 預覽統計樣式 */
.preset-preview-stats {
    padding: 8px 12px 0px 12px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.preset-preview-panel .version-title[readonly]:hover,
.preset-preview-panel .version-title[readonly]:focus {
    border-color: transparent !important;
    outline: none !important;
}