/* 曼陀羅產生器專用樣式 */
:root {
    --mandala-gen-bg: #121212;
    --mandala-gen-panel: #1e1e1e;
    --mandala-gen-text: #e0e0e0;
    --mandala-gen-accent: #00ff9d;
    --mandala-gen-input: #333;
}

#mandala-generator-section {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px);
    margin-top: 20px; /* 減少上邊距，讓畫布更高 */
    background-color: var(--mandala-gen-bg);
    color: var(--mandala-gen-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: row; /* 橫向排列：左側控制面板，右側畫布 */
    align-items: flex-start; /* 對齊到頂部，讓畫布更高 */
    z-index: 1;
    overflow: hidden;
    padding: 20px 20px 20px 20px;
    gap: 0; /* 移除 gap，用 margin 控制間距 */
    box-sizing: border-box;
}

/* 捲軸美化 - 移除舊的通用樣式，改用針對控制面板的樣式 */

/* 左側控制面板（盡量靠左） */
#mandala-gen-controls {
    width: 320px;
    min-width: 280px;
    max-width: 320px; /* 固定寬度，不擴展 */
    max-height: calc(100vh - 100px); /* 增加可用高度 */
    background-color: var(--mandala-gen-panel);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 4px 0 15px rgba(0,0,0,0.6);
    z-index: 10;
    overflow-y: auto; /* 自動顯示滾動條（當內容超出時） */
    overflow-x: hidden;
    border-right: 1px solid #333; /* 右側邊框 */
    border-radius: 8px;
    flex-shrink: 0; /* 不允許縮小 */
    /* 確保滾動條可見 - 使用更明顯的樣式 */
    scrollbar-width: thick !important; /* Firefox - 強制使用粗滾動條 */
    scrollbar-color: rgba(0, 255, 157, 0.6) rgba(0, 0, 0, 0.5) !important; /* Firefox 滾動條顏色 */
}

/* 控制面板專用滾動條樣式 - 確保非常明顯 */
#mandala-gen-controls::-webkit-scrollbar { 
    width: 16px; /* 非常明顯的滾動條寬度 */
}

#mandala-gen-controls::-webkit-scrollbar-track { 
    background: rgba(0, 0, 0, 0.6); /* 非常明顯的軌道背景 */
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#mandala-gen-controls::-webkit-scrollbar-thumb { 
    background: rgba(0, 255, 157, 0.7); /* 使用主題色，非常明顯 */
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    min-height: 40px; /* 確保滾動條足夠大 */
}

#mandala-gen-controls::-webkit-scrollbar-thumb:hover { 
    background: rgba(0, 255, 157, 1); /* Hover 時完全顯示 */
}

/* 確保控制面板內的所有按鈕和輸入元素都可以正常點擊 */
#mandala-gen-controls * {
    pointer-events: auto !important;
}

#mandala-gen-controls button,
#mandala-gen-controls input,
#mandala-gen-controls label,
#mandala-gen-controls .collapsible-header {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 右側畫布區域（全讓給畫布，保持正方形） */
#mandala-gen-canvas-container {
    flex: 1; /* 佔滿剩餘空間 */
    min-width: 0; /* 允許 flex 縮小 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; /* 置中對齊 */
    cursor: crosshair;
    /* 網格背景 */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-left: 20px; /* 與控制面板的間距 */
    min-height: calc(100vh - 100px); /* 確保容器有足夠高度 */
}

#mandala-generator-section h1 { 
    font-size: 1.4rem; 
    margin-top: 0; 
    margin-bottom: 10px; 
    color: var(--mandala-gen-accent); 
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

#mandala-generator-section .section-title {
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    color: #888; 
    margin-top: 10px; 
    margin-bottom: 5px; 
    border-bottom: 1px solid #444; 
    padding-bottom: 2px;
}

#mandala-generator-section .control-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#mandala-generator-section .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#mandala-generator-section label { 
    font-size: 0.9rem; 
    font-weight: 500; 
}

#mandala-generator-section input[type="range"] { 
    width: 100%; 
    cursor: pointer; 
    accent-color: var(--mandala-gen-accent); 
}

#mandala-generator-section input[type="color"] { 
    width: 50px; 
    height: 30px; 
    border: none; 
    cursor: pointer; 
    background: none; 
    border-radius: 4px;
}

/* Checkbox 美化 */
#mandala-generator-section .toggle-switch {
    display: flex; 
    align-items: center; 
    cursor: pointer; 
    font-size: 0.9rem;
}

#mandala-generator-section .toggle-switch input { 
    margin-right: 8px; 
    transform: scale(1.2); 
    accent-color: var(--mandala-gen-accent); 
}

#mandala-generator-section button {
    padding: 10px;
    background-color: var(--mandala-gen-input);
    color: white;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    font-size: 0.9rem;
}

#mandala-generator-section button:hover { 
    background-color: var(--mandala-gen-accent); 
    color: #000; 
    border-color: var(--mandala-gen-accent); 
    box-shadow: 0 0 10px var(--mandala-gen-accent); 
}

#mandala-generator-section button.danger { 
    background-color: #ff4757; 
    border-color: #ff4757; 
    color: white; 
}

#mandala-generator-section button.danger:hover { 
    background-color: #ff6b81; 
    box-shadow: 0 0 10px #ff4757; 
}

/* 檔案上傳按鈕 */
#mandala-generator-section .file-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

#mandala-generator-section .file-upload input[type=file] {
    font-size: 100px; 
    position: absolute; 
    left: 0; 
    top: 0; 
    opacity: 0; 
    cursor: pointer;
}

#mandala-generator-section .file-btn {
    width: 100%; 
    display: block; 
    text-align: center;
    background: #444; 
    border: 1px dashed #777;
}

/* 可收合的區塊 */
/* 移除所有收合功能，所有內容直接顯示 */
.collapsible-section,
.collapsible-header,
.collapsible-content {
    display: none !important; /* 完全隱藏收合相關元素 */
}

#mandalaGenCanvas {
    background-color: transparent;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.8));
    min-width: 600px; /* 確保最小尺寸 */
    min-height: 600px; /* 確保最小尺寸 */
    max-width: 90vw; /* 最大不超過視窗寬度的 90% */
    max-height: 90vh; /* 最大不超過視窗高度的 90% */
    aspect-ratio: 1; /* 強制保持 1:1 比例 */
}

/* 操作提示按鈕 - 方塊按鈕，放在畫布容器左上角 */
.mandala-gen-help-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.8);
    color: #00ff9d;
    border: 2px solid rgba(0, 255, 157, 0.6);
    border-radius: 6px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.mandala-gen-help-btn:hover {
    background: rgba(0, 255, 157, 0.3);
    border-color: #00ff9d;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 255, 157, 0.5);
}

.mandala-gen-help-btn:active {
    transform: scale(0.95);
}

/* 提示面板 - 放在按鈕下方，不遮擋畫布中心 */
.mandala-gen-help-panel {
    position: absolute;
    top: 70px;
    left: 20px;
    width: 320px;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid rgba(0, 255, 157, 0.6);
    border-radius: 8px;
    padding: 20px;
    z-index: 9999 !important; /* 確保在最上層 */
    display: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
    animation: slideDown 0.3s ease;
    pointer-events: auto !important;
}

.mandala-gen-help-panel.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mandala-gen-help-panel .help-content h4 {
    margin: 0 0 15px 0;
    color: #00ff9d;
    font-size: 1.2rem;
    text-align: center;
}

.mandala-gen-help-panel .help-content .help-steps {
    margin: 15px 0;
}

.mandala-gen-help-panel .help-content p {
    margin: 12px 0;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: left;
}

.mandala-gen-help-panel .help-content p strong {
    color: #00ff9d;
}

.help-close-btn {
    width: 100%;
    margin-top: 15px;
    padding: 8px;
    background: #00ff9d;
    color: #000;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.help-close-btn:hover {
    background: #00cc7a;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 255, 157, 0.4);
}

/* 動畫 Class */
@keyframes mandala-gen-spin { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

@keyframes mandala-gen-breathe { 
    0% { transform: scale(0.95); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(0.95); } 
}

#mandalaGenCanvas.anim-spin { 
    animation: mandala-gen-spin 30s linear infinite; 
}

#mandalaGenCanvas.anim-breathe { 
    animation: mandala-gen-breathe 6s ease-in-out infinite; 
}

#mandala-generator-section .value-display { 
    font-size: 0.8rem; 
    color: var(--mandala-gen-accent); 
    float: right; 
    font-family: monospace; 
}

/* 提示框 */
#mandala-gen-tooltip {
    position: absolute; 
    bottom: 20px; 
    right: 20px;
    background: rgba(0,0,0,0.7); 
    padding: 10px 15px; 
    border-radius: 5px;
    pointer-events: none; 
    opacity: 0; 
    transition: opacity 0.5s;
    z-index: 1001;
}

/* 手機橫向提示 */
.mobile-landscape-hint {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    z-index: 10000;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.mobile-landscape-hint.show {
    display: block;
}

/* 響應式設計 */
@media (max-width: 1024px) {
    #mandala-generator-section {
        flex-direction: column;
        padding: 10px;
    }
    
    #mandala-gen-canvas-container {
        max-width: 100%;
        aspect-ratio: 1;
        width: 100%;
    }
    
    #mandala-gen-controls {
        width: 100%;
        max-height: 40vh;
        border-left: none;
        border-top: 1px solid #333;
    }
}

/* 手機直向時顯示提示 */
@media (max-width: 768px) and (orientation: portrait) {
    .mobile-landscape-hint {
        display: block;
    }
    
    #mandala-generator-section {
        padding: 5px;
    }
}