/* === Quick Actions Rail (shared) === */ :root{ --rail-dark:#0f172a; --rail-dark-hover:#111827; --rail-bg:#ffffff; --rail-border:#e5e7eb; --rail-subtle:#f8fafc; --rail-shadow:0 10px 24px rgba(0,0,0,.12); } /* Core layout */ .quick-rail{ position:fixed; right:14px; /* use .left class to flip sides */ top:50vh; /* use .lower to nudge down */ transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:60; pointer-events:none; /* only buttons receive clicks */ } /* Bubble buttons (collapsed by default) */ .quick-rail .rail-btn{ pointer-events:auto; display:inline-flex; align-items:center; gap:8px; height:44px; max-width:44px; /* collapsed width */ padding:0 12px; border-radius:999px; border:1px solid var(--rail-border); background:var(--rail-bg); color:var(--rail-dark); box-shadow:var(--rail-shadow); overflow:hidden; white-space:nowrap; transition:max-width .18s ease, background-color .12s ease, box-shadow .12s ease, transform .06s ease; } .quick-rail .rail-btn:hover, .quick-rail .rail-btn:focus-visible{ max-width:220px; /* expand to reveal label */ transform:translateX(-2px); } /* Icon + label */ .quick-rail .rail-ico{ width:20px; height:20px; display:grid; place-items:center; flex:0 0 20px; } .quick-rail .rail-label{ opacity:0; width:0; margin-left:0; transition:opacity .12s ease .05s, width .12s ease .05s, margin-left .12s ease .05s; } .quick-rail .rail-btn:hover .rail-label, .quick-rail .rail-btn:focus-visible .rail-label{ opacity:1; width:auto; margin-left:6px; } /* Variants */ .rail-btn--primary{ background:var(--rail-dark); color:#fff; border-color:var(--rail-dark); } .rail-btn--primary:hover{ background:var(--rail-dark-hover); } .rail-btn--ghost{ background:var(--rail-bg); color:var(--rail-dark); border-color:var(--rail-border); } .rail-btn--ghost:hover{ background:var(--rail-subtle); } /* Keep text/icons white inside the dark pill no matter what */ .quick-rail .rail-btn--primary, .quick-rail .rail-btn--primary .rail-label, .quick-rail .rail-btn--primary .rail-ico{ color:#fff !important; } .quick-rail .rail-btn--primary svg{ fill:currentColor !important; } /* Responsiveness + motion */ @media (max-width:768px){ .quick-rail{ display:none; } } /* mobile uses your chat FAB */ @media (prefers-reduced-motion:reduce){ .quick-rail .rail-btn, .quick-rail .rail-label{ transition:none; } } /* Page-level toggles via */ body[data-rail="chat-only"] .quick-rail [data-id="map"]{ display:none !important; } body[data-rail="off"] .quick-rail{ display:none !important; } /* Convenience modifiers */ .quick-rail.left{ right:auto; left:14px; } .quick-rail.lower{ top:60vh; } /* --- Visibility fixes on dark hero backgrounds --- */ .quick-rail .rail-btn{ /* subtle glass to separate from dark sections */ -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); } /* Always keep ghost pill text dark, even if global links are light */ .quick-rail .rail-btn--ghost, .quick-rail .rail-btn--ghost .rail-label, .quick-rail .rail-btn--ghost .rail-ico{ color:#0f172a !important; } .quick-rail .rail-btn--ghost:visited{ color:#0f172a !important; } /* Contrast mode for pages with dark hero Activate by putting data-rail-theme="dark" on */ body[data-rail-theme="dark"] .quick-rail .rail-btn{ box-shadow: 0 10px 26px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.08); } body[data-rail-theme="dark"] .quick-rail .rail-btn--primary{ background:#0b1220; /* slightly lighter than pure black so it pops */ border-color:rgba(255,255,255,.14); } body[data-rail-theme="dark"] .quick-rail .rail-btn--ghost{ background:rgba(255,255,255,.96); /* bright chip over dark hero */ border-color:rgba(255,255,255,.82); } /* keep ghost text readable in dark mode too */ body[data-rail-theme="dark"] .quick-rail .rail-btn--ghost, body[data-rail-theme="dark"] .quick-rail .rail-btn--ghost .rail-label, body[data-rail-theme="dark"] .quick-rail .rail-btn--ghost .rail-ico{ color:#0f172a !important; } /* === Mobile rail (opt-in) =============================================== */ /* Turn on by adding data-rail-mobile="on" to on pages you want it. */ @media (max-width: 768px){ [data-rail-mobile="on"] .quick-rail{ display: flex; /* was none */ position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); top: auto; transform: none; flex-direction: column; /* stack buttons */ gap: 12px; z-index: 60; } /* Icon-only bubbles (no expansion on hover) */ [data-rail-mobile="on"] .quick-rail .rail-btn{ height: 52px; max-width: 52px; padding: 0; border-radius: 999px; box-shadow: 0 14px 28px rgba(0,0,0,.18); } [data-rail-mobile="on"] .quick-rail .rail-label{ display: none !important; } [data-rail-mobile="on"] .quick-rail .rail-btn:hover, [data-rail-mobile="on"] .quick-rail .rail-btn:focus-visible{ max-width: 52px; transform: none; } /* Avoid duplicate chat controls if you still have a chat FAB */ [data-rail-mobile="on"] .chat-fab{ display: none !important; } }