/* --- General Editor Cleanup --- */

/* Strongly hide the Post Title area */
.editor-post-title,
.editor-post-title__block-control,
.editor-post-title__input,
.wp-block-post-title,
h1.editor-post-title,
.edit-post-visual-editor__post-title-wrapper {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide Sidebar Tabs (The "Script" and "Block" switcher tabs at top of sidebar) */
.interface-complementary-area-header,
.interface-complementary-area-header__small,
.components-tab-panel__tabs {
    display: none !important;
}

/* --- Floating Toolbar --- */
.block-editor-block-list__block-popover,
.block-editor-block-contextual-toolbar,
.block-editor-rich-text__inline-toolbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide Inserter and Appender (since we generate content) */
.block-editor-block-list__insertion-point,
.block-editor-inserter,
.block-editor-block-list__empty-block-inserter,
.block-editor-default-block-appender {
    display: none !important;
}

/* Hide standard panels that aren't needed */
.components-panel__body.edit-post-post-link,
.components-panel__body.edit-post-post-schedule,
.components-panel__body.edit-post-featured-image,
.components-panel__body.edit-post-discussion,
.components-panel__body.edit-post-page-attributes,
.components-panel__body.edit-post-excerpt,
.components-panel__body.taxonomy-panel {
    display: none !important;
}

/* Hide everything in the sidebar EXCEPT our panel and Status */
.edit-post-sidebar .components-panel__body:not(.edit-post-settings-panel__podcaster-panel):not(.edit-post-post-status):not(.edit-post-last-revision) {
    display: none !important;
}

/* Force our specific panel to be visible and expanded */
.components-panel__body.edit-post-settings-panel__podcaster-panel {
    display: block !important;
}

/* --- Three-Column Layout: Left Side (Source Article) - DESKTOP ONLY --- */
@media (min-width: 783px) {

    /* Shift the main editor content to the right and reserve space for right sidebar */
    .interface-interface-skeleton__content {
        margin-left: 350px !important;
        /* Reserve space for right sidebar (280px WordPress standard) */
        width: calc(100% - 350px - 280px) !important;
    }

    .podcastmaker-voice-direction-mount {
        width: 100%;
        padding: 18px 22px 0;
        box-sizing: border-box;
    }

    /* Adjust for Admin Bar */
    .interface-interface-skeleton {
        top: 32px !important;
    }

    /* The Source Article Panel */
    .Podcastmaker-source-panel {
        position: fixed;
        top: 32px;
        /* Link with WP Admin Bar */
        bottom: 0;
        left: 160px;
        /* Standard WP Admin Sidebar width */
        width: 350px;
        background: #f0f0f1;
        border-right: 1px solid #ddd;
        overflow-y: auto;
        z-index: 9990;
        padding: 0;
        box-sizing: border-box;
        transition: width 0.3s ease, min-width 0.3s ease, margin-left 0.3s ease, opacity 0.3s ease;
        display: block;
        /* Visible by default on desktop */
    }

    /* Header inside source panel */
    .Podcastmaker-source-panel .panel-header {
        background: #fff;
        padding: 15px 20px;
        border-bottom: 1px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .Podcastmaker-source-panel .panel-header-label {
        font-size: 11px;
        text-transform: uppercase;
        color: #646970;
        font-weight: 600;
    }

    /* Scrollable content area */
    .Podcastmaker-source-panel .panel-body {
        padding: 20px;
    }

    .Podcastmaker-source-panel h2 {
        font-size: 1.5rem;
        margin-top: 0;
        margin-bottom: 15px;
        line-height: 1.2;
    }

    .Podcastmaker-source-panel .source-content {
        font-size: 14px;
        line-height: 1.6;
        color: #3c434a;
        background: #fff;
        padding: 20px;
        border: 1px solid #c3c4c7;
        border-radius: 2px;
    }

    /* Adjustments for various WP States */

    /* Folded Admin Menu */
    body.folded .Podcastmaker-source-panel,
    body.auto-fold .Podcastmaker-source-panel {
        left: 36px;
    }

    /* Fullscreen Mode */
    body.is-fullscreen-mode .Podcastmaker-source-panel {
        left: 0;
        top: 0;
    }

    body.is-fullscreen-mode .interface-interface-skeleton {
        top: 0 !important;
    }
}

/* Ensure Mobile Reset */
@media (max-width: 782px) {
    .interface-interface-skeleton__content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}



/* Toggle Button for Source Panel */
.podcastmaker-toggle-btn {
    position: absolute;
    top: 12px;
    right: 15px;
    z-index: 100;
    background-color: transparent;
    color: #2271b1;
    border: 1px solid #2271b1;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    font-size: 11px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.podcastmaker-toggle-btn:hover {
    background-color: #2271b1;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.podcastmaker-toggle-btn:active {
    transform: translateY(1px);
}

/* Panel header needs to be relative for absolute positioning */
.Podcastmaker-source-panel .panel-header {
    position: relative;
}

/* When panel is hidden, show button at edge of screen */
.podcastmaker-toggle-btn.panel-hidden {
    position: fixed;
    top: 60px;
    left: 10px;
    right: auto;
    z-index: 99999;
    background-color: #2271b1;
    color: white;
    border-color: #2271b1;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.podcastmaker-toggle-btn.panel-hidden:hover {
    background-color: #135e96;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Adjust for folded admin menu */
body.folded .podcastmaker-toggle-btn.panel-hidden,
body.auto-fold .podcastmaker-toggle-btn.panel-hidden {
    left: 10px;
}

/* Adjust for fullscreen mode */
body.is-fullscreen-mode .podcastmaker-toggle-btn.panel-hidden {
    left: 10px;
    top: 10px;
}


/* Source panel hidden state */
.Podcastmaker-source-panel.is-hidden {
    width: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    border: none !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* Adjust editor content when panel is hidden */
.Podcastmaker-source-panel.is-hidden~.interface-interface-skeleton__content,
body:has(.Podcastmaker-source-panel.is-hidden) .interface-interface-skeleton__content {
    margin-left: 0 !important;
    /* Still reserve space for right sidebar (280px) */
    width: calc(100% - 280px) !important;
    transition: margin-left 0.3s ease, width 0.3s ease;
}

.podcastmaker-voice-direction-card {
    border: 1px solid #d6dbe1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.podcastmaker-voice-direction-card__toggle {
    width: 100%;
    border: 0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    text-align: left;
}

.podcastmaker-voice-direction-card__heading {
    display: grid;
    gap: 4px;
}

.podcastmaker-voice-direction-card__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5b6573;
}

.podcastmaker-voice-direction-card__heading strong {
    font-size: 15px;
    color: #1d2327;
}

.podcastmaker-voice-direction-card__chevron {
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7eef5;
    color: #2271b1;
    font-size: 22px;
    line-height: 1;
}

.podcastmaker-voice-direction-card__body {
    padding: 18px 20px 20px;
    display: grid;
    gap: 12px;
}

.podcastmaker-voice-direction-card__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.podcastmaker-voice-direction-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.podcastmaker-voice-direction-card__style-name {
    font-size: 12px;
    color: #475467;
    font-weight: 600;
}

.podcastmaker-voice-direction-card__description {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.6;
}

.podcastmaker-voice-direction-card__toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #344054;
    cursor: pointer;
}

.podcastmaker-voice-direction-card__toggle-row input[type="checkbox"] {
    margin: 0;
}

.podcastmaker-voice-direction-card__payload {
    border: 1px solid #d8dee6;
    border-radius: 14px;
    background: #fbfcfe;
    padding: 12px 14px;
    display: grid;
    gap: 8px;
}

.podcastmaker-voice-direction-card__payload-title {
    font-size: 13px;
    color: #1d2327;
}

.podcastmaker-voice-direction-card__payload-code {
    margin: 0;
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: #475467;
}

.pm-generation-progress-note {
    padding: 10px 12px;
    border: 1px solid #d6e4f0;
    border-radius: 10px;
    background: #f7fbff;
    color: #1d4f7a;
    font-size: 12px;
    line-height: 1.5;
}

.pm-generation-popup {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 280px;
    max-width: calc(100vw - 24px);
    border: 1px solid #cfd8e3;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
    z-index: 100050;
    overflow: hidden;
    pointer-events: auto;
    padding-bottom: 10px;
}

.pm-generation-popup--inline {
    position: static;
    width: 100%;
    max-width: 100%;
    right: auto;
    bottom: auto;
    margin-top: 12px;
    box-shadow: none;
}

.pm-generation-popup--inline.is-error {
    box-shadow: none;
}

.pm-generation-popup.is-error {
    border-color: #ef9a9a;
    box-shadow: 0 18px 44px rgba(185, 28, 28, 0.18);
}

.pm-generation-popup.is-complete {
    border-color: #b9e8c8;
}

.pm-generation-popup__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-bottom: 1px solid #e2e8f0;
}

.pm-generation-popup__heading {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pm-generation-popup__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.pm-generation-popup__heading strong {
    font-size: 14px;
    line-height: 1.25;
    color: #0f172a;
}

.pm-generation-popup__close {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.pm-generation-popup__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 8px;
    font-size: 11px;
    line-height: 1.35;
    color: #334155;
}

.pm-generation-popup__status-text {
    min-width: 0;
    color: #334155;
}

.pm-generation-popup__status-text.is-success {
    color: #0f7a2d;
}

.pm-generation-popup__status-text.is-error {
    color: #b42318;
}

.pm-generation-popup__status-percent {
    flex: 0 0 auto;
    font-weight: 700;
    color: #0f172a;
}

.pm-generation-popup__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px 0;
}

.pm-generation-popup__badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e2effc;
    color: #1d4f7a;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.pm-generation-popup__badge.is-muted {
    background: #f1f5f9;
    color: #475569;
}

.pm-generation-popup__badge.is-success {
    background: #e8f7ee;
    color: #0f7a2d;
}

.pm-generation-popup__badge.is-error {
    background: #fde8e8;
    color: #b42318;
}

.pm-generation-popup__progress-labels {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 6px;
    font-size: 11px;
    color: #334155;
}

.pm-generation-popup__bar {
    height: 10px;
    margin: 0 12px;
    margin-bottom: 2px;
    border-radius: 999px;
    background: #edf2f7;
    border: 1px solid #dbe5ef;
    overflow: hidden;
}

.pm-generation-popup__bar > span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #2271b1);
    transition: width 0.16s ease-out;
}

.pm-generation-popup__phases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px 0;
}

.pm-generation-popup__phase {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    border: 1px solid #d6dde7;
    background: #f8fafc;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.pm-generation-popup__phase.is-active {
    border-color: #9fc0de;
    background: #eff6ff;
    color: #2271b1;
}

.pm-generation-popup__phase.is-complete {
    border-color: #b9e8c8;
    background: #f2fbf5;
    color: #0f7a2d;
}

.pm-generation-popup__detail {
    padding: 10px 12px 12px;
    font-size: 11px;
    line-height: 1.55;
    color: #64748b;
}

.pm-smart-tone-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(2px);
}

.pm-smart-tone-confirm-modal {
    width: min(560px, 100%);
    padding: 18px 20px 16px;
    border: 1px solid #dcdcde;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.pm-smart-tone-confirm-modal__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.pm-smart-tone-confirm-modal__title {
    font-size: 16px;
    font-weight: 700;
    color: #1d2327;
}

.pm-smart-tone-confirm-modal__badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef4fb;
    border: 1px solid #b5cfe3;
    color: #2271b1;
    font-size: 11px;
    font-weight: 700;
}

.pm-smart-tone-confirm-modal__message {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #1d2327;
}

.pm-smart-tone-confirm-modal__hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #646970;
}

.pm-smart-tone-confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.podcastmaker-voice-direction-card__textarea {
    width: 100%;
    min-height: 260px;
    border: 1px solid #c8d0d8;
    border-radius: 14px;
    padding: 14px 16px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #1f2937;
    background: #ffffff;
    box-sizing: border-box;
}

.podcastmaker-voice-direction-card__textarea:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.12);
}

.podcastmaker-voice-direction-card__textarea:disabled {
    background: #f6f7f7;
    color: #646970;
    cursor: not-allowed;
}

/* Mobile Adjustments - Medium screens (782px to 1279px) */
@media (max-width: 1279px) {

    /* Hide left panel by default on medium screens */
    .Podcastmaker-source-panel {
        display: none;
    }

    /* Center editor takes remaining space, accounting for right sidebar */
    .interface-interface-skeleton__content {
        margin-left: 0 !important;
        width: calc(100% - 280px) !important;
    }

    .podcastmaker-voice-direction-mount {
        width: 100%;
        padding: 16px 18px 0;
        box-sizing: border-box;
    }

    /* Show toggle button to allow users to show left panel */
    .podcastmaker-toggle-btn.panel-hidden {
        display: inline-flex;
    }
}

/* Mobile Adjustments - Small screens (under 782px) */
@media (max-width: 782px) {

    /* Completely hide left panel */
    .Podcastmaker-source-panel,
    .Podcastmaker-source-panel.is-hidden {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
    }

    /* Center editor FORCE visible and full width on mobile */
    .interface-interface-skeleton__content {
        margin-left: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        visibility: visible !important;
        transform: none !important;
        /* Prevent WP slide effects */
    }

    .podcastmaker-voice-direction-mount {
        width: 100%;
        padding: 14px 14px 0;
        box-sizing: border-box;
    }

    /* Hide toggle button on mobile since panel is auto-hidden */
    .podcastmaker-toggle-btn {
        display: none !important;
    }
}

/* ========================================
   MOBILE SIDEBAR TOGGLE (FAB)
   ======================================== */

/* Floating Action Button for Mobile Sidebar */
.podcastmaker-mobile-fab {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #2271b1;
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 999999;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.podcastmaker-mobile-fab:hover {
    background-color: #135e96;
    transform: scale(1.1);
}

.podcastmaker-mobile-fab:active {
    transform: scale(0.95);
}

/* Backdrop overlay when sidebar is open */
.podcastmaker-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100 !important;
    /* Low default z-index */
    transition: opacity 0.3s ease;
    pointer-events: auto !important;
}

.podcastmaker-sidebar-backdrop.active {
    display: block;
}

/* Mobile Sidebar Behavior */
@media (max-width: 782px) {
    .podcastmaker-mobile-fab {
        display: flex;
    }

    /* Target the PluginSidebar component */
    .interface-complementary-area {
        position: fixed !important;
        top: 0;
        right: -100%;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        z-index: 10000 !important;
        /* Above wrapper and backdrop */
        transition: right 0.3s ease;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
        background: #fff;
        display: block !important;
        pointer-events: auto !important;
        /* Ensure content is clickable */
    }

    /* Fix for the wrapper blocking clicks */
    .interface-interface-skeleton__sidebar {
        z-index: 1000 !important;
        pointer-events: none !important;
        /* Let clicks pass through to backdrop */
    }

    /* FORCE TEXT VISIBILITY (Fix for White-on-White) */
    .interface-complementary-area * {
        color: #1e1e1e !important;
        /* Force dark text */
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Exceptions for buttons/inputs */
    .interface-complementary-area button,
    .interface-complementary-area .components-button {
        color: inherit;
    }

    .interface-complementary-area .components-button.is-primary {
        color: #fff !important;
    }

    /* Hide the "Screen Above" (Sidebar Header) */
    .interface-complementary-area-header {
        display: none !important;
    }

    /* CRITICAL: Filter Content Area to 'Dim' it without on-top overlay */
    body.podcastmaker-mobile-sidebar-open .interface-interface-skeleton__content,
    body.podcastmaker-mobile-sidebar-open .interface-interface-skeleton__editor {
        z-index: 1 !important;
        position: relative !important;
        pointer-events: none !important;
        /* Backdrop provides visual feedback, no need for opacity/filter */
    }

    /* SUPER CRITICAL: Pointer Events Logic to Fix "Blocked by Top Element" */

    /* 1. Dissable clicks on the main skeleton wrapper when sidebar is open */
    body.podcastmaker-mobile-sidebar-open .interface-interface-skeleton {
        pointer-events: none !important;
        z-index: 100 !important;
        /* Above backdrop */
    }

    /* 2. Re-enable clicks ONLY on our Sidebar (TOP) */
    body.podcastmaker-mobile-sidebar-open .interface-interface-skeleton__sidebar {
        pointer-events: none !important;
        cursor: auto !important;
        z-index: 1000 !important;
    }

    body.podcastmaker-mobile-sidebar-open .interface-complementary-area {
        pointer-events: auto !important;
        cursor: auto !important;
        z-index: 10000 !important;
    }

    body.podcastmaker-mobile-sidebar-open .podcastmaker-sidebar-backdrop {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 500 !important;
        /* Inside skeleton: between content (1) and sidebar wrapper (1000) */
        width: 15% !important;
        right: auto !important;
        /* Only cover the left 15% (sidebar is 85% width) */
    }

    /* Specific fix for buttons inside the sidebar inheriting 'none' somewhere */
    body.podcastmaker-mobile-sidebar-open .interface-complementary-area button,
    body.podcastmaker-mobile-sidebar-open .interface-complementary-area a,
    body.podcastmaker-mobile-sidebar-open .interface-complementary-area input,
    body.podcastmaker-mobile-sidebar-open .interface-complementary-area select,
    body.podcastmaker-mobile-sidebar-open .interface-complementary-area textarea {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* CRITICAL: Hide Desktop Source Panel on Mobile */
    .Podcastmaker-source-panel {
        display: none !important;
    }

    .interface-complementary-area.mobile-visible,
    .interface-interface-skeleton__sidebar.mobile-visible {
        right: 0;
    }
}

/* ========================================
   VOICE PREVIEW UI & COMPACT LIST
   ======================================== */

.pm-voice-list {
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.pm-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #646970;
    padding: 8px 10px 4px;
    background: #f0f0f1;
    border-top: 1px solid #ddd;
}

.pm-section-label:first-child {
    border-top: none;
}

/* Accordion Header */
.pm-accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #1d2327;
    background: #f6f7f7;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.pm-accordion-header:first-child {
    border-top: none;
}

.pm-accordion-header:hover {
    background: #e9ecef;
}

.pm-accordion-header.is-open {
    background: #e5f0fa;
    border-bottom-color: #b5cfe3;
}

.pm-accordion-arrow {
    font-size: 10px;
    color: #646970;
    width: 12px;
    display: inline-block;
    text-align: center;
}

/* Accordion Body */
.pm-accordion-body {
    max-height: 600px;
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
}

.pm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.pm-dot-male {
    background: #2271b1;
}

.pm-dot-female {
    background: #d63638;
}

.pm-voice-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f1;
    transition: background 0.1s;
}

.pm-voice-row:last-child {
    border-bottom: none;
}

.pm-voice-row:hover {
    background: #f6f7f7;
}

.pm-voice-row.is-selected {
    background: #f0f6fb;
    box-shadow: inset 4px 0 0 #2271b1;
}

.pm-voice-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pm-voice-name {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-voice-char {
    font-size: 11px;
    color: #646970;
}

.pm-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #f0f0f1;
    color: #2c3338;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}

.pm-play-btn:hover {
    background: #2271b1;
    color: #fff;
}

.pm-play-btn.is-playing {
    background: #00a32a;
    color: #fff;
    animation: pm-preview-pulse 1.2s infinite;
}

.pm-voice-workspace {
    margin-top: 6px;
}

.pm-voice-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.pm-voice-gender-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    padding: 2px;
    border: 1px solid #dcdcde;
    border-radius: 999px;
    background: #f6f7f7;
}

.pm-voice-toggle {
    border: 0;
    background: transparent;
    color: #50575e;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pm-voice-toggle.is-active {
    background: #2271b1;
    color: #fff;
}

.pm-voice-chip {
    border: 1px solid #dcdcde;
    background: #f6f7f7;
    color: #50575e;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.pm-voice-chip.is-active,
.pm-voice-chip.is-selected {
    background: #eef4fb;
    border-color: #b5cfe3;
    color: #2271b1;
}

.pm-voice-chip.is-selected {
    cursor: default;
}

.pm-voice-list.pm-voice-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    padding: 6px;
}

.pm-voice-list.pm-voice-list-grid .pm-voice-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 6px;
    min-height: 58px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    padding: 6px 8px;
    background: #fff;
}

.pm-voice-list.pm-voice-list-grid .pm-voice-row:last-child {
    border-bottom: 1px solid #dcdcde;
}

.pm-voice-list.pm-voice-list-grid .pm-voice-row.is-selected {
    border-color: #2271b1;
    background: #eef4fb;
    box-shadow: inset 0 0 0 1px #2271b1;
}

.pm-voice-list.pm-voice-list-grid .pm-voice-info {
    gap: 1px;
}

.pm-voice-list.pm-voice-list-grid .pm-voice-row input[type="radio"] {
    margin: 0 !important;
}

.pm-voice-list.pm-voice-list-grid .pm-voice-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

.pm-voice-list.pm-voice-list-grid .pm-voice-char {
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

.pm-voice-list.pm-voice-list-grid .pm-play-btn {
    width: 24px;
    height: 24px;
}

.pm-step-block {
    margin-bottom: 10px;
}

.pm-step-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pm-step-toggle {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid #c3c4c7;
    background: #fff;
    color: #1d2327;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.pm-step-toggle.is-active {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

.pm-step-toggle.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pm-field-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1d2327;
}

.pm-mode-selector {
    margin-bottom: 8px;
    padding: 10px 12px 8px;
    border: 1px solid #dcdcde;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.pm-mode-selector__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.pm-mode-selector__help {
    font-size: 11px;
    color: #646970;
}

.pm-mode-selector__note {
    margin: 8px 0 0;
    font-size: 11px;
    color: #646970;
}

.pm-mode-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pm-mode-toggle__button {
    min-height: 38px;
    border: 1px solid #c3c4c7;
    border-radius: 999px;
    background: #fff;
    color: #50575e;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pm-mode-toggle__button.is-active {
    border-color: #2271b1;
    background: #2271b1;
    color: #fff;
    box-shadow: 0 10px 24px rgba(34, 113, 177, 0.18);
}

.pm-mode-toggle__button.is-disabled,
.pm-mode-toggle__button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}

.pm-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pm-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #edf4ff;
    color: #135e96;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pm-multi-speaker-workspace {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.pm-multi-speaker-intro {
    padding: 12px;
    border: 1px solid #dcdcde;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.pm-multi-speaker-intro__title {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #1d2327;
}

.pm-multi-speaker-intro__text {
    font-size: 12px;
    color: #646970;
    line-height: 1.5;
}

.pm-empty-state-card {
    padding: 14px;
    border: 1px dashed #c3c4c7;
    border-radius: 10px;
    background: #fcfcfc;
    color: #646970;
    font-size: 12px;
    line-height: 1.5;
}

.pm-speaker-map-list {
    display: grid;
    gap: 10px;
}

.pm-speaker-map-card {
    padding: 0;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.pm-speaker-map-card--speaker-0 {
    background: linear-gradient(180deg, #ffffff 0%, #eff7ff 100%);
}

.pm-speaker-map-card--speaker-1 {
    background: linear-gradient(180deg, #ffffff 0%, #eefbf3 100%);
}

.pm-speaker-map-card--speaker-2 {
    background: linear-gradient(180deg, #ffffff 0%, #fff7ec 100%);
}

.pm-speaker-map-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(220, 220, 222, 0.75);
}

.pm-speaker-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #1d2327;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pm-speaker-map-card__name {
    font-size: 14px;
    color: #1d2327;
}

.pm-speaker-map-card__body {
    display: grid;
    gap: 10px;
    padding: 12px 14px 12px;
}

.pm-speaker-map-card__toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pm-speaker-map-card__label {
    display: none;
}

.pm-speaker-map-card__label-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d2327;
}

.pm-speaker-map-card__label-help {
    color: #646970;
    font-size: 11px;
    line-height: 1.4;
}

.pm-speaker-map-card .pm-voice-gender-toggle {
    width: auto;
    min-width: 176px;
    padding: 3px;
    border-radius: 999px;
    background: #f6f8fb;
}

.pm-speaker-map-card .pm-voice-toggle {
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 800;
}

.pm-speaker-map-card .pm-voice-toggle__icon {
    margin-right: 4px;
    font-size: 13px;
}

.pm-speaker-map-card__select-shell {
    display: grid;
    gap: 6px;
}

.pm-speaker-map-card__select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    background: #fff;
    color: #1d2327;
    font-size: 13px;
    font-weight: 600;
}

.pm-speaker-map-card__select:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.12);
    outline: none;
}

.pm-speaker-map-card__select-helper {
    color: #646970;
    font-size: 11px;
    line-height: 1.45;
}

.pm-speaker-map-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px 12px;
}

.pm-speaker-map-card__selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #dcdcde;
    background: #f6f8fb;
    color: #50575e;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.pm-speaker-map-card__selection-chip strong {
    color: #1d2327;
}

.pm-speaker-map-card__selection-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2271b1;
}

.pm-validation-group {
    display: grid;
    gap: 8px;
}

.pm-validation-message {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.pm-validation-message.is-error {
    background: #fff1f0;
    border-color: #f0b3b3;
    color: #8a2424;
}

.pm-validation-message.is-warning {
    background: #fff8e5;
    border-color: #ecd38b;
    color: #8a6400;
}

.pm-generated-summary {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1d2327;
}

.pm-sidebar-shell {
    display: grid;
    gap: 12px;
}

.pm-workflow-sidebar {
    display: block;
}

.pm-sidebar-card {
    display: grid;
    gap: 12px;
}

.sidebar-head {
    padding: 12px 14px;
    border: 1px solid #d5dde6;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.sidebar-head h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

.sidebar-head p {
    margin: 0;
    color: #607082;
    font-size: 12px;
    line-height: 1.55;
}

.type-switch {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.type-chip {
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid #d5dde6;
    background: #fff;
    color: #475467;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.type-chip.active {
    background: #e7f1fb;
    border-color: #c9ddf0;
    color: #15558a;
}

.status-strip {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.status-pill {
    height: 42px;
    border-radius: 12px;
    border: 1px solid #d5dde6;
    background: #fff;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

.status-pill.done {
    background: #eef8f1;
    border-color: #cae5d2;
}

.status-pill.optional {
    background: #fbfdff;
    border-color: #dbe3ec;
    border-style: dashed;
}

.status-pill.current {
    background: #e7f1fb;
    border-color: #c9ddf0;
}

.status-pill.locked {
    background: #f3f5f8;
    border-color: #d8e0e8;
}

.status-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.status-pill.done .status-dot {
    background: #2f8f4e;
    color: #fff;
}

.status-pill.current .status-dot {
    background: #2271b1;
    color: #fff;
}

.status-pill.optional .status-dot {
    border: 2px dashed #aab7c6;
    background: #fff;
    color: #a0afbf;
}

.status-pill.locked .status-dot {
    width: 18px;
    height: 18px;
    background: transparent;
    color: #93a2b2;
}

.status-summary {
    padding: 2px 2px 6px;
    display: grid;
    gap: 4px;
}

.status-summary--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 0 2px 4px;
}

.status-summary .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4b5a68;
    font-weight: 800;
}

.status-summary .value {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: #1f2937;
}

.status-summary--inline .label {
    margin: 0;
}

.status-summary--inline .value {
    margin: 0;
}

.step-stack {
    padding: 0;
    display: grid;
    gap: 8px;
}

.step-item {
    border: 1px solid #d5dde6;
    border-radius: 14px;
    padding: 10px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    background: #fff;
    position: relative;
}

.pm-sidebar-step-card {
    cursor: pointer;
}

.pm-sidebar-step-card:hover {
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

.pm-sidebar-step-card:focus-visible {
    outline: 3px solid rgba(34, 113, 177, 0.22);
    outline-offset: 2px;
}

.step-item.done {
    background: #eef8f1;
    border-color: #cae5d2;
}

.step-item.optional {
    background: #fbfcfe;
    border-style: dashed;
}

.step-item.current {
    background: #e7f1fb;
    border-color: #c9ddf0;
}

.step-item.locked {
    background: #f4f7fa;
    color: #6f7f91;
}

.step-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    margin-top: 1px;
}

.step-item.done .step-icon {
    background: #2f8f4e;
    color: #fff;
}

.step-item.optional .step-icon {
    background: #fff;
    color: #a5b2c2;
    border: 2px dashed #aab7c6;
}

.step-item.current .step-icon {
    background: #2271b1;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(34, 113, 177, 0.10);
}

.step-item.locked .step-icon {
    background: #eef2f6;
    color: #98a4b2;
    border: 1px solid #d4dce5;
}

.step-title {
    font-size: 14px;
    font-weight: 800;
    margin: 1px 0 4px;
    color: #1f2937;
}

.step-sub {
    font-size: 11px;
    color: #607082;
    line-height: 1.45;
}

.step-item.current .step-sub {
    color: #35597e;
}

.pm-sidebar-create-voice-card {
    align-items: start;
}

.pm-sidebar-create-voice-card .step-sub {
    margin-bottom: 8px;
}

.pm-sidebar-voice-summary {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: #1f2937;
    font-weight: 700;
}

.pm-sidebar-voice-summary__value {
    color: #1f2937;
    font-weight: 700;
    text-align: left;
    word-break: break-word;
}

.pm-sidebar-voice-preview {
    margin-top: 8px;
    border: 1px solid #cae5d2;
    border-radius: 12px;
    background: #eef8f1;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.pm-sidebar-voice-preview__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #607082;
}

.pm-sidebar-voice-preview__head strong {
    color: #1f2937;
}

.pm-sidebar-voice-preview__player {
    width: 100%;
}

.pm-sidebar-voice-preview__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pm-sidebar-voice-preview__link,
.pm-sidebar-voice-preview__button {
    min-height: 30px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.pm-sidebar-voice-preview__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #cae5d2;
    background: #fff;
    color: #2f8f4e;
    text-decoration: none;
}

.pm-sidebar-voice-preview__actions {
    display: none;
}

.pm-sidebar-create-voice-card.has-audio {
    background: #eef8f1;
    border-color: #cae5d2;
}

.pm-sidebar-create-voice-card.has-audio .pm-sidebar-voice-summary {
    color: #1f2937;
}

.pm-sidebar-create-voice-card.has-audio .pm-sidebar-voice-summary__value {
    color: #1f2937;
}

.pm-sidebar-step-action {
    min-height: 30px;
    align-self: center;
    justify-self: end;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #2271b1;
    background: #2271b1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.pm-sidebar-step-action:hover {
    background: #1b5f97;
    border-color: #1b5f97;
}

.pm-sidebar-voice-card {
    margin: 0;
    border: 1px solid #d5dde6;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.pm-sidebar-voice-card--selectable {
    cursor: pointer;
}

.pm-sidebar-voice-card--selectable:hover {
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.pm-sidebar-voice-card--selectable:focus-visible {
    outline: 3px solid rgba(34, 113, 177, 0.22);
    outline-offset: 2px;
}

.pm-sidebar-voice-card__head {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(213, 221, 230, 0.84);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.pm-sidebar-voice-card__head strong {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pm-sidebar-voice-card__head span {
    font-size: 11px;
    color: #607082;
}

.pm-sidebar-voice-card__body {
    padding: 10px 12px 12px;
    display: grid;
    gap: 8px;
}

.pm-sidebar-voice-card__row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    align-items: center;
}

.pm-sidebar-voice-card__row .label {
    color: #526070;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.pm-sidebar-voice-card__row .value {
    font-weight: 700;
}

.pm-sidebar-voice-card__picker {
    border: 1px solid #d5dde6;
    border-radius: 12px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #fff, #fbfcfe);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #3f4a57;
}

.pm-sidebar-voice-card__picker .left {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.pm-sidebar-voice-card__picker .left .gender-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.pm-sidebar-voice-card__picker .left .gender-chip.male {
    background: #e8f1fb;
    color: #205f9d;
}

.pm-sidebar-voice-card__picker .left .gender-chip.female {
    background: #f8ecfb;
    color: #8b4fb0;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid #d5dde6;
    background: #fff;
    font-size: 10px;
    font-weight: 700;
    color: #475467;
    display: inline-flex;
    align-items: center;
}

.chip.done {
    background: #eef8f1;
    border-color: #cae5d2;
}

.chip.optional {
    background: #fbfdff;
    border-style: dashed;
}

.chip.current {
    background: #e7f1fb;
    border-color: #c9ddf0;
}

.chip.locked {
    background: #f3f5f8;
    border-color: #d8e0e8;
}

.voice-card {
    margin: 0;
    border: 1px solid #d5dde6;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.voice-card-head {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(213, 221, 230, 0.84);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.voice-card-head strong {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.voice-card-head span {
    font-size: 11px;
    color: #607082;
}

.voice-body {
    padding: 10px 12px 12px;
    display: grid;
    gap: 8px;
}

.voice-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    align-items: center;
}

.voice-row .label {
    color: #526070;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.voice-row .value {
    font-weight: 700;
}

.voice-picker {
    border: 1px solid #d5dde6;
    border-radius: 12px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #fff, #fbfcfe);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #3f4a57;
}

.voice-picker .left {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.gender-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.gender-chip.male {
    background: #e8f1fb;
    color: #205f9d;
}

.gender-chip.female {
    background: #f8ecfb;
    color: #8b4fb0;
}

.generation-card {
    margin: 0;
    border: 1px solid #d5dde6;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.generation-card .head {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(213, 221, 230, 0.84);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.generation-card .head strong {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.generation-card .head span {
    color: #607082;
    font-size: 11px;
}

.generation-card .body {
    padding: 10px 12px 12px;
    display: grid;
    gap: 8px;
}

.generation-pill {
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid #d5dde6;
    background: #f7fafc;
    color: #455468;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.generation-bar {
    height: 10px;
    border-radius: 999px;
    background: #e8edf3;
    overflow: hidden;
}

.generation-bar > span {
    display: block;
    width: 38%;
    height: 100%;
    background: linear-gradient(90deg, #0f6b95, #0f8dc4);
}

.footer-note {
    padding: 10px 12px 12px;
    border: 1px solid #d5dde6;
    border-radius: 14px;
    background: #fbfcfe;
    color: #607082;
    font-size: 12px;
    line-height: 1.55;
}

.pm-sidebar-audio-result {
    border: 1px solid #d5dde6;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.pm-sidebar-audio-result__head {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(213, 221, 230, 0.84);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.pm-sidebar-audio-result__head strong {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pm-sidebar-audio-result__head span {
    font-size: 11px;
    color: #607082;
}

.pm-sidebar-audio-result__body {
    padding: 10px 12px 12px;
    display: grid;
    gap: 8px;
}

.pm-sidebar-audio-result__summary {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.45;
}

.pm-sidebar-audio-result__player {
    width: 100%;
}

.pm-sidebar-audio-result__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pm-sidebar-audio-result__link,
.pm-sidebar-audio-result__button {
    min-height: 30px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.pm-sidebar-audio-result__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #cfd8e2;
    background: #fff;
    color: #475467;
    text-decoration: none;
}

.pm-sidebar-audio-result__button.components-button {
    padding-left: 12px;
    padding-right: 12px;
}

.block-editor-block-list__block.pm-speaker-block {
    position: relative;
    margin-top: 10px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(34, 113, 177, 0.12);
    overflow: visible;
}

.block-editor-block-list__block.pm-speaker-block .pm-speaker-block__surface {
    border-radius: 12px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.block-editor-block-list__block.pm-speaker-block .block-editor-block-list__block-edit,
.block-editor-block-list__block.pm-speaker-block .block-editor-block-list__layout,
.block-editor-block-list__block.pm-speaker-block .block-editor-rich-text__editable,
.block-editor-block-list__block.pm-speaker-block .wp-block-paragraph {
    border-radius: 12px;
}

.block-editor-block-list__block.pm-speaker-block.pm-speaker-block--speaker-0 {
    background: rgba(34, 113, 177, 0.08);
}

.block-editor-block-list__block.pm-speaker-block .pm-speaker-block__surface--speaker-0 {
    background: rgba(34, 113, 177, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(34, 113, 177, 0.14);
}

.block-editor-block-list__block.pm-speaker-block.pm-speaker-block--speaker-1 {
    background: rgba(0, 163, 42, 0.08);
}

.block-editor-block-list__block.pm-speaker-block .pm-speaker-block__surface--speaker-1 {
    background: rgba(0, 163, 42, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 163, 42, 0.14);
}

.block-editor-block-list__block.pm-speaker-block.pm-speaker-block--speaker-2 {
    background: rgba(235, 160, 0, 0.1);
}

.block-editor-block-list__block.pm-speaker-block .pm-speaker-block__surface--speaker-2 {
    background: rgba(235, 160, 0, 0.1) !important;
    box-shadow: inset 0 0 0 1px rgba(235, 160, 0, 0.16);
}


.pm-step-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e1e1e;
}

.pm-step-help {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #646970;
}

.pm-voice-action-bar {
    position: sticky;
    bottom: 0;
    margin-top: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #c3c4c7;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.05);
}

.pm-voice-action-note {
    font-size: 12px;
    color: #646970;
    margin-bottom: 6px;
}

.pm-sticky-audio-result {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e4e7;
}

.pm-sticky-audio-player {
    width: 100%;
}

.pm-sticky-audio-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}

.pm-secondary-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #2271b1;
    border-radius: 3px;
    color: #2271b1;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.pm-secondary-action-link:hover {
    background: #f0f6fb;
    color: #135e96;
}

.pm-embed-audio-btn.components-button {
    min-height: 36px !important;
}

@media (max-width: 782px) {
    .pm-generation-popup {
        right: 12px;
        bottom: 12px;
        width: min(280px, calc(100vw - 24px));
    }

    .pm-generation-popup__phases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {
    .pm-voice-list.pm-voice-list-grid {
        grid-template-columns: minmax(0, 1fr);
        max-height: 280px;
    }
}

@keyframes pm-preview-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 163, 42, 0.5);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(0, 163, 42, 0);
    }
}

.pm-now-playing {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f0f6fb;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 15px;
    font-size: 12px;
    color: #2271b1;
}

.pm-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 16px;
}

.pm-wave-bar {
    width: 2px;
    background: #2271b1;
    border-radius: 1px;
    animation: pm-wave 0.8s ease-in-out infinite;
}

.pm-wave-bar:nth-child(1) {
    height: 4px;
    animation-delay: 0s;
}

.pm-wave-bar:nth-child(2) {
    height: 10px;
    animation-delay: 0.1s;
}

.pm-wave-bar:nth-child(3) {
    height: 16px;
    animation-delay: 0.2s;
}

.pm-wave-bar:nth-child(4) {
    height: 8px;
    animation-delay: 0.3s;
}

.pm-wave-bar:nth-child(5) {
    height: 12px;
    animation-delay: 0.4s;
}

@keyframes pm-wave {

    0%,
    100% {
        transform: scaleY(0.4);
    }

    50% {
        transform: scaleY(1);
    }
}

/* ========================================
   COMPACT SIDEBAR UI (Space Optimization)
   ======================================== */

/* Reduce vertical padding in Podcaster Panels */
.edit-post-settings-panel__podcaster-panel .components-panel__body {
    padding: 12px 16px !important;
}

.edit-post-settings-panel__podcaster-panel .components-panel__row {
    margin-bottom: 8px !important;
    min-height: 0 !important;
}

/* More compact labels */
.edit-post-settings-panel__podcaster-panel .components-base-control__label {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: #646970 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Tighten select control height */
.edit-post-settings-panel__podcaster-panel select.components-select-control__input {
    height: 32px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
}

/* Tighten buttons */
.edit-post-settings-panel__podcaster-panel .components-button {
    height: 32px !important;
    font-size: 13px !important;
}

/* Compact Smart Tone Section */
.pm-smart-tone-section {
    padding: 4px 0;
}

.pm-smart-tone-section .components-base-control {
    margin-bottom: 8px !important;
}

/* Compact separators */
.edit-post-settings-panel__podcaster-panel hr {
    margin: 10px 0 !important;
    opacity: 0.5;
}

/* Provider badge optimization */
.edit-post-settings-panel__podcaster-panel .components-panel__body>div:first-child[style*="font-size: 10px"] {
    margin-bottom: 6px !important;
}

/* Voice List Optimization */
.pm-voice-list {
    margin-top: 6px !important;
}

.pm-accordion-header {
    padding: 8px 12px !important;
    font-size: 12px !important;
}

.pm-voice-row {
    padding: 4px 10px !important;
}

.pm-voice-name {
    font-size: 12px !important;
}

.pm-voice-char {
    font-size: 10px !important;
}

.pm-play-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
}

.pm-now-playing {
    padding: 6px 10px !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
}

/* ========================================
   CONTEXT MENU & EMOTION TAG UI
   ======================================== */

.pm-context-menu-popover {
    z-index: 100000 !important;
}

.pm-context-menu {
    border: 1px solid #ccc !important;
    background: #fff !important;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden;
}

.pm-context-menu .components-button {
    text-align: left !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    justify-content: flex-start !important;
    height: auto !important;
}

.pm-context-menu .components-button:hover {
    background: #f0f0f0 !important;
}

/* Specific styling for the toolbar button to make it easy to find */
.components-rich-text__toolbar button[aria-label="Emotion Tags"],
.components-rich-text__toolbar button[aria-label="Insert Emotion Tag"] {
    color: #2271b1 !important;
}

.pm-context-summary-card {
    margin: 12px 0 10px;
    padding: 10px 12px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.pm-context-summary-card__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #646970;
    margin-bottom: 4px;
}

.pm-context-summary-card__value {
    font-size: 12px;
    line-height: 1.45;
    color: #1d2327;
    font-weight: 600;
    word-break: break-word;
}

.pm-context-summary-card__row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin-bottom: 2px;
}

.pm-context-summary-card__row:last-child {
    margin-bottom: 0;
}

.pm-context-summary-card__row-label {
    min-width: 86px;
    color: #646970;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pm-context-summary-card__row-value {
    color: #1d2327;
    font-size: 12px;
    font-weight: 600;
}

.pm-context-summary-card__actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.pm-context-summary-card__button.button {
    min-height: 30px;
    padding: 0 10px;
}

.pm-context-modal .components-modal__frame {
    width: min(960px, calc(100vw - 32px));
    max-width: 960px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.pm-context-modal .components-modal__backdrop {
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(2px);
}

.pm-context-modal .components-modal__header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid #d5dde6;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.pm-context-modal .components-modal__content {
    padding: 0;
    background: #f6f8fb;
}

.pm-smart-tone-modal .components-modal__frame {
    width: min(460px, calc(100vw - 32px));
    max-width: 460px;
}

.pm-smart-tone-modal .components-modal__content {
    padding: 0;
}

.pm-smart-tone-modal .pm-context-modal__body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px 18px;
}

.pm-smart-tone-modal .pm-context-modal__footer {
    padding-top: 0;
}

.pm-voice-modal .components-modal__frame {
    width: min(980px, calc(100vw - 32px));
    max-width: 980px;
}

.pm-voice-modal .components-modal__content {
    padding: 0;
}

.pm-voice-modal .pm-context-modal__body {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px 16px;
    justify-items: start;
}

.pm-voice-modal .pm-single-speaker-workspace,
.pm-voice-modal .pm-multi-speaker-workspace {
    width: 100%;
    max-width: 100%;
    justify-self: start;
}

.pm-voice-modal .pm-single-speaker-workspace {
    max-width: 520px;
}

.pm-voice-modal .pm-speaker-map-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pm-voice-modal .pm-speaker-map-card {
    min-width: 0;
}

.pm-voice-modal .pm-speaker-map-card__header {
    padding: 10px 12px 8px;
}

.pm-voice-modal .pm-speaker-map-card__body {
    gap: 8px;
    padding: 10px 12px 10px;
}

.pm-voice-modal .pm-speaker-map-card__footer {
    padding: 0 12px 10px;
}

.pm-voice-modal .pm-multi-speaker-intro {
    display: none;
}

.pm-voice-modal__tts-panel {
    margin-top: 2px;
    width: 100%;
    justify-self: start;
}

.pm-voice-modal__tts-panel .components-base-control__label {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
}

.pm-context-modal__body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 14px;
    padding: 18px 20px 20px;
    background:
        radial-gradient(circle at top left, rgba(34, 113, 177, 0.08), transparent 24%),
        linear-gradient(180deg, #f8fbfe 0%, #f3f6fa 100%);
}

.pm-context-modal__hero {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #d5dde6;
    border-radius: 18px;
    background: rgba(255,255,255,0.9);
}

.pm-context-modal__hero-title {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

.pm-context-modal__hero-text {
    margin: 0;
    color: #607082;
    font-size: 12px;
    line-height: 1.55;
}

.pm-context-modal__hero-badge {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e7f1fb;
    color: #15558a;
    border: 1px solid #c7dcf0;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.pm-context-modal__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pm-context-modal__section-label {
    font-size: 11px;
    font-weight: 700;
    color: #1d2327;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pm-context-modal__button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pm-context-modal__button.button {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
}

.pm-context-modal__button.is-active {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

.pm-context-modal__button.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pm-context-modal__footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    padding-top: 4px;
    flex-wrap: wrap;
}

.pm-context-modal__footer-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.pm-context-modal__panel {
    border: 1px solid #d5dde6;
    border-radius: 18px;
    background: rgba(255,255,255,0.94);
    overflow: hidden;
}

.pm-context-modal__panel-head {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(213, 221, 230, 0.84);
    background: linear-gradient(180deg, #fff, #fafcff);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.pm-context-modal__panel-head strong {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pm-context-modal__panel-head span {
    font-size: 11px;
    color: #607082;
}

.pm-context-modal__panel-body {
    padding: 12px 14px 14px;
}

@media (max-width: 782px) {
    .pm-context-modal .components-modal__frame {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        margin: 10px;
    }

    .pm-context-modal .components-modal__content {
        padding: 16px;
    }

    .pm-context-modal__body {
        grid-template-columns: 1fr;
        padding: 14px;
    }
}
