/* --- SEMANTIC COLOR TOKENS --- */
:root, body:not(.dark) {
  --hue-dark: #292929;
  --hue-grey: #989898;
  --hue-grey-500: #7C7C7C;
  --hue-grey-400: #656565;
  --hue-grey-300: #ECECEC;
  --hue-grey-200: #DCDCDC;
  --hue-grey-100: #525252;
  --hue-light-blue: #3EA2FF;
  --hue-blue-100: #F0F3FD;
  --hue-white: #fff;
  --hue-halfwhite: #F8F8F8;
  --custom-border: rgba(0, 0, 0, 0.06);
  --custom-border-strong: rgba(0, 0, 0, 0.08);
  --custom-hover: rgba(0, 0, 0, 0.035);
  --custom-hover-strong: rgba(0, 0, 0, 0.04);
  --custom-pressed: rgba(0, 0, 0, 0.08);
  --custom-active: rgba(0, 0, 0, 0.05);
  --custom-shadow-sm: rgba(0, 0, 0, 0.12);
  --custom-shadow-md: rgba(0, 0, 0, 0.18);
  --custom-shadow-lg: rgba(0, 0, 0, 0.14);
  --custom-shadow-lg2: rgba(0, 0, 0, 0.08);
  --custom-shadow-menu: rgba(0, 0, 0, 0.12);
  --custom-shadow-menu2: rgba(0, 0, 0, 0.06);
  --custom-shadow-tip: rgba(0, 0, 0, 0.12);
  --custom-shadow-tip-border: rgba(0, 0, 0, 0.08);
  --custom-scrollbar-track: #F5F8FA;
  --custom-scrollbar-thumb: #E4E6EF;
  --custom-scrollbar-thumb-hover: #B5B5C3;
}

body.dark {
  --hue-dark: #E0E0E0;
  --hue-grey: #888888;
  --hue-grey-500: #AAAAAA;
  --hue-grey-400: #BBBBBB;
  --hue-grey-300: #3A3A3A;
  --hue-grey-200: #4A4A4A;
  --hue-grey-100: #CCCCCC;
  --hue-light-blue: #5BB8FF;
  --hue-blue-100: #1A2333;
  --hue-white: #303030;
  --hue-halfwhite: #272727;
  --custom-border: rgba(255, 255, 255, 0.06);
  --custom-border-strong: rgba(255, 255, 255, 0.08);
  --custom-hover: rgba(255, 255, 255, 0.035);
  --custom-hover-strong: rgba(255, 255, 255, 0.04);
  --custom-pressed: rgba(255, 255, 255, 0.08);
  --custom-active: rgba(255, 255, 255, 0.05);
  --custom-shadow-sm: rgba(0, 0, 0, 0.25);
  --custom-shadow-md: rgba(0, 0, 0, 0.35);
  --custom-shadow-lg: rgba(0, 0, 0, 0.3);
  --custom-shadow-lg2: rgba(0, 0, 0, 0.15);
  --custom-shadow-menu: rgba(0, 0, 0, 0.25);
  --custom-shadow-menu2: rgba(0, 0, 0, 0.12);
  --custom-shadow-tip: rgba(0, 0, 0, 0.25);
  --custom-shadow-tip-border: rgba(255, 255, 255, 0.08);
  --custom-scrollbar-track: #1b1b1b;
  --custom-scrollbar-thumb: #444;
  --custom-scrollbar-thumb-hover: #666;
  /* Theme accent colors — not redefined by Paper for dark mode */
  --c-secondary: rgb(50, 216, 213);
  --c-tertiary: rgb(255, 240, 50);
  --c-accent: rgb(255, 145, 50);
}

/* --- SHAPE & TYPOGRAPHY (theme-independent) --- */
.x-btn, .go-button {
  border-radius: 4px;
  font-weight: 400;
}

.x-form-field {
  border-radius: 4px;
}

.x-html-editor-wrap {
  border-radius: 4px;
}

.x-window {
  border-radius: 4px;
}

body, input, select, textarea, button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- PRIMARY BUTTON --- */
.x-btn.primary, .primary.go-button {
  background-color: var(--c-primary);
  color: white;
  border-color: var(--c-primary);
  border-radius: 6px;
  box-shadow: 0 1px 3px var(--custom-shadow-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.x-btn.primary button, .primary.go-button button {
  padding: 8px;
  font-size: 15px;
  font-weight: 600;
}

.x-btn.primary:hover, .primary.go-button:hover {
  box-shadow: 0 2px 6px var(--custom-shadow-md);
  filter: brightness(1.08);
}

/* --- LOADING INDICATOR --- */
.loading-indicator {
  font-weight: 500;
  color: var(--c-primary);
  animation: pulse-opacity 1.2s ease-in-out infinite;
}

body.dark .loading-indicator {
  color: var(--hue-light-blue);
}

@keyframes pulse-opacity {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- SCROLLBARS --- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

textarea::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

textarea::-webkit-scrollbar-track {
  background: transparent;
}

textarea::-webkit-scrollbar-thumb {
  background-color: var(--custom-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover);
}

iframe {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

iframe::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

iframe::-webkit-scrollbar-track {
  background: transparent;
}

iframe::-webkit-scrollbar-thumb {
  background-color: var(--custom-scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 4px;
}

iframe::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover);
}

html,
body,
.x-panel-body,
.x-grid3-scroller,
.x-tree-root-ct,
.x-tab-panel-body,
.message-body,
.go-html-formatted,
textarea,
iframe {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

html:hover,
html:focus-within,
body:hover,
body:focus-within,
.x-panel-body:hover,
.x-panel-body:focus-within,
.x-grid3-scroller:hover,
.x-grid3-scroller:focus-within,
.x-tree-root-ct:hover,
.x-tree-root-ct:focus-within,
.x-tab-panel-body:hover,
.x-tab-panel-body:focus-within,
.message-body:hover,
.message-body:focus-within,
.go-html-formatted:hover,
.go-html-formatted:focus-within,
textarea:hover,
textarea:focus,
iframe:hover,
iframe:focus {
  scrollbar-color: var(--custom-scrollbar-thumb) transparent;
}

html:hover::-webkit-scrollbar-thumb,
html:focus-within::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb,
body:focus-within::-webkit-scrollbar-thumb,
.x-panel-body:hover::-webkit-scrollbar-thumb,
.x-panel-body:focus-within::-webkit-scrollbar-thumb,
.x-grid3-scroller:hover::-webkit-scrollbar-thumb,
.x-grid3-scroller:focus-within::-webkit-scrollbar-thumb,
.x-tree-root-ct:hover::-webkit-scrollbar-thumb,
.x-tree-root-ct:focus-within::-webkit-scrollbar-thumb,
.x-tab-panel-body:hover::-webkit-scrollbar-thumb,
.x-tab-panel-body:focus-within::-webkit-scrollbar-thumb,
.message-body:hover::-webkit-scrollbar-thumb,
.message-body:focus-within::-webkit-scrollbar-thumb,
.go-html-formatted:hover::-webkit-scrollbar-thumb,
.go-html-formatted:focus-within::-webkit-scrollbar-thumb,
textarea:hover::-webkit-scrollbar-thumb,
textarea:focus::-webkit-scrollbar-thumb,
iframe:hover::-webkit-scrollbar-thumb,
iframe:focus::-webkit-scrollbar-thumb {
  background-color: var(--custom-scrollbar-thumb);
}

html:hover::-webkit-scrollbar-thumb:hover,
html:focus-within::-webkit-scrollbar-thumb:hover,
body:hover::-webkit-scrollbar-thumb:hover,
body:focus-within::-webkit-scrollbar-thumb:hover,
.x-panel-body:hover::-webkit-scrollbar-thumb:hover,
.x-panel-body:focus-within::-webkit-scrollbar-thumb:hover,
.x-grid3-scroller:hover::-webkit-scrollbar-thumb:hover,
.x-grid3-scroller:focus-within::-webkit-scrollbar-thumb:hover,
.x-tree-root-ct:hover::-webkit-scrollbar-thumb:hover,
.x-tree-root-ct:focus-within::-webkit-scrollbar-thumb:hover,
.x-tab-panel-body:hover::-webkit-scrollbar-thumb:hover,
.x-tab-panel-body:focus-within::-webkit-scrollbar-thumb:hover,
.message-body:hover::-webkit-scrollbar-thumb:hover,
.message-body:focus-within::-webkit-scrollbar-thumb:hover,
.go-html-formatted:hover::-webkit-scrollbar-thumb:hover,
.go-html-formatted:focus-within::-webkit-scrollbar-thumb:hover,
textarea:hover::-webkit-scrollbar-thumb:hover,
textarea:focus::-webkit-scrollbar-thumb:hover,
iframe:hover::-webkit-scrollbar-thumb:hover,
iframe:focus::-webkit-scrollbar-thumb:hover {
  background-color: var(--custom-scrollbar-thumb-hover);
}

/* --- SUBTLE TRANSITIONS --- */
.x-grid3-row,
.x-tree-node-el,
.x-btn,
.go-button {
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

/* --- GRID / EMAIL LIST --- */
.x-grid3-row {
  border-bottom-color: var(--custom-border);
}

.x-grid3-row:hover {
  background: #f0f2fe;
}

.x-grid3-row-selected,
.x-grid3-row-selected:hover {
  background: #d2e4fc !important;
}

.ea-message-row-actions {
  background: #ffffff;
}

.x-grid3-row:hover .ea-message-row-actions {
  background: #f0f2fe;
}

.x-grid3-row-selected .ea-message-row-actions,
.x-grid3-row-selected:hover .ea-message-row-actions {
  background: #d2e4fc;
}

body.dark .x-grid3-row:hover {
  background: #2a3347;
}

body.dark .x-grid3-row-selected,
body.dark .x-grid3-row-selected:hover {
  background: #344766 !important;
}

body.dark .ea-previewlayout-grid .x-grid3-row-selected,
body.dark .ea-previewlayout-grid .x-grid3-row-selected:hover {
  background: #344766 !important;
}

body.dark .ea-message-row-actions {
  background: #1f2430;
}

body.dark .x-grid3-row:hover .ea-message-row-actions {
  background: #2a3347;
}

body.dark .x-grid3-row-selected .ea-message-row-actions,
body.dark .x-grid3-row-selected:hover .ea-message-row-actions {
  background: #344766;
}


.ml-unseen-from {
  font-weight: 600;
  color: var(--fg-base);
}

.ml-unseen-dot {
  width: 8px;
  height: 8px;
  background-color: var(--c-accent, var(--c-primary));
}

body.dark .ml-unseen-dot {
  background-color: var(--c-accent, var(--hue-light-blue));
}

/* --- FOLDER TREE --- */
.x-tree-node-el {
  border-radius: 5px;
  border: 1px solid transparent;
}

.x-tree-node-el:hover,
.x-tree-node-el.x-tree-selected {
  border-color: var(--hue-grey-200);
}

.x-tree-node a {
  font-weight: 600;
  color: var(--hue-grey-100);
}

.x-tree-node-el:hover a,
.x-tree-node-el.x-tree-selected a {
  color: var(--hue-dark) !important;
}

.x-tree-node-el:hover .x-tree-node-icon,
.x-tree-node-el.x-tree-selected .x-tree-node-icon {
  color: var(--hue-dark) !important;
}

.x-tree-node-ct .x-tree-node-icon {
  color: var(--hue-grey-500) !important;
}

/* --- TAB STRIP --- */
.x-tab-strip-wrap {
  border-bottom: 1px solid var(--custom-border-strong);
}

.x-tab-strip > li {
  border-bottom-width: 2.5px;
}

.x-tab-strip > li.x-tab-strip-active {
  border-color: var(--c-tertiary) !important;
}

.go-tab-notification {
  border-radius: 10px;
  font-size: 10px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
  font-weight: 600;
  line-height: 16px;
}

/* --- MAIN TOP NAV --- */
.go-main-tab-panel.x-tab-panel {
  --ea-topnav-tab-margin-x: 1px;
  --ea-topnav-link-padding-x: 8px;
  --ea-topnav-icon-padding-left: 6px;
  --ea-topnav-icon-gap: 6px;
  --ea-topnav-badge-margin-left: 3px;
  --ea-topnav-badge-padding-x: 6px;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header {
  background: transparent !important;
  border: 0 !important;
}

.go-main-tab-panel.x-tab-panel.ea-topnav-pending > .x-tab-panel-header .x-tab-strip-wrap {
  opacity: 0;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip-wrap,
.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip {
  border: 0 !important;
  background: transparent !important;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip-wrap {
  box-sizing: border-box;
  padding-right: 0;
}

#mainNorthPanel .go-header-right {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}

#secondary-menu {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

#search_query,
#global-add-btn,
#start-menu-link {
  height: 100% !important;
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

#global-search-panel,
#global-add-btn > *,
#start-menu-link > * {
  margin-top: 0 !important;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-scroller-left,
.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-scroller-right {
  z-index: 3;
  background: color-mix(in srgb, var(--c-header-bg, var(--c-primary)) 92%, black 8%);
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-scroller-left {
  border-top-left-radius: 10px;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-scroller-right {
  border-top-right-radius: 10px;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li {
  position: relative;
  margin: 11px var(--ea-topnav-tab-margin-x, 1px) 0;
  min-width: 0;
  max-width: none;
  height: 32px;
  line-height: 32px;
  padding: 0 !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li a.x-tab-right {
  display: block;
  border-radius: 10px;
  padding: 0 var(--ea-topnav-link-padding-x, 8px);
  background: transparent;
  color: inherit !important;
  transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li.x-tab-with-icon a.x-tab-right {
  padding-left: var(--ea-topnav-icon-padding-left, 6px);
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li .x-tab-left {
  padding-left: 0;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip-text {
  display: inline-flex;
  align-items: center;
  gap: var(--ea-topnav-icon-gap, 6px);
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 32px;
  padding: 0 !important;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip-text::before {
  display: inline-block;
  font-family: "Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  color: currentColor;
  width: auto;
  height: auto;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: middle;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-icon-addressbook::before {
  content: "import_contacts";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-icon-notes::before {
  content: "speaker_notes";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-icon-tasks::before {
  content: "check_box";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-icon-easymeet::before {
  content: "group";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-icon-zulip::before {
  content: "forum";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-icon-calendar::before {
  content: "event";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-icon-email::before {
  content: "mail";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-icon-files::before {
  content: "folder_open";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-icon-history::before {
  content: "history";
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li:hover,
.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li.x-tab-strip-over {
  color: rgba(255, 255, 255, 0.94) !important;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li:hover a.x-tab-right,
.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li.x-tab-strip-over a.x-tab-right {
  background: color-mix(in srgb, var(--c-header-bg, var(--c-primary)) 90%, white 10%);
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li.x-tab-strip-active {
  color: #fff !important;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li.x-tab-strip-active a.x-tab-right {
  background: color-mix(in srgb, var(--c-header-bg, var(--c-primary)) 84%, white 16%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 0 rgba(0, 0, 0, 0.08);
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li.x-tab-strip-active .x-tab-strip-text,
.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .x-tab-strip > li.x-tab-strip-active a.x-tab-right {
  color: #fff !important;
}

.go-main-tab-panel.x-tab-panel > .x-tab-panel-header .go-tab-notification {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--ea-topnav-badge-margin-left, 3px);
  min-width: 20px;
  padding: 0 var(--ea-topnav-badge-padding-x, 6px);
  height: 20px;
  line-height: 18px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* --- TOOLBAR --- */
.x-panel-tbar {
  border-bottom: 1px solid var(--custom-border);
  background: var(--hue-white);
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

/* --- ICON BUTTON HOVER ---
   Only apply hover background to icon buttons that are NOT inside
   a raised/primary/colored context (those have their own styling).
*/
.x-btn-icon:not(.raised):not(.primary) button:hover {
  background: var(--hue-grey-300);
  border-radius: 4px;
}

.x-btn-icon:not(.raised):not(.primary) button:active {
  background: var(--hue-grey-200);
}

/* Ensure icon buttons on colored/raised toolbars keep their icon visible */
.raised .x-btn-icon button,
.primary .x-btn-icon button,
.x-btn-icon.raised button,
.x-btn-icon.primary button {
  color: inherit;
}

/* --- MESSAGE READING PANE ---
   Header sits on the themed background — use theme-aware colors.
   Message body always renders on a white background — hardcode dark text.
*/
.message-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--custom-border-strong);
}

.message-header-table {
  margin-bottom: 4px;
}

.message-header-table tr {
  height: 26px;
}

.message-header-table td {
  color: var(--fg-secondary-text);
}

.message-header-table td b {
  font-weight: 600;
  color: var(--fg-text) !important;
}

.message-header-table td a {
  color: var(--hue-light-blue) !important;
}

/* --- MESSAGE NOTICES (blocked images, spam link) --- */
.go-warning-msg.em-blocked {
  color: var(--fg-text);
}

.go-warning-msg.em-blocked .normal-link {
  color: var(--hue-light-blue) !important;
}

.message-move {
  color: var(--fg-secondary-text);
}

.message-move a {
  color: var(--hue-light-blue) !important;
}

/* --- DARK MODE ICON & COLOR FIXES ---
   Users can pick a dark --c-primary that is invisible on dark backgrounds.
   Accent color classes use hardcoded values that don't adapt.
   Normalize all to consistent neutral grey in dark mode.
*/
body.dark .go-nav > div.x-view-selected {
  color: var(--fg-text);
}

body.dark .go-nav > div.x-view-selected i {
  color: var(--hue-grey-100);
}

body.dark i.c-primary,
body.dark span.c-primary[class*="ic-"] {
  color: var(--hue-grey-100) !important;
}

body.dark .c-secondary {
  color: var(--hue-grey-100) !important;
}

/* --- DATE PICKER (dark mode) --- */
body.dark .x-date-inner .x-date-disabled a {
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.3);
}

body.dark .x-date-inner .x-date-prevday a,
body.dark .x-date-inner .x-date-nextday a {
  color: rgba(255, 255, 255, 0.3);
}

body.dark .x-date-mmenu {
  background-color: var(--bg-layer) !important;
}

/* --- PANEL DIVIDERS --- */
.x-border-panel {
  border-color: var(--custom-border-strong);
}

/* --- WINDOWS & DIALOGS --- */
.x-window {
  box-shadow: 0 8px 32px var(--custom-shadow-lg), 0 2px 8px var(--custom-shadow-lg2);
}

/* --- MENUS --- */
.x-menu {
  border-radius: 4px;
  box-shadow: 0 4px 16px var(--custom-shadow-menu), 0 1px 4px var(--custom-shadow-menu2);
  border: 1px solid var(--custom-border-strong);
  overflow: hidden;
}

.x-menu-item-active {
  background-color: var(--custom-active);
  border-radius: 2px;
}

/* --- PAGING TOOLBAR --- */
.x-toolbar.x-small-editor.go-paging-tb {
  color: var(--hue-grey-400);
}

.x-paging-info {
  color: var(--fg-secondary-text);
  font-size: 12px;
}

/* --- FORM FOCUS ---
   In dark mode, user's --c-primary may be too dark for a visible
   focus ring. Use a guaranteed-bright color instead.
*/
.x-form-focus {
  border-color: var(--c-primary) !important;
  border-width: 2px !important;
}

body.dark .x-form-focus {
  border-color: var(--hue-light-blue) !important;
}

/* --- GROUP HEADERS --- */
.x-grid-group-hd div.x-grid-group-title {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-secondary-text);
  padding: 8px 12px 4px;
}

/* --- TOOLTIPS --- */
.x-tip {
  border-radius: 4px;
  box-shadow: 0 4px 12px var(--custom-shadow-tip);
  border: 1px solid var(--custom-shadow-tip-border);
}

/* --- SPLITTERS --- */
.x-layout-split {
  background-color: transparent;
  border-color: var(--custom-border);
}

/* --- CLICK STATE --- */
.x-btn-focus.x-btn-click {
  background-color: var(--hue-grey-200) !important;
}

.x-btn-click.primary .x-btn-text {
  color: white;
}

/* --- WINDOW RESIZE HANDLE --- */
.x-window .x-resizable-handle-east {
  right: -6px;
  width: 8px;
}

/* --- MAIL MODULE SURFACES ---
   Mail now needs to support two runtime layout families:
   - legacy: the original GO owner/split path
   - workspace: previewlayout's synthetic center workspace panel

   Keep the theme split simple:
   - the shell/tree/list chrome may follow light/dark theme
   - the actual email message content is left to its own HTML/CSS
*/
#go-module-panel-email {
  --mail-shell-bg: #f5f7fa;
  --mail-tree-bg: #f5f7fa;
  --mail-panel-bg: #ffffff;
  --mail-divider: rgba(15, 23, 42, 0.06);
  --mail-workspace-radius: 20px;
  --mail-gutter: 10px;
  --mail-header-blend: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    color-mix(in srgb, var(--c-header-bg, var(--c-primary)) 78%, white 22%) 34%,
    color-mix(in srgb, var(--c-header-bg, var(--c-primary)) 46%, white 54%) 74%,
    rgba(255, 255, 255, 0.92) 100%
  );
}

body.dark #go-module-panel-email {
  --mail-shell-bg: #252a33;
  --mail-tree-bg: #252a33;
  --mail-panel-bg: #2c313b;
  --mail-divider: rgba(255, 255, 255, 0.08);
  --mail-header-blend: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    color-mix(in srgb, var(--c-header-bg, var(--c-primary)) 82%, black 18%) 34%,
    color-mix(in srgb, var(--c-header-bg, var(--c-primary)) 52%, black 48%) 74%,
    rgba(32, 36, 44, 0.92) 100%
  );
}

/* Shared module shell */
#go-module-panel-email,
#go-module-panel-email > .x-panel-bwrap,
#go-module-panel-email > .x-panel-bwrap > .x-panel-body {
  background: var(--mail-shell-bg) !important;
}

#go-module-panel-email > .x-panel-bwrap > .x-panel-body,
#go-module-panel-email > .x-panel-bwrap > .x-panel-body > .go-layout-responsive > .x-panel-bwrap > .x-panel-body {
  overflow: visible !important;
}

#go-module-panel-email > .x-panel-bwrap > .x-panel-body > .go-layout-responsive {
  top: 0 !important;
}

#go-module-panel-email .x-tab-panel-header {
  position: relative;
  overflow: visible !important;
}

#go-module-panel-email .x-tab-panel-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 24px;
  background: var(--mail-header-blend);
  pointer-events: none;
  z-index: 3;
}

#go-module-panel-email > .x-panel-bwrap > .x-panel-body > .x-panel,
#go-module-panel-email > .x-panel-bwrap > .x-panel-body > .x-panel > .x-panel-bwrap,
#go-module-panel-email > .x-panel-bwrap > .x-panel-body > .x-panel > .x-panel-bwrap > .x-panel-body {
  background: var(--mail-shell-bg) !important;
}

#go-module-panel-email > .x-panel-bwrap > .x-panel-body > .x-panel {
  top: 10px !important;
}

/* Tree column keeps the flatter shell treatment in both variants. */
#email-tree-panel,
#email-tree-panel > .x-panel-bwrap,
#email-tree-panel > .x-panel-bwrap > .x-panel-body,
#email-tree-panel .x-panel-tbar,
#email-tree-panel .x-toolbar,
#email-tree-panel .x-toolbar-ct {
  background: var(--mail-tree-bg) !important;
}

#email-tree-panel .x-panel-tbar,
#email-tree-panel .x-toolbar,
#email-tree-panel .x-toolbar-ct {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#email-tree-panel > .x-panel-bwrap {
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

#email-tree-panel .x-panel-tbar td.x-toolbar-left {
  width: 100%;
}

#email-tree-panel .x-panel-tbar td.x-toolbar-left > table {
  margin: 0 auto;
}

#email-tree-panel .x-panel-tbar .x-btn.primary,
#email-tree-panel .x-panel-tbar .primary.go-button {
  width: 200px !important;
  max-width: 200px !important;
}

#email-tree-panel .x-panel-tbar .x-btn.primary .x-btn-small,
#email-tree-panel .x-panel-tbar .x-btn.primary .x-btn-mc,
#email-tree-panel .x-panel-tbar .primary.go-button button {
  width: 100%;
}

/* Shared message list / preview card chrome used in both layout families. */
#em-pnl-west,
#email-message-panel {
  z-index: 2;
}

#email-message-panel {
  background: transparent !important;
}

#em-pnl-west > .x-panel-bwrap,
#email-message-panel > .x-panel-bwrap {
  border: 0 !important;
  border-radius: var(--mail-workspace-radius) !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden;
}

#em-pnl-west > .x-panel-bwrap {
  background: var(--mail-panel-bg) !important;
  margin-right: 0;
}

#email-message-panel > .x-panel-bwrap {
  background: var(--mail-panel-bg) !important;
  position: relative;
  margin-left: 0;
}

.ea-sendlater-preview-shell > .x-panel-bwrap {
  border: 0 !important;
  border-radius: var(--mail-workspace-radius) !important;
  box-shadow: none !important;
  outline: none !important;
  background: var(--mail-panel-bg) !important;
  overflow: hidden;
  position: relative;
  margin-left: 0;
}

#em-pnl-west .x-panel-tbar,
#em-pnl-west .x-toolbar,
#em-pnl-west .x-panel-body,
#em-pnl-west .x-grid3,
#em-pnl-west .x-grid3-header,
#em-pnl-west .x-grid3-scroller,
#em-pnl-west .x-grid3-body,
#email-message-panel > .x-panel-bwrap > .x-panel-tbar,
#email-message-panel > .x-panel-bwrap > .x-panel-body,
#email-message-panel .x-panel-body,
#email-message-panel .x-panel-tbar,
#email-message-panel .x-toolbar,
#email-message-panel .x-toolbar-ct,
#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap > .x-panel-tbar,
#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap > .x-panel-body,
#go-module-panel-email .ea-sendlater-preview-shell .x-panel-body,
#go-module-panel-email .ea-sendlater-preview-shell .x-panel-tbar,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-ct,
#email-message-panel .message-header,
#email-message-panel .message-move {
  background: var(--mail-panel-bg) !important;
}

#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap > .x-panel-body {
  border-bottom-left-radius: var(--mail-workspace-radius) !important;
  border-bottom-right-radius: var(--mail-workspace-radius) !important;
}

#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap > .x-panel-tbar,
#go-module-panel-email .ea-sendlater-preview-shell .x-panel-tbar,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-ct {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#go-module-panel-email .ea-sendlater-preview-shell .message-move {
  display: none !important;
}

#go-module-panel-email #ea-mail-workspace-mailbox-host > .x-panel-bwrap,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap {
  border-radius: var(--mail-workspace-radius) !important;
  overflow: hidden !important;
}

#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-tbar,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-tbar > .x-toolbar,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-tbar .x-toolbar-ct,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-tbar td.x-toolbar-right,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-tbar .x-toolbar-right-ct {
  border-top-right-radius: var(--mail-workspace-radius) !important;
  border-top-left-radius: var(--mail-workspace-radius) !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-bbar,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-bbar > .x-toolbar,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-bbar .x-toolbar-ct,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-bbar .x-toolbar-left,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-bbar .x-toolbar-right,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-bbar .x-toolbar-right-ct,
#go-module-panel-email #ea-mail-workspace-mailbox-host .x-grid-panel > .x-panel-bwrap > .x-panel-bbar table.x-toolbar-ct {
  background: var(--mail-panel-bg) !important;
}

#em-pnl-west .x-panel-tbar {
  border-bottom-color: var(--mail-divider) !important;
  border-top-left-radius: var(--mail-workspace-radius) !important;
  border-top-right-radius: var(--mail-workspace-radius) !important;
}

#em-pnl-west .x-grid3-header {
  box-shadow: inset 0 -1px 0 var(--mail-divider);
}

#email-message-panel,
#email-message-panel > .x-panel-bwrap,
#email-message-panel > .x-panel-bwrap > .x-panel-body,
#email-message-panel .x-panel-body,
#go-module-panel-email .ea-sendlater-preview-shell,
#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap,
#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap > .x-panel-body,
#go-module-panel-email .ea-sendlater-preview-shell .x-panel-body {
  border-left: 0 !important;
  box-shadow: none !important;
}

#email-message-panel > .x-panel-bwrap::before {
  display: none;
}

#email-message-panel > .x-panel-bwrap > .x-panel-tbar,
#email-message-panel .x-toolbar,
#email-message-panel .x-toolbar-ct,
#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap > .x-panel-tbar,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-ct {
  border-top-left-radius: var(--mail-workspace-radius) !important;
  border-top-right-radius: var(--mail-workspace-radius) !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap > .x-panel-tbar {
  clip-path: inset(0 round var(--mail-workspace-radius) var(--mail-workspace-radius) 0 0);
}

#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-left,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-right,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-right-ct,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-ct,
#go-module-panel-email .ea-sendlater-preview-shell table.x-toolbar-ct {
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  background-clip: padding-box !important;
}

#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-left,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-right,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-right-ct,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-left table,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-right table,
#go-module-panel-email .ea-sendlater-preview-shell .x-toolbar-ct > tbody > tr > td {
  overflow: hidden !important;
}

/* Keep the chrome clean without stripping borders from the actual email HTML tables. */
#email-tree-panel .x-panel-body,
#email-message-panel .x-panel-body,
#email-message-panel .x-panel-tbar,
#email-message-panel .x-toolbar,
#email-message-panel .x-toolbar-ct,
#email-message-panel > .x-panel-bwrap > .x-panel-tbar,
#email-message-panel > .x-panel-bwrap > .x-panel-body,
#email-message-panel > .x-panel-bwrap > .x-panel-body > .message-header,
#email-message-panel > .x-panel-bwrap > .x-panel-body > .message-move,
#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap > .x-panel-body > .message-header,
#go-module-panel-email .ea-sendlater-preview-shell > .x-panel-bwrap > .x-panel-body > .message-move,
#email-message-panel .message-header table,
#email-message-panel .message-header td,
#go-module-panel-email .ea-sendlater-preview-shell .message-header table,
#go-module-panel-email .ea-sendlater-preview-shell .message-header td,
#email-message-panel .message-move table,
#email-message-panel .message-move td,
#go-module-panel-email .ea-sendlater-preview-shell .message-move table,
#go-module-panel-email .ea-sendlater-preview-shell .message-move td {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Workspace variant:
   previewlayout owns a synthetic center workspace panel here, so the gutter
   and hidden split-bar tricks belong only to this branch.

   Fallback/default path:
   if previewlayout has not added variant classes yet, but the synthetic
   center panel exists in the DOM, treat that runtime as workspace too.
*/
#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel {
  position: absolute !important;
  border-radius: var(--mail-workspace-radius) !important;
  overflow: hidden !important;
}

#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel,
#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel > .x-panel-bwrap,
#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body,
#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body.x-border-layout-ct,
#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel .x-panel-body.x-panel-body-noheader.x-panel-body-noborder,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel > .x-panel-bwrap,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body.x-border-layout-ct,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel .x-panel-body.x-panel-body-noheader.x-panel-body-noborder {
  background: transparent !important;
}

#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel > .x-panel-bwrap,
#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body,
#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body.x-border-layout-ct,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel > .x-panel-bwrap,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body.x-border-layout-ct {
  border-radius: var(--mail-workspace-radius) !important;
  overflow: hidden !important;
}

#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body.x-border-layout-ct,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-panel > .x-panel-bwrap > .x-panel-body.x-border-layout-ct {
  box-sizing: border-box !important;
  padding: 0 var(--mail-gutter) var(--mail-gutter) 0 !important;
}

#go-module-panel-email.ea-previewlayout-variant-workspace .x-layout-split,
#go-module-panel-email.ea-previewlayout-variant-workspace .x-layout-split-west,
#go-module-panel-email.ea-previewlayout-variant-workspace .x-layout-split-east,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) .x-layout-split,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) .x-layout-split-west,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) .x-layout-split-east {
  background: transparent !important;
  border: none !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  text-indent: -9999px;
  transition: none !important;
}

#go-module-panel-email.ea-previewlayout-variant-workspace .x-layout-split:hover,
#go-module-panel-email.ea-previewlayout-variant-workspace .x-layout-split-west:hover,
#go-module-panel-email.ea-previewlayout-variant-workspace .x-layout-split-east:hover,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) .x-layout-split:hover,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) .x-layout-split-west:hover,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) .x-layout-split-east:hover {
  background: transparent !important;
  opacity: 0 !important;
}

#go-module-panel-email.ea-previewlayout-variant-workspace #em-pnl-west-xsplit,
#go-module-panel-email.ea-previewlayout-variant-workspace #ea-mail-workspace-mailbox-host-xsplit,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #em-pnl-west-xsplit,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel) #ea-mail-workspace-mailbox-host-xsplit {
  opacity: 1 !important;
  background: var(--mail-tree-bg) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  width: var(--mail-gutter) !important;
}

#go-module-panel-email.ea-previewlayout-variant-workspace.ea-previewlayout-mode-right #email-message-panel > .x-panel-bwrap,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel).ea-previewlayout-mode-right #email-message-panel > .x-panel-bwrap {
  margin-left: 0;
  box-shadow: none !important;
}

#go-module-panel-email.ea-previewlayout-variant-workspace.ea-previewlayout-mode-bottom #email-message-panel > .x-panel-bwrap,
#go-module-panel-email.ea-previewlayout-variant-workspace.ea-previewlayout-mode-none #email-message-panel > .x-panel-bwrap,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel).ea-previewlayout-mode-bottom #email-message-panel > .x-panel-bwrap,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel).ea-previewlayout-mode-none #email-message-panel > .x-panel-bwrap {
  margin-left: 0;
  box-shadow: none;
}

#go-module-panel-email.ea-previewlayout-variant-workspace.ea-previewlayout-mode-bottom #email-message-panel,
#go-module-panel-email.ea-previewlayout-variant-workspace.ea-previewlayout-mode-none #email-message-panel,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel).ea-previewlayout-mode-bottom #email-message-panel,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):has(#ea-mail-workspace-panel).ea-previewlayout-mode-none #email-message-panel {
  border-left: 0 !important;
}

/* GO's responsive west splitter is generated, so do not target its id. Clip
   the unnamed tree/list splitter's painted border so it cannot run through the
   rounded top-left corner of the message list card. */
#go-module-panel-email .x-layout-split-west.x-splitbar-h:not(#em-pnl-west-xsplit):not(#ea-mail-workspace-mailbox-host-xsplit) {
  -webkit-clip-path: inset(var(--mail-workspace-radius) 0 0 0);
  clip-path: inset(var(--mail-workspace-radius) 0 0 0) !important;
}

/* Legacy variant:
   keep GO's native owner/split path intact. The shared card styles still
   apply, but we do not inject the workspace-only gutter/padding tricks. */
#go-module-panel-email.ea-previewlayout-variant-legacy #email-message-panel > .x-panel-bwrap,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):not(:has(#ea-mail-workspace-panel)) #email-message-panel > .x-panel-bwrap {
  margin-left: 0;
  box-shadow: none;
}

#go-module-panel-email.ea-previewlayout-variant-legacy #email-message-panel,
#go-module-panel-email:not(.ea-previewlayout-variant-workspace):not(.ea-previewlayout-variant-legacy):not(:has(#ea-mail-workspace-panel)) #email-message-panel {
  border-left: 0 !important;
}