.voice-recording-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:1001;opacity:0;transition:opacity .3s ease;backdrop-filter:blur(8px);justify-content:center;align-items:center}
.voice-recording-modal.active{display:flex;opacity:1}
.voice-recording-content{background:#fff;padding:2.5rem;border-radius:24px;max-width:600px;width:90%;position:relative;transform:translateY(20px) scale(0.98);transition:all .4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 10px 25px rgba(0,0,0,0.1);border:3px solid var(--accent-color)}
.voice-recording-modal.active .voice-recording-content{transform:translateY(0) scale(1)}
.recording-header{text-align:center;margin-bottom:2rem}
.recording-title{font-size:1.8rem;margin-bottom:.5rem;color:var(--text-dark);font-weight:700}
.recording-subtitle{color:var(--text-secondary);font-size:1rem;line-height:1.5}
.recording-methods{display:flex;gap:1.5rem;margin-bottom:2rem}
.method-tab{flex:1;padding:1rem;background:var(--background-light);border:2px solid var(--accent-color);border-radius:12px;color:var(--text-dark);cursor:pointer;transition:all .3s ease;text-align:center}
.method-tab.active{border-color:var(--primary-color);background:var(--dark-bg);color:var(--text-dark)}
.recording-section{margin-bottom:2rem}
.script-box{background:var(--dark-bg);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;border:2px solid var(--accent-color);position:relative}
.script-text{color:var(--text-dark);line-height:1.6;font-size:1.1rem;text-align:center}
.recording-controls{display:flex;flex-direction:column;align-items:center;gap:1rem}
.record-btn{width:80px;height:80px;border-radius:50%;background:var(--accent-color);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 0 var(--accent-dark)}
.record-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--accent-dark)}
.record-btn.recording::before{content:'';position:absolute;width:32px;height:32px;background:red;border-radius:4px}
.record-btn:not(.recording)::before{content:'';position:absolute;width:32px;height:32px;background:red;border-radius:50%}
.recording-timer{font-size:1.2rem;color:var(--text-dark);font-family:monospace;font-weight:600}
.recording-status{color:var(--text-secondary);font-size:.9rem}
.upload-section{display:none}
.upload-section.active{display:block}
.file-upload-area{border:2px dashed var(--accent-color);border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease;display:block;background:var(--dark-bg)}
.file-upload-area:hover{border-color:var(--primary-color);background:var(--background-light)}
.file-upload-icon{font-size:2rem;margin-bottom:1rem;color:var(--text-secondary)}
.upload-text{color:var(--text-secondary);margin-bottom:.5rem}
.upload-formats{font-size:.9rem;color:var(--text-secondary);opacity:.7}
.recording-tips{background:var(--dark-bg);border:2px solid var(--accent-color);border-radius:12px;padding:1.5rem;margin-top:2rem}
.tips-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:var(--text-dark);font-weight:600}
.tips-icon{color:var(--accent-color)}
.tips-list{list-style:none;padding:0;margin:0}
.tips-list li{color:var(--text-dark);font-size:.9rem;margin-bottom:.5rem;padding-left:1.5rem;position:relative}
.tips-list li::before{content:'•';position:absolute;left:0;color:var(--accent-color)}
.action-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}
.action-button{padding:0.75rem 1.5rem;border-radius:50px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem}
.action-button.primary{background:#1a1a1a;color:#fff;border:none}
.action-button.primary:hover{background:#333;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.2)}
.action-button.secondary{background:#fff;border:2px solid #1a1a1a;color:#1a1a1a}
.action-button.secondary:hover{background:#f8f9fa;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.1)}
.action-button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.script-label {
    position: absolute;
    top: -0.8rem;
    left: 1rem;
    background: var(--dark-bg);
    padding: 0 0.5rem;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 700;
}

.existing-voices-section {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 2rem;
}

.existing-voice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--dark-bg);
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
}

.existing-voice-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.existing-voice-item.selected {
    border-color: var(--primary-color);
    background: var(--accent-color);
    color: white;
}

.voice-info-main {
    flex: 1;
}

.voice-name {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.voice-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.voice-preview-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--accent-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}

.voice-delete-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--accent-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
    transition: all 0.3s ease;
}

.voice-delete-btn:hover {
    background: #dc3545;
    transform: translateY(-2px);
}

.voice-delete-btn svg {
    width: 16px;
    height: 16px;
}

.existing-voice-item .voice-actions {
    display: flex;
    align-items: center;
}

.no-voices-message {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    border: 2px dashed var(--accent-color);
    border-radius: 12px;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
    .voice-recording-modal {
        align-items: flex-start;
        overflow-y: auto;
        padding: 1rem 0;
    }

    .voice-recording-content {
        width: 95%;
        padding: 1.5rem;
        margin: auto;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .recording-header {
        margin-bottom: 1.5rem;
    }

    .recording-title {
        font-size: 1.4rem;
    }

    .recording-subtitle {
        font-size: 0.9rem;
    }

    .recording-methods {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .method-tab {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .script-box {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .script-text {
        font-size: 0.95rem;
    }

    .recording-tips {
        padding: 1rem;
        margin-top: 1.5rem;
    }

    .tips-list li {
        font-size: 0.85rem;
    }

    .action-buttons {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
        position: sticky;
        bottom: 0;
        background: white;
        padding-top: 1rem;
        border-top: 2px solid var(--accent-color);
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 0.5rem;
    }

    .action-button {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }

    .record-btn {
        width: 70px;
        height: 70px;
    }

    .existing-voices-section {
        max-height: 200px;
    }

    .existing-voice-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .voice-actions {
        width: 100%;
        justify-content: space-between;
    }

    .voice-preview-btn,
    .voice-delete-btn {
        margin-left: 0;
        flex: 1;
    }
}

@media screen and (max-width: 480px) {
    .voice-recording-content {
        padding: 1rem;
    }

    .recording-title {
        font-size: 1.2rem;
    }

    .recording-methods {
        flex-direction: column;
    }

    .method-tab {
        width: 100%;
    }

    .action-buttons {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Add safe area padding for modern mobile devices */
@supports (padding: env(safe-area-inset-bottom)) {
    @media screen and (max-width: 768px) {
        .voice-recording-content {
            max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
        }

        .action-buttons {
            padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        }
    }
}