/**
 * Reeltimes RI (Reel Intelligence) Style Overrides
 * These styles override any theme styles with !important declarations
 */

/* Force all theme overrides with a strong selector */
html body .multimodal-ai-chat-container,
html body .multimodal-ai-chat-container *,
html body .multimodal-ai-modal,
html body .multimodal-ai-modal *,
html body .multimodal-ai-auth-overlay,
html body .multimodal-ai-auth-overlay *,
html body .multimodal-ai-gallery-overlay,
html body .multimodal-ai-gallery-overlay *,
html body .custom-music-popup,
html body .custom-music-popup * {
    /* Prevent external style influence */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    box-sizing: border-box !important;
}

/* Text Color Overrides */
.multimodal-ai-chat-container {
    color: var(--message-ai-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    min-width: 320px !important; /* Prevent container from getting too narrow */
}

/* Desktop-only container styles - will be overridden by mobile media queries */
@media (min-width: 601px) {
    .multimodal-ai-chat-container {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Make sure AI messages have proper colors */
.multimodal-ai-message.ai .multimodal-ai-content {
    color: var(--message-ai-text) !important;
    background-color: var(--message-ai-bg) !important;
}

/* Make sure user messages have proper colors */
.multimodal-ai-message.user .multimodal-ai-content {
    color: var(--message-user-text) !important;
    background-color: var(--message-user-bg) !important;
}

/* Specifically make AI messages that contain music players much wider */
.multimodal-ai-message.ai {
    width: 100% !important;
    max-width: 100% !important;
}

.multimodal-ai-message.ai .multimodal-ai-content {
    max-width: 95% !important; /* Much wider than default */
    width: 95% !important; /* Force the width */
    min-width: 300px !important; /* Ensure a minimum width */
}

/* When content contains music player, force it to full width */
.multimodal-ai-message.ai .multimodal-ai-content .music-player-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
}

/* Custom music track styling to ensure visibility */
.multimodal-ai-content .music-track {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Custom audio player styling */
.multimodal-ai-content audio {
    width: 100% !important;
    display: block !important;
}

/* Mobile-friendly music player layout */
@media (max-width: 900px) {
    .multimodal-ai-content .music-player-container,
    .music-player-container {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    .multimodal-ai-content .music-track,
    .music-track,
    .generated-music-tracks .music-track {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: var(--spacing-md) !important;
        box-sizing: border-box !important;
        gap: var(--spacing-md) !important;
    }
    
    .multimodal-ai-content .music-track-header,
    .music-track-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .multimodal-ai-content .music-cover,
    .music-cover {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }
    
    .multimodal-ai-content .music-info,
    .music-info {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: var(--spacing-md) 0 !important;
        box-sizing: border-box !important;
    }
    
    .multimodal-ai-content .music-track-controls,
    .music-track-controls {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: var(--spacing-md) 0 !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
        flex-direction: column !important;
    }
    
    .multimodal-ai-content .music-track audio,
    .music-track audio,
    .music-controls audio {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
    }
    
    .multimodal-ai-content .music-track-buttons,
    .music-track-buttons {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }
    
    .multimodal-ai-content .music-track-buttons button,
    .music-track-buttons button,
    .music-download-btn,
    .music-edit-btn,
    .music-delete-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }
    
    .generated-music-tracks {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: var(--spacing-md) !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    
    .music-player-container {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    
    .music-track {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
}

/* Mobile chat scrolling fixes */
@media (max-width: 900px) {
    html, body {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
    
    .multimodal-ai-chat-container {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    #multimodal-ai-messages,
    .multimodal-ai-chat-messages {
        max-height: calc(100vh - 220px) !important;
        max-height: calc(100dvh - 220px) !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding-bottom: 140px !important; /* Enough padding to clear fixed input bar */
        will-change: scroll-position !important;
        box-sizing: border-box !important;
    }
}

/* Input field styling */
#multimodal-ai-user-input {
    color: var(--message-ai-text) !important;
    background-color: var(--chat-input-bg) !important;
    border: 1px solid var(--input-border) !important;
}

/* Form elements in modals */
.multimodal-ai-modal-content .form-group input,
.multimodal-ai-modal-content .form-group textarea,
.multimodal-ai-modal-content .form-group select {
    color: var(--message-ai-text) !important;
    background-color: var(--chat-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Music Generation Form Specific Styles */
#multimodal-ai-music-options input,
#multimodal-ai-music-options textarea,
#multimodal-ai-music-options select,
.music-prompt,
.music-options textarea,
.music-options input,
.music-options select,
#music-prompt-field,
#mood-prompt-field,
#genre-prompt-field,
#tempo-prompt-field,
#custom-music-prompt,
#reference-track-label input,
.custom-music-form input,
.custom-music-form textarea {
    color: var(--message-ai-text) !important;
    background-color: var(--chat-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Specifically target the music prompt textarea */
#musicPrompt, 
#musicStyle, 
#musicTitle {
    color: var(--message-ai-text) !important;
    background-color: var(--chat-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Custom Music Popup Specific Overrides */
.custom-music-popup-content {
    background-color: var(--chat-bg) !important;
    color: var(--message-ai-text) !important;
}

.custom-music-header {
    background-color: var(--message-ai-bg) !important;
    color: var(--message-ai-text) !important;
}

.custom-music-form {
    color: var(--message-ai-text) !important;
}

.custom-music-form label {
    color: var(--message-ai-text) !important;
}

.custom-music-form .description {
    color: var(--message-ai-text) !important;
    opacity: 0.7 !important;
}

.custom-music-form .char-count {
    color: var(--message-ai-text) !important;
    opacity: 0.7 !important;
}

/* Button text */
.multimodal-ai-action-button,
#multimodal-ai-send-btn,
.auth-submit {
    color: var(--button-text) !important;
    background-color: var(--button-bg) !important;
}

/* User dropdown and credits */
.multimodal-ai-username {
    color: var(--message-ai-text) !important;
}

.multimodal-ai-credits {
    color: white !important;
}

/* Gallery items */
.multimodal-ai-gallery-item-details {
    color: var(--message-ai-text) !important;
}

/* All text elements inside the chat container */
.multimodal-ai-chat-container p,
.multimodal-ai-chat-container h1,
.multimodal-ai-chat-container h2,
.multimodal-ai-chat-container h3,
.multimodal-ai-chat-container h4,
.multimodal-ai-chat-container h5,
.multimodal-ai-chat-container h6,
.multimodal-ai-chat-container span,
.multimodal-ai-chat-container div,
.multimodal-ai-chat-container a {
    color: inherit !important;
}

/* Allow anchors inside messages to be styled properly */
.multimodal-ai-content a {
    color: var(--link-color, #0099ff) !important;
    text-decoration: underline !important;
}

/* Override any theme padding/margin that might affect layout */
.multimodal-ai-chat-container * {
    box-sizing: border-box !important;
}

/* Fix modal text colors */
.multimodal-ai-modal-content {
    color: var(--message-ai-text) !important;
}

/* Fix form labels */
.form-group label {
    color: var(--message-ai-text) !important;
}

/* Additional specific overrides for fonts and colors */
.multimodal-ai-chat-messages {
    color: var(--message-ai-text) !important;
}

.multimodal-ai-message .multimodal-ai-content p,
.multimodal-ai-message .multimodal-ai-content li,
.multimodal-ai-message .multimodal-ai-content ul,
.multimodal-ai-message .multimodal-ai-content ol,
.multimodal-ai-message .multimodal-ai-content blockquote,
.multimodal-ai-message .multimodal-ai-content code,
.multimodal-ai-message .multimodal-ai-content pre {
    color: inherit !important;
    font-family: inherit !important;
}

/* Force all headings in chat to inherit the right color */
.multimodal-ai-message .multimodal-ai-content h1,
.multimodal-ai-message .multimodal-ai-content h2,
.multimodal-ai-message .multimodal-ai-content h3,
.multimodal-ai-message .multimodal-ai-content h4,
.multimodal-ai-message .multimodal-ai-content h5,
.multimodal-ai-message .multimodal-ai-content h6 {
    color: inherit !important;
    font-family: inherit !important;
}

/* Ensure Auth overlay elements have correct styling with strong overrides */
html body .multimodal-ai-auth-overlay,
html body .multimodal-ai-auth-popup {
    background-color: rgba(255, 255, 255, 0.98) !important;
    color: #333333 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Dark mode support for auth popup */
@media (prefers-color-scheme: dark) {
    html body .multimodal-ai-auth-overlay,
    html body .multimodal-ai-auth-popup {
        background-color: rgba(40, 42, 54, 0.98) !important;
        color: #f8f8f2 !important;
    }
    
    html body .multimodal-ai-auth-popup .form-group input {
        background-color: #1e1e2e !important;
        color: #f8f8f2 !important;
        border-color: #44475a !important;
    }
    
    html body .multimodal-ai-auth-popup .form-group input::placeholder {
        color: #f8f8f2 !important;
        opacity: 0.7 !important;
    }
}

/* Force all auth popup text to be visible */
html body .multimodal-ai-auth-popup * {
    color: inherit !important;
    font-family: inherit !important;
}

html body .multimodal-ai-auth-popup h3 {
    color: #333333 !important;
    margin: 0 0 20px 0 !important;
    font-size: 1.4em !important;
    font-weight: 600 !important;
}

@media (prefers-color-scheme: dark) {
    html body .multimodal-ai-auth-popup h3 {
        color: #f8f8f2 !important;
    }
}

html body .multimodal-ai-auth-popup .auth-tab {
    color: #666666 !important;
    background: transparent !important;
    border: none !important;
    padding: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

html body .multimodal-ai-auth-popup .auth-tab.active {
    color: #5c6bc0 !important;
    border-bottom: 2px solid #5c6bc0 !important;
}

html body .multimodal-ai-auth-popup .form-group input {
    background-color: #f7f9fc !important;
    color: #333333 !important;
    border: 1px solid #e0e0e0 !important;
    padding: 12px !important;
    border-radius: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

html body .multimodal-ai-auth-popup .form-group input::placeholder {
    color: #666666 !important;
    opacity: 0.8 !important;
}

html body .multimodal-ai-auth-popup .form-group input:focus {
    border-color: #5c6bc0 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2) !important;
}

html body .multimodal-ai-auth-popup .form-error {
    background-color: #ffebee !important;
    color: #d32f2f !important;
    border: 1px solid #ffcdd2 !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin: 10px 0 !important;
    font-size: 14px !important;
    min-height: auto !important;
}

html body .multimodal-ai-auth-popup .auth-submit {
    background-color: #5c6bc0 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
    width: 100% !important;
    margin: 10px 0 !important;
}

html body .multimodal-ai-auth-popup .auth-submit:hover {
    background-color: #3f51b5 !important;
}

html body .multimodal-ai-auth-popup .auth-submit:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed !important;
}

/* Gmail login button specific overrides */
html body .multimodal-ai-auth-popup .gmail-login {
    background-color: #ffffff !important;
    color: #757575 !important;
    border: 1px solid #dadce0 !important;
    min-height: 44px !important;
}

html body .multimodal-ai-auth-popup .gmail-login:hover {
    background-color: #f8f9fa !important;
    color: #757575 !important;
}

/* Auth divider overrides */
html body .multimodal-ai-auth-popup .auth-divider {
    margin: 20px 0 !important;
    position: relative !important;
}

html body .multimodal-ai-auth-popup .auth-divider span {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #666666 !important;
    padding: 0 15px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Password requirements text */
html body .multimodal-ai-auth-popup .password-requirements {
    color: #666666 !important;
    font-size: 0.8em !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
}

/* Force override any WordPress theme styles that might interfere */
.multimodal-ai-auth-overlay,
.multimodal-ai-auth-overlay *,
.multimodal-ai-auth-popup,
.multimodal-ai-auth-popup * {
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Prevent theme typography from overriding auth popup */
html body .multimodal-ai-auth-popup,
html body .multimodal-ai-auth-popup * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Gallery styling */
.multimodal-ai-gallery-container * {
    color: var(--message-ai-text) !important;
}

.multimodal-ai-gallery-filter {
    color: var(--message-ai-text) !important;
}

.multimodal-ai-gallery-filter.active {
    color: var(--button-text) !important;
    background-color: var(--button-bg) !important;
}

/* Music player controls */
.music-player-controls button {
    color: var(--message-ai-text) !important;
}

/* Ensure dropdown content has proper styling */
.multimodal-ai-dropdown-content {
    background-color: var(--chat-input-bg) !important;
    color: var(--message-ai-text) !important;
}

.multimodal-ai-dropdown-content a {
    color: var(--message-ai-text) !important;
}

/* Ensure Credits dropdown is always above chat messages (fixes being hidden behind welcome bubble) */
html body .multimodal-ai-user-info {
    z-index: 100000 !important; /* above chat content */
    overflow: visible !important; /* avoid clipping dropdown */
}

html body .multimodal-ai-user-info .multimodal-ai-dropdown-content {
    z-index: 100001 !important; /* above user-info bar */
}

html body .multimodal-ai-chat-messages {
    position: relative !important;
    z-index: 1 !important;
}

/* Force buttons to maintain color on hover */
.multimodal-ai-action-button:hover,
#multimodal-ai-send-btn:hover {
    color: var(--button-text) !important;
}

/* Internet toggle visual state */
#multimodal-ai-internet-toggle {
    transition: transform 0.3s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important; /* anchor for ON badge */
}

#multimodal-ai-internet-toggle.active {
    color: #0ea5e9 !important; /* bright cyan */
    background-color: rgba(14, 165, 233, 0.18) !important; /* subtle glow */
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25) inset, 0 0 16px rgba(14, 165, 233, 0.45) !important; /* stronger glow */
    text-shadow: 0 0 8px rgba(14, 165, 233, 0.6) !important;
}

/* ON badge */
#multimodal-ai-internet-toggle.active::after {
    content: 'ON';
    position: absolute;
    top: -6px;
    right: -6px;
    background: #0ea5e9;
    color: #08131a;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255,255,255,0.25);
}

/* Fix input text color in all modals and forms */
.multimodal-ai-modal input,
.multimodal-ai-modal textarea,
.multimodal-ai-modal select,
.form-group input,
.form-group textarea,
.form-group select {
    color: var(--message-ai-text) !important;
} 

/* Gallery Player Modal Fix - Ensure it's hidden when not active */
.multimodal-ai-gallery-player {
    display: none !important;
}

.multimodal-ai-gallery-player.active {
    display: flex !important;
}

/* Prevent any ghost/phantom gallery player elements */
.multimodal-ai-gallery-player:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile-specific gallery player fix */
@media screen and (max-width: 768px) {
    .multimodal-ai-gallery-player {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 100001 !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 1) !important;
    }
    
    .multimodal-ai-gallery-player.active {
        display: flex !important;
        z-index: 100001 !important;
    }
    
    .multimodal-ai-gallery-player-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 1) !important;
        overflow: hidden !important;
    }
    
    .multimodal-ai-gallery-player-header {
        padding: 15px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        min-height: 60px !important;
        flex-shrink: 0 !important;
    }
    
    .multimodal-ai-gallery-player-main {
        flex: 1 !important;
        padding: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }
    
    .multimodal-ai-gallery-player-footer {
        background: rgba(0, 0, 0, 0.95) !important;
        padding: 15px !important;
        flex-shrink: 0 !important;
        min-height: 80px !important;
    }
    
    .multimodal-ai-gallery-player:not(.active) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-100vw) !important;
    }
}

/* Mobile send button protection - ensure it doesn't get cut off */
@media screen and (max-width: 768px) {
    /* Ensure input area has proper flex layout */
    .multimodal-ai-input-area {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-width: 0 !important; /* Allow flex items to shrink */
        overflow: visible !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        gap: 4px !important;
    }
    
    /* Textarea should flex-grow but not overflow */
    #multimodal-ai-user-input {
        flex: 1 1 auto !important;
        min-width: 0 !important; /* Allow shrinking */
        max-width: none !important;
        margin: 0 4px !important;
    }
    
    /* Send button always visible and properly sized */
    #multimodal-ai-send-btn {
        flex: 0 0 auto !important; /* Don't shrink */
        width: 36px !important;
        height: 36px !important;
        margin-left: 4px !important;
        margin-right: 0 !important;
        min-width: 36px !important; /* Prevent shrinking */
        position: relative !important; /* Ensure proper positioning */
        z-index: 10 !important; /* Stay on top */
    }
    
    /* Right side buttons always visible on mobile */
    .multimodal-ai-right-buttons {
        display: flex !important;
        gap: 6px !important;
    }
    
    /* Action buttons container - keep visible on mobile */
    .multimodal-ai-action-buttons {
        display: flex !important;
    }
}

/* Very small screens additional protection */
@media screen and (max-width: 480px) {
    /* Input area with toggle button - prevent wrapping */
    .multimodal-ai-input-area {
        position: relative !important;
        gap: 6px !important;
        padding: 8px !important;
        flex-wrap: nowrap !important; /* Keep buttons on same row */
        align-items: center !important;
    }
    
    /* Hide toggle button - buttons always visible */
    .multimodal-ai-actions-toggle {
        display: none !important;
    }
    
    /* Action buttons always visible - positioned above input */
    .multimodal-ai-action-buttons-popup {
        position: absolute !important;
        bottom: calc(100% + 0px) !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--chat-input-bg) !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 8px 12px !important;
        box-shadow: none !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        z-index: 100 !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
        display: block !important;
    }
    
    .multimodal-ai-action-buttons-popup.open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
        display: block !important;
    }
    
    /* Action buttons inside popup */
    .multimodal-ai-action-buttons {
        display: flex !important;
        gap: 6px !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 0 !important;
        flex-wrap: wrap !important;
    }
    
    .multimodal-ai-action-button {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
    }
    
    /* Textarea - allow shrinking but reserve space for buttons */
    #multimodal-ai-user-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 4px 0 0 !important;
        max-width: calc(100% - 150px) !important; /* Reserve space for buttons */
    }
    
    /* Right side buttons - evenly spaced, never wrap */
    .multimodal-ai-right-buttons {
        gap: 6px !important;
        flex-shrink: 0 !important; /* Never shrink */
        flex-wrap: nowrap !important; /* Never wrap */
    }
    
    /* All right side buttons same size */
    .multimodal-ai-squircle-button,
    #multimodal-ai-send-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        flex-shrink: 0 !important;
    }
}

/* Very narrow screens - prevent wrapping */
@media screen and (max-width: 360px) {
    .multimodal-ai-input-area {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    
    .multimodal-ai-right-buttons {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide toggle button - buttons always visible */
    .multimodal-ai-actions-toggle {
        display: none !important;
    }
    
    /* Action buttons always visible - positioned above input */
    .multimodal-ai-action-buttons-popup {
        position: absolute !important;
        bottom: calc(100% + 0px) !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--chat-input-bg) !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 8px 12px !important;
        box-shadow: none !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        z-index: 100 !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
        display: block !important;
    }
    
    .multimodal-ai-action-buttons-popup.open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
        display: block !important;
    }
    
    /* Action buttons inside popup */
    .multimodal-ai-action-buttons {
        display: flex !important;
        gap: 6px !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 0 !important;
        flex-wrap: wrap !important;
    }
    
    .multimodal-ai-action-button {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
    }
    
    /* Textarea - allow shrinking but reserve space for buttons */
    #multimodal-ai-user-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 4px 0 0 !important;
        max-width: calc(100% - 150px) !important; /* Reserve space for buttons */
    }
    
    /* Right side buttons - evenly spaced, never wrap */
    .multimodal-ai-right-buttons {
        gap: 6px !important;
        flex-shrink: 0 !important; /* Never shrink */
        flex-wrap: nowrap !important; /* Never wrap */
    }
    
    /* All right side buttons same size */
    .multimodal-ai-squircle-button,
    #multimodal-ai-send-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        flex-shrink: 0 !important;
    }
} 

/* Additional responsive styles for form elements */
.form-group textarea,
.form-group input {
    width: 100% !important; /* Back to full width */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important; /* Ensure padding is included in width */
}

/* Force hide any leftover overlays on mobile */
@media (max-width: 768px) {
    /* Ensure gallery overlays are completely hidden when not active */
    .multimodal-ai-gallery-overlay:not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-100vw) !important; /* Move completely off screen */
    }
    
    /* Ensure gallery player is completely hidden when not active */
    .multimodal-ai-gallery-player:not(.active) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-100vw) !important; /* Move completely off screen */
    }
    
    /* Ensure custom music popup is completely hidden */
    .custom-music-popup:not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-100vw) !important; /* Move completely off screen */
    }
    
    /* Ensure all modals are completely hidden when not displayed */
    .multimodal-ai-modal:not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-100vw) !important; /* Move completely off screen */
    }
    
    /* Hide any absolutely positioned elements that might be causing issues */
    .multimodal-ai-chat-container {
        overflow: hidden !important; /* Prevent any overflow on mobile */
        position: relative !important;
        z-index: auto !important;
    }
    
    /* Ensure music player elements don't interfere with chat on mobile */
    .music-player-container {
        position: relative !important;
        z-index: auto !important;
        overflow: hidden !important;
    }
    
    .music-track {
        position: relative !important;
        z-index: auto !important;
        overflow: hidden !important;
    }
    
    /* Reset any problematic positioning on mobile */
    *[style*="position: absolute"],
    *[style*="position: fixed"] {
        z-index: auto !important;
    }
}

/* Specific rule for completely removing ghost elements */
@media (max-width: 768px) {
    /* Ensure body fills viewport exactly */
    html, body {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Wrapper fills viewport */
    .multimodal-ai-chat-wrapper {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Container fills wrapper with flex layout */
    .multimodal-ai-chat-container {
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* Messages fill available space */
    .multimodal-ai-chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    
    /* Input bar at bottom - no gap */
    .multimodal-ai-chat-input {
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 8px) !important;
    }
    
    /* Prevent container and input from getting too narrow */
    .multimodal-ai-chat-container {
        min-width: 320px !important;
    }
    
    .multimodal-ai-chat-input {
        min-width: 320px !important;
    }
    
    /* Force remove any hidden elements that might still show */
    .multimodal-ai-gallery-overlay[style*="display: none"],
    .multimodal-ai-gallery-player[style*="display: none"],
    .custom-music-popup[style*="display: none"],
    .multimodal-ai-modal[style*="display: none"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    /* Ensure chat messages container has proper stacking context */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
    }
    
    .multimodal-ai-chat-messages {
        position: relative !important;
        z-index: 1 !important;
        background: transparent !important; /* Let the colorful gradient show on mobile */
        background-color: transparent !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 140px) !important;
        max-height: calc(100dvh - 140px) !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding: 20px !important;
        padding-bottom: 140px !important; /* Enough padding to clear fixed input bar */
        box-sizing: border-box !important;
        will-change: scroll-position !important;
    }
    
    /* Chat input - at bottom of flex container */
    .multimodal-ai-chat-input {
        position: relative !important;
        width: 100% !important;
        z-index: 1000 !important;
        background-color: var(--chat-input-bg) !important;
        padding: 8px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 60px !important;
        border-top: 1px solid var(--border-color) !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    
    /* Container uses flex layout to fill viewport exactly */
    .multimodal-ai-chat-container {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Messages area fills remaining space */
    .multimodal-ai-chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 20px !important;
    }
}

/* Additional cleanup for any lingering media elements */
@media (max-width: 768px) {
    /* Hide any audio/video elements that might be causing issues */
    audio[style*="display: none"],
    video[style*="display: none"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Ensure proper containment of music elements */
    .multimodal-ai-content:has(.music-player-container) {
        overflow: hidden !important;
        position: relative !important;
    }
} 

/* NUCLEAR Download Button Transparency - Override EVERYTHING */
[class*="download"], 
.multimodal-ai-gallery-item-download,
.multimodal-ai-gallery-item .multimodal-ai-gallery-item-download,
button.multimodal-ai-gallery-item-download,
html body .multimodal-ai-gallery-overlay .multimodal-ai-gallery-item-download,
html body .multimodal-ai-gallery-container .multimodal-ai-gallery-item-download,
.multimodal-ai-gallery-overlay .multimodal-ai-gallery-item-download,
.multimodal-ai-gallery-container .multimodal-ai-gallery-item-download {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    background-clip: initial !important;
    background-origin: initial !important;
    background-attachment: initial !important;
    background-blend-mode: initial !important;
    color: var(--message-ai-text) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* NUCLEAR Download Button Hover State */
[class*="download"]:hover,
.multimodal-ai-gallery-item-download:hover,
.multimodal-ai-gallery-item .multimodal-ai-gallery-item-download:hover,
button.multimodal-ai-gallery-item-download:hover,
html body .multimodal-ai-gallery-overlay .multimodal-ai-gallery-item-download:hover,
html body .multimodal-ai-gallery-container .multimodal-ai-gallery-item-download:hover,
.multimodal-ai-gallery-overlay .multimodal-ai-gallery-item-download:hover,
.multimodal-ai-gallery-container .multimodal-ai-gallery-item-download:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    background-image: none !important;
    opacity: 1 !important;
    transform: scale(1.1) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove any potential inherited backgrounds */
.multimodal-ai-gallery-item-download * {
    background: transparent !important;
    background-color: transparent !important;
}

/* Force gallery player to be absolutely on top */
html body .multimodal-ai-gallery-player,
.multimodal-ai-gallery-player {
    z-index: 999999999 !important; /* Use auth overlay level for player */
    position: fixed !important;
}

html body .multimodal-ai-gallery-player.active,
.multimodal-ai-gallery-player.active {
    z-index: 999999999 !important; /* Use auth overlay level for player */
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Mobile gallery centering fixes - nuclear approach with 2 columns */
@media screen and (max-width: 600px) {
    html body .multimodal-ai-gallery-overlay .multimodal-ai-gallery-container,
    html body .multimodal-ai-gallery-container,
    .multimodal-ai-gallery-container {
        margin: 5px auto !important;
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        padding: 15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        position: relative !important;
    }
    
    html body .multimodal-ai-gallery-overlay .multimodal-ai-gallery-grid,
    html body .multimodal-ai-gallery-container .multimodal-ai-gallery-grid,
    .multimodal-ai-gallery-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 10px !important;
        justify-items: center !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    html body .multimodal-ai-gallery-overlay .multimodal-ai-gallery-item,
    html body .multimodal-ai-gallery-container .multimodal-ai-gallery-item,
    .multimodal-ai-gallery-item {
        width: 100% !important;
        max-width: 160px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Force gallery player z-index on mobile */
    html body .multimodal-ai-gallery-player {
        z-index: 999999999 !important; /* Use auth overlay level for player */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
    }
    
    html body .multimodal-ai-gallery-player.active {
        z-index: 999999999 !important; /* Use auth overlay level for player */
        display: flex !important;
    }
} 

/* Chat input hardening (ensure consistent look) */
.multimodal-ai-chat-input {
	background: var(--chat-input-bg) !important;
	border-top: 1px solid var(--border-color) !important;
	padding: 8px !important;
}

.multimodal-ai-input-area {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

#multimodal-ai-user-input {
	border-radius: 24px !important;
	padding: 12px 16px !important;
	min-height: 48px !important;
	max-height: 140px !important;
	line-height: 1.5 !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04) inset !important;
}

#multimodal-ai-user-input::placeholder {
	color: rgba(255,255,255,0.6) !important;
	opacity: 1 !important;
}

.multimodal-ai-action-buttons {
	display: flex !important;
	gap: 8px !important;
} 

/* Ensure image modal triple-row wraps and shows the count field */
#multimodal-ai-image-options .multimodal-ai-modal-content > div[style*="display:flex"][style*="gap:15px"] {
	flex-wrap: wrap !important;
}
#multimodal-ai-image-options .form-group { min-width: 0 !important; }
#openai-image-count { color: var(--message-ai-text) !important; background: var(--chat-input-bg) !important; }

/* Harden user message alignment and styling */
.multimodal-ai-message.user { display:flex !important; flex-direction: row-reverse !important; }
.multimodal-ai-message.user .multimodal-ai-content {
	background-color: var(--message-user-bg) !important;
	color: var(--message-user-text) !important;
	border-bottom-right-radius: 4px !important;
	box-shadow: 0 2px 5px var(--shadow-color) !important;
} 

/* Force crisp image rendering and prevent downscaling artifacts */
.multimodal-ai-content img,
.multimodal-ai-gallery-player-image,
.ri-img-tile img {
	image-rendering: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	transform: translateZ(0); /* Hint for GPU compositing */
	backface-visibility: hidden;
}
/* Ensure no CSS applies blur on images */
.multimodal-ai-content img { filter: none !important; }

/* Enlarge Uncensored confirmation buttons (scoped, not toolbar) */
.ri-uncensored-offer-modal .multimodal-ai-action-button,
.multimodal-ai-message .multimodal-ai-content .multimodal-ai-action-button,
.ri-img-error .multimodal-ai-action-button {
    padding: 10px 16px !important;
    min-height: 44px !important;
    min-width: 180px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* Make the inline action rows wrap if space is tight */
.ri-img-error div[style*="display:flex"],
.multimodal-ai-message .multimodal-ai-content div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
} 

/* Uncensored mode: force black backgrounds for generated media */
body.ri-uncensored-dark .generated-image-container img,
body.ri-uncensored-dark .generated-music-container audio,
body.ri-uncensored-dark .multimodal-ai-message .multimodal-ai-message-image,
body.ri-uncensored-dark .multimodal-ai-message .multimodal-ai-message-video {
	background: #000 !important;
	border: 1px solid #111 !important;
	box-shadow: none !important;
}
body.ri-uncensored-dark .generated-image-container .image-info,
body.ri-uncensored-dark .generated-music-container .music-info {
	background: #0a0a0a !important;
	color: #e6e6e6 !important;
	border-radius: 6px !important;
	padding: 8px 10px !important;
} 

/* Per-message persistent styling by mode */
.multimodal-ai-message.ri-msg-uncensored .multimodal-ai-content,
.multimodal-ai-message.ri-msg-uncensored .multimodal-ai-message-image,
.multimodal-ai-message.ri-msg-uncensored .multimodal-ai-message-video {
	background: #000 !important;
	color: #e6e6e6 !important;
	border-color: #111 !important;
}
.multimodal-ai-message.ri-msg-regular .multimodal-ai-content {
	/* keep default theme */
}

/* Gallery tiles: respect item.mode when present */
.multimodal-ai-gallery-item[data-mode="uncensored"] { background: #000 !important; color: #e6e6e6 !important; } 

/* 3D viewer sizing: make previews a bit taller / square by default */
.ri-3d-viewer-frame {
    width: 100% !important;
    max-width: min(92vw, 720px) !important;
    margin: 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    background: #111 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.ri-3d-viewer-frame model-viewer,
.ri-3d-viewer-frame .ri-3d-chat-model,
.ri-3d-viewer-frame #ri-gallery-model-viewer {
    width: 100% !important;
    height: 100% !important;
    background: #111 !important;
}

/* Keep gallery 3D wrap responsive and close to square without exceeding viewport height */
#ri-gallery-3d-wrap.ri-3d-viewer-frame {
    height: auto !important;
    max-height: 80vh !important;
}