/*
 * RI UX Makeover
 * Final visual contract for calmer chat chrome, clearer tool affordances, and cleaner popups.
 */

body.ri-standalone-shell {
    --ri-surface-base: #0b0f14;
    --ri-surface-panel: #111820;
    --ri-surface-panel-2: #17212b;
    --ri-surface-muted: #202b36;
    --ri-border-soft: rgba(226, 232, 240, 0.13);
    --ri-border-strong: rgba(226, 232, 240, 0.22);
    --ri-text-main: #f8fafc;
    --ri-text-muted: #a7b2c0;
    --ri-accent-cyan: #22d3ee;
    --ri-accent-green: #34d399;
    --ri-accent-blue: #60a5fa;
    --ri-danger: #fb7185;
    --ri-shadow-soft: 0 22px 60px rgba(0, 0, 0, 0.34);
    --ri-shadow-tight: 0 10px 26px rgba(0, 0, 0, 0.24);
    --button-bg: var(--ri-accent-cyan) !important;
    --button-hover: #67e8f9 !important;
    --button-text: #082f36 !important;
    --accent-primary: var(--ri-accent-cyan) !important;
    --accent-hover: #67e8f9 !important;
    --focus-ring: var(--ri-accent-cyan) !important;
    --focus-ring-shadow: rgba(34, 211, 238, 0.22) !important;
    --chat-bg: var(--ri-surface-base) !important;
    --chat-input-bg: var(--ri-surface-panel) !important;
    --message-ai-bg: var(--ri-surface-panel) !important;
    --message-ai-text: var(--ri-text-main) !important;
    --message-user-bg: var(--ri-accent-green) !important;
    --message-user-text: #052e20 !important;
    --border-color: var(--ri-border-soft) !important;
    --border-subtle: var(--ri-border-soft) !important;
    --bg-secondary: var(--ri-surface-panel-2) !important;
    --bg-tertiary: var(--ri-surface-muted) !important;
    --description-text: var(--ri-text-muted) !important;
    --popup-overlay: rgba(4, 7, 12, 0.74) !important;
    background:
        linear-gradient(180deg, #070a0f 0%, #0b0f14 48%, #101923 100%) !important;
}

body.ri-standalone-shell .multimodal-ai-chat-container::before {
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.09), transparent 42%),
        linear-gradient(315deg, rgba(52, 211, 153, 0.08), transparent 38%),
        linear-gradient(180deg, rgba(96, 165, 250, 0.06), transparent 70%) !important;
    filter: none !important;
    opacity: 1 !important;
    inset: 0 !important;
}

html body .multimodal-ai-user-info,
html body .multimodal-ai-chat-input,
html body .multimodal-ai-past-chats-panel,
html body .multimodal-ai-past-chats-header,
html body .multimodal-ai-past-chats-search,
html body .multimodal-ai-past-chats-logout {
    background: color-mix(in oklab, var(--ri-surface-panel), transparent 5%) !important;
    border-color: var(--ri-border-soft) !important;
}

html body .multimodal-ai-user-info {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html body .multimodal-ai-chat-messages {
    padding: 24px clamp(14px, 2vw, 32px) !important;
    gap: 2px !important;
}

html body .multimodal-ai-message {
    margin-bottom: 14px !important;
}

html body .multimodal-ai-content {
    border: 1px solid rgba(226, 232, 240, 0.09) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    line-height: 1.55 !important;
}

html body .multimodal-ai-message.ai .multimodal-ai-content {
    background: rgba(17, 24, 32, 0.92) !important;
    color: var(--ri-text-main) !important;
    opacity: 1 !important;
}

html body .multimodal-ai-message.ai .multimodal-ai-content * {
    color: inherit !important;
}

html body .multimodal-ai-message.user .multimodal-ai-content {
    background: linear-gradient(135deg, var(--ri-accent-green), #6ee7b7) !important;
    border-color: rgba(5, 46, 32, 0.18) !important;
}

html body .multimodal-ai-avatar {
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

html body .multimodal-ai-chat-input {
    padding: 12px 14px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    position: relative !important;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04), 0 -18px 42px rgba(0, 0, 0, 0.2) !important;
}

html body .multimodal-ai-chat-input.ri-drag-over {
    border-color: rgba(34, 211, 238, 0.42) !important;
}

html body .multimodal-ai-chat-input.ri-drag-over::after {
    content: "Drop image to attach";
    position: absolute;
    inset: 8px;
    z-index: 20;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(34, 211, 238, 0.76);
    border-radius: 10px;
    background: rgba(8, 13, 19, 0.82);
    color: #cffafe;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.2);
}

html body .multimodal-ai-input-area {
    max-width: 1280px !important;
    margin: 0 auto !important;
}

html body .ri-chat-text-shell {
    min-height: 46px !important;
    border-radius: 8px !important;
    border: 1px solid var(--ri-border-strong) !important;
    background: rgba(11, 15, 20, 0.9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html body .ri-chat-text-shell:focus-within {
    border-color: var(--ri-accent-cyan) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html body .ri-chat-text-shell #multimodal-ai-user-input {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 140px !important;
    padding: 11px 14px !important;
    color: var(--ri-text-main) !important;
}

html body .ri-chat-text-shell #multimodal-ai-user-input::placeholder {
    color: rgba(203, 213, 225, 0.72) !important;
    opacity: 1 !important;
}

html body .multimodal-ai-action-buttons,
html body .multimodal-ai-right-buttons {
    gap: 7px !important;
}

html body .multimodal-ai-action-button,
html body #multimodal-ai-add-attachment-btn,
html body #multimodal-ai-voice-btn,
html body #ri-conversation-mode-btn,
html body #multimodal-ai-send-btn,
html body .ri-conversation-open-btn,
html body .multimodal-ai-gallery-btn,
html body .multimodal-ai-new-chat-btn,
html body #multimodal-ai-conversations-btn,
html body .ri-tts-toggle {
    border-radius: 8px !important;
    border: 1px solid var(--ri-border-soft) !important;
    background: rgba(23, 33, 43, 0.92) !important;
    color: var(--ri-text-main) !important;
    box-shadow: none !important;
}

html body .multimodal-ai-chat-input .multimodal-ai-action-button,
html body .multimodal-ai-chat-input #multimodal-ai-actions-toggle,
html body .multimodal-ai-chat-input #multimodal-ai-add-attachment-btn,
html body .multimodal-ai-chat-input #multimodal-ai-voice-btn,
html body .multimodal-ai-chat-input #ri-conversation-mode-btn {
    background: rgba(30, 41, 59, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.44) !important;
    color: #e2e8f0 !important;
    opacity: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(0, 0, 0, 0.24) !important;
}

html body .multimodal-ai-chat-input .multimodal-ai-action-button svg,
html body .multimodal-ai-chat-input #multimodal-ai-actions-toggle svg,
html body .multimodal-ai-chat-input #multimodal-ai-add-attachment-btn svg,
html body .multimodal-ai-chat-input #multimodal-ai-voice-btn svg,
html body .multimodal-ai-chat-input #ri-conversation-mode-btn svg {
    color: #67e8f9 !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
}

html body .multimodal-ai-chat-input #multimodal-ai-send-btn svg {
    color: #082f36 !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

html body .multimodal-ai-chat-input .multimodal-ai-action-button.is-disabled,
html body .multimodal-ai-chat-input .multimodal-ai-action-button:disabled {
    background: rgba(51, 65, 85, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.32) !important;
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

html body .multimodal-ai-chat-input .multimodal-ai-action-button.is-disabled svg,
html body .multimodal-ai-chat-input .multimodal-ai-action-button:disabled svg {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

html body .multimodal-ai-action-button:hover,
html body #multimodal-ai-add-attachment-btn:hover,
html body #multimodal-ai-voice-btn:hover,
html body #ri-conversation-mode-btn:hover,
html body .ri-conversation-open-btn:hover,
html body .multimodal-ai-gallery-btn:hover,
html body .multimodal-ai-new-chat-btn:hover,
html body #multimodal-ai-conversations-btn:hover,
html body .ri-tts-toggle:hover {
    background: rgba(34, 211, 238, 0.13) !important;
    border-color: rgba(34, 211, 238, 0.42) !important;
    color: var(--ri-text-main) !important;
    transform: none !important;
}

html body #multimodal-ai-send-btn {
    background: var(--ri-accent-cyan) !important;
    border-color: var(--ri-accent-cyan) !important;
    color: #082f36 !important;
}

html body #multimodal-ai-send-btn:hover {
    background: #67e8f9 !important;
    border-color: #67e8f9 !important;
}

html body .multimodal-ai-action-buttons-popup {
    border-radius: 8px !important;
}

html body .multimodal-ai-button-tooltip {
    border-radius: 6px !important;
    background: #020617 !important;
    border: 1px solid rgba(226, 232, 240, 0.18) !important;
    color: #f8fafc !important;
    box-shadow: var(--ri-shadow-tight) !important;
}

html body .ri-unified-modal-overlay,
html body .multimodal-ai-modal,
html body #custom-music-popup,
html body #multimodal-ai-3d-options,
html body #ri-video-overlay,
html body #ri-workflow-overlay,
html body .multimodal-ai-gallery-overlay,
html body .multimodal-ai-gallery-player {
    background: rgba(4, 7, 12, 0.74) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
}

html body .ri-unified-modal,
html body .multimodal-ai-modal-content,
html body .custom-music-popup-content,
html body .multimodal-ai-auth-popup,
html body .multimodal-ai-gallery-container,
html body .multimodal-ai-gallery-player-content {
    border-radius: 10px !important;
    border: 1px solid var(--ri-border-strong) !important;
    background: linear-gradient(180deg, #121a23 0%, #0f151d 100%) !important;
    color: var(--ri-text-main) !important;
    box-shadow: var(--ri-shadow-soft) !important;
}

html body .ri-unified-modal-header,
html body .ri-modal-header,
html body .custom-music-header,
html body .ri-video-modal-header,
html body .multimodal-ai-gallery-header,
html body .multimodal-ai-gallery-player-header {
    min-height: 56px !important;
    background: rgba(18, 26, 35, 0.96) !important;
    border-color: var(--ri-border-soft) !important;
}

html body .ri-unified-modal-header h2,
html body .ri-unified-modal-header h3,
html body .ri-modal-header h2,
html body .ri-modal-header h3,
html body .ri-video-modal-header h2,
html body .multimodal-ai-gallery-title,
html body .multimodal-ai-gallery-player-title,
html body .multimodal-ai-auth-popup h3 {
    font-size: clamp(18px, 2vw, 22px) !important;
    line-height: 1.2 !important;
}

html body .ri-unified-modal-body,
html body .ri-modal-body,
html body .multimodal-ai-gallery-grid,
html body .multimodal-ai-gallery-player-main {
    background: transparent !important;
}

html body .ri-unified-modal-footer,
html body .ri-modal-footer,
html body .custom-music-footer,
html body .ri-video-footer,
html body .multimodal-ai-gallery-player-footer {
    background: rgba(18, 26, 35, 0.96) !important;
    border-color: var(--ri-border-soft) !important;
}

html body .ri-unified-modal-close,
html body .ri-modal-close,
html body .custom-music-close,
html body .ri-video-close-btn,
html body #ri-image-close,
html body #ri-image-edit-close,
html body #multimodal-ai-3d-close,
html body .multimodal-ai-gallery-close,
html body .multimodal-ai-gallery-player-close {
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--ri-text-muted) !important;
}

html body .ri-unified-modal-close:hover,
html body .ri-modal-close:hover,
html body .custom-music-close:hover,
html body .ri-video-close-btn:hover,
html body #ri-image-close:hover,
html body #ri-image-edit-close:hover,
html body #multimodal-ai-3d-close:hover,
html body .multimodal-ai-gallery-close:hover,
html body .multimodal-ai-gallery-player-close:hover {
    background: rgba(251, 113, 133, 0.12) !important;
    border-color: rgba(251, 113, 133, 0.32) !important;
    color: #fecdd3 !important;
}

html body .ri-form-group input,
html body .ri-form-group textarea,
html body .ri-form-group select,
html body .form-group input,
html body .form-group textarea,
html body .form-group select,
html body .multimodal-ai-auth-popup input,
html body .multimodal-ai-auth-popup textarea,
html body .multimodal-ai-auth-popup select {
    border-radius: 8px !important;
    border-color: var(--ri-border-strong) !important;
    background: rgba(7, 10, 15, 0.72) !important;
    color: var(--ri-text-main) !important;
}

html body .ri-form-group input:focus,
html body .ri-form-group textarea:focus,
html body .ri-form-group select:focus,
html body .form-group input:focus,
html body .form-group textarea:focus,
html body .form-group select:focus {
    border-color: var(--ri-accent-cyan) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16) !important;
}

html body .ri-btn-primary,
html body .auth-submit:not(.ri-auth-secondary),
html body .custom-music-generate,
html body #ri-image-generate,
html body #ri-image-edit-generate,
html body #luma-generate-btn,
html body #ri-video-generate,
html body #multimodal-ai-3d-start,
html body #ri-workflow-next {
    border-radius: 8px !important;
    background: var(--ri-accent-cyan) !important;
    border-color: var(--ri-accent-cyan) !important;
    color: #082f36 !important;
    box-shadow: none !important;
}

html body .ri-btn-primary:hover,
html body .auth-submit:not(.ri-auth-secondary):hover,
html body .custom-music-generate:hover,
html body #ri-image-generate:hover,
html body #ri-image-edit-generate:hover,
html body #luma-generate-btn:hover,
html body #ri-video-generate:hover,
html body #multimodal-ai-3d-start:hover,
html body #ri-workflow-next:hover {
    background: #67e8f9 !important;
    border-color: #67e8f9 !important;
    transform: none !important;
    box-shadow: none !important;
}

html body .ri-btn-primary:disabled,
html body .auth-submit:disabled,
html body .custom-music-generate:disabled,
html body #ri-image-generate:disabled,
html body #ri-image-edit-generate:disabled,
html body #ri-image-reprompt-btn:disabled,
html body #ri-image-edit-reprompt-btn:disabled,
html body #musicRepromptBtn:disabled,
html body #uploadRepromptBtn:disabled,
html body #luma-generate-btn:disabled,
html body #ri-video-generate:disabled,
html body #ri-video-reprompt-btn:disabled,
html body #multimodal-ai-3d-start:disabled,
html body #multimodal-ai-3d-reprompt:disabled {
    background: rgba(148, 163, 184, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: rgba(226, 232, 240, 0.58) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    transform: none !important;
}

html body .ri-btn-primary:disabled *,
html body .auth-submit:disabled *,
html body .custom-music-generate:disabled *,
html body #ri-image-generate:disabled *,
html body #ri-image-edit-generate:disabled *,
html body #ri-image-reprompt-btn:disabled *,
html body #ri-image-edit-reprompt-btn:disabled *,
html body #musicRepromptBtn:disabled *,
html body #uploadRepromptBtn:disabled *,
html body #luma-generate-btn:disabled *,
html body #ri-video-generate:disabled *,
html body #ri-video-reprompt-btn:disabled *,
html body #multimodal-ai-3d-start:disabled *,
html body #multimodal-ai-3d-reprompt:disabled * {
    color: rgba(226, 232, 240, 0.58) !important;
    stroke: currentColor !important;
}

html body .ri-btn-secondary,
html body .ri-btn-ghost,
html body .ri-auth-secondary,
html body .ri-media-reprompt-btn,
html body .custom-music-cancel,
html body #ri-image-cancel,
html body #ri-image-edit-cancel,
html body #ri-image-reprompt-btn,
html body #ri-image-edit-reprompt-btn,
html body #musicRepromptBtn,
html body #uploadRepromptBtn,
html body #multimodal-ai-3d-cancel,
html body #multimodal-ai-3d-clear-image,
html body #multimodal-ai-3d-reprompt,
html body #ri-video-reprompt-btn,
html body #ri-workflow-back,
html body .seed-image-upload-btn,
html body .edit-image-upload-btn {
    border-radius: 8px !important;
    background: rgba(23, 33, 43, 0.92) !important;
    border-color: var(--ri-border-strong) !important;
    color: var(--ri-text-main) !important;
    box-shadow: none !important;
}

html body .ri-btn-secondary:hover,
html body .ri-btn-ghost:hover,
html body .ri-auth-secondary:hover,
html body .ri-media-reprompt-btn:hover,
html body .custom-music-cancel:hover,
html body #ri-image-cancel:hover,
html body #ri-image-edit-cancel:hover,
html body #ri-image-reprompt-btn:hover,
html body #ri-image-edit-reprompt-btn:hover,
html body #musicRepromptBtn:hover,
html body #uploadRepromptBtn:hover,
html body #multimodal-ai-3d-cancel:hover,
html body #multimodal-ai-3d-clear-image:hover,
html body #multimodal-ai-3d-reprompt:hover,
html body #ri-video-reprompt-btn:hover,
html body #ri-workflow-back:hover,
html body .seed-image-upload-btn:hover,
html body .edit-image-upload-btn:hover {
    border-color: rgba(34, 211, 238, 0.42) !important;
    background: rgba(34, 211, 238, 0.1) !important;
    color: var(--ri-text-main) !important;
}

html body .ri-unified-tabs,
html body .ri-luma-mode-buttons,
html body .multimodal-ai-auth-tabs,
html body .multimodal-ai-gallery-filters {
    border-radius: 8px !important;
    background: rgba(7, 10, 15, 0.55) !important;
    border: 1px solid var(--ri-border-soft) !important;
}

html body .ri-unified-tab,
html body .luma-mode-btn,
html body .auth-tab,
html body .multimodal-ai-gallery-filter {
    border-radius: 6px !important;
}

html body .ri-unified-tab.active,
html body .luma-mode-btn.active,
html body .auth-tab.active,
html body .multimodal-ai-gallery-filter.active {
    background: rgba(34, 211, 238, 0.18) !important;
    color: #cffafe !important;
}

html body .ri-toast,
html body .toast,
html body .ri-conversation-tip {
    border-radius: 8px !important;
    border: 1px solid var(--ri-border-strong) !important;
    background: rgba(15, 21, 29, 0.96) !important;
    color: var(--ri-text-main) !important;
    box-shadow: var(--ri-shadow-tight) !important;
}

html body .multimodal-ai-credits,
html body #ri-image-credit-cost,
html body #music-credit-cost,
html body #music-timing-estimate,
html body #luma-video-pricing,
html body #ri-video-price-wrap,
html body #ri-video-price-dollars,
html body #ri-video-price-credits {
    border-radius: 8px !important;
    border: 1px solid rgba(34, 211, 238, 0.22) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: rgba(226, 232, 240, 0.82) !important;
    box-shadow: none !important;
}

html body .multimodal-ai-credits *,
html body #ri-image-credit-cost *,
html body #music-credit-cost *,
html body #music-timing-estimate *,
html body #luma-video-pricing *,
html body #ri-video-price-wrap *,
html body #ri-video-price-dollars *,
html body #ri-video-price-credits * {
    color: inherit !important;
}

html body .multimodal-ai-gallery-container {
    background: linear-gradient(180deg, #182431 0%, #121c26 100%) !important;
}

html body .multimodal-ai-gallery-header,
html body .multimodal-ai-gallery-filters,
html body .multimodal-ai-gallery-pagination {
    background: rgba(22, 33, 44, 0.98) !important;
}

html body .multimodal-ai-gallery-filter,
html body .multimodal-ai-gallery-pagination-btn,
html body .multimodal-ai-gallery-item-download,
html body .multimodal-ai-gallery-item-share,
html body .multimodal-ai-gallery-item-delete,
html body .multimodal-ai-gallery-item-edit,
html body .multimodal-ai-gallery-item-to3d {
    background: rgba(30, 41, 59, 0.96) !important;
    border: 1px solid rgba(203, 213, 225, 0.42) !important;
    color: #f8fafc !important;
    opacity: 1 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html body .multimodal-ai-gallery-filter.active {
    background: #0e7490 !important;
    border-color: #67e8f9 !important;
    color: #ecfeff !important;
}

html body .multimodal-ai-gallery-pagination-btn:disabled {
    background: rgba(51, 65, 85, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.36) !important;
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

html body .multimodal-ai-gallery-close {
    color: #f8fafc !important;
    border-color: rgba(203, 213, 225, 0.28) !important;
}

html body .multimodal-ai-gallery-grid {
    background: rgba(15, 23, 31, 0.72) !important;
}

html body .multimodal-ai-gallery-item {
    background: #13202b !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

@media (min-width: 761px) {
    html body .multimodal-ai-input-area {
        grid-template-columns: max-content minmax(360px, 1fr) max-content !important;
    }

    html body #multimodal-ai-action-buttons,
    html body .multimodal-ai-action-buttons {
        grid-template-columns: repeat(6, 40px) !important;
    }

    html body .multimodal-ai-right-buttons {
        grid-template-columns: repeat(4, 40px) !important;
    }

    html body .multimodal-ai-action-button,
    html body #multimodal-ai-add-attachment-btn,
    html body #multimodal-ai-voice-btn,
    html body #ri-conversation-mode-btn,
    html body #multimodal-ai-send-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
}

@media (max-width: 760px) {
    html body .multimodal-ai-chat-messages {
        padding: 16px 12px !important;
    }

    html body .multimodal-ai-chat-input {
        min-height: 106px !important;
        padding: 8px 10px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    }

    html body #multimodal-ai-action-buttons-popup > #multimodal-ai-action-buttons,
    html body .multimodal-ai-action-buttons {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    html body .multimodal-ai-action-button,
    html body #multimodal-ai-add-attachment-btn,
    html body #multimodal-ai-voice-btn,
    html body #ri-conversation-mode-btn,
    html body #multimodal-ai-send-btn {
        height: 40px !important;
        min-height: 40px !important;
    }

    html body .ri-chat-text-shell #multimodal-ai-user-input {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 74px !important;
    }

    html body .multimodal-ai-credits {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        text-align: center !important;
        color: rgba(226, 232, 240, 0.86) !important;
    }

    html body .ri-unified-modal-overlay,
    html body .multimodal-ai-modal,
    html body #custom-music-popup,
    html body #multimodal-ai-3d-options,
    html body #ri-video-overlay,
    html body #ri-workflow-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html body .ri-unified-modal,
    html body .multimodal-ai-modal-content,
    html body .custom-music-popup-content {
        border-radius: 0 !important;
    }
}

@media (max-width: 820px) {
    :root {
        --ri-app-topbar-height: 92px;
    }

    html body .multimodal-ai-user-info {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "primary"
            "status" !important;
        align-items: stretch !important;
        gap: 7px !important;
        min-height: 92px !important;
        height: auto !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    html body .multimodal-ai-user-info > div:first-child {
        grid-area: primary !important;
        display: grid !important;
        grid-template-columns: minmax(104px, 1.1fr) minmax(74px, 0.8fr) minmax(88px, 0.9fr) !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .multimodal-ai-user-info > div:last-child {
        grid-area: status !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    html body .ri-conversation-open-btn,
    html body .multimodal-ai-gallery-btn,
    html body .multimodal-ai-new-chat-btn,
    html body .multimodal-ai-credits,
    html body .ri-tts-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 8px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .ri-conversation-open-btn {
        justify-content: flex-start !important;
    }

    html body .multimodal-ai-credits {
        justify-self: stretch !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    html body .ri-tts-toggle {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        justify-self: end !important;
        justify-content: center !important;
        font-size: 0 !important;
    }

    html body .ri-tts-toggle .ri-tts-state-label {
        display: none !important;
    }
}

@media (max-width: 640px) {
    html body .multimodal-ai-gallery-overlay {
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body .multimodal-ai-gallery-container {
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    html body .multimodal-ai-gallery-header {
        min-height: 64px !important;
        margin: 0 !important;
        padding: max(14px, env(safe-area-inset-top, 0px)) 16px 12px !important;
    }

    html body .multimodal-ai-gallery-title {
        font-size: 18px !important;
    }

    html body .multimodal-ai-gallery-close {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        display: inline-grid !important;
        place-items: center !important;
    }

    html body .multimodal-ai-gallery-filters {
        display: flex !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 10px 14px 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 1px solid var(--ri-border-soft) !important;
    }

    html body .multimodal-ai-gallery-filters::-webkit-scrollbar {
        display: none !important;
    }

    html body .multimodal-ai-gallery-filter {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        height: 38px !important;
        padding: 0 14px !important;
        border-radius: 8px !important;
        scroll-snap-align: start !important;
    }

    html body .multimodal-ai-gallery-grid {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-content: start !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    html body .multimodal-ai-gallery-item {
        border-radius: 8px !important;
        min-width: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html body .multimodal-ai-gallery-item:hover {
        transform: none !important;
    }

    html body .multimodal-ai-gallery-item > img,
    html body .multimodal-ai-gallery-item > video,
    html body .multimodal-ai-gallery-item > div:first-child {
        width: 100% !important;
        height: clamp(128px, 34vw, 172px) !important;
        max-height: none !important;
        object-fit: cover !important;
        border-radius: 8px 8px 0 0 !important;
    }

    html body .multimodal-ai-gallery-item-info {
        min-height: 44px !important;
        padding: 7px !important;
        gap: 6px !important;
    }

    html body .multimodal-ai-gallery-item-prompt {
        font-size: 11px !important;
        line-height: 1.25 !important;
        max-height: 28px !important;
        overflow: hidden !important;
    }

    html body .multimodal-ai-gallery-item-bar {
        gap: 4px !important;
    }

    html body .multimodal-ai-gallery-item-bar button,
    html body .multimodal-ai-gallery-item-delete {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
    }

    html body .multimodal-ai-gallery-pagination {
        display: block !important;
        margin: 0 !important;
        padding: 12px 14px max(14px, env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0 !important;
        border-width: 1px 0 0 !important;
        background: rgba(18, 26, 35, 0.96) !important;
    }

    html body .multimodal-ai-gallery-pagination-info {
        gap: 3px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }

    html body .multimodal-ai-gallery-pagination-controls {
        display: grid !important;
        grid-template-columns: repeat(4, 44px) !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    html body .multimodal-ai-gallery-pagination-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .ri-unified-modal,
    html body .ri-unified-tab-content,
    html body .multimodal-ai-message,
    html body .ri-toast,
    html body .toast {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}