fix(terminal): keep toast fallback opaque on older browsers

src/renderer/src/components/terminal-pane/TerminalErrorToast.tsx

@@ -151,11 +151,11 @@ export function TerminalErrorToast({
   const showIssueLink =
     !ssh && !paneOwnerUnverified && !showDaemonRestart && !isExplainedTerminalError(error)
   const displayError = humanizeTerminalError(error)
-  const messageColor = paneOwnerUnverified
-    ? 'var(--popover-foreground)'
+  const tint = paneOwnerUnverified
+    ? null
     : ssh
-      ? 'color-mix(in srgb, var(--popover-foreground) 70%, var(--color-amber-500))'
-      : 'color-mix(in srgb, var(--popover-foreground) 70%, var(--destructive))'
+      ? 'color-mix(in srgb, var(--color-amber-500) 20%, var(--popover))'
+      : 'color-mix(in srgb, var(--destructive) 20%, var(--popover))'
   const [retrying, setRetrying] = useState(false)
   const [retryFailed, setRetryFailed] = useState(false)
   const [environmentFooter, setEnvironmentFooter] = useState<{
@@ -208,17 +208,14 @@ export function TerminalErrorToast({
         zIndex: 50,
         padding: '10px 14px',
         borderRadius: 6,
-        background: paneOwnerUnverified
-          ? 'var(--popover)'
-          : ssh
-            ? 'color-mix(in srgb, var(--color-amber-500) 20%, var(--popover))'
-            : 'color-mix(in srgb, var(--destructive) 20%, var(--popover))',
+        background: 'var(--popover)',
+        backgroundImage: tint ? `linear-gradient(${tint}, ${tint})` : undefined,
         border: paneOwnerUnverified
           ? '1px solid var(--color-amber-500)'
           : ssh
             ? '1px solid rgba(234, 179, 8, 0.35)'
             : '1px solid rgba(220, 38, 38, 0.4)',
-        color: messageColor,
+        color: 'var(--popover-foreground)',
         fontSize: 12,
         fontFamily: 'monospace',
         whiteSpace: 'pre-wrap',
@@ -245,7 +242,7 @@ export function TerminalErrorToast({
               )}{' '}
               <a
                 href="https://github.com/stablyai/orca/issues"
-                style={{ color: messageColor, textDecoration: 'underline' }}
+                style={{ color: 'inherit', textDecoration: 'underline' }}
               >
                 {translate(
                   'auto.components.terminal.pane.TerminalErrorToast.a7e2fd2699',
@@ -303,7 +300,7 @@ export function TerminalErrorToast({
           style={{
             background: 'none',
             border: 'none',
-            color: messageColor,
+            color: 'inherit',
             cursor: 'pointer',
             fontSize: 14,
             padding: '0 0 0 8px',