/*
 * 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;
}

/* Custom resolution-set results use private blob images and compact controls. */
html body .ri-img-grid {
    align-items: start !important;
}

html body .ri-img-grid .ri-img-tile:has(.ri-img-tile-inner) {
    padding: 0 !important;
    overflow: hidden !important;
    align-self: start !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

html body .ri-img-grid .ri-img-tile-inner {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
}

html body .ri-img-grid .ri-img-tile-inner > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    object-fit: contain !important;
}

html body .ri-img-grid .ri-img-tile .image-actions {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

html body .ri-img-grid .ri-img-tile .image-actions .multimodal-ai-action-button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 6px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    flex: 0 0 32px !important;
}

html body .ri-img-grid .ri-img-tile .image-actions .multimodal-ai-action-button svg {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !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 #ri-connected-apps-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 #ri-connected-apps-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 #ri-connected-apps-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 #ri-connected-apps-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(5, 40px) !important;
    }

    html body .multimodal-ai-action-button,
    html body #multimodal-ai-add-attachment-btn,
    html body #ri-connected-apps-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 #ri-connected-apps-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;
    }
}

/* Force media wells square even when legacy image/video intrinsic sizing wins. */
html body .multimodal-ai-gallery-item .ri-gallery-media-frame {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 100% !important;
    aspect-ratio: auto !important;
    display: block !important;
}

html body .multimodal-ai-gallery-item .ri-gallery-media-frame > img,
html body .multimodal-ai-gallery-item .ri-gallery-media-frame > video,
html body .multimodal-ai-gallery-item .ri-gallery-media-frame > .ri-gallery-fallback {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

html body .multimodal-ai-gallery-item .ri-gallery-media-frame > .ri-gallery-type-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 2 !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;
    }
}

/* RI Gallery overhaul: dense, inspectable, and stable across desktop/mobile. */
html body .multimodal-ai-gallery-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(10px, 2vw, 24px) !important;
    background: rgba(2, 6, 12, 0.9) !important;
}

html body .multimodal-ai-gallery-container {
    width: min(1480px, calc(100vw - 28px)) !important;
    max-width: none !important;
    height: min(920px, calc(100dvh - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    border-radius: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: #0d131a !important;
}

html body .multimodal-ai-gallery-header {
    min-height: 52px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: #121a22 !important;
}

html body .multimodal-ai-gallery-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

html body .multimodal-ai-gallery-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

html body .multimodal-ai-gallery-filters {
    margin: 0 !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: #101821 !important;
    scrollbar-width: thin !important;
}

html body .multimodal-ai-gallery-filter {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    background: #172230 !important;
    border-color: rgba(148, 163, 184, 0.32) !important;
}

html body .multimodal-ai-gallery-filter.active {
    background: #0f766e !important;
    border-color: #2dd4bf !important;
    color: #f8fffb !important;
}

html body .multimodal-ai-gallery-grid {
    width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    gap: 12px !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #080d12 !important;
}

html body .multimodal-ai-gallery-item {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    background: #101820 !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .multimodal-ai-gallery-item:hover {
    border-color: rgba(45, 212, 191, 0.85) !important;
    background: #121e28 !important;
    transform: none !important;
}

html body .ri-gallery-media-frame,
html body .multimodal-ai-gallery-item > img,
html body .multimodal-ai-gallery-item > video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: #05090d !important;
}

html body .ri-gallery-media-frame {
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    overflow: hidden !important;
}

html body .ri-gallery-media-frame > img,
html body .ri-gallery-media-frame > video,
html body .multimodal-ai-gallery-item > img,
html body .multimodal-ai-gallery-item > video {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #05090d !important;
}

html body .ri-gallery-media-frame.is-fallback > img,
html body .ri-gallery-media-frame.is-fallback > video {
    display: none !important;
}

html body .multimodal-ai-gallery-item-info {
    min-height: 94px !important;
    flex: 1 0 auto !important;
    display: grid !important;
    grid-template-rows: minmax(34px, auto) auto !important;
    gap: 8px !important;
    padding: 10px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: #111922 !important;
}

html body .multimodal-ai-gallery-item-prompt {
    min-width: 0 !important;
    min-height: 34px !important;
    max-height: 40px !important;
    margin: 0 !important;
    color: rgba(248, 250, 252, 0.9) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
}

html body .multimodal-ai-gallery-item-bar {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 32px)) !important;
    justify-content: end !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
}

html body .multimodal-ai-gallery-item-bar button,
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 {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    color: #f8fafc !important;
    background: #1a2532 !important;
    border-color: rgba(148, 163, 184, 0.32) !important;
}

html body .multimodal-ai-gallery-pagination {
    margin: 0 !important;
    padding: 10px 14px !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: #101821 !important;
}

@media (min-width: 1200px) {
    html body .multimodal-ai-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(174px, 1fr)) !important;
    }
}

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

    html body .multimodal-ai-gallery-container {
        width: 100vw !important;
        height: var(--ri-app-height, 100dvh) !important;
        max-height: var(--ri-app-height, 100dvh) !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    html body .multimodal-ai-gallery-header {
        min-height: 50px !important;
        padding: 10px 12px !important;
    }

    html body .multimodal-ai-gallery-filters {
        padding: 10px 12px !important;
    }

    html body .multimodal-ai-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    html body .multimodal-ai-gallery-item-info {
        min-height: 86px !important;
        padding: 8px !important;
    }

    html body .multimodal-ai-gallery-item-bar {
        grid-template-columns: repeat(5, minmax(0, 30px)) !important;
        gap: 4px !important;
    }

    html body .multimodal-ai-gallery-item-bar button,
    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 {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }
}

/* --------------------------------------------------------------------------
 * RI shell v2
 * One scoped layout contract owns navigation, header, empty state, composer,
 * and shared modal geometry. Legacy feature styles remain feature-only.
 * ----------------------------------------------------------------------- */

body.ri-standalone-shell {
    color-scheme: dark;
    --ri-v2-bg: #080d12;
    --ri-v2-surface: #101820;
    --ri-v2-surface-raised: #15212c;
    --ri-v2-surface-hover: #1b2a37;
    --ri-v2-border: #334252;
    --ri-v2-border-soft: #263543;
    --ri-v2-text: #f8fafc;
    --ri-v2-muted: #b8c3d1;
    --ri-v2-accent: #22d3ee;
    --ri-v2-accent-strong: #67e8f9;
    --ri-v2-accent-ink: #062f36;
    --ri-v2-danger: #fb7185;
    --ri-v2-header: 64px;
    --ri-v2-rail: 72px;
    --ri-v2-mobile-nav: 64px;
    background: var(--ri-v2-bg) !important;
}

html body .multimodal-ai-chat-wrapper.ri-shell-v2 {
    display: grid !important;
    grid-template-columns: var(--ri-v2-rail) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: env(safe-area-inset-top, 0) 0 0 !important;
    background: var(--ri-v2-bg) !important;
}

html body .ri-shell-v2 .multimodal-ai-chat-container {
    grid-column: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: var(--ri-v2-header) minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ri-v2-bg) !important;
}

html body .ri-shell-v2 .ri-primary-nav {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 8px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    border-right: 1px solid var(--ri-v2-border-soft) !important;
    background: #0c131a !important;
    box-sizing: border-box !important;
    z-index: 920 !important;
}

html body .ri-shell-v2 .ri-primary-nav-item {
    width: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 7px 4px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--ri-v2-muted) !important;
    font: 700 10px/1.15 var(--ri-font-sans, system-ui, sans-serif) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

html body .ri-shell-v2 .ri-primary-nav-item:hover,
html body .ri-shell-v2 .ri-primary-nav-item.is-active {
    border-color: #3a5365 !important;
    background: #18303b !important;
    color: #e9fdff !important;
    transform: none !important;
}

html body .ri-shell-v2 .ri-primary-nav-item.is-active svg {
    color: var(--ri-v2-accent) !important;
}

html body .ri-shell-v2 .ri-app-header {
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: var(--ri-v2-header) !important;
    min-height: var(--ri-v2-header) !important;
    max-height: var(--ri-v2-header) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ri-v2-border-soft) !important;
    border-radius: 0 !important;
    background: #0d151c !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
}

html body .ri-shell-v2 .ri-header-start,
html body .ri-shell-v2 .ri-header-actions {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html body .ri-shell-v2 .ri-header-actions {
    justify-content: flex-end !important;
}

html body .ri-shell-v2 .ri-conversation-open-btn,
html body .ri-shell-v2 .ri-header-new-chat,
html body .ri-shell-v2 .multimodal-ai-credits,
html body .ri-shell-v2 .ri-account-menu > summary {
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 10px !important;
    background: var(--ri-v2-surface) !important;
    color: var(--ri-v2-text) !important;
    text-decoration: none !important;
    font: 700 13px/1 var(--ri-font-sans, system-ui, sans-serif) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

html body .ri-shell-v2 .ri-conversation-open-btn:hover,
html body .ri-shell-v2 .ri-header-new-chat:hover,
html body .ri-shell-v2 .multimodal-ai-credits:hover,
html body .ri-shell-v2 .ri-account-menu > summary:hover {
    border-color: #4a6679 !important;
    background: var(--ri-v2-surface-hover) !important;
    transform: none !important;
}

html body .ri-shell-v2 .ri-header-brand {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

html body .ri-shell-v2 .ri-header-mark {
    width: 34px !important;
    height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid #2d5662 !important;
    border-radius: 10px !important;
    background: #11313a !important;
    color: #b9f7ff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
}

html body .ri-shell-v2 .ri-header-title {
    color: var(--ri-v2-text) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

html body .ri-shell-v2 .multimodal-ai-credits {
    color: #d9fbff !important;
}

html body .ri-shell-v2 .multimodal-ai-credits #multimodal-ai-credit-count {
    color: var(--ri-v2-accent-strong) !important;
    font-variant-numeric: tabular-nums !important;
}

html body .ri-shell-v2 .ri-account-menu {
    position: relative !important;
    margin: 0 !important;
}

html body .ri-shell-v2 .ri-account-menu > summary {
    list-style: none !important;
}

html body .ri-shell-v2 .ri-account-menu > summary::-webkit-details-marker {
    display: none !important;
}

html body .ri-shell-v2 .ri-account-avatar {
    width: 26px !important;
    height: 26px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #164e5b !important;
    color: #d9fbff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

html body .ri-shell-v2 .ri-account-menu-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 220px !important;
    display: grid !important;
    gap: 4px !important;
    padding: 10px !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 12px !important;
    background: #111b24 !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
    z-index: 1200 !important;
}

html body .ri-shell-v2 .ri-account-menu-panel a,
html body .ri-shell-v2 .ri-account-menu-panel button {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ri-v2-text) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

html body .ri-shell-v2 .ri-account-menu-panel a:hover,
html body .ri-shell-v2 .ri-account-menu-panel button:hover {
    background: var(--ri-v2-surface-hover) !important;
}

html body .ri-shell-v2 .ri-account-signed-in,
html body .ri-shell-v2 .ri-account-plan,
html body .ri-shell-v2 .ri-account-version {
    padding: 4px 10px !important;
    color: var(--ri-v2-muted) !important;
    font-size: 12px !important;
}

html body .ri-shell-v2 .ri-account-signed-in {
    color: var(--ri-v2-text) !important;
    font-weight: 800 !important;
}

html body .ri-shell-v2 .multimodal-ai-chat-messages {
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
    padding: clamp(18px, 3vw, 38px) clamp(16px, 3vw, 44px) 24px !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(34, 211, 238, 0.055), transparent 28%),
        var(--ri-v2-bg) !important;
    box-sizing: border-box !important;
    scrollbar-gutter: stable !important;
}

html body .ri-shell-v2 .ri-start-panel {
    width: min(820px, 100%) !important;
    margin: clamp(18px, 7vh, 74px) auto 0 !important;
    padding: clamp(22px, 3vw, 34px) !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 16px !important;
    background: #0f1820 !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22) !important;
    box-sizing: border-box !important;
}

html body .ri-shell-v2 .ri-start-copy {
    margin-bottom: 22px !important;
}

html body .ri-shell-v2 .ri-start-kicker {
    margin: 0 0 7px !important;
    color: var(--ri-v2-accent-strong) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

html body .ri-shell-v2 .ri-start-copy h2 {
    margin: 0 0 8px !important;
    color: var(--ri-v2-text) !important;
    font-size: clamp(26px, 4vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
}

html body .ri-shell-v2 .ri-start-copy > p:last-child {
    margin: 0 !important;
    color: var(--ri-v2-muted) !important;
    font-size: 15px !important;
}

html body .ri-shell-v2 .ri-start-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html body .ri-shell-v2 .ri-start-card {
    min-width: 0 !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid var(--ri-v2-border-soft) !important;
    border-radius: 12px !important;
    background: #121d27 !important;
    color: var(--ri-v2-text) !important;
    text-align: left !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .ri-shell-v2 .ri-start-card:hover {
    border-color: #3b6c79 !important;
    background: #172632 !important;
    transform: none !important;
}

html body .ri-shell-v2 .ri-start-card strong {
    color: var(--ri-v2-text) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

html body .ri-shell-v2 .ri-start-card span {
    color: var(--ri-v2-muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

html body .ri-shell-v2 .multimodal-ai-chat-input {
    grid-row: 3 !important;
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid var(--ri-v2-border-soft) !important;
    background: #0d151c !important;
    box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.18) !important;
    box-sizing: border-box !important;
}

html body .ri-shell-v2 .multimodal-ai-input-area {
    position: relative !important;
    width: min(1280px, 100%) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(180px, 1fr) auto !important;
    align-items: end !important;
    gap: 10px !important;
}

html body .ri-shell-v2 #multimodal-ai-actions-toggle {
    grid-column: 1 !important;
    width: auto !important;
    min-width: 96px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 12px !important;
    background: var(--ri-v2-surface-raised) !important;
    color: var(--ri-v2-text) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

html body .ri-shell-v2 .ri-chat-text-shell {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 12px !important;
    background: #090f14 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

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

html body .ri-shell-v2 .ri-chat-text-shell #multimodal-ai-user-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 160px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--ri-v2-text) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    resize: none !important;
}

html body .ri-shell-v2 .ri-chat-text-shell #multimodal-ai-user-input::placeholder {
    color: #9eabba !important;
    opacity: 1 !important;
}

html body .ri-shell-v2 .multimodal-ai-right-buttons {
    grid-column: 3 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

html body .ri-shell-v2 .multimodal-ai-right-buttons > button,
html body .ri-shell-v2 .multimodal-ai-right-buttons .ri-composer-settings > button,
html body .ri-shell-v2 #multimodal-ai-send-btn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 12px !important;
    background: var(--ri-v2-surface-raised) !important;
    color: var(--ri-v2-accent-strong) !important;
    box-shadow: none !important;
}

html body .ri-shell-v2 #multimodal-ai-send-btn {
    border-color: var(--ri-v2-accent) !important;
    background: var(--ri-v2-accent) !important;
    color: var(--ri-v2-accent-ink) !important;
}

html body .ri-shell-v2 .ri-composer-settings {
    position: relative !important;
}

html body .ri-shell-v2 .ri-composer-settings-menu {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 10px) !important;
    width: 250px !important;
    padding: 8px !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 12px !important;
    background: #111b24 !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
    z-index: 1250 !important;
}

html body .ri-shell-v2 .ri-composer-settings-menu[hidden] {
    display: none !important;
}

html body .ri-shell-v2 .ri-composer-setting {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ri-v2-text) !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body .ri-shell-v2 .ri-composer-setting:hover {
    background: var(--ri-v2-surface-hover) !important;
}

html body .ri-shell-v2 .ri-tts-state-label,
html body .ri-shell-v2 .ri-setting-state {
    color: var(--ri-v2-accent-strong) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

html body .ri-shell-v2 #multimodal-ai-action-buttons-popup {
    position: absolute !important;
    left: 0 !important;
    bottom: calc(100% + 10px) !important;
    width: min(430px, calc(100vw - var(--ri-v2-rail) - 32px)) !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 14px !important;
    background: #111b24 !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.46) !important;
    z-index: 1240 !important;
}

html body .ri-shell-v2 #multimodal-ai-action-buttons-popup:not(.open) {
    display: none !important;
}

html body .ri-shell-v2 #multimodal-ai-action-buttons-popup.open {
    display: block !important;
}

html body .ri-shell-v2 #multimodal-ai-action-buttons-popup .multimodal-ai-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body .ri-shell-v2 #multimodal-ai-action-buttons-popup .multimodal-ai-action-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 10px !important;
    background: var(--ri-v2-surface-raised) !important;
    color: var(--ri-v2-text) !important;
    box-shadow: none !important;
}

html body .ri-shell-v2 #multimodal-ai-action-buttons-popup .multimodal-ai-button-tooltip {
    display: block !important;
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ri-v2-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

html body .ri-shell-v2 .ri-chat-attachment-strip {
    width: min(1280px, 100%) !important;
    margin: 0 auto 8px !important;
    padding: 8px !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 10px !important;
    background: var(--ri-v2-surface) !important;
    color: var(--ri-v2-text) !important;
    box-sizing: border-box !important;
}

html body .ri-shell-v2 :where(button, a, input, textarea, select, summary):focus-visible {
    outline: 2px solid var(--ri-v2-accent) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

html body .ri-shell-v2 .ri-unified-modal-overlay,
html body #ri-social-composer-overlay {
    padding: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(2, 6, 10, 0.82) !important;
    backdrop-filter: none !important;
}

html body .ri-shell-v2 .ri-unified-modal,
html body .ri-social-composer-modal {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: 1180px !important;
    height: auto !important;
    max-height: 92dvh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
    border: 1px solid var(--ri-v2-border) !important;
    border-radius: 14px !important;
    background: #0f1820 !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48) !important;
}

html body .ri-shell-v2 .ri-unified-modal-header,
html body .ri-social-composer-modal .ri-unified-modal-header {
    min-height: 56px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--ri-v2-border-soft) !important;
    background: #111b24 !important;
    box-sizing: border-box !important;
}

html body .ri-shell-v2 .ri-unified-modal-body,
html body .ri-social-composer-modal .ri-unified-modal-body {
    min-height: 0 !important;
    overflow: auto !important;
    padding: 18px !important;
    scrollbar-gutter: stable !important;
}

html body .ri-shell-v2 .ri-integrations-modal,
html body .ri-shell-v2 .ri-workspace-modal {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: 1180px !important;
}

html body .ri-shell-v2 .ri-credits-modal {
    width: min(480px, calc(100vw - 32px)) !important;
    max-width: 480px !important;
    height: auto !important;
    max-height: min(720px, 90dvh) !important;
}

html body .ri-shell-v2 .ri-integrations-search {
    position: sticky !important;
    top: -1px !important;
    z-index: 4 !important;
    min-height: 48px !important;
    border-color: var(--ri-v2-border) !important;
    background: #0c141b !important;
}

html body .ri-shell-v2 .ri-integrations-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html body .ri-shell-v2 #ri-project-inspector-form > section:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

html body .ri-shell-v2 #ri-project-inspector-form > section > :where(.ri-panel-explainer, .ri-campaign-template, .ri-team-panel, .ri-task-panel, .ri-comments-panel, .ri-version-panel, .ri-project-files-panel, .ri-template-editor, .ri-publish-content, details, h3) {
    grid-column: 1 / -1 !important;
}

html body .ri-shell-v2 .ri-workspace-actions {
    position: sticky !important;
    bottom: -18px !important;
    z-index: 5 !important;
    margin: 18px -18px -18px !important;
    padding: 12px 18px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--ri-v2-border-soft) !important;
    background: #111b24 !important;
}

html body #ri-social-media-preview {
    width: 100% !important;
    max-height: 42dvh !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #070b0f !important;
}

html body #ri-social-media-preview :where(img, video) {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

@media (max-width: 720px), (max-height: 500px) and (max-width: 900px) {
    body.ri-standalone-shell {
        --ri-v2-header: 56px;
    }

    html body .multimodal-ai-chat-wrapper.ri-shell-v2 {
        display: block !important;
        padding-top: env(safe-area-inset-top, 0) !important;
    }

    html body .ri-shell-v2 .multimodal-ai-chat-container {
        width: 100% !important;
        height: 100% !important;
        display: grid !important;
        grid-template-rows: var(--ri-v2-header) minmax(0, 1fr) auto !important;
        padding: 0 0 calc(var(--ri-v2-mobile-nav) + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
    }

    html body .ri-shell-v2 .ri-primary-nav {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        height: 58px !important;
        min-height: 58px !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
        border: 1px solid var(--ri-v2-border) !important;
        border-radius: 14px !important;
        background: rgba(13, 21, 28, 0.98) !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42) !important;
        z-index: 1100 !important;
    }

    html body .ri-shell-v2 .ri-primary-nav-item {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 4px 2px !important;
        gap: 3px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
    }

    html body .ri-shell-v2 .ri-primary-nav-item svg {
        width: 18px !important;
        height: 18px !important;
    }

    html body .ri-shell-v2 .ri-app-header {
        height: var(--ri-v2-header) !important;
        min-height: var(--ri-v2-header) !important;
        max-height: var(--ri-v2-header) !important;
        padding: 6px 8px !important;
        gap: 6px !important;
    }

    html body .ri-shell-v2 .ri-header-start,
    html body .ri-shell-v2 .ri-header-actions {
        gap: 5px !important;
    }

    html body .ri-shell-v2 .ri-conversation-open-btn,
    html body .ri-shell-v2 .ri-header-new-chat,
    html body .ri-shell-v2 .multimodal-ai-credits,
    html body .ri-shell-v2 .ri-account-menu > summary {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
    }

    html body .ri-shell-v2 .ri-header-brand {
        flex: 1 1 auto !important;
    }

    html body .ri-shell-v2 .ri-header-mark {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    html body .ri-shell-v2 .ri-header-title,
    html body .ri-shell-v2 .ri-header-new-chat span,
    html body .ri-shell-v2 .ri-credit-label,
    html body .ri-shell-v2 .ri-account-name {
        display: none !important;
    }

    html body .ri-shell-v2 .multimodal-ai-credits {
        width: auto !important;
        min-width: 54px !important;
        max-width: 78px !important;
        padding: 0 8px !important;
    }

    html body .ri-shell-v2 .ri-account-menu-panel {
        position: fixed !important;
        top: calc(var(--ri-v2-header) + env(safe-area-inset-top, 0px) + 6px) !important;
        right: 8px !important;
    }

    html body .ri-shell-v2 .multimodal-ai-chat-messages {
        padding: 14px 12px 18px !important;
    }

    html body .ri-shell-v2 .ri-start-panel {
        width: 100% !important;
        margin: 8px auto 0 !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    html body .ri-shell-v2 .ri-start-copy {
        margin-bottom: 14px !important;
    }

    html body .ri-shell-v2 .ri-start-copy h2 {
        font-size: clamp(22px, 7vw, 28px) !important;
    }

    html body .ri-shell-v2 .ri-start-copy > p:last-child {
        font-size: 13px !important;
    }

    html body .ri-shell-v2 .ri-start-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html body .ri-shell-v2 .ri-start-card {
        min-height: 82px !important;
        padding: 11px !important;
        gap: 5px !important;
    }

    html body .ri-shell-v2 .ri-start-card strong {
        font-size: 13px !important;
    }

    html body .ri-shell-v2 .ri-start-card span {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    html body .ri-shell-v2 .multimodal-ai-chat-input {
        padding: 10px 16px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    }

    html body .ri-shell-v2 .multimodal-ai-input-area {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto 44px !important;
        row-gap: 8px !important;
    }

    html body .ri-shell-v2 .ri-chat-text-shell {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: calc(100vw - 32px) !important;
        min-height: 46px !important;
    }

    html body .ri-shell-v2 #multimodal-ai-actions-toggle {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
    }

    html body .ri-shell-v2 #multimodal-ai-actions-toggle .ri-create-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
    }

    html body .ri-shell-v2 .multimodal-ai-right-buttons {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        gap: 5px !important;
    }

    html body .ri-shell-v2 .multimodal-ai-right-buttons > button,
    html body .ri-shell-v2 .multimodal-ai-right-buttons .ri-composer-settings > button,
    html body .ri-shell-v2 #multimodal-ai-send-btn {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        border-radius: 10px !important;
    }

    html body .ri-shell-v2 #multimodal-ai-action-buttons-popup {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(var(--ri-v2-mobile-nav) + 116px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--ri-v2-mobile-nav) - 132px - env(safe-area-inset-bottom, 0px)) !important;
        padding: 14px !important;
        overflow-y: auto !important;
        border-width: 1px !important;
        border-radius: 18px !important;
        z-index: 1400 !important;
    }

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

    html body .ri-shell-v2 #multimodal-ai-action-buttons-popup::before {
        content: "Create" !important;
        display: block !important;
        margin: 0 0 12px !important;
        color: var(--ri-v2-text) !important;
        font-size: 17px !important;
        font-weight: 850 !important;
    }

    html body .ri-shell-v2 #multimodal-ai-action-buttons-popup .multimodal-ai-action-button {
        min-height: 56px !important;
    }

    html body .ri-shell-v2 .ri-composer-settings-menu {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(var(--ri-v2-mobile-nav) + 116px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
    }

    html body .ri-shell-v2 .ri-unified-modal-overlay,
    html body #ri-social-composer-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    html body .ri-shell-v2 .ri-unified-modal:not(.ri-credits-modal),
    html body .ri-social-composer-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    html body .ri-shell-v2 #ri-credits-purchase-overlay {
        align-items: flex-end !important;
    }

    html body .ri-shell-v2 .ri-credits-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: 90dvh !important;
        border-width: 1px 0 0 !important;
        border-radius: 18px 18px 0 0 !important;
    }

    html body .ri-shell-v2 .ri-unified-modal-header {
        padding: max(12px, env(safe-area-inset-top, 0px)) 14px 12px !important;
    }

    html body .ri-shell-v2 .ri-unified-modal-body {
        padding: 14px !important;
    }

    html body .ri-shell-v2 .ri-integrations-grid,
    html body .ri-shell-v2 #ri-project-inspector-form > section:not([hidden]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .ri-shell-v2 .ri-workspace-actions {
        bottom: -14px !important;
        margin: 16px -14px -14px !important;
        padding: 10px 14px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 520px) {
    html body .ri-shell-v2 #multimodal-ai-action-buttons-popup > #multimodal-ai-action-buttons {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .ri-shell-v2 *,
    html body .ri-shell-v2 *::before,
    html body .ri-shell-v2 *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}