/* One compact navigation treatment across every workspace's top function strip. */
@media screen {
 #product-shell #workspace-function-rail{
  --strip-surface:#ffffff;--strip-track:#f5f7fa;--strip-border:#e4e9f0;
  --strip-text:#526078;--strip-hover:#eaf0f5;--strip-active:#e6f3ef;
  --strip-active-text:#106b5b;--strip-active-border:#c4e3d8;--strip-focus:#0d9488;
  background:var(--strip-surface)!important;border-bottom:1px solid var(--strip-border)!important;
  padding:6px 12px!important;min-height:50px!important;box-shadow:none;
 }
 #product-shell #workspace-function-rail .function-tabs{
  display:flex!important;flex-direction:row;flex-wrap:nowrap!important;align-items:center;
  gap:4px!important;min-height:36px!important;padding:3px!important;
  border:1px solid var(--strip-border);border-radius:10px;background:var(--strip-track);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#dce3eb transparent;
 }
 #product-shell #workspace-function-rail .function-tabs:hover{scrollbar-color:#9aa9ba transparent}
 #product-shell #workspace-function-rail .function-tab{
  position:relative;flex:0 0 auto;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;
  min-width:max-content!important;max-width:none;min-height:32px!important;height:32px!important;
  padding:6px 11px!important;gap:7px!important;margin:0;border:1px solid transparent!important;border-radius:7px!important;
  background:transparent!important;color:var(--strip-text)!important;
  font-size:12px!important;line-height:1.2!important;font-weight:500!important;letter-spacing:0;
  text-align:left;white-space:nowrap;text-decoration:none;box-shadow:none!important;
  transition:background-color .15s,color .15s,border-color .15s;
 }
 #product-shell #workspace-function-rail .function-tab:hover{
  background:var(--strip-hover)!important;color:var(--strip-active-text)!important;box-shadow:none!important;
 }
 #product-shell #workspace-function-rail .function-tab[aria-current=page]{
  background:var(--strip-active)!important;color:var(--strip-active-text)!important;
  border-color:var(--strip-active-border)!important;font-weight:650!important;box-shadow:0 1px 2px #122b1810!important;
 }
 #product-shell #workspace-function-rail .function-tab:focus-visible{
  outline:2px solid var(--strip-focus)!important;outline-offset:-2px!important;
 }
 #product-shell #workspace-function-rail .function-tab :is(span,i,svg){color:inherit!important}
 #product-shell #workspace-function-rail :is(.function-glyph,.function-glyph:has(.dedicated-function-art)){
  width:18px!important;height:18px!important;min-width:18px!important;display:inline-grid;place-items:center;
  background:transparent!important;color:inherit!important;border:0;border-radius:0;box-shadow:none!important;
 }
 #product-shell #workspace-function-rail :is(.function-glyph .es-icon,.function-tab>.es-icon){
  width:16px!important;height:16px!important;min-width:16px!important;flex:none;stroke-width:1.7;
 }
 #product-shell #workspace-function-rail .dedicated-function-art{
  width:18px!important;height:18px!important;min-width:18px!important;border-radius:3px!important;box-shadow:none!important;filter:grayscale(1);opacity:.8;
 }
 /* WhatsApp keeps its recognizable green icon while sharing the same tab states. */
 #product-shell #workspace-function-rail .function-tab.es-whatsapp-green>.es-icon{
  background:#139869!important;color:#fff!important;width:21px!important;height:21px!important;min-width:21px!important;padding:3px;border-radius:5px;
 }
 #product-shell #workspace-function-rail .function-tab.es-whatsapp-green .function-glyph{
  background:#139869!important;color:#fff!important;width:21px!important;height:21px!important;min-width:21px!important;border-radius:5px;
 }
 #product-shell #workspace-function-rail .function-tab.es-whatsapp-green .function-glyph .es-icon{color:#fff!important}
 #product-shell #workspace-function-rail .function-tab.es-whatsapp-green>.es-icon *{color:#fff!important}
 #product-shell #workspace-function-rail .function-tabs::-webkit-scrollbar{height:4px}
 #product-shell #workspace-function-rail .function-tabs::-webkit-scrollbar-track{background:transparent}
 #product-shell #workspace-function-rail .function-tabs::-webkit-scrollbar-thumb{background:#dce3eb;border-radius:8px}
 #product-shell #workspace-function-rail .function-tabs:hover::-webkit-scrollbar-thumb{background:#9aa9ba}
 :root[data-es-color-mode=dark] #product-shell #workspace-function-rail{
  --strip-surface:#131d2c;--strip-track:#182436;--strip-border:#2d3c51;
  --strip-text:#c0cbdc;--strip-hover:#26374b;--strip-active:#1b403d;
  --strip-active-text:#9ae8d2;--strip-active-border:#32685d;--strip-focus:#5eead4;
 }
 :root[data-es-color-mode=dark] #product-shell #workspace-function-rail .dedicated-function-art{filter:grayscale(1) brightness(1.7);opacity:.9}
 @media(max-width:767px){
  #product-shell #workspace-function-rail{padding:4px 8px!important;min-height:56px!important}
  #product-shell #workspace-function-rail .function-tabs{min-height:44px!important;padding:2px!important;gap:3px!important}
  #product-shell #workspace-function-rail .function-tab{height:40px!important;min-height:40px!important;padding:8px 10px!important}
 }
 @media(prefers-reduced-motion:reduce){#product-shell #workspace-function-rail .function-tab{transition:none}}
}

/* Selected submodules use a crisp red-to-black outline in every workspace. */
@media screen {
 #product-shell #workspace-function-rail .function-tab[aria-current=page]{
  border:2.5px solid transparent!important;
  background:linear-gradient(#fffafb,#fffafb) padding-box,linear-gradient(115deg,#ef233c 0%,#a81123 45%,#080808 100%) border-box!important;
  color:#000000!important;box-shadow:0 1px 3px #49112612!important;
 }
 :root[data-es-color-mode=dark] #product-shell #workspace-function-rail .function-tab[aria-current=page]{
  background:linear-gradient(#30212d,#30212d) padding-box,linear-gradient(115deg,#ef233c 0%,#a81123 45%,#080808 100%) border-box!important;
  color:#ffd7e2!important;box-shadow:0 0 0 1px #d49aaa55!important;
 }
}

@media screen {
 :root:not([data-es-color-mode=dark]) #product-shell #workspace-function-rail .function-tab{color:#000000!important}
 :root:not([data-es-color-mode=dark]) #product-shell #workspace-function-rail .function-tab:is(:hover,[aria-current=page]){color:#000000!important}
 #product-shell #workspace-function-rail .submodule-icon{width:17px!important;height:17px!important;min-width:17px!important;stroke-width:1.7;flex-shrink:0}
}

/* A square, open-top selection frame occupies only the bottom half of the tab. */
@media screen {
 #product-shell #workspace-function-rail .function-tab[aria-current=page]{
  border-color:transparent!important;border-radius:0!important;
  background:#fffafb!important;box-shadow:none!important;
 }
 #product-shell #workspace-function-rail .function-tab[aria-current=page]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;
  border-radius:0;background:linear-gradient(115deg,#ef233c 0%,#a81123 45%,#080808 100%);
  clip-path:polygon(0 0,3px 0,3px calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 0,100% 0,100% 100%,0 100%);
 }
 :root[data-es-color-mode=dark] #product-shell #workspace-function-rail .function-tab[aria-current=page]{background:#30212d!important;box-shadow:none!important}
}

/* Rounded lower corners, with a shared animated frame when scripting is available. */
@media screen {
 #product-shell #workspace-function-rail .function-tab[aria-current=page]{border-radius:7px!important}
 #product-shell #workspace-function-rail .function-tab[aria-current=page]::after{
  clip-path:none;background:none;border:3px solid #a81123;border-top:0;border-radius:0 0 9px 9px;
 }
 #product-shell #workspace-function-rail.has-selection-motion .function-tab[aria-current=page]::after{display:none}
 #product-shell #workspace-function-rail .submodule-selection-indicator{position:absolute;display:block;pointer-events:none;z-index:3;transform-origin:left center}
 #product-shell #workspace-function-rail .submodule-selection-indicator svg{display:block;overflow:visible}
}

/* Selected navigation artwork is purple throughout the suite. */
@media screen {
 #product-shell #workspace-function-rail{--strip-selected-icon:#7c3aed}
 :root[data-es-color-mode=dark] #product-shell #workspace-function-rail{--strip-selected-icon:#c4b5fd}
 #product-shell #workspace-function-rail .function-tab[aria-current=page] :is(svg,svg *,i,.function-glyph){color:var(--strip-selected-icon)!important}
 #product-shell #workspace-function-rail .function-tab[aria-current=page] :is(.function-glyph,.function-glyph:has(.dedicated-function-art)){background:transparent!important}
 #product-shell #workspace-function-rail .function-tab[aria-current=page].es-whatsapp-green>.es-icon{background:transparent!important;color:var(--strip-selected-icon)!important}
 #product-shell #workspace-function-rail .function-tab[aria-current=page] .dedicated-function-art{
  filter:invert(25%) sepia(95%) saturate(3920%) hue-rotate(254deg) brightness(91%) contrast(104%);opacity:1;
 }
 :root[data-es-color-mode=dark] #product-shell #workspace-function-rail .function-tab[aria-current=page] .dedicated-function-art{filter:invert(78%) sepia(29%) saturate(1004%) hue-rotate(209deg) brightness(101%) contrast(98%)}
 #product-shell #product-sidebar .nav-item[aria-current=page]{box-shadow:inset 4px 0 0 #a78bfa!important}
 #product-shell #product-sidebar .nav-item[aria-current=page] :is(.es-icon,.es-icon *,svg,svg *,i,.function-glyph){color:#c4b5fd!important}
 #product-shell #product-sidebar .nav-item[aria-current=page] .dedicated-function-art{filter:invert(78%) sepia(29%) saturate(1004%) hue-rotate(209deg) brightness(101%) contrast(98%)}
}

/* Reference selection: charcoal surface, white label and a warm orange rail. */
@media screen {
 #product-shell #workspace-function-rail .function-tab[aria-current=page],
 :root:not([data-es-color-mode=dark]) #product-shell #workspace-function-rail .function-tab[aria-current=page],
 :root[data-es-color-mode=dark] #product-shell #workspace-function-rail .function-tab[aria-current=page]{
  --strip-selected-icon:#fb923c;
  background:linear-gradient(100deg,#263041,#1c2433)!important;color:#ffffff!important;
  border:1px solid #303b4c!important;border-radius:6px!important;font-weight:650!important;box-shadow:none!important;
 }
 #product-shell #workspace-function-rail .function-tab[aria-current=page]>span:not(.function-glyph){color:#ffffff!important}
 #product-shell #workspace-function-rail .function-tab[aria-current=page]::after{
  top:4px;bottom:4px;left:0;right:auto;width:3px;height:auto;border:0;border-radius:3px;
  background:#fb923c;box-shadow:0 0 7px #fb923c99;clip-path:none;
 }
 #product-shell #workspace-function-rail .submodule-selection-indicator{border-radius:3px;background:#fb923c;box-shadow:0 0 8px #fb923c99}
 #product-shell #product-sidebar .nav-item[aria-current=page]{
  position:relative;background:linear-gradient(100deg,#263041,#1c2433)!important;
  color:#ffffff!important;box-shadow:none!important;border-radius:6px!important;
 }
 #product-shell #product-sidebar .nav-item[aria-current=page]::before{
  content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px;
  background:#fb923c;box-shadow:0 0 8px #fb923c99;pointer-events:none;
 }
 #product-shell #product-sidebar .nav-item[aria-current=page] :is(.es-icon,.es-icon *,svg,svg *,i,.function-glyph){color:#fb923c!important}
 #product-shell #workspace-function-rail .function-tab[aria-current=page] .dedicated-function-art,
 :root[data-es-color-mode=dark] #product-shell #workspace-function-rail .function-tab[aria-current=page] .dedicated-function-art,
 #product-shell #product-sidebar .nav-item[aria-current=page] .dedicated-function-art{filter:invert(67%) sepia(66%) saturate(931%) hue-rotate(336deg) brightness(101%) contrast(97%)}
}


/* Orange artwork and smoothly moving module selection marker. */
@media screen {
 #product-shell #product-sidebar{position:relative;isolation:isolate}
 #product-shell #product-sidebar.has-sidebar-motion .nav-item[aria-current=page]::before{display:none}
 #product-shell #product-sidebar .main-module-selection-indicator{position:absolute;width:3px;display:block;pointer-events:none;background:#fb923c;border-radius:3px;box-shadow:0 0 8px #fb923c99;z-index:3;transform-origin:top center}
 #product-shell #product-sidebar .main-module-selection-indicator[hidden]{display:none!important}
}

/* The complete selection surface glides underneath labels, not only its marker. */
@media screen {
 #product-shell #workspace-function-rail{isolation:isolate}
 #product-shell #workspace-function-rail .function-tab{z-index:2}
 #product-shell #workspace-function-rail.has-selection-motion .function-tab[aria-current=page],
 :root:not([data-es-color-mode=dark]) #product-shell #workspace-function-rail.has-selection-motion .function-tab[aria-current=page],
 :root[data-es-color-mode=dark] #product-shell #workspace-function-rail.has-selection-motion .function-tab[aria-current=page]{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
 #product-shell #workspace-function-rail .submodule-selection-indicator{z-index:1;box-sizing:border-box;background:linear-gradient(100deg,#263041,#1c2433);border:1px solid #303b4c;border-radius:6px;box-shadow:none;transform-origin:left top;will-change:transform,width}
 #product-shell #workspace-function-rail .submodule-selection-indicator::before{content:"";position:absolute;left:-1px;top:4px;bottom:4px;width:3px;border-radius:3px;background:#fb923c;box-shadow:0 0 8px #fb923c99}
 @media(prefers-reduced-motion:reduce){#product-shell #workspace-function-rail .submodule-selection-indicator{will-change:auto}}
}