/* --- Gemini Glow System Variables --- */
:root {
    --bg-color: #F0F4F9;
    --card-bg: #FFFFFF;
    --card-border: rgba(31, 31, 31, 0.08);
    --separator: rgba(31, 31, 31, 0.10);
    --nav-bg: rgba(248, 250, 253, 0.92);
    
    --primary-gradient: linear-gradient(120deg, #1A73E8 0%, #8B6CF6 55%, #E85D8C 100%);
    --accent-color: #1A73E8; 
    --accent-hover: #1557B0;
    --accent-soft: #D3E3FD;
    --accent-ink: #0842A0;
    --danger-color: #D93025;
    --star-color: #F9AB00;
    --text-primary: #1F1F1F;
    --text-secondary: #5F6368;
    
    --input-bg: #E8EEF4; 
    --input-border: transparent;
    --shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.06), 0 8px 24px rgba(31, 41, 55, 0.06);
    --shadow-md: 0 8px 28px rgba(31, 41, 55, 0.10);
    --shadow-modal: 0 16px 48px rgba(31, 31, 31, 0.18);
    --radius-sm: 16px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-pill: 980px;
    --font-size-base: 14px; 
    --preview-lines: 1; 
    
    --textarea-font-size: var(--font-size-base);
    --group-title-size: calc(var(--font-size-base) + 1px);
    --prompt-title-size: var(--font-size-base);
    --tool-size: calc(var(--font-size-base) * 2);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #131314;
        --card-bg: #1E1F20;
        --card-border: rgba(227, 227, 227, 0.10);
        --separator: rgba(227, 227, 227, 0.12);
        --nav-bg: rgba(30, 31, 32, 0.92);
        --primary-gradient: linear-gradient(120deg, #8AB4F8 0%, #C58AF9 55%, #F28B82 100%);
        --accent-color: #A8C7FA;
        --accent-hover: #D2E3FC;
        --accent-soft: #004A77;
        --accent-ink: #D2E3FC;
        --text-primary: #E3E3E3;
        --text-secondary: #C4C7C5;
        --input-bg: #28292A; 
        --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
        --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
        --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55);
    }
}

body.theme-light {
    --bg-color: #F0F4F9;
    --card-bg: #FFFFFF;
    --card-border: rgba(31, 31, 31, 0.08);
    --separator: rgba(31, 31, 31, 0.10);
    --nav-bg: rgba(248, 250, 253, 0.92);
    --primary-gradient: linear-gradient(120deg, #1A73E8 0%, #8B6CF6 55%, #E85D8C 100%);
    --accent-color: #1A73E8;
    --accent-hover: #1557B0;
    --accent-soft: #D3E3FD;
    --accent-ink: #0842A0;
    --text-primary: #1F1F1F;
    --text-secondary: #5F6368;
    --input-bg: #E8EEF4;
}
body.theme-dark {
    --bg-color: #131314;
    --card-bg: #1E1F20;
    --card-border: rgba(227, 227, 227, 0.10);
    --separator: rgba(227, 227, 227, 0.12);
    --nav-bg: rgba(30, 31, 32, 0.92);
    --primary-gradient: linear-gradient(120deg, #8AB4F8 0%, #C58AF9 55%, #F28B82 100%);
    --accent-color: #A8C7FA;
    --accent-hover: #D2E3FC;
    --accent-soft: #004A77;
    --accent-ink: #D2E3FC;
    --text-primary: #E3E3E3;
    --text-secondary: #C4C7C5;
    --input-bg: #28292A;
}

html { 
    background-color: var(--bg-color); 
    overscroll-behavior-y: none; 
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar { 
    display: none;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { 
    background-color: var(--bg-color); 
    color: var(--text-primary); 
    font-size: var(--font-size-base); 
    padding-bottom: 100px; 
    min-height: 100vh; 
    transition: background-color 0.4s ease, color 0.4s ease; 
    overscroll-behavior-y: none; 
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
body::-webkit-scrollbar { 
    display: none; 
}

.container { max-width: 900px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 16px 16px; transition: max-width 0.3s ease; }

.tab-content { display: none; animation: slideUp 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }
.tab-content.active { display: block; }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 視圖頭部 */
.view-header { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; width: 100%; min-height: 40px; }
.view-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: 800; letter-spacing: -0.5px; text-align: center; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; pointer-events: none; z-index: 10; }
.header-left { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-start; gap: 8px; position: relative; z-index: 20; }
.header-right { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; position: relative; z-index: 20; }

.header-dropdown { position: relative; display: inline-block; }
.header-dropdown-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 8px; background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); border: 1px solid rgba(141, 147, 165, 0.15); z-index: 2000; overflow: hidden; min-width: 170px; flex-direction: column; }
.header-dropdown-menu.show { display: flex; animation: fadeIn 0.2s ease; }
.header-dropdown-item { padding: 14px 18px; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: var(--text-primary); cursor: pointer; border-bottom: 1px solid rgba(141, 147, 165, 0.08); white-space: nowrap; transition: background 0.2s; user-select: none; }
.header-dropdown-item:last-child { border-bottom: none; }
.header-dropdown-item:hover { background: var(--input-bg); color: var(--accent-hover); }
.header-dropdown-item.active { background: var(--accent-soft); color: var(--accent-color); }
.header-dropdown-item .icon { font-size: 18px; }

/* --- Global Buttons --- */
.btn { background: var(--accent-color); color: #FFFFFF; border: none; padding: 12px 24px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 800; cursor: pointer; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: none; white-space: nowrap; }
.btn:hover { transform: none; box-shadow: none; filter: brightness(1.05); }
.btn:active { transform: scale(0.95); }
.btn-secondary { background: var(--input-bg); color: var(--text-primary); box-shadow: none; }
.btn-secondary:hover { background: #E4E9F2; box-shadow: var(--shadow-sm); }
body.theme-dark .btn-secondary:hover { background: #353545; }

/* 🌟 按鈕禁用態規範 */
.btn:disabled,
.btn-secondary:disabled,
.btn[disabled],
.btn-secondary[disabled] {
    opacity: 0.32 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: grayscale(0.9) !important;
}

.btn-outline { background: transparent; color: #007AFF; border: 2px solid #007AFF; padding: 12px 24px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 800; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body.theme-dark .btn-outline { color: var(--accent-color); border-color: var(--accent-color); }
.btn-outline:hover { background: rgba(0, 122, 255, 0.1); transform: translateY(-2px); }
body.theme-dark .btn-outline:hover { background: rgba(0, 210, 255, 0.1); }

.btn-header { background: var(--card-bg); color: var(--text-primary); border: 1px solid rgba(141, 147, 165, 0.2); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: all 0.3s ease; flex-shrink: 0; }
.btn-header:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
.btn-header.active { background: var(--accent-soft); color: var(--accent-color); border-color: transparent; }
.btn-header .icon { font-size: 18px; line-height: 1; }

.btn-danger { background: rgba(255, 75, 114, 0.1); color: var(--danger-color); font-weight: 800; border: none; padding: 12px 24px; border-radius: var(--radius-pill); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

.btn-star {
    background: transparent;
    font-size: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: transform 0.3s;
    color: var(--text-secondary);
    width: var(--tool-size);
    height: var(--tool-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
    vertical-align: middle;
    box-sizing: border-box;
}
.btn-star.starred { color: var(--star-color); }
.btn-star:hover { transform: scale(1.25); }

.icon-btn { width: var(--tool-size); height: var(--tool-size); padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: calc(var(--tool-size) * 0.45); flex-shrink: 0; background: var(--input-bg); transition: all 0.2s; border: none; cursor: pointer;}
.icon-btn:hover { background: var(--input-bg); color: var(--text-primary); }

.color-picker-circle { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--card-bg); box-shadow: var(--shadow-sm); position: relative; flex-shrink: 0; cursor: pointer; }
.color-picker-circle input[type="color"] { position: absolute; top: -10px; left: -10px; width: 60px; height: 60px; cursor: pointer; border: none; padding: 0; background: transparent; }

.card-color-picker-wrapper { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; z-index: 5; cursor: pointer; overflow: hidden; border-radius: 24px 0 0 24px; }
.card-color-picker-input { position: absolute; left: -20px; top: -20px; width: 50px; height: calc(100% + 40px); opacity: 0; cursor: pointer; padding: 0; border: none; }

/* --- Search Bar --- */
.search-container { 
    margin-bottom: 16px; 
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-container.privacy-search-locked {
    pointer-events: none;
    user-select: none;
}
.search-input { 
    flex: 1;
    min-width: 0;
    width: 100%; 
    background: var(--card-bg); 
    border: none; 
    border-radius: var(--radius-pill); 
    padding: 14px 20px 14px 44px; 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--text-primary); 
    outline: none; 
    transition: box-shadow 0.3s ease, transform 0.3s ease; 
    box-shadow: var(--shadow-sm); 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238D93A5' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E"); 
    background-repeat: no-repeat; 
    background-position: 16px center; 
}
.search-input:focus { box-shadow: 0 4px 16px rgba(58, 64, 255, 0.15); transform: translateY(-1px); }

.search-highlight { background-color: var(--highlight-color, #FFD700); color: #000; padding: 2px 6px; border-radius: 6px; font-weight: 800; display: inline-block; line-height: 1.2; margin: 0 2px; }
body.theme-dark .search-highlight { background-color: var(--highlight-color, #FFD700); color: #000; }

/* --- D&D Cues --- */
.apple-sortable-ghost { opacity: 0.35; background-color: var(--card-bg) !important; border: 2px dashed var(--accent-color) !important; border-radius: var(--radius-pill); pointer-events: none; }
.apple-sortable-drag { cursor: grabbing !important; box-shadow: var(--shadow-modal) !important; z-index: 1000; border-radius: var(--radius-pill); }

@keyframes highlightGlowPulse {
    0% { outline: 2px solid var(--star-color); box-shadow: 0 0 12px rgba(255, 193, 7, 0.4); background-color: rgba(255, 193, 7, 0.1); transform: scale(1); }
    50% { outline: 2px solid var(--star-color); box-shadow: 0 0 16px rgba(255, 193, 7, 0.6); background-color: rgba(255, 193, 7, 0.15); transform: scale(1); }
    100% { outline: 0px solid transparent; box-shadow: var(--shadow-sm); background-color: transparent; transform: scale(1); }
}
.highlight-flash { animation: highlightGlowPulse 1.8s ease-in-out !important; border-radius: var(--radius-lg); }

/* --- Group (Project/Prompt) Card --- */
.group-card { background: var(--card-bg); border: none; border-radius: var(--radius-lg); margin-bottom: 12px; box-shadow: var(--shadow-sm); transition: all 0.3s ease; position: relative; }
#commonGroupsContainer > .prompt-card { margin-bottom: 12px; }
.group-card.collapsed { border-radius: var(--radius-pill); }
.group-card.selected { outline: 2px solid var(--accent-color); background: rgba(0, 210, 255, 0.05); }

.group-card::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 5px; background: var(--group-color, var(--accent-color)); border-radius: 0 6px 6px 0; transition: all 0.3s; pointer-events: none; }
.group-card.collapsed::before { top: 50%; bottom: auto; height: 60%; transform: translateY(-50%); border-radius: 980px; left: 6px; width: 4px; }

.group-header { padding: 14px 16px 14px 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; flex-wrap: nowrap; gap: 8px; }
.group-title-wrapper { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; overflow: hidden; }
.group-title { font-size: var(--group-title-size); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); flex: 1; min-width: 0; }
.prompt-count { background: var(--input-bg); color: var(--text-secondary); font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 980px; white-space: nowrap; flex-shrink: 0; }
.toggle-icon { transition: transform 0.3s; color: var(--text-secondary); font-size: 12px; flex-shrink: 0; }
.group-card.collapsed .toggle-icon { transform: rotate(-90deg); }
.group-card.collapsed .group-content, .group-card.collapsed .group-footer-more { display: none; }
.group-content { padding: 0 16px 12px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 20px; }
.group-prompts-slot { position: relative; }
.group-prompts-container { display: flex; flex-direction: column; gap: 8px; min-height: 12px; border-radius: 12px; }
.group-prompts-slot.is-empty,
.group-prompts-slot.is-empty > .group-prompts-container { min-height: 56px; }
.group-prompts-slot > .group-empty-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    margin: 0;
}
.group-prompts-slot.is-drop-target > .group-empty-hint,
.group-prompts-slot:has(> .group-prompts-container > .apple-sortable-ghost) > .group-empty-hint {
    visibility: hidden;
}
.group-prompts-slot.is-drop-target > .group-prompts-container {
    background: rgba(0, 210, 255, 0.07);
    box-shadow: inset 0 0 0 1.5px var(--accent-color);
}
.group-prompts-slot.is-empty > .group-prompts-container > .apple-sortable-ghost {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.root-prompts-container:not(.is-hidden) { margin-bottom: 12px; }
.root-prompts-container.is-hidden { display: none !important; }
body.prompt-root-drop .root-prompts-container.is-hidden {
    display: flex !important;
    min-height: 52px;
    margin-bottom: 12px;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed var(--accent-color);
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--accent-color);
    font-size: 13px;
    font-weight: 800;
}
body.prompt-root-drop .root-prompts-container.is-hidden::before {
    content: 'Drop here to move outside';
}
body.sort-mode-active .group-empty-hint,
body.batch-mode-active .group-empty-hint { display: none !important; }
body.sort-dragging .prompt-card,
body.sort-dragging .group-card {
    transition: none !important;
    animation: none !important;
}
body.sort-mode-active .group-prompts-container:not(:has(> .prompt-card:not(.apple-sortable-ghost))) { min-height: 56px; }
.group-footer-more { text-align: center; padding: 0 16px 16px 16px; }

.inline-edit-container { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.inline-edit-input { padding: 6px 12px; font-size: inherit; font-weight: 800; border-radius: 8px; border: 2px solid var(--accent-color); background: var(--card-bg); color: var(--text-primary); outline: none; box-shadow: var(--shadow-sm); flex: 1; min-width: 0; }
.inline-edit-confirm-btn { background: var(--accent-color); color: #000; border: none; border-radius: 8px; padding: 6px 16px; font-size: 13px; font-weight: 800; cursor: pointer; transition: all 0.2s; white-space: nowrap; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,210,255,0.2); }
.inline-edit-confirm-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,210,255,0.3); }
.inline-edit-confirm-btn:active { transform: scale(0.95); }

/* --- Prompt (Task) Card --- */
.prompt-card { background: var(--input-bg); border: none; border-radius: var(--radius-pill); padding: 10px 16px 10px 24px; cursor: pointer; transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none;}
.prompt-card.show-preview { border-radius: var(--radius-lg); padding-bottom: 14px; }
.prompt-card.selected { outline: 2px solid var(--accent-color); background: var(--card-bg); }

.prompt-limit-hidden { display: none !important; }
body.sort-mode-active .prompt-card:active { cursor: grabbing; transform: none; }
body.batch-mode-active .prompt-card:active { cursor: pointer; transform: none; }
body.sort-mode-active .group-subgroups-container { min-height: 36px; }
body.sort-mode-active .group-prompts-container { min-height: 36px; }
body.sort-mode-active .group-subgroups-container:not(:has(> .group-card:not(.apple-sortable-ghost))) { min-height: 72px; }

.prompt-card::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); height: 50%; width: 4px; background: var(--prompt-color, var(--accent-color)); border-radius: 980px; transition: all 0.3s; opacity: 0.9; pointer-events: none; }
.prompt-card.show-preview::before { top: 14px; bottom: 14px; height: auto; transform: none; border-radius: 0 6px 6px 0; left: 0; width: 5px; }

.prompt-card:hover { box-shadow: none; background: var(--input-bg); transform: none; }
body.batch-mode-active .prompt-card:hover { transform: none; background: var(--input-bg); }

@keyframes copyFlashAnim {
    0% { background-color: rgba(0, 210, 255, 0.2); transform: scale(0.98); box-shadow: 0 0 0 2px var(--accent-color); }
    50% { background-color: rgba(0, 210, 255, 0.4); transform: scale(1.02); box-shadow: 0 0 15px rgba(0, 210, 255, 0.5); }
    100% { background-color: var(--card-bg); transform: scale(1); box-shadow: var(--shadow-sm); }
}
.copy-flash { animation: copyFlashAnim 0.6s ease-out !important; }

.prompt-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: nowrap; position: relative; z-index: 1; }

.prompt-title-container { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prompt-title { font-size: var(--prompt-title-size); font-weight: 800; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; max-width: 100%; min-width: 0; }

.tags-container { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 0px; }
.prompt-tag { font-size: 11px; font-weight: 700; background: rgba(0, 210, 255, 0.12); color: #0093B2; padding: 4px 10px; border-radius: 980px; cursor: pointer; white-space: nowrap; }
body.theme-dark .prompt-tag { color: var(--accent-color); }
.linked-badge { font-size: 10px; font-weight: 700; background: var(--card-bg); border: 1px solid rgba(141, 147, 165, 0.3); color: var(--text-secondary); padding: 3px 8px; border-radius: 6px; display: inline-flex; white-space: nowrap; }

.prompt-preview { display: none; width: 100%; font-size: 13px; color: var(--text-primary); font-weight: 700; -webkit-line-clamp: var(--preview-lines); -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; line-height: 1.5; margin-left: 0; margin-top: 4px; pointer-events: none; }
.prompt-card.show-preview .prompt-preview { display: -webkit-box; animation: fadeIn 0.2s ease; pointer-events: auto; cursor: pointer; }

.prompt-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; flex-shrink: 0; margin-left: auto; position: relative; z-index: 2; }
.prompt-actions .btn-star,
.prompt-actions .icon-btn { align-self: center; }
.extra-tools { display: none; align-items: center; gap: 6px; margin-right: 8px; border-right: 1px solid rgba(141, 147, 165, 0.2); padding-right: 10px; }
.extra-tools.show { display: flex; animation: fadeIn 0.2s ease; }
.group-card.tools-open .prompt-count { display: none; }

/* --- Code Files: Modal Drop Zone --- */
.file-drop-zone { border: 2px dashed rgba(141, 147, 165, 0.4); border-radius: var(--radius-sm); padding: 24px; text-align: center; color: var(--text-secondary); font-size: 13px; font-weight: 600; transition: all 0.3s; background: rgba(0,0,0,0.02); }
.file-drop-zone.drag-over { background: rgba(0, 210, 255, 0.1); border-color: var(--accent-color); color: var(--accent-color); }
body.theme-dark .file-drop-zone { background: rgba(255,255,255,0.02); }

/* --- File Gallery Cards --- */
.file-gallery-wrapper { margin-top: 12px; margin-bottom: 16px; }

.file-gallery-container { 
    display: flex;
    gap: 10px; 
    overflow-x: auto; 
    padding: 4px 4px 12px 4px; 
    margin: 0 -4px; 
    scrollbar-width: none; 
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch; 
}

.file-gallery-container::-webkit-scrollbar { display: none; height: 0; width: 0; }
.file-gallery-container::after { content: ''; flex: 0 0 1px; }

.file-card { flex: 0 0 250px; max-width: 85%; background: var(--card-bg); border: 1px solid rgba(141, 147, 165, 0.2); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.2s ease; position: relative; user-select: none; }
.file-card:last-child { margin-right: 4px; }
.file-card:hover { border-color: var(--accent-hover); transform: translateY(-2px); }
.file-card.active { border-color: var(--accent-color); background: rgba(0, 210, 255, 0.05); }

.file-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.file-card-title { font-size: 13px; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.file-card-badge { font-size: 10px; font-weight: 700; background: var(--input-bg); color: var(--text-secondary); padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }

.file-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; width: 100%; }
.file-card-btn { flex: 1; justify-content: center; background: var(--input-bg); color: var(--text-primary); border: none; padding: 6px 4px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.file-card-btn:hover { background: var(--accent-color); color: #000; }
.file-card-btn.btn-del { color: var(--danger-color); }
.file-card-btn.btn-del:hover { background: rgba(255, 75, 114, 0.15); color: var(--danger-color); }

.file-expanded-viewer { display: none; margin-top: 12px; background: var(--input-bg); border: 1px solid rgba(141, 147, 165, 0.2); border-radius: var(--radius-sm); padding: 16px; font-family: SFMono-Regular, Menlo, Monaco, monospace; font-size: 13px; color: var(--text-primary); max-height: 350px; overflow-y: auto; overflow-x: auto; white-space: pre; line-height: 1.6; user-select: text; }
.file-expanded-viewer.active { display: block; animation: fadeIn 0.2s ease; }

/* --- Settings Page Specific Styles --- */
.settings-card { background: var(--card-bg); border: 1px solid rgba(141, 147, 165, 0.15); border-radius: var(--radius-lg); padding: 32px 32px 20px 32px; max-width: 700px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.settings-section-title { font-weight: 800; color: var(--accent-color); margin: 0 0 20px 0; font-size: 16px; letter-spacing: -0.2px; }
.settings-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(141, 147, 165, 0.1); gap: 16px;}
.settings-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.settings-export-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}
.settings-export-row .btn {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1.1;
}
.settings-flex-col { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 24px; gap: 12px; }
.settings-flex-col:last-of-type { margin-bottom: 0 !important; }
.settings-divider { height: 1px; background: rgba(141, 147, 165, 0.15); margin: 24px 0; width: 100%; }

#settingsView .settings-card > div[style*="margin-top:40px"],
#settingsView .settings-card > div[style*="margin-top: 40px"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* --- Selectors, Drawer, Modals --- */
.export-group-card { background: var(--card-bg); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.export-group-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 14px; cursor: pointer; }
.export-group-header-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.export-toggle-hint { font-size: 12px; font-weight: 800; color: var(--accent-color); flex-shrink: 0; }
.export-group-card.collapsed > .export-group-header .toggle-icon { transform: rotate(-90deg); }
.export-group-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-left: 12px;
}
.export-group-card.collapsed > .export-group-body { display: none !important; }
.export-group-card .export-group-card {
    margin-bottom: 0;
    background: var(--input-bg);
}
.export-prompts-list { display: flex; flex-direction: column; gap: 8px; }
.export-prompt-item { display: flex; gap: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }

.project-selector { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; align-items: center; }

.project-chip { 
    background: var(--card-bg); 
    color: var(--text-secondary);
    border: 1px solid rgba(141, 147, 165, 0.2); 
    padding: 0 16px; 
    height: 36px; 
    box-sizing: border-box; 
    border-radius: 980px; 
    font-size: 13px; 
    font-weight: 700;
    cursor: pointer; 
    transition: all 0.2s ease; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 4px; 
    white-space: nowrap;
}
.project-chip.active { background: rgba(0, 210, 255, 0.1); color: var(--accent-hover); border-color: var(--accent-color); }
.project-chip.active-new { background: var(--accent-color); color: #FFFFFF; border-color: var(--accent-color); }

.project-chip.more-chip { 
    background: var(--input-bg); 
    color: var(--accent-hover); 
    border: 1px dashed var(--accent-color);
    font-weight: 800; 
}
.project-chip.more-chip:hover { background: rgba(0, 210, 255, 0.15); transform: translateY(-1px); }

.multi-prompt-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card-bg); border: 1px solid rgba(141, 147, 165, 0.2); border-radius: 12px; cursor: pointer; transition: all 0.2s; }
.multi-prompt-item:hover { border-color: var(--accent-hover); }
.multi-prompt-item.selected { border-color: var(--accent-color); background: rgba(0, 210, 255, 0.08); box-shadow: 0 4px 12px rgba(0, 210, 255, 0.1); }
.multi-prompt-checkbox { width: 20px; height: 20px; accent-color: var(--accent-color); pointer-events: none; flex-shrink: 0; }
.multi-prompt-title { font-weight: 700; font-size: 14px; color: var(--text-primary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.loaded-prompts-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; margin-bottom: 12px; }

.loaded-prompt-pill { 
    display: inline-flex;
    align-items: center; 
    justify-content: space-between;
    height: 32px; 
    width: 160px; 
    box-sizing: border-box;
    padding: 0 12px; 
    border-radius: 980px; 
    font-size: 13px; 
    font-weight: 700;
    gap: 8px; 
    cursor: pointer; 
    user-select: none; 
    transition: all 0.2s ease; 
    position: relative; 
    flex-shrink: 0;
}
body.theme-dark .loaded-prompt-pill { filter: brightness(1.1); }
.loaded-prompt-pill:hover { filter: brightness(0.95); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.loaded-prompt-pill:active { transform: scale(0.96); }
.loaded-prompt-pill .pill-title { 
    flex: 1; 
    min-width: 0; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: var(--text-primary);
    text-align: left;
}
.loaded-prompt-pill .remove-btn { cursor: pointer; color: var(--text-secondary); font-weight: 900; background: transparent; border: none; padding: 2px 6px; font-size: 14px; border-radius: 50%; transition: color 0.2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.loaded-prompt-pill .remove-btn:hover { color: var(--danger-color); background: rgba(255, 75, 114, 0.15); }

/* --- Order Switch Toggle Bar --- */
.order-switch-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--input-bg); border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: 16px; border: 1px dashed rgba(141, 147, 165, 0.3); }
.order-switch-btn { background: var(--card-bg); color: var(--accent-hover); border: 1px solid var(--accent-color); font-weight: 800; font-size: 12px; padding: 6px 14px; border-radius: 980px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.order-switch-btn:hover { background: var(--accent-color); color: #000; transform: translateY(-1px); }

#newDynamicFieldsContainer, #editDynamicFieldsContainer {
    display: flex;
    flex-direction: column;
    gap: 16px; 
}

#newCommonPromptSelectorWrapper, #editCommonPromptSelectorWrapper {
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
}

#newPromptTargetWrapper, #editPromptTargetWrapper {
    margin-top: 0px;
    margin-bottom: 0px;
}

.drawer-title { font-size: 17px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; letter-spacing: -0.3px; }
.drawer-title-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drawer-title-icon { width: 20px; height: 20px; color: var(--star-color); flex-shrink: 0; }
.drawer-close-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    color: var(--text-primary);
}
.star-favorites-modal { max-width: 480px; }
.star-favorites-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}
.star-favorites-title {
    margin-bottom: 0;
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.star-favorites-sub {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 12px;
}
.star-favorites-search { margin-bottom: 12px; }
.star-favorites-list {
    height: 46vh;
    max-height: 460px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--input-bg);
    border-radius: 12px;
    padding: 10px;
}
.star-drawer-content { display: flex; flex-direction: column; gap: 8px; }
.star-item { background: var(--card-bg); border-radius: var(--radius-md); padding: 12px 12px 12px 14px; cursor: pointer; font-size: 13px; border: 0.5px solid var(--card-border); }
.star-item-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.star-item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.star-item-main > .app-icon { width: 18px; height: 18px; color: var(--text-secondary); flex-shrink: 0; }
.star-item-color { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.star-item-text { min-width: 0; flex: 1; }
.star-item-title { font-weight: 800; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.star-item-meta { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-top: 2px; }
.star-item-type {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-secondary);
    background: var(--input-bg);
    padding: 3px 8px;
    border-radius: 980px;
    flex-shrink: 0;
}
.star-empty { text-align: center; color: var(--text-secondary); margin-top: 36px; font-size: 13px; font-weight: 700; }
.star-favorites-empty { margin: 28px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.star-favorites-empty .app-icon { width: 28px; height: 28px; color: var(--star-color); }
.star-favorites-empty h3 { margin: 4px 0 0; font-size: 15px; font-weight: 800; color: var(--text-primary); }
.star-favorites-empty p { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-secondary); }

.order-move-btns {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 6px;
}
.order-move-btn {
    width: 22px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.order-move-btn .app-icon { width: 10px; height: 10px; }
.order-move-btn.up .app-icon { transform: rotate(180deg); }
.order-move-btn:disabled { opacity: 0.28; cursor: default; box-shadow: none; }
.order-move-btn:not(:disabled):active { transform: scale(0.94); }
.all-groups-prompt-row {
    padding: 8px 8px 8px 12px;
    cursor: default;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 4px;
    background: var(--card-bg);
    border: 1px solid transparent;
}
#moveItemModalOverlay #moveStepList {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
#btnMoveToRoot {
    position: relative;
    z-index: 5;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0 0 12px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    white-space: normal;
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}
#btnMoveToRoot:active { filter: brightness(0.96); }
.tree-expand-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: -6px 2px -6px -4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--accent-color);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    touch-action: manipulation;
    position: relative;
    z-index: 3;
}
.tree-expand-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.tree-expand-btn.is-open svg { transform: rotate(90deg); }
.tree-expand-btn:active { background: var(--accent-soft); }
.tree-expand-spacer {
    width: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 13px;
}
#allGroupsSelectList .all-groups-branch,
#lockGroupSelectionContainer .all-groups-branch { width: 100%; }
#allGroupsSelectList .all-groups-nest,
#lockGroupSelectionContainer .all-groups-nest { display: flex; flex-direction: column; }
#allGroupsSelectList .all-groups-subgroups,
#allGroupsSelectList .all-groups-prompts,
#lockGroupSelectionContainer .all-groups-subgroups,
#lockGroupSelectionContainer .all-groups-prompts {
    display: flex;
    flex-direction: column;
    min-height: 8px;
}
.selector-drag-handle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    margin-left: 4px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    touch-action: none;
    box-shadow: var(--shadow-sm);
}
.selector-drag-handle .app-icon { width: 16px; height: 16px; pointer-events: none; }
.selector-drag-handle:active { cursor: grabbing; background: var(--accent-soft); color: var(--accent-color); }
.card-drag-handle { display: none; }
body.sort-mode-active .card-drag-handle,
body.batch-mode-active .card-drag-handle { display: inline-flex; }
.card-drag-handle {
    width: var(--tool-size);
    height: var(--tool-size);
    min-width: var(--tool-size);
    margin-left: 0;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}
.card-drag-handle .app-icon { width: 16px; height: 16px; }
#allGroupsSelectList .apple-sortable-drag,
#lockGroupSelectionContainer .apple-sortable-drag { cursor: grabbing !important; }
.all-groups-prompt-title {
    font-size: 12.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* 🌟 彈窗開啟時隱藏底部導覽列，徹底杜絕遮擋按鈕 */
body.modal-open .bottom-nav,
html.modal-open .bottom-nav,
body.drawer-open .bottom-nav {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(150%) !important;
}

/* 底部導覽列設定 */
.bottom-nav { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: var(--card-bg); 
    padding: 0 !important; 
    z-index: 500; 
    box-shadow: 0 -4px 20px rgba(0,0,0,0.04); 
    border-radius: 24px 24px 0 0; 
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
    transform: translateZ(0);
    will-change: transform;
}
.bottom-nav::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 50vh;
    background: var(--bg-color);
    z-index: -1;
    pointer-events: none;
}

.nav-slider-wrapper {
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    width: 100%;
    position: relative;
}
.nav-slider {
    display: flex;
    width: 200%;
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform;
}
.nav-slider.show-secondary {
    transform: translateX(-50%);
}

.nav-panel {
    width: 50%;
    display: flex;
    justify-content: space-around; 
    padding: 10px 10px calc(24px + env(safe-area-inset-bottom)) 10px;
    box-sizing: border-box;
}

.nav-item { flex: 1; max-width: 75px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border-radius: 16px; color: var(--text-secondary); font-size: 11px; font-weight: 800; cursor: pointer; transition: all 0.2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.nav-item .nav-icon { font-size: 22px !important; display: flex; align-items: center; justify-content: center; line-height: 1; height: 24px; }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink, var(--accent-color)); box-shadow: none; }

.nav-indicators {
    position: absolute;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    pointer-events: none;
}
.nav-indicators .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    opacity: 0.3;
    transition: all 0.3s ease;
}
.nav-indicators .dot.active {
    opacity: 1;
    background-color: var(--text-primary);
    transform: scale(1.1);
}

.input-field { background: var(--input-bg); border: none; border-radius: 16px; padding: 14px 16px; font-size: 14px; width: 100%; color: var(--text-primary); outline: none; box-shadow: none; }
.input-field:focus { background-color: var(--input-bg); box-shadow: none; }

select.input-field { 
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px !important; 
    border-radius: var(--radius-md) !important; 
    font-weight: 700;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A40FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-position: right 14px center; 
    background-size: 14px; 
    background-repeat: no-repeat;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.styled-select option { background-color: var(--card-bg); color: var(--text-primary); }

input[type=range] { -webkit-appearance: none; background: transparent; width: 100%; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); margin-top: -8px; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; background: var(--input-bg); border-radius: 980px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(15,15,23,0.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.32s ease; padding: 16px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.modal-overlay::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.composer-modal-open .tab-content {
    visibility: hidden !important;
}
#addPromptModalOverlay {
    background: var(--bg-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal { background: var(--card-bg); border-radius: 28px; width: 100%; max-width: 600px; padding: 32px; transform: scale(0.95) translateY(20px); transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1); margin: auto; max-height: 90vh; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 10000; scrollbar-width: none; -ms-overflow-style: none; }
.modal::-webkit-scrollbar { display: none; width: 0; height: 0; }
.modal-overlay.active .modal { transform: scale(1) translateY(0); }

.picker-sheet {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: min(82vh, 760px);
    padding: 22px 22px 20px;
}
.picker-sheet-handle { display: none; }
.picker-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 12px;
}
.picker-sheet-head .modal-title {
    margin: 0;
    flex: 1;
}
.picker-sheet-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    color: var(--text-primary);
}
.picker-sheet-close-spacer { width: 36px; flex-shrink: 0; }
.picker-sheet-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: left;
}
.picker-sheet-note-center {
    justify-content: center;
    text-align: center;
    font-size: 12px;
}
.picker-sheet-clear {
    padding: 6px 12px;
    font-size: 12px;
    height: auto;
    min-height: 32px;
    box-shadow: none;
    flex-shrink: 0;
}
.picker-sheet-search { flex-shrink: 0; margin-bottom: 12px; }
.picker-sheet-search .input-field { padding: 12px 16px; font-size: 13px; }
.picker-sheet-step {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.picker-sheet-list {
    flex: 1 1 auto;
    min-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--input-bg);
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.picker-sheet-actions {
    flex-shrink: 0;
    margin-top: 16px;
    padding-top: 0;
}

.modal-title { 
    font-size: clamp(14px, 4.2vw, 18px); 
    font-weight: 800; 
    text-align: center; 
    line-height: 1.35; 
    letter-spacing: -0.3px;
    word-break: break-word;
    overflow-wrap: break-word; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    padding: 0 4px; 
    flex: 1; 
    min-width: 0;
}

.modal .form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.modal .input-field,
.modal textarea {
    scroll-margin: 0 !important;
    scroll-margin-block: 0 !important;
}
.large-textarea { border-radius: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

.details-content-box {
    background: rgba(0, 210, 255, 0.08); 
    border-left: 3px solid var(--accent-color);
    padding: 16px; 
    border-radius: 8px; 
    margin-bottom: 16px; 
    font-size: 14px; 
    line-height: 1.6; 
    white-space: pre-wrap; 
    word-break: break-all; 
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}
.details-content-box:hover { background: rgba(0, 210, 255, 0.12); }
.details-content-box .target-label { font-weight: 800; color: var(--accent-hover); margin-bottom: 8px; font-size: 13px; display: flex; align-items: center; gap: 4px; }

.details-full-text {
    padding: 16px; 
    background: var(--input-bg); 
    border-radius: var(--radius-sm);
    font-family: SFMono-Regular, Menlo, Monaco, monospace; 
    font-size: 14px; 
    white-space: pre-wrap; 
    word-break: break-all; 
    line-height: 1.6; 
    user-select: text;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 16px;
}
.details-full-text:hover { background: #E4E9F2; }
body.theme-dark .details-full-text:hover { background: #353545; }

.custom-dialog { max-width: 440px; text-align: center; overflow: hidden; }
.custom-dialog .modal-title { margin-bottom: 12px; }
.custom-dialog-msg { padding: 0 0 16px; font-size: 14px; font-weight: 700; line-height: 1.55; color: var(--text-primary); }
.custom-dialog-msg.has-extra { padding-bottom: 12px; }
.custom-dialog-extra { padding: 0; text-align: center; }
.custom-dialog-extra-hint { margin-bottom: 12px; }
.custom-dialog-extra .input-field {
    text-align: center;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--input-bg);
}
.custom-dialog-extra-error {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--danger-color);
}
.delete-all-userid-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.delete-all-userid-value {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--text-primary);
    background: var(--input-bg);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.delete-all-userid-desc {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.5;
}
.custom-dialog-btns {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border: none;
    margin-top: 24px;
}
.custom-dialog-btns .btn { flex: 1; justify-content: center; }
.custom-dialog-btns.is-choice {
    flex-direction: column;
    align-items: stretch;
}
.custom-dialog-btns.is-choice .btn { flex: none; width: 100%; }
.custom-dialog-btns.is-choice #customDialogConfirmBtn { order: 1; }
.custom-dialog-btns.is-choice #customDialogDiscardBtn { order: 2; }
.custom-dialog-btns.is-choice #customDialogCancelBtn { order: 3; }

.toast { position: fixed; bottom: 90px; left: 50%; transform: translate(-50%, 20px) scale(0.9); background: var(--primary-gradient); color: #FFF; padding: 12px 24px; border-radius: 980px; font-size: 14px; font-weight: 800; opacity: 0; pointer-events: none; transition: 0.3s; z-index: 100000; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); font-size: 14px; font-weight: 700; }

@media (max-width: 600px) {
    .container { padding: max(16px, env(safe-area-inset-top)) 12px 16px 12px; }
    .settings-card { padding: 24px 16px 16px 16px; }
    .modal { padding: 24px 20px calc(32px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; align-self: flex-end; transform: translateY(100%); margin-bottom: 0; max-height: 90vh; overflow-y: auto; }
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-overlay.active .modal { transform: translateY(0); }
    .picker-sheet {
        width: 100%;
        max-width: none;
        max-height: min(88dvh, 88vh);
        padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -18px 48px rgba(15, 15, 23, 0.28);
        overflow: hidden;
        transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .picker-sheet-handle {
        display: block;
        width: 40px;
        height: 5px;
        border-radius: 999px;
        background: rgba(141, 147, 165, 0.55);
        margin: 2px auto 12px;
        flex-shrink: 0;
    }
    .picker-sheet-head { margin-bottom: 10px; }
    .picker-sheet-list { min-height: 0; border-radius: 14px; }
    .picker-sheet-actions { margin-top: 12px; }
    .picker-sheet-actions .btn { width: auto; flex: 1; }
    .custom-dialog-btns { flex-direction: row !important; }
    #customDialogOverlay .custom-dialog-btns.is-choice { flex-direction: column !important; }

    #customDialogOverlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        overflow: hidden !important;
    }
    #customDialogOverlay .custom-dialog {
        align-self: center !important;
        transform: scale(0.94) translateY(16px) !important;
        border-radius: 28px !important;
        margin: 0 auto !important;
        max-height: min(78vh, 78dvh) !important;
        padding: 28px 22px !important;
        width: 100%;
        max-width: 400px;
        will-change: transform;
    }
    #customDialogOverlay.active .custom-dialog {
        transform: scale(1) translateY(0) !important;
    }
    
    #unifiedRenameModalOverlay .modal-actions {
        flex-direction: row !important;
        gap: 10px !important;
    }
    #unifiedRenameModalOverlay .modal-actions button {
        flex: 1 !important;
        width: auto !important;
    }

    .modal-actions { flex-direction: column; }
    .modal-actions .btn { width: 100%; }
    .picker-sheet-actions { flex-direction: row; gap: 10px; }
    .picker-sheet-actions .btn { width: auto; flex: 1 1 0; }
    .modal-title { font-size: 15px; }

    .group-header .extra-tools {
        gap: 2px;
        margin-right: 4px;
        padding-right: 6px;
    }
    .group-header .extra-tools.show {
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 4px;
        padding: 4px 6px;
        border-right: none;
        border-radius: 12px;
        background: var(--card-bg);
        box-shadow: var(--shadow-sm);
        z-index: 8;
        gap: 2px;
    }
}

/* --- Cloud Sync Progress Bar --- */
#syncProgressContainer {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
#syncProgressBar.syncing {
    background-image: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    animation: progress-stripes 1s linear infinite;
}
@keyframes progress-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

/* --- Batch Action Bar 完美排版：4 按鈕橫向均衡排列 --- */
body.batch-mode-active .bottom-nav { transform: translateY(150%); pointer-events: none; display: none !important; }
#batchActionBar.batch-action-bar {
    position: fixed; 
    bottom: calc(-100% - 50px); 
    left: 0; 
    width: 100%; 
    background: var(--card-bg); 
    box-shadow: 0 -8px 30px rgba(0,0,0,0.12); 
    z-index: 2500; 
    transition: bottom 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
    border-radius: 24px 24px 0 0;
    
    padding: 12px 14px max(14px, env(safe-area-inset-bottom)) 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    transform: translateZ(0);
    will-change: transform, bottom;
}
#batchActionBar.batch-action-bar.active { bottom: 0; }

#batchActionBar.batch-action-bar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100vh;
    background: inherit;
    z-index: -1;
}

#batchActionBar #batchSelectedCount {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    color: var(--text-primary) !important;
}

.batch-action-buttons-wrapper {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-batch-item {
    height: 36px !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-pill) !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

@media (min-width: 601px) {
    .batch-action-buttons-wrapper {
        width: 100% !important;
        max-width: 460px !important;
        justify-content: center !important;
        gap: 8px !important;
        align-self: center !important;
    }
    .btn-batch-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 10px !important;
    }
}

.btn-batch-confirm {
    background: var(--accent-color) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

@media (max-width: 380px) {
    #batchActionBar.batch-action-bar { padding: 10px 10px max(10px, env(safe-area-inset-bottom)) 10px !important; }
    #batchActionBar #batchSelectedCount { font-size: 13px !important; }
    .batch-action-buttons-wrapper { gap: 4px !important; }
    .btn-batch-item { height: 34px !important; font-size: 11px !important; padding: 0 4px !important; }
}

.batch-checkbox { display: none; width: 18px; height: 18px; accent-color: var(--accent-color); margin: 0; pointer-events: none; flex-shrink: 0; }
body.batch-mode-active .batch-checkbox { display: block; }
body.batch-mode-active .prompt-actions, 
body.batch-mode-active .group-footer-more { display: none !important; }

/* 優化新增/編輯 Prompt 視窗 */
#addPromptModalOverlay .modal,
#editPromptModalOverlay .modal {
    display: flex !important;
    flex-direction: column !important;
    height: 85vh !important;
    max-height: 85vh !important;
    overflow: hidden !important;
}
@media (max-width: 600px) {
    #customDialogOverlay {
        overflow: hidden !important;
    }
    #addPromptModalOverlay,
    #editPromptModalOverlay,
    #promptTextEditorModalOverlay {
        top: env(safe-area-inset-top, 0px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
        overscroll-behavior: none !important;
        overflow-x: hidden !important;
        background: var(--card-bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }
    #addPromptModalOverlay.active .modal,
    #editPromptModalOverlay.active .modal,
    #promptTextEditorModalOverlay.active .prompt-text-editor-modal {
        transition: none !important;
    }
    #addPromptModalOverlay .modal,
    #editPromptModalOverlay .modal {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        border-radius: 0 !important;
        padding-top: 24px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        background: var(--card-bg) !important;
        box-shadow: none !important;
    }
    #addPromptModalOverlay input.input-field,
    #editPromptModalOverlay input.input-field,
    #addPromptModalOverlay textarea,
    #editPromptModalOverlay textarea {
        scroll-margin: 0 !important;
        scroll-padding: 0 !important;
    }
    #addPromptModalOverlay .sheet-head,
    #editPromptModalOverlay .sheet-head,
    #promptTextEditorModalOverlay .sheet-head {
        position: relative !important;
        top: auto !important;
        z-index: 3 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 16px !important;
        min-height: 44px !important;
        background: var(--card-bg) !important;
        flex-shrink: 0 !important;
    }
    #addPromptModalOverlay .sheet-body > .form-group:not(#newPromptTextWrapper),
    #editPromptModalOverlay .sheet-body > .form-group:not(#editPromptTextWrapper) {
        flex: 0 0 auto;
    }
    #addPromptModalOverlay #newPromptTextWrapper,
    #editPromptModalOverlay #editPromptTextWrapper {
        flex: 1 1 auto !important;
        min-height: 240px !important;
        margin-bottom: 16px !important;
    }
    #addPromptModalOverlay #newPromptText,
    #editPromptModalOverlay #editPromptText {
        flex: 1 1 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    #addPromptModalOverlay .prompt-text-inline,
    #editPromptModalOverlay .prompt-text-inline {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
    #addPromptModalOverlay .prompt-text-expand-btn,
    #editPromptModalOverlay .prompt-text-expand-btn {
        display: none !important;
    }
    #addPromptModalOverlay .prompt-text-preview,
    #editPromptModalOverlay .prompt-text-preview {
        display: flex !important;
        flex: 1 1 auto !important;
        min-height: 240px !important;
        height: 100% !important;
    }
    #addPromptModalOverlay .modal-actions,
    #editPromptModalOverlay .modal-actions {
        position: relative !important;
        bottom: auto !important;
        z-index: 1 !important;
        margin-top: 16px !important;
        padding-top: 12px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--card-bg) !important;
        flex-shrink: 0 !important;
    }
}
#addPromptModalOverlay .modal > *,
#editPromptModalOverlay .modal > * {
    flex-shrink: 0;
}
#addPromptModalOverlay .modal.sheet-page > .sheet-body,
#editPromptModalOverlay .modal.sheet-page > .sheet-body {
    flex-shrink: 1 !important;
}
#addPromptModalOverlay .form-group,
#editPromptModalOverlay .form-group {
    margin-bottom: 12px !important;
}
#addPromptModalOverlay #newPromptTextWrapper,
#editPromptModalOverlay #editPromptTextWrapper {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 80px !important;
    margin-bottom: 16px !important;
}
#newPromptText,
#editPromptText {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    resize: none !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
}
#addPromptModalOverlay .modal-actions,
#editPromptModalOverlay .modal-actions {
    margin-top: auto !important;
    padding-top: 12px !important;
}
@media (max-width: 600px) {
    #addPromptModalOverlay .modal-actions,
    #editPromptModalOverlay .modal-actions {
        margin-top: 16px !important;
        position: relative !important;
        bottom: auto !important;
    }
}

.prompt-text-preview-field {
    cursor: pointer !important;
}

#promptTextEditorModalOverlay .prompt-text-editor-modal {
    display: flex !important;
    flex-direction: column !important;
    height: 92vh !important;
    max-height: 92vh !important;
    overflow: hidden !important;
    width: 100%;
    max-width: 900px;
}
@media (max-width: 600px) {
    #promptTextEditorModalOverlay {
        overflow: hidden !important;
        align-items: stretch;
        background: var(--card-bg) !important;
    }
    #promptTextEditorModalOverlay .prompt-text-editor-modal {
        height: 100% !important;
        max-height: none !important;
        min-height: 100% !important;
        padding-top: 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        background: var(--card-bg) !important;
        box-shadow: none !important;
        transform: none;
        align-self: stretch;
    }
    #promptTextEditorModalOverlay .prompt-text-editor-modal > div:first-child,
    #promptTextEditorModalOverlay .sheet-head {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
        margin-bottom: 16px !important;
    }
    #promptTextEditorModalOverlay .prompt-editor-search-bar {
        position: relative !important;
        z-index: 0 !important;
        margin-top: 0 !important;
    }
}
#promptTextEditorModalOverlay .prompt-text-editor-modal > *:not(.prompt-editor-wrap) {
    flex-shrink: 0;
}
#promptTextEditorModalOverlay .prompt-text-editor-modal > div:first-child {
    position: relative;
    top: auto;
    z-index: 1;
    background: var(--card-bg);
}
.prompt-editor-search-bar {
    margin-bottom: 12px !important;
    gap: 8px;
    flex-wrap: nowrap;
}
.prompt-editor-search-bar .search-input {
    flex: 1;
    min-width: 0;
}
.prompt-editor-search-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
#promptTextEditorMatchInfo {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
    min-width: 44px;
    text-align: right;
    white-space: nowrap;
}
.prompt-editor-nav-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: var(--shadow-sm) !important;
}
.prompt-editor-wrap {
    position: relative;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background: var(--input-bg);
    border-radius: 16px;
    overflow: hidden;
}
.prompt-editor-backdrop,
.prompt-editor-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    padding: 16px;
    box-sizing: border-box;
    font-family: SFMono-Regular, Menlo, Monaco, monospace;
    font-size: var(--textarea-font-size);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: auto;
    border-radius: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.prompt-editor-backdrop::-webkit-scrollbar,
.prompt-editor-area::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.prompt-editor-backdrop {
    z-index: 0;
    pointer-events: none;
    color: var(--text-primary);
    background: transparent;
    visibility: hidden;
    overflow: hidden;
}
.prompt-editor-area {
    z-index: 1;
    resize: none !important;
    background: var(--input-bg);
    color: var(--text-primary);
    caret-color: var(--text-primary);
}
.prompt-editor-area.is-searching {
    color: transparent;
    background: transparent;
}
.prompt-editor-mark {
    background-color: var(--highlight-color, #FFD700);
    color: #000;
    border-radius: 4px;
    font-weight: 800;
    padding: 0;
    margin: 0;
    display: inline;
}
.prompt-editor-mark-current {
    outline: 2px solid var(--accent-color);
    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.25);
}

body.privacy-mode #searchCommonInput {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

/* --- 新增 / 編輯 / 指令內容：固定頂欄 + 中間可滑 --- */
#addPromptModalOverlay .modal.sheet-page,
#editPromptModalOverlay .modal.sheet-page,
#promptTextEditorModalOverlay .modal.sheet-page {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 85vh !important;
    max-height: 85vh !important;
}
.sheet-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    min-height: 44px;
    margin-bottom: 16px;
    padding-bottom: 0;
    z-index: 3;
    background: var(--card-bg);
}
.sheet-head-side {
    display: flex;
    align-items: center;
    min-width: 72px;
    flex: 0 0 auto;
    z-index: 2;
}
.sheet-head-left { justify-content: flex-start; }
.sheet-head-right { justify-content: flex-end; }
.sheet-head .modal-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 160px);
    max-width: calc(100% - 160px);
    margin: 0 !important;
    padding: 0;
    text-align: center;
    pointer-events: none;
    z-index: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: initial;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 36px;
    color: var(--text-primary);
}
.sheet-head-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    line-height: 1;
    font-size: 16px;
    font-weight: 700;
}
.btn-sheet-save {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 980px !important;
    flex-shrink: 0;
    width: auto !important;
    min-width: 72px;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 36px !important;
}
.sheet-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sheet-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sheet-field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
}
.sheet-inline-row {
    display: flex;
    gap: 12px;
    align-items: center;
}
.sheet-inline-row .input-field {
    flex: 1;
    min-width: 0;
}
.prompt-text-composer {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
}
.prompt-text-preview {
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 16px;
    border: none;
    border-radius: 16px;
    background: var(--input-bg);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.prompt-text-preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.prompt-text-preview-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}
.prompt-text-preview-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.prompt-text-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 12px;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
}
.prompt-text-preview.is-empty .prompt-text-preview-body {
    color: var(--text-secondary);
    font-weight: 600;
    opacity: 0.72;
}
.prompt-text-preview-hint {
    flex-shrink: 0;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}
.prompt-text-inline {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 48px 14px 16px !important;
    resize: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.prompt-text-inline::-webkit-scrollbar { display: none; width: 0; height: 0; }
.prompt-text-expand-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.prompt-text-expand-btn:hover,
.prompt-text-expand-btn:focus-visible {
    color: var(--text-primary);
    outline: none;
}
.prompt-text-inline:focus,
#addPromptModalOverlay .input-field:focus,
#editPromptModalOverlay .input-field:focus,
#addPromptModalOverlay .prompt-text-inline:focus,
#editPromptModalOverlay .prompt-text-inline:focus {
    background: var(--input-bg) !important;
    box-shadow: none !important;
}
.prompt-text-inline:focus + .prompt-text-expand-btn {
    background: var(--card-bg);
}
.prompt-editor-search-panel {
    flex-shrink: 0;
    margin-bottom: 12px;
}
.prompt-editor-search-panel[hidden] {
    display: none !important;
}
#promptTextEditorModalOverlay .prompt-editor-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
#promptTextEditorModalOverlay.sheet-keyboard-open .prompt-editor-wrap {
    flex: 0 0 auto !important;
}
#promptTextEditorModalOverlay.sheet-keyboard-open .prompt-editor-area,
#promptTextEditorModalOverlay.sheet-keyboard-open .prompt-editor-backdrop {
    padding-bottom: 96px !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    #addPromptModalOverlay .modal.sheet-page,
    #editPromptModalOverlay .modal.sheet-page,
    #promptTextEditorModalOverlay .modal.sheet-page {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        padding-top: 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .btn-sheet-save {
        width: auto !important;
    }
}