/* assets/css/glassmorphism.css */

/* Glass Panel Base Styles */
.glass-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

/* Login Form Glass Styles */
.light-theme #login-container.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 
        0 8px 32px 0 rgba(31, 38, 135, 0.1),
        0 4px 8px 0 rgba(0, 0, 0, 0.05);
}

.dark-theme #login-container.glass-panel {
    background: rgba(20, 20, 35, 0.7);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.3),
        0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

/* Nav Glass Styles */
.light-theme nav.glass-panel {
    background: rgba(255, 255, 255, 0.8);
}

.dark-theme nav.glass-panel {
    background: rgba(20, 20, 35, 0.8);
}

/* Voice Selection Panel Glass Styles */
.light-theme .voice-selection-panel {
    background: rgba(255, 255, 255, 0.7);
}

.dark-theme .voice-selection-panel {
    background: rgba(20, 20, 35, 0.7);
}

/* Text Input Panel Glass Styles */
.light-theme .text-input-panel {
    background: rgba(255, 255, 255, 0.7);
}

.dark-theme .text-input-panel {
    background: rgba(20, 20, 35, 0.7);
}

/* Output Panel Glass Styles */
.light-theme .output-panel {
    background: rgba(255, 255, 255, 0.7);
}

.dark-theme .output-panel {
    background: rgba(20, 20, 35, 0.7);
}

/* Voice Item Glass Styles */
.light-theme .voice-item {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme .voice-item {
    background: rgba(30, 30, 50, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.light-theme .voice-item:hover {
    background: rgba(255, 255, 255, 0.8);
}

.dark-theme .voice-item:hover {
    background: rgba(40, 40, 60, 0.8);
}

.light-theme .voice-item.selected {
    background: rgba(235, 245, 255, 0.8);
    border: 1px solid rgba(100, 150, 255, 0.3);
}

.dark-theme .voice-item.selected {
    background: rgba(50, 60, 100, 0.6);
    border: 1px solid rgba(100, 150, 255, 0.3);
}

/* History Item Glass Styles */
.light-theme .history-item {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme .history-item {
    background: rgba(30, 30, 50, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.light-theme .history-item:hover {
    background: rgba(255, 255, 255, 0.8);
}

.dark-theme .history-item:hover {
    background: rgba(40, 40, 60, 0.8);
}

/* Input Field Glass Styles */
.light-theme .input-group input {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme .input-group input {
    background: rgba(30, 30, 50, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.light-theme .input-group input:focus {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(100, 150, 255, 0.5);
}

.dark-theme .input-group input:focus {
    background: rgba(40, 40, 60, 0.7);
    border: 1px solid rgba(100, 150, 255, 0.5);
}

/* Textarea Glass Styles */
.light-theme #text-to-speech {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme #text-to-speech {
    background: rgba(30, 30, 50, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.light-theme #text-to-speech:focus {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(100, 150, 255, 0.5);
}

.dark-theme #text-to-speech:focus {
    background: rgba(40, 40, 60, 0.7);
    border: 1px solid rgba(100, 150, 255, 0.5);
}

/* Select Glass Styles */
.light-theme select {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme select {
    background: rgba(30, 30, 50, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

/* Button Glass Styles */
.light-theme .play-sample,
.light-theme .history-play,
.light-theme .audio-btn {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme .play-sample,
.dark-theme .history-play,
.dark-theme .audio-btn {
    background: rgba(40, 40, 60, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.light-theme .play-sample:hover,
.light-theme .history-play:hover,
.light-theme .audio-btn:hover {
    background: rgba(255, 255, 255, 0.8);
}

.dark-theme .play-sample:hover,
.dark-theme .history-play:hover,
.dark-theme .audio-btn:hover {
    background: rgba(50, 50, 70, 0.8);
}

/* Audio Waveform Glass Styles */
.light-theme .audio-waveform {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme .audio-waveform {
    background: rgba(30, 30, 50, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Progress Bar Glass Styles */
.light-theme .progress-bar {
    background: rgba(255, 255, 255, 0.3);
}

.dark-theme .progress-bar {
    background: rgba(30, 30, 50, 0.3);
}

/* Theme Toggle Glass Styles */
.light-theme #theme-switch {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 12px 0 rgba(31, 38, 135, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-theme #theme-switch {
    background: rgba(20, 20, 35, 0.7);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Glass Effect Transitions */
.glass-panel,
.voice-item,
.history-item,
.input-group input,
#text-to-speech,
select,
.play-sample,
.history-play,
.audio-btn,
.audio-waveform,
.progress-bar,
#theme-switch {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}