/**
 * Styles for the Lens admin interface in WordPress.
 *
 * Defines variables and presentation for media library enhancements.
 */

/* Variables and Root Styles */
:root {
    --lens-primary: #2271b1;
    --lens-primary-hover: #135e96;
    --lens-secondary: #50575e;
    --lens-border: #e0e0e0;
    --lens-background: #ffffff;
    --lens-sidebar-bg: #ffffff;
    --lens-hover-bg: #f7f8fa;
    --lens-active-bg: #e8f2f9;
    --lens-text: #1d2327;
    --lens-text-secondary: #6c757d;
    --lens-success: #00a32a;
    --lens-danger: #d63638;
    --lens-danger-light: #ffebee;
    --lens-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --lens-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --lens-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --lens-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --lens-folder-icon-color: #2271b1;
    --lens-folder-icon-hover: #135e96;
    --lens-badge-bg: #f0f1f3;
    --lens-badge-color: #50575e;
    --lens-all-media-bg: #f0f6fc;
    --lens-all-media-color: #2271b1;
    --lens-unassigned-media-bg: #fff5f5;
    --lens-unassigned-media-color: #d63638;
    --lens-sort-dropdown-bg: #ffffff;
    --lens-sort-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --lens-sort-option-hover: #f7f8fa;
    --lens-sort-option-active: #e8f2f9;
    --lens-z-index-sidebar: 9980;
    --lens-z-index-sidebar-collapsed: 9975;
    --lens-z-index-tooltip-layer: 12000000;
    --lens-tooltip-offset: 10px;
    --lens-tooltip-viewport-padding: 8px;
}

/* Sidebar Search Mode Styles */
.lens-sidebar-header.lens-search-mode {
    transition: opacity 0.15s ease, height 0.2s ease;
    padding: 12px 16px; /* Optimized padding for two-row layout */
    background: var(--lens-background);
    will-change: height, opacity; /* Optimize for smooth transitions */
}

.lens-search-mode-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* Row 1 - Search input */
.lens-search-input-row {
    display: flex;
    width: 100%;
}

/* Row 2 - Controls */
.lens-search-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Trash mode search adjustments */
.lens-search-mode-container.lens-trash-search .lens-search-controls-row {
    justify-content: flex-end; /* Align cancel button to the right when no toggle */
}

/* New wrapper container for sidebar search with filter chips */
.lens-search-input-wrapper-container {
    width: 100%;
    max-width: 100%;
    position: relative;
    background: white;
    border: 1px solid var(--lens-border);
    border-radius: 6px;
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 12px;
    gap: 8px;
    transition: all 0.15s ease;
    overflow: hidden;
    box-sizing: border-box;
}

.lens-search-input-wrapper-container:hover {
    border-color: #c3c4c7;
}

.lens-search-input-wrapper-container:focus-within {
    border-color: var(--lens-primary);
    box-shadow: 0 0 0 0.5px var(--lens-primary-light, rgba(34, 113, 177, 0.3));
}

.lens-search-input-wrapper-container .lens-search-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #8c8f94;
    pointer-events: none;
    transition: color 0.15s ease;
}

.lens-search-input-wrapper-container:focus-within .lens-search-icon {
    color: var(--lens-primary);
}

/* Inner wrapper for chips + input */
.lens-search-input-wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    min-height: 28px;
    overflow: hidden;
}

.lens-sidebar-active-filters {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* More specific selector to override WordPress defaults */
.lens-search-input-wrapper .lens-search-input,
.lens-search-input-wrapper input[type="text"].lens-search-input,
.lens-search-input-wrapper-container .lens-search-input {
    flex: 1 1 0;
    min-width: 30px;
    width: 0;
    height: 28px;
    border: none !important;
    background: transparent;
    font-size: 14px;
    color: var(--lens-text);
    padding: 0 !important;
    margin: 0;
    line-height: 28px;
    box-shadow: none !important;
    min-height: unset;
}

.lens-search-input-wrapper .lens-search-input:focus,
.lens-search-input-wrapper input[type="text"].lens-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove any browser default styling */
.lens-search-input::-webkit-search-decoration,
.lens-search-input::-webkit-search-cancel-button,
.lens-search-input::-webkit-search-results-button,
.lens-search-input::-webkit-search-results-decoration {
    display: none;
}

.lens-search-input::placeholder {
    color: var(--lens-text-secondary);
    opacity: 0.7;
}

.lens-search-clear {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #8c8f94;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.lens-search-clear:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--lens-text);
}

.lens-search-clear svg {
    width: 14px;
    height: 14px;
}

/* Mode toggle and cancel button are now direct children of container */

.lens-search-mode-toggle {
    display: inline-flex;
    background: #f0f0f1;
    border-radius: 4px;
    padding: 2px;
    gap: 1px;
}

.lens-search-mode-btn {
    padding: 4px 10px;
    border: none;
    background: transparent;
    color: #50575e;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.lens-search-mode-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
}

.lens-search-mode-btn.active {
    background: white;
    color: var(--lens-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.lens-search-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    background: white;
    color: var(--lens-text-secondary);
    border: 1px solid var(--lens-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 30px;
}

.lens-search-cancel:hover {
    background: #f6f7f7;
    border-color: #8c8f94;
    color: var(--lens-text);
}
.lens-search-cancel:active {
    transform: translateY(1px);
}

/* Search Results Styles - Now using standard folder structure */
/* Search results now use the standard .lens-folder-item structure for consistency */

/* Additional styles for search result folders */
.lens-folder-item[data-search-result="true"] .lens-folder-path {
    display: block;
    font-size: 11px;
    color: var(--lens-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search Empty States */
.lens-search-empty,
.lens-search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    /* Center vertically in the available space */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
}

.lens-search-empty svg,
.lens-search-no-results svg {
    color: var(--lens-text-secondary);
    opacity: 0.4;
    margin-bottom: 12px;
    width: 32px;
    height: 32px;
}

/* Error state specific styling */
.lens-search-error svg {
    color: var(--lens-danger);
    opacity: 0.5;
}

.lens-search-empty h3,
.lens-search-no-results h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--lens-text);
    margin: 0 0 6px 0;
}

.lens-search-empty p,
.lens-search-no-results p {
    font-size: 13px;
    color: var(--lens-text-secondary);
    margin: 0;
    opacity: 0.8;
}

/* Ensure proper positioning context */
#lens-folders-container {
    position: relative;
}

.lens-search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 20px;
    /* Center vertically in the available space */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
}

.lens-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--lens-border);
    border-top-color: var(--lens-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.lens-search-loading p {
    margin-top: 12px;
    color: var(--lens-text-secondary);
    font-size: 13px;
    opacity: 0.8;
}

/* Search Match Highlighting in Tree */
.lens-folder-item.lens-search-match {
    background: rgba(34, 113, 177, 0.05);
}

.lens-folder-item.lens-search-parent {
    opacity: 0.7;
}

.lens-all-media.lens-search-match {
    background: rgba(34, 113, 177, 0.05);
}


/* Search text highlighting - matching QuickSwitch style */
.lens-folder-name mark,
.lens-all-media-name mark,
.lens-folder-path mark,
.lens-quick-switch-item-name mark {
    background: rgba(34, 113, 177, 0.2);
    color: var(--lens-primary);
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: inherit;
    font-style: normal;
}

/* Quick Switch Styles */
.lens-quick-switch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
}

.lens-quick-switch-modal {
    background: var(--lens-background);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 90%;
    max-width: 680px;
    height: 440px;
    max-height: 440px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    animation: lens-quick-switch-appear 0.2s ease-out;
}

@keyframes lens-quick-switch-appear {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lens-quick-switch-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--lens-border);
    gap: 12px;
    position: relative;
    overflow: visible;
}

.lens-quick-switch-search-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #6B7280;
    stroke: #6B7280;
}

.lens-quick-switch-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.lens-quick-switch-active-filters {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.lens-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px 2px 3px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    animation: lens-chip-appear 0.2s ease-out;
    flex-shrink: 0;
    white-space: nowrap;
}

.lens-quick-switch-active-filters .lens-filter-chip[data-color] {
    background: transparent;
    border: none;
    padding: 0;
}

.lens-quick-switch-active-filters .lens-filter-chip[data-color] .lens-filter-chip-dot {
    border-color: rgba(0, 0, 0, 0.15);
}

@keyframes lens-chip-appear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lens-filter-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.lens-filter-chip-locked {
    padding-left: 5px;
}

.lens-filter-chip-locked svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
}

.lens-filter-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.lens-filter-chip-remove:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #374151;
}

.lens-filter-chip-remove svg {
    width: 9px;
    height: 9px;
    stroke: currentColor;
    stroke-width: 2.5;
    display: block;
}

.lens-filter-chip-clear-all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all 0.15s ease;
    margin-left: 2px;
}

.lens-filter-chip-clear-all:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.lens-filter-chip-clear-all svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
}

.lens-quick-switch-input {
    flex: 1;
    padding: 0;
    font-size: 16px;
    border: none !important;
    background: transparent;
    outline: none !important;
    color: var(--lens-text);
    box-shadow: none !important;
    min-width: 120px;
}

.lens-quick-switch-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.lens-quick-switch-input:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.lens-quick-switch-input::placeholder {
    color: #9CA3AF;
}

.lens-quick-switch-result-count {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--lens-text-secondary);
    margin-right: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lens-quick-switch-result-count:not(:empty) {
    opacity: 1;
}

.lens-quick-switch-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--lens-transition);
    color: #6B7280;
    position: relative;
}

.lens-quick-switch-close:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-text);
}

.lens-quick-switch-close svg {
    width: 20px;
    height: 20px;
}

.lens-quick-switch-results {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.lens-quick-switch-virtual-scroll {
    padding: 8px 8px 0 8px; /* Remove bottom padding */
}

.lens-quick-switch-item {
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--lens-transition);
    outline: none !important;
}

.lens-quick-switch-item.removing {
    animation: lens-quick-switch-remove 0.3s ease-out forwards;
}

@keyframes lens-quick-switch-remove {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-10px) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        overflow: hidden;
    }
}

.lens-quick-switch-item:focus {
    outline: none !important;
    box-shadow: none !important;
}

.lens-quick-switch-item:hover {
    background: var(--lens-hover-bg);
}

.lens-quick-switch-item.selected {
    background: #F7F8FA;
    outline: none !important;
}

.lens-quick-switch-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lens-quick-switch-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lens-hover-bg);
    border-radius: 8px;
}

.lens-quick-switch-item-icon .dashicons {
    font-size: 20px;
    color: inherit; /* Inherit color from parent */
}

/* Fallback color when no color is set on parent */
.lens-quick-switch-item-icon:not([style*="color"]) .dashicons {
    color: var(--lens-primary);
}

/* ZIP folder icon in Quick Switch */
.lens-quick-switch-item-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor; /* Inherit color from parent */
}

/* Fallback stroke color when no color is set on parent */
.lens-quick-switch-item-icon:not([style*="color"]) svg {
    stroke: var(--lens-primary);
}

/* Quick Switch Locked Folder Styles */
.lens-quick-switch-item-icon-wrapper {
    position: relative;
}

.lens-quick-switch-lock-icon {
    position: absolute;
    bottom: 7px;
    right: 7px;
    background: var(--lens-primary, #2271b1);
    border-radius: 50%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lens-quick-switch-lock-icon .dashicons {
    width: 10px;
    height: 10px;
    font-size: 9px;
    color: #ffffff;
}

/* Colored folders should have white background with colored icon */
.lens-quick-switch-item-icon[style*="color"] .lens-quick-switch-lock-icon {
    background: currentColor !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lens-quick-switch-item-icon[style*="color"] .lens-quick-switch-lock-icon .dashicons {
    color: #fff !important;
}

/* Hover state for locked folders */
.lens-quick-switch-item.selected .lens-quick-switch-lock-icon {
    background: var(--lens-primary, #2271b1);
}

.lens-quick-switch-item.selected .lens-quick-switch-lock-icon .dashicons {
    color: #ffffff !important;
}

/* Hover state for colored folders - use folder color as background */
.lens-quick-switch-item.selected .lens-quick-switch-item-icon[style*="color"] .lens-quick-switch-lock-icon {
    background: currentColor; /* Uses the folder's color */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lens-quick-switch-item.selected .lens-quick-switch-item-icon[style*="color"] .lens-quick-switch-lock-icon .dashicons {
    color: #ffffff !important; /* White icon on hover */
}

.lens-quick-switch-item-details {
    flex: 1;
    min-width: 0;
}

.lens-quick-switch-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--lens-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lens-quick-switch-item-name mark {
    background: rgba(34, 113, 177, 0.2);
    color: var(--lens-primary);
    padding: 1px 2px;
    border-radius: 2px;
}

.lens-quick-switch-item-breadcrumb mark {
    background: rgba(34, 113, 177, 0.15);
    color: inherit;
    padding: 1px 2px;
    border-radius: 2px;
}

.lens-quick-switch-item-breadcrumb {
    font-size: 12px;
    color: var(--lens-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lens-quick-switch-item-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lens-quick-switch-item-delete {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--lens-text-secondary);
    opacity: 0;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.lens-quick-switch-item:hover .lens-quick-switch-item-delete {
    opacity: 1;
}

.lens-quick-switch-item-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    transform: scale(1.1);
}

.lens-quick-switch-item-delete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
}

.lens-quick-switch-item-delete:focus {
    outline: none !important;
}

.lens-quick-switch-item-delete svg {
    width: 16px;
    height: 16px;
}

.lens-quick-switch-item-count {
    padding: 2px 8px;
    background: var(--lens-hover-bg);
    border-radius: 12px;
    font-size: 11px;
    color: var(--lens-text-secondary);
}

.lens-quick-switch-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--lens-text-secondary);
}

.lens-quick-switch-empty .dashicons {
    font-size: 40px;
    opacity: 0.3;
    margin-bottom: 20px;
    margin-right: 20px;
}

.lens-quick-switch-empty-icon {
    width: 38px;
    height: 38px;
    color: var(--lens-text-secondary);
    opacity: 0.3;
    margin-bottom: 10px;
}

.lens-quick-switch-empty h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lens-text);
}

.lens-quick-switch-empty p {
    margin: 0 0 20px;
    font-size: 14px;
}

.lens-quick-switch-tip {
    background: var(--lens-hover-bg);
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-block;
    font-size: 13px;
    color: var(--lens-text-secondary);
    margin: 0 !important;
}

.lens-quick-switch-create-btn {
    padding: 8px 16px;
    background: var(--lens-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: var(--lens-transition);
}

.lens-quick-switch-create-btn:hover {
    background: var(--lens-primary-hover);
}


/* Quick Switch Trigger Button */
.lens-quick-switch-trigger {
    margin: 12px 15px 0;
}

.lens-quick-switch-btn {
    width: 100%;
    padding: 10px 12px;
    background: var(--lens-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--lens-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lens-quick-switch-btn:hover {
    background: var(--lens-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.2);
}

.lens-quick-switch-btn:active {
    transform: translateY(0);
}

.lens-quick-switch-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lens-quick-switch-btn kbd {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-left: auto;
}

/* Mobile Responsive Styles for Quick Switch */
@media (max-width: 782px) {
    .lens-quick-switch-modal {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
    
    .lens-quick-switch-overlay {
        padding-top: 0;
    }
    
    .lens-quick-switch-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .lens-quick-switch-results {
        flex: 1;
        min-height: 0;
    }
    
    .lens-quick-switch-hint {
        display: none; /* Hide keyboard hints on mobile */
    }
    
    .lens-quick-switch-trigger {
        display: none; /* Hide on mobile, keyboard shortcut still works */
    }
}

/* Quick Switch Show More Button */
.lens-quick-switch-show-more {
    margin: 0 -8px; /* Negative margin to counteract parent padding */
    padding: 0;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.lens-quick-switch-show-more-btn {
    background: transparent;
    border: none;
    border-radius: 0 0 12px 12px; /* Match modal's border radius at bottom */
    color: var(--text-secondary, #666);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    padding: 16px 20px;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    display: block;
}

.lens-quick-switch-show-more-btn:hover {
    background: var(--bg-hover, #f8f8f8);
    color: var(--text-primary, #333);
}

.lens-quick-switch-show-more-btn:active {
    background: var(--bg-active, #f0f0f0);
}

.lens-quick-switch-show-more-btn:focus {
    outline: none;
    box-shadow: none;
}

/* Loading state for show more button */
.lens-quick-switch-show-more-btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.lens-quick-switch-show-more-btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid var(--border-color, #e0e0e0);
    border-top-color: var(--lens-primary, #2271b1);
    border-radius: 50%;
    animation: lens-spinner 0.6s linear infinite;
}

@keyframes lens-spinner {
    to { transform: rotate(360deg); }
}

/* Folders container loading state */
.lens-folders-container.lens-loading {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lens-folders-container.lens-loading::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    margin-top: -12px;
    border: 2px solid var(--border-color, #e0e0e0);
    border-top-color: var(--lens-primary, #2271b1);
    border-radius: 50%;
    animation: lens-spinner 0.6s linear infinite;
}

.lens-folders-container.lens-loading > * {
    display: none;
}

/* Animation for new results */
.lens-quick-switch-item.fade-in {
    animation: lens-fade-slide-in 0.3s ease-out;
}

@keyframes lens-fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Color Filters */
.lens-quick-switch-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--lens-bg);
}

.lens-color-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    outline: none;
}

.lens-color-filter:hover {
    background: var(--bg-secondary);
    transform: scale(1.1);
}

.lens-color-filter:focus {
    outline: none;
    box-shadow: none;
}

.lens-color-filter.active {
    background: var(--bg-secondary);
}

.lens-color-filter.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 2px;
}

.lens-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* Smart Hint */
.lens-quick-switch-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 8px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background: var(--accent-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    border-radius: 6px;
    color: white;
    font-size: 13px;
    line-height: 1.4;
    animation: lens-hint-slide-in 0.3s ease-out;
}

@keyframes lens-hint-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lens-quick-switch-hint svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.lens-quick-switch-hint code {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
}

.lens-hint-dismiss {
    margin-left: auto;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.lens-hint-dismiss:hover {
    opacity: 1;
}

/* WordPress content area layout with Lens sidebar */
body.upload-php.lens-active #wpbody-content {
    padding-left: var(--lens-sidebar-width, 280px); /* Use CSS variable for instant application */
    box-sizing: border-box;
}

/* Smooth transition when sidebar toggles (only after initial load and not resizing) */
body.upload-php.lens-active:not(.lens-no-animate):not(.lens-resizing-sidebar) #wpbody-content {
    transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed sidebar state - only expand panel visible (48.8px) */
body.upload-php.lens-active.lens-sidebar-collapsed #wpbody-content {
    padding-left: 48.8px !important;
}

/* Media elements naturally expand within their container */
body.upload-php.lens-active.lens-sidebar-collapsed .media-frame-content,
body.upload-php.lens-active.lens-sidebar-collapsed .attachments-wrapper,
body.upload-php.lens-active.lens-sidebar-collapsed .load-more-wrapper {
    width: 100%;
}


/* Horizontal overflow prevention */
body.upload-php.lens-active {
    overflow-x: hidden;
}

body.upload-php.lens-active #wpcontent {
    overflow-x: hidden;
}

/* Media toolbar layout */
body.upload-php.lens-active .media-toolbar {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

/* Fix the search label wrapping - target the correct element */
body.upload-php.lens-active .media-toolbar-primary .media-search-input-label {
    white-space: nowrap;
}

/* Filter bar inherits container width */
body.upload-php.lens-active .wp-filter {
    box-sizing: border-box;
}

/* Media grid container */
body.upload-php.lens-active #wp-media-grid {
    box-sizing: border-box;
    position: relative;
    z-index: 1; /* Below screen options (z-index: 10) */
}



/* Screen options and help tabs z-index hierarchy */
body.upload-php.lens-active #screen-meta-links {
    position: relative;
    z-index: 10; /* Above media grid */
}

/* Individual screen option buttons */
body.upload-php.lens-active #screen-options-link-wrap,
body.upload-php.lens-active #contextual-help-link-wrap {
    position: relative;
    z-index: 11; /* Above their container */
}

/* Screen options panel when expanded */
body.upload-php.lens-active #screen-meta {
    margin-left: 0;
    position: relative;
    z-index: 10;
}

/* Contextual help panel content */
body.upload-php.lens-active #contextual-help-wrap {
    margin-left: 0;
}

/* Attachments browser container */
body.upload-php.lens-active .attachments-browser {
    box-sizing: border-box;
    position: relative;
}

/* Media frame content container */
body.upload-php.lens-active .media-frame-content {
    box-sizing: border-box;
}

/* Table navigation respects container width */
body.upload-php.lens-active .tablenav {
    box-sizing: border-box;
}

/* Media upload form respects container padding */
body.upload-php.lens-active .media-upload-form {
    box-sizing: border-box;
}

/* List view form respects container padding */
body.upload-php.lens-active form#posts-filter {
    box-sizing: border-box;
}

/* Remove width constraint on media toolbar primary to prevent label wrapping */
body.upload-php.lens-active .attachments-browser .media-toolbar-primary {
    max-width: none;
    width: auto;
}

/* Ensure toolbar secondary (filters area) uses appropriate space */
body.upload-php.lens-active .attachments-browser .media-toolbar-secondary {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 20px;
}

/* Let WordPress handle the media grid layout naturally */
/* The container padding from .wrap provides the edge spacing */
/* Don't override WordPress's internal grid spacing */


/* Footer positioning when Lens sidebar is active */
body.upload-php.lens-active #wpfooter {
    margin-left: var(--lens-sidebar-width, 280px); /* Use CSS variable for instant application */
}

/* Add transition only when animations are enabled and not resizing */
body.upload-php.lens-active:not(.lens-no-animate):not(.lens-resizing-sidebar) #wpfooter {
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Footer positioning when sidebar is collapsed */
body.upload-php.lens-active.lens-sidebar-collapsed #wpfooter {
    margin-left: 48.8px !important;
}

/* Align footer text with media grid */
body.upload-php.lens-active #wpfooter p {
    margin-left: 168px;
}

/* Add transition only when animations are enabled */
body.upload-php.lens-active:not(.lens-no-animate) #wpfooter p {
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset margin when sidebar is collapsed */
body.upload-php.lens-active.lens-sidebar-collapsed #wpfooter p {
    margin-left: 168px;
}

/* Navigation Bar Styles */
.lens-navigation-bar {
    padding: 10px 15px;
    background: var(--lens-background);
    border-bottom: 1px solid var(--lens-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Ensure dropdowns are not clipped */
    overflow: visible !important;
}

.lens-nav-buttons {
    display: flex;
    gap: 5px;
    /* Ensure dropdowns are not clipped */
    overflow: visible !important;
}

.lens-nav-buttons button {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lens-background);
    border: 1px solid var(--lens-border);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--lens-transition);
}

.lens-nav-buttons button:hover:not(:disabled) {
    background: var(--lens-hover-bg);
    border-color: var(--lens-primary);
}

.lens-nav-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Path button dropdown */
.lens-path-button-wrapper {
    position: relative;
    display: inline-flex;
}

.lens-path-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.lens-path-button:hover {
    background: var(--lens-hover-bg);
    border-color: var(--lens-border);
}

.lens-path-button:active {
    transform: scale(0.95);
}

.lens-path-dropdown {
    position: fixed;
    background: var(--lens-background);
    border: 1px solid var(--lens-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 9999999;
    display: none;
}

.lens-path-dropdown.show {
    display: block;
}

/* Absolute positioned dropdown */
.lens-path-dropdown-absolute {
    position: fixed !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    min-width: 200px !important;
    z-index: 9999999 !important;
    padding: 4px 0 !important;
}

.lens-path-dropdown-absolute .lens-path-dropdown-item {
    background: #ffffff !important;
    color: #333 !important;
}

.lens-path-dropdown-absolute .lens-path-dropdown-item:hover {
    background: #f0f0f0 !important;
}

.lens-path-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--lens-transition);
    border-bottom: 1px solid var(--lens-border-light);
}

.lens-path-dropdown-item:last-child {
    border-bottom: none;
}

.lens-path-dropdown-item:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-primary);
}

.lens-path-dropdown-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lens-path-dropdown-item .lens-shortcut {
    margin-left: auto;
    font-size: 11px;
    color: var(--lens-text-secondary);
    font-family: monospace;
}

.lens-breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 5px 0;
}

.lens-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: var(--lens-hover-bg);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--lens-transition);
}

.lens-breadcrumb-item:hover {
    background: var(--lens-active-bg);
    color: var(--lens-primary);
}

.lens-breadcrumb-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lens-breadcrumb-separator {
    color: var(--lens-text-secondary);
    padding: 0 5px;
}

/* Folder Sidebar */
.lens-folder-sidebar {
    position: fixed;
    left: 160px;
    top: 32px;
    bottom: 0;
    width: var(--lens-sidebar-width, 280px); /* Use CSS variable for instant application */
    min-width: 240px;
    max-width: 400px;
    background: var(--lens-sidebar-bg);
    border-right: 1px solid var(--lens-border);
    display: flex;
    flex-direction: column;
    z-index: var(--lens-z-index-sidebar, 9980);
    box-shadow: var(--lens-shadow-sm);
    overflow: visible; /* Allow resize handle to be visible */
    contain: layout;
}

/* Add transitions only when animations are enabled AND not resizing */
body.lens-active:not(.lens-no-animate):not(.lens-resizing-sidebar) .lens-folder-sidebar {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth animation when resetting to default */
body.lens-sidebar-animating .lens-folder-sidebar,
body.lens-sidebar-animating #wpbody-content,
body.lens-sidebar-animating #wpfooter {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Collapsed sidebar state - Override everything including min-width */
.lens-folder-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    border-right: none;
    box-shadow: none;
    z-index: var(--lens-z-index-sidebar-collapsed, 9975);
}

/* Hide resize handle when collapsed */
.lens-folder-sidebar.collapsed .lens-resize-handle {
    display: none;
}

/* Hide view toggle buttons when collapsed */
.lens-folder-sidebar.collapsed .lens-view-toggle {
    display: none !important;
}

/* Transitioning state for visual feedback */
.lens-folder-sidebar.transitioning {
    box-shadow: 0 0 20px rgba(34, 113, 177, 0.15);
}

/* Resize handle styling */
.lens-resize-handle {
    position: absolute;
    right: -4px;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    z-index: 100;
    background: transparent;
    transition: background-color 0.15s ease;
}

/* Hover state - subtle visual feedback */
.lens-resize-handle:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Active resizing state - same as hover for consistency */
.lens-resize-handle:active,
.lens-folder-sidebar.lens-resizing .lens-resize-handle {
    background: rgba(0, 0, 0, 0.04);
}

/* No styling change required when snapped */
.lens-resize-handle.lens-snapped {
    /* Intentionally left unchanged to avoid distracting state changes */
}

/* "Default" indicator text */
.lens-snap-indicator {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100001;
    animation: lens-snap-fade 0.2s ease;
}

@keyframes lens-snap-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* No alternate styling when default snap is active */
.lens-folder-sidebar.lens-snapped-default {
    /* Indicator text conveys state without modifying layout */
}

/* Resizing cursor for entire body during resize */
body.lens-resizing-sidebar {
    cursor: col-resize !important;
}

body.lens-resizing-sidebar * {
    cursor: col-resize !important;
}

/* Prevent text selection during resize */
body.lens-resizing-sidebar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Sidebar toggle button */
.lens-sidebar-toggle {
    background: none;
    border: none;
    color: #646970;
    cursor: w-resize;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lens-sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #2271b1;
}

.lens-sidebar-toggle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Toggle icon styles */
.lens-sidebar-toggle svg {
    width: 23px;
    height: 23px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adjust header layout to show toggle before title */
.lens-sidebar-header {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.lens-sidebar-header h2 {
    margin: 0;
    flex: 1;
}

.lens-sidebar-header .lens-sidebar-toggle {
    order: -1;
    margin-right: 2px;
    margin-left: -8px;
}

/* Expand button removed - sidebar always visible */

/* Prevent flash of unstyled content and initial animations */
body:not(.lens-active) .lens-folder-sidebar,
body.lens-no-animate .lens-folder-sidebar {
    transition: none;
}


/* Admin bar adjustment */
body.admin-bar .lens-folder-sidebar {
    top: 32px;
}

/* Folded admin menu adjustment */
body.folded .lens-folder-sidebar {
    left: 36px;
}

/* Sidebar Header */
.lens-sidebar-header {
    padding: 20px 20px 20px 16px;
    background: var(--lens-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    box-sizing: border-box;
}

.lens-sidebar-header h2 {
    margin: 0 0 0 -9px;
    font-size: 18px;
    font-weight: 600;
    color: var(--lens-text);
}

.lens-header-actions {
    display: flex;
    gap: 8px;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.lens-bulk-select-toggle {
    background: var(--lens-background);
    color: var(--lens-text-secondary);
    border: 1px solid var(--lens-border);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--lens-transition);
}

.lens-bulk-select-toggle:hover {
    background: var(--lens-hover-bg);
    border-color: var(--lens-primary);
    color: var(--lens-primary);
}

.lens-bulk-select-toggle.active {
    background: var(--lens-primary);
    color: white;
    border-color: var(--lens-primary);
}

/* Search trigger button */
.lens-search-trigger {
    background: none;
    color: #646970;
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--lens-transition);
    border-radius: 8px;
    padding: 0;
}

.lens-search-trigger:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--lens-primary);
}

.lens-search-trigger svg {
    width: 24px;
    height: 24px;
    margin-top: -2px;
}

.lens-add-folder {
    background: var(--lens-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--lens-transition);
    box-shadow: var(--lens-shadow-sm);
}

.lens-add-folder:hover {
    background: var(--lens-primary-hover);
    transform: scale(1.05);
    box-shadow: var(--lens-shadow-md);
}

.lens-add-folder:active {
    transform: scale(0.95);
}

/* Ensure consistent icon sizes in header */
.lens-header-actions .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.lens-search-trigger,
.lens-add-folder,
.lens-sidebar-toggle {
    position: relative;
    overflow: visible !important;
}


.lens-sidebar-toggle {
    position: relative;
}


/* Actions Dropdown */
.lens-actions-dropdown-wrapper {
    position: relative;
}

.lens-actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--lens-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
    padding: 0;
}

.lens-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: var(--lens-transition);
    color: var(--lens-text);
    font-size: 14px;
    gap: 10px;
    margin: 0;
}

/* Add padding to first and last dropdown items */
.lens-dropdown-item:first-child {
    padding-top: 12px;
}

.lens-dropdown-item:last-child {
    padding-bottom: 12px;
}

.lens-dropdown-item:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-primary);
}

.lens-dropdown-item .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--lens-text-secondary);
}

.lens-dropdown-item:hover .dashicons {
    color: var(--lens-primary);
}

.lens-dropdown-item svg.lucide {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--lens-text-secondary);
    stroke: currentColor;
    transition: var(--lens-transition);
}

.lens-dropdown-item:hover svg.lucide {
    color: var(--lens-primary);
}

.lens-dropdown-divider {
    height: 1px;
    background: var(--lens-border);
    margin: 0;
    padding: 0;
    display: block;
}

/* Search Box */
.lens-search-box {
    padding: 16px;
    position: relative;
}

.lens-search-box input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: var(--lens-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.lens-search-box input:focus {
    outline: none;
    border-color: var(--lens-primary);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    background: #fbfdff;
}

.lens-search-box .dashicons {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lens-text-secondary);
    pointer-events: none;
}

.lens-search-box .dashicons.lens-search-clear {
    pointer-events: auto;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lens-search-box .dashicons.lens-search-clear:hover {
    color: var(--lens-text-primary);
}

/* Search highlight */
.lens-search-highlight {
    background: rgba(34, 113, 177, 0.2);
    color: var(--lens-primary);
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 500;
}

/* Search results */
.lens-folder-item.lens-search-result {
    animation: lens-search-fade-in 0.3s ease-out;
}

@keyframes lens-search-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Search results hover state - only on direct hover */
.lens-folder-item.lens-search-result > .lens-folder-row:hover {
    background: var(--lens-hover-bg);
    border-left: 3px solid var(--lens-primary);
    padding-left: 13px;
}

/* Remove search highlight from active folder */
.lens-folder-item.active .lens-search-highlight {
    background-color: transparent;
    padding: 0;
    font-weight: inherit;
}

/* Sidebar Content */
.lens-sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Prevent content from expanding during drag */
    min-width: 0;
    max-width: 100%;
}

/* Note: Sidebar content has overflow-y: auto which clips tooltips.
   Using high z-index and proper positioning to work around this. */

/* Custom Scrollbar - Hidden by default, visible on hover */
.lens-sidebar-content::-webkit-scrollbar {
    width: 6px;
    transition: opacity 0.3s ease;
}

.lens-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.lens-sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    border-radius: 3px;
    transition: background 0.3s ease;
}

/* Show scrollbar on sidebar hover */
.lens-sidebar:hover .lens-sidebar-content::-webkit-scrollbar-thumb,
.lens-sidebar-content:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.lens-sidebar:hover .lens-sidebar-content::-webkit-scrollbar-thumb:hover,
.lens-sidebar-content:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Show scrollbar on sidebar hover - Firefox */
.lens-sidebar:hover .lens-sidebar-content,
.lens-sidebar-content:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Folder Tree */
.lens-folder-tree {
    padding: 8px 0;
}

/* Folders Container */
#lens-folders-container {
    min-height: 360px; /* Ensure good drop area */
    padding: 0; /* Remove padding to ensure proper centering */
    position: relative; /* For tooltip positioning and empty state */
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Folders list base styles */
.lens-folders-list {
    min-height: 200px;
    padding-bottom: 10px; /* Space for dropping items */
}

/* Initial load animation - only if not seen before */
.lens-folders-container:not(.lens-refreshing):not(.lens-no-initial-animation) .lens-folders-list {
    animation: lens-folders-fade-in 0.3s ease-out;
}

/* Smooth fade-in animation for initial load */
@keyframes lens-folders-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle stagger animation for folder items on initial load - only if not seen before */
.lens-folders-container:not(.lens-refreshing):not(.lens-no-initial-animation) .lens-folder-item {
    opacity: 0;
    animation: lens-folder-item-fade-in 0.3s ease-out forwards;
}

/* Stagger the animation for each folder - only if not seen before */
.lens-folders-container:not(.lens-refreshing):not(.lens-no-initial-animation) .lens-folder-item:nth-child(1) { animation-delay: 0.05s; }
.lens-folders-container:not(.lens-refreshing):not(.lens-no-initial-animation) .lens-folder-item:nth-child(2) { animation-delay: 0.1s; }
.lens-folders-container:not(.lens-refreshing):not(.lens-no-initial-animation) .lens-folder-item:nth-child(3) { animation-delay: 0.15s; }
.lens-folders-container:not(.lens-refreshing):not(.lens-no-initial-animation) .lens-folder-item:nth-child(4) { animation-delay: 0.2s; }
.lens-folders-container:not(.lens-refreshing):not(.lens-no-initial-animation) .lens-folder-item:nth-child(5) { animation-delay: 0.25s; }
.lens-folders-container:not(.lens-refreshing):not(.lens-no-initial-animation) .lens-folder-item:nth-child(n+6) { animation-delay: 0.3s; }

@keyframes lens-folder-item-fade-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Folder Item */
.lens-folder-item {
    user-select: none;
    transition: var(--lens-transition);
    /* Prevent layout shift on load */
    transform: translateZ(0);
    will-change: auto;
}


.lens-folder-row {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease;
    gap: 0;
    min-height: 30px;
    /* Prevent layout shift */
    contain: layout style;
    /* Prevent text selection during drag attempts */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Ensure consistent layout during hover animations in tree mode */
.lens-folders-list:not(.lens-explorer-mode) .lens-folder-item:hover .lens-folder-row {
    transform: none;
}

/* Folder Checkbox - Hidden by default */
.lens-folder-checkbox {
    margin-right: 6px;
    cursor: pointer;
    flex-shrink: 0;
    display: none !important; /* Force hidden by default */
}

/* Show checkboxes ONLY in bulk mode */
body.lens-bulk-mode .lens-folder-checkbox {
    display: block !important;
}

/* Make folder rows clickable in bulk mode */
body.lens-bulk-mode .lens-folder-row {
    cursor: pointer;
}

/* Add hover effect in bulk mode */
body.lens-bulk-mode .lens-folder-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Adjust spacing when not in bulk mode */
body:not(.lens-bulk-mode) .lens-folder-row {
    /* Maintain proper spacing even without checkboxes */
}

/* Subtle bulk mode indicator - removed border as it looked weird */
body.lens-bulk-mode .lens-folder-sidebar {
    /* box-shadow: inset 0 0 0 2px var(--lens-primary); */
}

/* Disable certain actions in bulk mode */
body.lens-bulk-mode .lens-add-folder {
    opacity: 0.5;
    pointer-events: none;
}

/* Bulk Actions Bar */
.lens-bulk-actions {
    padding: 12px 16px;
    background: var(--lens-primary);
    color: white;
    display: none;
}

.lens-bulk-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.lens-select-all-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: white;
}

.lens-select-all-wrapper input {
    margin-right: 8px;
}

/* Style checkbox for visibility on blue background */
.lens-bulk-actions input[type="checkbox"] {
    border-color: white;
    background: white;
}

.lens-selected-info {
    font-size: 14px;
}

.lens-selected-count {
    font-weight: 600;
}

.lens-bulk-actions-buttons {
    display: flex;
    gap: 8px;
}

.lens-bulk-actions-buttons .button {
    font-size: 13px;
    padding: 0 12px;
    height: 30px;
    line-height: 28px;
    min-height: 30px;
}

.lens-bulk-cancel {
    background: white;
    color: var(--lens-text);
    border-color: white;
}

.lens-bulk-cancel:hover {
    background: #f0f0f0;
}

.lens-bulk-cancel:focus {
    outline: none !important;
    box-shadow: none !important;
}

.lens-bulk-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wp-core-ui .lens-bulk-delete.button-primary:not(:disabled),
.lens-bulk-delete.button-primary:not(:disabled) {
    background: var(--lens-danger) !important;
    border-color: var(--lens-danger) !important;
    color: white !important;
    text-shadow: none;
}

.wp-core-ui .lens-bulk-delete.button-primary:hover:not(:disabled),
.lens-bulk-delete.button-primary:hover:not(:disabled) {
    background: #b32d2e !important;
    border-color: #b32d2e !important;
    color: white !important;
}

.wp-core-ui .lens-bulk-delete.button-primary:focus:not(:disabled),
.lens-bulk-delete.button-primary:focus:not(:disabled) {
    outline: none !important;
    box-shadow: none !important;
}

.lens-bulk-delete:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lens-bulk-delete .dashicons {
    margin-right: 3px;
    vertical-align: sub;
    line-height: 1;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Primary hover state for folder rows - matches OS file explorers */
.lens-folder-row:hover {
    background: var(--lens-hover-bg);
    transition: background-color 0.15s ease;
    cursor: grab;
}

.lens-folder-row:active {
    cursor: grabbing;
}

/* Ensure only the directly hovered row shows hover state */
.lens-folder-children .lens-folder-row {
    /* Reset any inherited hover effects */
    background: transparent;
}

.lens-folder-children .lens-folder-row:hover {
    /* Apply hover only when directly hovering child rows */
    background: var(--lens-hover-bg);
}

.lens-folder-item.active > .lens-folder-row {
    background: rgba(34, 113, 177, 0.08); /* Balanced blue tint for good visibility */
    color: var(--lens-primary);
    position: relative;
}

/* Left border removed - subtle background is enough */

/* Selected folder (for bulk operations) */
.lens-folder-item.lens-selected > .lens-folder-row {
    background: #f0f6fc;
}

.lens-folder-item.lens-selected.active > .lens-folder-row {
    background: var(--lens-active-bg);
    color: var(--lens-primary);
}

/* Multi-selected folders (outside bulk mode) */
.lens-folder-item.lens-multi-selected > .lens-folder-row {
    background: #e8f4fd;
    border-left: 3px solid var(--lens-primary);
    padding-left: 13px; /* Adjust for border */
}

.lens-folder-item.lens-multi-selected > .lens-folder-row:hover {
    background: #d1e7fb;
}

/* Active folder that's also multi-selected */
.lens-folder-item.lens-multi-selected.active > .lens-folder-row {
    background: var(--lens-active-bg);
    color: var(--lens-primary);
    border-left: 3px solid var(--lens-primary);
}

.lens-folder-item.lens-multi-selected.active > .lens-folder-row::before {
    display: none; /* Hide the default active indicator since we have the border */
}

/* Context menu hover (right-click) */
.lens-folder-item.lens-context-hover > .lens-folder-row {
    background: #e5f3ff;
    color: var(--lens-primary);
}

/* Cut folder visual indicator */
.lens-folder-item.lens-folder-cut {
    opacity: 0.7 !important;
    transition: opacity 0.2s ease;
}

}

/* Indeterminate state styling */
.lens-folder-checkbox:indeterminate {
    opacity: 0.6;
}

/* Parent folder with partial selection */
.lens-folder-item.lens-partial > .lens-folder-row {
    background: #f8fbfd;
}

/* Folder Icon */
.lens-folder-icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
    color: var(--lens-folder-icon-color);
    transition: var(--lens-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Folder icon wrapper for lock overlay */
.lens-folder-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Lock icon overlay */
.lens-folder-lock-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: var(--lens-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lens-folder-lock-icon .dashicons {
    width: 10px;
    height: 10px;
    font-size: 10px;
    color: var(--lens-text-secondary) !important;
}

/* Hover state for locked folders */
.lens-folder-item:hover .lens-folder-lock-icon {
    background: var(--lens-primary);
}

.lens-folder-item:hover .lens-folder-lock-icon .dashicons {
    color: #ffffff !important;
}

/* Active/selected state for locked folders */
.lens-folder-item.active .lens-folder-lock-icon {
    background: var(--lens-primary);
}

.lens-folder-item.active .lens-folder-lock-icon .dashicons {
    color: #ffffff !important;
}

/* Colored folders with lock icons */
.lens-folder-icon[style*="color"] .lens-folder-lock-icon,
.lens-folder-icon-wrapper[style*="color"] .lens-folder-lock-icon {
    background: var(--lens-background);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Lock icon in colored folders uses the folder's color */
.lens-folder-icon[style*="color"] .lens-folder-lock-icon .dashicons,
.lens-folder-icon-wrapper[style*="color"] .lens-folder-lock-icon .dashicons {
    color: currentColor !important; /* Use the folder's color for the icon */
}

/* Hover state for colored folders - use folder color as background */
.lens-folder-item:hover .lens-folder-icon[style*="color"] .lens-folder-lock-icon,
.lens-folder-item:hover .lens-folder-icon-wrapper[style*="color"] .lens-folder-lock-icon {
    background: currentColor; /* Uses the folder's color */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lens-folder-item:hover .lens-folder-icon[style*="color"] .lens-folder-lock-icon .dashicons,
.lens-folder-item:hover .lens-folder-icon-wrapper[style*="color"] .lens-folder-lock-icon .dashicons {
    color: #ffffff !important; /* White icon on hover */
}

/* Active state for colored folders with lock */
.lens-folder-item.active .lens-folder-icon[style*="color"] .lens-folder-lock-icon,
.lens-folder-item.active .lens-folder-icon-wrapper[style*="color"] .lens-folder-lock-icon {
    background: currentColor;
}

.lens-folder-item.active .lens-folder-icon[style*="color"] .lens-folder-lock-icon .dashicons,
.lens-folder-item.active .lens-folder-icon-wrapper[style*="color"] .lens-folder-lock-icon .dashicons {
    color: #ffffff !important;
}

/* Ensure wrapper inherits color for colored folders */
.lens-folder-icon-wrapper[style*="color"] .dashicons-category {
    color: inherit;
}

/* Search result specific lock icon fixes */
.lens-folder-item[data-search-result="true"] .lens-folder-icon-wrapper {
    color: inherit;
}

.lens-folder-item.active .lens-folder-icon {
    color: var(--lens-primary);
}

.lens-folder-icon .dashicons {
    font-size: 19px;
    width: 19px;
    height: 19px;
    line-height: 1;
}

/* Folder icon states */
/* Folder icon hover - only when hovering the specific row */
.lens-folder-row:hover .lens-folder-icon {
    color: var(--lens-folder-icon-hover);
    /* Removed transform to match OS hover behavior */
}

/* Only change to open folder icon for default category folders */
.lens-folder-item.expanded > .lens-folder-row .lens-folder-icon .dashicons-category:before {
    content: "\f322"; /* Open folder icon */
}

/* All Media special styling */
.lens-all-media {
    border-radius: 0;
    margin: 0;
    /* Removed permanent background - will only show when active */
}

.lens-all-media .lens-folder-row {
    padding: 7px 15px;
}

.lens-all-media .lens-folder-icon {
    color: var(--lens-folder-icon-color); /* Use standard folder icon color */
}

.lens-all-media .lens-folder-name {
    font-weight: 500;
}

/* All Media hover state - same as other folders */
.lens-all-media .lens-folder-row:hover {
    background: var(--lens-hover-bg);
}

/* All Media active state - apply special styling only when active */
.lens-all-media.active {
    background: var(--lens-all-media-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.lens-all-media.active .lens-folder-icon {
    color: var(--lens-all-media-color);
}

.lens-all-media.active .lens-folder-name {
    color: var(--lens-all-media-color);
}

.lens-all-media.active .lens-folder-row {
    background: transparent; /* Override the standard active background */
}

.lens-all-media.active .lens-folder-row::before {
    display: none; /* Hide the standard active left border */
}

/* All Media count uses same styling as regular folder counts for consistency */

/* Folder Name */
.lens-folder-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Folder Count */
.lens-folder-count {
    background: var(--lens-badge-bg);
    color: var(--lens-badge-color);
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    margin-left: auto;
    transition: opacity 0.2s ease, color 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Hide zero counts to reduce clutter */
.lens-folder-count[data-count="0"] {
    display: none;
}

/* Prevent any transform or scale on hover */
.lens-folder-row:hover .lens-folder-count {
    transform: none !important;
}

/* Prevent animation on initial page load */
.lens-folder-count {
    animation: none !important;
    transform: none !important;
}

/* Disable transitions during page load */
body.loading .lens-folder-count,
.lens-folders-loading .lens-folder-count {
    transition: none !important;
}

/* Active folder count badge - match active folder styling */
.lens-folder-item.active > .lens-folder-row .lens-folder-count {
    background: var(--lens-primary);
    color: #fff;
    font-weight: 600;
}

/* Active folder zero count */
.lens-folder-item.active > .lens-folder-row:hover .lens-folder-count[data-count="0"] {
    opacity: 0.8;
}

/* Multi-selected active folders should maintain active badge color */
.lens-folder-item.lens-multi-selected.active > .lens-folder-row .lens-folder-count,
.lens-folder-item.lens-selected.active > .lens-folder-row .lens-folder-count {
    background: var(--lens-primary);
    color: #fff;
}

/* All Media active state count badge */
.lens-all-media.active > .lens-folder-row .lens-folder-count {
    background: var(--lens-all-media-color);
    color: #fff;
    font-weight: 600;
}

/* All Media folder should always show count */
.lens-all-media .lens-folder-count,
.lens-all-media .lens-folder-count[data-count="0"] {
    display: inline-flex !important;
    opacity: 1;
}

/* Ensure All Media folder count badge maintains full opacity on hover */
.lens-all-media:hover .lens-folder-count,
.lens-all-media:hover .lens-folder-count[data-count="0"] {
    opacity: 1 !important;
}

/* Segmented Count Control Styling */
.lens-count-segmented {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 9px;
    overflow: hidden; /* Keep segment edges clipped */
    font-size: 10px;
    font-weight: 500;
    position: relative;
    height: 18px;
    margin-left: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Maintain segmented control styling when parent folder is active */
.lens-all-media.active .lens-count-segmented,
.lens-folder-item.active .lens-count-segmented {
    border: 1px solid #c3c4c7;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Maintain segmented control styling on hover */
.lens-all-media:hover .lens-count-segmented,
.lens-folder-item:hover .lens-count-segmented {
    border: 1px solid #c3c4c7;
}

/* Maintain segmented control styling when unassigned is active */
.lens-all-media.unassigned-active .lens-count-segmented {
    border: 1px solid #c3c4c7;
    background: #fff;
}

/* Maintain segmented control during multi-selection */
.lens-all-media.lens-multi-selected .lens-count-segmented,
.lens-all-media.lens-selected .lens-count-segmented {
    border: 1px solid #c3c4c7;
    background: #fff;
}

.lens-count-segment {
    padding: 0 7px;
    height: 16px;
    line-height: 16px;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, width 0.3s ease;
    position: relative;
    color: #646970;
    background: transparent;
    border: none;
    z-index: 2;
    min-width: 26px;
    text-align: center;
}

/* Smooth transition for unassigned segment appearance */
.lens-count-segment.lens-count-unassigned {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lens-count-segment.lens-count-unassigned[style*="display: none"] {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Hide the old tooltip spans since we're using JavaScript tooltips */
.lens-count-segment .lens-tooltip {
    display: none !important;
}

/* Tooltip element that appears outside scrolling container - matches existing tooltip style */
.lens-segment-tooltip {
    position: fixed; /* Use fixed to position relative to viewport */
    background: var(--lens-text, #1e1e1e);
    color: var(--lens-background, #ffffff);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    font-weight: 500;
    box-shadow: var(--lens-shadow-md);
    z-index: 100001;
    transition: all 0.2s ease;
}

/* Increase z-index when hovering to provide better stacking context */
.lens-count-segment:hover {
    z-index: 10;
    position: relative;
}

/* Standard folder row positioning */
.lens-all-media .lens-folder-row {
    position: relative;
}

/* Standard All Media folder positioning */
.lens-all-media {
    position: relative;
}

/* Standard folders list positioning */
.lens-folders-list {
    position: relative;
}

/* Regular folder items positioning */
.lens-folder-item:not(.lens-all-media) {
    position: relative;
}

/* Vertical divider removed; rely on segment borders */

/* Ensure first and last segments respect rounded corners */
.lens-count-segment:first-child {
    border-radius: 8px 0 0 8px;
}

.lens-count-segment:last-child {
    border-radius: 0 8px 8px 0;
}

/* Hover state for inactive segments */
.lens-count-segment:not(.active):hover {
    color: #2271b1;
}

/* Active segment styling */
.lens-count-segment.active {
    color: #fff;
    font-weight: 600;
}

/* Sliding background indicator */
.lens-count-segmented::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(50% - 1px);
    height: calc(100% - 2px);
    background: linear-gradient(135deg, #2271b1 0%, #1e5e94 100%);
    border-radius: 7px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 1px 2px rgba(34, 113, 177, 0.15);
}

/* Move background to right segment when unassigned is active */
.lens-all-media.unassigned-active .lens-count-segmented::after {
    transform: translateX(calc(100% + 1px));
}

/* Removed segment border rules since vertical divider was removed */

/* Hover state for counts - removed to keep consistent appearance */
/* Count badges now remain unchanged on hover */

/* Remove duplicate hover state that was causing confusion */
/* Hover is now handled by .lens-folder-row:hover above */

/* Active items should maintain their active state on hover */
.lens-folder-item.active > .lens-folder-row:hover {
    background: rgba(34, 113, 177, 0.08); /* Slightly darker on hover */
}

/* Ensure active folder count badge maintains its styling on hover */
.lens-folder-item.active > .lens-folder-row:hover .lens-folder-count {
    background: var(--lens-primary);
    color: #fff;
}

/* Removed broad active styles that were affecting nested folders */
/* Active state is now handled by more specific selectors above */

/* Removed active state styling for folder count - keep consistent appearance */

/* Subfolder count badges removed because arrows indicate children.
   The expand/collapse arrow already communicates folder hierarchy. */

/* Hover state for folders with children */
.lens-folder-item.has-children .lens-folder-row {
    position: relative;
}

.lens-folder-item.has-children .lens-folder-row:hover {
    cursor: pointer;
}

/* Subfolder indicator hover state removed */

/* Visual feedback for clickable folders - subtle to match OS behavior */
.lens-folder-item.has-children .lens-folder-row:hover .lens-folder-icon {
    /* Transformation removed to mirror OS behavior */
    transition: color 0.15s ease;
}

/* Folder arrow indicator for folders with children */
.lens-folder-arrow-indicator {
    margin-left: 10px;
    color: var(--lens-text-secondary);
    opacity: 0.6;
    transition: var(--lens-transition);
}

/* Arrow indicator - show on row hover */
.lens-folder-row:hover .lens-folder-arrow-indicator {
    opacity: 1;
    color: var(--lens-primary);
}


/* Folder Actions Container */
.lens-folder-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 8px;
    cursor: default !important;
}

/* Three-dot Menu Trigger */
.lens-folder-menu-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer !important;
    transition: all 0.2s ease;
    color: var(--lens-text-secondary);
    user-select: none;
}

.lens-folder-menu-trigger:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--lens-text-primary);
}

.lens-folder-menu-trigger:active {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
}

.lens-folder-menu-trigger .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Show three-dots on folder hover, hide count */
.lens-folder-row:hover .lens-folder-menu-trigger {
    display: flex;
}

.lens-folder-row:hover .lens-folder-count {
    display: none;
}

/* Removed conflicting rule that was hiding all counts on hover
   The specific rules for data-count="0" will handle visibility properly */

/* Exception: All Media folder always shows count */
.lens-all-media .lens-folder-row:hover .lens-folder-count {
    display: inline-flex !important;
}

.lens-all-media .lens-folder-row:hover .lens-folder-menu-trigger {
    display: none;
}

/* Active folder styling */
.lens-folder-item.active .lens-folder-menu-trigger {
    color: var(--lens-primary);
}


/* Nested Folders - Dynamic Indentation */
/* These values are dynamically calculated by JavaScript based on available space */
:root {
    --lens-indent-base: 12px;
    --lens-indent-increment: 20px;
    --lens-max-indent: 200px; /* Maximum indentation to prevent overflow */
}

/* Dynamic level rules will be injected by JavaScript */
/* This ensures proper indentation for unlimited nesting levels */

/* Deep nesting visual indicators */
.lens-folder-item[data-deep-nesting="true"] > .lens-folder-row {
    position: relative;
    background: linear-gradient(to right, transparent 0%, transparent calc(100% - 60px), rgba(33, 113, 177, 0.03) 100%);
}

/* Depth indicator line */
.lens-folder-item[data-deep-nesting="true"] > .lens-folder-row::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--lens-primary);
    opacity: 0.3;
    border-radius: 2px;
}

/* Add subtle border for deep levels */
.lens-folder-item[data-level="8"] > .lens-folder-row,
.lens-folder-item[data-level="9"] > .lens-folder-row {
    border-left: 2px solid rgba(33, 113, 177, 0.1);
    margin-left: -2px;
}

/* Compressed indentation indicator */
.lens-folder-item[data-level="7"] > .lens-folder-children .lens-folder-row,
.lens-folder-item[data-level="8"] > .lens-folder-children .lens-folder-row,
.lens-folder-item[data-level="9"] > .lens-folder-children .lens-folder-row {
    font-size: 0.95em;
}

/* Hover effect for deep nested items */
.lens-folder-item[data-deep-nesting="true"] > .lens-folder-row:hover {
    background: linear-gradient(to right, var(--lens-hover-bg) 0%, var(--lens-hover-bg) calc(100% - 60px), rgba(33, 113, 177, 0.08) 100%);
}

/* Tooltip for deep nesting */
.lens-folder-item[data-deep-nesting="true"] > .lens-folder-row .lens-folder-name::after {
    content: attr(data-depth-indicator);
    position: absolute;
    right: 40px;
    font-size: 0.75em;
    color: var(--lens-text-secondary);
    opacity: 0;
    transition: opacity 0.2s;
}

.lens-folder-item[data-deep-nesting="true"] > .lens-folder-row:hover .lens-folder-name::after {
    opacity: 0.6;
}


/* Expand/Collapse Arrow */
.lens-folder-arrow {
    width: 18px;
    height: 18px;
    margin-right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--lens-text-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

.lens-folder-arrow:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-text);
}

.lens-folder-arrow svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

/* Fix: Arrow should point down when expanded, not by default */
.lens-folder-item.expanded > .lens-folder-row .lens-folder-arrow svg {
    transform: rotate(90deg);
}

/* Ensure arrows remain visible during hover in tree mode */
.lens-folders-list:not(.lens-explorer-mode) .lens-folder-item.has-children:hover .lens-folder-arrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Empty folder arrow (no children yet) */
.lens-folder-arrow.lens-folder-arrow-empty {
    opacity: 0.4;
}

/* Favorites Section */
.lens-favorites-section {
    border-bottom: 1px solid var(--lens-border);
    margin-bottom: 16px;
    padding-bottom: 12px;
    animation: lensFadeInDown 0.3s ease-out;
}

@keyframes lensFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lens-favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    font-weight: 600;
    color: var(--lens-text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lens-favorites-list {
    margin-top: 4px;
}

.lens-favorites-empty {
    padding: 16px;
    text-align: center;
    color: var(--lens-text-secondary);
    font-size: 13px;
}

/* Favorite items in the favorites section */
.lens-favorite-item > .lens-folder-row {
    transition: background-color 0.2s ease;
}

.lens-favorite-item > .lens-folder-row:hover {
    background: var(--lens-hover-bg);
}

/* Favorite Star Icon - Removed to only show in context menu */
/*
.lens-folder-favorite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    cursor: pointer;
    color: var(--lens-text-secondary);
    transition: all 0.2s ease;
    opacity: 0;
}

.lens-folder-item:hover .lens-folder-favorite,
.lens-folder-item.is-favorite .lens-folder-favorite {
    opacity: 1;
}

.lens-folder-favorite:hover {
    color: #f0b849;
    transform: scale(1.1);
}

.lens-folder-favorite.active,
.lens-folder-item.is-favorite .lens-folder-favorite {
    color: #f0b849;
    opacity: 1;
}

.lens-folder-favorite .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
*/

/* Favorite folder in tree */
.lens-folder-item.is-favorite > .lens-folder-row {
    background: linear-gradient(to right, transparent 0%, transparent calc(100% - 80px), rgba(240, 184, 73, 0.05) 100%);
}

.lens-folder-item.is-favorite > .lens-folder-row:hover {
    background: linear-gradient(to right, var(--lens-hover-bg) 0%, var(--lens-hover-bg) calc(100% - 80px), rgba(240, 184, 73, 0.1) 100%);
}

/* Favorite folder selection states */
.lens-folder-item.is-favorite.active > .lens-folder-row {
    background: rgba(34, 113, 177, 0.08) !important;
}

.lens-folder-item.is-favorite.active > .lens-folder-row:hover {
    background: rgba(34, 113, 177, 0.08) !important;
}

.lens-folder-item.is-favorite.lens-selected > .lens-folder-row {
    background: #f0f6fc !important;
}

.lens-folder-item.is-favorite.lens-multi-selected > .lens-folder-row {
    background: #e8f4fd !important;
    border-left: 3px solid var(--lens-primary);
    padding-left: 13px;
}

.lens-folder-item.is-favorite.lens-multi-selected > .lens-folder-row:hover {
    background: #d1e7fb !important;
}

.lens-folder-item.is-favorite.lens-selected.active > .lens-folder-row {
    background: var(--lens-active-bg) !important;
    color: var(--lens-primary);
}

.lens-folder-item.is-favorite.lens-multi-selected.active > .lens-folder-row {
    background: var(--lens-active-bg) !important;
    color: var(--lens-primary);
    border-left: 3px solid var(--lens-primary);
    padding-left: 13px;
}

/* View Toggle Buttons */
.lens-view-toggle {
    display: flex;
    padding: 10px 20px;
    background: var(--lens-bg-primary);
    border-bottom: 1px solid #e0e0e07a;
    justify-content: flex-start;
    align-items: center;
}

.lens-view-toggle-btn {
    padding: 4px 12px;
    margin-right: 8px;
    border: solid 1px #80808029;
    background: var(--lens-bg-tertiary);
    color: var(--lens-text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    white-space: nowrap;
}

.lens-view-toggle-btn:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-text-primary);
}

.lens-view-toggle-btn.active {
    background: #2271b1;
    color: #ffffff;
    border-color: transparent;
}

.lens-view-toggle-btn:focus {
    outline: none;
}

/* WordPress admin color scheme adjustments */
body.admin-color-fresh .lens-view-toggle-btn.active {
    background: #2271b1;
}

body.admin-color-light .lens-view-toggle-btn.active {
    background: #0073aa;
}

body.admin-color-modern .lens-view-toggle-btn.active {
    background: #3858e9;
}

body.admin-color-midnight .lens-view-toggle-btn.active {
    background: #e14d43;
}

/* Favorites Empty State Wrapper */
.lens-favorites-empty-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    padding: 20px;
    flex: 1;
}

/* Favorites Empty State */
.lens-favorites-empty-state {
    text-align: center;
    color: var(--lens-text-secondary);
    animation: lensFadeIn 0.3s ease-out;
}

/* Disable animation for subsequent views */
.lens-favorites-empty-state.lens-no-animation {
    animation: none;
}

.lens-favorites-empty-state .dashicons {
    font-size: 32px;
    color: #c3c4c7;
    margin: 0 auto 12px;
    display: block;
    width: 32px;
    height: 32px;
    line-height: 1;
    opacity: 0.5;
}

.lens-favorites-empty-state .dashicons:before {
    display: block;
    width: 32px;
    height: 32px;
    font-size: 32px;
}

.lens-favorites-empty-state h3 {
    font-size: 14px;
    font-weight: 500;
    color: #50575e;
    margin: 0 0 8px 0;
    letter-spacing: 0.01em;
}

.lens-favorites-empty-state p {
    font-size: 13px;
    margin: 0;
    color: #8c8f94;
    line-height: 1.5;
    max-width: 280px;
    margin: 0 auto;
}

@keyframes lensFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Favorites view specific styling */
.lens-folders-list.lens-favorites-view {
    padding-top: 0;
}

.lens-folders-list.lens-favorites-view .lens-folder-item {
    margin-bottom: 2px;
}

.lens-folder-arrow.lens-folder-arrow-empty:hover {
    opacity: 0.7;
    background: var(--lens-hover-bg);
}

/* Arrow placeholder to maintain spacing */
.lens-folder-arrow-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 3px;
    flex-shrink: 0;
}


/* Loading State */
.lens-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--lens-text-secondary);
    font-size: 14px;
}

.lens-loading .spinner {
    margin-right: 10px;
}

/* Sidebar Footer */
.lens-sidebar-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--lens-border);
    background: var(--lens-background);
}

.lens-footer-icons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.lens-trash-button {
    margin-left: auto;
}

.lens-footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--lens-text-secondary);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lens-footer-icon:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-text);
    border-color: var(--lens-border);
}

.lens-footer-icon:focus {
    outline: none;
}

.lens-footer-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.lens-footer-icon svg.lucide {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    transition: all 0.2s ease;
}

/* Trash button specific styles */
.lens-trash-button.active {
    background: var(--lens-active-bg);
    color: var(--lens-primary);
    border-color: transparent;
}

/* Hide active tooltip by default, show default */
.lens-trash-button .lens-tooltip-active {
    display: none;
}

/* When trash button is active, hide default tooltip and show active tooltip */
.lens-trash-button.active .lens-tooltip-default {
    display: none;
}

.lens-trash-button.active .lens-tooltip-active {
    display: block;
}

.lens-trash-button.active:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-primary);
}

.lens-trash-button.active .dashicons,
.lens-trash-button.active:hover .dashicons {
    transform: none;
}

/* Trash View Styles */
.lens-view-trash {
    /* Inherit styles from view toggle buttons */
}

.lens-trash-list {
    padding: 0;
}

/* Ensure trash folders expansion works properly */
.lens-trash-tree .lens-folder-item.expanded > .lens-folder-children {
    display: block !important;
}
.lens-trash-tree .lens-folder-item:not(.expanded) > .lens-folder-children {
    display: none !important;
}

/* Trash folders use same styling as normal folders */

/* Folder meta information (used in trash view) */
.lens-folder-meta {
    display: inline-block;
    font-size: 11px;
    color: var(--lens-text-secondary);
    margin-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-style: italic;
    opacity: 0.7;
}

/* In tree view, show meta on new line */
.lens-folders-tree .lens-folder-meta {
    display: block;
    margin-top: 2px;
    margin-left: 0;
}

/* Hidden utility class for smooth transitions */
.lens-hidden {
    display: none !important;
}

/* Empty trash button styling */
.lens-empty-trash-button {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    color: #646970;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.lens-empty-trash-button:hover {
    background: rgba(214, 54, 56, 0.04);
    border-color: rgba(214, 54, 56, 0.3);
    color: #d63638;
}

.lens-empty-trash-button:active {
    background: rgba(214, 54, 56, 0.08);
    border-color: rgba(214, 54, 56, 0.4);
    transform: translateY(-50%) scale(0.98);
}

.lens-empty-trash-button .lens-feature-badge {
    margin-left: 8px;
    margin-right: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: inherit;
}

/* Adjust footer to accommodate dynamic button switching */
.lens-sidebar-footer {
    position: relative;
}

/* Disabled state for empty trash button */
.lens-empty-trash-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0.05);
    color: #a0a5aa;
}

.lens-empty-trash-button.disabled:hover {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.05);
    color: #a0a5aa;
    transform: translateY(-50%);
}

/* Trash count badge - subtle design */
.lens-trash-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    background: var(--lens-border);
    color: var(--lens-text-secondary);
    font-size: 11px;
    font-weight: 500;
    border-radius: 9px;
}

/* Trash Empty State */
.lens-empty-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    color: var(--lens-text-secondary);
    animation: lensFadeIn 0.3s ease-out;
}

.lens-empty-content .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #c3c4c7;
    margin: 0 auto 12px;
    display: block;
    line-height: 1;
    opacity: 0.5;
}

.lens-empty-content h3 {
    font-size: 14px;
    font-weight: 500;
    color: rgb(80, 87, 94);
    letter-spacing: 0.01em;
    margin: 0 0 8px;
}

.lens-empty-content p {
    font-size: 13px;
    color: rgb(140, 143, 148);
    line-height: 1.5;
    max-width: 280px;
    margin: 0 auto;
}

.lens-trash-list {
    padding: 0;
}

.lens-trash-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lens-border);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.lens-trash-item:hover {
    background: var(--lens-hover-bg);
}

.lens-trash-item.selected {
    background: var(--lens-selected-bg);
}

.lens-trash-item-checkbox {
    margin-right: 12px;
    flex-shrink: 0;
}

.lens-trash-item-checkbox input[type="checkbox"] {
    cursor: pointer;
}

.lens-trash-item-icon {
    margin-right: 12px;
    color: var(--lens-text-secondary);
    flex-shrink: 0;
}

.lens-trash-item-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.lens-trash-item-content {
    flex: 1;
    min-width: 0;
}

.lens-trash-item-name {
    font-weight: 500;
    color: var(--lens-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lens-trash-item-meta {
    font-size: 12px;
    color: var(--lens-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lens-trash-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lens-trash-item:hover .lens-trash-item-actions {
    opacity: 1;
}

.lens-trash-item-actions button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px;
    color: var(--lens-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lens-trash-item-actions button:hover {
    background: var(--lens-background);
    border-color: var(--lens-border);
    color: var(--lens-text);
}

.lens-trash-restore:hover {
    color: var(--lens-primary) !important;
}

.lens-trash-delete:hover {
    color: #DC2626 !important;
}

.lens-trash-item-actions .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Contextual Menu */
.lens-menu-shortcut {
    float: right;
    color: #999;
    font-size: 11px;
    margin-left: 20px;
}

/* Context menu styling with grouped sections */
.lens-context-menu {
    position: fixed;
    background: var(--lens-background);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12);
    z-index: 10000;
    min-width: 200px;
    padding: 4px 0;
    animation: contextMenuFadeIn 0.15s cubic-bezier(0.2, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.lens-context-menu:focus {
    outline: none;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lens-context-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lens-menu-item {
    padding: 6px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 13px;
    transition: background-color 0.1s ease;
    margin: 0;
    color: var(--lens-text);
    position: relative;
    border-bottom: none;
}

/* Ensure hidden menu items don't create spacing */
.lens-menu-item[style*="display: none"] {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

/* Group context menu items with bottom borders */
/* Group separators - add bottom border to create visual sections */

/*
Grouping rules:
1. Primary: open-new-tab → BORDER
2. Folder Management: new-folder, rename, set-color, toggle-favorite → BORDER
3. Clipboard: cut, copy, paste → BORDER
4. Collaboration: share → BORDER
5. File Operations: move, select-all, compress → BORDER
6. Utilities: lock-settings, details, refresh → BORDER
7. Destructive: delete (no border, isolated at end)
*/

/* Major Section 1: Primary Navigation */
.lens-menu-item[data-action="open-new-tab"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 9px;
    margin-bottom: 3px;
}

/* Major Section 2: Folder Management */
.lens-menu-item[data-action="toggle-favorite"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 9px;
    margin-bottom: 3px;
}

/* Major Section 3: Clipboard Operations */
.lens-menu-item[data-action="copy"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 9px;
    margin-bottom: 3px;
}

/* Major Section 4: Collaboration/Sharing */
.lens-menu-item[data-action="share"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 9px;
    margin-bottom: 3px;
}

/* Major Section 5: File Operations (move, compress, etc) */
.lens-menu-item[data-action="compress"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 9px;
    margin-bottom: 3px;
}

/* Major Section 6: Utilities & Information */
.lens-menu-item[data-action="details"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 9px;
    margin-bottom: 3px;
}

/* Group 9: Destructive - Delete gets no border, always last */

/* Divider - Keep for backwards compatibility but hide by default */
.lens-menu-item.lens-menu-divider {
    display: none !important;
    padding: 0 !important;
    cursor: default !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

.lens-menu-item:hover:not(.lens-menu-divider):not(.is-disabled) {
    background: rgba(0, 0, 0, 0.04);
}

/* Special styling for delete menu item */
.lens-menu-item[data-action="delete"]:hover:not(.is-disabled) {
    background: rgba(239, 68, 68, 0.08);
}

.lens-menu-item[data-action="delete"]:hover:not(.is-disabled) .dashicons {
    color: #DC2626;
}

.lens-menu-item[data-action="delete"]:hover:not(.is-disabled) span {
    color: #DC2626;
}

.lens-menu-item .dashicons {
    margin-right: 10px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--lens-text-secondary);
    flex-shrink: 0;
}

.lens-menu-divider {
    display: none;
    height: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    cursor: default;
}

.lens-menu-divider:hover {
    background: transparent;
}

/* Hide empty dividers and remove their spacing */
.lens-menu-divider:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
}

.lens-menu-danger {
    color: var(--lens-text);
}

.lens-menu-danger .dashicons {
    color: var(--lens-text-secondary);
}

/* Keyboard shortcut hints in context menu */
.lens-menu-item .lens-menu-shortcut {
    margin-left: auto;
    padding-left: 24px;
    font-size: 12px;
    color: var(--lens-text-secondary);
    opacity: 0.6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.lens-menu-item .lens-submenu-arrow {
    margin-left: auto;
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
    width: auto;
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    padding-right: 0;
}

.lens-menu-item:hover .lens-submenu-arrow {
    opacity: 1;
}

/* Hide upload folder icon on media-new.php page */
body.media-new-php .lens-upload-folder-icon-button {
    display: none !important;
}

/* Dialog */
.lens-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000001;
    animation: dialogFadeIn 0.2s ease;
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lens-dialog-content {
    background: var(--lens-background);
    border-radius: 8px;
    box-shadow: var(--lens-shadow-lg);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: dialogSlideIn 0.3s ease;
    position: relative;
    z-index: 10000002;
}

@keyframes dialogSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.lens-dialog-header {
    padding: 20px;
    border-bottom: 1px solid var(--lens-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lens-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.lens-dialog-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--lens-text-secondary);
    transition: var(--lens-transition);
    position: relative;
}

.lens-dialog-close:hover {
    color: var(--lens-text);
}


.lens-dialog-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
}

/* Create folder dialog specific sizing */
#lens-create-folder-dialog .lens-dialog-content {
    max-width: 440px;
    width: 90%;
}

/* Compact header for create folder dialog */
#lens-create-folder-dialog .lens-dialog-header {
    padding: 16px 20px;
}

#lens-create-folder-dialog .lens-dialog-header h3 {
    font-size: 16px;
}

/* Special handling for create folder dialog to allow tooltip overflow */
#lens-create-folder-dialog .lens-dialog-body {
    overflow: visible;
    padding: 20px; /* Reduced padding for more compact design */
}

/* Compact footer for create folder dialog */
#lens-create-folder-dialog .lens-dialog-footer {
    padding: 16px 20px;
}

/* Compact form fields for create folder dialog */
#lens-create-folder-dialog .lens-field-group {
    margin-bottom: 16px;
}

#lens-create-folder-dialog .lens-field-group:last-child {
    margin-bottom: 0;
}

.lens-dialog-footer {
    padding: 20px;
    border-top: 1px solid var(--lens-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Folder Details Dialog */
#lens-details-dialog {
    background: rgba(0, 0, 0, 0.5);
}

.lens-details-dialog-content {
    position: relative;
    max-width: 400px;
    width: 400px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Header */
.lens-details-header {
    position: relative;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e6;
    background: linear-gradient(to bottom, #ffffff, #fafbfc);
    border-radius: 6px 6px 0 0;
}

.lens-details-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--lens-text, #1d2327);
    margin: 0;
}

.lens-details-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}

.lens-details-close:hover {
    background: #f3f4f5;
}

.lens-details-close:active {
    background: #e8e9ea;
    transform: scale(0.96);
}

.lens-details-close:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.lens-details-close svg {
    width: 16px;
    height: 16px;
    stroke: var(--lens-text, #1d2327);
    opacity: 0.6;
    transition: opacity 0.12s ease;
}

.lens-details-close:hover svg {
    opacity: 1;
}

/* Body */
.lens-details-body {
    padding: 16px 20px 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

/* Section grouping */
.lens-details-section {
    display: flex;
    flex-direction: column;
}

/* First section gets subtle top padding */
.lens-details-section:first-child {
    padding-top: 2px;
}


/* Divider between sections */
.lens-details-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #eeeff0 10%, #eeeff0 90%, transparent);
    margin: 12px 0;
}

/* Individual row - horizontal layout */
.lens-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0;
    min-height: 26px;
}

.lens-detail-row-compact {
    padding: 5px 0;
    min-height: 24px;
}

.lens-detail-row-path {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 0;
}

/* Label - left aligned */
.lens-detail-label {
    font-size: 12px;
    font-weight: 500;
    color: #57606a;
    margin: 0;
    flex-shrink: 0;
    min-width: 75px;
    letter-spacing: -0.003em;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* File count toggle switch */
.lens-detail-file-toggle {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.lens-detail-file-toggle:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
    border-radius: 10px;
}

.lens-toggle-track {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    background: #d0d1d3;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.lens-detail-file-toggle:hover .lens-toggle-track {
    background: #b5b7ba;
}

.lens-detail-file-toggle.active .lens-toggle-track {
    background: #2271b1;
}

.lens-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.lens-detail-file-toggle.active .lens-toggle-thumb {
    transform: translateX(12px);
}

/* Reset font family for tooltip inside toggle button */
.lens-detail-file-toggle .lens-tooltip {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Value - right aligned */
.lens-detail-value {
    font-size: 12px;
    font-weight: 400;
    color: var(--lens-text, #1d2327);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: right;
    flex: 1;
}

/* Subtle selection styling */
.lens-detail-value::selection,
.lens-detail-path::selection,
.lens-detail-url::selection {
    background: #cce7ff;
    color: #1d2327;
}

/* Make important values stand out subtly */
.lens-detail-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--lens-text, #1d2327);
    letter-spacing: -0.008em;
}

/* Subtle emphasis for numeric values */
.lens-detail-file-count,
.lens-detail-subfolder-count,
.lens-detail-size {
    font-weight: 500;
    color: #2c3338;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Date values */
.lens-detail-created,
.lens-detail-modified {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Path/URL section with tabs */
.lens-details-path-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eeeff0;
}

/* Tab bar container for path/URL section */
.lens-detail-path-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 8px;
}

/* Individual tab button */
.lens-detail-path-tab {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #646970;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
    letter-spacing: -0.008em;
    position: relative;
}

.lens-detail-path-tab:hover {
    color: #1d2327;
    background: #f6f7f7;
}

.lens-detail-path-tab.active {
    color: #1d2327;
    background: #f0f1f2;
}

.lens-detail-path-tab:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}

/* Content area */
.lens-detail-path-content {
    position: relative;
    min-height: 32px;
}

/* Base styles for both path and URL displays */
.lens-detail-path-display {
    font-size: 11px;
    font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-weight: 400;
    text-align: left;
    word-break: break-all;
    line-height: 1.6;
    letter-spacing: -0.005em;
    padding: 4px 0;
    display: none;
}

.lens-detail-path-display.active {
    display: block;
}

/* URL container needs flex when active */
.lens-detail-url-container.active {
    display: flex;
}

/* Hierarchical path - default view */
.lens-detail-path-display[data-tab-content="path"] {
    display: none;
    align-items: center;
    gap: 6px;
    color: #50575e;
    background: #fafbfc;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #e8e9eb;
}

.lens-detail-path-display[data-tab-content="path"].active {
    display: flex;
}

.lens-detail-path-icon {
    color: #8c8f94;
    font-size: 14px;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.lens-detail-path {
    color: #50575e;
    flex: 1;
    word-break: break-word;
}

/* URL container - with copy button */
.lens-detail-url-container {
    position: relative;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: #fafbfc;
    border: 1px solid #e8e9eb;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.lens-detail-url-container:hover {
    background: #f6f7f7;
    border-color: #dcdee0;
}

/* URL text */
.lens-detail-url {
    color: #2271b1;
    user-select: all;
    cursor: text;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Copy button */
.lens-detail-url-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

/* Reset font family for tooltip inside copy button */
.lens-detail-url-copy .lens-tooltip {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.lens-detail-url-container:hover .lens-detail-url-copy {
    opacity: 1;
    pointer-events: auto;
}

.lens-detail-url-copy:hover {
    opacity: 1;
}

.lens-detail-url-copy:active {
    transform: scale(0.95);
}

.lens-detail-url-copy svg {
    width: 13px;
    height: 13px;
    stroke: #50575e;
    stroke-width: 2;
}

.lens-detail-url-copy:hover svg {
    stroke: #1d2327;
}

.lens-detail-url-copy.copied {
    pointer-events: none;
}

.lens-detail-url-copy:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
}


/* Loading state */
.lens-details-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.lens-details-loading .spinner {
    margin: 0;
}

/* Responsive */
@media (max-width: 600px) {
    .lens-details-dialog-content {
        max-width: calc(100vw - 24px);
        width: calc(100vw - 24px);
    }

    .lens-details-header {
        padding: 14px 18px;
    }

    .lens-details-body {
        padding: 14px 18px 16px;
    }

    .lens-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 8px 0;
    }

    .lens-detail-row-compact {
        padding: 7px 0;
    }

    .lens-detail-label {
        min-width: auto;
    }

    .lens-detail-value {
        text-align: left;
    }
}

/* Delete Dialog Styles */
.lens-delete-dialog .lens-dialog-content {
    max-width: 480px;
}

/* Dialog styles for lens-macos-dialog variant */
.lens-macos-dialog .lens-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
}

.lens-macos-dialog .lens-dialog-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 420px;
    padding: 24px;
    z-index: 99999;
    animation: lensMacDialogIn 0.2s ease;
}

@keyframes lensMacDialogIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.lens-macos-dialog h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    letter-spacing: -0.01em;
}

.lens-macos-dialog p {
    margin: 0 0 24px 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.lens-macos-dialog .lens-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
}

/* Use default WordPress button styles */
.lens-macos-dialog .button {
    margin: 0;
}

/* Remove outline on primary button focus */
.lens-macos-dialog .button-primary:focus {
    outline: none;
    box-shadow: none;
}

/* Add danger button style if WordPress doesn't have it */
.button-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

.button-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: white;
}

.button-danger:active,
.button-danger:focus {
    background: #991b1b;
    border-color: #991b1b;
    color: white;
}

.lens-delete-dialog .lens-dialog-warning {
    background: #fff8e5;
    border: 1px solid #ffeb99;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 16px 0;
    color: #5a4a00;
    font-size: 14px;
}

.lens-modern-dialog .lens-dialog-warning {
    background: #fef3c7;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0 8px;
    color: #92400e;
    font-size: 13px;
    text-align: center;
}

.lens-delete-dialog .lens-dialog-info {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 16px 0;
    color: #0d47a1;
    font-size: 14px;
}

/* Permanent delete dialog styles */
.lens-trash-dialog.lens-permanent-delete h2 {
    color: var(--lens-danger);
}

.lens-trash-dialog.lens-permanent-delete .lens-dialog-warning {
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 16px 0;
    color: #c62828;
    font-size: 14px;
}

.lens-delete-dialog .lens-delete-options {
    margin: 24px 0;
}

.lens-delete-dialog .lens-delete-option {
    display: block;
    margin-bottom: 16px;
    padding: 16px;
    border: 2px solid var(--lens-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lens-delete-dialog .lens-delete-option:hover {
    border-color: var(--lens-primary);
    background: #f8fafb;
}

.lens-delete-dialog .lens-delete-option input[type="radio"] {
    margin-right: 12px;
    margin-top: 2px;
    float: left;
}

.lens-delete-dialog .lens-option-label {
    display: block;
    margin-left: 28px;
}

.lens-delete-dialog .lens-option-label strong {
    display: block;
    color: var(--lens-text);
    font-weight: 600;
    margin-bottom: 4px;
}

.lens-delete-dialog .lens-option-desc {
    display: block;
    color: var(--lens-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.lens-delete-dialog .lens-option-desc.lens-danger {
    color: var(--lens-danger);
}

.lens-delete-dialog .lens-delete-option:has(input:checked) {
    border-color: var(--lens-primary);
    background: #f8fafb;
}

.lens-delete-dialog .button-danger {
    background: var(--lens-danger);
    border-color: var(--lens-danger);
    color: white;
}

.lens-delete-dialog .button-danger:hover {
    background: #a8312f;
    border-color: #a8312f;
}

/* Empty Trash Dialog - ensure it appears above WordPress media modal */
#lens-empty-trash-dialog,
#lens-delete-permanent-dialog {
    position: fixed !important;
    z-index: 999999 !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lens-empty-trash-dialog .lens-dialog-overlay,
#lens-delete-permanent-dialog .lens-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999998;
}

#lens-empty-trash-dialog .lens-dialog-content,
#lens-delete-permanent-dialog .lens-dialog-content {
    position: relative;
    z-index: 999999;
    background: white;
    border-radius: 8px;
    padding: 24px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Drag and Drop Styles */
.lens-dragging {
    opacity: 0.5;
}

.lens-drag-over {
    background: var(--lens-active-bg) !important;
    box-shadow: inset 0 0 0 2px var(--lens-primary);
}

.lens-drop-placeholder {
    height: 2px;
    background: var(--lens-primary);
    margin: 0 16px;
    position: relative;
}

.lens-drop-placeholder::before,
.lens-drop-placeholder::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--lens-primary);
    border-radius: 50%;
    top: -3px;
}

.lens-drop-placeholder::before {
    left: -4px;
}

.lens-drop-placeholder::after {
    right: -4px;
}

/* Media Item Overlay for Drag */
.attachment.lens-draggable {
    cursor: move;
}

.attachment.lens-dragging {
    opacity: 0.5;
    outline: 2px solid var(--lens-primary);
    outline-offset: -2px;
}

/* Visual feedback for bulk selected items being dragged */
.attachments-browser.mode-select .attachment.selected.lens-dragging {
    opacity: 0.6;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

/* Removing animation for smooth removal */
.attachment.lens-removing {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

/* Fix for attachment details sidebar */
body.upload-php.lens-active .media-sidebar {
    right: 0;
}

/* Let WordPress handle attachment spacing */

/* Mobile toggle button */
.lens-mobile-toggle {
    display: none;
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--lens-primary);
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 12px 8px;
    cursor: pointer;
    z-index: 10001;
    box-shadow: var(--lens-shadow-md);
    transition: var(--lens-transition);
}

.lens-mobile-toggle:hover {
    background: var(--lens-primary-hover);
}

.lens-mobile-toggle .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Overlay for mobile */
.lens-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

/* Responsive Design */
@media (max-width: 1200px) {
    /* Sidebar width now handled by ResizeHandler - respects user preference */
    .lens-folder-sidebar {
        /* Width controlled by JavaScript ResizeHandler */
        max-width: 360px; /* Reduce max width on smaller screens */
    }
    
    body.upload-php.lens-active.lens-sidebar-collapsed #wpbody-content {
        padding-left: 48.8px;
    }
    
    body.upload-php.lens-active.lens-sidebar-collapsed #wpfooter {
        margin-left: 48.8px;
    }
    
    /* Adjust footer text alignment for tablet */
    body.upload-php.lens-active #wpfooter p {
        margin-left: 148px;
    }
    
    body.upload-php.lens-active.lens-sidebar-collapsed #wpfooter p {
        margin-left: 148px;
    }
}

@media (max-width: 960px) {
    /* On small screens the WP admin menu is not a left rail.
       Make Lens sidebar an off‑canvas drawer. */
    .lens-folder-sidebar {
        position: fixed;
        left: 0;
        top: 46px; /* Mobile admin bar height */
        width: min(85vw, 320px);
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: var(--lens-shadow-md);
    }

    .lens-folder-sidebar.mobile-open {
        transform: translateX(0);
        z-index: 10000;
    }

    /* Never show the collapsed expand rail on mobile */
    .lens-expand-panel {
        display: none !important;
    }

    /* Remove desktop offsets so content uses full width */
    body.upload-php.lens-active #wpbody-content,
    body.upload-php.lens-active.lens-sidebar-collapsed #wpbody-content {
        padding-left: 0 !important;
    }

    body.upload-php.lens-active #wpfooter {
        margin-left: 0 !important;
    }

    body.upload-php.lens-active #wpfooter p {
        margin-left: 0 !important;
    }

    .lens-mobile-toggle {
        display: block;
    }

    .lens-mobile-overlay {
        display: none;
    }

    .lens-mobile-overlay.active {
        display: block;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.lens-folder-item {
    animation: slideInLeft 0.3s ease;
}

/* Folder Rename Input */
.lens-rename-input {
    flex: 1;
    padding: 4px 8px;
    margin-right: 12px; /* Add spacing from count */
    border: 1px solid var(--lens-border);
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    background: var(--lens-background);
    color: var(--lens-text);
    min-width: 0; /* Allow shrinking */
    max-width: 200px; /* Prevent excessive expansion */
    transition: var(--lens-transition);
}

.lens-rename-input:focus {
    border-color: var(--lens-primary);
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1);
}

/* Legacy empty state styles retained for reference (superseded at line 4588) */
/* Kept for reference but commented out to avoid conflicts
.lens-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--lens-text-secondary);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lens-empty-state .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.lens-empty-state p {
    margin: 0 0 16px;
    font-size: 14px;
}
*/

/* Tooltip Base Styles */
.lens-tooltip {
    position: absolute;
    background: var(--lens-text, #1e1e1e);
    color: var(--lens-background, #ffffff);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transition-delay: 0s;
    pointer-events: none;
    font-weight: 500;
    box-shadow: var(--lens-shadow-md);
    z-index: 100002;
    text-transform: capitalize;
}

.lens-tooltip--managed {
    pointer-events: none;
}

*:hover > .lens-tooltip--managed,
*:focus > .lens-tooltip--managed,
*:focus-within > .lens-tooltip--managed {
    visibility: hidden !important;
    opacity: 0 !important;
}

#lens-tooltip-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--lens-z-index-tooltip-layer, 12000000);
}

#lens-tooltip-layer .lens-tooltip {
    position: fixed;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#lens-tooltip-layer .lens-tooltip.lens-tooltip--visible {
    visibility: visible;
    opacity: 1;
}

#lens-tooltip-layer .lens-tooltip.lens-tooltip--top,
#lens-tooltip-layer .lens-tooltip.lens-tooltip--bottom,
#lens-tooltip-layer .lens-tooltip.lens-tooltip--left,
#lens-tooltip-layer .lens-tooltip.lens-tooltip--right {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    transform: translate3d(0, 0, 0);
}


/* Tooltip Positions */
.lens-tooltip--top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    margin-bottom: 8px;
}

*:hover > .lens-tooltip--top {
    transform: translateX(-50%) translateY(0);
}

.lens-tooltip--bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    margin-top: 8px;
}

*:hover > .lens-tooltip--bottom {
    transform: translateX(-50%) translateY(0);
}

.lens-tooltip--left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    margin-right: 0;
}

*:hover > .lens-tooltip--left {
    transform: translateY(-50%) translateX(0);
}

.lens-tooltip--right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    margin-left: 8px;
}

*:hover > .lens-tooltip--right {
    transform: translateY(-50%) translateX(0);
}


/* Show tooltip on parent hover */
*:hover > .lens-tooltip {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* Keep delay for search and add folder buttons */
.lens-search-trigger:hover > .lens-tooltip,
.lens-add-folder:hover > .lens-tooltip {
    transition-delay: 0.6s;
}

/* Remove delay when hiding tooltip for instant disappearance */
*:not(:hover) > .lens-tooltip {
    transition-delay: 0s;
}

/* Hide tooltips on disabled buttons */
button:disabled .lens-tooltip,
.button:disabled .lens-tooltip,
*[disabled] .lens-tooltip {
    display: none !important;
}

/* Data-Tooltip Attribute Support */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    background: var(--lens-text);
    color: var(--lens-background);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    font-weight: 500;
    box-shadow: var(--lens-shadow-md);
    z-index: 100001;
}


/* Data-Tooltip Positions */
[data-tooltip]:not([data-tooltip-position])::before,
[data-tooltip][data-tooltip-position="top"]::before {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}


[data-tooltip][data-tooltip-position="bottom"]::before {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}


[data-tooltip][data-tooltip-position="left"]::before {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}


[data-tooltip][data-tooltip-position="right"]::before {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}


/* Show data-tooltip on hover */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
}

/* Override for lens-shortcut-toggle to use unified tooltip */
.lens-shortcut-toggle[data-tooltip]::before {
    top: auto;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(calc(-50% - 8px));
    background: var(--lens-text);
    color: var(--lens-background);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    box-shadow: var(--lens-shadow-md);
}

.lens-shortcut-toggle[data-tooltip]::after {
    top: auto;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border-top: 4px solid var(--lens-text);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: none;
}

/* Override for lens-shortcut-edit button tooltip to match toggle size */
.lens-shortcut-edit .lens-tooltip {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 10px;
}

.lens-shortcut-edit .lens-tooltip::after {
    border-top-width: 4px;
    border-left-width: 4px;
    border-right-width: 4px;
}

/* Dialog Form Fields */
.lens-field-group {
    margin-bottom: 20px;
}

.lens-field-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--lens-text);
}

.lens-field-group .description {
    margin: 4px 0 12px;
    font-style: italic;
    color: var(--lens-text-secondary);
    font-size: 13px;
}

.lens-folder-name-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--lens-border);
    border-radius: 4px;
    font-size: 14px;
    transition: var(--lens-transition);
}

.lens-folder-name-input:focus {
    outline: none;
    border-color: var(--lens-primary);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

/* Share Dialog Input Fields */
.lens-share-input,
.lens-share-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #8c8f94 !important;
    border-radius: 4px;
    font-size: 14px;
    transition: var(--lens-transition);
    font-family: inherit;
    background: #ffffff;
    color: var(--lens-text);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.lens-share-input:focus,
.lens-share-textarea:focus {
    outline: none;
    border-color: var(--lens-primary) !important;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.lens-share-textarea {
    resize: vertical;
    min-height: 80px;
}

.lens-share-input::placeholder,
.lens-share-textarea::placeholder {
    color: #8c8f94;
    opacity: 1;
}

/* Folder Selection Tree in Dialog */
.lens-folder-select-tree {
    border: 1px solid var(--lens-border);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--lens-background);
}

.lens-folder-select-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: var(--lens-transition);
    border-bottom: 1px solid #f0f0f0;
}

.lens-folder-select-item:last-child {
    border-bottom: none;
}

.lens-folder-select-item:hover {
    background: var(--lens-hover-bg);
}

.lens-folder-select-item input[type="radio"] {
    margin-right: 10px;
}

.lens-folder-select-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex: 1;
    margin: 0;
    font-weight: normal;
}

.lens-folder-select-item .dashicons {
    margin-right: 8px;
    color: var(--lens-text-secondary);
}

/* Indent nested items */
.lens-folder-select-item[data-level="1"] {
    padding-left: 32px;
}

.lens-folder-select-item[data-level="2"] {
    padding-left: 52px;
}

.lens-folder-select-item[data-level="3"] {
    padding-left: 72px;
}

.lens-folder-select-item[data-level="4"] {
    padding-left: 92px;
}

/* Accessibility */
.lens-folder-item:focus-visible .lens-folder-row,
.lens-add-folder:focus-visible,
.lens-menu-item:focus-visible {
    outline: 2px solid var(--lens-primary);
    outline-offset: 2px;
}

/* Keyboard focus indicators for folder rows */
.lens-folder-row:focus {
    outline: 2px solid var(--lens-primary);
    outline-offset: -2px;
    background-color: var(--lens-hover-bg);
}

.lens-folder-row:focus-visible {
    outline: 2px solid var(--lens-primary);
    outline-offset: -2px;
    background-color: var(--lens-hover-bg);
}

/* Remove default focus outline on folder item container when row is focused */
.lens-folder-item:focus-within {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Override :focus-within border removal for multi-selected folders */
.lens-folder-item.lens-multi-selected:focus-within > .lens-folder-row {
    border-left: 3px solid var(--lens-primary) !important;
    padding-left: 13px;
}

.lens-folder-item.lens-multi-selected.active:focus-within > .lens-folder-row {
    border-left: 3px solid var(--lens-primary) !important;
    padding-left: 13px;
}

/* Loading Skeleton */
.lens-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Drag and Drop Styles */
.lens-drag-helper {
    padding: 6px 16px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: normal;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.9;
}

.lens-drag-helper .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--lens-folder-icon-color);
}

.lens-folder-item.lens-dragging {
    opacity: 0.4;
    pointer-events: none;
}

/* Prevent sidebar expansion during drag */
.ui-draggable-dragging {
    position: fixed !important;
}

/* Unified drag and drop visual feedback */

/* Drop indicator line for reordering */
.lens-drop-indicator {
    position: fixed;
    background: #2383e247;
    height: 6px;
    display: none;
    z-index: 10001;
    pointer-events: none;
}

/* Visual feedback for reorder positions - Removed to prevent duplicate indicators */
/* We use the JavaScript-controlled .lens-drop-indicator instead */
/*
.lens-folder-row.lens-drop-target-above::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #2383e247;
    z-index: 1;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(35, 131, 226, 0.3);
    border-radius: 2px;
}

.lens-folder-row.lens-drop-target-below::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #2383e247;
    z-index: 1;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(35, 131, 226, 0.3);
    border-radius: 2px;
}
*/

/* Nest hover state - highlight folder for dropping into */
.lens-folder-item.lens-drop-hover > .lens-folder-row {
    background: var(--lens-active-bg);
    transition: all 0.15s ease;
}

/* Active folder maintains its state during nest hover */
.lens-folder-item.active.lens-drop-hover > .lens-folder-row {
    background: var(--lens-active-bg);
}

/* Highlight all nested folders when parent is hovered */
.lens-folder-item.lens-drop-hover .lens-folder-children .lens-folder-item .lens-folder-row {
    background: rgba(232, 242, 249, 0.5); /* 50% opacity of --lens-active-bg */
    transition: all 0.15s ease;
}

/* Active nested folders maintain slightly darker background */
.lens-folder-item.lens-drop-hover .lens-folder-children .lens-folder-item.active .lens-folder-row {
    background: rgba(232, 242, 249, 0.7); /* 70% opacity of --lens-active-bg */
}

/* Invalid drop target */
.lens-folder-item.lens-drop-invalid {
    opacity: 0.5;
}

.lens-folder-item.lens-drop-invalid > .lens-folder-row {
    background: rgba(214, 54, 56, 0.08);
    box-shadow: inset 0 0 0 2px rgba(214, 54, 56, 0.3);
    cursor: not-allowed;
}

.lens-root-drop-hover {
    position: relative;
}

.lens-sidebar-content.lens-root-drop-hover {
    /* Remove the left side shadow and background glow */
    position: relative;
    transition: all 0.2s ease;
}

/* Removed sidebarGlow animation to prevent visual issues */

/* Remove the container-specific styling */

/* Remove active droppable indicator - only show on hover */

/* Pulse animation removed to avoid distraction */

/* Remove dragging visibility hint - only show on hover */

/* Remove initial hint - only show hover state */

/* No extra modifications when dragging - keep consistent UI */

/* Remove the tooltip to prevent visual clutter
.lens-sidebar-content.lens-root-drop-hover::before {
    content: 'Drop to move to root';
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 113, 177, 0.9);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.3s ease;
} */

/* Drag Confirmation Dialog */
.lens-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 160000;
    animation: overlayFadeIn 0.2s ease;
}

.lens-dialog-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 160001;
    animation: dialogWindowFadeIn 0.2s ease;
}

/* Specific styles for delete dialog window */
.lens-dialog-window.lens-delete-dialog .lens-dialog-content {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 420px;
    padding: 24px;
}

.lens-dialog-window.lens-delete-dialog h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    letter-spacing: -0.01em;
}

.lens-dialog-window.lens-delete-dialog p {
    margin: 0 0 24px 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.lens-dialog-window.lens-delete-dialog .lens-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
}

/* Ensure buttons in delete dialog are styled properly */
.lens-dialog-window.lens-delete-dialog .button {
    margin: 0;
}

/* Trash dialog overlay and container */
.lens-trash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 160000;
}

.lens-trash-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 420px;
    padding: 24px;
    z-index: 160001;
}

.lens-trash-dialog h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    letter-spacing: -0.01em;
}

.lens-trash-dialog p {
    margin: 0 0 24px 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* Media option styles */
.lens-dialog-media-option {
    margin: 8px 0 24px 0;
}

.lens-dialog-media-option label {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: normal;
    color: #2c3338;
    cursor: pointer;
    margin: 0;
}

.lens-dialog-media-option input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

.lens-dialog-media-option .lens-dialog-hint {
    margin: 6px 0 0 24px;
    font-size: 12px;
    color: #666;
    font-weight: normal;
}

/* Trash media placeholder */
.lens-trash-media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #666;
    min-height: 400px;
}

.lens-trash-media-placeholder .lens-empty-icon {
    font-size: 60px;
    line-height: 1;
    margin-bottom: 20px;
    opacity: 0.3;
    animation: none !important;
    transition: none !important;
}

.lens-trash-media-placeholder .lens-empty-icon .dashicons {
    width: 60px;
    height: 60px;
    font-size: 60px;
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

.lens-trash-media-placeholder h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.lens-trash-media-placeholder p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.lens-trash-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.lens-trash-dialog .button {
    margin: 0;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dialogWindowFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Specific styles for drag confirmation dialog */
.lens-drag-confirm-dialog {
    background: #ffffff;
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    animation: dialogScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    overflow: hidden; /* Ensure no borders bleed through */
}

@keyframes dialogScaleIn {
    to {
        transform: scale(1);
    }
}

/* Already in location dialog styling (same as drag confirm dialog) */
.lens-already-dialog {
    background: #ffffff;
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    animation: dialogScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    overflow: hidden;
}

.lens-already-dialog .lens-dialog-header {
    padding: 24px 24px 20px;
    text-align: center;
    position: relative;
    border-bottom: none !important;
    border: none !important;
}

.lens-already-dialog .lens-dialog-header::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.08);
}

.lens-already-dialog .lens-dialog-header::after {
    content: '\f534'; /* dashicons-info */
    font-family: dashicons;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #856404;
}

.lens-already-dialog .lens-dialog-header h3 {
    margin: 72px 0 0;
    font-size: 20px;
    font-weight: 600;
    color: #1d2327;
}

.lens-already-dialog .lens-dialog-body {
    padding: 0 32px 32px;
    text-align: center;
    border: none !important;
}

.lens-already-dialog .lens-dialog-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #3c434a;
}

.lens-already-dialog .lens-dialog-body p strong {
    color: #1d2327;
    font-weight: 600;
}

.lens-already-dialog .lens-dialog-footer {
    padding: 0 32px 32px;
    border-radius: 0 0 12px 12px;
    display: flex;
    gap: 12px;
    justify-content: center;
    border: none !important;
    border-top: none !important;
}

.lens-already-dialog .lens-dialog-footer .button {
    margin: 0;
    cursor: pointer;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    height: auto;
    min-height: 44px;
    border: 2px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: none;
    box-shadow: none;
}

.lens-already-dialog .lens-dialog-footer .button-primary {
    background: var(--lens-primary);
    color: white;
    border-color: var(--lens-primary);
}

.lens-already-dialog .lens-dialog-footer .button-primary:hover {
    background: #005a87;
    border-color: #005a87;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(34, 113, 177, 0.25);
}

.lens-already-dialog .lens-dialog-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
    z-index: 1;
}

.lens-already-dialog .lens-dialog-close:hover {
    background: rgba(255, 255, 255, 1);
    color: #495057;
    transform: scale(1.05);
}

.lens-already-dialog .lens-dialog-close .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lens-drag-confirm-dialog .lens-dialog-header {
    padding: 24px 24px 20px;
    text-align: center;
    position: relative;
    border-bottom: none !important;
    border: none !important;
}

.lens-drag-confirm-dialog .lens-dialog-header::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d1e7fb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.08);
}

.lens-drag-confirm-dialog .lens-dialog-header::after {
    content: '\f545'; /* dashicons-move */
    font-family: dashicons;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--lens-primary);
}

.lens-drag-confirm-dialog .lens-dialog-header h3 {
    margin: 72px 0 0;
    font-size: 20px;
    font-weight: 600;
    color: #1d2327;
}

.lens-drag-confirm-dialog .lens-dialog-body {
    padding: 0 32px 32px;
    text-align: center;
    border: none !important;
}

.lens-drag-confirm-dialog .lens-dialog-body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #3c434a;
}

.lens-drag-confirm-dialog .lens-dialog-body p strong {
    color: #1d2327;
    font-weight: 600;
}

.lens-drag-confirm-dialog .lens-dialog-footer {
    padding: 0 32px 32px;
    border-radius: 0 0 12px 12px;
    display: flex;
    gap: 12px;
    justify-content: center;
    border: none !important;
    border-top: none !important;
}

.lens-drag-confirm-dialog .lens-dialog-footer .button {
    margin: 0;
    cursor: pointer;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-width: 120px;
}

.lens-drag-confirm-dialog .lens-dialog-footer .lens-cancel {
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    color: #2c3338;
}

.lens-drag-confirm-dialog .lens-dialog-footer .lens-cancel:hover {
    background: #f0f0f1;
    border-color: #8c8f94;
    color: #1d2327;
}

.lens-drag-confirm-dialog .lens-dialog-footer .button-primary {
    background: var(--lens-primary);
    border-color: var(--lens-primary);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(34, 113, 177, 0.24);
}

.lens-drag-confirm-dialog .lens-dialog-footer .button-primary:hover {
    background: var(--lens-primary-hover);
    border-color: var(--lens-primary-hover);
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.3);
    transform: translateY(-1px);
}

.lens-drag-confirm-dialog .lens-dialog-footer .button-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(34, 113, 177, 0.2);
}

/* Close button for drag confirm dialog */
.lens-drag-confirm-dialog .lens-dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #787c82;
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.lens-drag-confirm-dialog .lens-dialog-close:hover {
    background: #f0f0f1;
    color: #1d2327;
}

.lens-drag-confirm-dialog .lens-dialog-close .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Focus styles for better accessibility */
.lens-drag-confirm-dialog .button:focus {
    outline: 2px solid var(--lens-primary);
    outline-offset: 2px;
}

/* jQuery UI Overrides */
.ui-draggable-dragging {
    z-index: 10000 !important;
}

/* Sortable Placeholder - removed for unified drag system */

/* Folder being sorted */
.lens-folder-item.ui-sortable-helper {
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

/* Visual feedback for sortable containers */
.lens-folder-children.ui-sortable,
.lens-folders-list.ui-sortable {
    min-height: 10px;
}

/* Cursor indicator for folders */
.lens-folder-item .lens-folder-row {
    cursor: pointer; /* Show pointer cursor by default */
    position: relative; /* For positioning drop indicators */
    user-select: none; /* Prevent text selection during drag */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.lens-folder-item .lens-folder-row:hover {
    cursor: pointer;
}

/* Show move cursor only when actually dragging */
.lens-folder-item.ui-draggable-dragging .lens-folder-row {
    cursor: move !important;
}

/* Don't show move cursor on non-draggable elements */
.lens-folder-checkbox,
.lens-folder-arrow {
    cursor: pointer !important;
}

/* Allow text selection in rename mode */
.lens-folder-item.lens-renaming .lens-folder-row {
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
}

/* Smooth transitions for drag states */
.lens-folder-item {
    transition: opacity 0.2s ease;
}

/* Remove transform transitions to prevent layout shifts */

/* Add subtle hover effect during drag */
.ui-draggable-dragging ~ .lens-folder-item:hover .lens-folder-row {
    background-color: var(--lens-hover-bg);
}

/* Drag handle - now hidden for unified dragging */
.lens-folder-drag-handle {
    display: none !important; /* Force hide for unified drag system */
}

/* Adjust checkbox margin when drag handle is present */
.lens-folder-checkbox {
    margin-right: 8px;
}

/* Sorting state */
.lens-folder-item.lens-sorting {
    opacity: 0.7;
}

/* Ensure opacity is reset after sorting */
.lens-folder-item:not(.lens-sorting) {
    opacity: 1;
}


/* Multi-folder list container */
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 15px;
    max-height: 400px;
    overflow-y: auto;
    position: relative;
}

    content: attr(data-empty-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-style: italic;
}

/* Multi-folder item */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    position: relative;
}

    display: flex;
    align-items: center;
    position: relative;
}

    margin-bottom: 0;
}

    border-color: rgba(220, 50, 50, 0.3);
    background-color: #fffbfb;
}

    color: #b32d2e;
    font-size: 11px;
    margin-top: 2px;
    padding-left: 64px; /* Align with the input field start */
    display: none;
    line-height: 1.2;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: translateY(-3px);
}

    display: block;
    opacity: 1;
    transform: translateY(0);
}

    color: #dc3232;
}

    border-color: var(--lens-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Folder item controls */
    display: flex;
    align-items: center;
    margin-right: 12px;
}

    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease;
    border-radius: 3px;
}

    background: #f0f0f1;
    color: var(--lens-primary);
}

    cursor: not-allowed;
    opacity: 0.3;
}

    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Multi-folder name input */
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

    border-color: var(--lens-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--lens-primary);
}

    border-color: #e7515a;
    background-color: #fef2f2;
    padding-right: 28px;
}

    border-color: #e7515a;
    box-shadow: 0 0 0 1px rgba(231, 81, 90, 0.2);
    background-color: #fef2f2;
}

/* Error icon inside input - create a wrapper for proper positioning */
    position: relative;
    flex: 1;
    margin-right: 8px;
}

    content: '\f534'; /* dashicons-warning */
    font-family: dashicons;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #e7515a;
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    opacity: 1;
}

/* Remove button */
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #d63638;
    transition: all 0.2s ease;
    border-radius: 3px;
}

    background: #fcebec;
    color: #a00;
}

/* Add folder button */
.lens-add-folder-row {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.lens-add-folder-row:hover {
    background: #f0f0f1;
    border-color: var(--lens-primary);
    color: var(--lens-primary);
}

.lens-add-folder-row .dashicons {
    margin-right: 4px;
    margin-top: 6px;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Sortable helper for multi-folder items */
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
    cursor: move;
}

/* Sortable placeholder */
    background: #e8f4fd;
    border: 2px dashed var(--lens-primary);
    visibility: visible !important;
    height: 44px;
}

/* Breadcrumb Navigation */
.lens-folder-breadcrumbs {
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
}

.lens-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: none;
    border: none;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    position: relative;
}

.lens-breadcrumb-item:hover {
    background: #e8f4fd;
    color: var(--lens-primary);
}

/* Removed breadcrumb separator - now handled by lens-breadcrumb-separator spans */

.lens-breadcrumb-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Enhanced Search Bar */
.lens-modern-picker .lens-folder-select-search {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}

/* Tree Container */
.lens-folder-tree-container {
    height: 320px;
    overflow: hidden;
    background: #fff;
}

.lens-folder-tree-view {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

/* Tree item container */
.lens-modern-folder-item {
    display: block;
    user-select: none;
}

.lens-modern-folder-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.lens-modern-folder-row:hover {
    background: #f5f5f5;
}

.lens-modern-folder-row.selected {
    background: #e8f4fd;
    color: var(--lens-primary);
}

.lens-modern-folder-row.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Indentation for nested folders */
.lens-modern-folder-item[data-level="1"] .lens-modern-folder-row { padding-left: 40px; }
.lens-modern-folder-item[data-level="2"] .lens-modern-folder-row { padding-left: 64px; }
.lens-modern-folder-item[data-level="3"] .lens-modern-folder-row { padding-left: 88px; }
.lens-modern-folder-item[data-level="4"] .lens-modern-folder-row { padding-left: 112px; }
.lens-modern-folder-item[data-level="5"] .lens-modern-folder-row { padding-left: 136px; }

/* Expand/Collapse Arrow */
.lens-folder-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    cursor: pointer;
    color: #666;
    transition: transform 0.2s ease;
}

.lens-folder-arrow .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lens-modern-folder-item.expanded .lens-folder-arrow {
    transform: rotate(90deg);
}

.lens-modern-folder-item:not(.has-children) .lens-folder-arrow {
    visibility: hidden;
}

/* Folder Icon and Name */
.lens-folder-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    color: #666;
}

.lens-folder-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.lens-modern-folder-row.selected .lens-folder-icon {
    color: var(--lens-primary);
}

.lens-modern-folder-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

/* Folder Count Badge */
.lens-folder-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e0e0e0;
    color: #666;
    font-size: 10px;
    font-weight: 500;
    border-radius: 9px;
    margin-left: 8px;
}

.lens-modern-folder-row.selected .lens-folder-count {
    background: var(--lens-primary);
    color: #fff;
}

/* Children Container */
.lens-folder-children {
    display: none;
}

.lens-modern-folder-item.expanded > .lens-folder-children {
    display: block;
}

/* Selected Folder Display */
.lens-selected-folder-display {
    padding: 12px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lens-selected-label {
    font-weight: 500;
    color: #666;
    font-size: 13px;
}

.lens-selected-path {
    color: var(--lens-primary);
    font-weight: 500;
    font-size: 13px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Action Buttons */
.lens-picker-actions {
    padding: 16px;
    background: #fafafa;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.lens-picker-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Search Highlighting */
.lens-modern-folder-item.search-match .lens-modern-folder-name {
    font-weight: 600;
}

.lens-modern-folder-item.search-match mark {
    background: rgba(34, 113, 177, 0.2);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.lens-modern-folder-item.search-hidden {
    display: none !important;
}

/* Loading State */
.lens-folder-tree-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
}

.lens-folder-tree-loading .spinner {
    margin-right: 8px;
}

/* Empty State */
.lens-folder-tree-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    text-align: center;
    padding: 20px;
}

.lens-folder-tree-empty .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
}

/* Scrollbar Styling */
.lens-folder-tree-view::-webkit-scrollbar {
    width: 8px;
}

.lens-folder-tree-view::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.lens-folder-tree-view::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 4px;
}

.lens-folder-tree-view::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Select actions */
.lens-select-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.lens-select-cancel {
    font-size: 13px;
}

/* Folder search box */
.lens-folder-select-search {
    position: relative;
    margin-bottom: 12px;
}

.lens-folder-search-input,
.lens-folder-search-input-multi {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 14px;
    background: #fff;
    transition: all 0.2s ease;
}

.lens-folder-search-input:focus,
.lens-folder-search-input-multi:focus {
    border-color: var(--lens-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--lens-primary);
}

.lens-folder-select-search .dashicons {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 18px;
    pointer-events: none;
}


/* Folder tree selection styling */
.lens-folder-select-tree,
.lens-folder-select-tree-multi {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    padding: 0;
    position: relative;
}

/* Custom scrollbar for folder selection */
.lens-folder-select-tree::-webkit-scrollbar,
.lens-folder-select-tree-multi::-webkit-scrollbar {
    width: 8px;
}

.lens-folder-select-tree::-webkit-scrollbar-track,
.lens-folder-select-tree-multi::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.lens-folder-select-tree::-webkit-scrollbar-thumb,
.lens-folder-select-tree-multi::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 4px;
}

.lens-folder-select-tree::-webkit-scrollbar-thumb:hover,
.lens-folder-select-tree-multi::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Folder selection item */
.lens-folder-select-item {
    display: block;
    border-bottom: 1px solid #eee;
    transition: all 0.2s ease;
    position: relative;
}

.lens-folder-select-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Ensure interactive elements have proper z-index */
.lens-folder-select-row input,
.lens-folder-select-row label,
.lens-folder-select-row .lens-folder-expand {
    position: relative;
    z-index: 2;
}

.lens-folder-select-item:last-child {
    border-bottom: none;
}

.lens-folder-select-row:hover {
    background: #f0f6fc;
}

.lens-folder-select-row.selected {
    background: #e8f4fd;
    color: var(--lens-primary);
}

.lens-folder-select-item:focus-within .lens-folder-select-row {
    background: #e8f4fd;
    outline: 2px solid var(--lens-primary);
    outline-offset: -2px;
}

/* Expandable folders */
.lens-folder-select-item.has-children .lens-folder-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    cursor: pointer;
    color: #666;
    transition: transform 0.2s ease;
}

/* Add left margin to radio buttons when there's no expand button */
.lens-folder-select-item:not(.has-children) .lens-folder-select-row input[type="radio"] {
    margin-left: 0;
}

.lens-folder-select-item.has-children .lens-folder-expand .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lens-folder-select-item.expanded .lens-folder-expand {
    transform: rotate(90deg);
}

.lens-folder-select-item .lens-folder-children {
    display: none;
}

.lens-folder-select-item.expanded .lens-folder-children {
    display: block;
}

/* Folder name in selection tree */
.lens-folder-select-item .lens-folder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Search highlight */
.lens-folder-select-item.search-match .lens-folder-name {
    font-weight: 600;
}

.lens-folder-select-item.search-match mark {
    background: rgba(34, 113, 177, 0.2);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* Hide non-matching items during search */
.lens-folder-select-item.search-hidden {
    display: none;
}

/* Show all parents of matching items */
.lens-folder-select-item.search-parent {
    display: block !important;
}

.lens-folder-select-item.search-parent > .lens-folder-children {
    display: block !important;
}

/* Reduce indentation for search results when parent is hidden */
.lens-folder-select-item.search-match:not(.search-parent) .lens-folder-select-row {
    padding-left: 16px !important;
}


/* Nested folder indentation */
.lens-folder-select-item[data-level="1"] .lens-folder-select-row {
    padding-left: 40px;
}

.lens-folder-select-item[data-level="2"] .lens-folder-select-row {
    padding-left: 64px;
}

.lens-folder-select-item[data-level="3"] .lens-folder-select-row {
    padding-left: 88px;
}

.lens-folder-select-item[data-level="4"] .lens-folder-select-row {
    padding-left: 112px;
}

.lens-folder-select-item[data-level="5"] .lens-folder-select-row {
    padding-left: 136px;
}

/* Tree structure lines */
.lens-folder-select-item[data-level]:not([data-level="0"]) {
    position: relative;
}

.lens-folder-select-item[data-level]:not([data-level="0"]):before {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 1px;
    background: #ddd;
}

.lens-folder-select-item[data-level="1"]:before {
    left: 16px;
}

.lens-folder-select-item[data-level="2"]:before {
    left: 40px;
}

.lens-folder-select-item[data-level="3"]:before {
    left: 64px;
}

.lens-folder-select-item[data-level="4"]:before {
    left: 88px;
}

.lens-folder-select-item[data-level="5"]:before {
    left: 112px;
}

/* Radio button styling */
.lens-folder-select-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lens-folder-select-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    font-weight: 500;
    color: #50575e;
    margin: 0;
    overflow: hidden;
}

/* Custom radio indicator */
.lens-folder-select-item label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.lens-folder-select-item input[type="radio"]:checked + label:before {
    border-color: var(--lens-primary);
    background: var(--lens-primary);
    box-shadow: inset 0 0 0 3px white;
}

.lens-folder-select-item input[type="radio"]:checked + label {
    color: var(--lens-primary);
    font-weight: 600;
}

/* Folder icon in selection */
.lens-folder-select-item .dashicons {
    margin-right: 8px;
    color: #999;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.lens-folder-select-item input[type="radio"]:checked + label .dashicons {
    color: var(--lens-primary);
}

/* Special styling for root level */
.lens-folder-select-item[data-folder-id="0"] {
    background: #fff;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
}

.lens-folder-select-item[data-folder-id="0"]:hover {
    background: #f0f6fc;
}

.lens-folder-select-item[data-folder-id="0"] label {
    font-weight: 600;
}

/* Empty state for folder tree */
.lens-folder-select-tree:empty:after,
.lens-folder-select-tree-multi:empty:after {
    content: "No folders available";
    display: block;
    text-align: center;
    padding: 20px;
    color: #999;
    font-style: italic;
}

/* No search results */
.lens-folder-select-tree.no-results:after,
.lens-folder-select-tree-multi.no-results:after {
    content: "No folders found matching your search";
    display: block;
    text-align: center;
    padding: 20px;
    color: #999;
    font-style: italic;
}

/* Indentation styles */
    margin-left: 30px;
}

    margin-left: 60px;
}

    margin-left: 90px;
}

    margin-left: 120px;
}

    margin-left: 150px;
}

/* Visual hierarchy indicator */
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 1px;
    background: #ddd;
}

/* Responsive adjustments */
@media screen and (max-width: 782px) {
        gap: 4px;
        padding: 2px;
    }
    
        padding: 6px 12px;
        font-size: 13px;
    }
    
        font-size: 16px;
        width: 16px;
        height: 16px;
    }
    
        max-height: 300px;
    }
    
        flex-wrap: wrap;
    }
    
        margin-bottom: 8px;
    }
    
        width: 100%;
        margin-bottom: 8px;
    }
}

/* Dialog adjustments for multi-folder mode */
    min-height: 300px;
}

/* Ensure proper spacing in dialog */
.lens-dialog-body .lens-field-group {
    margin-bottom: 20px;
}

.lens-dialog-body .lens-field-group:last-child {
    margin-bottom: 0;
}

/* Media Drag and Drop Styles */
.lens-media-drag-helper {
    background: var(--lens-primary);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--lens-shadow-lg);
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    z-index: 10000;
}

.lens-media-drag-helper .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Stacked icons for multi-item drag */
.lens-media-drag-helper .lens-stacked-icons {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 20px;
    margin-right: 2px;
}

.lens-media-drag-helper .lens-stacked-icons .dashicons {
    position: absolute;
    background: var(--lens-primary);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.lens-media-drag-helper .lens-stacked-icons .dashicons:nth-child(1) {
    top: 0;
    left: 0;
    z-index: 3;
}

.lens-media-drag-helper .lens-stacked-icons .dashicons:nth-child(2) {
    top: 3px;
    left: 4px;
    z-index: 2;
    opacity: 0.9;
}

.lens-media-drag-helper .lens-stacked-icons .dashicons:nth-child(3) {
    top: 6px;
    left: 8px;
    z-index: 1;
    opacity: 0.8;
}

.lens-media-drag-helper .lens-drag-text {
    white-space: nowrap;
}

.lens-media-dragging {
    opacity: 0.5;
}

/* Consolidated hover styles for both media and folder dragging - removed duplicate rules */
/* The main hover styles are already defined above for .lens-drop-hover */

/* Removed the color override rules for folder name and icon - maintain original colors */

/* Parent folders can now accept media - removed restriction */

/* Cursor changes for dragging over different folder types */
.lens-media-dragging {
    cursor: grabbing;
}

.lens-media-droppable.ui-droppable-hover {
    cursor: copy;
}

/* .lens-media-non-droppable.ui-droppable-hover {
    cursor: not-allowed;
} */

/* Lens-styled Notification System */
.lens-notifications-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100000;
    max-width: 380px;
    pointer-events: none;
}

.lens-notification {
    background: var(--lens-background);
    border: 1px solid var(--lens-border);
    border-radius: 6px;
    box-shadow: var(--lens-shadow-md);
    margin-top: 12px;
    transform: translateY(100px);
    opacity: 0;
    transition: var(--lens-transition);
    pointer-events: auto;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.lens-notification.lens-notification-show {
    transform: translateY(0);
    opacity: 1;
}

.lens-notification-success {
    border-left: 4px solid var(--lens-success);
}

.lens-notification-error {
    border-left: 4px solid var(--lens-danger);
}

.lens-notification-warning {
    border-left: 4px solid #ff9800;
}

.lens-notification-info {
    border-left: 4px solid var(--lens-primary);
}

.lens-notification-content {
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lens-notification-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.lens-notification-success .lens-notification-icon {
    color: var(--lens-success);
}

.lens-notification-error .lens-notification-icon {
    color: var(--lens-danger);
}

.lens-notification-warning .lens-notification-icon {
    color: #ff9800;
}

.lens-notification-info .lens-notification-icon {
    color: var(--lens-primary);
}

.lens-notification-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.lens-notification-body {
    flex: 1;
    min-width: 0;
}

.lens-notification-text {
    font-size: 14px;
    color: var(--lens-text);
    line-height: 1.4;
    margin: 0 0 12px 0;
    font-weight: 500;
}

.lens-notification-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lens-notification-action {
    background: none;
    border: 1px solid var(--lens-border);
    color: var(--lens-primary);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--lens-transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    height: 32px;
    line-height: 1;
}

.lens-notification-action:hover {
    background: var(--lens-hover-bg);
    border-color: var(--lens-primary);
}

.lens-notification-action.lens-action-primary {
    background: var(--lens-primary);
    color: white;
    border-color: var(--lens-primary);
}

.lens-notification-action.lens-action-primary:hover {
    background: var(--lens-primary-hover);
    border-color: var(--lens-primary-hover);
}

.lens-notification-close {
    background: none;
    border: none;
    color: var(--lens-text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--lens-transition);
    margin-left: auto;
    margin-top: -2px;
}

.lens-notification-close:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-text);
}

.lens-notification-close .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Loading state for actions */
.lens-notification-action.lens-loading {
    pointer-events: none;
    opacity: 0.6;
}

.lens-notification-action.lens-loading::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: lens-spin 0.8s linear infinite;
    margin-left: 6px;
}

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

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .lens-notifications-container {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: none;
    }
    
    .lens-notification-content {
        padding: 14px;
    }
    
    .lens-notification-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .lens-notification-action {
        font-size: 12px;
        padding: 5px 10px;
        height: 28px;
    }
}

/* Media item cursor changes when draggable */
.lens-media-draggable {
    cursor: grab;
}

.lens-media-dragging {
    cursor: grabbing;
}

/* Folder deleting state */
.lens-folder-item.lens-deleting {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
    transition: opacity 0.2s ease;
}

/* Professional deletion animation */
.lens-folder-item.lens-deleting-animated {
    animation: folderDelete 0.3s ease-out forwards;
    pointer-events: none;
}

@keyframes folderDelete {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-5px) scale(0.98);
    }
    100% {
        opacity: 0;
        transform: translateX(-10px) scale(0.95);
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

/* Navigation bar */
.lens-navigation-bar {
    display: none;
    padding: 10px 16px;
    border-bottom: 1px solid var(--lens-border);
    align-items: center;
    gap: 10px;
    background: var(--lens-background);
    flex-wrap: nowrap; /* Keep items on same line */
    overflow: visible; /* Allow dropdowns to show outside container */
    max-width: 100%;
}

/* Show navigation bar only in navigation mode */
.lens-navigation-mode .lens-navigation-bar {
    display: flex;
}

/* Navigation buttons */
.lens-nav-buttons {
    display: flex;
    gap: 5px;
    /* Ensure dropdowns are not clipped */
    overflow: visible !important;
}

.lens-nav-buttons button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px;
    cursor: pointer;
    transition: var(--lens-transition);
    color: var(--lens-text-secondary);
}

.lens-nav-buttons button:hover:not(:disabled) {
    background: var(--lens-hover-bg);
    border-color: var(--lens-border);
    color: var(--lens-text);
}

.lens-nav-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lens-nav-buttons button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Path button */
.lens-path-button {
    margin-left: auto;
}

/* Breadcrumb */
.lens-breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    overflow: hidden; /* Changed back to hidden for proper text truncation */
    min-width: 0; /* Allow flex item to shrink below content size */
    position: relative; /* For dropdown positioning */
}

.lens-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--lens-text-secondary);
    cursor: pointer;
    transition: var(--lens-transition);
    white-space: nowrap;
    max-width: 250px; /* Limit width for long folder names */
    position: relative;
}

/* Responsive breadcrumb items */
@media (max-width: 1200px) {
    .lens-navigation-bar .lens-breadcrumb .lens-breadcrumb-item:not(.lens-breadcrumb-home) {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .lens-navigation-bar .lens-breadcrumb .lens-breadcrumb-item:not(.lens-breadcrumb-home) {
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .lens-navigation-bar .lens-breadcrumb .lens-breadcrumb-item:not(.lens-breadcrumb-home) {
        max-width: 100px;
    }
}

.lens-breadcrumb-item span:not(.dashicons) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

/* Only apply truncation when showing full path (no ellipsis dropdown) */
.lens-navigation-bar .lens-breadcrumb.lens-breadcrumb-truncated .lens-breadcrumb-item {
    max-width: 250px !important;
    overflow: hidden;
    min-width: 0; /* Critical for flex items to shrink */
}

.lens-navigation-bar .lens-breadcrumb.lens-breadcrumb-truncated .lens-breadcrumb-item span:not(.dashicons) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; /* Changed to block for proper ellipsis */
    width: 100%;
    vertical-align: middle;
}

/* Always apply smart truncation to prevent layout issues */
.lens-navigation-bar .lens-breadcrumb .lens-breadcrumb-item:not(.lens-breadcrumb-home) {
    max-width: 300px;
    overflow: hidden;
    min-width: 0;
    position: relative;
}

.lens-navigation-bar .lens-breadcrumb .lens-breadcrumb-item span:not(.dashicons) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
}


/* Force truncation on navigation bar breadcrumbs */
.lens-navigation-mode .lens-navigation-bar .lens-breadcrumb {
    max-width: 100%;
    overflow: hidden;
}

.lens-navigation-mode .lens-navigation-bar .lens-breadcrumb-item:not(.lens-breadcrumb-home):not(.lens-breadcrumb-ellipsis) {
    flex: 0 1 250px; /* flex-grow: 0, flex-shrink: 1, flex-basis: 250px */
    min-width: 50px; /* Minimum width before truncating */
    max-width: 250px;
    overflow: hidden;
}

/* When using ellipsis dropdown pattern, don't truncate the last item */
.lens-navigation-bar .lens-breadcrumb-ellipsis ~ .lens-breadcrumb-separator ~ .lens-breadcrumb-item {
    max-width: none !important;
    flex: 0 0 auto; /* Don't grow or shrink */
    overflow: visible;
}

.lens-navigation-bar .lens-breadcrumb-ellipsis ~ .lens-breadcrumb-separator ~ .lens-breadcrumb-item span:not(.dashicons) {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

.lens-breadcrumb-item:hover {
    color: var(--lens-primary);
}

.lens-breadcrumb-item .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Special case for home breadcrumb to not truncate */
.lens-breadcrumb-home {
    max-width: none;
    flex-shrink: 0;
}

.lens-breadcrumb-separator {
    color: var(--lens-text-secondary);
    opacity: 0.5;
}

/* Breadcrumb ellipsis dropdown */
.lens-breadcrumb-ellipsis {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: var(--lens-transition);
    /* Ensure dropdown is not clipped */
    overflow: visible !important;
    flex-shrink: 0; /* Don't shrink the ellipsis */
}

.lens-breadcrumb-ellipsis:hover {
    background: var(--lens-hover-bg);
}

.lens-breadcrumb-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--lens-background);
    border: 1px solid var(--lens-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    max-width: 250px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100000; /* Increased for better visibility */
    display: none;
}

.lens-breadcrumb-dropdown.show {
    display: block;
}

.lens-breadcrumb-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: var(--lens-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lens-breadcrumb-dropdown-item:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-primary);
}

/* Path input */
.lens-path-input-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lens-path-input {
    flex: 1;
    padding: 6px 12px;
    border: 2px solid var(--lens-primary);
    border-radius: 6px;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: white;
    color: var(--lens-text);
    min-width: 0;
}

.lens-path-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}
/* Use default browser selection for normal selecting */
/* But remove background for autocomplete suggestions */
.lens-path-input.showing-suggestion::selection {
    background-color: transparent;
    color: #999;
}
.lens-path-input.showing-suggestion::-moz-selection {
    background-color: transparent;
    color: #999;
}

/* Hide breadcrumb when showing path input */
.lens-navigation-bar.lens-editing-path .lens-breadcrumb {
    display: none;
}

/* Keyboard hint label */
.lens-path-input-container::after {
    content: 'ESC to cancel';
    font-size: 11px;
    color: var(--lens-text-secondary);
    white-space: nowrap;
}

/* ========================================
   Refresh animation styles
   ======================================== */

/* Fade transitions */
.lens-fade-out {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.lens-fade-in {
    opacity: 1;
    transition: opacity 0.15s ease-in;
}

/* Skeleton Loader Styles */
.lens-skeleton-container {
    padding: 0;
}

.lens-skeleton-item {
    padding: 2px 0;
    opacity: 0;
    animation: lens-skeleton-fade-in 0.4s ease-out forwards;
}

@keyframes lens-skeleton-fade-in {
    to {
        opacity: 1;
    }
}

.lens-skeleton-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    position: relative;
}

/* Skeleton elements with shimmer effect */
.lens-skeleton-icon,
.lens-skeleton-text,
.lens-skeleton-count,
.lens-skeleton-arrow {
    background: linear-gradient(
        90deg,
        #f0f1f3 25%,
        #e0e2e5 50%,
        #f0f1f3 75%
    );
    background-size: 200% 100%;
    animation: lens-skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes lens-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.lens-skeleton-arrow,
.lens-skeleton-arrow-placeholder {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.lens-skeleton-arrow-placeholder {
    background: transparent;
}

.lens-skeleton-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.lens-skeleton-name {
    height: 14px;
    width: 100px;
    flex-shrink: 0;
}

.lens-skeleton-count {
    width: 24px;
    height: 20px;
    margin-left: auto;
    border-radius: 10px;
}

/* All Media skeleton specific styling */
.lens-skeleton-all-media .lens-skeleton-row {
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
}

.lens-skeleton-all-media .lens-skeleton-name {
    width: 80px;
}

/* Toast Notification System */
.lens-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000002;
    pointer-events: none;
}

.lens-toast {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-top: 12px;
    min-width: 300px;
    max-width: 500px;
    pointer-events: auto;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lens-toast.lens-toast-show {
    transform: translateX(0);
    opacity: 1;
}

/* Toast icons */
.lens-toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.lens-toast-icon svg {
    width: 100%;
    height: 100%;
}

/* Toast types */
.lens-toast-success .lens-toast-icon {
    color: #10B981;
}

.lens-toast-error .lens-toast-icon {
    color: #EF4444;
}

.lens-toast-warning .lens-toast-icon {
    color: #F59E0B;
}

.lens-toast-info .lens-toast-icon {
    color: #3B82F6;
}

/* Toast message */
.lens-toast-message {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: #1F2937;
    font-weight: 500;
}

/* Toast close button */
.lens-toast-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6B7280;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    padding: 0;
    margin: -8px -8px -8px 0;
}

.lens-toast-close:hover {
    background: #F3F4F6;
    color: #374151;
}

.lens-toast-close svg {
    width: 16px;
    height: 16px;
}

/* Undo button */
.lens-toast .lens-toast-undo {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 6px 12px !important;
    margin: 0 8px;
    background: #2271b1 !important;
    border: 1px solid #2271b1 !important;
    border-radius: 4px;
    color: white !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    box-shadow: none !important;
}

.lens-toast .lens-toast-undo:hover {
    background: #135e96 !important;
    border-color: #135e96 !important;
    color: white !important;
}

.lens-toast .lens-toast-undo:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.lens-toast .lens-toast-undo svg {
    width: 14px !important;
    height: 14px !important;
    fill: white !important;
    margin-right: 2px;
}

/* Stacking animation for multiple toasts */
.lens-toast-container .lens-toast:not(:last-child) {
    transform: translateX(0) translateY(8px) scale(0.98);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .lens-toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
    
    .lens-toast {
        min-width: auto;
        max-width: none;
    }
}

/* Sidebar refreshing state */
.lens-sidebar.lens-refreshing {
    position: relative;
    overflow: hidden;
}

.lens-sidebar.lens-refreshing::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--lens-primary),
        transparent
    );
    animation: lens-refresh-progress 1.5s linear infinite;
}

@keyframes lens-refresh-progress {
    to {
        left: 100%;
    }
}

/* Smooth transitions for folder tree updates */
.lens-folder-tree {
    position: relative;
    min-height: 200px;
}

/* When viewing inside a folder, ensure proper height for centering empty state */
.lens-navigation-mode .lens-folder-tree {
    min-height: 400px;
}

/* Enhance existing loading state */
.lens-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--lens-text-secondary);
}

.lens-loading .spinner {
    margin-bottom: 12px;
}

/* List View Loading Overlay */
.lens-list-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.wp-list-table.media.lens-loading {
    opacity: 0.6;
    pointer-events: none;
}

.lens-list-loading-overlay .spinner {
    float: none;
    margin: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .lens-refresh-success {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .lens-success-checkmark {
        width: 14px;
        height: 14px;
    }
}

/* ========================================
   Empty state layout
   ======================================== */

.lens-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 25px;
    animation: lens-empty-fade-in 0.6s ease-out;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none; /* Allow clicks to pass through to elements below */
}

/* Make empty state content clickable */
.lens-empty-state-content {
    pointer-events: auto;
}

@keyframes lens-empty-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Disable animations for subsequent views */
.lens-empty-state.lens-no-animation {
    animation: none;
}

.lens-empty-state.lens-no-animation .lens-empty-icon {
    animation: none;
}

.lens-empty-state-content {
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
    pointer-events: auto; /* Ensure content is clickable */
}

.lens-empty-icon {
    margin: 0 auto 16px;
    animation: lens-empty-icon-float 3s ease-in-out infinite;
}

@keyframes lens-empty-icon-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.lens-empty-icon svg {
    filter: drop-shadow(0 4px 12px rgba(34, 113, 177, 0.08));
}

.lens-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.lens-empty-description {
    font-size: 13px;
    color: #6c757d;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.lens-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lens-primary);
    color: white;
    border: none;
    padding: 8px 28px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(34, 113, 177, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    margin-top: 18px;
    height: 36px;
}

.lens-empty-cta:hover {
    background: var(--lens-primary-hover);
    transform: translateY(-0.5px);
    box-shadow: 0 3px 6px rgba(34, 113, 177, 0.16), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.lens-empty-cta:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(34, 113, 177, 0.12);
}

.lens-empty-cta:focus,
.lens-empty-cta:focus-visible {
    outline: none !important;
    box-shadow: 0 1px 3px rgba(34, 113, 177, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.lens-empty-cta .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    margin-left: -2px;
}

/* Nested folder empty state variations */
.lens-empty-state.lens-nested-empty {
    min-height: 350px;
}

.lens-nested-empty .lens-empty-icon svg {
    filter: drop-shadow(0 3px 8px rgba(34, 113, 177, 0.06));
}

.lens-nested-empty .lens-empty-title {
    font-size: 18px;
}

.lens-nested-empty .lens-empty-description {
    font-size: 13px;
}

.lens-nested-empty .lens-empty-cta {
    background: #f0f6fc;
    color: var(--lens-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.lens-nested-empty .lens-empty-cta:hover {
    background: var(--lens-primary);
    color: white;
    box-shadow: 0 3px 6px rgba(34, 113, 177, 0.18);
}

/* Mobile adjustments for empty state */
@media (max-width: 768px) {
    .lens-empty-state {
        min-height: 280px;
        padding: 20px 16px;
    }
    
    .lens-empty-state.lens-nested-empty {
        min-height: 260px;
    }
    
    .lens-empty-icon svg {
        width: 54px;
        height: 54px;
    }
    
    .lens-empty-title {
        font-size: 16px;
    }
    
    .lens-empty-description {
        font-size: 12px;
        margin: 0 0 16px 0;
    }
    
    .lens-empty-cta {
        font-size: 12px;
        padding: 8px 22px;
    }
}

/* Compact empty state variant for nested folders */
.lens-empty-state.lens-minimal {
    min-height: auto;
    padding: 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.lens-empty-state.lens-minimal .lens-empty-state-content {
    animation: none;
}

.lens-empty-state.lens-minimal .lens-minimal-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border-radius: 50%;
    animation: none;
}

.lens-empty-state.lens-minimal .lens-minimal-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #8c8f94;
}

.lens-empty-state.lens-minimal .lens-minimal-title {
    font-size: 14px;
    font-weight: 500;
    color: #3c434a;
    margin: 0;
}

.lens-empty-state.lens-minimal .lens-minimal-description {
    font-size: 13px;
    color: #8c8f94;
    margin: 0;
    font-weight: normal;
}

/* Empty folders list container with vertical centering */
.lens-folders-list-empty {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Mobile adjustments for .lens-empty-state.lens-minimal */
@media (max-width: 768px) {
    .lens-empty-state.lens-minimal {
        padding: 40px 16px;
    }
}

/* Root empty state centering fix */
#lens-folders-container > .lens-empty-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 360px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* When container has empty class, minimize folders list */
#lens-folders-container.lens-has-empty-state > .lens-folders-list {
    min-height: 0;
    flex: 0 0 auto;
    position: relative;
    z-index: 1; /* Ensure folders list stays above empty state */
}

/* Alternative for browsers supporting :has() */
@supports selector(:has(*)) {
    #lens-folders-container:has(> .lens-empty-state:not(.lens-nested-empty)) > .lens-folders-list {
        min-height: 0;
        flex: 0 0 auto;
        position: relative;
        z-index: 1;
    }
}


/* Hide sidebar content during collapse animation to prevent text overflow */
.lens-folder-sidebar.collapsed .lens-sidebar-header h2,
.lens-folder-sidebar.collapsed .lens-sidebar-toggle,
.lens-folder-sidebar.collapsed .lens-header-actions,
.lens-folder-sidebar.collapsed .lens-navigation-bar,
.lens-folder-sidebar.collapsed .lens-sidebar-content,
.lens-folder-sidebar.collapsed .lens-sidebar-footer {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Show content when expanded */
.lens-folder-sidebar:not(.collapsed) .lens-sidebar-header h2,
.lens-folder-sidebar:not(.collapsed) .lens-sidebar-toggle,
.lens-folder-sidebar:not(.collapsed) .lens-header-actions,
.lens-folder-sidebar:not(.collapsed) .lens-navigation-bar,
.lens-folder-sidebar:not(.collapsed) .lens-sidebar-content,
.lens-folder-sidebar:not(.collapsed) .lens-sidebar-footer {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease 0.1s, visibility 0.15s ease 0.1s;
}

/* Expand panel styles - full height vertical bar */
.lens-expand-panel {
    position: fixed;
    left: 160px;
    top: 32px;
    width: 48.8px;
    height: calc(100vh - 32px);
    background: var(--lens-background);
    border: none;
    border-right: 1px solid var(--lens-border);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 9996; /* Above sidebar and admin menu */
    padding: 0;
    box-shadow: var(--lens-shadow-sm);
}

/* Show expand panel when sidebar is collapsed */
body.lens-sidebar-collapsed .lens-expand-panel {
    display: flex !important;
}

/* Toggle button styles within the panel - perfectly aligned with sidebar header toggle */
.lens-expand-toggle {
    width: auto;
    height: auto;
    margin: 20px 7px 0 8px;
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: e-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    box-sizing: border-box;
}

.lens-expand-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.lens-expand-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--lens-primary);
}


/* Position SVG icon within the toggle button - same size as sidebar header */
.lens-expand-toggle svg {
    width: 23px;
    height: 23px;
    color: #646970;
    transition: color 0.2s ease;
}

.lens-expand-toggle:hover svg {
    color: var(--lens-primary);
}

/* Top actions container */
.lens-expand-actions-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Bottom actions container */
.lens-expand-actions-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 20px;
}

/* Adjust expand panel position for admin bar */
body.admin-bar .lens-expand-panel {
    top: 32px;
    height: calc(100vh - 32px);
}

/* Adjust expand panel position for folded menu */
body.folded .lens-expand-panel {
    left: 36px;
}

/* Fix expand panel position on media library page */
.wp-admin.upload-php .lens-expand-panel {
    left: 160px;
}

/* When WordPress menu is folded on media library page, adjust position */
.wp-admin.upload-php.folded .lens-expand-panel {
    left: 36px;
}

/* Divider between toggle and quick actions */
.lens-expand-divider {
    width: 24px;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 12px 0;
}

/* Quick action button styles */
.lens-quick-action {
    width: 34px;
    height: 34px;
    margin: 6px 0;
    padding: 5px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    box-sizing: border-box;
    color: #646970;
}

.lens-quick-action:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--lens-primary);
}

/* Add folder button - exact same style as sidebar */
.lens-quick-add-folder {
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--lens-primary);
    color: white;
    border-radius: 50%;
    box-shadow: var(--lens-shadow-sm);
    transition: var(--lens-transition);
}

.lens-quick-add-folder:hover {
    background: var(--lens-primary-hover);
    transform: scale(1.05);
    box-shadow: var(--lens-shadow-md);
    color: white;
}

.lens-quick-add-folder:active {
    transform: scale(0.95);
}

.lens-quick-action:focus {
    outline: none;
}

/* Active state for quick actions */
.lens-quick-action.active {
    background: rgba(34, 113, 177, 0.1);
}

/* Special active state for home button when viewing all media */
.lens-quick-home.active {
    background: rgba(34, 113, 177, 0.1);
}

/* Quick action icons */
.lens-quick-action .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Add folder icon - match sidebar size */
.lens-quick-add-folder .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.lens-quick-action svg {
    width: 20px;
    height: 20px;
    transition: color 0.2s ease;
}

.lens-shortcut-hint {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Shortcut key styling within tooltips */
.lens-tooltip .lens-shortcut-key,
.lens-tooltip .lens-shortcut-hint {
    color: rgba(255, 255, 255, 0.8);
    margin-left: 4px;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* Media Item Animations */
.attachment {
    transform-origin: center center;
}

.attachment.lens-removing {
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth count updates */
.lens-folder-count {
    display: inline-block;
}

.lens-folder-count.lens-count-updating {
    color: var(--lens-primary);
}

/* Media grid smooth transitions */
.attachments {
    transition: all 0.3s ease;
}

/* Prevent layout shifts during removal */
.attachments-browser .attachments {
    min-height: 200px;
}

/* Smooth media entry animation */
@keyframes mediaFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.attachment.lens-media-new {
    animation: mediaFadeIn 0.4s ease-out;
}

/* Multi-select visual feedback aligned with WordPress defaults */
body.lens-cmd-pressed .attachment {
    cursor: pointer;
}

/* ========================================
   Explorer Mode Styles
   ======================================== */

/* Explorer mode folder list */
.lens-folders-list.lens-explorer-mode {
    padding: 0;
}

/* Parent folder (..) styling */
.lens-folder-item.lens-parent-folder .lens-folder-row {
    font-style: italic;
    opacity: 0.8;
}

.lens-folder-item.lens-parent-folder .lens-folder-icon {
    color: var(--lens-text-secondary);
}

.lens-folder-item.lens-parent-folder:hover .lens-folder-row {
    opacity: 1;
}

/* Hide drag handles in parent folder */
.lens-folder-item.lens-parent-folder .lens-folder-drag-handle {
    display: none;
}

/* Empty folder message */
/* Removed .lens-empty-folder - now using unified empty state styling */

/* Navigation mode indicator */
body.lens-navigation-mode .lens-navigation-bar {
    background: var(--lens-hover-bg);
    border-bottom: 1px solid var(--lens-border);
}

/* Navigation and view toggle visibility */
.lens-navigation-bar {
    display: none;
}

body.lens-navigation-mode .lens-navigation-bar {
    display: flex !important;
}

body.lens-navigation-mode .lens-view-toggle {
    display: none !important;
}

body:not(.lens-navigation-mode) .lens-view-toggle {
    display: flex !important;
}

/* Tree mode initial load state */
body.lens-tree-with-folder:not(.lens-navigation-mode) .lens-view-toggle,
body.lens-tree-with-folder:not(.lens-navigation-mode) .lens-navigation-bar {
    display: none !important;
}

/* Active navigation buttons */
/* Removed blue color for up button to match other nav buttons */
/* body.lens-navigation-mode .lens-nav-up:not(:disabled) {
    color: var(--lens-primary);
} */

/* Explorer mode folder hover states */
.lens-explorer-mode .lens-folder-item:hover {
    background: var(--lens-hover-bg);
    cursor: pointer;
}

/* Double-click hint on hover - shows only once for eligible folders */
.lens-explorer-mode .lens-folder-item.lens-show-hint:hover::after {
    content: "Double-click to open";
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--lens-text-secondary);
    opacity: 0;
    animation: lens-hint-fade 0.3s ease 0.5s forwards;
    pointer-events: none;
}

@keyframes lens-hint-fade {
    to {
        opacity: 1;
    }
}

/* Mode indicator in header */
.lens-navigation-mode-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 11px;
    color: var(--lens-text-secondary);
    background: var(--lens-badge-bg);
    padding: 2px 8px;
    border-radius: 3px;
}

/* Hide certain elements in Explorer mode */
.lens-explorer-mode .lens-folder-arrow,
.lens-explorer-mode .lens-folder-arrow-placeholder {
    display: none !important;
}

/* Show folder icons more prominently in Explorer mode */
.lens-explorer-mode .lens-folder-icon {
    font-size: 18px;
}

/* Explorer mode spacing adjustments */
.lens-explorer-mode .lens-folder-item {
    margin-bottom: 2px;
}

.lens-explorer-mode .lens-folder-row {
    padding: 8px 12px;
}

/* Visual feedback for navigable folders in Explorer mode */
.lens-explorer-mode .lens-folder-item.has-children .lens-folder-name {
    font-weight: 500;
}

/* Removed blue color for folders with children in explorer mode to maintain consistent appearance */

/* Settings Dialog Styles */
.lens-settings-dialog .lens-dialog-content {
    width: 900px;
    max-width: 95vw;
    height: 600px;
    max-height: 85vh;
}

.lens-settings-body {
    padding: 0;
    height: calc(100% - 60px - 60px); /* Subtract header and footer heights */
}

.lens-settings-container {
    display: flex;
    height: 100%;
}

/* Settings Sidebar */
.lens-settings-sidebar {
    width: 240px;
    background: #f6f7f7;
    border-right: 1px solid var(--lens-border);
    padding: 20px 0;
    flex-shrink: 0;
}

.lens-settings-nav {
    display: flex;
    flex-direction: column;
}

.lens-settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 24px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--lens-text);
    font-size: 13px;
    transition: var(--lens-transition);
    position: relative;
}

.lens-settings-nav-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.lens-settings-nav-item:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.04);
}

.lens-settings-nav-item:focus::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--lens-primary);
}

.lens-settings-nav-item.active {
    background: rgba(34, 113, 177, 0.08);
    color: var(--lens-primary);
    font-weight: 500;
}

.lens-settings-nav-item.active:hover {
    background: rgba(34, 113, 177, 0.08);
}

.lens-settings-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--lens-primary);
}

.lens-settings-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.lens-settings-nav-item--danger,
.lens-settings-nav-item--danger svg {
    color: var(--lens-danger);
}

.lens-settings-nav-item--danger:hover,
.lens-settings-nav-item--danger:focus {
    background: rgba(220, 38, 38, 0.08);
}

.lens-settings-nav-item--danger.active,
.lens-settings-nav-item--danger.active:hover {
    background: rgba(220, 38, 38, 0.12);
    color: var(--lens-danger);
}

.lens-settings-nav-item--danger:focus::before,
.lens-settings-nav-item--danger.active::before {
    background: var(--lens-danger);
}

/* Settings Content Area */
.lens-settings-content-area {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    position: relative;
}

.lens-settings-section {
    display: none;
}

.lens-settings-section.active {
    display: block;
}

.lens-settings-section h4 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 500;
    color: var(--lens-text);
}

/* ==========================================
   RESET SECTION - Sophisticated Minimal Design
   ========================================== */

.lens-reset-container {
    max-width: 640px;
}

/* Header */
.lens-reset-header {
    margin-bottom: 32px;
}

.lens-reset-header h4 {
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}

.lens-reset-description {
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* Warning Card */
.lens-reset-warning-card {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 28px;
}

.lens-reset-warning-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.lens-reset-warning-header svg {
    color: #dc2626;
    flex-shrink: 0;
}

.lens-reset-warning-header span {
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    letter-spacing: -0.005em;
}

.lens-reset-warning-content {
    padding: 18px;
}

.lens-reset-warning-content > p {
    font-size: 13px;
    color: #475569;
    margin: 0 0 14px 0;
    font-weight: 500;
}

/* List Items */
.lens-reset-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.lens-reset-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}

.lens-reset-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #94a3b8;
}

.lens-reset-list li span {
    flex: 1;
}

/* Info Note */
.lens-reset-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    margin-top: 16px;
}

.lens-reset-note svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #0284c7;
}

.lens-reset-note span {
    font-size: 13px;
    line-height: 1.5;
    color: #0c4a6e;
}

/* Confirmation Group */
.lens-reset-confirmation-group {
    margin-bottom: 28px;
}

.lens-reset-label {
    display: block;
    font-size: 13px;
    color: #475569;
    margin-bottom: 10px;
    font-weight: 500;
}

.lens-reset-keyword {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #0f172a;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.05em;
    margin: 0 4px;
}

.lens-reset-confirm-input {
    width: 100%;
    max-width: 320px;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 500;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.05em;
}

.lens-reset-confirm-input::placeholder {
    color: #cbd5e1;
    font-weight: 400;
}

.lens-reset-confirm-input:hover {
    border-color: #cbd5e1;
}

.lens-reset-confirm-input:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Actions */
.lens-reset-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lens-reset-actions .lens-btn-danger {
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    background: #dc2626;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.lens-reset-actions .lens-btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}

.lens-reset-actions .lens-btn-danger:active:not(:disabled) {
    background: #991b1b;
}

.lens-reset-actions .lens-btn-danger:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Button Content */
.lens-btn-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Loading Spinner */
.lens-btn-loader {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Status Message */
.lens-reset-status-message {
    font-size: 13px;
    line-height: 1.5;
    min-height: 20px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.lens-reset-status-message:empty {
    display: none;
}

.lens-reset-status-message.is-info {
    color: #64748b;
}

.lens-reset-status-message.is-success {
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lens-reset-status-message.is-success::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    border-radius: 50%;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    flex-shrink: 0;
}

.lens-reset-status-message.is-error {
    color: #dc2626;
}

/* General Settings Header */
.lens-general-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.lens-general-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--lens-text);
}

/* Settings Groups */
.lens-settings-group {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--lens-border);
}

.lens-settings-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.lens-settings-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lens-text);
}

.lens-settings-label input[type="checkbox"] {
    margin: 0;
}

.lens-settings-description {
    margin: 0;
    margin-left: 28px;
    font-size: 13px;
    color: var(--lens-text-secondary);
    line-height: 1.5;
}

/* Form Controls */
.lens-setting-select,
.lens-setting-number {
    min-width: 150px;
    padding: 6px 12px;
    border: 1px solid var(--lens-border);
    border-radius: 4px;
    font-size: 14px;
    background: white;
}

.lens-setting-range {
    width: 200px;
}

.lens-range-value {
    min-width: 50px;
    text-align: right;
    color: var(--lens-text-secondary);
    font-size: 13px;
}

/* Shortcuts List */
.lens-shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lens-shortcut-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    background: #f6f7f7;
    border-radius: 6px;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.lens-shortcut-item.disabled {
    opacity: 0.7;
    background: #fcfcfc;
}

.lens-shortcut-item.disabled .lens-shortcut-label {
    color: #999;
}

.lens-shortcut-item.disabled .lens-shortcut-keys {
    opacity: 0.5;
}

.lens-shortcut-item.disabled .lens-shortcut-description {
    color: #999;
}

.lens-shortcut-keys {
    display: flex;
    gap: 4px;
    min-width: 140px;
}

.lens-shortcut-keys kbd {
    display: inline-block;
    padding: 3px 8px;
    font-size: 12px;
    font-family: monospace;
    background: white;
    border: 1px solid var(--lens-border);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.lens-shortcut-description {
    flex: 1;
    font-size: 14px;
    color: var(--lens-text);
}

/* Settings Buttons */
.lens-reset-settings,
.lens-export-settings,
.lens-import-settings {
    margin-right: 10px;
}

/* Compact Mode Styles */
.lens-compact-mode .lens-folder-item {
    margin-bottom: 1px;
}

.lens-compact-mode .lens-folder-row {
    padding: 6px 10px;
}

.lens-compact-mode .lens-folder-name {
    font-size: 13px;
}

.lens-compact-mode .lens-folder-icon {
    font-size: 16px;
}

/* Theme Styles */
.lens-theme-dark {
    --lens-background: #1e1e1e;
    --lens-sidebar-bg: #252525;
    --lens-text: #ffffff;
    --lens-text-secondary: #b0b0b0;
    --lens-border: #404040;
    --lens-hover-bg: #2a2a2a;
    --lens-active-bg: #363636;
}

/* Dark mode context menu adjustments */
.lens-theme-dark .lens-context-menu {
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.8);
}

.lens-theme-dark .lens-menu-item:hover:not(.lens-menu-divider):not(.is-disabled) {
    background: rgba(255, 255, 255, 0.06);
}

/* Bottom borders for dark mode grouping - simplified to match light mode */
.lens-theme-dark .lens-menu-item[data-action="open-new-tab"],
.lens-theme-dark .lens-menu-item[data-action="toggle-favorite"],
.lens-theme-dark .lens-menu-item[data-action="copy"],
.lens-theme-dark .lens-menu-item[data-action="share"],
.lens-theme-dark .lens-menu-item[data-action="compress"],
.lens-theme-dark .lens-menu-item[data-action="details"] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Navigation Mode Selector */
.lens-navigation-mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}

.lens-mode-option {
    cursor: pointer;
    display: block;
}

.lens-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lens-mode-card {
    border: 2px solid var(--lens-border);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
    background: white;
}

.lens-mode-option input:checked + .lens-mode-card {
    border-color: var(--lens-primary);
    background: rgba(34, 113, 177, 0.05);
}

/* Add checkmark indicator for selected mode */
.lens-mode-option input:checked + .lens-mode-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--lens-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lens-mode-option input:checked + .lens-mode-card::after {
    content: '\f147'; /* Dashicon checkmark */
    font-family: 'dashicons';
    color: white;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}

.lens-mode-option:hover .lens-mode-card {
    border-color: var(--lens-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.lens-mode-preview {
    background: linear-gradient(to bottom, #f8f9fa, #f3f4f5);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    height: 135px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    /* GPU acceleration */
    will-change: transform;
    transform: translateZ(0);
    /* Prevent child hover interference */
    pointer-events: none;
}

.lens-mode-preview * {
    pointer-events: none;
}

/* Remove play indicator - animations play on hover */

.lens-preview-explorer {
    position: relative;
}

/* Remove cursor pointer - not needed */

.lens-mode-option:hover .lens-mode-preview {
    border-color: rgba(34, 113, 177, 0.2);
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.08);
}

/* Explorer Mode Preview */
.lens-preview-explorer .lens-preview-header {
    margin-bottom: 12px;
    height: 20px;
}

.lens-preview-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--lens-text-secondary);
    position: relative;
    height: 16px;
    pointer-events: none; /* Prevent hover conflicts */
}

.lens-preview-folders-wrapper {
    position: relative;
    height: 90px; /* Fixed height to contain all folders including All Media */
    overflow: hidden;
}

.lens-preview-folders {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lens-preview-folder {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: transparent;
    border-radius: 3px;
    font-size: 12px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.lens-preview-folder:not(:last-child) {
    margin-bottom: 2px;
}

.lens-mode-option:hover .lens-preview-folder {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 3px;
}

.lens-preview-icon {
    font-size: 12px;
    width: 14px;
    height: 14px;
    color: var(--lens-text-secondary);
    opacity: 0.7;
}

/* Ensure icons are visible in tree children */
.lens-tree-child .lens-preview-icon {
    opacity: 0.7 !important;
}

/* All Media folder styling in Explorer preview */
.lens-preview-all-media {
    background: rgba(34, 113, 177, 0.08);
    border-radius: 4px;
    font-weight: 500;
    margin-bottom: 6px;
}

.lens-preview-all-media .lens-preview-icon {
    color: var(--lens-primary);
    opacity: 1;
}

.lens-preview-icon.dashicons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tree View Preview */
.lens-preview-tree {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 12px;
}

.lens-preview-tree-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
}

.lens-preview-tree-item:not(.lens-tree-child):not(:last-child) {
    margin-bottom: 2px;
}

.lens-preview-tree-item:last-child {
    margin-bottom: 0;
}

.lens-preview-arrow {
    font-size: 12px;
    color: var(--lens-text-secondary);
    width: 14px;
    opacity: 0.7;
}

.lens-preview-arrow.dashicons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lens-preview-level-1 {
    padding-left: 20px;
}

.lens-preview-level-2 {
    padding-left: 40px;
}

.lens-preview-root {
    background: rgba(34, 113, 177, 0.08);
    border-radius: 4px;
    font-weight: 500;
}

.lens-preview-root .lens-preview-icon {
    color: var(--lens-primary);
    opacity: 1;
}

/* Add hover effect to tree items */
.lens-mode-option:hover .lens-preview-tree-item {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 3px;
}

/* Better visual hierarchy for arrows */
.lens-preview-arrow.dashicons-arrow-down-alt2 {
    color: var(--lens-primary);
    opacity: 1;
}

/* Add subtle animation to mode selection */
.lens-mode-card {
    position: relative;
    overflow: hidden;
}

.lens-mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(34, 113, 177, 0.03));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lens-mode-option input:checked + .lens-mode-card::before {
    opacity: 1;
}

/* Enhance breadcrumb styling */
.lens-preview-breadcrumb span {
    color: var(--lens-text-secondary);
}

.lens-preview-breadcrumb .lens-breadcrumb-extended span:last-child {
    color: var(--lens-text);
    font-weight: 500;
}

.lens-mode-card h6 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--lens-text);
}

.lens-mode-card p {
    margin: 0;
    font-size: 13px;
    color: var(--lens-text-secondary);
    line-height: 1.4;
}

/* Settings Group Title */
.lens-settings-group h5 {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--lens-text);
}

/* Explorer Mode Animation */
/* Removed folder-enter styles - no longer needed */

/* Remove old animation - now using hideFirstFolders */

/* Breadcrumb animation */
.lens-breadcrumb-new {
    animation: fadeInBreadcrumb 0.3s ease-in;
}

@keyframes fadeInBreadcrumb {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.lens-breadcrumb-parent {
    color: var(--lens-text-secondary);
}

/* Show different content */
.lens-folders-design {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
}

@keyframes hideFirstFolders {
    0%, 30% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    35% {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }
    40%, 90% {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }
    95%, 100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes showDesignFolders {
    0%, 35% {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }
    40%, 90% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    95%, 100% {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }
}

.lens-folders-animate {
    will-change: transform, opacity;
    transform: translateZ(0);
}

.lens-mode-option:hover .lens-folders-animate {
    animation: hideFirstFolders 4.5s ease-in-out infinite;
}

/* Breadcrumb animation for explorer preview */
.lens-breadcrumb-static,
.lens-breadcrumb-extended {
    will-change: opacity, transform;
}

.lens-breadcrumb-extended {
    display: inline-block !important;
    opacity: 0;
    transform: translateX(-10px);
    transition: none; /* Prevent transition conflicts with animation */
}

/* Sync breadcrumb with folder animation */
@keyframes breadcrumbExtend {
    0%, 35% {
        opacity: 0;
        transform: translateX(-10px);
    }
    40%, 85% {
        opacity: 1;
        transform: translateX(0);
    }
    90%, 100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

/* Only animate when hovering the entire mode option card */
.lens-mode-option:hover .lens-mode-preview .lens-breadcrumb-extended {
    animation: breadcrumbExtend 4.5s ease-in-out infinite;
}

.lens-folders-design {
    will-change: transform, opacity;
    transform: translateZ(0);
}

.lens-mode-option:hover .lens-folders-design {
    animation: showDesignFolders 4.5s ease-in-out infinite;
}

/* Tree View Animation */
@keyframes expandCollapse {
    0%, 15% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    20%, 80% {
        transform: rotate3d(0, 0, 1, 90deg);
    }
    85%, 100% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.lens-arrow-animate {
    display: inline-block;
    transition: transform 0.3s ease;
    will-change: transform;
    transform: translateZ(0);
}

.lens-mode-option:hover .lens-arrow-animate {
    animation: expandCollapse 4.5s ease-in-out infinite;
    transform-origin: center center;
}

/* Animate tree children */
@keyframes slideTreeItems {
    0%, 15% {
        opacity: 1;
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        transform: translate3d(0, -10px, 0);
        overflow: hidden;
    }
    20%, 80% {
        opacity: 1;
        max-height: 30px;
        margin-bottom: 2px;
        padding-top: 4px;
        padding-bottom: 4px;
        transform: translate3d(0, 0, 0);
    }
    85%, 100% {
        opacity: 1;
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        transform: translate3d(0, -10px, 0);
        overflow: hidden;
    }
}

.lens-tree-child {
    overflow: hidden;
    transition: all 0.3s ease;
    will-change: transform, opacity, max-height, margin-bottom, padding;
    transform: translateZ(0);
    box-sizing: border-box;
}

.lens-mode-option:hover .lens-tree-child {
    animation: slideTreeItems 4.5s ease-in-out infinite;
}

/* Ensure arrow and folder icons remain visible during tree animation */
.lens-mode-option:hover .lens-tree-child .lens-preview-arrow,
.lens-mode-option:hover .lens-tree-child .lens-preview-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Projects folder should maintain full opacity during animation */
.lens-mode-option:hover .lens-tree-expandable {
    opacity: 1 !important;
}

/* Click indicator animation for Explorer mode */
@keyframes minimalClick {
    0%, 26% {
        transform: scale(1);
        box-shadow: none;
    }
    27%, 28% {
        transform: scale(0.97);
        box-shadow: 0 0 0 1px rgba(34, 113, 177, 0.2);
    }
    29%, 100% {
        transform: scale(1);
        box-shadow: none;
    }
}

/* Subtle highlight effect for the folder background */
@keyframes folderHighlight {
    0%, 26% {
        background-color: transparent;
    }
    27%, 28% {
        background-color: rgba(34, 113, 177, 0.08);
    }
    29%, 100% {
        background-color: transparent;
    }
}

.lens-preview-folder.lens-folder-clickable {
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    transition: none; /* Remove transition to allow animation */
}

/* Apply click animation to the Projects folder */
.lens-mode-option:hover .lens-folder-clickable[data-folder="projects"] {
    animation: minimalClick 4.5s ease-in-out infinite, folderHighlight 4.5s ease-in-out infinite;
}

/* Ripple effect animation used on preview */
@keyframes minimalRipple {
    0%, 26.5% {
        width: 0;
        height: 0;
        opacity: 0;
    }
    27% {
        width: 10px;
        height: 10px;
        opacity: 0.3;
    }
    28% {
        width: 30px;
        height: 30px;
        opacity: 0.15;
    }
    29% {
        width: 50px;
        height: 50px;
        opacity: 0;
    }
    30%, 100% {
        width: 0;
        height: 0;
        opacity: 0;
    }
}

.lens-folder-clickable::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20px; /* Position near the folder icon */
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(34, 113, 177, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.lens-mode-option:hover .lens-folder-clickable[data-folder="design"]::before {
    animation: minimalRipple 4.5s ease-out infinite;
}

/* Responsive Settings Dialog */
@media (max-width: 768px) {
    .lens-settings-dialog .lens-dialog-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .lens-settings-container {
        flex-direction: column;
    }
    
    .lens-settings-sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--lens-border);
        padding: 10px 0;
    }
    
    .lens-settings-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0 10px;
    }
    
    .lens-settings-nav-item {
        white-space: nowrap;
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .lens-settings-nav-item.active::before {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 3px;
    }
    
    .lens-settings-nav-item:focus::before {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 3px;
    }
    
    .lens-settings-content-area {
        padding: 20px;
    }
    
    /* Navigation mode selector on mobile */
    .lens-navigation-mode-selector {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .lens-mode-preview {
        height: 120px;
    }
    
    /* Auto-play animations on mobile since hover doesn't work */
    .lens-folders-animate {
        animation: hideFirstFolders 4.5s ease-in-out infinite;
    }
    
    .lens-folders-design {
        animation: showDesignFolders 4.5s ease-in-out infinite;
    }
    
    .lens-arrow-animate {
        animation: expandCollapse 4.5s ease-in-out infinite;
    }
    
    .lens-tree-child {
        animation: slideTreeItems 4.5s ease-in-out infinite;
    }
}


/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .lens-folders-animate,
    .lens-folders-design,
    .lens-arrow-animate,
    .lens-tree-child,
    .lens-folder-clickable,
    .lens-breadcrumb-extended {
        animation: none \!important;
        transition: opacity 0.2s ease \!important;
    }
    
    /* Show static preview indicator */
    .lens-mode-preview {
        position: relative;
    }
    
    .lens-mode-preview::after {
        content: "Animation preview (reduced motion)";
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 9px;
        color: var(--lens-text-secondary);
        background: rgba(255, 255, 255, 0.9);
        padding: 2px 6px;
        border-radius: 3px;
        white-space: nowrap;
    }
}

/* Mobile optimizations for navigation mode animations */
@media (max-width: 782px) {
    /* Reduce animation complexity on mobile */
    .lens-folders-animate,
    .lens-folders-design,
    .lens-arrow-animate,
    .lens-tree-child,
    .lens-folder-clickable {
        animation-duration: 2s \!important;
    }
    
    /* Add tap to play hint on mobile */
    .lens-mode-preview {
        cursor: pointer;
    }
    
    .lens-mode-preview::before {
        content: "Tap to preview";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 11px;
        color: var(--lens-primary);
        background: rgba(255, 255, 255, 0.95);
        padding: 4px 12px;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 10;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    
    /* Hide hint on hover/active */
    .lens-mode-option:hover .lens-mode-preview::before,
    .lens-mode-preview:active::before {
        opacity: 0;
    }
    
    /* Disable continuous animation on mobile - only animate once on tap */
    .lens-mode-option .lens-folders-animate,
    .lens-mode-option .lens-folders-design,
    .lens-mode-option .lens-arrow-animate,
    .lens-mode-option .lens-tree-child,
    .lens-mode-option .lens-folder-clickable,
    .lens-mode-option .lens-breadcrumb-extended {
        animation: none;
    }
    
    /* Animate only when tapped */
    .lens-mode-option:active .lens-folders-animate {
        animation: hideFirstFolders 2s ease-in-out 1;
    }
    
    .lens-mode-option:active .lens-folders-design {
        animation: showDesignFolders 2s ease-in-out 1;
    }
    
    .lens-mode-option:active .lens-breadcrumb-extended {
        animation: breadcrumbExtend 2s ease-in-out 1;
    }
    
    .lens-mode-option:active .lens-arrow-animate {
        animation: expandCollapse 2s ease-in-out 1;
    }
    
    .lens-mode-option:active .lens-tree-child {
        animation: slideTreeItems 2s ease-in-out 1;
    }
    
    .lens-mode-option:active .lens-folder-clickable[data-folder="design"] {
        animation: clickIndicator 2s ease-in-out 1;
    }
}

/* Performance optimization for low-end devices */
@media (max-width: 782px) and (hover: none) and (pointer: coarse) {
    /* Use simpler animations for touch devices */
    @keyframes simpleFade {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }
    
    .lens-mode-option:active .lens-folders-animate,
    .lens-mode-option:active .lens-folders-design {
        animation: simpleFade 1.5s ease-in-out 1;
    }
    
    .lens-mode-option:active .lens-tree-child {
        animation: simpleFade 1.5s ease-in-out 1;
    }
}

/* Dark mode adjustments for animations */
body.lens-dark-mode .lens-mode-preview {
    background: linear-gradient(to bottom, #2a2a2a, #242424);
    border-color: rgba(255, 255, 255, 0.1);
}

body.lens-dark-mode .lens-mode-preview::before,
body.lens-dark-mode .lens-mode-preview::after {
    background: rgba(0, 0, 0, 0.9);
    color: #e0e0e0;
}

/* Support for new container class names while maintaining backward compatibility */
.lens-folders-container {
    margin: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Apply same styles to both old and new class names */
.lens-folders-container,
.lens-folder-tree {
    margin: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Navigation mode specific styles */
.lens-navigation-mode .lens-folders-container,
.lens-navigation-mode .lens-folder-tree {
    margin-bottom: 10px;
}

/* Mode-specific container styles */
.lens-folders-container.lens-tree-mode {
    /* Tree mode specific styles if needed */
}

.lens-folders-container.lens-explorer-mode {
    /* Explorer mode specific styles if needed */
}

/* ========================================
   List View Drag and Drop Styles
   ======================================== */

/* Dragging state for list view rows */
.wp-list-table.media tbody tr.lens-media-dragging {
    opacity: 0.5;
    background-color: #e8f2f9;
}

/* Prevent text selection during drag */
.wp-list-table.media tbody tr.ui-draggable-dragging {
    cursor: grabbing !important;
}

/* Style the checkbox column to be excluded from drag handle */
.wp-list-table.media .check-column {
    cursor: default;
}

/* Visual feedback for drop target folders when dragging table rows */
.lens-folder-item.lens-drop-hover .lens-folder-row {
    background-color: #e8f2f9;
    border-color: #2271b1;
}

/* List view thumbnail cursor and states */
.wp-list-table.media .media-icon img {
    cursor: move;
    transition: transform 0.2s ease;
}

.wp-list-table.media .media-icon img:hover {
    transform: scale(1.05);
}

.wp-list-table.media .media-icon img.lens-media-dragging {
    opacity: 0.5;
}

.wp-list-table.media .media-icon img.ui-draggable-dragging {
    cursor: grabbing !important;
}

/* ========================================
   Virtual Scrolling Styles
   ======================================== */

/* Virtual scrolling viewport container */
.lens-virtual-viewport {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

/* Virtual scrolling content container */
.lens-virtual-content {
    position: relative;
    width: 100%;
    min-height: 100%;
}

/* Virtual scrolling spacer (maintains scrollbar) */
.lens-virtual-spacer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* Virtual scrolling folder items */
.lens-virtual-viewport .lens-folder-item {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

/* Arrow rotation animation for virtual scrolling */
.lens-virtual-viewport .lens-folder-arrow {
    transition: transform 0.2s ease;
}

/* Ensure folder items maintain their interactive states */
.lens-virtual-viewport .lens-folder-item:hover {
    background: var(--lens-hover-bg);
}

.lens-virtual-viewport .lens-folder-item.active {
    background: var(--lens-active-bg);
}

/* Smooth scrolling for virtual viewport */
.lens-virtual-viewport {
    scroll-behavior: smooth;
}

/* Performance optimization for virtual scrolling */
.lens-virtual-content {
    will-change: transform;
    contain: layout style;
}

/* Loading state for virtual scrolling */
.lens-virtual-viewport.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--lens-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: lens-spin 0.8s linear infinite;
}

@keyframes lens-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Create Folder Dialog Location Picker Styles */
.lens-create-location-picker {
    position: relative;
    margin-top: 5px;
}

.lens-create-location-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 36px;
    text-align: left;
}

.lens-create-location-button:hover {
    border-color: #2271b1;
    background: #f6f7f7;
}

.lens-create-location-button:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 2px solid transparent;
}

.lens-create-location-button.lens-dropdown-open {
    border-color: #2271b1;
    background: #f6f7f7;
}

.lens-location-content {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 8px;
}

.lens-location-icon {
    display: flex;
    align-items: center;
    color: #50575e;
    flex-shrink: 0;
}

.lens-location-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lens-location-text {
    flex: 1;
    min-width: 0;
}

.lens-location-label {
    display: block;
    font-weight: 500;
    color: #1d2327;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lens-location-path {
    display: block;
    font-size: 11px;
    color: #646970;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.lens-create-location-button.has-path .lens-location-label {
    font-weight: 600;
}

.lens-location-arrow {
    color: #50575e;
    margin-left: 8px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.lens-create-location-button:hover .lens-location-arrow {
    color: #1d2327;
}

.lens-create-location-button.lens-dropdown-open .lens-location-arrow {
    transform: rotate(180deg);
}

.lens-create-location-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 99999;
    opacity: 0;
    transform: translateY(-4px);
    transform-origin: top center;
    transition: all 0.15s ease;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}

.lens-create-location-dropdown.lens-dropdown-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    max-height: 300px;
    overflow: visible;
}

.lens-location-search {
    position: relative;
    padding: 8px;
    border-bottom: 1px solid #dcdcde;
    background: #f6f7f7;
}

.lens-location-search-input {
    width: 100%;
    padding: 6px 32px 6px 32px;
    border: 1px solid #8c8f94;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
}

.lens-location-search-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

.lens-location-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #646970;
    pointer-events: none;
}

.lens-location-search-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #646970;
    transition: color 0.15s ease;
}

.lens-location-search-clear:hover {
    color: #1d2327;
}

.lens-location-folders {
    max-height: 250px;
    overflow-y: auto;
    padding: 4px 0;
}

.lens-location-tree {
    padding: 4px;
}

.lens-location-item {
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 3px;
    margin: 1px 4px;
    display: flex;
    align-items: center;
    position: relative;
}

.lens-location-item:hover,
.lens-location-item.lens-highlighted {
    background: #f0f0f1;
}

.lens-location-item.active {
    background: #e7f1ff;
    color: #0073aa;
}

.lens-location-tree-line {
    font-family: monospace;
    font-size: 12px;
    color: #8c8f94;
    white-space: pre;
    margin-right: 6px;
    user-select: none;
}

.lens-location-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.lens-location-item-icon {
    display: flex;
    align-items: center;
    color: #646970;
}

.lens-location-item-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lens-location-item-info {
    flex: 1;
    min-width: 0;
}

.lens-location-item-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

.lens-location-item-name mark {
    background: #fff3cd;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.lens-location-item-path {
    display: block;
    font-size: 11px;
    color: #646970;
    margin-top: 2px;
}

.lens-location-item .dashicons-yes {
    display: none;
    color: #0073aa;
    margin-left: auto;
}

.lens-location-item.active .dashicons-yes {
    display: block;
}

.lens-location-create-option {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 3px;
    margin: 4px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2271b1;
    font-weight: 500;
}

.lens-location-create-option:hover {
    background: #f0f0f1;
}

.lens-location-no-results {
    padding: 20px;
    text-align: center;
    color: #646970;
    font-size: 13px;
}

/* Scrollbar styling for location picker */
.lens-location-folders::-webkit-scrollbar {
    width: 6px;
}

.lens-location-folders::-webkit-scrollbar-track {
    background: transparent;
}

.lens-location-folders::-webkit-scrollbar-thumb {
    background: #c3c4c7;
    border-radius: 3px;
}

.lens-location-folders::-webkit-scrollbar-thumb:hover {
    background: #8c8f94;
}

/* Ensure import location picker styles work in dialog context */
.lens-dialog .lens-import-location-picker {
    position: relative;
    margin-top: 5px;
}

/* Base picker button styles */
.lens-dialog .lens-import-location-button,
.lens-move-location-picker .lens-import-location-button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 40px 10px 14px;
    min-height: 36px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #2c3338;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.lens-dialog .lens-import-location-button:hover,
.lens-move-location-picker .lens-import-location-button:hover {
    border-color: #c3c4c7;
    background: #f7f8fa;
}

.lens-dialog .lens-import-location-button:focus,
.lens-move-location-picker .lens-import-location-button:focus {
    outline: 2px solid transparent;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    background: #fff;
}

.lens-dialog .lens-import-location-button.lens-import-dropdown-open,
.lens-move-location-picker .lens-import-location-button.lens-import-dropdown-open {
    border-color: #8c8f94;
    background: #f7f8fa;
}

.lens-import-location-content {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 10px;
}

.lens-import-location-icon {
    display: flex;
    align-items: center;
    color: #646970;
    flex-shrink: 0;
}

.lens-import-location-text {
    flex: 1;
    min-width: 0;
}

.lens-import-location-label {
    display: block;
    font-weight: 400;
    color: #50575e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lens-import-location-path {
    display: none;
    font-size: 12px;
    color: #646970;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lens-import-location-button.has-selection .lens-import-location-label {
    color: #1d2327;
    font-weight: 500;
}

.lens-import-location-button.has-selection .lens-import-location-path {
    display: block;
}

.lens-import-location-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c8f94;
    transition: transform 0.2s ease, color 0.2s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lens-import-location-button:hover .lens-import-location-arrow {
    color: #646970;
}

.lens-import-location-button.lens-import-dropdown-open .lens-import-location-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.lens-import-location-arrow .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Dropdown container */
.lens-import-location-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    z-index: 100020;
    opacity: 0;
    transform: translateY(-4px);
    transform-origin: top center;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    overflow: hidden;
}

.lens-import-location-dropdown.lens-dropdown-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Search bar */
.lens-import-location-search {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid #f0f0f1;
    background: #fafafa;
    border-radius: 8px 8px 0 0;
}

.lens-import-location-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c8f94;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lens-dialog .lens-import-location-search-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.lens-import-location-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px !important;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    transition: all 0.15s ease;
}

.lens-import-location-search-input:focus {
    border-color: #8c8f94;
    outline: none;
    box-shadow: none;
}

.lens-import-location-search-input::placeholder {
    color: #8c8f94;
    opacity: 1;
}

/* Folder list */
.lens-import-location-folders {
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 0;
}

.lens-import-location-folders::-webkit-scrollbar {
    width: 6px;
}

.lens-import-location-folders::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

.lens-import-location-folders::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.18);
}

.lens-import-location-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
    margin: 2px 8px;
    border-radius: 4px;
    color: #1d2327;
    font-size: 13px;
}

.lens-import-location-item:hover {
    background: #f7f8fa;
}

.lens-import-location-item.active {
    background: #f7f8fa;
    color: #1d2327;
}

.lens-import-location-item-icon {
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.lens-import-location-item-icon .dashicons {
    color: #646970;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.lens-import-location-item:hover .lens-import-location-item-icon .dashicons {
    color: #50575e;
}

.lens-import-location-item.active .lens-import-location-item-icon .dashicons {
    color: #2271b1;
}

.lens-import-location-item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1d2327;
}

.lens-import-location-item-name mark {
    background: rgba(34, 113, 177, 0.2);
    color: var(--lens-primary, #2271b1);
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 500;
}

.lens-import-location-item-check {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.lens-import-location-item.active .lens-import-location-item-check {
    opacity: 1;
}

.lens-import-location-item-check .dashicons {
    color: #2271b1;
    display: none;
    font-size: 16px;
}

.lens-import-location-item.active .dashicons-yes {
    display: block;
}

.lens-import-location-tree-line {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: #c3c4c7;
    line-height: 1;
    white-space: pre;
    display: inline-block;
    margin-right: 8px;
    user-select: none;
    font-weight: 400;
}

.lens-import-location-item.active .lens-import-location-tree-line {
    color: #8c8f94;
}

.lens-import-location-item.lens-import-location-root {
    border-bottom: 1px solid #f0f0f1;
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-radius: 4px;
    margin: 2px 8px 4px;
}

.lens-import-location-item.lens-import-location-root .lens-import-location-item-name {
    font-weight: 500;
}

.lens-import-location-item.lens-import-location-root .lens-import-location-item-icon .dashicons {
    color: #2271b1;
}

.lens-import-location-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #646970;
    gap: 10px;
}

.lens-import-location-loading .spin {
    animation: spin 1s linear infinite;
}

/* Root item separation */
.lens-import-location-item.lens-import-location-root {
    border-bottom: 1px solid #eef0f2;
    margin: 0 8px 4px;
    padding-bottom: 12px;
}

.lens-import-location-item.lens-import-location-root .lens-import-location-item-name {
    font-weight: 600;
}

/* Additional layout helpers */
.lens-dialog .lens-field-group + .lens-field-group {
    margin-top: 20px;
}

.lens-move-location-picker {
    position: relative;
}

/* Move Folder dialog container */
.lens-move-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100002;
}

.lens-move-dialog .lens-dialog-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.lens-move-dialog-content {
    position: relative;
    width: 380px;
    max-width: 90vw;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: visible; /* Changed from hidden to allow dropdown to overflow */
    display: flex;
    flex-direction: column;
    animation: moveDialogSlideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes moveDialogSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Styles - Simplified */
.lens-move-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 16px 16px 0 0; /* Maintain rounded corners */
    overflow: visible; /* Allow content to overflow */
}

.lens-move-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #1d2327);
    line-height: 1.3;
}

.lens-move-dialog .lens-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-secondary, #646970);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.lens-move-dialog .lens-dialog-close:hover {
    background: var(--background-secondary, #f0f0f1);
    color: var(--text-primary, #1d2327);
}

.lens-move-dialog .lens-dialog-close svg {
    width: 20px;
    height: 20px;
}

/* Body Styles */
.lens-move-body {
    padding: 16px;
    flex: 1;
    overflow: visible; /* Allow dropdown to overflow */
}

/* Compact folder info */
.lens-move-info-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
}

.lens-move-folder-icon {
    width: 32px;
    height: 32px;
    background: rgba(34, 113, 177, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lens-move-folder-icon svg {
    width: 18px;
    height: 18px;
    color: #2271b1;
    stroke: #2271b1;
}

.lens-move-folder-info {
    flex: 1;
    min-width: 0;
}

.lens-move-folder-name-text {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1d2327);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.lens-move-multi-info {
    display: block;
    font-size: 11px;
    color: var(--text-secondary, #646970);
    margin-top: 1px;
}

/* Destination Section */
.lens-move-destination-section {
    margin-bottom: 0;
}

.lens-move-destination-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 10px;
}

/* Move location picker adjustments */
.lens-move-location-picker {
    margin-bottom: 0;
    position: relative;
}

.lens-move-dialog .lens-import-location-folders {
    max-height: 200px;
}

.lens-move-dialog .lens-import-location-search {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Footer Styles - Simplified */
.lens-move-footer {
    padding: 14px 16px;
    border-top: 1px solid #dcdcde;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-radius: 0 0 16px 16px; /* Maintain rounded corners */
    overflow: hidden; /* Keep footer contained */
}

/* Move buttons use standard WordPress styling */
.lens-move-folder-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .lens-move-dialog-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        border-radius: 0;
    }
    
    .lens-move-header {
        padding: 14px 16px;
    }

    .lens-move-body {
        padding: 14px;
    }

    .lens-move-footer {
        padding: 12px 14px;
    }
}

/* ========================================
   Attachment Details Folder Selector
   ======================================== */

/* Folder selector field in attachment details */
.lens-folder-selector-field {
    margin-top: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
}

/* Clearfix for float containment */
.lens-folder-selector-field::after {
    content: "";
    display: table;
    clear: both;
}

.lens-folder-selector-field .name {
    display: block;
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 8px;
    font-size: 13px;
}

/* Match WordPress two-column layout for attachment details */
.attachment-details .lens-folder-selector-field .name,
.attachment-info .lens-folder-selector-field .name {
    width: 25%;
    float: left;
    text-align: right;
    margin-right: 10px;
    margin-bottom: 0;
    line-height: 1.3;
    padding-top: 8px;
}

/* Make folder label clickable */
.lens-folder-label {
    user-select: none;
    transition: color 0.2s ease;
}

.lens-folder-label:hover {
    color: #3858e9;
}

/* Wrapper for select and create button */
.lens-folder-selector-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

/* Select field styling */
.lens-folder-select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    line-height: 1.4;
    color: #1d2327;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: 30px;
}

/* Hide select during loading to prevent flicker */
.lens-loading .lens-folder-select {
    opacity: 0;
    pointer-events: none;
}

/* Loading state overlay */
.lens-folder-selector-wrapper {
    position: relative;
    min-height: 30px; /* Maintain height during loading */
}

.lens-folder-selector-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1;
}

.lens-folder-selector-wrapper.lens-updating::after {
    opacity: 1;
    pointer-events: auto;
}

/* Loading state placeholder */
.lens-folder-selector-wrapper.lens-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 45px; /* Leave space for create button */
    height: 36px;
    background: #f6f7f7;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    animation: lens-pulse 1.5s ease-in-out infinite;
}

@keyframes lens-pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
}

.lens-folder-select:hover:not(:disabled) {
    border-color: #646970;
}

.lens-folder-select:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 2px solid transparent;
}

.lens-folder-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f6f7f7;
}

/* Create folder inline button - matches WordPress button pattern */
.lens-create-folder-inline {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    background: #f6f7f7 !important; /* Standard WordPress button background */
    border: 1px solid #2271b1 !important; /* Blue border */
    border-radius: 4px;
    color: #2271b1 !important; /* Blue icon */
    transition: all 0.15s ease;
    cursor: pointer;
    vertical-align: top;
    
    /* Use flexbox for perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Override WordPress core button styles */
.wp-core-ui .lens-create-folder-inline,
.wp-core-ui .button.lens-create-folder-inline,
.media-modal .lens-create-folder-inline,
.attachment-details .lens-create-folder-inline {
    position: relative; /* For tooltip positioning */
    background: #f6f7f7 !important; /* Standard WordPress button background */
    border-color: #2271b1 !important; /* Blue border */
    color: #2271b1 !important; /* Blue icon */
    display: flex !important; /* Override WordPress default */
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important; /* Remove WordPress default padding */
    line-height: 1 !important; /* Reset WordPress line-height */
}

/* Ensure proper tooltip colors for create folder button */
.lens-create-folder-inline .lens-tooltip {
    background: #333 !important;
    color: #fff !important;
    padding: 6px 12px !important; /* Ensure consistent padding */
    line-height: 1.4 !important; /* Fix vertical alignment */
    display: flex !important;
    align-items: center !important;
}


.lens-create-folder-inline:hover:not(:disabled),
.wp-core-ui .lens-create-folder-inline:hover:not(:disabled),
.media-modal .lens-create-folder-inline:hover:not(:disabled),
.attachment-details .lens-create-folder-inline:hover:not(:disabled) {
    background: #f0f0f1 !important; /* Slightly darker grey on hover */
    border-color: #135e96 !important; /* Darker blue border */
    color: #135e96 !important; /* Darker blue icon */
}

.lens-create-folder-inline:focus,
.wp-core-ui .lens-create-folder-inline:focus,
.media-modal .lens-create-folder-inline:focus,
.attachment-details .lens-create-folder-inline:focus {
    background: #f6f7f7 !important; /* Keep standard background */
    border-color: #2271b1 !important; /* Blue border on focus */
    box-shadow: 0 0 0 1px #2271b1 !important; /* WordPress button focus shadow */
    outline: 2px solid transparent !important;
    color: #2271b1 !important;
}

.lens-create-folder-inline:active:not(:disabled) {
    transform: scale(0.95);
}

.lens-create-folder-inline:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dashicon styling - centered within button */
.lens-create-folder-inline .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

/* Ensure dashicon is properly centered */
.lens-create-folder-inline .dashicons::before {
    display: block;
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
    text-align: center;
}

/* Additional overrides for WordPress admin context */
.wp-core-ui .lens-create-folder-inline .dashicons,
.attachment-details .lens-create-folder-inline .dashicons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure proper styling in two-column layout */
.attachment-details .lens-folder-selector-field {
    clear: both;
}

/* Match WordPress field structure exactly */
.attachment-details .lens-folder-selector-field,
.attachment-info .lens-folder-selector-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Match WordPress attachment details field layout */
.attachment-details .lens-folder-selector-field .lens-folder-selector-wrapper,
.attachment-info .lens-folder-selector-field .lens-folder-selector-wrapper {
    display: block; /* Override flex for attachment details */
    margin-left: 25%;
    padding-left: 4px;
    box-sizing: border-box;
}

/* Reapply flex to wrapper in attachment context */
.attachment-details .lens-folder-selector-wrapper,
.attachment-info .lens-folder-selector-wrapper {
    display: flex !important;
    width: auto !important;
}

/* Ensure the custom select takes full available width in attachment details */
.attachment-details .lens-folder-custom-select,
.attachment-info .lens-folder-custom-select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

/* Force full width on the input field itself */
.attachment-details .lens-folder-search-input,
.attachment-info .lens-folder-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix alignment in attachment details dropdown - override WordPress defaults */
.attachment-details .lens-folder-dropdown-item span,
.attachment-info .lens-folder-dropdown-item span,
.media-sidebar .lens-folder-dropdown-item span {
    float: none !important;
    padding-top: 0 !important;
    min-height: auto !important;
    line-height: 20px !important;
}

.attachment-details .lens-folder-dropdown-item .dashicons,
.attachment-info .lens-folder-dropdown-item .dashicons,
.media-sidebar .lens-folder-dropdown-item .dashicons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Only hide WordPress save indicators when updating Lens folders */
.lens-folder-updating .attachment-details .settings-save-status,
.lens-folder-updating .attachment-info .settings-save-status {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide spinner specifically during Lens folder updates */
.lens-folder-updating .spinner.is-active {
    display: none !important;
}

/* Hide saved message during Lens folder updates */
.lens-folder-updating .saved {
    display: none !important;
}

/* Media modal specific adjustments */
.media-modal .lens-folder-selector-field {
    margin-top: 12px;
}

/* Ensure the field fits well in WordPress media sidebar */
.attachment-info .lens-folder-selector-field {
    padding-top: 12px;
}

/* Match WordPress attachment field spacing */
.attachment-info .setting + .lens-folder-selector-field {
    margin-top: 0;
}

/* ========================================
   Media Toolbar Folder Filter
   ======================================== */

/* 1. Component Base Styles */
.lens-folder-filter-wrapper {
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px;
    min-width: 150px;
    max-width: 180px;
}

.lens-folder-filter-container {
    display: inline-block;
    width: 100%;
}

/* 2. Media Modal Alignment */
.media-modal .attachments-browser .attachment-filters,
.media-modal .attachments-browser .lens-folder-filter-wrapper {
    display: inline-block !important;
    vertical-align: baseline !important;
}

.media-modal .attachments-browser .lens-folder-filter-wrapper {
    position: relative;
    top: 1px; /* Align with native select baseline */
}

.media-modal .attachments-browser select.attachment-filters {
    width: auto !important;
}

/* 3. Toolbar Context Styles */
.media-toolbar .lens-folder-filter-wrapper {
    position: relative;
    z-index: 10;
}

.media-toolbar .lens-folder-selector-field {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
}

.media-toolbar .lens-folder-selector-wrapper {
    margin: 0;
    padding: 0;
}

.media-toolbar .lens-folder-custom-select {
    position: relative;
    width: 100%;
}

/* 4. Input Field Styling */
.media-toolbar .lens-folder-search-input {
    width: 100%;
    height: 30px;
    padding: 3px 24px 3px 8px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #8c8f94;
    border-radius: 2px;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 5px top 50%;
    background-size: 16px auto;
    color: #2c3338;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    box-sizing: border-box;
}

.media-toolbar .lens-folder-search-input[readonly] {
    background-color: #fff;
    cursor: pointer;
}

.media-toolbar .lens-folder-search-input:hover {
    border-color: #2271b1;
}

.media-toolbar .lens-folder-search-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 2px solid transparent;
    background-image: none; /* Hide arrow when open */
}

/* 5. Dropdown Positioning */
.media-toolbar .lens-folder-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999999; /* Above everything */
}

.media-modal .lens-folder-dropdown {
    background: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* 6. Overflow Management */
.media-modal .media-toolbar,
.media-modal .media-toolbar-secondary,
.media-modal .lens-folder-filter-wrapper,
.media-modal .lens-folder-filter-container {
    overflow: visible !important;
}

/* Responsive adjustments */
@media screen and (max-width: 900px) {
    .lens-folder-filter-wrapper {
        min-width: 120px;
        max-width: 150px;
    }
}

@media screen and (max-width: 640px) {
    .lens-folder-filter-wrapper {
        display: block;
        width: 100%;
        max-width: none;
        margin: 8px 0;
    }
}

/* Option indentation for nested folders */
.lens-folder-select option {
    padding-left: 8px;
}

/* Nested folder indentation using CSS */
.lens-folder-select option.lens-folder-nested[data-level="1"] {
    padding-left: 24px;
}

.lens-folder-select option.lens-folder-nested[data-level="2"] {
    padding-left: 40px;
}

.lens-folder-select option.lens-folder-nested[data-level="3"] {
    padding-left: 56px;
}

.lens-folder-select option.lens-folder-nested[data-level="4"] {
    padding-left: 72px;
}

.lens-folder-select option.lens-folder-nested[data-level="5"] {
    padding-left: 88px;
}

/* Visual hierarchy for nested folders - use only padding, no special characters */
.lens-folder-select option.lens-folder-nested {
    color: #50575e; /* Slightly lighter color for nested items */
}

/* Loading state */
.lens-folder-select option[value="0"]:only-child {
    font-style: italic;
    color: #646970;
}

/* Custom dropdown styles for attachment details */
.lens-folder-custom-select {
    position: relative;
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content width */
}

/* Ensure dropdown is not clipped by parent containers */
.attachment-details .lens-folder-selector-field,
.attachment-info .lens-folder-selector-field,
.attachment-details .lens-folder-selector-wrapper,
.attachment-info .lens-folder-selector-wrapper {
    overflow: visible !important;
}

.lens-folder-search-input {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 4px 8px; /* Equal padding since no arrow */
    border: 1px solid #8c8f94;
    border-radius: 2px;
    background: #fff;
    color: #2c3338;
    font-size: 14px;
    line-height: 28px; /* Better vertical centering */
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.lens-folder-search-input:hover {
    border-color: #2271b1;
}

.lens-folder-search-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 2px solid transparent;
    cursor: text;
}

.lens-folder-search-input[readonly] {
    cursor: pointer;
}

/* Note: Arrow icon removed to match media modal design */

/* Dropdown container */
.lens-folder-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 160100; /* Higher than WordPress media modal overlays */
    overflow: hidden;
    margin-bottom: 4px;
}

/* Portal dropdown - renders outside modal DOM */
.lens-portal-dropdown {
    position: fixed !important;
    z-index: 999999 !important; /* Higher than modal overlays */
    max-width: 400px;
    min-width: 200px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Ensure portal dropdown inner has proper styling */
.lens-portal-dropdown .lens-folder-dropdown-inner {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

/* Override WordPress styles for dropdown spans */
.lens-folder-dropdown span {
    text-align: left !important;
    margin-right: 0 !important;
    min-width: auto !important;
}

.lens-folder-dropdown-inner {
    max-height: 180px; /* Show 3-4 items with comfortable spacing */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar for dropdown */
.lens-folder-dropdown-inner::-webkit-scrollbar {
    width: 8px;
}

.lens-folder-dropdown-inner::-webkit-scrollbar-track {
    background: #f0f0f1;
}

.lens-folder-dropdown-inner::-webkit-scrollbar-thumb {
    background: #c3c4c7;
    border-radius: 4px;
}

.lens-folder-dropdown-inner::-webkit-scrollbar-thumb:hover {
    background: #8c8f94;
}

/* Dropdown items */
.lens-folder-dropdown-item {
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.1s ease;
    min-height: 28px;
    white-space: nowrap;
    border-bottom: 1px solid #f0f0f1;
    font-size: 13px;
    line-height: 20px;
}

.lens-folder-dropdown-item:last-child {
    border-bottom: none;
}

.lens-folder-dropdown-item:hover,
.lens-folder-dropdown-item.highlighted {
    background-color: #f6f7f7;
}

.lens-folder-dropdown-item.selected {
    background-color: #f0f0f1;
}

.lens-folder-dropdown-item .dashicons {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    font-size: 16px;
    color: #646970;
    line-height: 20px;
    font-family: dashicons;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 0 !important;
    min-width: auto !important;
}

.lens-folder-dropdown-item .dashicons:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
    vertical-align: middle;
}

.lens-folder-dropdown-item.selected .dashicons {
    color: #2271b1;
}

.lens-folder-dropdown-item .lens-folder-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2c3338;
    line-height: 20px;
    vertical-align: middle;
    text-align: left !important;
    margin-right: 0 !important;
    min-width: auto !important;
}

/* Folder info container for name and path */
.lens-folder-dropdown-item .lens-folder-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;  /* Allow flex item to shrink */
    overflow: hidden;
}

/* Override for folder name when inside folder-info */
.lens-folder-dropdown-item .lens-folder-info .lens-folder-name {
    line-height: 16px;
    font-size: 13px;
}

/* Folder path styling - subtle and smaller */
.lens-folder-dropdown-item .lens-folder-path {
    font-size: 11px;
    line-height: 14px;
    color: #8c8f94;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

/* When item is selected or hovered, slightly darken the path */
.lens-folder-dropdown-item:hover .lens-folder-path,
.lens-folder-dropdown-item.highlighted .lens-folder-path {
    color: #646970;
}

.lens-folder-dropdown-item.selected .lens-folder-path {
    color: #646970;
}

/* Adjust padding when path is present */
.lens-folder-dropdown-item:has(.lens-folder-path) {
    padding: 6px 8px;
    min-height: 36px;
}

/* Fix line-height for media organization panel (Block Editor sidebar) */
.lens-media-organization-panel .lens-folder-dropdown-item {
    height: auto !important;  /* Allow height to adjust based on content */
    min-height: 32px !important;  /* Reduced from 36px */
    line-height: normal !important;  /* Reset line-height */
    padding: 5px 12px !important;  /* Reduced vertical padding from 8px to 5px */
    display: flex !important;
    align-items: center !important;
}

/* Fix double border in media organization panel (sidebar) dropdown */
.lens-media-organization-panel .lens-folder-dropdown,
.lens-sidebar .lens-folder-dropdown,
[class*="sidebar"] .lens-folder-dropdown {
    border: 1px solid #dcdcde !important;  /* Keep single border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Remove any additional borders that might be inherited */
.lens-media-organization-panel .lens-folder-dropdown-inner,
.lens-sidebar .lens-folder-dropdown-inner,
[class*="sidebar"] .lens-folder-dropdown-inner {
    border: none !important;  /* Ensure inner container has no border */
}

/* Maintain padding on hover and highlighted states */
.lens-media-organization-panel .lens-folder-dropdown-item:hover,
.lens-media-organization-panel .lens-folder-dropdown-item.highlighted,
.lens-media-organization-panel .lens-folder-dropdown-item.selected,
.lens-media-organization-panel .lens-folder-dropdown-item:focus {
    padding: 5px 12px !important;  /* Keep the same reduced padding on hover */
    height: auto !important;
    min-height: 32px !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
}

/* Ensure folder-info maintains proper structure on hover */
.lens-media-organization-panel .lens-folder-dropdown-item:hover .lens-folder-info,
.lens-media-organization-panel .lens-folder-dropdown-item.highlighted .lens-folder-info,
.lens-media-organization-panel .lens-folder-dropdown-item.selected .lens-folder-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.lens-media-organization-panel .lens-folder-dropdown-item .lens-folder-name {
    line-height: 16px !important;  /* Override the 36px line-height */
    flex: 1 !important;
}

/* Override any context that sets 36px line-height on folder names */
.lens-sidebar .lens-folder-dropdown-item .lens-folder-name,
[class*="sidebar"] .lens-folder-dropdown-item .lens-folder-name,
[class*="panel"] .lens-folder-dropdown-item .lens-folder-name {
    line-height: 16px !important;  /* Force correct line-height */
}

.lens-media-organization-panel .lens-folder-dropdown-item .lens-folder-info {
    flex: 1 !important;
}

.lens-media-organization-panel .lens-folder-dropdown-item .lens-folder-info .lens-folder-name {
    line-height: 16px !important;
}

.lens-media-organization-panel .lens-folder-dropdown-item .lens-folder-path {
    line-height: 14px !important;
}

/* Also fix for any sidebar context that might have similar issues */
.media-sidebar .lens-folder-dropdown-item .lens-folder-info .lens-folder-name,
.attachment-details .lens-folder-dropdown-item .lens-folder-info .lens-folder-name,
.attachment-info .lens-folder-dropdown-item .lens-folder-info .lens-folder-name {
    line-height: 16px !important;
}

.media-sidebar .lens-folder-dropdown-item .lens-folder-path,
.attachment-details .lens-folder-dropdown-item .lens-folder-path,
.attachment-info .lens-folder-dropdown-item .lens-folder-path {
    line-height: 14px !important;
}

/* Global fix for any dropdown item with folder-info structure to prevent line-height issues */
.lens-folder-dropdown-item .lens-folder-info {
    line-height: normal !important;  /* Reset any inherited line-height */
}

/* Ensure proper line-height in all contexts when showing folder paths */
.lens-folder-dropdown-item:has(.lens-folder-info) .lens-folder-name {
    line-height: 16px !important;
    max-height: none !important;
}

.lens-folder-dropdown-item:has(.lens-folder-info) .lens-folder-path {
    line-height: 14px !important;
    max-height: none !important;
}

/* Search highlight */
.lens-folder-dropdown-item mark {
    background: rgba(34, 113, 177, 0.2);
    color: #2271b1;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 600;
}


/* Empty state */
.lens-folder-dropdown-empty {
    padding: 8px 12px;
    text-align: center;
    color: #646970;
    font-style: italic;
    font-size: 13px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Override existing loading states for new dropdown */
.lens-folder-selector-wrapper.lens-loading .lens-folder-search-input {
    background-color: #f0f0f1;
    color: #a7aaad;
    cursor: not-allowed;
}

/* Attachment edit page specific styles */
.lens-attachment-edit-field {
    margin: 0;
    padding: 0;
    border: none;
}

.lens-attachment-edit-field .lens-folder-selector-wrapper {
    margin-bottom: 10px;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* The attachment edit field uses the same styles as the general folder selector */

/* Button styling in metabox inherits from general styles */

/* Ensure dropdown appears correctly in metabox */
#lens-folder-selector .lens-folder-dropdown {
    position: absolute;
    bottom: auto;
    top: 100%;
    margin-top: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* Adjust description text */
#lens-folder-selector .description {
    margin-top: 8px;
    color: #646970;
    font-style: italic;
}

/* Ensure toast notifications appear correctly on attachment edit page */
body.post-php.post-type-attachment .lens-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100000;
}

/* WordPress notice fallback styling */
.lens-notice {
    margin: 5px 0 15px;
}


/* Responsive adjustments for smaller screens */
@media (max-width: 640px) {
    .lens-folder-selector-wrapper {
        flex-wrap: wrap;
    }
    
    .lens-folder-select,
    .lens-folder-custom-select {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .lens-create-folder-inline {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }
    
    .lens-create-folder-inline::after {
        content: "Create New Folder";
        font-size: 13px;
    }
}

/* Ensure create folder dialog appears above WordPress media modal */
.media-modal-content ~ .lens-dialog,
.media-modal ~ .lens-dialog,
body .lens-dialog#lens-create-folder-dialog {
    z-index: 160010 !important; /* Higher than WordPress media modal (160000) */
}

/* Also ensure the dialog backdrop covers the media modal */
.media-modal-content ~ .lens-dialog-backdrop,
.media-modal ~ .lens-dialog-backdrop,
body .lens-dialog#lens-create-folder-dialog .lens-dialog-backdrop {
    z-index: 160009 !important;
}

/* Media Restore and Trash Button Styles - Match WordPress Default */
.media-toolbar-secondary .restore-selected-button,
.media-toolbar-secondary .trash-selected-button {
    margin-right: 10px !important;
}

/* Media Details Restore Button - Match WordPress link style */
.button-link.lens-restore-attachment,
.lens-restore-attachment {
    color: #2271b1 !important;
    text-decoration: none !important;
}

.button-link.lens-restore-attachment:hover,
.button-link.lens-restore-attachment:focus,
.lens-restore-attachment:hover,
.lens-restore-attachment:focus {
    color: #135e96 !important;
    text-decoration: none !important;
}

/* Override WordPress button-link underline specifically in actions */
.actions .button-link.restore-attachment {
    text-decoration: none !important;
}

/* Media Details Trash Button - Match WordPress link style */
.button-link.lens-trash-attachment,
.lens-trash-attachment {
    color: #2271b1 !important;
    text-decoration: none !important;
}

.button-link.lens-trash-attachment:hover,
.button-link.lens-trash-attachment:focus,
.lens-trash-attachment:hover,
.lens-trash-attachment:focus {
    color: #135e96 !important;
    text-decoration: none !important;
}

/* Override WordPress button-link underline specifically in actions */
.actions .button-link.trash-attachment {
    text-decoration: none !important;
}

/* Disabled folder selector for trashed items */
.lens-folder-selector-wrapper.lens-disabled {
    position: relative;
}

/* Style disabled elements without using opacity to keep tooltip visible */
.lens-folder-selector-wrapper.lens-disabled > .lens-folder-custom-select .lens-folder-search-input {
    background-color: #f0f0f1;
    color: #a7aaad;
    transition: all 0.3s ease;
}

.lens-folder-selector-wrapper.lens-disabled > .lens-create-folder-inline {
    background-color: #f0f0f1 !important;
    color: #a7aaad !important;
    transition: all 0.3s ease;
}

.lens-folder-selector-wrapper.lens-disabled > .lens-create-folder-inline .dashicons {
    color: #a7aaad !important;
}

/* Add transition to wrapper for smooth state changes */
.lens-folder-selector-wrapper > .lens-folder-custom-select,
.lens-folder-selector-wrapper > .lens-create-folder-inline {
    transition: opacity 0.3s ease;
}

.lens-folder-selector-wrapper.lens-disabled .lens-folder-search-input {
    cursor: not-allowed;
}

.lens-folder-selector-wrapper .lens-folder-search-input {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.lens-folder-selector-wrapper.lens-disabled .lens-create-folder-inline {
    cursor: not-allowed;
}

/* Disabled input field hover states */
.lens-folder-selector-wrapper.lens-disabled .lens-folder-search-input,
.lens-folder-selector-wrapper.lens-disabled .lens-folder-search-input:hover,
.lens-folder-selector-wrapper.lens-disabled .lens-folder-search-input:focus {
    border-color: #c3c4c7 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Disabled create folder button hover states */
.lens-folder-selector-wrapper.lens-disabled .lens-create-folder-inline,
.lens-folder-selector-wrapper.lens-disabled .lens-create-folder-inline:hover,
.lens-folder-selector-wrapper.lens-disabled .lens-create-folder-inline:focus {
    outline: none !important;
    box-shadow: none !important;
    background: #f6f7f7 !important;
    color: #a7aaad !important;
}

/* Show tooltip on hover over disabled folder select with full opacity */
.lens-folder-selector-wrapper.lens-disabled .lens-folder-custom-select:hover .lens-tooltip {
    visibility: visible;
    opacity: 1;
    background: #1e1e1e !important;
    color: #ffffff !important;
}

/* Media Library Empty State */
body.upload-php .attachments-browser .no-media {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 20px;
    text-align: center;
    color: #50575e;
    font-size: 16px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    z-index: 1;
}

/* Toast style for undo/redo feedback */
.lens-toast.lens-toast-minimal {
    min-width: auto;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.lens-toast.lens-toast-minimal .lens-toast-message {
    font-size: 13px;
    color: #50575e;
}

.lens-toast.lens-toast-minimal .lens-toast-icon {
    width: 16px;
    height: 16px;
}

.lens-toast.lens-toast-minimal .lens-toast-close {
    display: none;
}

/* =============================================================================
   Keyboard Shortcuts Management
   ============================================================================= */

/* Ensure settings dialog scrolls properly */
.lens-settings-dialog .lens-dialog-body {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: visible;
    position: relative;
}

/* Mode tabs container with upload icon */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    margin-top: -10px; /* Offset the extra padding */
}

    flex: 1;
    margin-bottom: 0;
}

/* Upload folder icon section - matches mode tabs design */
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: #50575e;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.lens-upload-folder-icon-button:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #2271b1;
}

.lens-upload-folder-icon-button:hover .lucide-folder-up {
    stroke: #2271b1;
}

.lens-upload-folder-icon-button:active {
    background: #fff;
    color: #2271b1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.lens-upload-folder-icon-button .lucide-folder-up {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    transition: stroke 0.2s ease;
}

/* Show tooltip on hover */
.lens-upload-folder-icon-button {
    position: relative;
}

.lens-upload-folder-icon-button .lens-tooltip {
    z-index: 100002; /* Higher than dialog header */
}

.lens-upload-folder-icon-button:hover .lens-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Ensure mode tabs container doesn't clip the tooltip */
    position: relative;
    overflow: visible;
}

/* Responsive adjustments */
@media screen and (max-width: 782px) {
        flex-wrap: wrap;
    }
    
        width: 16px;
        height: 16px;
    }
}

/* Shortcuts Section - Better Layout */
.lens-settings-section[data-section="shortcuts"] {
    padding: 0;
}

/* Shortcuts Section Header */
.lens-shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.lens-shortcuts-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--lens-text);
}

.lens-shortcuts-actions {
    display: flex;
    gap: 8px;
}

.lens-shortcuts-reset-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    line-height: 2.15384615;
    min-height: 30px;
}

.lens-shortcuts-reset-all svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    vertical-align: middle;
    margin-top: -2px;
}

/* Search Box */
.lens-shortcuts-search-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.lens-shortcuts-search {
    width: 100%;
    padding: 10px 40px 10px 12px;
    border: 1px solid var(--lens-border);
    border-radius: 4px;
    font-size: 14px;
    background: var(--lens-background);
    transition: var(--lens-transition);
}

.lens-shortcuts-search:focus {
    outline: none;
    border-color: var(--lens-primary);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.lens-shortcuts-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lens-text-secondary);
    pointer-events: none;
}

/* Category filter tabs */
.lens-shortcuts-categories {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid #e0e0e1;
    flex-wrap: wrap;
}

.lens-shortcut-category-btn {
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #646970;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
}

.lens-shortcut-category-btn:hover {
    background: transparent;
    color: var(--lens-text);
    border-bottom-color: #e0e0e1;
}

.lens-shortcut-category-btn.active {
    background: transparent;
    color: var(--lens-primary);
    border-bottom-color: var(--lens-primary);
}


.lens-disabled-count {
    font-weight: 600;
    margin-left: 2px;
}

/* Shortcuts list container */
.lens-shortcuts-list {
    min-height: 200px;
    padding: 0;
    margin-bottom: 20px;
    overflow: visible;
}

.lens-shortcuts-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px;
    color: var(--lens-text-secondary);
}

.lens-shortcuts-list .lens-empty-state,
.lens-shortcuts-list .lens-error-message {
    text-align: center;
    padding: 60px 20px;
    color: #646970;
    font-size: 14px;
}

.lens-empty-state p {
    margin: 0;
}

.lens-empty-state strong {
    color: var(--lens-text);
    font-weight: 500;
}

.lens-shortcuts-list .lens-error-message {
    color: var(--lens-error);
}

/* Shortcuts category group spacing */
.lens-shortcuts-category-group {
    margin-bottom: 24px;
}

.lens-shortcuts-category-group:last-child {
    margin-bottom: 0;
}

.lens-shortcuts-category-title {
    font-size: 11px;
    font-weight: 600;
    color: #8c8f94;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 12px 0;
    padding: 0;
    border: none;
}

/* Shortcut list item */
.lens-shortcut-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0;
    transition: background 0.15s ease;
    position: relative;
    overflow: visible;
}

.lens-shortcut-item:last-child {
    border-bottom: none;
}

.lens-shortcut-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.lens-shortcut-item:focus {
    outline: none;
    background: transparent;
}

.lens-shortcut-item:focus-visible {
    outline: 2px solid rgba(34, 113, 177, 0.2);
    outline-offset: -2px;
    background: transparent;
}

.lens-shortcut-item.disabled {
    opacity: 0.4;
}

.lens-shortcut-item.disabled .lens-shortcut-label,
.lens-shortcut-item.disabled .lens-shortcut-description {
    color: #8c8f94;
}

/* Inline editing state */
.lens-shortcut-item.lens-editing {
    background: rgba(34, 113, 177, 0.03);
    padding: 12px 0;
    transition: all 0.2s ease;
}

.lens-shortcut-item.lens-editing .lens-shortcut-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lens-inline-editor {
    position: relative;
    margin-right: 8px;
}

.lens-inline-key-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 10px;
    min-width: 120px;
    width: auto;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    border: 2px dashed #c3c4c7 !important;
    border-radius: 4px;
    background: white;
    outline: none !important;
    cursor: pointer;
    text-align: center;
    box-shadow: none !important;
    transition: all 0.15s ease;
    color: var(--lens-text);
}

.lens-inline-key-input:focus {
    outline: none !important;
    border: 1px solid var(--lens-border) !important;
    box-shadow: none !important;
    background: var(--lens-background-secondary);
}

.lens-inline-key-input:focus-visible {
    outline: none !important;
    border: 1px solid var(--lens-border) !important;
    box-shadow: none !important;
}

.lens-inline-key-input.recording {
    background: white;
    border: 2px solid var(--lens-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1) !important;
    animation: pulse-border 1.5s infinite;
}

@keyframes pulse-border {
    0%, 100% { border-color: var(--lens-primary); }
    50% { border-color: rgba(34, 113, 177, 0.5); }
}

.lens-inline-key-input.recording:focus {
    background: white;
    border: 2px solid var(--lens-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1) !important;
}

.lens-inline-key-display {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--lens-text-primary);
    white-space: nowrap;
}

/* Allow pointer events on the conflict indicator inside */
.lens-inline-key-display .lens-conflict-indicator {
    pointer-events: auto;
}

.lens-inline-key-input:placeholder-shown + .lens-inline-key-display {
    color: #8c8f94;
    font-weight: normal;
}

/* Conflict indicator for inline editing */
.lens-conflict-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: #d63638;
    cursor: pointer;
    vertical-align: text-bottom;
    position: relative;
}

.lens-conflict-indicator svg {
    width: 14px;
    height: 14px;
    display: block;
}

.lens-conflict-indicator:hover {
    color: #a02222;
}


/* Conflict state styling */
.lens-shortcut-item.has-conflict .lens-inline-key-input {
    border: 2px solid #d63638 !important;
}

.lens-shortcut-item.has-conflict .lens-inline-key-display {
    border-color: #d63638 !important;
}


.lens-inline-save,
.lens-inline-cancel {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 400;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.lens-inline-save {
    background: var(--lens-primary);
    color: white;
    border: 1px solid var(--lens-primary);
}

.lens-inline-save:hover:not(:disabled) {
    background: #1e6fa1;
    border-color: #1e6fa1;
    box-shadow: 0 1px 3px rgba(34, 113, 177, 0.2);
}

.lens-inline-save:disabled {
    background: #f0f0f1;
    color: #8c8f94;
    border: 1px solid #dcdcde;
    cursor: not-allowed;
}

.lens-inline-cancel {
    background: transparent;
    color: #646970;
    border: 1px solid #dcdcde;
}

.lens-inline-cancel:hover {
    color: #646970;
    border-color: #8c8f94;
    background: rgba(0, 0, 0, 0.03);
}

.lens-shortcut-info {
    flex: 1;
    min-width: 0;
}

.lens-shortcut-label {
    font-weight: 500;
    font-size: 13px;
    color: var(--lens-text);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lens-customized-badge {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--lens-primary);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

.lens-shortcut-description {
    font-size: 12px;
    color: #646970;
    margin: 0;
    line-height: 1.4;
}

.lens-shortcut-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* Keyboard shortcut key display */
.lens-shortcut-keys {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: #f0f0f1;
    border: none;
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #2c3338;
    min-width: auto;
    justify-content: center;
}

.lens-no-shortcut {
    color: #8c8f94;
    font-style: italic;
}

.lens-shortcut-key {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #2c3338;
}

.lens-shortcut-key-separator {
    color: #8c8f94;
    font-weight: normal;
    margin: 0 1px;
    font-size: 11px;
}

/* Shortcut controls */
.lens-shortcut-edit {
    position: relative;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    color: #646970;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.lens-shortcut-edit:hover {
    color: var(--lens-primary);
    border-color: var(--lens-primary);
    background: rgba(34, 113, 177, 0.05);
}

.lens-shortcut-reset {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    color: #646970;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.lens-shortcut-reset:hover {
    color: #d63638;
    border-color: #d63638;
    background: rgba(214, 54, 56, 0.05);
}

.lens-shortcut-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
}


.lens-shortcut-toggle input[type="checkbox"] {
    width: 36px;
    height: 20px;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #c3c4c7;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin: 0 !important;
    border: none !important;
}

.lens-shortcut-toggle input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.lens-shortcut-toggle input[type="checkbox"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ensure no checkmark appears */
.lens-shortcut-toggle input[type="checkbox"]:checked {
    background: var(--lens-primary);
}

.lens-shortcut-toggle input[type="checkbox"]:before,
.lens-shortcut-toggle input[type="checkbox"]:checked:before {
    content: none !important;
    display: none !important;
}

.lens-shortcut-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.lens-shortcut-toggle input[type="checkbox"]:checked::after {
    transform: translateX(16px);
}

/* Info Section - Subtle notification banner */
.lens-shortcuts-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(34, 113, 177, 0.05);
    border: 1px solid rgba(34, 113, 177, 0.15);
    border-radius: 4px;
    margin-top: 20px;
    font-size: 12px;
    color: #50575e;
    line-height: 1.5;
}

.lens-shortcuts-info svg {
    flex-shrink: 0;
    color: var(--lens-primary);
    opacity: 0.8;
    margin-top: 1px;
}

.lens-shortcuts-info span {
    flex: 1;
}

.lens-shortcuts-note .dashicons {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: #8c8f94;
}

/* Shortcut Editor Modal */
.lens-shortcut-editor-modal .lens-dialog-content {
    max-width: 500px;
}

.lens-shortcut-editor-info {
    margin-bottom: 24px;
}

.lens-shortcut-editor-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lens-text);
}

.lens-shortcut-editor-description {
    margin: 0;
    font-size: 13px;
    color: var(--lens-text-secondary);
}

/* Shortcut Recorder */
.lens-shortcut-recorder {
    margin-bottom: 24px;
}

.lens-shortcut-recorder label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lens-text);
}

.lens-shortcut-recorder-input {
    position: relative;
    padding: 20px;
    background: var(--lens-background);
    border: 2px dashed var(--lens-border);
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lens-shortcut-recorder-input:hover {
    border-color: var(--lens-primary);
    background: var(--lens-background-secondary);
}

.lens-shortcut-recorder-input:focus {
    outline: none;
    border-style: solid;
    border-color: var(--lens-primary);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.lens-shortcut-recorder-input.recording {
    border-color: var(--lens-success);
    background: rgba(70, 180, 80, 0.05);
}

.lens-shortcut-recorder-keys {
    display: none;
    font-size: 24px;
    font-weight: 600;
    color: var(--lens-text);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.lens-shortcut-recorder-keys:not(:empty) {
    display: block;
}

.lens-shortcut-recorder-keys:not(:empty) + .lens-shortcut-recorder-placeholder {
    display: none;
}

.lens-shortcut-recorder-placeholder {
    color: var(--lens-text-secondary);
    font-size: 14px;
}

.lens-shortcut-clear {
    margin-top: 12px;
}

/* Conflicts Display */
.lens-shortcut-conflicts {
    margin-bottom: 20px;
    padding: 12px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 6px;
}

.lens-shortcut-conflicts-warning {
    display: flex;
    gap: 12px;
}

.lens-shortcut-conflicts-warning .dashicons {
    flex-shrink: 0;
    color: var(--lens-warning);
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.lens-shortcut-conflicts-list {
    flex: 1;
}

.lens-shortcut-conflict-item {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--lens-text);
}

.lens-shortcut-conflict-item:last-child {
    margin-bottom: 0;
}

.lens-shortcut-conflict-type {
    font-weight: 600;
    color: var(--lens-warning);
}

/* Default Shortcut Info */
.lens-shortcut-defaults {
    padding: 12px;
    background: var(--lens-background-secondary);
    border-radius: 4px;
    font-size: 13px;
    color: var(--lens-text-secondary);
}

.lens-shortcut-defaults p {
    margin: 0;
}

.lens-shortcut-default-keys {
    color: var(--lens-text);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .lens-shortcuts-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .lens-shortcut-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .lens-shortcut-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .lens-shortcuts-categories {
        flex-direction: column;
    }
    
    .lens-shortcut-category-btn {
        width: 100%;
        text-align: center;
    }
}

/* Create folder item inside folder dropdown */
.lens-folder-dropdown .lens-create-folder-item {
    position: relative;
    background: rgba(34, 113, 177, 0.02);
    color: #2271b1;
}

.lens-folder-dropdown .lens-create-folder-item:hover {
    background: rgba(34, 113, 177, 0.05);
}

.lens-folder-dropdown .lens-create-folder-item .dashicons {
    color: #2271b1;
    font-size: 18px;
}

.lens-folder-dropdown .lens-create-folder-item .lens-folder-name {
    color: #2271b1;
    font-weight: 500;
    font-size: 13px;
}

/* Ensure the create folder item doesn't get highlighted like regular items */
.lens-folder-dropdown .lens-create-folder-item.highlighted {
    background: rgba(34, 113, 177, 0.08);
}


/* Zip folder icon styles */
.lens-folder-icon.lens-zip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ensure ZIP folder wrapper works with lock icon */
.lens-folder-icon-wrapper.lens-zip-icon {
    position: relative;
}

.lens-folder-icon.lens-zip-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

.lens-folder-item:hover .lens-folder-icon.lens-zip-icon svg {
    stroke: var(--lens-folder-icon-hover);
}

.lens-folder-item.active .lens-folder-icon.lens-zip-icon svg {
    stroke: var(--lens-primary);
}

/* Preserve custom colors for ZIP folders on hover and active states */
.lens-folder-item[data-folder-color]:hover .lens-folder-icon.lens-zip-icon svg {
    stroke: currentColor !important;
}

.lens-folder-item[data-folder-color].active .lens-folder-icon.lens-zip-icon svg {
    stroke: currentColor !important;
}

/* Ensure zip folders cannot be expanded */
.lens-folder-item[data-is-zip="1"] .lens-folder-arrow {
    visibility: hidden;
    pointer-events: none;
}

/* Style for zip folder names */
.lens-folder-item[data-is-zip="1"] .lens-folder-name {
    font-style: italic;
}

/* ============================================
   Create Folder Dialog - Simple Mode
   ============================================ */

/* Hide mode tabs and upload button in simple mode */
    display: none !important;
}

    display: none !important;
}

/* Simplify the dialog container in simple mode */
    margin-bottom: 0;
    display: none;
}

/* Adjust dialog content for simple mode */
    padding-top: 10px;
}

/* Hide multiple folder mode content in simple mode */
    display: none !important;
}

/* Always show single folder mode in simple mode */
    display: block !important;
}

/* Simple mode uses same compact width */
    max-width: 440px;
}

/* Adjust button text in simple mode */
    min-width: 120px;
}

/* ============================================
   Organize Media Toggle Section
   ============================================ */

/* Container for the toggleable media section */
.lens-organize-media-section {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

/* Ensure folder search input has 2px radius in Classic Editor - override any 4px settings */
.lens-organize-media-section .lens-folder-search-input,
.lens-post-media-organizer .lens-folder-search-input,
.lens-metabox-media-section .lens-folder-search-input {
    border-radius: 2px !important;
}

/* Media header - matches share dialog toggle design */
.lens-media-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fafbfc;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
}

.lens-media-header:hover {
    background: #f7f8fa;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.lens-media-header:focus {
    outline: none;
}

.lens-media-header:focus-visible {
    outline: none;
}

.lens-media-header:active {
    background: #f4f5f7;
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.lens-media-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.lens-media-icon {
    width: 16px;
    height: 16px;
    color: #52525b;
    flex-shrink: 0;
}

.lens-media-label {
    font-size: 13px;
    font-weight: 500;
    color: #18181b;
    line-height: 1.4;
}

.lens-media-toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
    stroke-width: 2;
    color: #71717a;
    flex-shrink: 0;
}

.lens-media-header.expanded {
    background: #f7f8fa;
    border-bottom: 1px solid #e0e0e0;
}

.lens-media-header.expanded .lens-media-toggle-icon {
    transform: rotate(180deg);
}

/* Media items container */
.lens-organize-media-items {
    background: #ffffff;
    border: none;
    border-radius: 0;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.15s ease, max-height 0.15s ease;
    margin-top: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.lens-organize-media-items.visible {
    opacity: 1;
    max-height: 400px;
    overflow: auto;
    margin-top: 0;
}

.lens-media-container {
    padding: 12px;
}

/* Loading state */
.lens-media-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #646970;
    font-size: 13px;
}

.lens-media-loading .spinner {
    float: none;
    margin: 0;
}

/* Media grid layout */
.lens-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

/* Media item */
.lens-media-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    background: #f6f7f7;
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
    cursor: default;
}

.lens-media-item:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border-color: #d4d4d4;
}

.lens-media-item:hover .lens-media-info-overlay {
    opacity: 1;
}

/* Remove button styling */
.lens-media-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.1s ease, box-shadow 0.1s ease;
    backdrop-filter: blur(4px);
}

.lens-media-item:hover .lens-media-remove {
    opacity: 1;
}

.lens-media-remove:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lens-media-remove:active {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}

.lens-media-remove:focus {
    outline: none;
}

.lens-media-remove:focus-visible {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 2px rgba(46, 170, 220, 0.4);
}

.lens-media-remove svg {
    width: 10px;
    height: 10px;
    color: rgba(55, 53, 47, 0.45);
    transition: color 0.1s ease;
    display: block;
}

.lens-media-remove:hover svg {
    color: rgba(55, 53, 47, 0.65);
}

/* Excluded state styling */
.lens-media-item.lens-media-excluded {
    opacity: 0.4;
    position: relative;
    transition: opacity 0.2s ease;
}

.lens-media-item.lens-media-excluded .lens-media-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

/* Subtle strikethrough for excluded items */
.lens-media-item.lens-media-excluded .lens-media-thumb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(55, 53, 47, 0.2);
    transform: rotate(-10deg);
    pointer-events: none;
    z-index: 5;
}

.lens-media-item.lens-media-excluded .lens-media-remove {
    opacity: 1;
    background: rgba(255, 255, 255, 0.9);
}

.lens-media-item.lens-media-excluded .lens-media-remove svg {
    color: rgba(55, 53, 47, 0.45);
}

.lens-media-item.lens-media-excluded:hover {
    box-shadow: none;
    border-color: #e0e0e0;
}

.lens-media-item.lens-media-excluded .lens-media-remove:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lens-media-item.lens-media-excluded .lens-media-remove:hover svg {
    color: rgba(46, 170, 220, 0.7);
}

/* Media thumbnail */
.lens-media-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f7f7;
    position: relative;
}

.lens-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lens-media-thumb .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #a0a5aa;
}

/* Media info overlay */
.lens-media-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: 8px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.lens-media-title {
    color: white;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lens-media-folder {
    display: flex;
    align-items: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    max-width: 100%;
}

.lens-media-folder .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Folder name with text truncation */
.lens-media-folder .lens-media-folder-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
}

/* Trashed media styling */
.lens-media-item.lens-media-trashed {
    position: relative;
}

.lens-media-item.lens-media-trashed .lens-media-thumb {
    position: relative;
}

.lens-media-item.lens-media-trashed .lens-media-thumb img {
    filter: grayscale(100%) brightness(1.3);
    opacity: 0.4;
}

.lens-media-item.lens-media-trashed .lens-media-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.lens-media-trash-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(102, 102, 102, 0.9);
    border-radius: 50%;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    z-index: 2;
}

.lens-media-item.lens-media-trashed .lens-media-title {
    color: #999;
    font-style: italic;
}

/* Hide exclude button for trashed items */
.lens-media-item.lens-media-trashed .lens-media-remove {
    display: none;
}

/* No media message */
.lens-no-media {
    text-align: center;
    padding: 30px;
    color: #646970;
    font-size: 13px;
}

/* Error message */
.lens-media-error {
    text-align: center;
    padding: 20px;
    color: #d63638;
    font-size: 13px;
}

/* Bulk media styles */
.lens-bulk-media-list {
    max-height: 350px;
    overflow-y: auto;
}

.lens-bulk-post-media {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e4e4e7;
}

.lens-bulk-post-media:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.lens-bulk-post-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    padding: 5px 0 0 0;
    font-size: 14px;
    color: #1d2327;
}

.lens-bulk-post-header strong {
    font-weight: 600;
    color: #1d2327;
    font-size: 14px;
}

.lens-bulk-post-header .lens-media-count {
    color: #646970;
    font-weight: normal;
    font-size: 13px;
}

/* Inline Tag Styles */
.lens-input-with-tag {
    position: relative;
}

.lens-input-with-tag .lens-folder-name-input {
    width: 100%;
}

/* New integrated input with actions design */
.lens-input-with-actions {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    transition: all 0.2s ease;
}

.lens-input-with-actions:focus-within {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

.lens-input-with-actions .lens-folder-name-input {
    flex: 1;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    background: transparent;
    outline: none;
    box-shadow: none;
}

.lens-input-with-actions .lens-folder-name-input:focus {
    border: none;
    box-shadow: none;
}

.lens-input-actions {
    display: flex;
    align-items: center;
    padding-right: 4px;
    gap: 2px;
}

.lens-input-divider {
    width: 1px;
    height: 20px;
    background: #dcdcde;
    margin: 0 4px;
    display: none; /* Hide if no title tag is shown */
}

.lens-inline-tag:not([style*="display: none"]) ~ .lens-input-divider {
    display: block;
}

/* Inline tag in new design */
.lens-input-actions .lens-inline-tag {
    position: static;
    transform: none;
    padding: 3px 8px;
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    font-size: 11px;
    color: #50575e;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.3;
    font-weight: 500;
    white-space: nowrap;
}

.lens-input-actions .lens-inline-tag:hover {
    background: #2271b1;
    border-color: #2271b1;
    color: #ffffff;
}

.lens-input-actions .lens-inline-tag:active {
    background: #135e96;
    border-color: #135e96;
    transform: scale(0.98);
}

.lens-inline-tag .lens-tag-text {
    display: block;
    letter-spacing: normal;
    text-transform: none;
}

.lens-inline-tag:focus {
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}

/* Upload folder button inline style */
.lens-input-actions .lens-upload-folder-icon-button {
    background: transparent;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    color: #646970;
    border-radius: 3px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lens-input-actions .lens-upload-folder-icon-button:hover {
    background: #f0f0f1;
    color: #2271b1;
}

.lens-input-actions .lens-upload-folder-icon-button:active {
    background: #e0e0e1;
}

.lens-input-actions .lens-upload-folder-icon-button svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   Keyboard Navigation Styles
   ============================================ */

/* Remove ALL focus indicators - outline, border, and box-shadow */
.lens-folder-item:focus,
.lens-all-media:focus,
.lens-root-folder:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove focus-visible indicators too */
.lens-folder-item:focus-visible,
.lens-all-media:focus-visible,
.lens-root-folder:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove focus-within indicators */
.lens-folder-item:focus-within,
.lens-all-media:focus-within,
.lens-root-folder:focus-within {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Specifically target Webkit/Safari focus styles */
.lens-folder-item:focus:not(:focus-visible),
.lens-all-media:focus:not(:focus-visible),
.lens-root-folder:focus:not(:focus-visible) {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure folder items are keyboard focusable */
.lens-folder-item[tabindex],
.lens-all-media[tabindex],
.lens-root-folder[tabindex] {
    position: relative;
}

/* Remove all keyboard focus visual indicators */
.lens-dialog .lens-folder-item:focus,
.lens-create-folder-dialog .lens-import-location-item:focus {
    outline: none !important;
}

/* Screen reader only text for keyboard navigation hints */
.lens-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard navigation hint tooltip */
.lens-keyboard-hint {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    margin-bottom: 5px;
}

.lens-folder-item.lens-keyboard-focus .lens-keyboard-hint {
    opacity: 1;
}

/* Final override to absolutely ensure no focus styles */
.lens-folder-item[tabindex]:focus,
.lens-folder-item[tabindex]:focus-visible,
.lens-folder-item[tabindex]:focus-within,
.lens-all-media[tabindex]:focus,
.lens-all-media[tabindex]:focus-visible,
.lens-all-media[tabindex]:focus-within,
.lens-root-folder[tabindex]:focus,
.lens-root-folder[tabindex]:focus-visible,
.lens-root-folder[tabindex]:focus-within {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Also remove any focus styles from child elements (except input fields and segmented count control) */
.lens-folder-item:focus *:not(.lens-rename-input):not(input):not(textarea):not(select):not(.lens-count-segmented),
.lens-folder-item:focus-within *:not(.lens-rename-input):not(input):not(textarea):not(select):not(.lens-count-segmented),
.lens-all-media:focus *:not(.lens-rename-input):not(input):not(textarea):not(select):not(.lens-count-segmented),
.lens-all-media:focus-within *:not(.lens-rename-input):not(input):not(textarea):not(select):not(.lens-count-segmented),
.lens-root-folder:focus *:not(.lens-rename-input):not(input):not(textarea):not(select):not(.lens-count-segmented),
.lens-root-folder:focus-within *:not(.lens-rename-input):not(input):not(textarea):not(select):not(.lens-count-segmented) {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Explicitly preserve segmented count control border when parent has focus */
.lens-folder-item:focus .lens-count-segmented,
.lens-folder-item:focus-within .lens-count-segmented,
.lens-all-media:focus .lens-count-segmented,
.lens-all-media:focus-within .lens-count-segmented,
.lens-root-folder:focus .lens-count-segmented,
.lens-root-folder:focus-within .lens-count-segmented {
    border: 1px solid #c3c4c7 !important;
    background: #fff !important;
}

/* Also preserve the segments themselves */
.lens-folder-item:focus .lens-count-segment,
.lens-folder-item:focus-within .lens-count-segment,
.lens-all-media:focus .lens-count-segment,
.lens-all-media:focus-within .lens-count-segment,
.lens-root-folder:focus .lens-count-segment,
.lens-root-folder:focus-within .lens-count-segment {
    border: none;  /* Segments don't have borders */
    background: transparent;
}

/* Ensure rename input field retains consistent styling */
.lens-rename-input {
    border: 2px solid var(--lens-primary) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;  /* Reduced padding to maintain original height */
    background: white !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 14px !important;  /* Match folder name font size */
    line-height: normal !important;
    height: auto !important;
    box-sizing: border-box !important;  /* Include border in total height */
    margin: 0 !important;  /* Remove any margins */
    vertical-align: middle !important;
}

.lens-rename-input:focus {
    border-color: var(--lens-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Keep it consistent for all folders including All Media */
.lens-all-media .lens-rename-input,
.lens-root-folder .lens-rename-input {
    border: 2px solid var(--lens-primary) !important;
    background: white !important;
    box-shadow: none !important;
}

.lens-all-media .lens-rename-input:focus,
.lens-root-folder .lens-rename-input:focus {
    border-color: var(--lens-primary) !important;
    box-shadow: none !important;
}

/* =============================================
   Folder Sorting Styles
   ============================================= */

/* Sort Controls Container */
.lens-folder-sort-controls {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0 8px;
}

/* Sort Button in view toggle area */
.lens-sort-button.lens-view-toggle-sort {
    margin-left: auto !important; /* Push to the right end */
    margin-right: 0; /* Override any inherited margin */
    padding: 4px 10px;
    border: solid 1px #80808029;
    background: var(--lens-bg-tertiary);
    color: var(--lens-text-secondary);
    font-size: 16px;
    height: auto;
    width: auto;
    border-radius: 16px; /* Match toggle buttons */
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible !important;
}

/* Ensure tooltip works for sort button */
.lens-sort-button.lens-view-toggle-sort .lens-tooltip {
    white-space: nowrap;
}

/* Path dropdown divider */
.lens-path-dropdown-divider {
    height: 1px;
    background: var(--lens-border);
    margin: 4px 0;
    opacity: 0.5;
}

/* Sort trigger in path dropdown */
.lens-path-dropdown-item.lens-sort-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

.lens-path-dropdown-item.lens-sort-trigger:hover {
    background: var(--lens-hover-bg);
}

.lens-path-dropdown-item.lens-sort-trigger svg:not(.lens-submenu-arrow) {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Submenu arrow indicator */
.lens-submenu-arrow {
    width: 12px !important;
    height: 12px !important;
    margin-left: auto;
    opacity: 0.6;
    stroke: currentColor;
    flex-shrink: 0;
}

.lens-path-dropdown-item.lens-has-submenu:hover .lens-submenu-arrow {
    opacity: 1;
}

/* Current sort display */
.lens-sort-current {
    margin-left: auto;
    font-size: 11px;
    color: var(--lens-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.lens-sort-current:not(:empty)::before {
    content: "•";
    margin-right: 4px;
    opacity: 0.5;
}

.lens-sort-button.lens-view-toggle-sort:hover {
    background: var(--lens-hover-bg);
    color: var(--lens-text-primary);
}

.lens-sort-button.lens-view-toggle-sort[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.05);
    color: var(--lens-primary);
    border-color: var(--lens-primary);
}

.lens-sort-button.lens-view-toggle-sort:active {
    transform: scale(0.98);
}

.lens-sort-button.lens-view-toggle-sort svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Sort Button - fallback/header style */
.lens-sort-button:not(.lens-view-toggle-sort) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: #646970;
    cursor: pointer;
    transition: var(--lens-transition);
    position: relative;
    overflow: visible !important;
}

.lens-sort-button:not(.lens-view-toggle-sort):hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--lens-primary);
}

.lens-sort-button:not(.lens-view-toggle-sort):active {
    transform: scale(0.95);
}

.lens-sort-button:not(.lens-view-toggle-sort)[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.05);
    color: var(--lens-primary);
}

.lens-sort-button:not(.lens-view-toggle-sort) .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
}

/* Sort Dropdown */
.lens-sort-dropdown {
    background: var(--lens-sort-dropdown-bg);
    border: 1px solid var(--lens-border);
    border-radius: 8px;
    box-shadow: var(--lens-sort-dropdown-shadow);
    min-width: 180px;
    padding: 4px 0;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10000000; /* Higher than path dropdown */
}

.lens-sort-dropdown.lens-sort-dropdown-open {
    opacity: 1;
    transform: translateX(0);
}

/* Sort Option */
.lens-sort-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--lens-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

.lens-sort-option:hover {
    background: var(--lens-sort-option-hover);
}

.lens-sort-option.active {
    background: var(--lens-sort-option-active);
    color: var(--lens-primary);
    font-weight: 500;
}

/* Sort Check Mark */
.lens-sort-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
}

.lens-sort-check svg {
    width: 16px;
    height: 16px;
    stroke: var(--lens-primary);
    flex-shrink: 0;
}

/* Sort Label */
.lens-sort-label {
    flex: 1;
    white-space: nowrap;
}

/* Default option indicator */
.lens-sort-option[data-sort="default"] {
    font-weight: 500;
}

.lens-sort-option[data-sort="default"] .lens-sort-label::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--lens-primary);
    border-radius: 50%;
    margin-left: 6px;
    opacity: 0.4;
    vertical-align: middle;
}

/* Sort Separator */
.lens-sort-separator {
    height: 1px;
    background: var(--lens-border);
    margin: 4px 12px;
}

.lens-sort-separator--subtle {
    opacity: 0.5;
    margin: 2px 12px;
}

/* Manual Sort Mode Indicator */
.lens-manual-sort-mode .lens-folder-item {
    position: relative;
}

.lens-manual-sort-mode .lens-folder-drag-handle {
    opacity: 1 !important;
    color: var(--lens-primary);
}

.lens-manual-sort-mode .lens-folder-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--lens-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lens-manual-sort-mode .lens-folder-item:hover::before {
    opacity: 0.5;
}

.lens-manual-sort-mode .ui-sortable-helper {
    opacity: 0.8 !important;
    box-shadow: var(--lens-shadow-lg) !important;
    background: var(--lens-background) !important;
}

/* Sort placeholder for drag-drop */
.lens-manual-sort-mode .ui-sortable-placeholder {
    visibility: visible !important;
    background: var(--lens-active-bg) !important;
    border: 2px dashed var(--lens-primary) !important;
    opacity: 0.5;
}

/* Folder Header with Sort Controls */
.lens-folders-header,
.lens-folder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--lens-border);
    min-height: 40px;
}

.lens-folders-header .lens-folder-sort-controls,
.lens-folder-header .lens-folder-sort-controls {
    margin-left: auto;
}

/* Mobile Responsive */
@media (max-width: 782px) {
    .lens-sort-button {
        width: 36px;
        height: 36px;
    }
    
    .lens-sort-dropdown {
        min-width: 200px;
        font-size: 14px;
    }
    
    .lens-sort-option {
        padding: 10px 14px;
    }
}

/* Dark Mode Support (if WP dark mode is active) */
@media (prefers-color-scheme: dark) {
    .lens-sort-dropdown {
        background: #1e1e1e;
        border-color: #2c3338;
    }

    .lens-sort-option {
        color: #ffffff;
    }

    .lens-sort-option:hover {
        background: #2c3338;
    }

    .lens-sort-option.active {
        background: #135e96;
        color: #ffffff;
    }

    .lens-sort-check svg {
        stroke: #ffffff;
    }

    .lens-sort-separator {
        background: #2c3338;
    }

    .lens-general-header,
    .lens-shortcuts-header {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
}




.lens-folder-dropdown-item.lens-special-item:hover {
    background-color: #f0f0f1;
}

.lens-folder-dropdown-item.lens-special-item .dashicons-minus {
    color: #50575e;
    opacity: 0.8;
}

/* Add separator after unassigned item */
.lens-folder-dropdown-item.lens-special-item:after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: linear-gradient(to right, transparent, #dcdcde 20%, #dcdcde 80%, transparent);
}

/* Special styling for Unassigned Media item in dropdown */
.lens-folder-dropdown-item.lens-special-item {
    position: relative;
    background-color: #fafafa;
}

.lens-folder-dropdown-item.lens-special-item:hover {
    background-color: #f0f0f1;
}

.lens-folder-dropdown-item.lens-special-item .dashicons-minus {
    color: #50575e;
    opacity: 0.8;
}

/* Visual separator after unassigned item - subtle gradient line */
.lens-folder-dropdown-item.lens-special-item:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(to right, transparent, #dcdcde 10%, #dcdcde 90%, transparent);
    opacity: 0.5;
}

/* Responsive adjustments for integrated input */
@media screen and (max-width: 782px) {
    .lens-input-with-actions {
        flex-wrap: nowrap;
    }

    .lens-input-with-actions .lens-folder-name-input {
        min-width: 0;
        padding: 8px;
        font-size: 14px;
    }

    .lens-input-actions {
        flex-shrink: 0;
    }

    .lens-input-actions .lens-inline-tag .lens-tag-text {
        display: none;
    }

    .lens-input-actions .lens-inline-tag::after {
        content: "T";
        font-weight: bold;
    }
}

/* Folder name row - inline layout */
.lens-folder-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lens-folder-name-row .lens-input-with-tag {
    flex: 1;
    position: relative;
}

.lens-folder-name-row .lens-folder-name-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.lens-folder-name-row .lens-folder-name-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

/* Or divider */
.lens-or-divider {
    color: #8c8f94;
    font-size: 13px;
    font-style: italic;
    white-space: nowrap;
}

/* Upload folder button - standalone style */
.lens-upload-folder-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    color: #2c3338;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}

.lens-upload-folder-button[data-locked="1"] {
    position: relative;
}

.lens-upload-folder-button--locked {
    opacity: 0.4 !important;
    cursor: pointer !important;
}

.lens-upload-folder-button--locked:hover {
    background: #ffffff !important;
    border-color: #dcdcde !important;
    color: #8c8f94 !important;
    transform: none !important;
    box-shadow: none !important;
}

.lens-upload-folder-button--locked:hover svg {
    stroke: #8c8f94 !important;
}

.lens-upload-folder-button:hover {
    background: #f0f0f1;
    border-color: #8c8f94;
    color: #2271b1;
}

.lens-upload-folder-button:active {
    background: #e7e8e8;
    border-color: #8c8f94;
    transform: translateY(1px);
}

.lens-upload-folder-button:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

.lens-upload-folder-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lens-upload-folder-button .lens-button-text {
    font-size: 13px;
}

/* Inline tag adjustments for new layout */
.lens-input-with-tag .lens-inline-tag {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 8px;
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    font-size: 11px;
    color: #50575e;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
    line-height: 1.3;
    font-weight: 500;
}

.lens-input-with-tag .lens-inline-tag:hover {
    background: #2271b1;
    border-color: #2271b1;
    color: #ffffff;
}

.lens-input-with-tag .lens-inline-tag:active {
    background: #135e96;
    border-color: #135e96;
    transform: translateY(-50%) scale(0.98);
}

/* Responsive design */
@media screen and (max-width: 600px) {
    .lens-folder-name-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .lens-folder-name-row .lens-input-with-tag {
        width: 100%;
    }

    .lens-or-divider {
        display: none;
    }

    .lens-upload-folder-button {
        width: 100%;
        justify-content: center;
    }
}

/* Legacy integrated input styles removed */
.lens-input-with-actions,
.lens-input-actions,
.lens-input-divider {
    display: none !important;
}

/* Folder name row layout */
.lens-folder-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lens-folder-name-row .lens-input-with-tag {
    flex: 1;
    position: relative;
}

.lens-folder-name-row .lens-folder-name-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.lens-folder-name-row .lens-folder-name-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

/* Upload folder button - icon only style */
.lens-upload-folder-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    color: #646970;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.lens-upload-folder-button:hover {
    background: #f6f7f7;
    border-color: #8c8f94;
    color: #2271b1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.lens-upload-folder-button:active {
    background: #f0f0f1;
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lens-upload-folder-button:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

.lens-upload-folder-button svg {
    width: 20px;
    height: 20px;
}

/* Hide old elements */
.lens-or-divider,
.lens-button-text {
    display: none !important;
}

/* Responsive - keep side by side even on mobile */
@media screen and (max-width: 600px) {
    .lens-folder-name-row {
        gap: 6px;
    }
    
    .lens-upload-folder-button {
        width: 36px;
        height: 36px;
    }
    
    .lens-upload-folder-button svg {
        width: 18px;
        height: 18px;
    }
}

/* Updated upload button styling */
.lens-upload-folder-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: #2271b1 !important;
    border: 1px solid #2271b1 !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.lens-upload-folder-button:hover {
    background: #135e96 !important;
    border-color: #135e96 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(34, 113, 177, 0.3) !important;
}

.lens-upload-folder-button:active {
    background: #0a4b7c !important;
    border-color: #0a4b7c !important;
    transform: translateY(0) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.lens-upload-folder-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.3) !important;
}

.lens-upload-folder-button svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #ffffff !important;
}

/* Ensure input and button have same height */
.lens-folder-name-row .lens-folder-name-input {
    height: 40px !important;
    padding: 8px 12px !important;
}

/* Perfect alignment */
.lens-folder-name-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
    .lens-upload-folder-button {
        width: 38px !important;
        height: 38px !important;
    }
    
    .lens-folder-name-row .lens-folder-name-input {
        height: 38px !important;
    }
}

/* Override previous styles - Subtle upload button */
.lens-upload-folder-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #dcdcde !important;
    border-radius: 4px !important;
    color: #8c8f94 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.lens-upload-folder-button:hover {
    background: #2271b1 !important;
    border-color: #2271b1 !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.lens-upload-folder-button:hover svg {
    stroke: #ffffff !important;
}

.lens-upload-folder-button:active {
    background: #135e96 !important;
    border-color: #135e96 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.lens-upload-folder-button:focus {
    outline: none !important;
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 1px #2271b1 !important;
}

.lens-upload-folder-button svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #8c8f94 !important;
    transition: stroke 0.2s ease !important;
}

/* Alternative simplified style (commented out intentionally) */
/*
.lens-upload-folder-button {
    background: #f6f7f7 !important;
    border: 1px solid #f6f7f7 !important;
}

.lens-upload-folder-button:hover {
    background: #f0f0f1 !important;
    border-color: #dcdcde !important;
    color: #2271b1 !important;
}

.lens-upload-folder-button:hover svg {
    stroke: #2271b1 !important;
}
*/

/* Ultra-subtle upload button - refined gray hover */
.lens-upload-folder-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #dcdcde !important;
    border-radius: 4px !important;
    color: #8c8f94 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.lens-upload-folder-button:hover {
    background: #f6f7f7 !important;
    border-color: #8c8f94 !important;
    color: #50575e !important;
    transform: none !important;
    box-shadow: none !important;
}

.lens-upload-folder-button:hover svg {
    stroke: #50575e !important;
}

.lens-upload-folder-button:active {
    background: #f0f0f1 !important;
    border-color: #8c8f94 !important;
    box-shadow: none !important;
}

.lens-upload-folder-button:focus {
    outline: none !important;
    border-color: #8c8f94 !important;
    box-shadow: 0 0 0 1px rgba(140, 143, 148, 0.3) !important;
}

.lens-upload-folder-button svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #8c8f94 !important;
    transition: stroke 0.15s ease !important;
}

/* Better hover state - subtle blue tint */
.lens-upload-folder-button:hover {
    background: #f0f6fc !important;  /* Very light blue */
    border-color: #c3d9e8 !important;  /* Soft blue-gray border */
    color: #2271b1 !important;  /* Blue icon */
    transform: none !important;
    box-shadow: none !important;
}

.lens-upload-folder-button:hover svg {
    stroke: #2271b1 !important;  /* Blue icon on hover */
}

/* Alternative option 1 - Light accent background 
.lens-upload-folder-button:hover {
    background: #e7f3ff !important;
    border-color: #b3d4f2 !important;
    color: #0073aa !important;
}
*/

/* Alternative option 2 - Darker gray with blue icon
.lens-upload-folder-button:hover {
    background: #f0f0f1 !important;
    border-color: #a7aaad !important;
    color: #2271b1 !important;
}
*/

/* Alternative option 3 - White with blue border
.lens-upload-folder-button:hover {
    background: #ffffff !important;
    border-color: #2271b1 !important;
    color: #2271b1 !important;
}
*/

/* Pure gray hover variant */
.lens-upload-folder-button:hover {
    background: #f8f9fa !important;  /* Very light gray */
    border-color: #c3c4c7 !important;  /* Medium gray border */
    color: #2c3338 !important;  /* Dark gray icon */
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;  /* Subtle depth */
}

.lens-upload-folder-button:hover svg {
    stroke: #2c3338 !important;  /* Dark gray icon */
}

.lens-upload-folder-button:active {
    background: #f0f0f1 !important;  /* Slightly darker when pressed */
    border-color: #a7aaad !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Alternative - Even more subtle
.lens-upload-folder-button:hover {
    background: #fafafa !important;
    border-color: #d0d0d0 !important;
    color: #1d2327 !important;
}
*/

/* Alternative - Just darken everything slightly
.lens-upload-folder-button:hover {
    background: #f9f9f9 !important;
    border-color: #b5b5b5 !important;
    color: #3c434a !important;
}
*/

/* Consistent gray hover - icon stays subtle */
.lens-upload-folder-button:hover {
    background: #f8f9fa !important;  /* Very light gray */
    border-color: #c3c4c7 !important;  /* Medium gray border */
    color: #646970 !important;  /* Keep icon medium gray - not too dark */
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.lens-upload-folder-button:hover svg {
    stroke: #646970 !important;  /* Same medium gray - consistent with bg */
}

.lens-upload-folder-button:active {
    background: #f0f0f1 !important;
    border-color: #a7aaad !important;
    color: #50575e !important;  /* Slightly darker on press */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.lens-upload-folder-button:active svg {
    stroke: #50575e !important;
}

/* Remove focus outline to match WordPress buttons */
.lens-upload-folder-button:focus {
    outline: none !important;
    border-color: #dcdcde !important;  /* Keep same border as default */
    box-shadow: none !important;  /* No shadow on focus */
}

.lens-upload-folder-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Also ensure no focus outline on active state */
.lens-upload-folder-button:active:focus {
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;  /* Only keep the pressed effect */
}

/* Ensure consistent focus state when tabbing */
.lens-upload-folder-button:focus:not(:hover) {
    background: #ffffff !important;
    border-color: #dcdcde !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Compact dialog width */
#lens-create-folder-dialog .lens-dialog-content {
    max-width: 400px !important;
    width: 90% !important;
}

/* Adjust dialog body padding for compact width */
#lens-create-folder-dialog .lens-dialog-body {
    padding: 20px 24px !important;
}

/* Compact field groups spacing */
#lens-create-folder-dialog .lens-field-group {
    margin-bottom: 18px !important;
}

/* Adjust label spacing for compact design */
#lens-create-folder-dialog .lens-field-group label {
    margin-bottom: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Tighten footer padding */
#lens-create-folder-dialog .lens-dialog-footer {
    padding: 16px 24px !important;
    gap: 8px !important;
}

/* Adjust button sizes for compact dialog */
#lens-create-folder-dialog .lens-dialog-footer .button {
    padding: 6px 16px !important;
    font-size: 13px !important;
}

/* Ensure location picker fits well in compact width */
#lens-create-folder-dialog .lens-import-location-picker {
    width: 100% !important;
}

/* Mobile responsiveness for compact dialog */
@media screen and (max-width: 480px) {
    #lens-create-folder-dialog .lens-dialog-content {
        max-width: 95% !important;
        width: 95% !important;
    }
    
    #lens-create-folder-dialog .lens-dialog-body {
        padding: 16px !important;
    }
    
    #lens-create-folder-dialog .lens-dialog-footer {
        padding: 12px 16px !important;
    }
}

/* Ultra-compact dialog design - remove excess white space */
#lens-create-folder-dialog .lens-dialog-content {
    max-width: 400px !important;
    width: 90% !important;
}

/* Compact header */
#lens-create-folder-dialog .lens-dialog-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

#lens-create-folder-dialog .lens-dialog-header h3 {
    font-size: 16px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Compact body padding */
#lens-create-folder-dialog .lens-dialog-body {
    padding: 16px 20px !important;
}

/* Tight field groups */
#lens-create-folder-dialog .lens-field-group {
    margin-bottom: 14px !important;
}

#lens-create-folder-dialog .lens-field-group:last-child {
    margin-bottom: 0 !important;
}

/* Compact labels */
#lens-create-folder-dialog .lens-field-group label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1d2327 !important;
}

/* Input and location picker height consistency */
#lens-create-folder-dialog .lens-folder-name-input,
#lens-create-folder-dialog .lens-import-location-button {
    height: 36px !important;
    font-size: 13px !important;
}

/* Upload button matching height */
#lens-create-folder-dialog .lens-upload-folder-button {
    width: 36px !important;
    height: 36px !important;
}

#lens-create-folder-dialog .lens-upload-folder-button svg {
    width: 16px !important;
    height: 16px !important;
}

/* Location button consistent styling */
#lens-create-folder-dialog .lens-import-location-button {
    padding: 6px 12px !important;
    border: 1px solid #dcdcde !important;
    background: #fff !important;
    font-size: 13px !important;
    min-height: 36px !important;
}

/* Compact footer */
#lens-create-folder-dialog .lens-dialog-footer {
    padding: 14px 20px !important;
    border-top: 1px solid #e0e0e0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Smaller buttons */
#lens-create-folder-dialog .lens-dialog-footer .button {
    padding: 4px 14px !important;
    font-size: 13px !important;
    height: 30px !important;
    line-height: 20px !important;
}

/* Remove any extra spacing */
#lens-create-folder-dialog .lens-folder-creation-form {
    margin: 0 !important;
    padding: 0 !important;
}

#lens-create-folder-dialog .lens-upload-folder-button[data-locked="1"] {
    opacity: 0.4 !important;
    cursor: pointer !important;
}

#lens-create-folder-dialog .lens-upload-folder-button[data-locked="1"]:hover {
    background: #ffffff !important;
    border-color: #dcdcde !important;
    color: #8c8f94 !important;
    transform: none !important;
    box-shadow: none !important;
}

#lens-create-folder-dialog .lens-upload-folder-button[data-locked="1"]:hover svg {
    stroke: #8c8f94 !important;
}

/* Ensure consistent spacing throughout */
#lens-create-folder-dialog * {
    box-sizing: border-box !important;
}

/* Mobile ultra-compact */
@media screen and (max-width: 480px) {
    #lens-create-folder-dialog .lens-dialog-header {
        padding: 12px 16px !important;
    }

    #lens-create-folder-dialog .lens-dialog-body {
        padding: 12px 16px !important;
    }

    #lens-create-folder-dialog .lens-dialog-footer {
        padding: 12px 16px !important;
    }
}

/* ============================================
   Dropdown Lock Icon Styles
   ============================================ */

/* Ensure dropdown items use flexbox for alignment */
.lens-folder-dropdown-item {
    display: flex !important;
    align-items: center;
}

/* Main dropdown lock icon styling - pushed to right */
.lens-dropdown-lock-icon {
    margin-left: auto;
    margin-right: 8px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.lens-dropdown-lock-icon .dashicons {
    width: 11px;
    height: 11px;
    font-size: 11px;
    color: #8c8f94;
    vertical-align: middle;
}

/* Hover state for locked items */
.lens-folder-dropdown-item:hover .lens-dropdown-lock-icon {
    opacity: 0.8;
}

.lens-folder-dropdown-item.is-locked:hover .lens-dropdown-lock-icon .dashicons {
    color: #6c757d;
}

/* Selected state for locked items */
.lens-folder-dropdown-item.selected .lens-dropdown-lock-icon {
    opacity: 0.7;
}

.lens-folder-dropdown-item.selected .lens-dropdown-lock-icon .dashicons {
    color: #2271b1;
}

/* Import/Move/Create dialog lock icons - better visibility in tree view */
.lens-import-location-item .lens-dropdown-lock-icon {
    margin-left: 8px;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.65;
}

.lens-import-location-item .lens-dropdown-lock-icon .dashicons {
    width: 13px !important;
    height: 13px !important;
    font-size: 13px !important;
    color: #6c757d !important;
}

.lens-import-location-item:hover .lens-dropdown-lock-icon {
    opacity: 0.85;
}

.lens-import-location-item:hover .lens-dropdown-lock-icon .dashicons {
    color: #50575e !important;
}

.lens-import-location-item.active .lens-dropdown-lock-icon {
    opacity: 1;
}

.lens-import-location-item.active .lens-dropdown-lock-icon .dashicons {
    color: #2271b1 !important;
}

/* Ensure import location items display inline properly */
.lens-import-location-item-name {
    display: inline-block;
    vertical-align: middle;
}

/* Upload selector lock icon */
.lens-upload-folder-selector .lens-dropdown-lock-icon {
    margin-left: 3px;
}

/* Attachment details dropdown lock icon */
.lens-attachment-folder-field .lens-dropdown-lock-icon {
    margin-left: 4px;
    opacity: 0.65;
}

.lens-attachment-folder-field .lens-folder-dropdown-item:hover .lens-dropdown-lock-icon {
    opacity: 1;
}

/* Block editor dropdown lock icon */
.lens-folder-select-option.is-locked .lens-dropdown-lock-icon {
    margin-left: 4px;
    opacity: 0.7;
}

/* Ensure folder info takes up available space */
.lens-folder-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0; /* Allow text truncation */
}

.lens-folder-info .lens-folder-name {
    display: block;
}

.lens-folder-info .lens-folder-path {
    font-size: 11px;
    color: #8c8f94;
    font-style: italic;
}

/* ==========================================================================
   Auto-Organize Dialog Styles
   ========================================================================== */

.lens-auto-organize-content {
    width: 650px;
    max-width: 90vw;
}

/* Search and filter controls */
.lens-auto-organize-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.lens-auto-organize-structure {
    border: 1px solid var(--lens-border-subtle, #dcdcde);
    border-radius: 6px;
    padding: 0;
    margin-bottom: 20px;
    background: #fff;
    overflow: visible;
}

.lens-auto-organize-structure .button-link {
    padding: 0;
    font-weight: 500;
    color: var(--lens-text-secondary, #6c7781);
    text-decoration: none;
    transition: color 0.15s ease;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.lens-auto-organize-structure .button-link:hover,
.lens-auto-organize-structure .button-link:focus {
    color: var(--lens-text-primary, #3c434a);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    outline: none;
    box-shadow: none;
}

.lens-structure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: #f6f7f8;
    border: none;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
    font-family: inherit;
}

.lens-structure-summary:hover {
    background: #f0f0f1;
}

.lens-structure-summary:focus {
    outline: none;
    background: #f0f0f1;
}

.lens-structure-toggle-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: #646970;
}

.lens-structure-summary[aria-expanded="true"] .lens-structure-toggle-icon {
    transform: rotate(180deg);
}

.lens-structure-summary-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--lens-text-secondary, #50575e);
    flex: 1;
    min-width: 0;
}

.lens-structure-summary-label {
    font-weight: 500;
}

.lens-structure-preview-path {
    font-weight: 600;
    color: #646970;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.lens-structure-preview-path svg {
    flex-shrink: 0;
}

.lens-structure-editor {
    padding: 16px 16px 16px 16px;
    border-top: 1px solid var(--lens-border-subtle, #f0f0f1);
}

.lens-structure-field {
    margin-bottom: 12px;
}

.lens-structure-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--lens-text-primary, #1d2327);
}

.lens-structure-parent {
    min-width: 240px;
    max-width: 100%;
}

.lens-structure-template {
    width: 100%;
    max-width: 100%;
}

.lens-structure-input-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.lens-structure-template-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

.lens-structure-template-editor {
    min-height: 20px;
    padding: 4px 8px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    line-height: 1.6;
    cursor: text;
    overflow-x: auto;
    white-space: nowrap;
    transition: border-color 0.15s ease;
}

.lens-structure-template-editor:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

.lens-structure-template-editor:empty:before {
    content: attr(data-placeholder);
    color: #8c8f94;
    pointer-events: none;
    font-style: normal;
}

.lens-token-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 1px;
    background: var(--lens-chip-background, #f6f7f8);
    border: 1px solid var(--lens-border-subtle, #dcdcde);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--lens-chip-text, #1d2327);
    user-select: none;
    cursor: default;
    white-space: nowrap;
    vertical-align: middle;
    transition: none;
}

.lens-token-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10000003;
    max-height: 240px;
    overflow-y: auto;
}

.lens-token-autocomplete--above {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 4px;
}

.lens-token-autocomplete-list {
    padding: 4px 0;
}

.lens-token-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--lens-text, #1d2327);
    transition: background-color 0.1s ease;
}

.lens-token-autocomplete-item:first-child {
    border-bottom: 1px solid var(--lens-border-subtle, #dcdcde);
    background: var(--lens-chip-background, #f6f7f8);
}

.lens-token-autocomplete-item:hover,
.lens-token-autocomplete-item.selected {
    background: var(--lens-active-bg, #f0f0f1);
}

.lens-token-autocomplete-item-label {
    font-weight: 500;
}

.lens-token-autocomplete-item-token {
    font-size: 11px;
    color: var(--lens-text-secondary, #50575e);
    font-family: monospace;
}

.lens-token-autocomplete-empty {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--lens-text-secondary, #50575e);
}

.lens-structure-hints {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--lens-text-muted, #6c7781);
}

.lens-structure-preview {
    font-size: 12px;
    color: var(--lens-text-secondary, #50575e);
    margin-top: 8px;
    margin-bottom: 12px;
}

.lens-structure-example {
    margin-left: 6px;
    font-weight: 600;
    color: var(--lens-text-primary, #1d2327);
}

.lens-structure-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.lens-structure-actions .button:focus {
    outline: none;
    box-shadow: none;
}

@media (max-width: 600px) {
    .lens-structure-input-row {
        flex-direction: column;
    }

    .lens-structure-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.lens-auto-organize-search-wrapper {
    position: relative !important;
    flex: 1;
    display: flex;
    align-items: center;
}

.lens-auto-organize-search {
    width: 100%;
    padding: 8px 12px 8px 36px !important;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    height: 36px; /* Fixed height for consistent appearance */
}

.lens-auto-organize-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1; /* Ensure icon is above input */
    display: flex !important; /* Ensure icon container displays */
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

/* Ensure SVG icon displays properly */
.lens-auto-organize-search-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    color: #646970;
}

/* Reset any WordPress admin input styles that might interfere */
.lens-auto-organize-dialog input[type="text"].lens-auto-organize-search {
    background-color: #fff !important;
    background-image: none !important; /* Remove any WordPress background images */
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: normal !important;
}

/* Ensure search wrapper isn't affected by WordPress styles */
.lens-auto-organize-controls .lens-auto-organize-search-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.lens-auto-organize-filter {
    padding: 7px 12px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    min-width: 160px;
    height: 36px;
    box-sizing: border-box;
    cursor: pointer;
}

/* Posts list */
.lens-auto-organize-list-wrapper {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    margin-bottom: 20px;
}

.lens-auto-organize-list {
    padding: 0;
}

.lens-auto-organize-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f1;
    transition: background-color 0.2s;
}

.lens-auto-organize-item:hover {
    background-color: #f6f7f7;
}

.lens-auto-organize-item.selected {
    background-color: #f0f6fc;
}

.lens-auto-organize-item:last-child {
    border-bottom: none;
}

.lens-organize-item-left {
    flex: 1;
    min-width: 0;
}

.lens-organize-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

/* WordPress admin checkbox style reset and alignment fix */
.lens-post-checkbox {
    margin: 0 !important; /* Reset WordPress admin margins */
    padding: 0 !important;
    flex-shrink: 0;
    position: relative;
    top: auto !important; /* Reset any position adjustments */
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

/* Ensure WordPress doesn't override checkbox positioning */
.lens-auto-organize-dialog input[type="checkbox"] {
    margin: 0 !important;
    position: static !important;
    vertical-align: middle !important;
}

.lens-organize-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

.lens-organize-item-title {
    font-weight: 500;
    font-size: 14px;
    color: #1e1e1e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.lens-organize-meta-pill {
    font-size: 12px;
    color: #757575;
    flex-shrink: 0;
    white-space: nowrap;
    background: #f6f7f8;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 400;
    line-height: 1.4;
}


.lens-organize-item-right {
    margin-left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lens-open-folder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    color: #50575e;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    flex-shrink: 0;
    outline: none;
}

.lens-open-folder-btn:hover {
    background: #f0f0f1;
    border-color: #a7aaad;
    color: #1d2327;
}

.lens-open-folder-btn:active {
    background: #dcdcde;
}

.lens-open-folder-btn:focus {
    outline: none;
    box-shadow: none;
}

.lens-open-folder-btn svg {
    stroke-width: 2;
}

/* Organize Single Button - Consistent with Export Dialog */
.lens-organize-single-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    background: #2271b1;
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 85px;
    position: relative;
}

.lens-organize-single-btn:hover:not(:disabled):not(.organized) {
    background: #135e96;
    opacity: 0.95;
}

.lens-organize-single-btn:active:not(:disabled):not(.organized) {
    opacity: 1;
    background: #0f4d7a;
}

.lens-organize-single-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* Organize button states */
.lens-organize-single-btn.organizing {
    cursor: default;
}

.lens-organize-single-btn.organized {
    cursor: default;
}

.lens-organize-single-btn.error-state {
    background: #d63638 !important;
    animation: shake 0.3s ease;
}

/* SVG icons in button */
.lens-organize-single-btn svg {
    width: 16px;
    height: 16px;
}

/* Spinner animation */
.lens-organize-single-btn .organize-spinner {
    animation: spin 1s linear infinite;
}

/* Smooth transitions for icon changes */
.lens-organize-single-btn .organize-text,
.lens-organize-single-btn .organize-spinner,
.lens-organize-single-btn .organize-check {
    transition: opacity 0.2s ease;
}

/* Checkmark styling - animation only on initial show */
.lens-organize-single-btn.organized:not(.revert-ready) .organize-check {
    animation: checkmark-appear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lens-organize-single-btn .organize-check {
    stroke: currentColor;
}

/* Button in organizing state */
.lens-organize-single-btn.organizing {
    opacity: 0.8;
    cursor: wait;
    pointer-events: none;
}

/* Button in organized state */
.lens-organize-single-btn.organized {
    opacity: 0.85;
    cursor: default;
    pointer-events: none;
    position: relative;
}

/* Button ready for revert */
.lens-organize-single-btn.organized.revert-ready {
    cursor: pointer;
    pointer-events: auto;
}

.lens-organize-single-btn.organized .organize-check {
    display: block !important;
}

/* Show undo icon on hover over revert-ready button */
.lens-organize-single-btn.organized.revert-ready:hover {
    opacity: 1;
    background: #d63638;
}

.lens-organize-single-btn.organized.revert-ready:hover .organize-check {
    display: none !important;
}

.lens-organize-single-btn.organized.revert-ready:hover .organize-undo {
    display: block !important;
}

/* Undo icon styling - no animation to prevent bounce */
.lens-organize-single-btn .organize-undo {
    stroke: currentColor;
}

/* Smooth transitions for state changes */
.lens-organize-single-btn {
    transition: background 0.15s ease, opacity 0.15s ease;
}

.lens-organize-single-btn .organize-text,
.lens-organize-single-btn .organize-check,
.lens-organize-single-btn .organize-undo,
.lens-organize-single-btn .organize-spinner {
    transition: opacity 0.15s ease;
}

/* Checkmark animation */
@keyframes checkmark-appear {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(0deg);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Loading state */
.lens-auto-organize-loading {
    text-align: center;
    padding: 60px 20px;
}

.lens-loading-spinner {
    margin-bottom: 12px;
}

.lens-loading-spinner .dashicons {
    font-size: 32px;
    animation: spin 1s linear infinite;
    color: #2271b1;
}

/* Empty state */
.lens-auto-organize-empty {
    text-align: center;
    padding: 60px 20px;
}

.lens-auto-organize-empty .lens-empty-icon svg {
    opacity: 0.3;
}

.lens-auto-organize-empty-text {
    margin-top: 16px;
    color: #1e1e1e;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.lens-auto-organize-empty-hint {
    color: #646970;
    font-size: 13px;
    margin: 0;
}

/* Progress Screen (Full Dialog) */
.lens-auto-organize-progress {
    text-align: center;
    padding: 80px 60px;
    animation: lens-success-fade-in 0.3s ease-out;
}

.lens-progress-bar {
    max-width: 400px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 24px;
}

.lens-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2271b1 0%, #135e96 100%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

.lens-progress-text {
    text-align: center;
    color: #646970;
    font-size: 14px;
    line-height: 1.6;
}

.lens-progress-current,
.lens-progress-total {
    font-weight: 600;
    color: #1d2327;
    font-size: 15px;
}

.lens-progress-label {
    display: block;
    margin-top: 4px;
    color: #8c8f94;
}

/* Results */
.lens-auto-organize-results {
    padding: 20px;
    background: #f0f9ff;
    border: 1px solid #c3e7fd;
    border-radius: 4px;
    margin-bottom: 20px;
}

.lens-results-success {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.lens-results-success .dashicons {
    color: #00a32a;
    font-size: 24px;
}

.lens-results-text {
    font-size: 16px;
    font-weight: 500;
    color: #1e1e1e;
}

.lens-results-details {
    margin-left: 32px;
    font-size: 13px;
    color: #646970;
}

/* Success Screen (Bulk Organization) */
.lens-auto-organize-success {
    text-align: center;
    padding: 40px 32px;
    animation: lens-success-fade-in 0.3s ease-out;
}

@keyframes lens-success-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success Icon */
.lens-success-icon-wrapper {
    margin: 0 auto 20px;
    width: 52px;
    height: 52px;
    animation: lens-success-icon-scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes lens-success-icon-scale {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lens-success-icon {
    width: 52px;
    height: 52px;
    color: #2271b1;
}

.lens-success-icon circle {
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: lens-check-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards;
}

.lens-success-icon path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: lens-check-mark 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
}

@keyframes lens-check-circle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes lens-check-mark {
    to {
        stroke-dashoffset: 0;
    }
}

/* Success Content */
.lens-success-content {
    margin-bottom: 28px;
}

.lens-success-title {
    font-size: 20px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.lens-success-subtitle {
    font-size: 14px;
    color: #646970;
    margin: 0;
}

/* Success Actions */
.lens-success-actions {
    margin-top: 24px;
}

.lens-success-done {
    min-width: 120px;
    padding: 8px 24px;
    font-size: 14px;
}

.lens-results-details > div {
    margin-top: 4px;
}

.lens-results-errors {
    color: #d63638;
    font-weight: 500;
}

/* Dialog footer */
.lens-dialog-footer-left {
    flex: 1;
    display: flex;
    align-items: center;
}

.lens-dialog-footer-right {
    display: flex;
    gap: 8px;
}

.lens-auto-organize-status {
    font-size: 13px;
    color: #646970;
}

.lens-status-selected {
    font-weight: 400;
    color: #646970;
}

.lens-status-selected strong {
    font-weight: 600;
}

.lens-status-separator {
    margin: 0 8px;
    opacity: 0.5;
}

.lens-status-skipped-count {
    font-weight: 500;
}

/* Empty state button styling */
.lens-empty-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-top: 0;
}

.lens-empty-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #646970;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.lens-empty-secondary-link .lens-sparkle-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.lens-empty-secondary-link:hover {
    color: #2271b1;
    background: rgba(34, 113, 177, 0.04);
    text-decoration: none;
}

.lens-empty-secondary-link:active {
    background: rgba(34, 113, 177, 0.08);
}

.lens-empty-secondary-link:focus,
.lens-empty-secondary-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none;
}

.lens-empty-divider {
    position: relative;
    font-size: 11px;
    font-weight: 500;
    color: #8c8f94;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 4px 0;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lens-empty-divider::before,
.lens-empty-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dcdcde;
    max-width: 60px;
}

.lens-empty-divider::before {
    margin-right: 12px;
}

.lens-empty-divider::after {
    margin-left: 12px;
}

.lens-empty-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: #2271b1;
    border: 1px solid rgba(34, 113, 177, 0.3);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    height: 36px;
    outline: none;
}

.lens-empty-secondary:hover {
    background: rgba(34, 113, 177, 0.06);
    border-color: rgba(34, 113, 177, 0.5);
    color: #2271b1;
}

.lens-empty-secondary:active {
    background: rgba(34, 113, 177, 0.1);
}

.lens-empty-secondary:focus {
    outline: none;
}

.lens-empty-secondary .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}
.lens-permissions-content {
    position: relative;
}

.lens-settings-section[data-section="shortcuts"].lens-shortcuts-locked {
    position: relative;
}

.lens-permissions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: radial-gradient(ellipse at center, rgba(249, 250, 251, 0.80) 0%, rgba(249, 250, 251, 0.75) 40%, rgba(249, 250, 251, 0.65) 70%, rgba(249, 250, 251, 0.50) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: pointer;
    text-align: center;
    z-index: 5;
}

.lens-permissions-overlay-content {
    max-width: 280px;
    pointer-events: none;
    display: grid;
    gap: 8px;
}

.lens-overlay-lock-icon {
    width: 14px;
    height: 14px;
    margin: 0 auto 4px;
    color: #6B7280;
    opacity: 0.6;
}

.lens-permissions-overlay-content h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #1F2937;
}

.lens-permissions-overlay-content p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #6B7280;
}

.lens-permissions-overlay .lens-permissions-upgrade {
    pointer-events: auto;
    justify-self: center;
    font-size: 12px;
    font-weight: 500;
    padding: 0px 14px;
    height: auto;
    margin-top: 4px;
}

.lens-permissions-overlay .lens-permissions-upgrade:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.lens-settings-nav-item--locked {
    position: relative;
}

.lens-settings-nav-item--locked .lens-feature-badge {
    margin-left: auto;
}

/* Locked folder cleanup modal */
.lens-lock-cleanup-overlay {
	z-index: 11000000;
}

.lens-lock-cleanup-modal {
	background: none;
	right: auto;
	bottom: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.lens-lock-cleanup-modal .lens-dialog-content {
	max-width: 420px;
	margin: 0 auto;
}

/* Progress dialog overlay */
.lens-progress-dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100100;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.lens-progress-dialog-overlay.show {
	opacity: 1;
}

.lens-progress-dialog {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	width: 380px;
	min-width: 380px;
	max-width: 380px;
	transform: scale(0.95);
	transition: transform 0.2s ease-in-out;
}

.lens-progress-dialog-overlay.show .lens-progress-dialog {
	transform: scale(1);
}

.lens-progress-dialog-header {
	padding: 14px 20px 0;
}

.lens-progress-dialog-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.3;
}

.lens-progress-dialog-body {
	padding: 10px 20px 12px;
}

.lens-progress-message {
	font-size: 12px;
	color: #50575e;
	margin-bottom: 10px;
	line-height: 1.4;
	transition: opacity 0.2s ease;
	min-height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.lens-progress-bar-container {
	margin-bottom: 8px;
}

.lens-progress-bar {
	height: 3px;
	background: #e0e0e0;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

.lens-progress-dialog .lens-progress-bar {
	margin: 0;
}

.lens-progress-bar-fill {
	height: 100%;
	background: #2271b1;
	border-radius: 2px;
	width: 0;
	transition: width 0.3s ease;
}

.lens-progress-bar-fill.indeterminate {
	width: 30% !important;
	animation: indeterminate 1.5s infinite;
	background: linear-gradient(90deg, #2271b1 0%, #135e96 50%, #2271b1 100%);
}

@keyframes indeterminate {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(400%);
	}
}

.lens-progress-dialog-footer {
	padding: 0 20px 12px;
	display: flex;
	justify-content: flex-end;
}

.lens-progress-cancel {
	padding: 4px 12px;
	font-size: 12px;
	line-height: 1.4;
	border: 1px solid #c3c4c7;
	background: #fff;
	color: #2c3338;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.1s ease;
}

.lens-progress-cancel:hover:not(:disabled) {
	background: #f6f7f7;
	border-color: #8c8f94;
}

.lens-progress-cancel:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.lens-progress-cancel:focus {
	outline: none;
	box-shadow: none;
}

@media (prefers-color-scheme: dark) {
	.lens-progress-dialog {
		background: #1e1e1e;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
	}

	.lens-progress-dialog-header h3 {
		color: #e0e0e0;
	}

	.lens-progress-message {
		color: #b0b0b0;
	}

	.lens-progress-bar {
		background: #3a3a3a;
	}

	.lens-progress-cancel {
		background: #2a2a2a;
		border-color: #4a4a4a;
		color: #e0e0e0;
	}

	.lens-progress-cancel:hover:not(:disabled) {
		background: #3a3a3a;
		border-color: #5a5a5a;
	}
}

body.wp-admin.dark-mode .lens-progress-dialog {
	background: #1e1e1e;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

body.wp-admin.dark-mode .lens-progress-dialog-header h3 {
	color: #e0e0e0;
}

body.wp-admin.dark-mode .lens-progress-message {
	color: #b0b0b0;
}

body.wp-admin.dark-mode .lens-progress-bar {
	background: #3a3a3a;
}

body.wp-admin.dark-mode .lens-progress-cancel {
	background: #2a2a2a;
	border-color: #4a4a4a;
	color: #e0e0e0;
}

body.wp-admin.dark-mode .lens-progress-cancel:hover:not(:disabled) {
	background: #3a3a3a;
	border-color: #5a5a5a;
}

@media (max-width: 440px) {
	.lens-progress-dialog {
		width: calc(100vw - 40px);
		min-width: 280px;
		max-width: calc(100vw - 40px);
		margin: 0 20px;
	}
}

/* API Access Tab */
/* ========================================
   API Access Section - Sophisticated Design
   Inspired by Stripe, Vercel, Linear
   ======================================== */

.lens-api-access-section {
	margin-top: 8px;
}

.lens-api-access-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

/* Header */
.lens-api-header {
	margin-bottom: 16px;
}

.lens-api-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.lens-api-header h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--lens-text);
	letter-spacing: -0.01em;
}

.lens-api-subtitle {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--lens-text-secondary);
}

/* Status Badge */
.lens-api-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	transition: all 0.15s ease;
}

.lens-api-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

.lens-api-status--active {
	background: #ecfdf5;
	color: #059669;
	border-color: #d1fae5;
}

.lens-api-status--active .lens-api-status-dot {
	background: #10b981;
	opacity: 1;
	animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-dot {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.lens-api-status--revoked {
	background: #fef2f2;
	color: #dc2626;
	border-color: #fecaca;
}

.lens-api-status--missing {
	background: #f8fafc;
	color: #64748b;
	border-color: #e2e8f0;
}

.lens-api-status--error {
	background: #fef2f2;
	color: #dc2626;
	border-color: #fecaca;
}

/* Panels */
.lens-api-panel,
.lens-api-guide-panel {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px;
	background: #ffffff;
	transition: all 0.2s ease;
}

/* States */
.lens-api-state {
	display: none;
}

/* Loading State */
.lens-api-state-loading {
	text-align: center;
	padding: 32px;
}

.lens-api-loading-spinner {
	width: 32px;
	height: 32px;
	margin: 0 auto 16px;
	border: 2px solid #e5e7eb;
	border-top-color: #2271b1;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

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

.lens-api-loading-text {
	margin: 0;
	font-size: 14px;
	color: var(--lens-text-secondary);
}

/* Empty State */
.lens-api-state-empty {
	text-align: center;
	padding: 40px 24px;
}

.lens-api-empty-content {
	max-width: 360px;
	margin: 0 auto;
}

.lens-api-empty-icon {
	color: #cbd5e1;
	margin-bottom: 16px;
}

.lens-api-empty-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--lens-text);
}

.lens-api-empty-description {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--lens-text-secondary);
}

/* Alert */
.lens-api-alert {
	display: flex;
	gap: 12px;
	padding: 16px;
	border-radius: 8px;
	margin-bottom: 20px;
	border: 1px solid;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lens-api-alert-warning {
	background: #fffbeb;
	border-color: #fde68a;
}

.lens-api-alert-icon {
	flex-shrink: 0;
	color: #f59e0b;
}

.lens-api-alert-content {
	flex: 1;
	min-width: 0;
}

.lens-api-alert-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: #92400e;
}

.lens-api-alert-description {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #78350f;
}

.lens-api-key-display {
	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
	background: #ffffff;
	border: 1px solid #fde68a;
	padding: 12px;
	border-radius: 6px;
	font-size: 13px;
	word-break: break-all;
	color: #1f2937;
	user-select: all;
}

/* Field */
.lens-api-field {
	margin-bottom: 20px;
}

.lens-api-field-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--lens-text);
}

.lens-api-field-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lens-api-key-value {
	flex: 1;
	min-width: 0;
	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
	font-size: 13px;
}

.lens-api-key-masked,
.lens-api-key-plaintext {
	display: block;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	padding: 10px 12px;
	border-radius: 6px;
	word-break: break-all;
	color: #6b7280;
	transition: all 0.2s ease;
}

/* Metadata */
.lens-api-metadata {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
	padding: 16px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
}

.lens-api-meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lens-api-meta-label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
}

.lens-api-meta-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--lens-text);
}

/* Actions */
.lens-api-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.lens-api-notice {
	margin: 0;
	font-size: 13px;
	color: #6b7280;
}

/* Buttons */
.lens-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 16px;
	height: 36px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: all 0.15s ease;
	outline: none;
	position: relative;
}

.lens-btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.lens-btn-sm {
	height: 32px;
	padding: 0 12px;
	font-size: 13px;
}

.lens-btn svg {
	flex-shrink: 0;
}

.lens-btn-primary {
	background: #2271b1;
	color: #ffffff;
	border-color: #2271b1;
}

.lens-btn-primary:hover:not(:disabled) {
	background: #135e96;
	border-color: #135e96;
}

.lens-btn-primary:active:not(:disabled) {
	background: #0a4b78;
}

.lens-btn-secondary {
	background: #ffffff;
	color: #374151;
	border-color: #d1d5db;
}

.lens-btn-secondary:hover:not(:disabled) {
	background: #f9fafb;
	border-color: #9ca3af;
}

.lens-btn-secondary:active:not(:disabled) {
	background: #f3f4f6;
}

.lens-btn-danger {
	background: #ffffff;
	color: #dc2626;
	border-color: #fecaca;
}

.lens-btn-danger:hover:not(:disabled) {
	background: #fef2f2;
	border-color: #fca5a5;
}

.lens-btn-danger:active:not(:disabled) {
	background: #fee2e2;
}

.lens-btn-ghost {
	background: transparent;
	color: #6b7280;
	border-color: transparent;
}

.lens-btn-ghost:hover:not(:disabled) {
	background: #f3f4f6;
	color: #374151;
}

.lens-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Button Loading State */
.lens-btn-loading {
	pointer-events: none;
}

.lens-btn-loader {
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

/* Developer Guide */
.lens-api-guide-steps {
	margin-bottom: 24px;
}

.lens-api-guide-step {
	display: flex;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid #f3f4f6;
}

.lens-api-guide-step:last-child {
	border-bottom: none;
}

.lens-api-guide-step-number {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f3f4f6;
	color: #6b7280;
	font-size: 13px;
	font-weight: 600;
}

.lens-api-guide-step-content {
	flex: 1;
	min-width: 0;
}

.lens-api-guide-step-title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--lens-text);
}

.lens-api-guide-step-description {
	margin: 0;
	font-size: 13px;
	color: var(--lens-text-secondary);
}

.lens-api-code-inline-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.lens-api-code-inline {
	display: inline-block;
	padding: 3px 8px;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
	font-size: 12px;
	color: #374151;
	word-break: break-all;
	transition: all 0.15s ease;
}

.lens-api-code-copyable {
	padding-right: 32px;
}

.lens-api-code-inline-copy {
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 4px;
	cursor: pointer;
	color: #6b7280;
	transition: all 0.15s ease;
}

.lens-api-code-inline-copy:hover {
	background: #e5e7eb;
	color: #374151;
}

.lens-api-code-inline-wrapper:hover .lens-api-code-inline-copy {
	display: flex;
}

.lens-api-code-inline-wrapper:hover .lens-api-code-inline {
	background: #e5e7eb;
	border-color: #d1d5db;
}

/* Code Example */
.lens-api-code-example {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 20px;
}

.lens-api-code-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
}

.lens-api-code-tabs {
	display: flex;
	gap: 4px;
}

.lens-api-code-tab {
	padding: 4px 8px;
	border: none;
	background: transparent;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.15s ease;
}

.lens-api-code-tab-active {
	background: #ffffff;
	color: #374151;
	border: 1px solid #e5e7eb;
}

.lens-api-code-block {
	margin: 0;
	padding: 16px;
	background: #1e293b;
	overflow-x: auto;
}

.lens-api-code-block code {
	font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
	font-size: 12px;
	line-height: 1.6;
	color: #e2e8f0;
}

/* Footer */
.lens-api-guide-footer {
	padding-top: 16px;
	border-top: 1px solid #f3f4f6;
}

.lens-api-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #2271b1;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.15s ease;
}

.lens-api-link:hover {
	color: #135e96;
	gap: 6px;
}

.lens-api-link svg {
	transition: transform 0.15s ease;
}

.lens-api-link:hover svg {
	transform: translate(1px, -1px);
}

/* Dark Mode */
body.wp-admin.dark-mode .lens-api-panel,
body.wp-admin.dark-mode .lens-api-guide-panel {
	background: #1f2937;
	border-color: #374151;
}

body.wp-admin.dark-mode .lens-api-subtitle,
body.wp-admin.dark-mode .lens-api-empty-description,
body.wp-admin.dark-mode .lens-api-loading-text,
body.wp-admin.dark-mode .lens-api-notice {
	color: #9ca3af;
}

body.wp-admin.dark-mode .lens-api-key-masked,
body.wp-admin.dark-mode .lens-api-key-plaintext,
body.wp-admin.dark-mode .lens-api-metadata {
	background: #111827;
	border-color: #374151;
	color: #d1d5db;
}

body.wp-admin.dark-mode .lens-api-code-inline {
	background: #111827;
	border-color: #374151;
	color: #d1d5db;
}

body.wp-admin.dark-mode .lens-api-code-inline-wrapper:hover .lens-api-code-inline {
	background: #1f2937;
	border-color: #4b5563;
}

body.wp-admin.dark-mode .lens-api-code-inline-copy {
	color: #9ca3af;
}

body.wp-admin.dark-mode .lens-api-code-inline-copy:hover {
	background: #374151;
	color: #f3f4f6;
}

body.wp-admin.dark-mode .lens-api-btn-secondary {
	background: #374151;
	border-color: #4b5563;
	color: #f3f4f6;
}

body.wp-admin.dark-mode .lens-api-btn-secondary:hover:not(:disabled) {
	background: #4b5563;
	border-color: #6b7280;
}