/**
 * EDITOR INTERFACE STYLES
 * ----------------------
 * Styles specific to the photo/video editing functionality
 * Refactored to use class-based visibility control
 */

/* Reset and base styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.app-container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Editor container */
.editor-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 1000;
    overflow: hidden;
}



/* Preview image/video - base layer for snapshot display */
.fullscreen-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover; /* This is the key change */
    transition: transform 0.3s ease;
}

/* Ensure video composite overlay stacking is correct */
#video-source {
    z-index: 1;  /* Video base layer */
}

#editor-preview {
    z-index: 1.2;  /* Composite overlay - above video (1), below theme canvas (1.5) */
}

/* Canvas stack positioned above the media element */
.canvas-stack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Above media but below UI elements */
    pointer-events: none; /* By default, let events pass through to media */
}

/* Theme canvas should be positioned between the media element and tool canvases */
#theme-canvas {
    z-index: 2; /* Between image (z-index: 1.2) and tool canvas (z-index: 3) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow interactions to pass through to layers below */
}

/* Tool Canvas for active editing */
#tool-canvas {
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* By default non-interactive */
}

/* Control Canvas for UI elements */
#control-canvas {
    z-index: 4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* By default non-interactive */
}

/* Only enable interactions when explicitly set */
#tool-canvas[style*="pointer-events: auto"],
#control-canvas[style*="pointer-events: auto"] {
    pointer-events: auto;
}

/* Fullscreen positioning utility */
.u-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ensure all canvas elements are full size */
.fullscreen-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Add transition effects for snapshot changes */
.snapshot-transition {
    transition: all 0.3s ease-in-out;
}

/* Add animation for new snapshots */
@keyframes snapshot-created {
    0% { opacity: 0.7; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.snapshot-new {
    animation: snapshot-created 0.3s ease-out;
}

/* ===================================================
   BUTTON VISIBILITY CLASSES
   =================================================== */

/* Visible button */
.btn-visible {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

/* Hidden button */
.btn-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: none !important;
}

/* Transitioning button - keeps display but prevents interaction */
.btn-transitioning {
    display: flex !important;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Selector visibility */
.selector-visible {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.selector-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: none !important;
}

/* Controls visibility */
.controls-visible {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.controls-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: none !important;
}

/* ===================================================
   BUTTON STYLES
   =================================================== */

#back-edit-btn {
    display: none; /* Hidden by default */
}

.back-btn {top: 20px; left: 20px;}

/* ===================================================
   CIRCULAR BUTTON BASE CLASS
   =================================================== */

/* Base circular button - 50px round buttons */
.btn-circular {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 0;
    touch-action: manipulation;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.3s ease;
}

.btn-circular:active {
    transform: scale(0.95);
}

.btn-circular:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Modifiers for positioning */
.btn-circular--fixed {
    position: fixed;
    z-index: 2010;
}

.btn-circular--absolute {
    position: absolute;
    z-index: 2010;
}

/* ===== FLOATING TOOL INDICATOR (January 2025) ===== */
/* Shows current brush/color at bottom-center while draw tool active */
/* REVERT: Remove this entire section if it causes styling issues */
.draw-indicator {
    position: fixed;
    bottom: 20px;  /* Same height as download button */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;  /* Same level as other editor buttons */
    width: 80px;    /* 2x modal icon size (~40px) */
    height: 80px;
    background: transparent;
    border: 3px solid white;
    border-radius: 50%;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.3s ease;
}

.draw-indicator:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.draw-indicator:active {
    transform: translateX(-50%) scale(0.95);
}

.draw-indicator i {
    font-size: 40px;  /* 2x modal icon size */
    /* Color set dynamically via JavaScript */
}
/* ===== END FLOATING TOOL INDICATOR ===== */

/* ===================================================
   SPECIFIC BUTTON OVERRIDES (Keep only unique properties)
   =================================================== */

/* Circle Action Button (back, confirm) - Keep only unique z-index */
.circle-action-btn {
    position: fixed;
    z-index: 1005;
}

/* Retake/Cancel button (trash can) - Keep only positioning */
.retake-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2010;
}

/* Pulse effect animation for buttons */
/* Pulse effect animation for buttons - soft white version */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(230, 230, 230, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(230, 230, 230, 0);
    }
}

.pulse-effect {
    animation: pulse 3s infinite;
}

/* Editor controls */
.editor-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;

    z-index: 2010; /* Increased z-index */
    display: flex;
    transition: opacity 0.3s ease;
}

/* Action button (save button) - Keep only unique blue color */
.action-btn {
    background: #0066cc;
}

.action-btn:hover {
    background-color: #0055aa;
}

/* Floating edit button (pencil icon) - Keep only positioning and active state */
.floating-edit-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2010;
}

.floating-edit-btn.active {
    background-color: rgba(0, 102, 204, 0.7);
}

/* ===================================================
   PILL BUTTON BASE CLASS
   =================================================== */

/* Base pill-shaped button */
.btn-pill {
    padding: 8px 14px;
    background: transparent;
    border: 2px solid white;
    color: white;
    font-size: 16px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-pill:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-pill.active,
.btn-pill.selected {
    background-color: white;
    color: #222;
    border-color: white;
}

/* Layout modifier for music tracks */
.btn-pill--track {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
}

/* ===================================================
   TABS STYLES
   =================================================== */

/* Common Modal Tab Styles - Replace current modal tab styles */

/* Tab navigation in modals - UPDATED COMMON STYLE */
.editor-modal .modal-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 8px 0;
}

/* Modal tabs inherit from .btn-pill - keep only unique padding */
.editor-modal .modal-tab {
    padding: 8px 10px;
}

/* Music modal specific tab spacing (to avoid trash can overlap) */
#music-modal .modal-tabs {
    padding-left: 65px;
    padding-right: 15px;
}

/* ===================================================
   TOOLBAR STYLES
   =================================================== */
/* Edit toolbar */
.edit-toolbar {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2010; /* Increased z-index */
    display: none;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.edit-toolbar.visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

/* Edit tool buttons inherit from .btn-circular - no additional styles needed */
.edit-tool-btn {
    /* All styles inherited from .btn-circular */
}

.edit-controls {
    position: fixed;
    bottom: 160px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    background: rgba(0, 0, 0, 0.8);
    padding: 15px;
    border-radius: 12px;
    width: 80vw;
    max-width: 400px;
    transition: opacity 0.3s ease;
}

/* Theme selector */
.theme-selector {
    position: fixed;
    bottom: 100px;
    left: 0;
    right: 0;
    z-index: 2010; /* Increased z-index */
    padding: 15px;
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    background: transparent;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-left: calc(50% - 24px);
    padding-right: calc(50% - 24px);
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.theme-selector::-webkit-scrollbar {
    display: none;
}

.theme-selector::before,
.theme-selector::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    opacity: 0;
    transition: opacity 0.3s ease;
}


.theme-selector.can-scroll-left::before {
    opacity: 1;
}

.theme-selector.can-scroll-right::after {
    opacity: 1;
}

.theme-option {
    cursor: default;
    flex: 0 0 auto;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    scroll-snap-align: center;
    scroll-snap-stop: normal;
}

.theme-thumbnail {
    width: 44px;
    height: 44px;
    background-size: cover;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.2s ease-out;
}

.theme-option.active .theme-thumbnail {
    transform: scale(1.2);
    border: 2px solid white;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.theme-thumbnail-no-theme {
    background-color: transparent !important; /* Ensure it's transparent */
    /* No border when not active, relying on .theme-thumbnail's transparent border */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Drop shadow */
    display: flex;
    align-items: center;
    justify-content: center;
    /* No ::before content */
}

.theme-option.active .theme-thumbnail-no-theme {
    transform: scale(1.2); /* Reverted scale for active state */
    border: 2px solid white; /* Solid white border when active */
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Saving indicator */
.saving-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    border-radius: 8px;
    z-index: 1500;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

/* Responsive styles for different screen sizes */
@media (max-width: 480px) {
    /* Small screens */


    .edit-toolbar {
        top: 16px;
        right: 16px;
        gap: 12px;
    }

    .theme-selector {
        bottom: 60px;
    }

    .edit-controls {
        bottom: 120px;
        max-width: 90vw;
    }
}

@media (min-width: 768px) {
    /* Larger screens */
    .btn-circular {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .action-btn {
        width: 60px;
        height: 60px;
    }

    .theme-selector {
        bottom: 120px;
    }
}

/* ===================================================
   MODAL STYLES - UNIVERSAL COMPONENTS
   =================================================== */

/* Modal base container */
.editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2000; /* Higher than all other UI elements */
}

/* Modal background overlay */
.editor-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2001;
    touch-action: none; /* Prevents scrolling on mobile when overlay is active */
}

/* Modal main container */
.editor-modal .modal-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--modal-height, 75vh); /* Use CSS variable with default fallback */
    background-color: #222;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 2002;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.17, 0.89, 0.32, 1.25);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    overflow-y: auto; /* Allow scrolling for content that exceeds modal height */
    overscroll-behavior: contain; /* Prevents scroll chaining */
}

/* Modal visible state */
.editor-modal.visible {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
}

/* Transform for visible modal */
.editor-modal.visible .modal-container {
    transform: translateY(0);
}

/* Handle at top of modal for dragging */
/* Handle at top of modal for dragging */
.editor-modal .modal-handle {
    width: 40px;
    height: 5px;
    background-color: white;
    border-radius: 3px;
    margin: 12px auto;
    cursor: grab;
    touch-action: none; /* Ensures proper touch handling */
}

.editor-modal .modal-handle:active {
    cursor: grabbing;
    background-color: rgba(255, 255, 255, 0.8);
}

/* Modal content area */
.editor-modal .modal-content {
    padding: 15px;
    color: #eee;
    overflow-y: auto;
    max-height: calc(var(--modal-height, 75vh) - 80px);
    /* Hide scrollbars but keep scroll functionality */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari, Opera */
.editor-modal .modal-content::-webkit-scrollbar {
    display: none;
}

/* Close animation */
.editor-modal.closing .modal-container {
    transform: translateY(100%);
    transition: transform 0.25s ease-in;
}

.editor-modal.closing {
    opacity: 0;
    transition: opacity 0.25s ease-in;
}

/* Dynamic heights based on modal type - using CSS variables */
#stickers-modal { --modal-height: 85vh; }
#text-modal { --modal-height: 65vh; }
#draw-modal { --modal-height: 40vh; }
#music-modal { --modal-height: 65vh; }
/* ===== TRIM REFACTOR (November 2025) ===== */
/* Changed from 65vh to 25vh - bottom drawer with timeline controls only */
/* REVERT: Change back to 65vh */
#trim-modal { --modal-height: 25vh; }
/* ===== END TRIM REFACTOR ===== */


/* Common action button in modals */
.modal-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0066cc;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 15px auto;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modal-action-btn:active {
    transform: scale(0.98);
}

.modal-action-btn:hover {
    background-color: #0055aa;
}

.modal-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Section labels in modals */
.section-label {
    font-size: 16px;
    color: #ccc;
    margin: 15px 0 10px;
    font-weight: 400;
}

/* Tool sections within modals */
.tool-section {
    margin-bottom: 20px;
}

/* Prevent body scrolling when modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ===================================================
   STICKERS MODAL SPECIFIC STYLES
   =================================================== */

/* Sticker grid container */
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px 0;
    width: 100%;
    max-width: 320px; /* 4 x 72px + 3 gaps */
    margin: 0 auto;
}



/* Sticker option */
.sticker-option {
    aspect-ratio: 1/1;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: 2px solid transparent;
    overflow: hidden;
}

.sticker-option {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 72px; /* limit width if screen is wide */
    margin: 0 auto;
}



.sticker-option:active {
    transform: scale(0.95);
}

.sticker-option img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}



.sticker-option.selected {
    border-color: #0066cc;
    background-color: rgba(0, 102, 204, 0.2);
}

/* Fix for dynamically created sticker items */
.sticker-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    border: 2px solid transparent;
    overflow: hidden;
}


.sticker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}



/* Universal rule to ensure modal contents are interactive */
.editor-modal .modal-container * {
    pointer-events: auto;
    touch-action: manipulation;
}


/* ===================================================
   DRAW TOOL MODAL SPECIFIC STYLES
   =================================================== */

/* Stroke size selection */
.stroke-picker {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
    gap: 12px;
}

/* Stroke options inherit from .btn-circular - keep only unique flex property */
.stroke-option {
    flex: 0 0 auto;
}

.stroke-option i {
    font-size: 18px;
    color: white;
}

.stroke-option.selected {
    transform: scale(1.1);
    border: 3px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: white; /* white background */
}

.stroke-option.selected i {
    color: #222; /* dark icon */
}




/* Color picker */
.color-slider-wrapper {
    margin: 30px 20px;
    width: calc(100% - 40px); /* Ensure it respects the margins */
    position: relative;
}

.color-slider {
    width: 100%;
    height: 24px; /* track height */
    border-radius: 12px;
    background: linear-gradient(to right,
    hsl(0, 0%, 100%) 0%,
    hsl(0, 0%, 100%) 6%,
    hsl(0, 100%, 50%) 12%,
    hsl(60, 100%, 50%) 25%,
    hsl(120, 100%, 50%) 38%,
    hsl(180, 100%, 50%) 50%,
    hsl(240, 100%, 50%) 62%,
    hsl(300, 100%, 50%) 75%,
    hsl(360, 100%, 50%) 88%,
    hsl(0, 0%, 0%) 94%,
    hsl(0, 0%, 0%) 100%
    );

    border: 2px solid white;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
}

/* Big thumb (Chrome & Safari) */
.color-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid white;
    background: hsl(0, 100%, 50%); /* default, updated dynamically */
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin-top: -10px;
}

/* Big thumb (Firefox) */
.color-slider::-moz-range-thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid white;
    background: hsl(0, 100%, 50%);
    cursor: pointer;
}
/* Ensure full range of slider is accessible */
.color-slider::-webkit-slider-runnable-track {
    height: 100%;
    border-radius: 18px;
}

.color-slider::-moz-range-track {
    height: 100%;
    border-radius: 18px;
}



/* ===================================================
   TEXT TOOL MODAL SPECIFIC STYLES
   =================================================== */

/* Text input area */
.text-input {
    width: 100%;
    height: 44px;
    resize: none;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 24px;
    line-height: 44px;
    padding: 0 12px;
    margin-bottom: 15px;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    /* This will be updated dynamically */
    text-shadow: 0 0 0 #000;
    font-weight: 600;
}





.text-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.15);
}


.text-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}


/* Font options inherit from .btn-pill - no additional styles needed */
.font-option {
    /* All styles inherited from .btn-pill */
}



/* Color picker for text modal */
.color-picker {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

.color-option .color-preview {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 6px solid #000; /* will be overwritten by inline style */
    box-sizing: border-box;
}


.color-option.selected .color-preview {
    outline: 2px solid white;
    outline-offset: 2px;
}


/* Font picker layout */
.font-picker {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

/* Responsive adjustments for text modal */
@media (min-width: 768px) {
    .font-picker {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

/*  IMPORTANT FOR BLOCKING MOUSE AND TOUCH EVENTS WHEN MODAL IS OPEN   */

body.modal-open #control-canvas,
body.modal-open #tool-canvas {
    pointer-events: none !important;
}

/*  ===================================MUSIC CSS++++++++++++++++++++++++++++++++++++++++++++++++++++++   */

/* Adjust modal height */
#music-modal .modal-container {
    height: 65vh;
}

#music-modal .modal-content {
    max-height: calc(65vh - 80px);
    display: flex;
    flex-direction: column;
}

/* New layout for the music modal */
.music-modal-layout {
    display: flex;
    flex-grow: 1;
    gap: 15px;
}

.music-selection-panel {
    flex: 0 0 88%; /* Takes up 88% of the width */
    display: flex;
    flex-direction: column;
}

.music-volume-panel {
    flex: 0 0 12%; /* Takes up 12% of the width */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Vertical Volume Slider */
.volume-slider-vertical {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 100%;
    max-height: 200px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    outline: none;
    writing-mode: vertical-lr; /* Standard for vertical orientation */
    direction: rtl; /* To make the 'low' end (0) at the bottom */
}

.volume-slider-vertical::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: white;
    cursor: pointer;
    border-radius: 50%;
}

.volume-slider-vertical::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: white;
    cursor: pointer;
    border-radius: 50%;
}

/* Trash can button */
.music-action-btn.remove-music-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    z-index: 2003;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 0;
    touch-action: manipulation;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.3s ease;
}

.music-action-btn.remove-music-btn:active {
    transform: scale(0.95);
}

.music-action-btn.remove-music-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Music tracks container */
.music-tracks-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Music track options inherit from .btn-pill and .btn-pill--track */
.music-track-option {
    /* Most styles inherited from .btn-pill and .btn-pill--track */
    font-weight: 400; /* Override to normal weight instead of 600 */
    border: 1px solid white; /* White border outline */
}

.music-track-option span {
    flex-grow: 1;
    margin-right: 15px;
    font-weight: 400;
}

.music-track-option i {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6); /* Gray icon for normal state */
    transition: color 0.2s ease;
}

.music-track-option.active i {
    color: #222; /* Dark icon when track is selected (white background) */
}

/*  =================================== END MUSIC CSS ==================================================   */

/*                   VIDEO BUTTON                   */
/* Media-specific tool display */
[data-media-type="video"] .edit-tool-btn.crop-btn,
[data-media-type="video"] .edit-tool-btn.draw-btn {
    display: none !important;
}

[data-media-type="image"] .edit-tool-btn.trim-btn {
    display: none !important;
}

/* Animation for showing/hiding tools */
.edit-tool-btn {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ===================================================
   TRIM TOOL MODAL SPECIFIC STYLES
   =================================================== */

/* ===== TRIM REFACTOR (November 2025) ===== */
/* REMOVED: Video preview styles - no longer using separate preview video */
/* REVERT: Restore the styles below */
/*
.trim-video-preview {
    width: 100%;
    margin: 0 auto 20px;
    border-radius: 12px;
    overflow: hidden;
    background-color: black;
    max-height: 30vh;
}

#trim-preview-video {
    width: 100%;
    display: block;
    max-height: 30vh;
    object-fit: contain;
}
*/
/* ===== END TRIM REFACTOR ===== */

/* Timeline bar styling */
.trim-timeline-container {
    margin: 20px 0;
    padding: 0 10px;
}

.trim-timeline-bar {
    height: 60px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin: 0 10px;
}

/* Selected area of the timeline */
.trim-selection {
    position: absolute;
    top: 0;
    height: 100%;
    /* ===== TRIM REFACTOR (November 2025) ===== */
    /* Changed from blue to gray to match music modal color scheme */
    /* REVERT: Change back to blue: rgba(0, 153, 255, 0.5) and rgba(0, 153, 255, 0.9) */
    background-color: rgba(255, 255, 255, 0.15);    /* Light gray overlay */
    border: 3px solid rgba(255, 255, 255, 0.6);     /* White/gray border */
    /* ===== END TRIM REFACTOR ===== */
    border-radius: 8px;
}

/* ===== TRIM UX IMPROVEMENTS (November 2025) ===== */
/* Draggable handles for trimming - Redesigned as circular buttons with arrows */
/* REVERT: Replace this entire block with the original thin-line handles above */
.trim-handle {
    position: absolute;
    top: 50%;                    /* Center vertically */
    width: 44px;                 /* Larger touch target */
    height: 44px;                /* Circular dimensions */
    transform: translateY(-50%); /* Center on timeline */
    cursor: grab;                /* Hand cursor */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;           /* White circular background */
    border-radius: 50%;          /* Perfect circle */
    /* ===== TRIM REFACTOR (November 2025) ===== */
    /* Changed ring from blue to gray - REVERT: rgba(0, 123, 255, 0.4) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.4); /* Depth + gray ring */
    /* ===== END TRIM REFACTOR ===== */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trim-handle:active {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.1); /* Slight grow on drag */
    /* ===== TRIM REFACTOR (November 2025) ===== */
    /* Changed ring from blue to gray - REVERT: rgba(0, 123, 255, 0.6) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.6); /* Enhanced on press */
    /* ===== END TRIM REFACTOR ===== */
}

/* Arrow indicators using CSS content */
.trim-handle::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
}

.trim-handle.left-handle {
    left: 0;
    transform: translate(-50%, -50%); /* Center on left edge */
}

.trim-handle.left-handle::before {
    /* ===== TRIM ARROW DIRECTION FIX (November 2025) ===== */
    /* Changed to point RIGHT (inward) instead of LEFT (outward) */
    /* REVERT: Change back to border-width: 8px 12px 8px 0; and border-color: transparent #555 transparent transparent; */
    border-width: 8px 0 8px 12px;      /* Right-pointing triangle (inward) */
    border-color: transparent transparent transparent #555;
    /* ===== END TRIM ARROW DIRECTION FIX ===== */
}

.trim-handle.left-handle:active {
    transform: translate(-50%, -50%) scale(1.1);
}

.trim-handle.right-handle {
    /* ===== TRIM REFACTOR (November 2025) ===== */
    /* FIXED: Changed from translate(50%, -50%) to translate(-50%, -50%) */
    /* JavaScript sets left position dynamically, so we need to pull it BACK (-50%) to center it */
    /* REVERT: Change back to translate(50%, -50%) */
    transform: translate(-50%, -50%); /* Center on line, same as left handle */
    /* ===== END TRIM REFACTOR ===== */
}

.trim-handle.right-handle::before {
    /* ===== TRIM ARROW DIRECTION FIX (November 2025) ===== */
    /* Changed to point LEFT (inward) instead of RIGHT (outward) */
    /* REVERT: Change back to border-width: 8px 0 8px 12px; and border-color: transparent transparent transparent #555; */
    border-width: 8px 12px 8px 0;      /* Left-pointing triangle (inward) */
    border-color: transparent #555 transparent transparent;
    /* ===== END TRIM ARROW DIRECTION FIX ===== */
}

.trim-handle.right-handle:active {
    /* ===== TRIM REFACTOR (November 2025) ===== */
    /* FIXED: Changed from translate(50%, -50%) to translate(-50%, -50%) */
    /* REVERT: Change back to translate(50%, -50%) */
    transform: translate(-50%, -50%) scale(1.1);
    /* ===== END TRIM REFACTOR ===== */
}
/* ===== END TRIM UX IMPROVEMENTS ===== */

/* Current time indicator in timeline */
.trim-current-time-indicator {
    position: absolute;
    top: -5px;
    bottom: -5px;
    /* ===== TRIM UX IMPROVEMENTS (November 2025) ===== */
    /* REVERT: Change width back to 3px and remove box-shadow */
    width: 4px;                                              /* Slightly wider for better visibility */
    background-color: #FFD700;                               /* Gold color (more visible than plain yellow) */
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.8);              /* Subtle glow effect */
    /* ===== END TRIM UX IMPROVEMENTS ===== */
    z-index: 5;
}

/* Time labels beneath timeline */
.trim-time-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    color: white;
    padding: 0 10px;
}

/* Styling for the play/pause button - reusing track-controls from music modal */
.trim-modal .track-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

/* Trim play/pause button inherits from .btn-circular - no additional styles needed */
.trim-play-pause-btn {
    /* All styles inherited from .btn-circular */
}

/* ===================================================
   RESIZE MODAL STYLES
   =================================================== */

#resize-modal .modal-content h3 {
    margin-bottom: 20px;
    text-align: center;
}

.resize-info {
    text-align: center;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.resize-inputs {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.resize-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resize-input-group label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resize-input-group input[type="number"] {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-align: center;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.resize-input-group input[type="number"]:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.15);
}

.resize-input-group input[type="number"]::-webkit-outer-spin-button,
.resize-input-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.resize-options {
    margin-bottom: 20px;
}

.resize-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.resize-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #4CAF50;
    cursor: pointer;
}

.resize-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.resize-preset {
    flex: 1 1 calc(50% - 5px);
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resize-preset:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.resize-preset:active {
    transform: scale(0.98);
}

.modal-apply-btn {
    width: 100%;
    padding: 15px;
    background: #4CAF50;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-apply-btn:hover {
    background: #45a049;
}

.modal-apply-btn:active {
    transform: scale(0.98);
}