/**
 * Persistent OMNI product rail — shared across Chat / Business / API / Hub.
 * Lives inside .app-sidebar .side-nav (or standalone shell).
 */
.product-rail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  flex: 0 0 auto;
}

.product-rail a,
.product-rail button {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-icon-slot, 40px) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  column-gap: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--omni-text, #f2f0eb);
  font-family: var(--omni-font-ui, "Onest", system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    column-gap 0.16s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s ease,
    background 0.18s ease;
}

.app-sidebar:is(:hover, .app-sidebar--expanded) .product-rail a,
.app-sidebar:is(:hover, .app-sidebar--expanded) .product-rail button,
body.is-side-open .app-sidebar .product-rail a,
body.is-side-open .app-sidebar .product-rail button {
  column-gap: 10px;
  transition-delay: 0.06s;
}

.product-rail a:hover,
.product-rail button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.product-rail a.is-active,
.product-rail button.is-active {
  color: var(--omni-accent-hover, #e49a4c);
}

.product-rail .side-nav-ico,
.product-rail-ico {
  grid-column: 1;
  justify-self: center;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.product-rail .side-nav-ico svg,
.product-rail-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-rail .side-nav-lab,
.product-rail-lab {
  grid-column: 2;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-sidebar:is(:hover, .app-sidebar--expanded) .product-rail .side-nav-lab,
.app-sidebar:is(:hover, .app-sidebar--expanded) .product-rail .product-rail-lab,
body.is-side-open .app-sidebar .product-rail .side-nav-lab,
body.is-side-open .app-sidebar .product-rail .product-rail-lab {
  max-width: 140px;
  opacity: 1;
  transition-delay: 0.06s;
}

.product-rail-sep {
  flex: 0 0 auto;
  height: 1px;
  margin: 8px 4px 4px;
  background: rgba(255, 255, 255, 0.06);
}

.product-rail-sep[hidden] {
  display: none !important;
}

/* Shell tokens — hub/api (.omni-shell) and overlay pages (body.omni-has-rail, e.g. login) */
.omni-shell,
body.omni-has-rail {
  --sidebar-collapsed-w: 64px;
  --sidebar-expanded-w: 228px;
  --sidebar-icon-slot: 40px;
  --sidebar-logo: 40px;
  --sidebar-rail-pad: 12px;
  --ws-topbar-h: 5.25rem;
}

.omni-shell {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--omni-bg, #161410);
  color: var(--omni-text, #f2f0eb);
  font-family: var(--omni-font-ui, "Onest", system-ui, sans-serif);
}

.omni-shell .app-sidebar,
body.omni-has-rail > .app-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-collapsed-w);
  padding: 0 var(--sidebar-rail-pad) 14px;
  background: rgba(22, 20, 16, 0.98);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1), transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.omni-shell .app-sidebar:is(:hover, .app-sidebar--expanded),
body.omni-has-rail > .app-sidebar:is(:hover, .app-sidebar--expanded) {
  width: var(--sidebar-expanded-w);
  filter: drop-shadow(10px 0 22px rgba(0, 0, 0, 0.38));
}

.omni-shell .side-brand,
body.omni-has-rail > .app-sidebar .side-brand {
  display: grid;
  grid-template-columns: var(--sidebar-icon-slot) minmax(0, 1fr);
  align-items: center;
  flex: 0 0 var(--ws-topbar-h);
  height: var(--ws-topbar-h);
  text-decoration: none;
  color: var(--omni-text, #f2f0eb);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.omni-shell .side-brand-logo,
body.omni-has-rail > .app-sidebar .side-brand-logo {
  grid-column: 1;
  justify-self: center;
  width: var(--sidebar-logo);
  height: var(--sidebar-logo);
  border-radius: 10px;
}

.omni-shell .side-brand-name,
body.omni-has-rail > .app-sidebar .side-brand-name {
  grid-column: 2;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font: 800 1.05rem/1.1 var(--omni-font-display, Geologica, system-ui, sans-serif);
  letter-spacing: 0.08em;
  transition: opacity 0.16s ease, max-width 0.16s ease;
}

.omni-shell .app-sidebar:is(:hover, .app-sidebar--expanded) .side-brand,
body.omni-has-rail > .app-sidebar:is(:hover, .app-sidebar--expanded) .side-brand {
  column-gap: 12px;
}
.omni-shell .app-sidebar:is(:hover, .app-sidebar--expanded) .side-brand-name,
body.omni-has-rail > .app-sidebar:is(:hover, .app-sidebar--expanded) .side-brand-name {
  max-width: 140px;
  opacity: 1;
  transition-delay: 0.06s;
}

.omni-shell .side-nav,
body.omni-has-rail > .app-sidebar .side-nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0.85rem;
  gap: 0;
}

body.omni-has-rail > .app-sidebar .side-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Mobile overlay rail on login / overlay hosts */
.omni-rail-burger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 55;
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(16, 14, 12, 0.72);
  color: var(--omni-text, #f2f0eb);
  cursor: pointer;
}
.omni-rail-burger .side-burger-bars,
.omni-rail-burger .side-burger-bars::before,
.omni-rail-burger .side-burger-bars::after {
  display: block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
}
.omni-rail-burger .side-burger-bars::before,
.omni-rail-burger .side-burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.omni-rail-burger .side-burger-bars::before { top: -5px; }
.omni-rail-burger .side-burger-bars::after { top: 5px; }

@media (max-width: 920px) {
  .omni-rail-burger { display: inline-flex; }
  body.omni-has-rail > .app-sidebar {
    transform: translateX(calc(-1 * var(--sidebar-expanded-w) - 8px));
    width: var(--sidebar-expanded-w);
  }
  body.omni-has-rail.is-side-open > .app-sidebar {
    transform: translateX(0);
  }
  body.omni-has-rail.is-side-open > .app-sidebar .side-brand { column-gap: 12px; }
  body.omni-has-rail.is-side-open > .app-sidebar .side-brand-name,
  body.omni-has-rail.is-side-open > .app-sidebar .product-rail .side-nav-lab,
  body.omni-has-rail.is-side-open > .app-sidebar .side-foot .product-rail-hub .side-nav-lab {
    max-width: 140px;
    opacity: 1;
  }
  body.omni-has-rail.is-side-open > .app-sidebar .product-rail a,
  body.omni-has-rail.is-side-open > .app-sidebar .side-foot .product-rail-hub {
    column-gap: 10px;
  }
}

.side-foot .product-rail-hub {
  display: grid;
  grid-template-columns: var(--sidebar-icon-slot, 40px) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  height: 40px;
  margin: 0 0 6px;
  border-radius: 10px;
  color: var(--omni-text, #f2f0eb);
  text-decoration: none;
  font: 700 0.9rem/1.2 var(--omni-font-ui, Onest, system-ui, sans-serif);
  overflow: hidden;
  transition:
    column-gap 0.16s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s ease,
    background 0.18s ease;
}
.app-sidebar:is(:hover, .app-sidebar--expanded) .side-foot .product-rail-hub,
body.is-side-open .app-sidebar .side-foot .product-rail-hub {
  column-gap: 10px;
  transition-delay: 0.06s;
}
.side-foot .product-rail-hub:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.side-foot .product-rail-hub.is-active {
  color: var(--omni-accent-hover, #e49a4c);
}
.side-foot .product-rail-hub .side-nav-ico {
  grid-column: 1;
  justify-self: center;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
.side-foot .product-rail-hub .side-nav-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.side-foot .product-rail-hub .side-nav-lab {
  grid-column: 2;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.16s ease, max-width 0.16s ease;
}
.app-sidebar:is(:hover, .app-sidebar--expanded) .side-foot .product-rail-hub .side-nav-lab,
body.is-side-open .app-sidebar .side-foot .product-rail-hub .side-nav-lab {
  max-width: 140px;
  opacity: 1;
  transition-delay: 0.06s;
}

.omni-shell .side-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.omni-shell-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px 28px 32px;
}

@media (min-width: 921px) {
  .omni-shell-main {
    padding-left: calc(var(--sidebar-collapsed-w) + 28px);
  }
}

@media (max-width: 920px) {
  .omni-shell .app-sidebar {
    transform: translateX(calc(-1 * var(--sidebar-expanded-w) - 8px));
    width: var(--sidebar-expanded-w);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.is-side-open .omni-shell .app-sidebar {
    transform: translateX(0);
  }
  body.is-side-open .omni-shell .side-brand { column-gap: 12px; }
  body.is-side-open .omni-shell .side-brand-name,
  body.is-side-open .omni-shell .product-rail .side-nav-lab,
  body.is-side-open .omni-shell .side-foot .product-rail-hub .side-nav-lab {
    max-width: 140px;
    opacity: 1;
  }
  body.is-side-open .omni-shell .product-rail a,
  body.is-side-open .omni-shell .side-foot .product-rail-hub {
    column-gap: 10px;
  }
  .omni-shell-main { padding: 16px; }
}