/* --- Floating Control Bar --- */
.floating-controls {
    position: fixed; /* Stay in place */
    left: 0; right: 0; bottom: 0; /* Position at bottom */
    margin: 0 auto; /* Center horizontally */
    background: rgba(28, 32, 48, 0.85); /* Semi-transparent background */
    border-radius: 10px 10px 0 0; /* Rounded top corners */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2); /* Top shadow */
    display: flex; /* Use flexbox for layout */
    align-items: stretch; /* Stretch items vertically */
    gap: 0; /* No gap between main content and toggle button */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle top border */
    z-index: 10; /* Keep controls above canvas */
    box-sizing: border-box; /* Include padding/border in size */
    height: auto; /* Auto height based on content */
    width: 100%; /* Full width */
}

/* Content area within the control bar */
.controls-content {
    flex: 1 1 auto; /* Allow shrinking/growing */
    min-width: 0; /* Allow shrinking below content size */
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    gap: 10px; /* Space between controls */
    flex-grow: 1; /* Take available space */
    flex-shrink: 1; /* Allow shrinking */
    flex-wrap: wrap; /* Wrap controls on smaller screens */
    padding: 5px 10px; /* Padding inside */
}

/* Style when controls are inactive (faded out) */
.floating-controls.inactive {
    background: rgba(28, 32, 48, 0.05); /* Very transparent */
    transition: background 0.5s ease-out; /* Smooth fade */
}

/* Ensure control items don't overflow */
.controls-content > * {
    min-width: 0; /* Allow shrinking */
    max-width: 100%; /* Don't exceed parent width */
    flex: 0 1 auto; /* Don't grow, allow shrinking, auto basis */
}

/* --- Control Item Layout --- */
.slider-container { 
    flex: 1 1 100px; 
    min-width: 50px; 
    max-width: 180px; 
}

#progressBarContainer { 
    flex: 2 1 75px; 
    min-width: 70px; 
    max-width: 140px; 
}

/* Style for Grid input */
#gridInput {
    width: 45px; 
    min-width: 0; 
    max-width: 60px; 
    font-size: 0.9em; 
    height: 24px;
}

/* Style for Recursion and Passes inputs (make them the same smaller size) */
#recursionInput, #passesInput {
    width: 35px; /* Smaller width */
    min-width: 0; 
    max-width: 60px; 
    font-size: 0.9em; 
    height: 24px;
}

.input-group { 
    display: flex; 
    align-items: center; 
    gap: 3px; 
}

.input-group label { 
    font-size: 0.8em; 
    color: #ccc; 
    white-space: nowrap; 
}

/* --- Collapsed Control Bar Style --- */
.floating-controls.collapsed {
    width: auto; 
    bottom: 0; 
    right: 0; 
    left: auto; 
    padding: 0;
    background: transparent; 
    border: none; 
    box-shadow: none;
    transform: translateX(0); 
    border-radius: 50%; 
    overflow: visible;
}

.floating-controls.collapsed .controls-content {
    height: 0 !important;
    min-height: 0 !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    transition: opacity 0.2s, height 0.2s;
}

/* 保留toggle-btn可見並可操作 */
.floating-controls.collapsed .toggle-btn {
    opacity: 1;
    pointer-events: auto;
}

/* 收合狀態下的按鈕 */
.floating-controls.collapsed .toggle-btn {
    position: fixed; /* 保持固定定位 */
    bottom: 5px;
    right: 5px;
    transform: none;
    background: rgba(40, 45, 65, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #c3daff;
    margin: 0;
    transition: background 0.2s, color 0.2s;
    z-index: 100; /* 確保按鈕始終在最上層 */
}

/* --- 展開狀態下的Toggle按鈕 --- */
.toggle-btn {
    /* 也改為固定定位，確保一致性 */
    position: fixed;
    bottom: 5px;
    right: 5px;
    transform: none; /* 移除transform */
    border-radius: 8px;
    background: rgba(40, 45, 65, 0.7);
    color: #c3daff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    min-width: 32px;     /* 從 28px 改為 32px */
    max-width: 40px;     /* 從 36px 改為 40px */
    height: 32px;        /* 從 28px 改為 32px */
    flex-basis: 32px;    /* 從 28px 改為 32px */
    box-sizing: border-box;
    line-height: normal;
    z-index: 100; /* 確保按鈕始終在最上層 */
}

/* 移除收合狀態下的懸浮效果 */
.floating-controls.collapsed .toggle-btn:hover {
    background: rgba(50, 55, 75, 0.65);
    color: #e0f0ff;
    /* 移除transform和其他懸浮效果 */
}

/* 移除展開狀態下的懸浮效果 */
.toggle-btn:hover {
    background: rgba(50, 55, 75, 0.75);
    color: #e0f0ff;
    /* 完全移除transform效果和陰影 */
}

/* --- 一般控制按鈕樣式 --- */
.control-btn {
    border: none; 
    border-radius: 8px; 
    background: rgba(40, 45, 65, 0.7);
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); 
    color: #c3daff; 
    cursor: pointer;
    transition: background 0.2s, color 0.2s; /* 只過渡顏色和背景 */
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 0;
    /* Size is defined separately above */
}

/* 移除控制按鈕的懸浮效果 */
.control-btn:hover {
    background: rgba(50, 55, 75, 0.85); 
    color: #e0f0ff; 
    /* 移除transform和box-shadow效果 */
}

.control-btn.muted { 
    color: #ff9a9a; 
    background: rgba(70, 40, 40, 0.7); 
}

.control-btn.muted:hover { 
    background: rgba(85, 50, 50, 0.85); 
}

/* --- Slider Styles --- */
.slider-container {
    position: relative; 
    height: 4px; 
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px; 
    cursor: pointer; 
    display: flex; 
    align-items: center;
    margin: 0 5px;
}

.progress-bar-container { 
    flex-grow: 1; 
    min-width: 50px; 
    max-width: 150px; 
    margin: 0 10px; 
}

.volume-bar-container { 
    flex-grow: 1; 
    min-width: 30px; 
    max-width: 100px; 
    margin: 0 10px; 
}

.slider-fill {
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 2px; 
    transition: width 0.1s linear; 
    pointer-events: none;
}

.slider-thumb {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%) translateX(-50%);
    width: 12px; 
    height: 12px; 
    background: #fff; 
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, opacity 0.2s ease, left 0.1s linear;
    pointer-events: none; 
    z-index: 1; 
    opacity: 0;
}

.slider-container:hover .slider-thumb { 
    transform: translateY(-50%) translateX(-50%) scale(1.2); 
}