/* =====================================================================
   Genexts rail: a slim, minimal left bar on every page (Oct 2026).
   Icon with its name underneath: New · Chat · Genexts Build · Spot Bots ·
   Docs · Projects · History · More, the logo on top and your avatar at the
   bottom. Loaded after redesign.css; uses its colour tokens, so Dark and
   Light both match. Remove the <link> to go back to the wide menu.
   ===================================================================== */

html[data-theme] .sidebar.rail {
  width: 84px !important;
  min-width: 84px !important;
  padding: 12px 8px 14px !important;
  align-items: center !important;
  gap: 2px !important;
  overflow: visible !important;
  /* See-through: the page shows behind it, no panel colour and no dividing line. */
  background: transparent !important;
  border-right: 1px solid transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Phones: it slides in over the page, so it gets a light frosted glass there instead. */
@media (max-width: 768px) {
  html[data-theme] .sidebar.rail {
    background: color-mix(in srgb, var(--r-bg) 70%, transparent) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important;
  }
}

/* Logo */
html[data-theme] .sidebar.rail .rail-logo {
  width: 44px; height: 44px; margin: 2px 0 14px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 14px; cursor: pointer;
  background: transparent; transition: background 0.15s, transform 0.15s;
}
html[data-theme] .sidebar.rail .rail-logo:hover { background: var(--r-surface-2); transform: scale(1.04); }
html[data-theme] .sidebar.rail .rail-logo img { width: 28px; height: 28px; display: block; }

/* The list */
html[data-theme] .sidebar.rail .rail-items {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 4px !important; width: 100%;
}

/* One item: icon on top, its name underneath */
html[data-theme] .sidebar.rail .rail-items > .sidebar-item,
html[data-theme] .sidebar.rail .rail-new,
html[data-theme] .sidebar.rail .rail-more-btn {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 5px !important; width: 72px !important; min-height: 58px; margin: 0 !important;
  padding: 7px 2px 6px !important; border: 0 !important; border-radius: 14px !important;
  background: transparent !important; box-shadow: none !important;
  color: var(--r-text-2) !important; font: inherit; font-size: 11.5px !important; font-weight: 500 !important;
  line-height: 1.15 !important; text-align: center; cursor: pointer; transition: color 0.15s, background 0.15s;
}
html[data-theme] .sidebar.rail .rail-items > .sidebar-item .icon,
html[data-theme] .sidebar.rail .rail-new .icon,
html[data-theme] .sidebar.rail .rail-more-btn .icon {
  width: 46px !important; height: 30px !important; min-width: 0; display: grid !important; place-items: center;
  border-radius: 999px !important; background: transparent !important; color: inherit !important;
  transform: none !important; transition: background 0.15s;
}
html[data-theme] .sidebar.rail .rail-items .ic { width: 22px; height: 22px; display: block; }
html[data-theme] .sidebar.rail .rail-items .label {
  display: block !important; opacity: 1 !important; width: 100%; white-space: normal !important;
  overflow: visible; color: inherit !important; font-size: inherit !important;
}
html[data-theme] .sidebar.rail .rail-items > .sidebar-item:hover,
html[data-theme] .sidebar.rail .rail-new:hover,
html[data-theme] .sidebar.rail .rail-more-btn:hover { color: var(--r-text) !important; }
html[data-theme] .sidebar.rail .rail-items > .sidebar-item:hover .icon,
html[data-theme] .sidebar.rail .rail-new:hover .icon,
html[data-theme] .sidebar.rail .rail-more-btn:hover .icon,
html[data-theme] .sidebar.rail .rail-more-btn[aria-expanded="true"] .icon { background: var(--r-surface-2) !important; }

/* The page you're on: a soft teal pill behind the icon, the name in full colour */
html[data-theme] .sidebar.rail .rail-items > .sidebar-item.active { color: var(--r-text) !important; font-weight: 600 !important; }
html[data-theme] .sidebar.rail .rail-items > .sidebar-item.active .icon {
  background: var(--r-accent-soft) !important; color: var(--r-accent-text) !important;
}
html[data-theme] .sidebar.rail .rail-items > .sidebar-item::before,
html[data-theme] .sidebar.rail .rail-items > .sidebar-item::after,
html[data-theme] .sidebar.rail .sidebar-new { display: none !important; }
html[data-theme] .sidebar.rail .rail-new { margin-bottom: 6px !important; }
html[data-theme] .sidebar.rail .rail-new .icon { border: 1px solid var(--r-border-strong); }

/* Space, then the avatar */
html[data-theme] .sidebar.rail .rail-spacer { flex: 1 1 auto !important; min-height: 12px; }
html[data-theme] .sidebar.rail .sidebar-profile-card {
  width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important;
  display: grid !important; place-items: center; border-radius: 999px !important;
  background: transparent !important; border: 0 !important; cursor: pointer;
}
html[data-theme] .sidebar.rail .sidebar-profile-card:hover { background: var(--r-surface-2) !important; }
html[data-theme] .sidebar.rail .profile-info, html[data-theme] .sidebar.rail .profile-chevron { display: none !important; }
html[data-theme] .sidebar.rail .profile-avatar {
  width: 34px !important; height: 34px !important; min-width: 34px; border-radius: 50%;
  display: grid !important; place-items: center; overflow: hidden;
  background: var(--r-surface-3) !important; color: var(--r-text) !important; font-weight: 600; font-size: 14px;
}

/* "More" and the account menu open beside the rail */
html[data-theme] .sidebar.rail .rail-pop,
html[data-theme] .sidebar.rail .profile-menu {
  position: fixed !important; left: 92px !important; bottom: 14px !important; top: auto !important; right: auto !important;
  width: 260px !important; max-height: calc(100vh - 28px); overflow-y: auto;
  padding: 6px !important; z-index: 2000 !important;
  background: var(--r-surface) !important; border: 1px solid var(--r-border-strong) !important;
  border-radius: 16px !important; box-shadow: var(--r-shadow-pop) !important;
  color: var(--r-text) !important;
}
html[data-theme] .sidebar.rail .rail-pop.hidden, html[data-theme] .sidebar.rail .profile-menu.hidden { display: none !important; }
html[data-theme] .sidebar.rail .rail-pop .sidebar-item,
html[data-theme] .sidebar.rail .rail-pop .sb-install {
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important;
  width: 100% !important; padding: 9px 10px !important; margin: 0 !important; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; color: var(--r-text-2) !important; font-size: 14px !important; cursor: pointer; text-align: left;
}
html[data-theme] .sidebar.rail .rail-pop .sb-install[hidden] { display: none !important; }
html[data-theme] .sidebar.rail .rail-pop .sidebar-item:hover,
html[data-theme] .sidebar.rail .rail-pop .sb-install:hover { background: var(--r-surface-2) !important; color: var(--r-text) !important; }
html[data-theme] .sidebar.rail .rail-pop .sidebar-item.active { color: var(--r-accent-text) !important; }
html[data-theme] .sidebar.rail .rail-pop .sidebar-item .icon {
  width: 20px !important; height: 20px !important; background: none !important; display: grid !important; place-items: center;
}
html[data-theme] .sidebar.rail .rail-pop .ic { width: 18px; height: 18px; }
html[data-theme] .sidebar.rail .rail-pop .label { display: inline !important; }
html[data-theme] .sidebar.rail .rail-pop .sb-credits {
  display: block !important; margin: 6px 4px 4px !important; padding: 12px !important;
  border-radius: 12px !important; background: var(--r-surface-2) !important; border: 1px solid var(--r-border) !important;
}
html[data-theme] .sidebar.rail .profile-menu { width: 240px !important; }
html[data-theme] .sidebar.rail .profile-menu .text-small { color: var(--r-text-3) !important; }
html[data-theme] .sidebar.rail .profile-menu .profile-menu-sep { border-top: 1px solid var(--r-border); margin: 4px 0; }
html[data-theme] .sidebar.rail .profile-menu #btn-logout {
  width: 100%; text-align: left; padding: 9px 10px; background: transparent; border: 0; border-radius: 10px;
  color: var(--r-danger); cursor: pointer; font-size: 14px;
}
html[data-theme] .sidebar.rail .profile-menu #btn-logout:hover { background: var(--r-surface-2); }

/* Computers and tablets: the rail is always there (Chat too), so no ☰ menu buttons or edge-hover. */
@media (min-width: 769px) {
  body.rail-nav .chat-nav-btn, body.rail-nav .mobile-nav-btn, body.rail-nav .nav-edge,
  body.rail-nav .sidebar-toggle-btn { display: none !important; }
  body.rail-nav .sidebar.rail { position: relative !important; transform: none !important; height: 100vh !important; height: 100dvh !important; }
}

/* Short screens: the list scrolls (menus still open beside it). */
@media (min-width: 769px) and (max-height: 700px) {
  html[data-theme] .sidebar.rail .rail-items { overflow-y: auto; scrollbar-width: none; min-height: 0; flex: 0 1 auto; }
  html[data-theme] .sidebar.rail .rail-items > .sidebar-item, html[data-theme] .sidebar.rail .rail-new,
  html[data-theme] .sidebar.rail .rail-more-btn { min-height: 50px; padding: 5px 2px 4px !important; }
}

/* Phones: the same rail slides in from ☰ */
@media (max-width: 768px) {
  html[data-theme] .sidebar.rail, html[data-theme] .sidebar.rail.collapsed { width: 92px !important; min-width: 92px !important; }
  html[data-theme] .sidebar.rail .rail-pop, html[data-theme] .sidebar.rail .profile-menu { left: 100px !important; width: min(260px, calc(100vw - 112px)) !important; }
}