/* Audio Recording Animation and Views */
.record-animation {
    margin-top: 0;
    text-align: center;
}

.record-animation h1 {
    color: #00ff66; /* Neon mint matching other components */
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 3vw, 30px);
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 0.2em #00ff66, 0 0 0.4em #00ff66;
}

.record-animation h2 {
    color: #ff0000;
    font-size: 30px;
    font-weight: bolder;
    letter-spacing: 10px;
}

.record-animation h1 span {
    animation: glow 1s infinite;
}

.record-animation h2 {
    animation: glow2 0.5s ease-in-out infinite;
}

@keyframes glow {
    0% {
        color: #ff66cc; /* Neon pink glow phase */
        text-shadow: 0 0 0.2em #ff66cc, 0 0 0.5em #ff66cc, 0 0 1em #ff66cc;
    }

    50%, 100% {
        color: #00ff66; /* Neon mint glow phase */
        text-shadow: 0 0 0.2em #00ff66, 0 0 0.5em #00ff66, 0 0 1em #00ff66;
    }
}

@keyframes glow2 {
    0%,
    100% {
        color: #ff0000;
        text-shadow: 0 0 2px #000000;
    }

    50% {
        color: #ff0000;
        text-shadow: 0 0 4px #000000;
    }
}

@keyframes icon-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Audio Control Button Icons */
.play-button i {
    background-image: url(../img/play-circle-outline.svg);
}

.pause-button i {
    background-image: url(../img/pause-circle-outline.svg);
}

.stop-button i {
    background-image: url(../img/stop-circle-outline.svg);
}

.download-button i {
    background-image: url(../img/arrow-down-circle-outline.svg);
}

.import-button i {
    background-image: url(../img/arrow-up-circle-outline.svg);
}

.record-button i {
    background-image: url(../img/mic-circle-outline.svg);
}

.stop-record-button i {
    background-image: url(../img/mic-off-circle-outline.svg);
}

.import-button, .record-button {
    display: none;
}

/* Circular Buttons Common Layout */
.btn-circle i {
    display: inline-block;
    height: clamp(35px, 13vw, 90px);
    width: clamp(35px, 13vw, 90px);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: clamp(1px, 0.3vw, 4px);
    margin-bottom: clamp(1px, 0.3vw, 4px);
    flex-shrink: 0;
}

.btn-circle-text,
.btn-circle span,
.play-button span,
.pause-button span,
.stop-button span,
.download-button span,
.import-button span,
.record-button span,
.stop-record-button span {
    text-align: center;
    text-transform: uppercase;
    margin-top: auto;
    margin-bottom: clamp(6px, 1.5vw, 12px);
    font-size: clamp(8.5px, 1.6vw, 14px);
    font-weight: bolder;
    line-height: 120%;
    display: inline-flex;
    padding: 0 4px;
    box-sizing: border-box;
    justify-content: center;
}

button.btn.btn-circle {
    width: clamp(52px, 16vw, 110px);
    height: clamp(71px, 21.8vw, 150px);
    padding: 0px 0px;
    border: none; /* No border on parent itself! */
    border-radius: 12px;
    margin: 0px clamp(3px, 1.2vw, 10px) 15px clamp(3px, 1.2vw, 10px);
    background: transparent !important; /* Base button is transparent */
    position: relative;
    z-index: 1;
    color: #888;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Pseudo-element background rendered behind z-index 1, but inset slightly from z-index 2 border to prevent bleed */
button.btn.btn-circle::before {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 1.5px;
    right: 1.5px;
    bottom: 1.5px;
    background: #0d0d11;
    border-radius: 10px;
    z-index: -1;
    transition: background 0.3s ease;
}

/* Pulsing icon for stop-record-button */
button.btn.stop-record-button i {
    animation: icon-pulse 0.5s ease-in-out infinite !important;
}

/* Pulsing icon for pause-button */
button.btn.pause-button i {
    animation: icon-pulse 0.5s ease-in-out infinite !important;
}

/* Pseudo-element border rendered ON TOP of the background to prevent any scaling gaps or bleed */
button.btn.btn-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: clamp(2px, 0.5vw, 4px) solid #222;
    border-radius: 12px;
    z-index: 2; /* Rendered on top of parent background! */
    pointer-events: none; /* Mouse clicks pass through directly */
    transition: border-color 0.3s ease;
}

/* Keep inner icons and texts on top of the border pseudo-element */
.btn-circle i,
.btn-circle span {
    position: relative;
    z-index: 3;
}

/* 1. Import Button - Neon Cyan */
button.btn.import-button,
button.btn.import-button:focus,
button.btn.import-button:active {
    color: #00e5ff;
}
button.btn.import-button::after {
    border-color: #007799;
}
button.btn.import-button i {
    filter: invert(1) drop-shadow(0 0 3px #00e5ff);
}

/* 2. Download Button - Neon Violet */
button.btn.download-button,
button.btn.download-button:focus,
button.btn.download-button:active {
    color: #d633ff;
}
button.btn.download-button::after {
    border-color: #9922dd;
}
button.btn.download-button i {
    filter: invert(1) drop-shadow(0 0 3px #d633ff);
}

/* 3. Record Button & Stop Record Button - Neon Pink */
button.btn.record-button,
button.btn.stop-record-button,
button.btn.record-button:focus,
button.btn.record-button:active,
button.btn.stop-record-button:focus,
button.btn.stop-record-button:active {
    color: #ff33bb;
}
button.btn.record-button::after {
    border-color: #dd3388;
}
button.btn.stop-record-button::after {
    border-color: #dd3388;
}
button.btn.record-button i,
button.btn.stop-record-button i {
    filter: invert(1) drop-shadow(0 0 3px #ff33bb);
}

/* 4. Play Button - Neon Green */
button.btn.play-button,
button.btn.play-button:focus,
button.btn.play-button:active {
    color: #39ff14;
}
button.btn.play-button::after {
    border-color: #009933;
}
button.btn.play-button i {
    filter: invert(1) drop-shadow(0 0 3px #39ff14);
}

/* 5. Pause Button - Neon Yellow */
button.btn.pause-button,
button.btn.pause-button:focus,
button.btn.pause-button:active {
    color: #ffff33;
}
button.btn.pause-button::after {
    border-color: #bbaa00;
}
button.btn.pause-button i {
    filter: invert(1) drop-shadow(0 0 3px #ffff33);
}

/* 6. Stop Button - Neon Coral/Red */
button.btn.stop-button,
button.btn.stop-button:focus,
button.btn.stop-button:active {
    color: #ff0000;
}
button.btn.stop-button::after {
    border-color: #ff3333;
}
button.btn.stop-button i {
    filter: invert(1) drop-shadow(0 0 3px #ff0000);
}

/* Protect mobile touchscreen users from sticky hover effects */
@media (hover: hover) {
    .has-hover button.btn.import-button:hover::after {
        border-color: #00e5ff;
    }
    .has-hover button.btn.import-button:hover {
        color: #ffffff;
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.4), inset 0 0 4px rgba(0, 229, 255, 0.15);
        filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.3));
    }
    .has-hover button.btn.import-button:hover i {
        filter: invert(1) drop-shadow(0 0 6px #00e5ff);
    }

    .has-hover button.btn.download-button:hover::after {
        border-color: #d633ff;
    }
    .has-hover button.btn.download-button:hover {
        color: #ffffff;
        box-shadow: 0 0 12px rgba(214, 51, 255, 0.4), inset 0 0 4px rgba(214, 51, 255, 0.15);
        filter: drop-shadow(0 0 3px rgba(214, 51, 255, 0.3));
    }
    .has-hover button.btn.download-button:hover i {
        filter: invert(1) drop-shadow(0 0 6px #d633ff);
    }

    .has-hover button.btn.record-button:hover::after,
    .has-hover button.btn.stop-record-button:hover::after {
        border-color: #ff33bb;
    }
    .has-hover button.btn.record-button:hover,
    .has-hover button.btn.stop-record-button:hover {
        color: #ffffff;
        box-shadow: 0 0 12px rgba(255, 51, 187, 0.4), inset 0 0 4px rgba(255, 51, 187, 0.15);
        filter: drop-shadow(0 0 3px rgba(255, 51, 187, 0.3));
    }
    .has-hover button.btn.record-button:hover i,
    .has-hover button.btn.stop-record-button:hover i {
        filter: invert(1) drop-shadow(0 0 6px #ff33bb);
    }

    .has-hover button.btn.play-button:hover::after {
        border-color: #39ff14;
    }
    .has-hover button.btn.play-button:hover {
        color: #ffffff;
        box-shadow: 0 0 12px rgba(57, 255, 20, 0.4), inset 0 0 4px rgba(57, 255, 20, 0.15);
        filter: drop-shadow(0 0 3px rgba(57, 255, 20, 0.3));
    }
    .has-hover button.btn.play-button:hover i {
        filter: invert(1) drop-shadow(0 0 6px #39ff14);
    }

    .has-hover button.btn.pause-button:hover::after {
        border-color: #ffff33;
    }
    .has-hover button.btn.pause-button:hover {
        color: #ffffff;
        box-shadow: 0 0 12px rgba(255, 255, 51, 0.4), inset 0 0 4px rgba(255, 255, 51, 0.15);
        filter: drop-shadow(0 0 3px rgba(255, 255, 51, 0.3));
    }
    .has-hover button.btn.pause-button:hover i {
        filter: invert(1) drop-shadow(0 0 6px #ffff33);
    }

    .has-hover button.btn.stop-button:hover::after {
        border-color: #ff0000;
    }
    .has-hover button.btn.stop-button:hover {
        color: #ffffff;
        box-shadow: 0 0 12px rgba(255, 0, 0, 0.4), inset 0 0 4px rgba(255, 0, 0, 0.15);
        filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.3));
    }
    .has-hover button.btn.stop-button:hover i {
        filter: invert(1) drop-shadow(0 0 6px #ff0000);
    }

    .has-hover button.btn.btn-circle:hover {
        transform: translateY(-3px) scale(1.03);
    }
}

/* Active clicks and focus override (prevents white backgrounds from Bootstrap/browsers) */
button.btn.btn-circle:active,
button.btn.btn-circle:focus {
    background: transparent !important;
    outline: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

button.btn.btn-circle:active {
    transform: translateY(-2px) scale(1.1) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6) !important;
    filter: none !important;
}

/* Ensure background pseudo-element behaves during focus and active states */
button.btn.btn-circle:active::before,
button.btn.btn-circle:focus::before {
    background: #0d0d11 !important;
}

/* Disabled styling for dark UI */
button.btn.btn-circle:disabled {
    border-color: #222 !important;
    color: #444 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    cursor: not-allowed !important;
    opacity: 0.35;
}

button.btn.btn-circle:disabled::before {
    background: #08080a !important;
}

button.btn.btn-circle:disabled i {
    filter: invert(0.3) !important;
}

.input-buttons {
    margin-top: 20px; /* Comfortable spacing from the subtitle above */
}

.myactive {
    /*  Making button bigger on hover  */
    transform: scale(1.1)
}

.audio-panel-container {
    max-width: 1200px;
    margin: 5px auto 15px auto; /* Centered automatically on wide screens */
    width: calc(100% - 20px); /* Leaves a sleek, smaller 10px margin on both sides on smaller screens */
    text-align: center; /* Center-align the toggle-label titles beautifully */
}

.waveform,
.frequency-visualizer {
    padding: 0px;
    margin: 0px; /* Reset margins as container handles width, margins, and centering */
    width: 100%; /* Fill container fully */
    height: clamp(100px, 12vw, 180px); /* Responsive: wider viewport = taller, narrower = shorter */
    border: 2px solid rgba(0, 229, 255, 0.35); /* Neon cyan glass border */
    border-radius: 12px; /* Smoother, modern rounded corners */

    /* Neon cyan glassmorphism: Translucent cyan overlay, rich dark gloss, and blurred backdrop context */
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, rgba(0, 229, 255, 0.02) 100%), rgba(8, 9, 15, 0.65) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.5); /* Neon cyan glow & shadow depth */
    overflow: hidden; /* Clips inside canvas/content perfectly to the rounded corners */
}

.waveform {
    touch-action: pan-y;
}

/* Force all buttons inside waveform-and-controls to use same styling */
#waveform-and-controls button,
#waveform-and-controls .btn-circle {
    width: 110px;
    height: 150px;
    padding: 0px 0px;
    border: 2px solid #333;
    border-radius: 12px;
    margin: 0px 10px 15px 10px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Force text alignment for buttons inside waveform-and-controls */
#waveform-and-controls button span,
#waveform-and-controls .btn-circle span {
    text-align: center;
    justify-content: center;
}

/* Import Popover Light Neon Theme - stands out against dark page */
.popover {
    background-color: #e0e3e7 !important;
    border: 2px solid #00e5ff !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
    max-width: 320px !important;
}

.popover .popover-header {
    background-color: #d0d4d9 !important;
    color: #111111 !important;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #00e5ff !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    padding: 12px 16px;
}

.popover .popover-body {
    color: #111111 !important;
    padding: 16px;
}

.popover .popover-arrow::before {
    border-top-color: #e0e3e7 !important;
}

.popover .popover-arrow::after {
    border-top-color: #00e5ff !important;
}

/* Import dialog slider value - matches recording timer font style */
#import-slider-value,
[id^="file-import-slider-value"] {
    margin: 15px auto 0 auto;
    font-family: 'Rubik Mono One', monospace;
    font-weight: 400;
    font-size: clamp(16px, 2vw, 28px);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #007799;
    text-shadow: none;
    display: table;
    text-align: center;
    padding: 0.3em 0.8em;
    border-radius: 50vh;
    background-color: #e9ecef;
    border: 2px solid #007799;
}

/* Import dialog IMPORT button - neon glass style */
[id^="file-import-popover-button"] {
    margin-top: 20px !important;
    background: transparent !important;
    border: 2px solid #00994d !important;
    color: #00994d !important;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.9em;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 50vh !important;
    padding: 0.5em 1.5em !important;
    transition: all 0.3s ease;
    box-shadow: none;
}

[id^="file-import-popover-button"]:hover {
    background: rgba(0, 153, 77, 0.15) !important;
    box-shadow: 0 0 12px rgba(0, 153, 77, 0.4);
    color: #006633 !important;
}

/* Import dialog content wrapper */
[id^="file-import-popover-content"] {
    text-align: center;
}

/* Global unified style for small high-tech labels (e.g. RECORDED AUDIO, AUDIO VISUALIZER) */
.toggle-label {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(10px, 1.2vw, 13px) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.25) !important;
    margin-bottom: 1px !important;
    text-align: center !important;
    display: block !important;
}