/* WOTTT 04.94.0 r1a — Navigation usability & Settings icon polish.
   Applies after prior accepted CSS layers; presentation and navigation markup only.
   Preserve the existing actions, profile fly-up, Inbox and tablet/mobile UX. */

/* The desktop main rail needs an independently scrollable navigation region.
   Keep branding and profile/notifications reachable even at normal zoom and
   short browser heights; do not scroll/clip the account fly-up. */
@media (min-width:721px) {
  .workspace .app-rail:not(.opening-rail) {
    height:100dvh;
    max-height:100dvh;
    min-height:0;
    overflow:visible;
    display:flex;
    flex-direction:column;
    flex-shrink:0;
  }
  .workspace .app-rail:not(.opening-rail) > .rail-logo {
    flex:0 0 auto;
    margin-bottom:12px;
  }
  .workspace .app-rail:not(.opening-rail) > nav {
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--ui-muted) 47%,transparent) transparent;
    padding:3px 2px 8px 0;
    gap:5px;
  }
  .workspace .app-rail:not(.opening-rail) > nav::-webkit-scrollbar{width:5px}
  .workspace .app-rail:not(.opening-rail) > nav::-webkit-scrollbar-thumb {
    background:color-mix(in srgb,var(--ui-muted) 42%,transparent);
    border-radius:12px;
  }
  .workspace .app-rail:not(.opening-rail) > nav .rail-item {
    flex:0 0 auto;
    min-height:48px;
  }
  .workspace .app-rail:not(.opening-rail) > .rail-bottom {
    flex:0 0 auto;
    margin-top:8px;
    padding-top:8px;
    padding-bottom:2px;
    border-top:1px solid var(--ui-line);
  }
}

/* Settings has a second-level navigation list. Keep its title readable and
   permit the list to scroll if font scaling or screen height grows. */
@media (min-width:781px) {
  .workspace.settings-shell > .sw-nav {
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-height:0;
  }
  .workspace.settings-shell .sw-nav > .sw-nav-title {flex:0 0 auto;}
  .workspace.settings-shell .sw-nav > nav {
    min-height:0;
    flex:1 1 auto;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--ui-muted) 43%,transparent) transparent;
    padding:2px 3px 12px 1px;
  }
  .workspace.settings-shell .sw-nav > nav::-webkit-scrollbar{width:5px;}
  .workspace.settings-shell .sw-nav > nav::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--ui-muted) 43%,transparent);
    border-radius:12px;
  }
}

/* Reuse the existing application SVG icon family for newly added Settings
   sections, instead of diamond/star Unicode glyphs. */
.workspace.settings-shell .sw-nav button[data-value="crm_fields"] > .ui-icon,
.workspace.settings-shell .sw-nav button[data-value="lead_scoring"] > .ui-icon {
  flex:0 0 16px;
  width:16px;
  height:16px;
  color:inherit;
}
.workspace.settings-shell .sw-nav button[data-value="crm_fields"]:not(.active) > .ui-icon {color:#687ba3;}
.workspace.settings-shell .sw-nav button[data-value="lead_scoring"]:not(.active) > .ui-icon {color:#667b91;}

/* WhatsApp Numbers is a clear but compact child of Channels; remove the
   floating arrow and oversized indent that caused two-line wrapping. */
.workspace.settings-shell .sw-nav button.wa90-nav-link {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  width:calc(100% - 13px);
  min-width:0;
  min-height:36px;
  margin:1px 0 5px 13px;
  padding:7px 8px 7px 10px;
  border:1px solid transparent;
  border-left:2px solid color-mix(in srgb,var(--ui-accent) 25%,var(--ui-line));
  border-radius:8px;
  background:color-mix(in srgb,var(--ui-accent) 3%,var(--ui-surface));
  color:var(--ui-muted);
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  text-align:left;
  white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease;
}
.workspace.settings-shell .sw-nav button.wa90-nav-link > .ui-icon {
  width:15px;
  height:15px;
  min-width:15px;
  flex:0 0 15px;
  color:#268367;
}
.workspace.settings-shell .sw-nav button.wa90-nav-link > span {
  display:block;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.workspace.settings-shell .sw-nav button.wa90-nav-link::before {
  content:none;
}
.workspace.settings-shell .sw-nav button.wa90-nav-link:hover:not(:disabled) {
  color:var(--ui-ink);
  border-color:color-mix(in srgb,var(--ui-accent) 15%,var(--ui-line));
  background:var(--ui-accent-soft);
}
.workspace.settings-shell .sw-nav button.wa90-nav-link.active {
  color:var(--ui-accent);
  background:var(--ui-accent-soft);
  border-color:color-mix(in srgb,var(--ui-accent) 26%,var(--ui-line));
  border-left-color:var(--ui-accent);
  font-weight:750;
}
.workspace.settings-shell .sw-nav button.wa90-nav-link.active > .ui-icon {color:var(--ui-accent);}

@media (max-width:780px) {
  /* Retain the previously accepted horizontal Settings submenu on tablets. */
  .workspace.settings-shell .sw-nav button.wa90-nav-link {
    width:auto;
    margin:0;
    padding:8px 12px;
    border-left-width:1px;
    min-height:38px;
  }
  .workspace.settings-shell .sw-nav button.wa90-nav-link::before{content:none;}
}
@media (max-width:720px) {
  /* Never force the desktop vertical rail on mobile's accepted bottom nav. */
  .workspace .app-rail:not(.opening-rail) > nav {overflow-x:auto;}
}
@media (prefers-reduced-motion:reduce) {
  .workspace.settings-shell .sw-nav button.wa90-nav-link{transition:none;}
}