fix: refine panel appearance and shadow properties for better consistency across platforms

src/browser/base/content/zen-styles/zen-panel-ui.css

@@ -33,7 +33,7 @@ panel[type='arrow'][animate]:not([animate='open']) {
 }
 
 menupopup,
-panel {
+panel[type='arrow'] {
   @media (-moz-windows-mica-popups) {
     appearance: auto !important;
     -moz-default-appearance: menupopup;
@@ -47,4 +47,18 @@ panel {
       animation: none !important;
     }
   }
+
+  @media (-moz-platform: macos) {
+    appearance: auto !important;
+    -moz-default-appearance: menupopup;
+    /* We set the default background here, rather than on ::part(content),
+     * because otherwise it'd interfere with the native look. Non-native-looking
+     * popups should get their background via --panel-background */
+    background-color: Menu;
+    --panel-shadow-margin: 0px !important;
+    --panel-background: transparent !important;
+    --panel-border-color: transparent;
+    /* This should be kept in sync with GetMenuMaskImage() */
+    --panel-border-radius: 6px;
+  }
 }

src/browser/themes/shared/tabbrowser/ctrlTab-css.patch

@@ -1,13 +1,12 @@
 diff --git a/browser/themes/shared/tabbrowser/ctrlTab.css b/browser/themes/shared/tabbrowser/ctrlTab.css
-index 645467864db4a73b7addf3a57fa892beaf9a9614..ad2802872bd0c19ba402d9b9e1b56272ea14818c 100644
+index 645467864db4a73b7addf3a57fa892beaf9a9614..46907c1ac8a10e8aba8ad82530269b660add550d 100644
 --- a/browser/themes/shared/tabbrowser/ctrlTab.css
 +++ b/browser/themes/shared/tabbrowser/ctrlTab.css
-@@ -7,7 +7,7 @@
+@@ -12,6 +12,7 @@
- /* Ctrl-Tab */
- 
- #ctrlTab-panel {
--  appearance: none;
-+  appearance: none !important;
-   --panel-background: hsla(0,0%,40%,.85);
    --panel-color: white;
    --panel-border-color: transparent;
+   --panel-padding: 20px 10px 10px;
++  --panel-shadow-margin: 0;
+ }
+ 
+ @media (-moz-platform: macos) {

src/toolkit/themes/shared/popup-css.patch

@@ -1,5 +1,5 @@
 diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css
-index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..ebb312830670564175cc98f11af1b29b80711ceb 100644
+index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..ce49d7f6900a1184c9aed00c26bd7b42916482aa 100644
 --- a/toolkit/themes/shared/popup.css
 +++ b/toolkit/themes/shared/popup.css
 @@ -21,8 +21,8 @@ panel {
@@ -8,7 +8,7 @@ index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..ebb312830670564175cc98f11af1b29b
  
 -  --panel-shadow-margin: 0px;
 -  --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2);
-+  --panel-shadow-margin: 10px !important;
++  --panel-shadow-margin: 10px;
 +  --panel-shadow: var(--zen-big-shadow);
    -moz-window-input-region-margin: var(--panel-shadow-margin);
    margin: calc(-1 * var(--panel-shadow-margin));
@@ -22,24 +22,7 @@ index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..ebb312830670564175cc98f11af1b29b
  
      @media (prefers-contrast) {
        --panel-border-color: color-mix(in srgb, currentColor 60%, transparent);
-@@ -60,13 +58,14 @@ panel {
+@@ -208,7 +206,6 @@ panel:where([type="arrow"]) {
-   }
- 
-   @media (-moz-platform: macos) {
--    appearance: auto;
-+    appearance: auto !important;
-     -moz-default-appearance: menupopup;
-     /* We set the default background here, rather than on ::part(content),
-      * because otherwise it'd interfere with the native look. Non-native-looking
-      * popups should get their background via --panel-background */
-     background-color: Menu;
--    --panel-background: none;
-+    --panel-shadow-margin: 0px !important;
-+    --panel-background: transparent !important;
-     --panel-border-color: transparent;
-     /* This should be kept in sync with GetMenuMaskImage() */
-     --panel-border-radius: 6px;
-@@ -208,7 +207,6 @@ panel:where([type="arrow"]) {
      }
  
      &[animating] {