/* === chats-hover-disable-animations (originally lines 6454-6463) === */ /* Disable hover transitions/animations in chats list */ .chat-item, .chat-item::before, .chat-item:hover, .chat-item:hover::before, .chat-menu-trigger, .chat-item:hover .chat-menu-trigger, .drop-indicator { } /* === pro-theme-overrides (originally lines 6466-6594) === */ /* Design tokens and pro theme overrides */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-pro: 0 4px 20px rgba(0,0,0,0.1); --sidebar-bg-dark: #171717; --sidebar-bg-light: #171717; --border-dark: rgba(255,255,255,0.1); --sep-soft: #e5e5e5; --header-glass-bg: rgba(24,24,24,0.8); --overlay-glass-bg: rgba(0,0,0,0.4); --message-bubble-radius: 14px; } /* Strategic blur: header only */ .header { background: rgba(33,33,33,0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: none !important; box-shadow: none !important; transition: box-shadow 0.3s cubic-bezier(0.4,0,0.2,1) !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; will-change: transform; } /* Strategic blur: modal overlays */ .modal, .modal-overlay { background: var(--overlay-glass-bg) !important; backdrop-filter: blur(1px) !important; -webkit-backdrop-filter: blur(1px) !important; z-index: 13000 !important; } .custom-modal, .modal-content { z-index: 13001 !important; box-shadow: var(--shadow-pro); } /* Strategic blur: input wrapper on focus only (glassmorphism) */ .input-wrapper:focus-within { background: rgba(48,48,48,0.6) !important; border: 1px solid rgba(255,255,255,0.12) !important; backdrop-filter: blur(1px) !important; -webkit-backdrop-filter: blur(1px) !important; box-shadow: var(--shadow-pro) !important; } /* Remove blur elsewhere for performance */ .sidebar, .message, .chat-item, .header-btn, .send-btn, .new-chat, .code-header .copy-btn, .code-header .run-btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Professional sidebar */ .sidebar { background: var(--sidebar-bg-dark) !important; border-right: 1px solid var(--border-dark) !important; box-shadow: none !important; } /* Ensure open sidebar children match sidebar background */ .sidebar > *:not(.sidebar-footer) { background: var(--sidebar-bg-dark) !important; } /* Subtle borders */ .modal-header, .code-header, .model-menu { border-color: var(--border-dark) !important; } /* Message bubbles */ .message-bubble { border: 1px solid var(--border) !important; border-radius: var(--message-bubble-radius) !important; box-shadow: none !important; } /* Typography for assistant - overridden to Default */ .message.assistant .message-text { font-family: 'Default', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important; font-weight: 400; font-size: 17px !important; line-height: 1.65; letter-spacing: 0.005em; } /* Utilities */ .text-base { font-size: 16px; } .min-h-8 { min-height: 32px; } /* Code blocks */ pre, code, .code { font-family: monospace; font-size: 13.5px; } /* Assistant content headings */ .message.assistant h1 { font-size: 20px; font-weight: 600; margin: var(--space-4) 0 var(--space-2); } .message.assistant h2 { font-size: 18px; font-weight: 600; margin: var(--space-3) 0 var(--space-2); } .message.assistant h3 { font-size: 16px; font-weight: 600; margin: var(--space-3) 0 var(--space-2); } /* Smooth animations */ button, .header-btn, .send-btn, .new-chat, .code-header .copy-btn, .code-header .run-btn { } .message { } .sidebar.open { } :focus-visible { outline: 2px solid var(--custom-color); outline-offset: 2px; } /* Modern hover states */ .chat-item:hover { background: rgba(255,255,255,0.05); } .header-btn:hover { background: transparent !important; } .action-btn:hover { background: transparent; } .settings-item:hover { background: rgba(255,255,255,0.06); } .new-chat:hover { opacity: 1; box-shadow: none; } /* Remove excessive brightness from active settings tab */ .settings-nav .settings-tab.active { color: var(--text-secondary) !important; text-shadow: none !important; filter: none !important; background: transparent !important; } /* Button press effects (specific only) */ .send-btn:active:not(:disabled) { transform: scale(0.95) !important; } .new-chat:active { transform: translateY(1px) scale(0.98); } .modal .btn:active { transform: translateY(1px) scale(0.98); } .code-header .run-btn:active, .code-header .copy-btn:active { transform: scale(0.96); } /* Responsive and 44px touch targets */ @media (max-width: 480px) { .header-btn, .new-chat, .send-btn, .action-btn, .chat-item, .select-trigger { min-width: 44px; min-height: 44px; } .message.assistant .message-text { font-size: 17px; line-height: 1.65; } .select-menu .select-option { min-height: 44px; padding: 10px 12px; } } @media (min-width: 1024px) { .message.assistant .message-text { font-size: 17px; } } /* === block lines 6598-7038 === */ /* Hover states for account menu items (reused for toolsMenu and messageMoreMenu) */ #toolsMenu button[role="menuitem"], #messageMoreMenu button[role="menuitem"], #iconModal button[role="menuitem"] { } #messageMoreMenu button[role="menuitem"]:hover, #messageMoreMenu button[role="menuitem"]:focus-visible, #iconModal button[role="menuitem"]:hover, #iconModal button[role="menuitem"]:focus-visible { background: transparent !important; color: #ffffff !important; box-shadow: none !important; } /* Soft, modern pill hover */ #toolsMenu button[role="menuitem"], #messageMoreMenu button[role="menuitem"], #iconModal button[role="menuitem"] { position: relative; border-radius: 18px; overflow: hidden; } #toolsMenu button[role="menuitem"]:hover, #toolsMenu button[role="menuitem"]:focus-visible, #messageMoreMenu button[role="menuitem"]:hover, #messageMoreMenu button[role="menuitem"]:focus-visible, #iconModal button[role="menuitem"]:hover, #iconModal button[role="menuitem"]:focus-visible { box-shadow: none; } #messageMoreMenu { background: var(--primary) !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--menu-border) !important; border-radius: 24px !important; } #messageMoreMenu button[role="menuitem"] { position: relative; isolation: isolate; background: transparent !important; border: none !important; box-shadow: none !important; --button-background-color: var(--button-bg-hover); --button-background-color-active: var(--button-bg-active); --scale: 0.98; overflow: hidden; } #messageMoreMenu button[role="menuitem"]::before { position: absolute; inset: 0; display: block; border-radius: inherit; background-color: var(--button-background-color); content: ""; opacity: 0; transform: scale(1); z-index: -1; pointer-events: none; } #messageMoreMenu button[role="menuitem"]:hover::before, #messageMoreMenu button[role="menuitem"]:focus-visible::before { opacity: 1; transform: scale(1); } #messageMoreMenu button[role="menuitem"]:active::before { opacity: 1; transform: scale(var(--scale)); background-color: var(--button-background-color-active); } #messageMoreMenu button[role="menuitem"]:hover, #messageMoreMenu button[role="menuitem"]:focus-visible { background: transparent !important; color: #ffffff !important; box-shadow: none !important; } #messageMoreMenu button[role="menuitem"].danger { color: #FA8585; --button-background-color: rgba(211, 47, 47, 0.3); --button-background-color-active: rgba(211, 47, 47, 0.45); } #messageMoreMenu button[role="menuitem"].danger:hover, #messageMoreMenu button[role="menuitem"].danger:focus-visible { color: #ffffff !important; } #messageMoreMenu button[role="menuitem"] > * { position: relative; z-index: 0; } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { #toolsMenu { background: var(--surface) !important; border: 1px solid var(--menu-divider) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; } } /* Ensure tools menus are visible when opened (match messageMoreMenu behavior) */ #toolsMenu[aria-hidden="false"] { display: block !important; visibility: visible !important; z-index: 3000 !important; } #toolsMenu svg { color: #ffffff !important; fill: #ffffff !important; width:20px !important; height:20px !important; margin-left:0px !important; } #toolsMenu img, #toolsMenu img.ui-icon-white { filter: brightness(0) invert(1) saturate(0) !important; width:20px !important; height:20px !important; margin-left:0px !important; } [data-theme="light"] #toolsMenu { background: #ffffff !important; color: #0d0d0d !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; } [data-theme="light"] #toolsMenu img, [data-theme="light"] #toolsMenu img.ui-icon-white { filter: brightness(0) !important; } [data-theme="light"] #toolsMenu svg { color: #0d0d0d !important; fill: #0d0d0d !important; } [data-theme="light"] #toolsMenu .tool-item { color: #0d0d0d !important; } [data-theme="light"] #toolsMenu .tool-item:hover { background: #f4f4f4 !important; } [data-theme="light"] #toolsMenu div[style*="background:#3a3a3a"] { background: rgba(0,0,0,0.08) !important; } #messageMoreMenu img.ui-icon-white { filter: brightness(0) invert(1) brightness(0.77) !important; } [data-theme="light"] #messageMoreMenu { background: #ffffff !important; color: #0d0d0d !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; } [data-theme="light"] #messageMoreMenu button[role="menuitem"] { color: #0d0d0d !important; --button-background-color: rgba(0,0,0,0.06); --button-background-color-active: rgba(0,0,0,0.1); } [data-theme="light"] #messageMoreMenu button[role="menuitem"]:hover, [data-theme="light"] #messageMoreMenu button[role="menuitem"]:focus-visible { color: #0d0d0d !important; } [data-theme="light"] #messageMoreMenu button[role="menuitem"].danger { color: #d32f2f !important; --button-background-color: rgba(211,47,47,0.08); --button-background-color-active: rgba(211,47,47,0.15); } [data-theme="light"] #messageMoreMenu button[role="menuitem"].danger:hover, [data-theme="light"] #messageMoreMenu button[role="menuitem"].danger:focus-visible { color: #d32f2f !important; } [data-theme="light"] #messageMoreMenu img, [data-theme="light"] #messageMoreMenu img.ui-icon-white { filter: brightness(0) !important; } [data-theme="light"] #messageMoreMenu svg { color: #0d0d0d !important; fill: #0d0d0d !important; } [data-theme="light"] #messageMoreMenu div[style*="background:#3a3a3a"], [data-theme="light"] #messageMoreMenu div[style*="background: #3a3a3a"] { background: rgba(0,0,0,0.08) !important; } /* Ensure switches reflect theme color when ON inside tools menus */ #toolsMenu .switch[data-state="checked"] { background: var(--accent) !important; background-color: var(--accent) !important; border-color: var(--accent) !important; } #toolsMenu .toggle-switch.active { background: var(--accent) !important; border-color: var(--accent) !important; } #toolsMenu .toggle-switch .toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background: white; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } #toolsMenu .toggle-switch input:checked + .toggle-slider { background: var(--accent); } #toolsMenu .toggle-switch input:checked + .toggle-slider::before { transform: translateX(12px); } /* Disable text selection in protected UI regions */ #toolsMenu, #accountMenu, .sidebar { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Tool Card styles removed — will be re-added later */ /* Cosmos Artifact System */ .pasa-artifact-card { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 720px; height: 71px; background: #171717; border: 1px solid #3a3a3a; border-radius: 12px; padding: 12px 16px; margin: 8px 0; cursor: pointer; box-sizing: border-box; } .pasa-artifact-card:hover { background: #2f2f2f; border-color: #4a4a4a; } .pasa-artifact-card-name { font-weight: 600; font-size: 14px; color: #ececec; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pasa-artifact-card-type { font-size: 12px; color: #818181; } .artifact-card { display: flex; align-items: center; gap: 0; background: transparent; border: 0.5px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 0; margin: 4px 0; cursor: pointer; min-width: 220px; max-width: 480px; width: 100%; user-select: none; box-sizing: border-box; overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease; } .artifact-card:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.18); } .artifact-thumbnail { width: 68px; min-width: 68px; min-height: 72px; display: flex; align-items: flex-end; position: relative; flex-shrink: 0; overflow: hidden; } .artifact-thumbnail-inner { position: absolute; right: 8px; width: 52px; height: 71px; background: linear-gradient(to bottom, rgba(255,255,255,0.06), transparent); border: 0.5px solid rgba(255,255,255,0.15); border-radius: 8px 8px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 16px; box-sizing: border-box; transform: translateY(19%) rotate(-0.1rad); transition: transform 0.3s ease-out; } .artifact-card:hover .artifact-thumbnail-inner { transform: scale(1.035) rotate(-0.065rad) translateY(19%); transition: transform 0.4s cubic-bezier(0, 0.9, 0.5, 1.35); } .artifact-thumbnail-inner img { width: 20px; height: 20px; filter: brightness(0) invert(1); pointer-events: none; user-select: none; -webkit-user-drag: none; } .artifact-info { flex: 1; min-width: 0; padding: 16px 16px 16px 12px; display: flex; flex-direction: column; gap: 4px; } .artifact-title { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .artifact-subtitle { font-size: 12px; color: rgba(255,255,255,0.45); user-select: none; pointer-events: none; } .artifact-generating-card { display: flex; align-items: center; gap: 12px; background: #171717; border: 1px solid #3a3a3a; border-radius: 10px; padding: 10px 14px; margin: 2px 0; width: 100%; max-width: 400px; } .artifact-generating-card .artifact-spinner { } .pasa-artifact-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 50vw; min-width: 400px; max-width: 800px; background: #0d0d0d; border-left: 1px solid #3a3a3a; z-index: 100001; display: flex; flex-direction: column; transform: translateX(100%); } .pasa-artifact-panel.open { transform: translateX(0); } .pasa-artifact-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #3a3a3a; background: #171717; flex-shrink: 0; } .pasa-artifact-panel-title { font-weight: 600; font-size: 14px; color: #ececec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; margin-right: 12px; } .pasa-artifact-panel-tabs { position: relative; display: flex; gap: 0; margin-right: 12px; background: rgba(255,255,255,0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.11); border-radius: 22px; padding: 3px; } .pasa-artifact-tab-slider { position: absolute; top: 3px; left: 0; height: calc(100% - 6px); background: rgba(255,255,255,0.16); border-radius: 18px; transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1); pointer-events: none; z-index: 0; } .pasa-artifact-panel-tab { position: relative; z-index: 1; padding: 5px 16px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.45); background: transparent; border: none; border-radius: 18px; cursor: pointer; white-space: nowrap; } .pasa-artifact-panel-tab:hover { color: rgba(255,255,255,0.75); } .pasa-artifact-panel-tab.active { color: #fff; } .pasa-artifact-panel-tab:disabled { color: rgba(255,255,255,0.22); cursor: default; } .pasa-artifact-panel-actions { display: flex; align-items: center; gap: 8px; } .pasa-artifact-panel-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; border-radius: 8px; color: #818181; cursor: pointer; } .pasa-artifact-panel-btn:hover { background: rgba(255,255,255,0.1); color: #ececec; } .pasa-artifact-panel-btn svg { width: 18px; height: 18px; } .pasa-artifact-panel-content { flex: 1; overflow: hidden; background: #0d0d0d; display: flex; flex-direction: column; } .pasa-artifact-panel-code { flex: 1; overflow: auto; display: none; } .pasa-artifact-panel-code.active { display: block; } .pasa-artifact-panel-preview { flex: 1; overflow: hidden; display: none; } .pasa-artifact-panel-preview.active { display: flex; } .pasa-artifact-panel-content iframe { width: 100%; height: 100%; border: none; background: #ffffff; } .pasa-artifact-panel-content pre { margin: 0; padding: 16px; font-family: 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.5; color: #ececec; white-space: pre-wrap; word-break: break-word; background: #0d0d0d; height: 100%; overflow: auto; box-sizing: border-box; } .pasa-artifact-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); background: rgba(0,0,0,0.4); z-index: 100000; opacity: 0; pointer-events: none; } .pasa-artifact-overlay.open { opacity: 1; pointer-events: auto; } @media (max-width: 768px) { .pasa-artifact-panel { width: 100vw; min-width: unset; max-width: unset; } } /* Ask to Cosmos floating button styling + entrance animation */ .ask-to-synthenis-btn { position: fixed; z-index: 10000; display: none !important; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; border-radius: 9999px; border: 1px solid #000000; background: #000000; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.35); cursor: pointer; user-select: none; white-space: nowrap; } .ask-to-synthenis-btn .ui-icon-white { filter: invert(1); } .tools-btn .icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .tools-btn .icon-plus { opacity: 1; transform: rotate(0deg) scale(1); } .tools-btn .icon-close { display: none; } .tools-btn.open .icon-plus { opacity: 1; transform: rotate(0deg) scale(1); } .tools-btn.open .icon-close { display: none; } /* Autocomplete dropdown - match app menus */ /* Hover effect same as accountMenu buttons */ .ask-to-synthenis-btn { position: relative; overflow: hidden; } .ask-to-synthenis-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: transparent; pointer-events: none; opacity: 0; } .ask-to-synthenis-btn:hover::before, .ask-to-synthenis-btn:focus-visible::before { opacity: 1; background: rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.04); } .sidebar-action { position: relative; border-radius: 10px; overflow: hidden; padding-left: 12px; background: transparent !important; border: none !important; box-shadow: none !important; } /* Custom select styled like account menu */ select.custom-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #000; color: #ececec; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 8px 32px 8px 12px; position: relative; } select.custom-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); } /* Global focus styles for accessibility */ button:focus-visible, .modal-close:focus-visible, .settings-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .select-wrap { position: relative; display: inline-block; } .select-wrap::after { display: none; } #sidebarToggleBtn { color: var(--text-primary); position: relative; overflow: hidden; border-radius: 25px !important; } #sidebarToggleBtn:hover { color: var(--text-primary) !important; } #sidebarToggleBtn:active { border-radius: 25px !important; } #sidebarToggleBtn:focus-visible { border-radius: 25px !important; } #sidebarToggleBtn svg { color: inherit !important; } .custom-select.hidden-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .select-trigger { background: transparent; color: var(--text-primary, #ececec); border: none; border-radius: 10px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; cursor: pointer; max-width: 100%; position: relative; width: auto; overflow: hidden; user-select: none; -webkit-user-select: none; font-size: 14px; line-height: 1.25; white-space: nowrap; } .select-trigger:hover, .select-trigger:focus-visible, .select-trigger[aria-expanded="true"] { background: rgba(255,255,255,0.06); } .select-trigger .arrow { display: inline-flex; color: var(--text-muted, #818181); flex-shrink: 0; } .select-trigger .arrow svg { width: 16px; height: 16px; color: inherit; } .select-trigger > span { position: relative; z-index: 1; } .select-trigger:focus, .select-trigger:focus-visible { outline: none !important; } .select-menu { position: fixed; width: 220px; max-width: calc(100vw - 16px); background: var(--primary, #212121); color: var(--text-primary, #ececec); border: 1px solid var(--menu-border, rgba(255,255,255,0.15)); border-radius: 24px; box-shadow: var(--shadow-sm, 0 8px 24px rgba(0,0,0,0.25)); overflow: hidden; overflow-x: hidden; z-index: 3000; display: none; box-sizing: border-box; user-select: none; -webkit-user-select: none; } .select-menu .select-list { padding: 6px; display: flex; flex-direction: column; gap: 2px; background: transparent; max-height: 280px; overflow-y: auto; } .select-menu .select-list::-webkit-scrollbar { display: none; } .select-menu .select-list { -ms-overflow-style: none; scrollbar-width: none; } .select-option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text-primary, #ececec); border-radius: 18px; cursor: pointer; background: transparent !important; border: none; text-align: left; font-size: 14px; line-height: 1.35; user-select: none; -webkit-user-select: none; position: relative; isolation: isolate; overflow: hidden; --button-background-color: var(--button-bg-hover, rgba(255,255,255,0.08)); --button-background-color-active: var(--button-bg-active, rgba(255,255,255,0.05)); --scale: 0.98; } .select-option::before { position: absolute; inset: 0; display: block; border-radius: inherit; background-color: var(--button-background-color); content: ""; opacity: 0; transform: scale(1); z-index: -1; pointer-events: none; } .select-option:hover::before, .select-option:focus-visible::before { opacity: 1; transform: scale(1); } .select-option:active::before { opacity: 1; transform: scale(var(--scale)); background-color: var(--button-background-color-active); } .select-option:hover, .select-option:focus-visible { background: transparent !important; color: #ffffff !important; box-shadow: none !important; } .select-option > * { position: relative; z-index: 0; } .select-option.selected { font-weight: 500; } .select-option > span:first-child { flex: 1 1 auto; min-width: 0; } .select-option .check { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; visibility: hidden; opacity: 0.85; flex-shrink: 0; } .select-option.selected .check { visibility: visible; } .select-option .check svg { width: 18px; height: 18px; color: var(--text-primary, #fff); display: block; } [data-theme="light"] .select-trigger:hover, [data-theme="light"] .select-trigger:focus-visible, [data-theme="light"] .select-trigger[aria-expanded="true"] { background: rgba(0,0,0,0.05); } [data-theme="light"] .select-trigger .arrow { color: var(--text-muted, #8f8f8f); } [data-theme="light"] .select-menu { background: #ffffff; color: #0d0d0d; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.12); } [data-theme="light"] .select-option { color: #0d0d0d; --button-background-color: rgba(0,0,0,0.06); --button-background-color-active: rgba(0,0,0,0.1); } [data-theme="light"] .select-option:hover, [data-theme="light"] .select-option:focus-visible { color: #0d0d0d !important; } [data-theme="light"] .select-option .check svg { color: #0d0d0d; } /* Settings modal sizing */ #settingsModal .modal-content { max-width: 680px; width: 680px; height: 600px; background: var(--bg-modal); border-radius: 25px; } #settingsModal .modal-body { height: calc(600px - 80px); overflow: hidden; padding: 10px 14px 10px 14px; padding-right: 0; background: var(--primary); position: relative; } #settingsModal .modal-body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(10px + 200px + 6px); background: var(--primary); z-index: 0; } #settingsModal .modal-body::after { display: none !important; } #settingsModal .settings-layout { grid-template-columns: 200px 1fr !important; position: relative; height: 100%; overflow-x: hidden; } #settingsModal .settings-section { margin-bottom: 14px; } #settingsModal .settings-section h3 { font-size: 13px; margin-bottom: 4px; font-weight: 600; } #settingsModal .settings-content [data-tab-panel] h3 { display: none; } #settingsModal .settings-content > .settings-section:last-child { margin-bottom: 0; padding-bottom: 0; } #settingsModal .setting-item { gap: 12px; } /* Settings modal vertical scrollbar cleanup */ #settingsModal .settings-content { scrollbar-width: thin; scrollbar-gutter: stable both-edges; } #settingsModal .settings-content::-webkit-scrollbar { width: 8px; } #settingsModal .settings-content::-webkit-scrollbar-track { background: transparent; margin: 4px 0; } #settingsModal .settings-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } #settingsModal .settings-content::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; } /* Ensure non-General panels start at the very top with no extra spacing */ #settingsModal .settings-content { padding-top: 0 !important; } #settingsModal .settings-content [data-tab-panel] { margin-top: 0 !important; padding-top: 0 !important; } #settingsModal .settings-content [data-tab-panel] > h3 { margin-top: 0 !important; } #settingsModal .settings-content [data-tab-panel] .setting-item:first-of-type { margin-top: 0 !important; } #settingsModal .settings-content [data-tab-panel] .settings-section:first-of-type { margin-top: 0 !important; } .settings-nav { align-items: stretch; } .settings-nav .settings-tab { border-radius: 18px; display:flex; align-items:center; gap:10px; height: 36px; padding: 0 12px; background: transparent; border: 1px solid transparent; color: var(--text-secondary); white-space: nowrap; position: relative; isolation: isolate; --button-background-color: var(--button-bg-hover); --button-background-color-active: var(--button-bg-active); --scale: 0.98; } .settings-nav .settings-tab::before { position: absolute; inset: 0; display: block; border-radius: inherit; background-color: var(--button-background-color); content: ""; opacity: 0; transform: scale(1); z-index: -1; pointer-events: none; } .settings-nav .settings-tab:hover::before { opacity: 1; transform: scale(1); } .settings-nav .settings-tab:active::before, .settings-nav .settings-tab.active:active::before { opacity: 1; transform: scale(var(--scale)); background-color: var(--button-background-color-active); } .settings-nav .settings-tab:hover { background: transparent !important; box-shadow: none !important; } .settings-nav .settings-tab:focus-visible { color: #ececec; cursor: pointer; } .settings-nav .settings-tab > * { position: relative; z-index: 0; } .settings-nav .settings-tab.active { background: transparent !important; box-shadow: none !important; color: #ececec !important; border-color: transparent !important; } .settings-nav .settings-tab.active::before { opacity: 1; transform: scale(1); } /* avatarBtn separate from accountMenu */ .sidebar .avatar-btn { position: relative; isolation: isolate; background: transparent !important; box-shadow: none !important; border: none !important; --button-background-color: var(--button-bg-hover); --button-background-color-active: var(--button-bg-active); --scale: 0.98; border-radius: 12px; overflow: hidden; } .sidebar .avatar-btn::before { position: absolute; inset: 0; display: block; border-radius: inherit; background-color: var(--button-background-color) !important; content: ""; opacity: 0; transform: scale(1); z-index: -1; pointer-events: none; } .sidebar .avatar-btn:hover::before { opacity: 1; transform: scale(1); } .sidebar .avatar-btn:active::before { opacity: 1; transform: scale(var(--scale)); background-color: var(--button-background-color-active) !important; } .sidebar .avatar-btn:hover, .sidebar .avatar-btn:focus-visible { background: transparent !important; box-shadow: none !important; } .sidebar .avatar-btn > * { position: relative; z-index: 0; } .input-wrapper { border: none !important; box-shadow: none !important; } .input-wrapper:focus-within { border: none !important; box-shadow: none !important; } #settingsModal .settings-nav, #settingsModal .settings-nav * { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } /* ===== Mobile Settings: ChatGPT-style redesign ===== */ @media (max-width: 768px) { /* Modal: full width, bottom-sheet */ #settingsModal .modal-content { width: 100% !important; max-width: 100% !important; height: calc(100dvh - 24px) !important; max-height: calc(100dvh - 24px) !important; border-radius: 16px !important; margin-top: auto !important; display: flex !important; flex-direction: column !important; } /* Header: close left, title center */ #settingsModal .modal-header { padding: 14px 16px !important; flex-direction: row !important; border-bottom: none !important; background: var(--primary) !important; flex-shrink: 0; position: relative !important; min-height: 24px !important; } #settingsModal .modal-header .modal-close { flex-shrink: 0; position: relative !important; z-index: 2 !important; order: -1 !important; } #settingsModal .modal-header .modal-title { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; text-align: center !important; font-size: 16px !important; font-weight: 600 !important; margin: 0 !important; pointer-events: none !important; } /* Body: flex column, fill remaining space */ #settingsModal .modal-body { height: auto !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; padding: 0 !important; background: var(--primary) !important; display: flex !important; flex-direction: column !important; } #settingsModal .modal-body::before, #settingsModal .modal-body::after { display: none !important; } /* Layout: single column, allow nav to scroll */ #settingsModal .settings-layout { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; height: 100% !important; gap: 0 !important; overflow-x: visible !important; min-width: 0 !important; } /* Nav: horizontal scrollable row */ #settingsModal .settings-nav[style] { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 4px !important; padding: 6px 16px 8px 16px !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; flex-shrink: 0 !important; position: static !important; background: var(--primary) !important; z-index: 2 !important; min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; scrollbar-width: none !important; mask-image: linear-gradient(to right, transparent 0px, black 12px, black calc(100% - 12px), transparent 100%) !important; -webkit-mask-image: linear-gradient(to right, transparent 0px, black 12px, black calc(100% - 12px), transparent 100%) !important; } #settingsModal .settings-nav::-webkit-scrollbar { display: none !important; } /* Tab pills */ #settingsModal .settings-nav > button.settings-tab[style] { all: unset !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 30px !important; padding: 0 12px !important; margin: 0 !important; border-radius: 9999px !important; white-space: nowrap !important; font-size: 13px !important; font-family: inherit !important; line-height: 1 !important; flex-shrink: 0 !important; background: transparent !important; color: rgba(255,255,255,0.55) !important; cursor: pointer !important; box-sizing: border-box !important; -webkit-tap-highlight-color: transparent !important; } #settingsModal .settings-nav > button.settings-tab.active[style] { background: rgba(255,255,255,0.12) !important; color: #fff !important; } [data-theme="light"] #settingsModal .settings-nav[style] { border-bottom-color: rgba(0,0,0,0.08) !important; background: #ffffff !important; } [data-theme="light"] #settingsModal .settings-nav > button.settings-tab[style] { color: rgba(0,0,0,0.5) !important; } [data-theme="light"] #settingsModal .settings-nav > button.settings-tab.active[style] { background: rgba(0,0,0,0.08) !important; color: #0d0d0d !important; } /* Kill desktop pseudo-element */ #settingsModal .settings-nav .settings-tab::before { display: none !important; content: none !important; } /* Hide icons */ #settingsModal .settings-nav .settings-tab img, #settingsModal .settings-nav .settings-tab svg { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; pointer-events: none !important; } /* Content: scrollable area */ #settingsModal .settings-content { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 0 16px 20px 16px !important; max-height: none !important; position: relative; z-index: 1; } /* Setting items: compact rows */ #settingsModal .settings-content .setting-item { padding: 12px 0 !important; gap: 10px !important; min-height: auto !important; } #settingsModal .settings-content .setting-title { font-size: 14px !important; } #settingsModal .settings-content .setting-description { font-size: 12px !important; line-height: 1.4 !important; } #settingsModal .select-trigger { min-width: auto !important; min-height: auto !important; padding: 5px 8px !important; font-size: 13px !important; border-radius: 8px !important; } .select-menu { width: 180px !important; max-width: calc(100vw - 24px) !important; border-radius: 24px !important; z-index: 99999 !important; } .select-menu .select-list { padding: 4px !important; gap: 1px !important; } .select-menu .select-option { min-height: auto !important; padding: 8px 10px !important; font-size: 13px !important; border-radius: 8px !important; gap: 8px !important; } .select-menu .select-option .check svg { width: 14px !important; height: 14px !important; } /* Compact toggles/switches */ #settingsModal .switch, #settingsModal .switch-btn { transform: scale(0.9); } /* Message limit display compact */ #settingsModal .message-limit-display { font-size: 13px !important; } /* Hide section h3 (redundant with tab name) */ #settingsModal .settings-content [data-tab-panel] > h3 { display: none !important; } #settingsModal .settings-content [data-tab-panel] { padding-top: 0 !important; margin-top: 0 !important; } #settingsModal .settings-content [data-tab-panel] .setting-item:first-of-type { margin-top: 0 !important; } #settingsModal .settings-content [data-tab-panel] .settings-section:first-of-type { margin-top: 0 !important; } } /* === block lines 7039-7104 === */ /* Mobile modal fit fixes (non-destructive overrides) */ .modal { height: 100vh; height: 100dvh; overflow: auto; -webkit-overflow-scrolling: touch; padding-top: max(12px, env(safe-area-inset-top)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); } #settingsModal .settings-content { overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (min-width: 769px) { #settingsModal .modal-body { overflow: hidden; } } @media (max-width: 768px) { .modal-content { max-height: calc(100dvh - 24px) !important; border: none !important; } /* Settings modal body handled by main mobile block above */ #settingsModal { align-items: flex-end !important; } #settingsModal .modal-body { overflow: hidden !important; } } @media (max-width: 480px) { .modal-content { max-height: calc(100dvh - 16px) !important; border: none !important; } } /* Prevent horizontal shifting when tabbing inside settings (General and others) */ #settingsModal { overflow-x: hidden !important; scrollbar-gutter: stable both-edges; } #settingsModal .modal-content, #settingsModal .modal-body, #settingsModal .settings-content { overflow-x: hidden; } @media (min-width: 769px) { #settingsModal .settings-layout { overflow-x: hidden; } } /* Force dark background for all modals */ .modal-body { background: var(--primary) !important; } .modal-header { background: var(--bg-footer) !important; } /* Force dark background for the entire settings modal */ #settingsModal .modal-content { background: var(--bg-modal) !important; } #settingsModal .modal-header { background: var(--bg-footer) !important; } #settingsModal .modal-body, #settingsModal .modal-footer, #settingsModal .settings-content, #settingsModal .settings-nav, #settingsModal .settings-layout { background: var(--primary) !important; } /* Subtle, thinner dividers throughout settings */ #settingsModal .modal-header { border-bottom: 1px solid var(--menu-divider) !important; } #settingsModal .settings-content .setting-item { border-bottom: 1px solid var(--menu-divider) !important; } /* Remove any separator between settings-nav and settings-content */ #settingsModal .settings-nav { border-right: none !important; } #settingsModal .settings-content { border-left: none !important; } #settingsModal .settings-content .settings-section { border-top: none !important; } #settingsModal .divider, #settingsModal hr { height: 1px !important; background: var(--menu-divider) !important; border: 0 !important; } #settingsModal .settings-content { overscroll-behavior-x: contain; scroll-padding-right: 12px; } @media (orientation: portrait) { #settingsModal .settings-content { overflow-y: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; } } /* === block lines 7127-7297 === */ /* Enforce account menu color globally */ #accountMenu { background: var(--primary) !important; border: 1px solid var(--menu-border) !important; } #accountMenu button[role="menuitem"] { color: #ececec; } #accountMenu .divider, #accountMenu hr { background: var(--menu-divider); height: 1px; border: 0; width: 100%; display: block; } @media (max-width: 768px) { .hide-on-mobile { display: none !important; } } .hover-box { background: transparent !important; color: #fff !important; padding: 0 !important; margin: 0 !important; border-radius: 10px !important; font-family: sans-serif; pointer-events: auto; z-index: 1; } .hover-box:hover { background: var(--button-bg-hover-light) !important; cursor: pointer; } /* Disable legacy pseudo hover overlays when using hover-box */ .chat-item.hover-box::before { opacity: 0 !important; background: transparent !important; box-shadow: none !important; } /* Do not let generic .hover-box padding shrink chat list items */ .chat-item.hover-box { padding: 8px 12px !important; padding-right: 36px !important; margin: 0; } /* Disable hover-box for accountMenu buttons */ #accountMenu .hover-box, #accountMenu button.hover-box { background: transparent !important; } #accountMenu .hover-box:hover, #accountMenu button.hover-box:hover { background: transparent !important; } #accountMenu .hover-box::before, #accountMenu .hover-box::after, #accountMenu button.hover-box::before, #accountMenu button.hover-box::after { content: none !important; display: none !important; opacity: 0 !important; background: transparent !important; } /* accountMenu buttons with setting-tab style hover/press */ #accountMenu { isolation: isolate; z-index: 9999; pointer-events: auto; } #accountMenu button[role="menuitem"]:not(.invalid-selector) { position: relative !important; isolation: isolate !important; background: transparent !important; box-shadow: none !important; border: none !important; --button-background-color: var(--button-bg-hover); --button-background-color-active: var(--button-bg-active); --scale: 0.98; border-radius: 18px !important; overflow: hidden !important; pointer-events: auto !important; } #accountMenu button[role="menuitem"]:not(.invalid-selector)::before { position: absolute !important; inset: 0 !important; display: block !important; border-radius: inherit !important; background-color: var(--button-background-color) !important; content: "" !important; opacity: 0 !important; transform: scale(1) !important; z-index: -1 !important; pointer-events: none !important; } #accountMenu button[role="menuitem"]:not(.invalid-selector):hover::before { opacity: 1 !important; transform: scale(1) !important; } /* Stronger specificity to ensure button hover is visible even if menu container gets hover */ #accountMenu:hover button[role="menuitem"]:hover::before { opacity: 1 !important; transform: scale(1) !important; } #accountMenu button[role="menuitem"]:not(.invalid-selector):active::before { opacity: 1 !important; transform: scale(var(--scale)) !important; background-color: var(--button-background-color-active) !important; } #accountMenu button[role="menuitem"]:not(.invalid-selector):hover, #accountMenu button[role="menuitem"]:not(.invalid-selector):focus-visible { background: transparent !important; box-shadow: none !important; } #accountMenu button[role="menuitem"]:not(.invalid-selector) > * { position: relative; z-index: 1; pointer-events: none; } /* FIX: Normalize account menu button alignment and spacing */ #accountMenu button[role="menuitem"] { width: 100% !important; background: transparent !important; border: none !important; text-align: left !important; padding: 8px 10px !important; display: flex !important; align-items: center !important; gap: 12px !important; font-size: 14px !important; } #accountMenu button[role="menuitem"] img, #accountMenu button[role="menuitem"] svg { width: 20px !important; height: 20px !important; flex: 0 0 20px; display: block; margin: 0 !important; } #accountMenu button[role="menuitem"] span { text-align: left !important; } /* Shared hover style for sidebar action buttons */ .sidebar-action, #sidebarToggleBtn, .sidebar-toggle-btn { position: relative; isolation: isolate; --button-background-color: var(--button-bg-hover-light); --button-background-color-active: var(--button-bg-hover-light); --scale: 0.98; } .sidebar-action::before, #sidebarToggleBtn::before, .sidebar-toggle-btn::before { position: absolute; inset: 0; display: block; border-radius: inherit; background-color: var(--button-background-color); content: ""; opacity: 0; transform: scale(1); z-index: -1; pointer-events: none; } .sidebar-action:hover::before, #sidebarToggleBtn:hover::before, .sidebar-toggle-btn:hover::before { opacity: 1; transform: scale(1); } .sidebar-action:hover, #sidebarToggleBtn:hover, .sidebar-toggle-btn:hover { background: transparent !important; box-shadow: none !important; } .sidebar-action > *, #sidebarToggleBtn > *, .sidebar-toggle-btn > * { position: relative; z-index: 1; } .sidebar-action:active::before, #sidebarToggleBtn:active::before, .sidebar-toggle-btn:active::before { opacity: 1; transform: scale(var(--scale)); background-color: var(--button-background-color-active); } .sidebar-footer { position: relative; isolation: isolate; } .sidebar-footer::before { content: ""; position: absolute; inset: 4px 8px; border-radius: 12px; background: transparent; opacity: 0; pointer-events: none; z-index: 0; } .sidebar .sidebar-footer:hover::before { opacity: 1; background: var(--surface); } .sidebar-footer.menu-open::before { opacity: 1; background: var(--surface); } /* Override: Account menu width and layout */ #accountMenu { width: 272px !important; padding: 6px 8px !important; text-align: left !important; } /* Left-align account menu buttons like standard buttons */ #accountMenu button[role="menuitem"] { width: 100% !important; margin: 0 !important; border-radius: 18px !important; padding: 8px 10px !important; justify-content: flex-start !important; } /* Header row (icon + account email) alignment to match buttons */ #accountMenu > div:first-child { padding: 8px 10px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; } #accountMenu > div:first-child svg { width: 20px !important; height: 20px !important; display: block !important; } #accountMenu > div:first-child img { width: 20px !important; height: 20px !important; display: block !important; } #accountMenu #accountMenuEmail { text-align: left !important; } #accountMenuEmailContainer:hover { background: var(--button-bg-hover-light) !important; border-radius: 18px; } .sources-list { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); } .sources-title { font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); } .sources-list ol { margin: 0; padding-left: 20px; } .sources-list .source-item a { color: var(--accent, #60a5fa); text-decoration: none; } .sources-list .source-item a:hover { text-decoration: underline; } .message-text a { color: var(--anchor, var(--accent, #60a5fa)); text-decoration: none; font-weight: 400; } .message-text a:hover { color: var(--anchor-hover, var(--accent-hover, #3b82f6)); } .message-text del { opacity: 0.8; } .message-text img.md-img { max-width: 100%; height: auto; border-radius: 6px; cursor: pointer; } .message-text > p > img:only-child { cursor: pointer; } .cosmos-image-gallery { display: grid; gap: 4px; border-radius: 8px; overflow: hidden; max-width: 480px; margin: 8px 0; } .cosmos-image-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; border-radius: 0; max-width: none; } .cosmos-image-gallery .gallery-cell { position: relative; overflow: hidden; border-radius: 8px; min-height: 0; } .cosmos-image-gallery[data-count="1"] { grid-template-columns: 1fr; } .cosmos-image-gallery[data-count="1"] .gallery-cell { max-height: 360px; } .cosmos-image-gallery[data-count="1"] img { object-fit: contain; } .cosmos-image-gallery[data-count="2"] { grid-template-columns: 1fr 1fr; } .cosmos-image-gallery[data-count="2"] .gallery-cell { height: 240px; } .cosmos-image-gallery[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 360px; } .cosmos-image-gallery[data-count="3"] .gallery-cell:first-child { grid-row: 1 / 3; } .cosmos-image-gallery[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px; } .gallery-cell .gallery-more-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: #ffffff; pointer-events: none; letter-spacing: -0.02em; } @media (max-width: 480px) { .cosmos-image-gallery { max-width: 100%; } .cosmos-image-gallery[data-count="2"] .gallery-cell { height: 180px; } .cosmos-image-gallery[data-count="3"] { height: 280px; } .cosmos-image-gallery[data-count="4"] { grid-template-rows: 180px 180px; } } /* === block lines 7298-7301 === */ /* Chat header font unified to Default */ .chat-info, .chat-info * { font-family: 'Default', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important; font-weight: 300 !important; } /* === block lines 7302-7315 === */ .menu-toggle.active .icon { transform: rotate(90deg) scale(1.05); } .menu-toggle:active { transform: scale(0.96); } @media (prefers-reduced-motion: reduce) { .menu-toggle:active { transform: none; } } @media (max-width: 768px) { .sidebar { will-change: transform; } .sidebar.open { box-shadow: 0 10px 40px rgba(0,0,0,0.35); } /* Hide sidebar toggle on mobile */ #sidebarToggleBtn, .sidebar-toggle-btn { display: none !important; } } /* === block lines 7562-7631 === */ .report-checkbox-wrapper { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .report-checkbox-wrapper span { color: var(--text-primary); font-size: 14px; pointer-events: none; } @supports (-webkit-appearance: none) or (-moz-appearance: none) { .report-checkbox-wrapper input[type=checkbox] { --active: #ef4444; --active-inner: #fff; --border: #555; --border-hover: #ef4444; --background: transparent; -webkit-appearance: none; -moz-appearance: none; height: 21px; width: 21px; min-width: 21px; outline: none; display: inline-block; vertical-align: top; position: relative; margin: 0; cursor: pointer; border: 1px solid var(--bc, var(--border)); background: var(--b, var(--background)); border-radius: 7px; } .report-checkbox-wrapper input[type=checkbox]:after { content: ""; display: block; position: absolute; opacity: var(--o, 0); width: 5px; height: 9px; border: 2px solid var(--active-inner); border-top: 0; border-left: 0; left: 6.5px; top: 2.5px; transform: rotate(43deg); } .report-checkbox-wrapper input[type=checkbox]:checked { --b: var(--active); --bc: var(--active); --o: 1; } .report-checkbox-wrapper input[type=checkbox]:hover:not(:checked) { --bc: var(--border-hover); } } #reportAbuseCancel:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.3) !important; } #reportAbuseCancel:active { transform: scale(0.95); } #reportAbuseSend:not([style*="pointer-events: none"]):hover, #reportAbuseSend:not([style*="pointer-events:none"]):hover { filter: brightness(1.1); } #reportAbuseSend:active { transform: scale(0.95); }