/* Global Styles */
html, body {
    height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f3f4f6;
}
ul, li { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; color: inherit; }
.hidden { display: none !important; }

/* Layout */
.main-container { display: flex; height: 100vh; }
.sidebar { width: 250px; flex-shrink: 0; background-color: #1f2937; color: #ffffff; padding: 1.5rem; box-shadow: 2px 0 5px rgba(0,0,0,0.1); }
.main-content-wrapper { flex-grow: 1; overflow-y: auto; padding: 2rem; }

/* Sidebar */
.sidebar-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 2rem; text-align: center; }
.nav-item { margin-bottom: 1rem; }
.nav-link { display: flex; align-items: center; padding: 0.75rem; border-radius: 0.5rem; transition: background-color 0.2s; }
.nav-link:hover { background-color: #374151; }
.nav-icon { margin-right: 0.75rem; }

/* Welcome Page */
.welcome-box { text-align: center; padding-top: 20vh; }
.welcome-title { font-size: 2.5rem; font-weight: 800; color: #1f2937; }
.welcome-subtitle { color: #6b7280; margin-top: 1rem; font-size: 1.125rem; }

/* Voice Generation Flow */
.flow-container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }
.flow-section { width: 100%; }
.section-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; }

/* Cards (Character, Language) */
.card-container { display: flex; gap: 1rem; flex-wrap: wrap; }
.card { border: 2px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; background-color: #fff; }
.card:hover { border-color: #3b82f6; transform: translateY(-4px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.card.active { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); background-color: #eff6ff; }
.card.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* New wrapper for character images */
.card-image-wrapper, .custom-card-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 0.5rem; /* Center horizontally and add margin bottom */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.card-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.card-flag-icon {
    width: 28px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Character image colors */
.bg-poli { background-color: #dbeafe; } /* Blue */
.bg-roy { background-color: #fee2e2; } /* Red */
.bg-amber { background-color: #fce7f3; } /* Pink */
.bg-helly { background-color: #dcfce7; } /* Green */
.bg-jin { background-color: #fef3c7; } /* Yellow */

.custom-card-icon-wrapper {
    background-color: #e5e7eb; /* Gray */
    color: #6b7280; /* Icon color */
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.card-name { font-weight: 500; color: #374151; pointer-events: none; }

/* Tabs */
.tab-nav { display: flex; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.5rem; }
.tab-button { padding: 0.75rem 1.25rem; border: none; background: transparent; cursor: pointer; font-size: 1rem; font-weight: 500; color: #6b7280; border-bottom: 3px solid transparent; transition: all 0.2s ease-in-out; }
.tab-button:hover { color: #111827; }
.tab-button.active { color: #3b82f6; border-bottom-color: #3b82f6; }
.tab-button.disabled { color: #9ca3af; cursor: not-allowed; background-color: #f3f4f6; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* TTS Model Dropdown */
.model-select-container { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.model-select-label { font-weight: 500; color: #374151; }
.model-select { padding: 0.5rem 1rem; font-size: 1rem; border-radius: 0.5rem; border: 1px solid #d1d5db; background-color: #fff; flex-grow: 1; }

/* Personality Slider */
.personality-slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.slider-label {
    font-size: 0.875rem;
    color: #4b5563;
}


/* Text Input Area */
.text-input { width: 100%; box-sizing: border-box; height: 120px; padding: 1rem; font-size: 1rem; border-radius: 0.5rem; border: 1px solid #d1d5db; resize: vertical; margin-bottom: 1rem; }

/* Action Button */
.action-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; color: #fff; background-color: #2563eb; border: none; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.2s; }
.action-button:hover { background-color: #1d4ed8; }
.action-button:disabled { background-color: #9ca3af; cursor: not-allowed; }

/* File Upload */
.file-upload-area { border: 2px dashed #d1d5db; border-radius: 0.75rem; padding: 2.5rem; text-align: center; background-color: #f9fafb; transition: border-color 0.2s, background-color 0.2s; }
.file-upload-area:hover { border-color: #3b82f6; }
.file-upload-area.drag-over { border-color: #2563eb; background-color: #eff6ff; }
.file-input { display: none; }
.file-upload-label { cursor: pointer; }
.file-upload-icon { font-size: 3rem; color: #9ca3af; }
.file-upload-text { font-size: 1.125rem; font-weight: 500; margin: 1rem 0 0.5rem; }
.file-upload-hint { font-size: 0.875rem; color: #6b7280; }

/* Audio Editor */
.audio-editor-container { border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 2.5rem 1.5rem 1.5rem; background-color: #f9fafb; position: relative; }
.audio-editor-container.generated { border-color: #10b981; }
.waveform-wrapper { width: 100%; overflow-x: auto; margin-bottom: 1rem; display: flex; justify-content: center; }
#waveform-upload, #waveform-generated, #waveform-reference { min-height: 50px; }
#waveform-generated { width: 70%; transition: width 0.1s linear; }

.waveform-controls { display: flex; justify-content: center; align-items: center; margin-top: 1rem; gap: 0.75rem; }
.play-pause-btn { background-color: #3b82f6; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; }
.play-pause-btn:hover { background-color: #2563eb; }
.play-pause-btn.active-trim, .play-pause-btn.active-speed { background-color: #ef4444; } /* Red for active modes */
.play-pause-btn:disabled { background-color: #9ca3af; cursor: not-allowed; }
.close-editor-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; cursor: pointer; color: #9ca3af; padding: 0.25rem; border-radius: 50%; }
.close-editor-btn:hover { color: #374151; }

/* Pitch Control inside Editor */
.pitch-control-container { display: flex; align-items: center; gap: 1rem; padding: 1rem; margin-top: 1rem; border-top: 1px solid #e5e7eb; }
.pitch-gender-icon { width: 32px; height: 32px; }
.slider-with-value { flex-grow: 1; display: flex; align-items: center; gap: 0.75rem; }
.pitch-slider { flex-grow: 1; cursor: pointer; }
.pitch-value { font-weight: 600; min-width: 30px; text-align: center; background-color: #e5e7eb; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; }

/* Speed Control Slider */
.speed-control-container { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; }
.speed-slider { flex-grow: 1; cursor: pointer; }
.speed-value { font-weight: 600; min-width: 45px; text-align: center; background-color: #e5e7eb; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.875rem; }

/* History Section */
#waveform-history-container { margin-top: 2rem; border-top: 1px solid #e5e7eb; padding-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.history-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background-color: #fff; border: 1px solid #e5e7eb; cursor: pointer; transition: all 0.2s; }
.history-item:hover { background-color: #f9fafb; border-color: #d1d5db; }
.history-item.active { background-color: #eff6ff; border-color: #3b82f6; }
.history-item-label { font-size: 0.875rem; font-weight: 500; color: #374151; }
.history-item-controls { display: flex; align-items: center; gap: 0.5rem; }
.play-pause-btn-small { width: 32px; height: 32px; }
.history-item-delete-btn { background-color: #fee2e2; color: #ef4444; width: 32px; height: 32px; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; }
.history-item-delete-btn:hover { background-color: #fca5a5; }

/* Loading Animation */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spinning { animation: spin 1s linear infinite; }

/* Custom WaveSurfer Region Handle Size */
wave > region.wavesurfer-region .wavesurfer-handle { width: 8px !important; }
wave > region.wavesurfer-region .wavesurfer-handle::before { width: 4px !important; }