/* ================================================================
   FlirtDojo shared rail (marketing site + chat app).
   Collapsed 72px icon rail; html.railopen expands to 236px with
   labels. Mobile (<880px): off-canvas drawer toggled by #burger /
   #railToggle, veil behind (#railVeil).
   Color hooks: falls back to sane darks if a surface lacks the vars.
   ================================================================ */
#fdrail{
  --fd-bg:var(--bg2, var(--bg-2, #0e1220));
  --fd-line:var(--line, rgba(255,255,255,.08));
  --fd-ink:var(--text, var(--ink, #eef1f7));
  --fd-mut:var(--muted, #97a3b8);
  --fd-card:var(--card, #131a2b);
  position:fixed; inset:0 auto 0 0; z-index:70; width:72px;
  display:flex; flex-direction:column; gap:6px; padding:14px 12px;
  background:var(--fd-bg); border-right:1px solid var(--fd-line);
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  transition:width .18s ease, transform .22s ease}
#fdrail::-webkit-scrollbar{display:none}
html.railopen #fdrail{width:236px}
#fdrail a,#fdrail #railToggle{display:flex; align-items:center; gap:13px; min-height:44px;
  border-radius:13px; color:var(--fd-mut); padding:0 13px; white-space:nowrap;
  background:none; border:0; cursor:pointer; font:inherit; text-decoration:none;
  transition:background .15s, color .15s; flex:none}
#fdrail svg{flex:none}
#fdrail b{font-size:14px; font-weight:700; opacity:0; transition:opacity .14s; pointer-events:none}
html.railopen #fdrail b{opacity:1}
#fdrail a:hover,#fdrail #railToggle:hover{color:var(--fd-ink); background:var(--fd-card)}
#fdrail a.on{color:var(--fd-ink); background:var(--fd-card); border:1px solid var(--fd-line)}
#fdrail .rail-logo{margin-bottom:10px}
#fdrail .rail-logo b{font-size:16px; font-weight:900;
  background:linear-gradient(135deg,#ff3d71,#ff8a3d);
  -webkit-background-clip:text; background-clip:text; color:transparent}
#fdrail .rail-sep{display:block; height:1px; background:var(--fd-line); margin:8px 4px; flex:none}
#fdrail .rail-vip{margin-top:auto; color:#f5c95b}
#railVeil{display:none}

/* Mobile: off-canvas drawer (forced expanded) */
@media (max-width:879px){
  #fdrail{width:236px; transform:translateX(-105%); box-shadow:0 18px 50px rgba(0,0,0,.45)}
  #fdrail b{opacity:1}
  html.raildrawer #fdrail{transform:none}
  #railVeil{display:block; position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none; transition:opacity .22s}
  html.raildrawer #railVeil{opacity:1; pointer-events:auto}
  #fdrail #railToggle{display:none}
}