/* ---------- Admin: post list status buttons ---------- */
.action-vbee-audio a.test-audio{display:inline-block;background:#0078d8;color:#fff;padding:4px 10px;border-radius:4px;cursor:pointer;padding-top:2px}
.action-vbee-audio a.del-audio{display:inline-block;background:#f44336;color:#fff;padding:4px 10px;border-radius:4px;cursor:pointer;margin-left:5px;padding-top:2px}
.action-vbee-audio a.none-audio{display:inline-block;background:#9e9e9e;color:#fff;padding:4px 10px;border-radius:4px;cursor:pointer;padding-top:2px}
.action-vbee-audio a.inprocess-audio{display:inline-block;background:#4caf50;color:#fff;padding:4px 10px;border-radius:4px;cursor:pointer;padding-top:2px}
div.action-vbee-audio{text-align:center}
div.action-vbee-audio a{margin:2px 4px}

/* ---------- Admin: loading overlay (CSS-only spinner, no bundled image) ---------- */
.vbee-load{position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;align-items:center;display:none;justify-content:center;background:#ffffff61;z-index:9999}
.vbee-spinner{width:48px;height:48px;border-radius:50%;border:5px solid #d1d5db;border-top-color:#2563eb;animation:vbee-spin 0.8s linear infinite}
@keyframes vbee-spin{to{transform:rotate(360deg)}}

/* ---------- Admin: delete-confirm dialog (no jquery-ui dependency) ---------- */
.vbee-dialog-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99999}
.vbee-dialog-overlay.vbee-dialog-open{display:block}
#my-dialog{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px 24px;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:100000;max-width:360px;width:90%;text-align:center}
#my-dialog.vbee-dialog-open{display:block}
.d-action{text-align:center}
.d-action a{display:inline-block;padding:6px 15px;margin:0 5px;background:#696969;border-radius:3px;color:#fff;width:75px;cursor:pointer}
.d-action a.confirm_delete{background:#2196f3}

/* ---------- Frontend: audio player ---------- */
.vbee-plugin {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 720px;
    margin: 16px auto 20px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-sizing: border-box;
}

.vbee-plugin .vbee-audio-source {
    flex: 1 1 auto;
    width: auto;
    min-width: 260px;
    height: 38px;
    margin: 0 !important;
    border-radius: 999px !important;
}

.vbee-plugin .vbee-voice-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 180px;
    max-width: 240px;
    height: 38px;
    margin: 0;
    padding: 0 36px 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background-color: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 500;
    line-height: 38px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    cursor: pointer;
}

.vbee-plugin .vbee-voice-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

@media (max-width: 640px) {
    .vbee-plugin {
        display: block;
        padding: 12px;
    }

    .vbee-plugin .vbee-audio-source {
        width: 100%;
        min-width: 0;
        margin-bottom: 10px !important;
    }

    .vbee-plugin .vbee-voice-select {
        width: 100%;
        max-width: 100%;
    }
}