/**
 * ═══════════════════════════════════════════════════════════════════
 * BUTTON DESIGN REFACTOR - Luxury Theme Consistency
 * ═══════════════════════════════════════════════════════════════════
 */

/* ==================== HEADER BUTTONS - LESS ROUNDED ==================== */

/* Header buttons should have subtle rounding, not too curved */
#new-project-btn,
#export-btn,
#import-btn,
#settings-btn,
#theme-toggle-btn,
#model-selector,
#budget-stats-btn,
#buy-credits-btn,
#help-btn,
#diagnostics-btn {
    border-radius: 6px !important; /* Less curved than before */
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--bg-elevated) !important;
    border: 1.5px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Subtle hover effect for header buttons */
#new-project-btn:hover,
#export-btn:hover,
#import-btn:hover,
#settings-btn:hover,
#theme-toggle-btn:hover,
#budget-stats-btn:hover,
#buy-credits-btn:hover,
#help-btn:hover,
#diagnostics-btn:hover {
    transform: translateY(-1px) !important;
    border-color: var(--accent-primary) !important;
    background: var(--bg-tertiary) !important;
    box-shadow: 0 4px 12px rgba(107, 124, 255, 0.2) !important;
}

#new-project-btn:active,
#export-btn:active,
#import-btn:active,
#settings-btn:active,
#theme-toggle-btn:active,
#budget-stats-btn:active,
#buy-credits-btn:active,
#help-btn:active,
#diagnostics-btn:active {
    transform: translateY(0) scale(0.98) !important;
    transition-duration: 0.1s !important;
}

/* Model selector matching design */
#model-selector {
    min-width: 160px !important;
    cursor: pointer !important;
}

/* ==================== CONTEXT LIBRARY FILES - TOP MARGIN FIX ==================== */

/* Fix documents list being cut off at top */
.documents-list,
.summaries-list {
    margin-top: 12px !important; /* Space from elements above */
    padding-top: 4px !important;
}

/* Fix grayed out text - ensure document names are readable */
.doc-name,
.document-card .doc-name,
.document-card:hover .doc-name {
    color: var(--text-primary) !important;
    opacity: 1 !important;
}

/* Active document name should be accent color */
.document-card.active .doc-name {
    color: var(--accent-primary) !important;
    font-weight: 700 !important;
}

/* Smooth document card transitions */
.document-card {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.document-card:hover {
    transform: translateX(3px) !important;
}

/* Fix Context Library title - should be plain text not button */
#context-library-btn {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: color 0.2s ease !important;
    text-align: left !important;
}

#context-library-btn:hover {
    color: var(--accent-primary) !important;
}

/* ==================== CONTEXT LIBRARY BUTTONS - COMPLETE REDESIGN ==================== */

/* Subtle entrance animation keyframes */
@keyframes buttonFadeIn {
    from {
        opacity: 0;
        transform: scale(1) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Base styles for all context library action buttons - SIMPLIFIED */
.upload-button-compact,
#upload-area,
#create-document-btn,
#export-context-btn,
#folder-explorer-btn,
button#create-document-btn,
button#export-context-btn,
button#folder-explorer-btn {
    position: relative !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 2px solid rgba(107, 124, 255, 0.25) !important;
    background: linear-gradient(135deg, rgba(107, 124, 255, 0.08) 0%, rgba(133, 146, 255, 0.05) 100%) !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    
    /* Smooth unified transition with separate timing for different properties */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.35s cubic-bezier(0.4, 0.0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0.0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    
    /* Hardware acceleration for smoother animations */
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    
    /* Initial transform state for smooth scaling */
    transform: scale(1) translateY(0) !important;
    
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05),
                0 1px 3px rgba(0, 0, 0, 0.08) !important;
    
    /* Ensure proper display */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    
    /* Subtle entrance animation */
    animation: buttonFadeIn 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) backwards !important;
}

/* Staggered entrance delays for each button */
#upload-area {
    animation-delay: 0.05s !important;
}

#create-document-btn {
    animation-delay: 0.1s !important;
}

#export-context-btn {
    animation-delay: 0.15s !important;
}

#folder-explorer-btn {
    animation-delay: 0.2s !important;
}

/* Remove complex pseudo-elements that might interfere with clicks */
/* Simpler approach for better reliability */

/* Disable the old expanding circle effect from styles.css */
.upload-button-compact::before,
#upload-area::before,
#create-document-btn::before,
#export-context-btn::before,
#folder-explorer-btn::before {
    display: none !important;
    content: none !important;
}

/* Hover state - smooth and visible with pronounced scale */
.upload-button-compact:hover,
#upload-area:hover,
#create-document-btn:hover,
#export-context-btn:hover,
#folder-explorer-btn:hover,
button#create-document-btn:hover,
button#export-context-btn:hover,
button#folder-explorer-btn:hover,
div#upload-area:hover {
    transform: translateY(-4px) scale(1.05) !important;
    border-color: var(--accent-primary) !important;
    background: linear-gradient(135deg, rgba(107, 124, 255, 0.18) 0%, rgba(133, 146, 255, 0.12) 100%) !important;
    box-shadow: 0 10px 25px rgba(107, 124, 255, 0.35),
                0 5px 12px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Active/press state - satisfying press feedback */
.upload-button-compact:active,
#upload-area:active,
#create-document-btn:active,
#export-context-btn:active,
#folder-explorer-btn:active {
    transform: translateY(-2px) scale(0.98) !important;
    box-shadow: 0 4px 10px rgba(107, 124, 255, 0.3),
                0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.1s cubic-bezier(0.4, 0.0, 0.2, 1),
                box-shadow 0.1s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Pulse animation on first load to draw attention */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    50% {
        box-shadow: 0 4px 16px rgba(107, 124, 255, 0.2);
    }
}

/* Apply subtle pulse to draw attention (can be toggled) */
.upload-button-compact.highlight,
#create-document-btn.highlight {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Special styling for upload area (dashed border) */
#upload-area {
    border-style: dashed !important;
    border-width: 2px !important;
    text-align: center !important;
    padding: 16px 20px !important;
}

#upload-area:hover {
    border-style: solid !important;
}

/* Upload button label - ensure it inherits animations */
.upload-button-label {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: inherit !important;
}

/* Explorer button - golden theme */
#folder-explorer-btn {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.08) 0%, rgba(251, 191, 36, 0.05) 100%) !important;
    border-color: rgba(234, 179, 8, 0.25) !important;
}

#folder-explorer-btn:hover {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.18) 0%, rgba(251, 191, 36, 0.12) 100%) !important;
    border-color: rgb(234, 179, 8) !important;
    box-shadow: 0 10px 25px rgba(234, 179, 8, 0.35),
                0 5px 12px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    /* Inherits transform: translateY(-4px) scale(1.05) from base hover */
}

/* Export button - success green theme */
#export-context-btn {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(74, 222, 128, 0.05) 100%) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
}

#export-context-btn:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(74, 222, 128, 0.12) 100%) !important;
    border-color: rgb(34, 197, 94) !important;
    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.35),
                0 5px 12px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    /* Inherits transform: translateY(-4px) scale(1.05) from base hover */
}

/* Create button - primary accent */
#create-document-btn {
    background: linear-gradient(135deg, rgba(107, 124, 255, 0.12) 0%, rgba(133, 146, 255, 0.08) 100%) !important;
    border-color: rgba(107, 124, 255, 0.35) !important;
}

#create-document-btn:hover {
    background: linear-gradient(135deg, rgba(107, 124, 255, 0.22) 0%, rgba(133, 146, 255, 0.16) 100%) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 10px 25px rgba(107, 124, 255, 0.4),
                0 5px 12px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    /* Inherits transform: translateY(-4px) scale(1.05) from base hover */
}

/* Upload button - enhanced with hover glow */
#upload-area:hover {
    box-shadow: 0 10px 25px rgba(107, 124, 255, 0.35),
                0 5px 12px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    /* Inherits transform: translateY(-4px) scale(1.05) from base hover */
}

/* ==================== ROLEPLAY MODE BUTTONS - RECREATED ==================== */

/* Define Yourself & Create Character buttons */
#define-yourself-btn,
#create-character-btn {
    position: relative !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Define Yourself - Info blue */
#define-yourself-btn {
    background: linear-gradient(135deg, #4aa3ff 0%, #3b8eea 100%) !important;
}

/* Create Character - Accent primary */
#create-character-btn {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #8592ff 100%) !important;
}

/* Animated background gradient */
#define-yourself-btn::before,
#create-character-btn::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease, transform 0.6s ease !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Text above gradient */
#define-yourself-btn > *,
#create-character-btn > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Hover states */
#define-yourself-btn:hover {
    background: linear-gradient(135deg, #5ab0ff 0%, #4a9efa 100%) !important;
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 8px 24px rgba(74, 163, 255, 0.4),
                0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#create-character-btn:hover {
    background: linear-gradient(135deg, #8592ff 0%, #9ba4ff 100%) !important;
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 8px 24px rgba(107, 124, 255, 0.4),
                0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#define-yourself-btn:hover::before,
#create-character-btn:hover::before {
    opacity: 1 !important;
    transform: translate(25%, 25%) scale(1.2) !important;
}

/* Active states */
#define-yourself-btn:active,
#create-character-btn:active {
    transform: translateY(-1px) scale(0.98) !important;
    transition-duration: 0.08s !important;
}

/* ==================== ENSURE CANVAS BUTTONS STAY UNCHANGED ==================== */
/* Canvas toolbar buttons keep their existing styles; overrides are applied selectively elsewhere. */

/* ==================== MINIMAL MODE COMPATIBILITY ==================== */

[data-appearance="minimal"] .upload-button-compact,
[data-appearance="minimal"] #upload-area,
[data-appearance="minimal"] #create-document-btn,
[data-appearance="minimal"] #export-context-btn,
[data-appearance="minimal"] #folder-explorer-btn {
    background: var(--bg-elevated) !important;
    border-color: var(--border-medium) !important;
}

[data-appearance="minimal"] .upload-button-compact:hover,
[data-appearance="minimal"] #upload-area:hover,
[data-appearance="minimal"] #create-document-btn:hover,
[data-appearance="minimal"] #export-context-btn:hover,
[data-appearance="minimal"] #folder-explorer-btn:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--accent-primary) !important;
}

/* ==================== ACCESSIBILITY ==================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .upload-button-compact,
    #upload-area,
    #create-document-btn,
    #export-context-btn,
    #folder-explorer-btn,
    #new-project-btn,
    #export-btn,
    #import-btn,
    #settings-btn,
    #theme-toggle-btn {
        transition: none !important;
        animation: none !important;
    }
    
    .upload-button-compact::before,
    #upload-area::before,
    #create-document-btn::before,
    #export-context-btn::before,
    #folder-explorer-btn::before {
        display: none !important;
    }
}

/* Focus states for keyboard navigation */
.upload-button-compact:focus-visible,
#upload-area:focus-visible,
#create-document-btn:focus-visible,
#export-context-btn:focus-visible,
#folder-explorer-btn:focus-visible,
#new-project-btn:focus-visible,
#export-btn:focus-visible,
#import-btn:focus-visible,
#settings-btn:focus-visible,
#theme-toggle-btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */

@media (max-width: 1200px) {
    .upload-button-compact,
    #create-document-btn,
    #export-context-btn,
    #folder-explorer-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* ==================== AI BUTTON GROUPS (WRAPPABLE) ==================== */
.ai-groups {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.ai-group {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 3px;
    padding: 2px 4px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: transparent;
}

/* Make buttons slightly more compact: reduce internal padding by ~4px while keeping font-size */
.canvas-controls .ai-btn,
.canvas-controls .utils-btn {
    padding: 4px 8px !important;
    font-size: 13px !important;
    min-width: fit-content;
}

/* Ensure groups wrap nicely on small screens */
@media (max-width: 800px) {
    .ai-group { padding: 4px; }
    .canvas-controls .ai-btn,
    .canvas-controls .utils-btn { padding: 6px 10px !important; }
}