/*
 * Kavi recording panel.
 *
 * Extracted from the P2P fork's client.css, where these rules were mixed in with the
 * rest of the page. Kept as its own stylesheet so upstream's CSS stays untouched.
 */

/* Post-finalize loading overlay */
.swal2-popup.podcast-finalize-loading-popup {
    background: #100e11 !important;
    border: 1px solid rgba(129, 105, 201, 0.25) !important;
    border-radius: 20px !important;
    max-width: 380px !important;
    padding: 32px 28px !important;
}

.podcast-finalize-loading {
    text-align: center;
}

.podcast-finalize-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border: 3px solid rgba(129, 105, 201, 0.2);
    border-top-color: #8169c9;
    border-radius: 50%;
    animation: podcast-finalize-spin 0.9s linear infinite;
}

@keyframes podcast-finalize-spin {
    to { transform: rotate(360deg); }
}

.podcast-finalize-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px;
}

.podcast-finalize-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
}

/* Post-recording delivery flow */
.swal2-popup.podcast-delivery-popup {
    background: #100e11 !important;
    border: 1px solid rgba(129, 105, 201, 0.2) !important;
    border-radius: 20px !important;
    max-width: 560px !important;
    width: 560px !important;
    padding: 32px 28px !important;
}

.podcast-delivery-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.podcast-delivery-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    margin: 0 0 24px;
}

.podcast-delivery-cards {
    display: flex;
    gap: 14px;
}

.podcast-delivery-card {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.podcast-delivery-card:hover {
    border-color: rgba(129, 105, 201, 0.6);
    background: rgba(129, 105, 201, 0.08);
}

.podcast-delivery-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.podcast-delivery-card-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.45;
}

.podcast-download-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.podcast-download-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: #e0e0e0;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.podcast-download-item:hover {
    background: rgba(129, 105, 201, 0.12);
    border-color: rgba(129, 105, 201, 0.4);
    color: #fff;
}

.podcast-download-item.downloaded {
    background: rgba(104, 82, 169, 0.12) !important;
    border-color: rgba(104, 82, 169, 0.45) !important;
    color: #d5cbec !important;
}

.podcast-download-item.downloaded i {
    color: #d5cbec !important;
}

.podcast-download-item i {
    color: #8169c9;
    width: 16px;
    text-align: center;
}

.podcast-session-code-box {
    margin-top: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px 16px;
}

.podcast-session-code-label {
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.4);
    margin: 0 0 6px;
    font-weight: 600;
}

.podcast-session-code-value {
    font-family: monospace;
    font-size: 0.82rem;
    color: #8169c9;
    word-break: break-all;
    margin: 0 0 8px;
}

.podcast-session-code-hint {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.45;
    margin: 0;
}

.podcast-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(129, 105, 201, 0.15);
    border: 1px solid rgba(129, 105, 201, 0.3);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: #8169c9;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 8px;
}

.podcast-copy-btn:hover { background: rgba(129, 105, 201, 0.28); }

.podcast-editor-note-textarea {
    width: 100%;
    min-height: 120px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 12px 14px;
    resize: vertical;
    box-sizing: border-box;
    margin: 12px 0 0;
}

.podcast-editor-note-textarea::placeholder { color: rgba(255,255,255,0.3); }

.podcast-editor-note-textarea:focus {
    outline: none;
    border-color: rgba(129, 105, 201, 0.5);
}

.podcast-section-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 20px 0;
}

.podcast-backup-toggle {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
}

.podcast-backup-toggle:hover { color: rgba(255,255,255,0.7); }

/* Pre-recording checklist popup */
.swal2-popup.podcast-preflight-popup {
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    max-width: 420px !important;
    width: 420px !important;
}

.swal2-popup.podcast-preflight-popup .swal2-confirm {
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 10px 28px !important;
    font-size: 0.95rem !important;
}

.swal2-popup.podcast-preflight-popup .swal2-cancel {
    border-radius: 999px !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    font-size: 0.95rem !important;
}

/* Faster fade-in for podcast, sharing, and settings panels */
.fadein-fast {
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.2s;
    -moz-animation-duration: 0.2s;
    animation-duration: 0.2s;
}

/*
z-index
6 theme custom picker
7 video avatar img
8 video nav bar 
8 peer name
9 speech bar
10 left buttons
11 whiteboard
12 chat emoji
13 chat peers private msg
14 chat room
14 caption
15 video iframe
16 settings
17 send File Div
18 room Emoji reaction
19 podcast panel
*/

/*--------------------------------------------------------------
# Podcast Recording
--------------------------------------------------------------*/

/* Recording indicator — top left, beside session timer */
.podcast-rec-indicator {
    position: fixed;
    top: 12px;
    left: 130px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}

.podcast-rec-indicator.hidden {
    display: none !important;
}

.podcast-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e53935;
    animation: podcastBlink 1.1s ease-in-out infinite;
    display: inline-block;
}

.podcast-rec-indicator.paused .podcast-rec-dot {
    background: #d5cbec;
    animation: none;
}

@keyframes podcastBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

@keyframes podcastBlinkSubtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* Podcast recording sidebar */
.podcast-panel.podcast-sidebar {
    z-index: 19;
    position: absolute;
    top: 0;
    right: 0;
    width: 27%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--body-bg);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.45s ease-in-out;
}

.podcast-panel.podcast-sidebar:not(.hidden) {
    transform: translateX(0);
}

.podcast-panel.podcast-sidebar.hidden {
    pointer-events: none;
}

.podcast-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: var(--border);
    flex-shrink: 0;
}

.podcast-panel-title {
    display: flex;
    align-items: center;
    gap: 8p x;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.podcast-panel-title i {
    color: #a493d8;
    font-size: 1.1rem;
}

.podcast-panel-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 5px;
    transition: background 0.2s;
}

.podcast-panel-close:hover {
    background: var(--select-bg);
}

.podcast-panel-main {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Subsections: almost full width, border radius, slightly lighter background */
.podcast-subsection {
    width: 92%;
    margin-left: 1%;
    margin-right: 3%;
    padding: 2% 2%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Sections keep their height and the panel scrolls; shrinking them made the upload
       messages spill over the sections below on a phone. */
    flex-shrink: 0;
}

.podcast-subsection-upload-health {
    min-height: 0;
}

/* Status row */
.podcast-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.podcast-status-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: none;
    letter-spacing: 0.06em;
}

.podcast-duration {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Pause countdown (shown when paused) */
.podcast-pause-countdown-row {
    margin-top: 12px;
    padding: 12px;
    background: rgba(213, 203, 236, 0.12);
    border-radius: 10px;
    border: 1px solid rgba(213, 203, 236, 0.3);
}

.podcast-pause-countdown-timer {
    font-size: 1.4rem;
    font-weight: 700;
    color: #d5cbec;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.podcast-pause-countdown-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin: 0;
}

/* Host control buttons */
.podcast-host-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.podcast-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 800px;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.podcast-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.podcast-btn:active { transform: scale(0.97); }

/* Individual podcast buttons are shown/hidden via inline style */

.podcast-btn-start  { background: #c62828; color: #fff; }

.podcast-btn-pause  { background: #d5cbec; color: #fff; }

.podcast-btn-resume { background: #5f4b9b; color: #fff; }

.podcast-btn-stop   { background: #463f49; color: #fff; }

.podcast-btn-marker { background: #8169c9; color: #fff; padding: 8px 12px; }

.podcast-btn-download { background: #7d61d1; color: #fff; width: 100%; justify-content: center; }

/* Marker input row */
.podcast-marker-row {
    display: flex;
    gap: 0px;
    align-items: center;
}

.podcast-marker-input {
    width: 100%;    
    padding: 8px 12px;
    margin-top: -10px;
    border-radius: 800px;
    border: var(--border);
    background: var(--select-bg);
    color: #fff;
    font-size: 0.85rem;
    outline: none;
}

.podcast-btn-marker {
    margin-top: -10px;
}

.podcast-marker-input:focus {
    border-color: #8169c9;
}

/* Upload progress */
.podcast-upload-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.podcast-upload-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #bbb;
    font-size: 0.82rem;
}

.podcast-progress-bar {
    height: 5px;
    border-radius: 4px;
    background: rgba(255,255,255,0.12);
    overflow: hidden;
}

.podcast-progress-fill {
    height: 100%;
    background: #8169c9;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.podcast-upload-warning {
    color: #d5cbec;
    font-size: 0.8rem;
    line-height: 1.4;
}

.podcast-upload-errors {
    margin: 0;
    padding-left: 18px;
    color: #ff5252;
    font-size: 0.8rem;
    line-height: 1.4;
}

.podcast-mic-bar-wrap {
    margin-top: 5px;
    margin-bottom: 2px;
    height: 3px;
    border-radius: 4px;
    background: rgba(255,255,255,0.12);
    overflow: hidden;
}

.podcast-mic-bar {
    height: 100%;
    background: #8169c9;
    opacity: 0.7;
    border-radius: 4px;
    transition: width 0.08s ease-out;
}

/* Fallback download */

/* Markers log */

.podcast-section-title {
    color: #aaa;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.podcast-markers-scroll-wrap {
    margin-top: -10px;
    max-height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(129, 105, 201, 0.6) transparent;
    border-radius: 8px;
}

.podcast-markers-scroll-wrap::-webkit-scrollbar {
    width: 8px;
}

.podcast-markers-scroll-wrap::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

.podcast-markers-scroll-wrap::-webkit-scrollbar-thumb {
    background: rgba(129, 105, 201, 0.6);
    border-radius: 4px;
}

.podcast-markers-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 105, 201, 0.8);
}

.podcast-markers-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.podcast-marker-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    font-size: 0.82rem;
    color: #ddd;
}

.podcast-marker-time {
    color: #cabee7;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
}

/* Health table */

.podcast-health-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    color: #ddd;
}

.podcast-health-table th {
    text-align: left;
    padding: 5px 6px;
    color: #888;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-weight: 600;
}

.podcast-health-table td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.podcast-health-status {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
}

/* Alignment report */

.podcast-alignment-text {
    font-size: 0.85rem;
    color: #ddd;
    padding: 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    line-height: 1.5;
}

/* Recording button — only the icon pulses when active */
#podcastRecordBtn.recording {
    color: inherit;
}

#podcastRecordBtn.recording::before {
    color: #e53935 !important;
    animation: podcastBlinkSubtle 1.5s ease-in-out infinite;
}

#podcastRecordBtn.paused {
    color: inherit;
}

#podcastRecordBtn.paused::before {
    color: #d5cbec !important;
    animation: none;
}