:root{ --bg:#000010; --yellow:#FFD700; --magenta:#D633FF; --text:#FFFFFF; --muted:#C5C5D1; --muted-dim:#9E9EAF; --male:#4285F4; --female:#FF4D85; --nonbinary:#D633FF; --other:#34A853; --glass:rgba(20,20,35,0.85); --glass-dark:rgba(10,10,20,0.95); --red:#ff6b7a; --green:#6DFF8B; --orange:#FF8C00; --sos:#FF1744; } select#vibeFilter { border: 2px solid var(--magenta) !important; outline: 2px solid var(--magenta) !important; } html, body { height:100%; width:100%; overflow:hidden; position:relative; top:0; left:0; margin:0; } *{box-sizing:border-box;margin:0;padding:0;} body{font-family:"Poppins",sans-serif;background:var(--bg);color:var(--text);overflow:hidden;} #nearby-view-content { height:100%; width:100%; position:relative; } #map{ height:100%; width:100%; position:absolute; top:0; left:0; overflow:hidden; z-index:1; } #gpsLoading, #gpsError{ position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg); display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;z-index:9999;gap:16px; } #gpsLoading i{font-size:48px;color:var(--yellow);animation:spin 1s linear infinite;} @keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} #gpsError{display:none;} #gpsError button{background:var(--yellow);color:#000;padding:12px 24px;border:none;border-radius:12px;font-weight:600;cursor:pointer;} #searchContainer{ position:absolute;top:70px;left:50%;transform:translateX(-50%); width:90%;max-width:380px;display:flex;align-items:center;gap:8px;z-index:999; background:var(--glass-dark);padding:4px 4px 4px 16px;border-radius:28px; } #searchContainer input{flex:1;padding:10px 0;border:none;background:transparent;color:#fff;font-size:14px;outline:none;} #searchContainer input:focus { font-size:16px; } /* Prevents iOS zoom */ .header-right{ display:flex; gap:6px; align-items:center; } .icon-btn{ width:38px;height:38px;border-radius:12px;border:none;cursor:pointer;background:rgba(255,255,255,.08);color:white;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center; } .icon-btn.secured-safety{ background:rgba(109,255,139,.14);border:1px solid #6DFF8B;color:#6DFF8B; } #safetyMainBtn.secured-safety { background:rgba(109,255,139,.14);border:1px solid #6DFF8B;color:#6DFF8B; } #safetyMainBtn:not(.secured-safety) { background:rgba(255,255,255,.08);border:1px solid transparent;color:white; } #safetyMainBtn.exposed-safety { background:rgba(255,107,122,.24);border:1px solid var(--red);color:var(--red); } #viewToggleBtn { color:var(--yellow); } body.list-view #viewToggleBtn { color:var(--yellow); } /* SOS button */ #sosBtn { position:absolute; bottom:90px; left:16px; z-index:999; width:48px; height:48px; border-radius:50%; background:var(--sos); color:#fff; border:3px solid #fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(255,23,68,0.6); animation:sos-pulse 2s infinite; } @keyframes sos-pulse { 0%{box-shadow:0 0 10px rgba(255,23,68,0.4);} 50%{box-shadow:0 0 30px rgba(255,23,68,0.9);} 100%{box-shadow:0 0 10px rgba(255,23,68,0.4);} } #sosBtn i { font-size:24px; } .header-icon-btn { cursor:pointer;color:var(--yellow);font-size:22px;background:rgba(255,255,255,0.1);border-radius:50%;padding:8px;display:flex;align-items:center;justify-content:center;text-decoration:none;border:none;position:relative; } .header-icon-btn:hover { background:rgba(255,255,255,0.2); } .notification-count-badge { position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:999px;background:var(--error,#ff4444);color:white;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--bg); } .notification-count-badge.hidden { display:none; } .dropdown-header-actions { display:flex; gap:8px; align-items:center; } #filterPanel{ --filter-panel-top:130px; position:fixed;top:var(--filter-panel-top);left:50%;transform:translateX(-50%);background:var(--glass-dark);padding:16px;border-radius:16px;width:90%;max-width:380px;display:none;flex-direction:column;gap:12px;z-index:1000;color:var(--yellow);box-shadow:0 8px 32px rgba(0,0,0,0.5);max-height:calc(100dvh - var(--filter-panel-top) - var(--shell-bottom-nav,72px) - 18px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } .filter-panel-open #filterPanel{z-index:1200;} .filter-panel-open .top-nav-peek-handle{opacity:0;visibility:hidden;pointer-events:none;} .hub-overflow-open .top-nav-peek-handle{opacity:0!important;visibility:hidden!important;pointer-events:none!important;} #filterPanel label{display:flex;justify-content:space-between;font-size:13px;color:var(--yellow);} #filterPanel .filter-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--yellow);} #filterPanel .filter-toggle-row > span{line-height:1.25;} #filterPanel .toggle-switch{display:inline-block;flex:0 0 48px;width:48px;height:24px;margin:0;} #filterPanel select { background:#181828; color:#fff; border:none; padding:6px; border-radius:8px; } #filterPanel select option { background:#181828; color:#fff; } .wallet-badge{ background:linear-gradient(135deg,rgba(255,215,0,0.18),rgba(255,255,255,0.03)); border:1px solid rgba(255,215,0,0.15); border-radius:14px; padding:6px 10px; display:flex; align-items:center; gap:4px; font-weight:700; font-size:12px; color:var(--yellow); } .content-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:45; background:rgba(8,8,18,.97); backdrop-filter:blur(25px); border-top-left-radius:26px; border-top-right-radius:26px; border-top:1px solid rgba(255,255,255,.08); height:48vh; overflow:auto; padding:16px 16px 90px; display:none; scrollbar-width:none; -ms-overflow-style:none; } .content-sheet::-webkit-scrollbar{ display:none; width:0; height:0; } body.list-view .content-sheet{ display:block; position:fixed; top:0; left:0; right:0; bottom:70px; height:auto; border-radius:0; border-top:none; z-index:45; overflow-y:auto; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; padding:0; background:rgba(8,8,18,1); } body.list-view #map, body.list-view #searchContainer { z-index:1; } body.list-view .header { z-index:50; } body.list-view .sheet-header, body.list-view .drag-line { display:none; } .feed-room-card { position:relative; width:100%; height:calc(100vh - 70px); min-height:-webkit-fill-available; scroll-snap-align:start; display:flex; flex-direction:column; background:linear-gradient(180deg,rgba(8,8,18,0.3)0%,rgba(8,8,18,0.95)40%,rgba(8,8,18,1)100%); padding:24px 20px 30px; border-bottom:1px solid rgba(255,255,255,0.05); cursor:pointer; overflow:hidden; } .feed-room-card .feed-bg-glow { position:absolute; top:0; left:0; right:0; height:40%; background:var(--vibe-gradient,linear-gradient(135deg,rgba(255,215,0,0.08),transparent)); pointer-events:none; z-index:0; } .feed-room-card > * { position:relative; z-index:1; } .feed-room-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; } .feed-room-name { font-size:22px; font-weight:900; letter-spacing:-0.5px; display:flex; align-items:center; gap:8px; } .feed-room-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; font-size:12px; } .feed-room-meta .badge { background:rgba(255,255,255,0.06); color:var(--muted); padding:4px 10px; border-radius:10px; font-size:11px; font-weight:600; } .feed-room-meta .badge.safety-badge { background:rgba(109,255,139,0.1); color:var(--green); } .feed-room-meta .badge.safety-badge.low { background:rgba(255,107,122,0.12); color:var(--red); } .feed-chat-snippets { --chat-accent:var(--yellow); flex:1; overflow-y:auto; margin:10px 0 14px; padding:12px; background:linear-gradient(180deg,rgba(255,215,0,.08),rgba(214,51,255,.055)); border:1px solid color-mix(in srgb,var(--chat-accent) 32%,rgba(255,255,255,.08)); border-left:3px solid var(--chat-accent); border-radius:16px; min-height:88px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 34px rgba(0,0,0,.18); scrollbar-width:thin; scrollbar-color:rgba(255,215,0,0.24) transparent; } .feed-chat-snippets::-webkit-scrollbar { width:3px; } .feed-chat-snippets::-webkit-scrollbar-thumb { background:rgba(255,215,0,0.25); border-radius:3px; } .feed-chat-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; color:rgba(255,255,255,.72); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.4px; } .feed-chat-head .live-label { display:inline-flex; align-items:center; gap:6px; color:var(--chat-accent); } .feed-chat-head .live-label::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--chat-accent); box-shadow:0 0 8px var(--chat-accent); animation:blink 1.5s infinite; } .feed-chat-head .live-state { color:var(--muted-dim); font-size:9px; } .chat-snippet-list { display:flex; flex-direction:column; gap:2px; } .chat-snippet-item { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:13px; color:var(--muted); line-height:1.4; } .chat-snippet-item:last-child { border-bottom:none; } .chat-snippet-item .sender { font-weight:700; color:var(--text); white-space:nowrap; } .chat-snippet-item .msg-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chat-snippet-item .msg-time { font-size:10px; color:color-mix(in srgb,var(--chat-accent) 42%,rgba(255,255,255,.34)); white-space:nowrap; } .chat-snippet-item.is-new { margin:0 -6px; padding-left:6px; padding-right:6px; border-radius:10px; background:rgba(255,215,0,.11); animation:chatSnippetIn .38s ease-out both; } @keyframes chatSnippetIn { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} } .feed-room-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.06); } .feed-room-footer .live-count { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--yellow); } .feed-room-footer .live-count .live-dot { width:8px; height:8px; background:#4CAF50; border-radius:50%; animation:blink 1.5s infinite; } .feed-room-footer .join-btn { background:var(--yellow); color:#000; border:none; padding:10px 24px; border-radius:30px; font-weight:800; font-size:13px; cursor:pointer; transition:transform 0.15s ease; } .feed-room-footer .join-btn:active { transform:scale(0.95); } .drag-line{ width:40px; height:4px; background:rgba(255,255,255,.2); border-radius:999px; margin:0 auto 14px; } .sheet-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .sheet-header h1{ font-size:22px; font-weight:900; letter-spacing:-0.5px; } .room-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.05); border-radius:18px; padding:14px; cursor:pointer; margin-bottom:10px; } .room-card.active{ border-color:rgba(255,215,0,.35); background:rgba(255,215,0,0.02); } .room-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .room-name{ font-size:15px; font-weight:800; display:flex; align-items:center; gap:6px; color:white; } .badge{ padding:4px 8px; border-radius:8px; font-size:10px; font-weight:700; display:inline-flex; align-items:center; gap:4px; } .badge.timeout{ background:rgba(255,107,122,.12); color:var(--red); border:1px solid rgba(255,107,122,0.15); } .badge.verified{ background:rgba(77,163,255,.12); color:#4da3ff; } .badge.count{ background:rgba(255,215,0,.1); color:var(--yellow); } .safety-modal{ position:fixed; inset:0; z-index:11000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.7); padding:16px; backdrop-filter:blur(5px); } .safety-modal.open{ display:flex; } .safety-sheet{ width:100%; max-width:380px; background:#0b0b18; border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:24px; } .safety-sheet h2{ font-size:18px; margin-bottom:6px; font-weight:800; color:var(--yellow); } .safety-sheet p{ font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:16px; } .safety-actions{ display:flex; flex-direction:column; gap:10px; } .safety-actions button{ border:none; border-radius:12px; padding:14px; font-weight:700; font-size:13px; cursor:pointer; background:rgba(255,255,255,.06); color:white; display:flex; justify-content:space-between; align-items:center; } .safety-actions button.sos-action { background:var(--sos); color:white; justify-content:center; gap:8px; } .status-indicator{ font-size:10px; padding:2px 6px; border-radius:6px; font-weight:800; } .status-indicator.secured{ background:rgba(109,255,139,.14); color:#6DFF8B; } .status-indicator.exposed{ background:rgba(255,107,122,.14); color:var(--red); } .app-modal.sos-confirm-modal { z-index:21000; padding:16px; padding-bottom:16px; } .sos-confirm-sheet { position:relative; width:min(390px, 100%); background:linear-gradient(180deg,rgba(40,8,18,.98),rgba(10,10,20,.98)); border:1px solid rgba(255,23,68,.38); border-radius:20px; padding:22px; box-shadow:0 24px 70px rgba(0,0,0,.72), 0 0 34px rgba(255,23,68,.2); color:#fff; } .sos-confirm-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; cursor:pointer; } .sos-confirm-icon { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:rgba(255,23,68,.16); color:#fff; border:1px solid rgba(255,23,68,.4); box-shadow:0 0 24px rgba(255,23,68,.25); margin-bottom:14px; } .sos-confirm-icon .material-icons-outlined { font-size:30px; color:#ff6b7a; } .sos-confirm-sheet h3 { margin:0 42px 8px 0; font-size:21px; line-height:1.1; font-weight:900; color:#fff; } .sos-confirm-sheet p { margin:0 0 14px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.45; } .sos-location-chip { display:flex; align-items:center; gap:8px; min-height:40px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.9); font-size:12px; font-weight:700; margin-bottom:16px; overflow:hidden; } .sos-location-chip span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sos-confirm-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:10px; } .sos-confirm-actions button { border:0; border-radius:14px; padding:13px 14px; font-weight:900; cursor:pointer; } .sos-confirm-actions .secondary { background:rgba(255,255,255,.09); color:#fff; } .sos-confirm-actions .primary { background:var(--sos); color:#fff; box-shadow:0 12px 30px rgba(255,23,68,.28); display:inline-flex; justify-content:center; align-items:center; gap:8px; } .locating-bar { display:flex; align-items:center; gap:10px; padding:12px; background:rgba(255,215,0,0.05); border:1px solid rgba(255,215,0,0.15); border-radius:16px; margin-bottom:12px; } .mini-loader { width:14px; height:14px; border:2px solid rgba(255,255,255,0.1); border-top-color:var(--yellow); border-radius:50%; animation:spin 0.8s linear infinite; } .onboarding-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:10002; display:none; align-items:center; justify-content:center; backdrop-filter:blur(5px); } .onboarding-overlay.active { display:flex; } .onboarding-card { width:85%; max-width:320px; background:var(--glass-dark); border:1px solid var(--yellow); border-radius:20px; padding:24px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,0.8); animation:slideUpModal 0.4s cubic-bezier(0.16,1,0.3,1); } .onboarding-card h2 { color:var(--yellow); margin-bottom:12px; font-weight:800; } .onboarding-card p { font-size:14px; color:var(--text); line-height:1.6; margin-bottom:24px; } .onboarding-footer { display:flex; gap:12px; flex-direction:column; } .onboarding-footer button { width:100%; padding:14px; border-radius:12px; font-weight:700; cursor:pointer; border:none; } .onboarding-footer .secondary { background:rgba(255,255,255,0.1); color:white; } .onboarding-footer .primary { background:var(--yellow); color:black; } .onboarding-footer .guest-btn { background:rgba(255,255,255,0.06); color:var(--muted); border:1px solid rgba(255,255,255,0.1); } .highlight-pulse { box-shadow:0 0 0 4px var(--yellow) !important; animation:pulse-border 1.5s infinite !important; z-index:10003 !important; position:relative !important; pointer-events:none !important; } .legend-dot { width:12px; height:12px; border-radius:50%; } .heat-legend { position:absolute; top:130px; left:50%; transform:translateX(-50%); background:var(--glass-dark); border:1px solid rgba(255,215,0,0.2); border-radius:16px; padding:16px; width:90%; max-width:300px; display:none; flex-direction:column; gap:12px; z-index:1100; box-shadow:0 10px 40px rgba(0,0,0,0.6); } #filterPanel button{background:var(--magenta);color:#fff;border:none;padding:10px;border-radius:12px;cursor:pointer;font-weight:600;transition:opacity .2s;} #filterPanel button:active{opacity:0.8;} #filterPanel .filter-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px;} #filterPanel .filter-actions .secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.08);} .header { position:absolute; top:0; left:0; width:100%; z-index:1000; background:linear-gradient(180deg,rgba(0,0,0,0.9)0%,rgba(0,0,0,0)100%); padding:15px 20px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; transition:background 0.5s ease; } .header > * { pointer-events:auto; } .header h1 { font-size:1.5rem; font-weight:700; color:var(--magenta); display:flex; align-items:center; gap:10px; margin:0; } .header h1 span { transition: opacity 0.5s ease, max-width 0.5s ease; opacity: 1; max-width: 200px; white-space: nowrap; overflow: hidden; } .header.fade-out h1 span { opacity: 0; max-width: 0; } .header.fade-out h1 { gap: 0; transition: gap 0.5s ease; } .header.fade-out { background:transparent; } .toggle-switch { position:relative; display:inline-block; width:48px; height:24px; } .toggle-switch input { opacity:0; width:0; height:0; } .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; transition:.4s; } .slider:before { position:absolute; content:""; height:16px; width:16px; left:4px; bottom:4px; background-color:white; transition:.4s; } input:checked + .slider { background-color:var(--yellow); } input:checked + .slider:before { transform:translateX(24px); } input:disabled + .slider { opacity:0.5; cursor:not-allowed; } .slider.round { border-radius:24px; } .slider.round:before { border-radius:50%; } .bottom-nav{ position:fixed; bottom:0; left:0; width:100%; background:var(--glass-dark); border-top:1px solid rgba(255,215,0,0.1); display:flex; justify-content:space-around; align-items:center; height:70px; z-index:9999; } .nav-item{ display:flex; flex-direction:column; align-items:center; font-size:10px; cursor:pointer; color:var(--magenta); border:none; background:none; gap:2px; text-decoration:none; } .nav-item i{ font-size:24px; } .nav-item.active{ color:var(--yellow); font-weight:700; text-shadow:0 0 8px rgba(255,215,0,0.5); } #myLocationBtn { position:absolute; bottom:90px; right:16px; padding:12px; border-radius:50%; cursor:pointer; z-index:999; color:var(--yellow); background:rgba(255,255,255,0.1); box-shadow:0 4px 12px rgba(0,0,0,0.5); transition:transform .2s; } #myLocationBtn:active{transform:scale(0.95);} #pulse{ position:absolute; border-radius:50%; pointer-events:none; z-index:5; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,215,0,0.7)0%,rgba(255,215,0,0)70%); opacity:0.8; contain:layout style paint; display:none; } .leaflet-marker-icon-custom { background:transparent; border:none; box-shadow:none; width:20px !important; height:20px !important; margin-left:-10px !important; margin-top:-10px !important; } .hub-timer-wrap { width:40px; height:40px; box-shadow:inset 0 0 0 2px rgba(255,255,255,0.05); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background 0.3s ease; } @keyframes timer-pulse { 0%{transform:scale(1);filter:drop-shadow(0 0 2px var(--red));} 50%{transform:scale(1.1);filter:drop-shadow(0 0 15px var(--red));} 100%{transform:scale(1);filter:drop-shadow(0 0 2px var(--red));} } .pulse-urgent { animation:timer-pulse 1.2s infinite ease-in-out; } @keyframes vibe-glow { 0%{box-shadow:0 0 5px rgba(255,255,255,0.1);} 50%{box-shadow:0 0 var(--glow-spread,12px) rgba(255,255,255,var(--glow-opacity,0.3));} 100%{box-shadow:0 0 5px rgba(255,255,255,0.1);} } .vibe-pulse-glow { animation:vibe-glow 2.5s infinite ease-in-out; } @keyframes hub-flash-yellow { 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.8) drop-shadow(0 0 10px var(--yellow));} } .flash-alert-yellow { animation:hub-flash-yellow 0.4s ease-in-out infinite !important; } @keyframes tour-spotlight { 0%,100%{filter:brightness(1.08) drop-shadow(0 0 10px rgba(255,215,0,.45));} 50%{filter:brightness(1.35) drop-shadow(0 0 20px rgba(255,215,0,.85));} } .office-marker-leaflet { width:40px !important; height:40px !important; margin-left:-20px !important; margin-top:-20px !important; } .office-marker { width:32px; height:32px; border:none !important; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,0.5); transition:transform 0.2s ease, box-shadow 0.2s ease; background:rgba(10,10,20,0.9); } .office-marker.verified { background:rgba(0,0,0,0.85); border-color:var(--yellow); color:var(--yellow); } .office-marker.unverified { background:rgba(25,0,35,0.9); border-color:rgba(214,51,255,0.9); color:#D633FF; } .office-marker:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.5); } .office-marker.low-activity { opacity:0.35; filter:grayscale(0.7); } .office-marker.quiet-hidden { display:none !important; } .office-marker.tour-highlight, .venue-badge.tour-highlight, .popup-pin.tour-highlight { transform:scale(1.18); animation:tour-spotlight 1.4s ease-in-out infinite; z-index:2; } .leaflet-marker-icon-custom.tour-selected-marker { z-index:3000 !important; } .leaflet-marker-icon-custom.tour-dimmable-marker { transition:opacity .36s ease, filter .36s ease; } body.tour-focus-active .leaflet-marker-icon-custom.tour-dimmable-marker { opacity:.16 !important; filter:blur(1.2px) grayscale(.82) saturate(.55); pointer-events:none; } .leaflet-marker-icon-custom.preview-dimmable-marker { opacity:.2 !important; filter:grayscale(.9) saturate(.45); transition:opacity .24s ease, filter .24s ease; } .leaflet-marker-icon-custom.preview-selected-marker { opacity:1 !important; filter:none !important; z-index:3200 !important; } body.tour-map-animating #startVibeNavBtn, body.tour-map-active #startVibeNavBtn, body.tour-map-animating #myLocationBtn, body.tour-map-active #myLocationBtn, body.tour-map-animating #sosBtn, body.tour-map-active #sosBtn { opacity:0 !important; pointer-events:none !important; } /* VENUE HUB MARKERS - Square/Hexagonal Badges */ .venue-marker-leaflet { width:36px !important; height:36px !important; margin-left:-18px !important; margin-top:-18px !important; } .venue-badge { width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; border:2px solid #FFD700; background:rgba(10,10,20,0.95); box-shadow:0 4px 12px rgba(255,215,0,0.28); position:relative; transition:transform 0.2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; } .venue-badge.hex { clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius:0; width:32px; height:36px; border:2px solid #FFD700; } .venue-badge.verified-venue { border-color:#4da3ff; box-shadow:0 4px 15px rgba(77,163,255,0.3); } .venue-badge.closed { opacity:0.4; filter:grayscale(0.9); border-color:rgba(255,255,255,0.15); box-shadow:none; } .venue-badge i { font-size:15px; color:#FFD700; } .venue-badge.verified-venue i { color:#4da3ff; } .venue-badge.closed i { color:rgba(255,255,255,0.3); } .venue-badge.tour-highlight { border-color:var(--magenta); background:radial-gradient(circle at 35% 25%, rgba(255,215,0,.24), rgba(214,51,255,.22) 45%, rgba(10,10,20,.96) 100%); box-shadow:0 14px 34px rgba(214,51,255,.48), 0 0 0 5px rgba(214,51,255,.16); } .venue-badge.tour-highlight i { color:var(--yellow); filter:drop-shadow(0 0 8px rgba(255,215,0,.65)); } .venue-badge.tour-highlight .venue-active-dot { background:var(--magenta); box-shadow:0 0 10px rgba(214,51,255,.9); } .venue-badge .venue-active-dot { position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#4CAF50; border:2px solid #000010; } .venue-badge.closed .venue-active-dot { display:none; } .venue-badge.has-live-count { border-color:#6DFF8B; box-shadow:0 4px 15px rgba(109,255,139,0.32); } .venue-badge .venue-live-count { position:absolute; top:-8px; left:50%; transform:translateX(-50%); min-width:18px; height:18px; border-radius:999px; background:#6DFF8B; border:2px solid #000010; color:#05050d; font-size:9px; font-weight:950; display:flex; align-items:center; justify-content:center; padding:0 5px; line-height:1; box-shadow:0 0 10px rgba(109,255,139,.55); } .venue-badge.closed .venue-live-count { display:none; } .venue-badge .venue-nested-count { position:absolute; bottom:-4px; right:-4px; min-width:14px; height:14px; border-radius:999px; background:#D633FF; border:2px solid #000010; color:white; font-size:7px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 3px; } .venue-badge.closed .venue-nested-count { display:none; } .venue-presence-delta { position:absolute; left:50%; top:-10px; z-index:5; transform:translateX(-50%); font-size:13px; font-weight:950; pointer-events:none; filter:drop-shadow(0 3px 8px rgba(0,0,0,.65)); animation:venuePresenceFloat 1.15s cubic-bezier(.17,.84,.44,1) forwards; } .venue-presence-delta.positive { color:#6DFF8B; text-shadow:0 0 10px rgba(109,255,139,.78); } .venue-presence-delta.negative { color:#FF6B7A; text-shadow:0 0 10px rgba(255,107,122,.78); } @keyframes venuePresenceFloat { 0% { opacity:0; transform:translate(-50%, 6px) scale(.72); filter:blur(0) drop-shadow(0 3px 8px rgba(0,0,0,.65)); } 16% { opacity:1; transform:translate(-50%, -4px) scale(1.14); } 72% { opacity:.92; transform:translate(-50%, -28px) scale(1); filter:blur(0) drop-shadow(0 3px 8px rgba(0,0,0,.45)); } 100% { opacity:0; transform:translate(-50%, -42px) scale(.88); filter:blur(3px) drop-shadow(0 0 0 rgba(0,0,0,0)); letter-spacing:3px; } } /* POPUP ROOM MARKERS - temporary satellite rooms */ .popup-marker-leaflet { width:34px !important; height:34px !important; margin-left:-17px !important; margin-top:-17px !important; } .popup-pin { --vibe-color:#FFD700; --pulse-duration:2.4s; --expiry-progress:100; --timer-color:var(--yellow); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; position:relative; isolation:isolate; color:var(--vibe-color); } .popup-pin::before { content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--vibe-color); opacity:.4; animation:popup-activity-pulse var(--pulse-duration) ease-out infinite; } .popup-pin.private { --vibe-color:var(--magenta); } .popup-pin .popup-expiry-ring { position:absolute; inset:-4px; border-radius:50%; background:conic-gradient(var(--timer-color) calc(var(--expiry-progress) * 1%), rgba(255,255,255,.12) 0); transform:rotate(-90deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); pointer-events:none; z-index:1; } .popup-pin .popup-core { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:2; background:rgba(10,10,20,.95); border:1.5px solid var(--vibe-color); box-shadow:0 4px 14px rgba(0,0,0,.55), 0 0 14px color-mix(in srgb, var(--vibe-color) 38%, transparent); } .popup-pin .popup-glyph { font-size:15px; line-height:1; } .popup-pin .popup-live-dot { position:absolute; right:-2px; top:-2px; width:8px; height:8px; border-radius:50%; background:var(--timer-color); border:2px solid #050510; box-shadow:0 0 8px var(--timer-color); } .popup-pin.activity-low::before { opacity:.24; } .popup-pin.activity-mid::before { opacity:.34; } .popup-pin.activity-hot::before { opacity:.5; } .popup-pin.tour-highlight { transform:scale(1.18); animation:tour-spotlight 1.4s ease-in-out infinite; z-index:2; } @keyframes popup-activity-pulse { 0%{transform:scale(.82);opacity:.48;} 70%{transform:scale(1.45);opacity:0;} 100%{transform:scale(1.45);opacity:0;} } @media (prefers-reduced-motion: reduce) { .popup-pin::before { animation:none; opacity:.22; } } /* CROWD METER */ .crowd-meter { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; } .crowd-dot { width:8px; height:8px; border-radius:50%; } .crowd-dot.quiet { background:#4CAF50; box-shadow:0 0 6px rgba(76,175,80,0.5); } .crowd-dot.buzzing { background:#FFD700; box-shadow:0 0 6px rgba(255,215,0,0.5); } .crowd-dot.packed { background:#FF4500; box-shadow:0 0 6px rgba(255,69,0,0.5); } .crowd-label { font-size:10px; text-transform:uppercase; letter-spacing:0.3px; } /* VENUE CLOSED STATE EVENT CARD in popups/sheet */ .event-specials-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:12px; margin-top:8px; } .event-specials-card .event-title { font-size:13px; font-weight:700; color:var(--yellow); } .event-specials-card .event-detail { font-size:11px; color:var(--muted-dim); margin-top:2px; } .venue-hours-badge { font-size:10px; padding:2px 8px; border-radius:6px; font-weight:700; background:rgba(76,175,80,0.12); color:#4CAF50; } .venue-hours-badge.closed { background:rgba(255,255,255,0.05); color:var(--muted-dim); } .my-location-dot{ width:20px;height:20px;background:#FFD700;border:3px solid white;border-radius:50%;box-shadow:0 0 20px #FFD700;position:relative;} .user-dot { width:20px; height:20px; background:rgba(0,0,0,0.5); border-radius:50%; border:2px solid white; position:relative; display:flex; align-items:center; justify-content:center; transition:box-shadow 0.3s ease-out; } @keyframes rippleEffect { 0%{transform:scale(1);opacity:0.8;} 100%{transform:scale(2.8);opacity:0;} } .ripple { position:absolute; width:100%; height:100%; border-radius:50%; animation:rippleEffect 2s infinite ease-out; pointer-events:none; z-index:-1; } .app-modal{ position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);display:none;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(10px);transition:transform 0.3s ease-out, opacity 0.3s ease-out;padding-bottom:80px;} .app-modal.open { display:flex; transform:translateY(0); opacity:1; } #startVibeModal { box-sizing:border-box; padding:18px 14px 88px; } #startVibeModal .start-vibe-sheet { width:min(92vw,460px); height:auto; max-height:calc(100vh - 118px); padding:22px; display:flex; flex-direction:column; gap:14px; overflow:auto; box-sizing:border-box; background:rgba(10,10,22,.98); border:1px solid rgba(255,215,0,.22); border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.58); } #startVibeModal .start-vibe-sheet::-webkit-scrollbar { width:6px; } #startVibeModal .start-vibe-sheet::-webkit-scrollbar-thumb { background:rgba(255,215,0,.35); border-radius:999px; } #startVibeModal .start-vibe-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } #startVibeModal .start-vibe-title { color:var(--yellow); font-size:22px; font-weight:900; line-height:1.15; margin:0 0 6px; } #startVibeModal .start-vibe-copy { color:var(--muted); font-size:13px; line-height:1.45; margin:0; } #startVibeModal .start-vibe-signal { flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; color:var(--yellow); background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.24); border-radius:14px; } #startVibeModal .start-vibe-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; } #startVibeModal .start-vibe-field { display:flex; flex-direction:column; gap:6px; min-width:0; } #startVibeModal .start-vibe-field label { color:var(--yellow); font-size:11px; font-weight:900; text-transform:uppercase; } #startVibeModal .start-vibe-control { width:100%; min-height:48px; box-sizing:border-box; background:rgba(255,255,255,.065); border:1px solid rgba(214,51,255,.78); border-radius:12px; color:#fff; font:600 13px "Poppins",sans-serif; outline:none; padding:12px 14px; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; } #startVibeModal .start-vibe-control::placeholder { color:rgba(255,255,255,.46); font-weight:500; } #startVibeModal .start-vibe-control:focus { background:rgba(255,255,255,.09); border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,215,0,.12); } #startVibeModal select.start-vibe-control { appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer; } #startVibeModal select.start-vibe-control option { background:#11111d; color:#fff; } #startVibeModal .start-vibe-select-wrap { position:relative; min-width:0; } #startVibeModal .start-vibe-select-wrap::after { content:"expand_more"; font-family:"Material Icons Outlined"; font-feature-settings:"liga"; line-height:1; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--yellow); font-size:20px; pointer-events:none; } #startVibeModal .start-vibe-textarea { min-height:88px; resize:none; line-height:1.45; } #startVibeModal .start-vibe-actions { display:flex; gap:12px; margin-top:2px; } #startVibeModal .start-vibe-secondary, #startVibeModal .start-vibe-primary { min-height:48px; border:0; border-radius:12px; font:800 13px "Poppins",sans-serif; cursor:pointer; } #startVibeModal .start-vibe-secondary { flex:1; background:rgba(255,255,255,.1); color:#fff; } #startVibeModal .start-vibe-primary { flex:2; background:var(--yellow); color:#050507; box-shadow:0 8px 24px rgba(255,215,0,.25); } #startVibeModal .start-vibe-primary:disabled { opacity:.65; cursor:wait; box-shadow:none; } @media (max-width:560px) { #startVibeModal { align-items:flex-start; overflow:auto; padding:12px 10px 90px; } #startVibeModal .start-vibe-sheet { width:100%; max-height:none; padding:18px; border-radius:18px; } #startVibeModal .start-vibe-grid { grid-template-columns:1fr; gap:10px; } #startVibeModal .start-vibe-header { gap:10px; } #startVibeModal .start-vibe-signal { width:38px; height:38px; border-radius:12px; } #startVibeModal .start-vibe-actions { position:sticky; bottom:-18px; padding-top:8px; background:linear-gradient(180deg,rgba(10,10,22,0),rgba(10,10,22,.98) 35%); } } #roomPreviewModal .room-preview-sheet { width:92%; max-width:420px; background:rgba(8,8,18,0.98); border-radius:24px; border:1px solid rgba(255,215,0,0.2); padding:24px; max-height:75vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,0.6); } #roomPreviewModal .drag-line { display:none; } #roomPreviewModal .preview-title-row { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; align-items:flex-start; } #roomPreviewModal .preview-title-row .preview-title { font-size:22px; font-weight:900; letter-spacing:-0.5px; line-height:1.1; } #roomPreviewModal .preview-title-row .preview-clock { appearance:none; -webkit-appearance:none; font:700 13px "Poppins",sans-serif; color:var(--red); display:inline-flex; align-items:center; gap:6px; background:rgba(255,107,122,0.12); padding:8px 12px; border:0; border-radius:14px; white-space:nowrap; } #roomPreviewModal .preview-title-row .preview-clock:not(:disabled) { cursor:pointer; } #roomPreviewModal .preview-title-row .preview-clock:disabled { cursor:default; opacity:1; } #roomPreviewModal .preview-title-row .preview-clock.venue-hours-toggle { color:#6DFF8B; background:rgba(109,255,139,0.12); } #roomPreviewModal .preview-title-row .preview-clock.venue-hours-toggle.closed { color:var(--muted); background:rgba(255,255,255,0.08); } #roomPreviewModal .venue-hours-arrow { font-size:15px; transition:transform .18s ease; } #roomPreviewModal .preview-clock[aria-expanded="true"] .venue-hours-arrow { transform:rotate(180deg); } #roomPreviewModal .preview-meta { font-size:12px; color:var(--muted); margin-bottom:12px; } #roomPreviewModal .venue-cover-photo { width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; margin:0 0 14px; border:1px solid rgba(255,255,255,0.1); background:linear-gradient(135deg,rgba(255,215,0,0.12),rgba(214,51,255,0.1)); box-shadow:0 16px 36px rgba(0,0,0,0.34); } #roomPreviewModal .venue-cover-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; } #roomPreviewModal .venue-cover-photo.placeholder { display:grid; place-items:center; padding:18px; text-align:center; color:#fff; } #roomPreviewModal .venue-cover-photo.placeholder span { display:block; color:var(--yellow); font-size:11px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; margin-bottom:5px; } #roomPreviewModal .venue-cover-photo.placeholder strong { font-size:20px; line-height:1.08; } #roomPreviewModal .venue-short-bio { margin:0 0 14px; color:#f7f2ff; font-size:13px; line-height:1.5; } #roomPreviewModal .venue-rating-summary { margin:0 0 12px; padding:11px 12px; border:1px solid rgba(255,215,0,0.16); border-radius:14px; background:rgba(255,215,0,0.075); } #roomPreviewModal .venue-rating-score { display:flex; align-items:center; gap:7px; color:var(--yellow); font-size:12px; font-weight:900; } #roomPreviewModal .venue-rating-score .material-icons-outlined { font-size:17px; } #roomPreviewModal .venue-rating-score strong { color:#fff; font-size:18px; line-height:1; } #roomPreviewModal .venue-rating-score span:last-child { color:var(--muted); font-size:11px; font-weight:800; } #roomPreviewModal .venue-rating-breakdown { margin-top:5px; color:var(--muted-dim); font-size:11px; font-weight:800; } #roomPreviewModal .venue-place-details { display:flex; flex-direction:column; gap:8px; margin:0 0 12px; } #roomPreviewModal .venue-place-row { display:flex; align-items:flex-start; gap:9px; padding:10px 11px; border:1px solid rgba(255,255,255,0.075); border-radius:14px; background:rgba(255,255,255,0.035); color:var(--muted); line-height:1.35; } #roomPreviewModal .venue-place-row .material-icons-outlined { color:var(--yellow); font-size:17px; margin-top:1px; flex-shrink:0; } #roomPreviewModal .venue-place-row strong { display:block; color:#fff; font-size:12px; margin-bottom:2px; } #roomPreviewModal .venue-action-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px; margin:12px 0; } #roomPreviewModal .venue-action-card { width:100%; min-height:92px; border:1px solid rgba(255,255,255,0.09); border-radius:18px; padding:13px; background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.035)); color:#fff; text-align:left; display:flex; flex-direction:column; justify-content:space-between; gap:10px; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease; } #roomPreviewModal .venue-action-card:hover { transform:translateY(-2px); border-color:rgba(255,215,0,0.42); background:rgba(255,215,0,0.08); } #roomPreviewModal .venue-action-card.is-disabled { opacity:.6; cursor:not-allowed; border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); transform:none; } #roomPreviewModal .venue-action-card.is-disabled:hover { transform:none; border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); } #roomPreviewModal .venue-action-card .material-icons-outlined { color:var(--yellow); font-size:21px; } #roomPreviewModal .venue-action-card.is-disabled .material-icons-outlined { color:var(--muted-dim); } #roomPreviewModal .venue-action-card strong { display:block; font-size:13px; line-height:1.1; margin-bottom:4px; } #roomPreviewModal .venue-action-card small { display:block; color:var(--muted-dim); font-size:10px; line-height:1.3; } #roomPreviewModal .venue-hours-panel { margin:0 0 12px; padding:12px; border:1px solid rgba(255,255,255,0.08); border-radius:16px; background:rgba(255,255,255,0.035); } #roomPreviewModal .venue-hours-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--muted); font-size:12px; } #roomPreviewModal .venue-hours-row:last-child { border-bottom:0; } #roomPreviewModal .venue-hours-row.is-today { color:#fff; font-weight:800; } #roomPreviewModal .venue-hours-row span:last-child { color:var(--yellow); text-align:right; } #roomPreviewModal .roster-title { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--muted-dim); margin-bottom:10px; } #roomPreviewModal .avatar-grid { display:flex; gap:10px; margin-bottom:18px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 10px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(255,215,0,.25) transparent; } #roomPreviewModal .avatar-grid::-webkit-scrollbar { height:4px; } #roomPreviewModal .avatar-grid::-webkit-scrollbar-thumb { background:rgba(255,215,0,.28); border-radius:999px; } #roomPreviewModal .avatar-card { flex:0 0 132px; min-height:134px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:18px; padding:14px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; opacity:1; animation:avatarBounceIn 0.6s cubic-bezier(0.34,1.56,0.64,1) backwards; scroll-snap-align:start; transition:transform .16s ease,border-color .16s ease,background .16s ease; } #roomPreviewModal .avatar-card.creator { background:linear-gradient(180deg,rgba(255,215,0,.16),rgba(214,51,255,.08)); border-color:rgba(255,215,0,.45); box-shadow:0 12px 28px rgba(255,215,0,.08), inset 0 1px 0 rgba(255,255,255,.08); } #roomPreviewModal .avatar-card:hover { opacity:1; transform:translateY(-2px); } @keyframes avatarBounceIn { 0%{opacity:0;transform:translateY(30px) scale(0.5);} 100%{opacity:1;transform:translateY(0) scale(1);} } #roomPreviewModal .avatar-icon-wrapper { width:44px; height:44px; border-radius:50%; background:rgba(255,215,0,0.1); display:flex; align-items:center; justify-content:center; color:var(--yellow); font-size:18px; } #roomPreviewModal .avatar-card.creator .avatar-icon-wrapper { background:rgba(255,215,0,.18); color:var(--yellow); box-shadow:0 0 18px rgba(255,215,0,.18); } #roomPreviewModal .avatar-name { width:100%; font-size:12px; font-weight:700; color:#fff; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #roomPreviewModal .avatar-role { max-width:100%; border-radius:999px; padding:4px 8px; background:rgba(255,255,255,.07); color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #roomPreviewModal .avatar-card.creator .avatar-role { background:rgba(255,215,0,.16); color:var(--yellow); } #roomPreviewModal .btn-unlock { width:100%; border:none; background:rgba(214,51,255,0.15); color:#efb3ff; font-size:11px; padding:8px 0; border-radius:12px; cursor:pointer; font-weight:700; } #roomPreviewModal .btn-unlock:hover { background:var(--magenta); color:#000; } #roomPreviewModal .preview-actions { display:flex; gap:10px; margin-top:4px; } #roomPreviewModal .preview-actions button { flex:1; border:none; border-radius:16px; padding:14px; font-weight:700; cursor:pointer; transition:transform 0.16s ease, box-shadow 0.16s ease; } #roomPreviewModal .preview-actions .secondary { background:rgba(255,255,255,0.08); color:#fff; } #roomPreviewModal .preview-actions .primary { background:linear-gradient(135deg,#FFCE00,#FF8C00); color:#000; box-shadow:0 12px 30px rgba(255,140,0,0.2); } #roomPreviewModal .preview-actions .safety-score-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:12px; font-size:11px; font-weight:700; } #roomPreviewModal.app-modal { z-index:10060; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; align-items:stretch; justify-content:stretch; padding:0; pointer-events:none; } #roomPreviewModal.app-modal.open { display:block; } #roomPreviewModal .room-preview-sheet { position:fixed; left:50%; bottom:calc(var(--shell-bottom-nav, 72px) + 16px + env(safe-area-inset-bottom)); width:min(420px, calc(100vw - 24px)); max-height:min(58vh, 520px); padding:18px 18px 0; border-radius:8px; background:rgba(8,8,18,.94); border:1px solid rgba(255,215,0,.18); box-shadow:0 18px 48px rgba(0,0,0,.48); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-width:none; -ms-overflow-style:none; transform:translate(-50%, calc(100% + 28px)); opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; } #roomPreviewModal .room-preview-sheet::-webkit-scrollbar { width:0; height:0; } #roomPreviewModal .preview-actions { position:sticky; bottom:0; z-index:3; margin:12px -18px 0; padding:12px 18px calc(18px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(8,8,18,0),rgba(8,8,18,.96) 28%,rgba(8,8,18,.98)); border-top:1px solid rgba(255,255,255,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } #roomPreviewModal.open .room-preview-sheet { transform:translate(-50%, 0); opacity:1; pointer-events:auto; } @media (max-width: 759px) { #roomPreviewModal.app-modal { background:rgba(0,0,0,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); pointer-events:auto; } #roomPreviewModal .room-preview-sheet { top:12px; bottom:calc(12px + env(safe-area-inset-bottom)); height:auto; max-height:none; overflow-y:auto; overflow-x:hidden; background:rgba(8,8,18,.98); box-shadow:0 24px 70px rgba(0,0,0,.72); } } @media (min-width: 760px) { #roomPreviewModal .room-preview-sheet { left:auto; right:16px; width:390px; max-height:min(68vh, 620px); transform:translateX(calc(100% + 28px)); } #roomPreviewModal.open .room-preview-sheet { transform:translateX(0); } } .join-mode-modal { z-index:10090; padding:16px; } .join-mode-modal .join-mode-sheet { width:min(430px, calc(100vw - 28px)); max-height:min(82vh, 620px); overflow:auto; background:rgba(8,8,18,0.98); border:1px solid rgba(255,215,0,0.22); border-radius:22px; box-shadow:0 24px 70px rgba(0,0,0,0.68); padding:20px; color:#fff; } .join-mode-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .join-mode-icon { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--yellow); background:rgba(255,215,0,0.12); } .join-mode-icon .material-icons-outlined { font-size:24px; } .join-mode-kicker { display:block; color:var(--yellow); font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; margin-bottom:4px; } .join-mode-modal h3 { margin:0; font-size:21px; line-height:1.15; } .join-mode-modal p { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.45; } .join-mode-summary { display:grid; gap:8px; margin-bottom:14px; } .join-mode-summary div { border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:11px 12px; background:rgba(255,255,255,0.045); } .join-mode-summary span { display:block; color:var(--muted-dim); font-size:10px; font-weight:900; letter-spacing:.45px; text-transform:uppercase; margin-bottom:4px; } .join-mode-summary strong { display:block; color:#fff; font-size:14px; line-height:1.25; overflow-wrap:anywhere; } .join-mode-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; } .join-mode-options button { min-height:118px; border:1px solid rgba(255,255,255,0.09); border-radius:16px; background:rgba(255,255,255,0.045); color:#fff; padding:13px; text-align:left; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; gap:10px; transition:transform .16s ease, border-color .16s ease, background .16s ease; } .join-mode-options button:hover { transform:translateY(-1px); border-color:rgba(255,215,0,0.35); } .join-mode-options button.is-active { border-color:rgba(255,215,0,0.72); background:rgba(255,215,0,0.12); box-shadow:0 0 0 1px rgba(255,215,0,0.08) inset; } .join-mode-options .material-icons-outlined { color:var(--yellow); font-size:22px; } .join-mode-options strong { display:block; font-size:13px; line-height:1.2; margin-bottom:4px; } .join-mode-options small { display:block; color:var(--muted); font-size:10px; line-height:1.35; } .join-mode-actions { display:flex; gap:10px; } .join-mode-actions button { flex:1; border:0; border-radius:14px; padding:13px 10px; font-weight:900; cursor:pointer; } .join-mode-actions .secondary { background:rgba(255,255,255,0.08); color:#fff; } .join-mode-actions .primary { background:var(--yellow); color:#000; } @media (max-width: 430px) { .join-mode-options { grid-template-columns:1fr; } .join-mode-options button { min-height:auto; } } .venue-info-modal { padding:18px; z-index:10080; } .venue-info-modal .venue-info-sheet { width:min(430px, calc(100vw - 28px)); max-height:min(76vh, 620px); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; background:rgba(8,8,18,0.98); border:1px solid rgba(255,215,0,0.2); border-radius:22px; box-shadow:0 24px 70px rgba(0,0,0,0.65); padding:18px; color:#fff; } .venue-info-modal .venue-info-sheet::-webkit-scrollbar { width:0; height:0; display:none; } .venue-info-modal .venue-info-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; } .venue-info-modal .venue-info-kicker { display:block; color:var(--yellow); font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; margin-bottom:4px; } .venue-info-modal h3 { margin:0; font-size:20px; line-height:1.15; } .venue-info-modal .venue-info-close { width:36px; height:36px; border:0; border-radius:12px; background:rgba(255,255,255,0.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .venue-info-list { display:flex; flex-direction:column; gap:10px; } .venue-info-row { padding:13px; border:1px solid rgba(255,255,255,0.08); border-radius:16px; background:rgba(255,255,255,0.045); } .venue-info-row.has-image { padding:0; overflow:hidden; } .venue-info-image { width:100%; max-height:min(54vh, 560px); object-fit:contain; display:block; background:#07101a; } .venue-info-copy { padding:13px; } .venue-info-row:not(.has-image) .venue-info-copy { padding:0; } .venue-info-row strong { display:block; color:#fff; font-size:14px; margin-bottom:5px; } .venue-info-row p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; } .venue-info-row .venue-info-price { display:inline-block; margin-top:8px; color:var(--yellow); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.4px; } .venue-info-file-card { min-height:120px; display:grid; place-items:center; gap:8px; padding:18px; background:rgba(255,255,255,0.04); color:var(--yellow); text-align:center; text-decoration:none; } .venue-info-file-card .material-icons-outlined { font-size:32px; } .venue-info-file-card span { color:var(--muted); font-size:12px; font-weight:800; } .venue-info-link-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .venue-info-link-row a { color:var(--yellow); border:1px solid rgba(255,215,0,0.2); background:rgba(255,215,0,0.08); border-radius:999px; padding:7px 9px; font-size:11px; font-weight:900; text-decoration:none; } .venue-info-empty { border:1px dashed rgba(255,255,255,0.14); border-radius:16px; padding:16px; color:var(--muted); font-size:13px; line-height:1.45; background:rgba(255,255,255,0.035); } .venue-menu-pdf { width:100%; height:min(56vh, 520px); min-height:360px; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); } .venue-menu-pdf iframe { width:100%; height:100%; border:0; display:block; background:#fff; } .venue-info-primary-link { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; min-height:46px; border-radius:15px; background:linear-gradient(135deg,#FFCE00,#FF8C00); color:#08080f; font-size:13px; font-weight:900; text-decoration:none; box-shadow:0 12px 28px rgba(255,140,0,0.18); } .reservation-modal { padding:18px; z-index:10070; } .reservation-modal .reservation-sheet { width:min(460px, calc(100vw - 28px)); max-height:min(84vh, 720px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:rgba(8,8,18,0.98); border:1px solid rgba(255,215,0,0.22); border-radius:22px; box-shadow:0 24px 70px rgba(0,0,0,0.68); padding:18px; color:#fff; } .reservation-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; } .reservation-head small { display:block; color:var(--yellow); font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; margin-bottom:4px; } .reservation-head h3 { margin:0; font-size:21px; line-height:1.15; } .reservation-close { width:36px; height:36px; border:0; border-radius:12px; background:rgba(255,255,255,0.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .reservation-form { display:flex; flex-direction:column; gap:12px; } .reservation-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .reservation-field { display:flex; flex-direction:column; gap:6px; } .reservation-field.full { grid-column:1 / -1; } .reservation-field label { color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.35px; text-transform:uppercase; } .reservation-field input, .reservation-field select, .reservation-field textarea { width:100%; min-height:44px; border:1px solid rgba(255,255,255,0.1); border-radius:14px; background:rgba(255,255,255,0.055); color:#fff; padding:11px 12px; font:600 13px "Poppins",sans-serif; outline:none; } .reservation-field textarea { resize:vertical; min-height:78px; line-height:1.4; } .reservation-field input:focus, .reservation-field select:focus, .reservation-field textarea:focus { border-color:rgba(255,215,0,0.55); box-shadow:0 0 0 3px rgba(255,215,0,0.08); } .reservation-field select option { background:#11111d; color:#fff; } .reservation-actions { display:flex; gap:10px; position:sticky; bottom:0; z-index:3; margin:4px -18px 0; padding:12px 18px calc(18px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(8,8,18,0),rgba(8,8,18,.96) 28%,rgba(8,8,18,.98)); border-top:1px solid rgba(255,255,255,.08); } .reservation-actions button { flex:1; min-height:46px; border:0; border-radius:15px; font-weight:900; cursor:pointer; } .reservation-actions .secondary { background:rgba(255,255,255,0.08); color:#fff; } .reservation-actions .primary { background:linear-gradient(135deg,#FFCE00,#FF8C00); color:#08080f; box-shadow:0 12px 28px rgba(255,140,0,0.18); } @media (max-width: 759px) { .reservation-modal { padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); } .reservation-modal .reservation-sheet { max-height:calc(100vh - 24px - env(safe-area-inset-bottom)); max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)); padding:18px 18px 0; } .reservation-actions { margin:4px -18px 0; padding-bottom:calc(18px + env(safe-area-inset-bottom)); } } .reservation-thread-modal { padding:18px; z-index:2260; } .reservation-thread-sheet { width:min(500px, calc(100vw - 28px)); max-height:min(84vh, 720px); overflow:hidden; display:flex; flex-direction:column; background:rgba(8,8,18,0.98); border:1px solid rgba(255,215,0,0.22); border-radius:22px; box-shadow:0 24px 70px rgba(0,0,0,0.68); color:#fff; } .reservation-thread-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 18px 12px; border-bottom:1px solid rgba(255,255,255,0.08); } .reservation-thread-head small { display:block; color:var(--yellow); font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; margin-bottom:4px; } .reservation-thread-head h3 { margin:0; font-size:21px; line-height:1.15; } .reservation-thread-close { width:36px; height:36px; border:0; border-radius:12px; background:rgba(255,255,255,0.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .reservation-thread-summary { margin:12px 18px 0; border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:12px; background:rgba(255,255,255,0.045); color:var(--muted); font-size:12px; line-height:1.5; } .reservation-thread-summary strong { display:block; color:#fff; font-size:14px; margin-bottom:3px; } .reservation-thread-list { flex:1; min-height:180px; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:14px 18px 18px; } .reservation-thread-empty { border:1px dashed rgba(255,255,255,0.14); border-radius:16px; padding:16px; color:var(--muted); font-size:13px; line-height:1.45; background:rgba(255,255,255,0.035); } .reservation-thread-bubble { max-width:86%; border-radius:16px; padding:11px 12px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); } .reservation-thread-bubble.venue { background:rgba(255,215,0,0.13); border-color:rgba(255,215,0,0.2); } .reservation-thread-bubble.user { margin-left:auto; background:rgba(76,163,255,0.14); border-color:rgba(76,163,255,0.2); } .reservation-thread-bubble span { display:block; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.35px; text-transform:uppercase; margin-bottom:5px; } .reservation-thread-bubble p { margin:0; color:#fff; font-size:13px; line-height:1.45; white-space:pre-wrap; } @media (max-width: 430px) { #roomPreviewModal .venue-action-grid { grid-template-columns:1fr; } .venue-menu-pdf { height:54vh; min-height:310px; } .reservation-grid { grid-template-columns:1fr; } } #nearestHubPrompt .nearest-hub-sheet { width:92%; max-width:380px; background:rgba(8,8,18,0.98); border:1px solid rgba(255,215,0,0.18); border-radius:22px; padding:22px; box-shadow:0 22px 60px rgba(0,0,0,0.62); text-align:left; } #nearestHubPrompt .prompt-icon { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(255,215,0,0.12); color:var(--yellow); margin-bottom:14px; } #nearestHubPrompt .prompt-icon .material-icons-outlined { font-size:25px; } #nearestHubPrompt h3 { margin:0 0 8px; color:#fff; font-size:20px; line-height:1.15; } #nearestHubPrompt p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; } #nearestHubPrompt .nearest-zone-list { display:flex; flex-direction:column; gap:8px; margin:16px 0; } #nearestHubPrompt .nearest-zone-option { width:100%; border:1px solid rgba(255,255,255,0.08); border-radius:14px; background:rgba(255,255,255,0.055); color:#fff; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; cursor:pointer; } #nearestHubPrompt .nearest-zone-option.is-selected { border-color:rgba(255,215,0,0.75); background:rgba(255,215,0,0.12); box-shadow:0 0 0 1px rgba(255,215,0,0.08) inset; } #nearestHubPrompt .nearest-zone-option:disabled { cursor:not-allowed; opacity:.45; } #nearestHubPrompt .nearest-zone-name { font-size:14px; font-weight:800; margin-bottom:3px; } #nearestHubPrompt .nearest-zone-meta { color:var(--muted-dim); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; } #nearestHubPrompt .nearest-zone-count { min-width:58px; border-radius:999px; padding:7px 10px; background:rgba(255,215,0,0.14); color:var(--yellow); font-size:11px; font-weight:900; text-align:center; } #nearestHubPrompt .prompt-actions { display:flex; gap:10px; } #nearestHubPrompt .prompt-actions button { flex:1; border:0; border-radius:14px; padding:13px 10px; font-weight:800; font-size:12px; cursor:pointer; } #nearestHubPrompt .prompt-actions button:disabled { opacity:.45; cursor:not-allowed; } #nearestHubPrompt .prompt-actions .secondary { background:rgba(255,255,255,0.08); color:#fff; } #nearestHubPrompt .prompt-actions .primary { background:var(--yellow); color:#000; } #hubZoneModal { z-index:10090; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); } #hubZoneModal .hub-zone-sheet { width:min(390px, calc(100vw - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px - env(safe-area-inset-bottom)); background:rgba(8,8,18,.98); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:20px; box-shadow:0 22px 60px rgba(0,0,0,.62); color:#fff; display:flex; flex-direction:column; overflow:hidden; } #hubZoneModal .hub-zone-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; flex:0 0 auto; } #hubZoneModal h3 { margin:0 0 5px; font-size:20px; line-height:1.15; } #hubZoneModal p { margin:0; color:var(--muted); font-size:13px; line-height:1.4; } #hubZoneModal .hub-zone-close { width:36px; height:36px; border:0; border-radius:12px; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } #hubZoneModal .hub-zone-list { display:flex; flex-direction:column; gap:8px; margin-top:15px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding-right:2px; scrollbar-width:thin; scrollbar-color:rgba(255,215,0,.32) transparent; } #hubZoneModal .hub-zone-list::-webkit-scrollbar { width:4px; } #hubZoneModal .hub-zone-list::-webkit-scrollbar-thumb { background:rgba(255,215,0,.34); border-radius:999px; } #hubZoneModal .hub-zone-option { width:100%; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.055); color:#fff; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; cursor:pointer; } #hubZoneModal .hub-zone-option.is-selected { border-color:rgba(255,215,0,.75); background:rgba(255,215,0,.12); } #hubZoneModal .hub-zone-name { font-size:14px; font-weight:900; margin-bottom:3px; } #hubZoneModal .hub-zone-meta { color:var(--muted-dim); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; } #hubZoneModal .hub-zone-count { min-width:62px; border-radius:999px; padding:7px 10px; background:rgba(255,215,0,.14); color:var(--yellow); font-size:11px; font-weight:900; text-align:center; } .hub-preview-tour-card { position:fixed; left:50%; bottom:calc(var(--shell-bottom-nav) + 14px + env(safe-area-inset-bottom)); width:min(92vw,420px); z-index:1002; transform:translate(-50%,18px); opacity:0; pointer-events:none; background:rgba(8,8,18,.94); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:14px; color:#fff; box-shadow:0 18px 48px rgba(0,0,0,.48); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); transition:opacity .22s ease,transform .22s ease; } .hub-preview-tour-card.open { opacity:1; pointer-events:auto; transform:translate(-50%,0); } .tour-card-top { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; margin-bottom:10px; } .tour-card-progress { color:var(--yellow); font-size:11px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; text-align:center; } .tour-card-controls { display:flex; align-items:center; gap:7px; } .tour-card-skip,.tour-card-back,.tour-card-pause { border:0; background:rgba(255,255,255,.08); color:#fff; border-radius:999px; font:800 11px "Poppins",sans-serif; cursor:pointer; } .tour-card-skip,.tour-card-pause { padding:7px 11px; } .tour-card-pause.is-paused { background:rgba(255,215,0,.16); color:var(--yellow); } .tour-card-back { width:34px; height:34px; display:grid; place-items:center; padding:0; } .tour-card-back .material-icons-outlined { font-size:20px; } .tour-card-back:disabled { opacity:.35; cursor:not-allowed; } .tour-room-title-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; min-width:0; } .tour-room-title { margin:0; font-size:16px; line-height:1.2; font-weight:900; color:#fff; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tour-verified-badge { display:none; align-items:center; gap:3px; flex-shrink:0; border-radius:999px; padding:4px 7px; background:rgba(77,163,255,.13); color:#8fc3ff; font:900 10px "Poppins",sans-serif; } .tour-verified-badge.is-visible { display:inline-flex; } .tour-verified-badge .material-icons-outlined { font-size:13px; } .tour-room-meta { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; } .tour-room-meta span { border-radius:999px; padding:5px 8px; background:rgba(255,255,255,.07); color:var(--muted); font-size:10px; font-weight:800; } .tour-room-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; } .tour-room-host { min-width:0; color:var(--muted-dim); font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tour-room-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; } .tour-room-open,.tour-room-continue { border:0; border-radius:12px; padding:10px 13px; font:900 12px "Poppins",sans-serif; cursor:pointer; white-space:nowrap; } .tour-room-open { background:var(--yellow); color:#000; } .tour-room-continue { display:none; background:rgba(214,51,255,.16); color:#fff; border:1px solid rgba(214,51,255,.45); } .tour-room-continue.is-visible { display:inline-flex; align-items:center; justify-content:center; } @media (max-width:380px) { .tour-room-footer { align-items:flex-start; flex-direction:column; } .tour-room-actions { width:100%; justify-content:flex-end; flex-wrap:wrap; } } .limited-preview-label { position:absolute; top:15px; left:15px; background:rgba(0,0,10,0.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--yellow); padding:5px 12px; border-radius:20px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; border:1px solid rgba(255,215,0,0.3); z-index:10; display:flex; align-items:center; gap:6px; box-shadow:0 4px 15px rgba(0,0,0,0.5); } .blurred-image { filter:blur(5px); opacity:0.8; } .blurred-bio { filter:blur(3.5px); opacity:0.7; user-select:none; pointer-events:none; } #chatModal{background:#111;display:none;flex-direction:column;} .card-base{ position:relative;width:320px;height:520px;background:var(--glass); border-radius:20px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.5); touch-action:pan-y;} .card-base img{width:100%;height:60%;object-fit:cover;} .card-base .info{ padding:16px;color:#fff;height:40%;display:flex;flex-direction:column;justify-content:space-between;} .card-base .name-age{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px;margin-bottom:4px;} .card-base .name-age .age{background:rgba(255,215,0,0.15);color:var(--yellow);padding:2px 8px;border-radius:12px;font-size:15px;} .card-base .bio{font-size:13px;color:var(--muted);margin-bottom:8px;line-height:1.4;flex-grow:1;overflow-y:auto;min-height:0;scrollbar-width:none;} .card-base .bio::-webkit-scrollbar{display:none;} .card-base .vibe-badge { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:16px;margin-bottom:8px; } .card-base .vibe-badge i { font-size:16px; } .card-base .vibe-badge.social { background:#6BE393; color:#fff; } .card-base .vibe-badge.gaming { background:#FFD700; color:#000; } .card-base .vibe-badge.networking { background:#4285F4; color:#fff; } .card-base .vibe-badge.casual { background:#9932CC; color:#fff; } .card-base .status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:8px;} .card-base .status .dot{width:8px;height:8px;background:#4CAF50;border-radius:50%;animation:blink 1.5s infinite;} @keyframes blink{0%,100%{opacity:1;}50%{opacity:0.4;}} .card-base .actions{display:flex;justify-content:space-between;align-items:center;} .card-base .actions .btn{ width:50px;height:50px;border-radius:50%; display:flex;align-items:center;justify-content:center;cursor:pointer; transition:all .2s;backdrop-filter:blur(4px);} .card-base .actions .nope-btn{background:#FF4444;color:#fff;border:2px solid rgba(255,255,255,0.1);} .card-base .actions .like-btn{background:#FFD700;color:#000;} .card-base .actions .like-btn i{color:#F44336;} .card-base .actions .chat-btn{background:rgba(255,255,255,0.1);color:#fff;} .card-base .actions .chat-btn.locked{opacity:0.4;cursor:not-allowed;} .card-base .actions .superlike-btn{background:var(--magenta);color:var(--yellow);border:2px solid var(--yellow);box-shadow:0 0 15px rgba(214,51,255,0.4);} .card-base .actions .superlike-btn i{text-shadow:0 0 5px rgba(255,215,0,0.8);} .custom-popup .leaflet-popup-content-wrapper { background:rgba(10,10,20,0.95)!important; border:1px solid var(--magenta)!important; border-radius:12px!important; box-shadow:0 0 15px rgba(214,51,255,0.4)!important; color:var(--yellow)!important; text-align:center; padding:0; animation:bounceIn 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); } .custom-popup .leaflet-popup-content { margin:8px 16px!important; font-family:'Poppins',sans-serif!important; font-weight:600!important; font-size:12px!important; } .custom-popup .leaflet-popup-tip { background:rgba(10,10,20,0.95)!important; box-shadow:0 0 15px rgba(214,51,255,0.4)!important; } .venue-map-peek { min-width:178px; color:#fff; text-align:left; } .venue-map-peek-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; } .venue-map-peek-name { color:var(--yellow); font-size:13px; font-weight:900; line-height:1.18; } .venue-map-peek-verified { display:inline-flex; align-items:center; gap:3px; flex-shrink:0; border-radius:999px; padding:3px 6px; background:rgba(77,163,255,.13); color:#8fc3ff; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.25px; } .venue-map-peek-verified .material-icons-outlined { font-size:11px; } .venue-map-peek-meta { margin-top:4px; color:rgba(255,255,255,.78); font-size:11px; line-height:1.3; } .venue-map-peek-distance { display:flex; align-items:center; gap:4px; margin-top:5px; color:#fff; font-size:11px; font-weight:900; } .venue-map-peek-distance .material-icons-outlined { color:var(--yellow); font-size:13px; } .venue-map-peek-rating { display:flex; align-items:center; gap:4px; margin-top:5px; color:var(--yellow); font-size:11px; font-weight:900; line-height:1.2; } .venue-map-peek-rating .material-icons-outlined { font-size:13px; } .venue-map-peek-status { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:4px 7px; border-radius:999px; background:rgba(76,175,80,.12); color:#6DFF8B; font-size:10px; font-weight:900; } .venue-map-peek-status.closed { background:rgba(255,255,255,.08); color:var(--muted); } .venue-map-peek-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; } .venue-map-peek-view-btn { display:inline-flex; align-items:center; gap:3px; border:none; border-radius:999px; padding:5px 10px; background:var(--yellow); color:#000; font-size:10px; font-weight:900; cursor:pointer; text-transform:uppercase; letter-spacing:.25px; } .venue-map-peek-view-btn .material-icons-outlined { font-size:12px; } .venue-map-peek-view-btn:active { transform:scale(.96); } @keyframes bounceIn { 0%{transform:scale(0.5);opacity:0;} 80%{transform:scale(1.1);opacity:1;} 100%{transform:scale(1);} } .nav-icon-wrap { position:relative; width:28px; height:26px; display:grid; place-items:center; flex:0 0 auto; } .nav-badge-dot { position:absolute; top:1px; right:0; transform:none; width:10px; height:10px; background-color:var(--yellow); border-radius:50%; border:2px solid var(--glass-dark); display:none; z-index:10; animation:badgePulse 2s infinite; } @keyframes badgePulse { 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,215,0,0.7);} 70%{transform:scale(1.1);box-shadow:0 0 0 6px rgba(255,215,0,0);} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,215,0,0);} } @keyframes returnPop { 0%{transform:scale(0.8);opacity:0;} 100%{transform:scale(1);opacity:1;} } .restore-animation { animation:returnPop 0.4s cubic-bezier(0.34,1.56,0.64,1); } .marker-cluster-small { background-color:rgba(255,215,0,0.6); } .marker-cluster-medium { background-color:rgba(255,180,0,0.75); } .marker-cluster-large { background-color:rgba(255,140,0,0.85); } .marker-cluster div { color:#000; font-weight:600; border-radius:50%; } .marker-cluster.proximate-cluster { background:transparent; } .proximate-cluster { --cluster-heat:rgba(255,215,0,.56); --cluster-core:rgba(255,215,0,.92); width:46px !important; height:46px !important; margin-left:-23px !important; margin-top:-23px !important; border-radius:50%; overflow:visible !important; } .proximate-cluster .cluster-core { position:relative; width:42px; height:42px; margin:2px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 38% 34%, #fff7b0 0 18%, var(--cluster-core) 48%, rgba(12,12,22,.98) 100%); border:2px solid rgba(255,255,255,.2); box-shadow:0 8px 20px rgba(0,0,0,.42), 0 0 0 2px rgba(255,215,0,.14); color:#090913; font:900 13px "Poppins",sans-serif; z-index:2; } .proximate-cluster .cluster-count { transform:translateY(1px); } .proximate-cluster .cluster-open-count { position:absolute; right:-3px; top:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#6DFF8B; color:#06100a; border:2px solid #070713; font-size:8px; font-weight:950; } .proximate-cluster.venue-open-cluster::before, .proximate-cluster.venue-open-cluster::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--cluster-heat); box-shadow:0 0 18px var(--cluster-heat); opacity:.78; animation:clusterHeatPulse 1.85s ease-out infinite; pointer-events:none; } .proximate-cluster.venue-open-cluster::after { inset:-16px; animation-delay:.58s; opacity:.45; } .proximate-cluster.venue-open-cluster .cluster-core { animation:clusterCoreHeat 2.4s ease-in-out infinite; } .proximate-cluster.cluster-heat-low { --cluster-heat:rgba(109,255,139,.48); --cluster-core:rgba(109,255,139,.86); } .proximate-cluster.cluster-heat-mid { --cluster-heat:rgba(255,215,0,.62); --cluster-core:rgba(255,215,0,.92); } .proximate-cluster.cluster-heat-high { --cluster-heat:rgba(255,107,122,.7); --cluster-core:rgba(255,184,77,.94); } .proximate-cluster.cluster-zooming .cluster-core { animation:clusterZoomFocus .7s cubic-bezier(.2,.8,.2,1); } @keyframes clusterHeatPulse { 0% { transform:scale(.72); opacity:.76; } 70% { transform:scale(1.24); opacity:.14; } 100% { transform:scale(1.36); opacity:0; } } @keyframes clusterCoreHeat { 0%,100% { filter:brightness(1); box-shadow:0 8px 20px rgba(0,0,0,.42), 0 0 0 2px rgba(255,215,0,.14); } 50% { filter:brightness(1.13); box-shadow:0 8px 22px rgba(0,0,0,.46), 0 0 22px var(--cluster-heat); } } @keyframes clusterZoomFocus { 0% { transform:scale(1); } 40% { transform:scale(1.24); } 100% { transform:scale(1); } } .cluster-venue-tray { position:fixed; left:50%; bottom:calc(var(--shell-bottom-nav, 72px) + 16px + env(safe-area-inset-bottom)); width:min(420px, calc(100vw - 24px)); max-height:min(58vh, 520px); z-index:1003; transform:translate(-50%, calc(100% + 28px)); opacity:0; pointer-events:none; background:rgba(8,8,18,.94); border:1px solid rgba(255,215,0,.18); border-radius:8px; box-shadow:0 18px 48px rgba(0,0,0,.48); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); color:#fff; overflow:hidden; transition:opacity .22s ease, transform .22s ease; } .cluster-venue-tray.open { transform:translate(-50%, 0); opacity:1; pointer-events:auto; } .cluster-venue-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px 10px; border-bottom:1px solid rgba(255,255,255,.08); } .cluster-venue-title { display:block; color:var(--yellow); font:900 12px "Poppins",sans-serif; text-transform:uppercase; } .cluster-venue-subtitle { display:block; margin-top:2px; color:var(--muted); font-size:11px; } .cluster-venue-close { width:32px; height:32px; border:0; border-radius:8px; background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; cursor:pointer; } .cluster-venue-tabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); } .cluster-venue-tab { min-width:0; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.055); color:var(--muted); padding:8px 6px; font:800 11px "Poppins",sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; } .cluster-venue-tab.is-active { border-color:rgba(255,215,0,.58); background:rgba(255,215,0,.13); color:var(--yellow); } .cluster-venue-tab:disabled { opacity:.42; cursor:default; } .cluster-venue-tab-count { color:inherit; opacity:.75; font-size:10px; } .cluster-venue-list { display:flex; flex-direction:column; max-height:calc(min(58vh, 520px) - 108px); overflow-y:auto; overscroll-behavior:contain; } .cluster-venue-item { min-height:64px; display:grid; grid-template-columns:42px minmax(0, 1fr) auto; align-items:center; gap:10px; width:100%; padding:11px 12px; border:0; border-bottom:1px solid rgba(255,255,255,.06); background:transparent; color:#fff; text-align:left; font-family:inherit; cursor:pointer; } .cluster-venue-item:hover, .cluster-venue-item:focus-visible, .cluster-venue-item.is-active { background:rgba(255,215,0,.09); outline:none; } .cluster-venue-item.is-active { box-shadow:inset 3px 0 0 var(--yellow); } .cluster-venue-mini-badge { width:36px; height:36px; border:2px solid var(--yellow); border-radius:8px; display:grid; place-items:center; color:var(--yellow); background:rgba(10,10,20,.95); box-shadow:0 4px 14px rgba(255,215,0,.18); } .cluster-venue-mini-badge.verified { border-color:#4da3ff; color:#4da3ff; box-shadow:0 4px 14px rgba(77,163,255,.18); } .cluster-venue-mini-badge.closed { opacity:.48; filter:grayscale(.9); } .cluster-venue-mini-badge.room { border-radius:999px; border-color:rgba(214,51,255,.72); color:#efb3ff; box-shadow:0 4px 14px rgba(214,51,255,.18); } .cluster-venue-main { min-width:0; display:flex; flex-direction:column; gap:3px; } .cluster-venue-main strong { font-size:13px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cluster-venue-main span { color:var(--muted); font-size:11px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cluster-venue-status { border-radius:999px; padding:4px 7px; background:rgba(76,175,80,.12); color:#6DFF8B; font-size:10px; font-weight:800; } .cluster-venue-status.room { background:rgba(214,51,255,.12); color:#efb3ff; } .cluster-venue-status.closed { background:rgba(255,255,255,.06); color:var(--muted); } .cluster-venue-empty { padding:24px 16px; text-align:center; color:var(--muted); font-size:12px; line-height:1.4; } .venue-marker-leaflet.cluster-selected-marker { z-index:3200 !important; } .venue-marker-leaflet.cluster-selected-marker .venue-badge { transform:scale(1.28); box-shadow:0 0 0 5px rgba(255,215,0,.2), 0 0 26px rgba(255,215,0,.72); } .leaflet-marker-icon-custom.cluster-selected-marker .office-marker, .leaflet-marker-icon-custom.cluster-selected-marker .popup-pin { transform:scale(1.2); box-shadow:0 0 0 5px rgba(255,215,0,.2), 0 0 26px rgba(255,215,0,.72) !important; } @media (min-width:760px) { .cluster-venue-tray { left:auto; right:16px; width:390px; max-height:min(68vh, 620px); transform:translateX(calc(100% + 28px)); } .cluster-venue-tray.open { transform:translateX(0); } .cluster-venue-list { max-height:calc(min(68vh, 620px) - 108px); } } body { animation:slideIn 0.4s ease-out; } @keyframes slideIn { from{opacity:0;transform:translateX(-20px);} to{opacity:1;transform:translateX(0);} } body.slide-out { opacity:0; transform:translateX(20px); transition:opacity 0.4s ease, transform 0.4s ease; } /* Imported dashboard shell UI */ :root { --shell-glass:rgba(20,20,35,0.85); --shell-border:rgba(255,215,0,0.16); --shell-muted:var(--muted); --shell-neon:var(--yellow); --shell-accent:var(--magenta); --shell-bottom-nav:72px; --shell-top-nav:146px; } .top-nav-panel { --top-nav-x:0; position:fixed; top:0; left:0; width:100%; z-index:1000; padding:calc(12px + env(safe-area-inset-top)) 14px 10px; background:linear-gradient(to bottom,rgba(0,0,16,.98) 76%,rgba(0,0,16,0)); display:flex; flex-direction:column; gap:10px; pointer-events:none; transform:translateX(var(--top-nav-x)); } .top-nav-panel > * { pointer-events:auto; } .header.top-nav-panel, .header.top-nav-panel.fade-out { background:linear-gradient(to bottom,rgba(0,0,16,.98) 76%,rgba(0,0,16,0)); } .hub-selector-node { background:var(--shell-glass); border:1px solid var(--shell-border); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:16px; padding:11px 12px 11px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; box-shadow:0 12px 40px rgba(0,0,0,.22); max-height:76px; overflow:hidden; transition:max-height .3s cubic-bezier(.2,.8,.2,1),padding .3s cubic-bezier(.2,.8,.2,1),opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1),border-color .22s ease,border-width .22s ease,box-shadow .22s ease; } body.map-view.top-nav-peek .hub-selector-node { max-height:0; padding-top:0; padding-bottom:0; opacity:0; transform:translateY(-10px); border-color:transparent; border-width:0; box-shadow:none; pointer-events:none; } body.list-view.top-nav-peek .hub-selector-node, body.map-loading.top-nav-peek .hub-selector-node { max-height:76px; opacity:1; transform:none; } body.top-nav-dragging .hub-selector-node { transition:none; } .hub-meta { min-width:0; } .hub-zone-trigger { appearance:none; -webkit-appearance:none; border:0; background:transparent; color:inherit; padding:0; text-align:left; cursor:pointer; display:block; flex:1; font-family:inherit; min-width:0; } .hub-zone-trigger:focus-visible { outline:2px solid rgba(255,215,0,.7); outline-offset:4px; border-radius:10px; } .hub-label { display:block; color:var(--shell-muted); font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:2px; min-height:13px; transition:color .18s ease; } .hub-label.is-swapping { animation:hub-context-swap .32s ease; } @keyframes hub-context-swap { 0% { opacity:0; transform:translateY(4px); } 100% { opacity:1; transform:translateY(0); } } .hub-name { color:#fff; font-size:15px; font-weight:800; line-height:1.2; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hub-name-row { display:flex; align-items:center; gap:4px; min-width:0; } .hub-name-row .material-icons-outlined { flex-shrink:0; color:var(--yellow); font-size:18px; } .hub-zone-trigger:hover .hub-name { color:var(--yellow); } .hub-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; } .hub-actions .icon-btn.is-active { border-color:rgba(214,51,255,.45); color:var(--shell-accent); background:rgba(214,51,255,.12); } .hub-actions .icon-btn { position:relative; } #mapSearchBtn .material-icons-outlined, #legendBtn .material-icons-outlined { color:var(--yellow); transition:color .18s ease, transform .18s ease; } #mapSearchBtn.is-active .material-icons-outlined, #legendBtn.is-active .material-icons-outlined { color:var(--magenta); transform:scale(1.05); } .filter-active-badge { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--yellow); color:#000; border:2px solid rgba(0,0,16,.95); font:900 10px "Poppins",sans-serif; } .filter-active-badge.hidden { display:none; } .view-switcher-matrix { width:calc(100% + 28px); margin-left:-14px; margin-right:-14px; display:grid; grid-template-columns:1fr 1fr; gap:4px; background:rgba(10,10,20,.72); padding:4px; border-radius:12px; border:1px solid rgba(255,215,0,.12); } .view-toggle-btn { min-height:42px; border:0; border-radius:10px; background:transparent; color:var(--magenta); font:600 13px "Poppins",sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; } .view-toggle-btn.active-tab { background:var(--yellow); color:#000; box-shadow:0 8px 22px rgba(255,215,0,.18); } .view-toggle-btn .material-icons-outlined { font-size:19px; } .top-nav-peek-handle { width:132px; height:30px; margin:0 auto -4px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(8,8,18,.82); color:var(--shell-muted); display:flex; align-items:center; justify-content:center; gap:6px; font:800 10px "Poppins",sans-serif; letter-spacing:.2px; cursor:grab; touch-action:none; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 28px rgba(0,0,0,.2); } body:not(.map-ready) .top-nav-peek-handle, body.list-view .top-nav-peek-handle { display:none; } .top-nav-peek-handle:active { cursor:grabbing; } #topNavHandleText { max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .top-nav-peek-handle .material-icons-outlined { font-size:16px; color:var(--yellow); transition:transform .2s ease; } body.map-view.top-nav-peek .top-nav-peek-handle .material-icons-outlined { transform:rotate(180deg); } body.map-view .top-nav-panel { padding-bottom:6px; gap:8px; } #searchContainer { top:calc(var(--shell-top-nav) + env(safe-area-inset-top)); background:rgba(255,255,255,.06); border:1px solid var(--shell-border); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 12px 35px rgba(0,0,0,.28); } body.map-view #searchContainer { display:flex; } #filterPanel #searchContainer { position:relative; top:auto; left:auto; transform:none; width:100%; max-width:none; z-index:auto; display:flex; padding:6px 6px 6px 14px; margin-bottom:2px; background:rgba(255,255,255,.055); box-shadow:none; } #filterPanel #searchContainer .header-icon-btn { width:34px; height:34px; min-width:34px; padding:0; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; } body.map-view .live-status-strip { display:none; } body.map-view #filterPanel, body.map-view .heat-legend { top:calc(184px + env(safe-area-inset-top)); } #filterPanel, .heat-legend { top:calc(var(--shell-top-nav) + 102px + env(safe-area-inset-top)); border:1px solid var(--shell-border); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); } #filterPanel { --filter-panel-top:calc(var(--shell-top-nav) + 102px + env(safe-area-inset-top)); top:var(--filter-panel-top); padding-bottom:calc(16px + env(safe-area-inset-bottom)); } body.map-view #filterPanel { --filter-panel-top:calc(184px + env(safe-area-inset-top)); top:var(--filter-panel-top); } #filterPanel::-webkit-scrollbar { width:4px; } #filterPanel::-webkit-scrollbar-thumb { background:rgba(255,215,0,.35); border-radius:999px; } body.list-view .content-sheet { top:calc(var(--shell-top-nav) + 104px + env(safe-area-inset-top)); bottom:var(--shell-bottom-nav); padding-top:0; } body.list-view #roomList { height:100%; min-height:100%; } body.list-view .feed-room-card { height:100%; min-height:100%; padding-bottom:calc(26px + env(safe-area-inset-bottom)); } body.list-view #searchContainer { z-index:65; } #myLocationBtn { bottom:calc(var(--shell-bottom-nav) + 18px); } #sosBtn { bottom:calc(var(--shell-bottom-nav) + 18px); } body.map-view #myLocationBtn { right:16px; bottom:calc(var(--shell-bottom-nav) + 16px); width:44px; height:44px; background:rgba(8,8,18,.72); border:1px solid var(--shell-border); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } body.map-view #sosBtn { left:16px; bottom:calc(var(--shell-bottom-nav) + 16px); width:42px; height:42px; border:1px solid rgba(255,23,68,.55); background:rgba(8,8,18,.78); color:#ff6b7a; animation:none; box-shadow:0 10px 28px rgba(0,0,0,.25); } body.map-view #sosBtn i { font-size:20px; } .bottom-nav { height:var(--shell-bottom-nav); background:var(--glass-dark); border-top:1px solid var(--shell-border); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding-bottom:env(safe-area-inset-bottom); transform:translateZ(0); } .bottom-nav .nav-item { width:25%; color:var(--magenta); gap:4px; position:relative; height:100%; min-width:0; justify-content:center; padding:6px 0 calc(6px + env(safe-area-inset-bottom)); appearance:none; font-family:inherit; } .bottom-nav .nav-item i { font-size:23px; line-height:1; color:inherit; } .bottom-nav .nav-item > span:not(.nav-icon-wrap) { font-size:10px; font-weight:700; line-height:1.1; white-space:nowrap; } .bottom-nav .nav-item.active { color:var(--shell-neon); text-shadow:0 0 8px rgba(255,215,0,.5); } #startVibeNavBtn { position:fixed; left:50%; bottom:calc(var(--shell-bottom-nav) + 18px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:10000; border:0; border-radius:999px; min-width:148px; height:50px; padding:0 18px; background:linear-gradient(135deg,var(--yellow),#ff9f1c); color:#000; box-shadow:0 18px 42px rgba(255,180,0,.28); display:flex; align-items:center; justify-content:center; gap:8px; font:900 13px "Poppins",sans-serif; cursor:pointer; overflow:hidden; transition:width .28s ease,min-width .28s ease,padding .28s ease,opacity .2s ease,transform .2s ease,box-shadow .28s ease; } #startVibeNavBtn .material-icons-outlined { font-size:22px; } #startVibeNavBtn .start-vibe-label { display:inline-block; max-width:82px; opacity:1; white-space:nowrap; overflow:hidden; transition:max-width .24s ease,opacity .18s ease; } #startVibeNavBtn:active { transform:translateX(-50%) scale(.96); } body:not(.map-ready) #startVibeNavBtn, body.map-loading #startVibeNavBtn { opacity:0; pointer-events:none; transform:translateX(-50%) translateY(10px) scale(.96); } body.map-view.map-fab-collapsed #startVibeNavBtn { min-width:56px; width:56px; height:56px; padding:0; gap:0; box-shadow:0 16px 38px rgba(255,180,0,.32); } body.map-view.map-fab-collapsed #startVibeNavBtn .material-icons-outlined { font-size:28px; } body.map-view.map-fab-collapsed #startVibeNavBtn .start-vibe-label { max-width:0; opacity:0; } body.map-view.map-fab-hidden #startVibeNavBtn, body.map-view.map-overlay-open #startVibeNavBtn { opacity:0; pointer-events:none; transform:translateX(-50%) translateY(12px) scale(.92); } body.list-view #startVibeNavBtn, body.list-view #myLocationBtn, body.list-view #sosBtn { display:none; } .live-status-strip { position:absolute; top:calc(var(--shell-top-nav) + 50px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:90%; max-width:520px; z-index:998; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; } .status-pill { min-width:0; min-height:38px; border:1px solid rgba(255,215,0,.12); border-radius:14px; background:rgba(10,10,20,.82); color:#fff; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:center; gap:6px; font:800 11px "Poppins",sans-serif; cursor:pointer; box-shadow:0 10px 26px rgba(0,0,0,.18); } .status-pill .material-icons-outlined { font-size:16px; color:var(--shell-neon); } .status-pill strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .status-pill.privacy strong { color:#6DFF8B; } .status-pill.privacy.exposed strong { color:var(--red); } .live-signals-panel { position:fixed; top:calc(var(--shell-top-nav) + 36px + env(safe-area-inset-top)); left:0; width:min(340px, calc(100vw - 56px)); max-height:calc(100dvh - var(--shell-top-nav) - var(--shell-bottom-nav) - 46px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); z-index:996; pointer-events:none; transform:translateX(0); transition:transform .32s cubic-bezier(.2,.8,.2,1); } .live-signals-panel.is-collapsed { transform:translateX(calc(-100% + 12px)); } .live-signals-panel.is-disabled { transform:translateX(calc(-100% + 12px)); } .live-signals-panel.is-collapsed .live-signals-head, .live-signals-panel.is-collapsed .live-signals-list, .live-signals-panel.is-disabled .live-signals-head, .live-signals-panel.is-disabled .live-signals-list { opacity:0; pointer-events:none; } .dashboard-edge-handle { width:40px; min-width:40px; height:112px; padding:8px 0; border:1px solid rgba(255,215,0,.24); background:rgba(8,8,18,.9); color:var(--yellow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer; pointer-events:auto; box-shadow:10px 16px 34px rgba(0,0,0,.24); font:900 9px "Poppins",sans-serif; letter-spacing:0; line-height:1; text-transform:uppercase; transition:color .2s ease, border-color .2s ease, opacity .2s ease, box-shadow .2s ease; } .dashboard-edge-handle .material-icons-outlined { font-size:22px; } .dashboard-edge-handle-label { display:inline-flex; align-items:center; justify-content:center; width:68px; height:12px; min-height:12px; max-height:12px; writing-mode:horizontal-tb; transform:rotate(90deg); transform-origin:center; white-space:nowrap; overflow:visible; } .dashboard-edge-handle-right .dashboard-edge-handle-label { transform:rotate(-90deg); } .dashboard-edge-handle.is-disabled { color:var(--muted); border-color:rgba(255,215,0,.14); } .dashboard-edge-handle-left { border-left:0; border-radius:0 14px 14px 0; } .dashboard-edge-handle-right { border-right:0; border-radius:14px 0 0 14px; box-shadow:-10px 16px 34px rgba(0,0,0,.24); } .live-signals-handle { position:absolute; top:48px; right:-40px; } .live-signals-handle:focus-visible, .nearby-sheet-restore:focus-visible, .live-signal-action:focus-visible { outline:2px solid var(--yellow); outline-offset:3px; } @keyframes panel-handle-activity-blink { 0%, 100% { border-color:rgba(255,215,0,.22); box-shadow:10px 16px 34px rgba(0,0,0,.24); } 50% { border-color:rgba(255,215,0,.9); color:var(--yellow); box-shadow:0 0 0 5px rgba(255,215,0,.18), 0 0 28px rgba(255,215,0,.62); } } .live-signals-handle.activity-blink, .nearby-sheet-restore.activity-blink { animation:panel-handle-activity-blink .52s ease-in-out 3; } .live-signals-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px 8px 14px; color:#fff; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:0; text-shadow:0 2px 12px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.09); border-left:0; border-radius:0 8px 8px 0; background:rgba(8,8,18,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 14px 30px rgba(0,0,0,.22); transition:opacity .2s ease; } .live-signals-head span { display:inline-flex; align-items:center; gap:6px; min-width:0; } .live-signals-head i { font-size:15px; color:#D7FF3F; } .live-signals-head small { flex:0 0 auto; color:var(--muted); font-size:10px; font-weight:800; text-transform:none; } .live-signals-list { display:flex; flex-direction:column; gap:9px; max-height:calc(100dvh - var(--shell-top-nav) - var(--shell-bottom-nav) - 116px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; pointer-events:auto; padding:9px 0 2px; perspective:900px; transition:opacity .2s ease; } .live-signals-list::-webkit-scrollbar { display:none; } .live-signal-card, .live-signal-skeleton { flex:0 0 auto; width:calc(100% - 12px); min-height:96px; border-radius:0 8px 8px 0; border:1px solid rgba(255,255,255,.1); border-left:0; background:rgba(8,8,18,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 16px 34px rgba(0,0,0,.26); } .live-signal-card { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr) 34px; gap:10px; align-items:center; padding:12px; border-left:3px solid var(--signal-accent,#D7FF3F); transform-origin:left center; transform-style:preserve-3d; opacity:1; transform:translateX(0) rotateY(0) scale(1); transition:opacity .34s ease, transform .34s cubic-bezier(.2,.8,.2,1); will-change:opacity,transform; } .live-signal-card.is-entering { opacity:0; pointer-events:none; transform:translateX(-34px) rotateY(-28deg) scale(.97); } .live-signal-card.is-visible { opacity:1; pointer-events:auto; transform:translateX(0) rotateY(0) scale(1); } .live-signal-card.is-exiting { opacity:0; pointer-events:none; transform:translateX(-30px) rotateY(-18deg) scale(.96); } .live-signal-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--signal-accent,#D7FF3F) 18%,rgba(255,255,255,.08)); color:var(--signal-accent,#D7FF3F); } .live-signal-icon .material-icons-outlined { font-size:18px; } .live-signal-body { min-width:0; } .live-signal-title { color:#fff; font-size:13px; line-height:1.18; font-weight:900; white-space:nowrap; } .live-signal-title, .live-signal-body p { overflow:hidden; text-overflow:ellipsis; } .live-signal-body p { margin:4px 0 7px; color:var(--muted); font-size:11px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .live-signal-meta { display:flex; align-items:center; flex-wrap:wrap; gap:5px; color:var(--muted-dim); font-size:9px; font-weight:800; } .live-signal-meta span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .live-signal-priority { color:#FFD700; } .live-signal-verified { flex:0 0 auto; color:#4DA3FF; font-size:14px; margin-left:5px; vertical-align:-2px; } .live-signal-action { width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; } .live-signal-action .material-icons-outlined { font-size:18px; } .live-signal-skeleton { display:flex; align-items:center; justify-content:center; padding:12px; color:var(--muted); font-size:12px; font-weight:800; } body.list-view .live-signals-panel, body.map-overlay-open .live-signals-panel { display:none; } @media (max-width:430px) { .live-signals-panel { width:min(312px, calc(100vw - 50px)); } } @media (prefers-reduced-motion: reduce) { .live-signals-panel, .dashboard-edge-handle, .live-signal-card { transition:none; } .live-signal-card, .live-signal-card.is-entering, .live-signal-card.is-exiting { opacity:1; transform:none; } } .empty-state { margin:18px 16px 0; min-height:260px; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(255,255,255,.04); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center; } .empty-state i { color:var(--yellow); font-size:34px; } .empty-state h3 { font-size:17px; color:#fff; } .empty-state p { color:var(--muted); font-size:12px; line-height:1.45; max-width:280px; } .empty-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .empty-actions button { border:0; border-radius:999px; padding:10px 14px; font:800 12px "Poppins",sans-serif; cursor:pointer; } .empty-actions .primary { background:var(--yellow); color:#000; } .empty-actions .secondary { background:rgba(255,255,255,.08); color:#fff; } #clearSearchBtn { display:none; } @media (min-width:720px) { .top-nav-panel { left:50%; --top-nav-x:-50%; max-width:680px; border-bottom-left-radius:24px; border-bottom-right-radius:24px; } #searchContainer { max-width:520px; } .content-sheet, body.list-view .content-sheet { left:50%; right:auto; width:100%; max-width:680px; transform:translateX(-50%); } body.list-view .content-sheet { border-left:1px solid rgba(255,255,255,.08); border-right:1px solid rgba(255,255,255,.08); } } /* Calmer dashboard IA: map first, search in the shell, browsing in the drawer. */ :root { --dashboard-sheet-height:min(34vh, 330px); --shell-top-nav:136px; } .header.top-nav-panel, .header.top-nav-panel.fade-out { background:linear-gradient(to bottom,rgba(0,0,16,.82) 0%,rgba(0,0,16,.38) 74%,rgba(0,0,16,0)); } .top-nav-panel { gap:8px; padding:calc(10px + env(safe-area-inset-top)) 12px 8px; } .hub-selector-node { min-height:52px; max-height:64px; padding:8px 9px 8px 12px; border-radius:14px; background:rgba(8,8,18,.72); border-color:rgba(255,255,255,.1); box-shadow:0 12px 34px rgba(0,0,0,.18); } .hub-label { font-size:9px; letter-spacing:.8px; margin-bottom:1px; } .hub-name { font-size:14px; max-width:44vw; } .hub-actions { gap:6px; } .hub-actions .icon-btn, .icon-btn { width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(8,8,18,.58); box-shadow:none; } #legendBtn { display:none; } .dashboard-view-switcher-hidden { display:none; } #searchContainer.dashboard-search-shell { position:relative; top:auto; left:auto; transform:none; z-index:auto; width:100%; max-width:none; min-height:44px; gap:8px; padding:5px 5px 5px 13px; border-radius:14px; background:rgba(8,8,18,.68); border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 26px rgba(0,0,0,.16); } .dashboard-search-icon { flex:0 0 auto; color:rgba(255,255,255,.54); font-size:18px; } #searchContainer.dashboard-search-shell input { min-width:0; font-size:14px; } #searchContainer.dashboard-search-shell input:focus { font-size:16px; } #searchContainer.dashboard-search-shell #clearSearchBtn { width:32px; height:32px; min-width:32px; padding:0; border-radius:9px; background:rgba(255,255,255,.08); color:#fff; } .dashboard-search-results{ position:absolute; top:calc(130px + env(safe-area-inset-top)); left:12px; right:12px; z-index:1002; max-height:min(52vh,430px); overflow-y:auto; padding:6px; border:1px solid rgba(255,215,0,.22); border-radius:16px; background:rgba(8,8,18,.96); box-shadow:0 20px 46px rgba(0,0,0,.55); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); pointer-events:auto; } .dashboard-search-results[hidden]{display:none;} .dashboard-search-result{ width:100%; min-height:58px; display:grid; grid-template-columns:38px minmax(0,1fr) 24px; align-items:center; gap:10px; padding:9px 10px; border:0; border-radius:12px; background:transparent; color:#fff; text-align:left; cursor:pointer; } .dashboard-search-result:hover,.dashboard-search-result:focus-visible{background:rgba(255,255,255,.08);outline:none;} .dashboard-search-result-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(255,215,0,.12);color:var(--yellow);font-size:20px;} .dashboard-search-result-copy{min-width:0;display:flex;flex-direction:column;gap:2px;} .dashboard-search-result-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;} .dashboard-search-result-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted-dim);font-size:11px;} .dashboard-search-result-arrow{color:var(--yellow);font-size:18px;} .dashboard-search-empty{display:flex;flex-direction:column;gap:4px;padding:18px 14px;color:#fff;} .dashboard-search-empty span{color:var(--muted-dim);font-size:12px;} .top-nav-peek-handle { height:26px; width:104px; margin-top:-2px; font-size:9px; background:rgba(8,8,18,.62); } .live-status-strip { display:none; } .content-sheet { position:fixed; left:10px; right:10px; bottom:calc(var(--shell-bottom-nav) + 10px + env(safe-area-inset-bottom)); z-index:850; height:var(--dashboard-sheet-height); min-height:190px; max-height:330px; display:flex; flex-direction:column; gap:10px; overflow:hidden; padding:9px 10px 10px; border-radius:18px; border:1px solid rgba(255,255,255,.1); background:rgba(8,8,18,.86); box-shadow:0 20px 54px rgba(0,0,0,.36); } .drag-line { width:34px; height:3px; margin:0 auto 1px; background:rgba(255,255,255,.22); } .nearby-now-head { margin:0; gap:10px; } .nearby-now-head > div { min-width:0; } .nearby-now-kicker { display:block; margin-bottom:1px; color:var(--yellow); font-size:9px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; } .nearby-now-head h1 { font-size:16px; line-height:1.1; letter-spacing:0; } .nearby-now-head p { margin-top:3px; color:var(--muted-dim); font-size:10px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nearby-sheet-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; } .nearby-expand-btn { flex:0 0 auto; width:36px; height:36px; border:1px solid rgba(255,255,255,.09); border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:#fff; cursor:pointer; } .nearby-expand-btn .material-icons-outlined { font-size:18px; } .nearby-sheet-restore { position:fixed; left:50%; right:auto; bottom:calc(var(--shell-bottom-nav) + var(--dashboard-sheet-height) + 14px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:860; min-width:132px; height:36px; padding:0 12px 0 9px; border:1px solid rgba(255,215,0,.28); border-radius:999px; background:rgba(8,8,18,.88); color:var(--yellow); display:inline-flex; align-items:center; justify-content:center; gap:6px; box-shadow:0 16px 34px rgba(0,0,0,.32); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); cursor:pointer; font:900 11px "Poppins",sans-serif; letter-spacing:0; text-transform:uppercase; transition:bottom .28s cubic-bezier(.2,.8,.2,1), color .2s ease, border-color .2s ease, opacity .2s ease; } .nearby-sheet-handle-label { white-space:nowrap; } body.nearby-feed-hidden .content-sheet { display:none; } body.nearby-feed-hidden .nearby-sheet-restore, body.nearby-now-disabled .nearby-sheet-restore { bottom:calc(var(--shell-bottom-nav) + 18px + env(safe-area-inset-bottom)); } .nearby-sheet-restore.is-disabled { color:var(--muted); border-color:rgba(255,215,0,.18); } body.list-view .nearby-sheet-restore { display:none; } .nearby-now-tabs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; } .nearby-now-tab { min-width:0; min-height:34px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.055); color:var(--muted); font:800 11px "Poppins",sans-serif; cursor:pointer; } .nearby-now-tab span { color:inherit; opacity:.72; } .nearby-now-tab.is-active { border-color:rgba(255,215,0,.58); background:rgba(255,215,0,.12); color:var(--yellow); } #roomList { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; } #roomList::-webkit-scrollbar { display:none; } .nearby-now-card { width:100%; min-height:62px; margin:0 0 8px; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); color:#fff; text-align:left; font-family:inherit; } .nearby-now-card.active, .nearby-now-card:hover, .nearby-now-card:focus-visible { outline:none; border-color:color-mix(in srgb,var(--nearby-accent,var(--yellow)) 52%,rgba(255,255,255,.08)); background:color-mix(in srgb,var(--nearby-accent,var(--yellow)) 10%,rgba(255,255,255,.045)); } .nearby-now-card.is-top-three { border-color:rgba(255,215,0,.82); box-shadow:inset 0 0 0 1px rgba(255,215,0,.18),0 0 14px rgba(255,215,0,.08); } .nearby-now-icon { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--nearby-accent,var(--yellow)) 16%,rgba(255,255,255,.07)); color:var(--nearby-accent,var(--yellow)); font-size:19px; } .nearby-now-main { min-width:0; display:flex; flex-direction:column; gap:3px; } .nearby-now-main strong { color:#fff; font-size:13px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nearby-now-main strong i { color:#4da3ff; font-size:14px; vertical-align:-2px; } .nearby-now-main small { color:var(--muted); font-size:10px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nearby-now-status { min-width:58px; display:flex; flex-direction:column; align-items:flex-end; gap:3px; } .nearby-now-status b { color:var(--yellow); font-size:11px; line-height:1; white-space:nowrap; } .nearby-now-status small { color:var(--muted-dim); font-size:9px; white-space:nowrap; } .content-sheet .locating-bar { margin:0 0 8px; } .content-sheet .empty-state { min-height:116px; margin:0; padding:14px; gap:8px; border-radius:12px; } .content-sheet .empty-state i { font-size:26px; } .content-sheet .empty-state h3 { font-size:14px; } .content-sheet .empty-state p { font-size:11px; } body.map-view #startVibeNavBtn, body.map-view.map-fab-collapsed #startVibeNavBtn { left:auto; right:72px; bottom:calc(var(--shell-bottom-nav) + var(--dashboard-sheet-height) + 18px + env(safe-area-inset-bottom)); width:52px; min-width:52px; height:52px; padding:0; transform:none; box-shadow:0 16px 34px rgba(255,180,0,.28); } body.map-view #startVibeNavBtn .material-icons-outlined, body.map-view.map-fab-collapsed #startVibeNavBtn .material-icons-outlined { font-size:27px; } body.map-view #startVibeNavBtn .start-vibe-label, body.map-view.map-fab-collapsed #startVibeNavBtn .start-vibe-label { max-width:0; opacity:0; } body.map-view #startVibeNavBtn:active { transform:scale(.96); } body.map-view #myLocationBtn, body.map-view #sosBtn { bottom:calc(var(--shell-bottom-nav) + var(--dashboard-sheet-height) + 18px + env(safe-area-inset-bottom)); } body.map-view.nearby-feed-hidden #startVibeNavBtn, body.map-view.nearby-feed-hidden.map-fab-collapsed #startVibeNavBtn, body.map-view.nearby-feed-hidden #myLocationBtn, body.map-view.nearby-feed-hidden #sosBtn { bottom:calc(var(--shell-bottom-nav) + 18px + env(safe-area-inset-bottom)); } body.map-view #myLocationBtn { right:16px; } body.map-view #sosBtn { left:16px; } body.list-view .content-sheet { display:flex; z-index:850; top:calc(var(--shell-top-nav) + 8px + env(safe-area-inset-top)); bottom:var(--shell-bottom-nav); height:auto; max-height:none; min-height:0; left:0; right:0; padding:10px 10px calc(16px + env(safe-area-inset-bottom)); border-radius:0; border-left:0; border-right:0; background:rgba(8,8,18,1); } /* Nearby Now is a right-side activity drawer on the map. The handle stays visible even when the filter toggle disables the drawer body. */ body.map-view .content-sheet { top:calc(var(--shell-top-nav) + 32px + env(safe-area-inset-top)); right:0; bottom:calc(var(--shell-bottom-nav) + 82px + env(safe-area-inset-bottom)); left:auto; width:min(360px, calc(100vw - 56px)); height:auto; min-height:0; max-height:none; border-radius:18px 0 0 18px; border-right:0; transform:translateX(0); transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease; } body.map-view.nearby-feed-hidden .content-sheet, body.map-view.nearby-now-disabled .content-sheet { display:flex; transform:translateX(calc(100% + 12px)); pointer-events:none; } body.map-view .nearby-sheet-restore { top:calc(var(--shell-top-nav) + 84px + env(safe-area-inset-top)); right:0; bottom:auto; left:auto; width:40px; min-width:40px; height:112px; padding:8px 0; border:1px solid rgba(255,215,0,.24); border-right:0; border-radius:14px 0 0 14px; background:rgba(8,8,18,.9); color:var(--yellow); flex-direction:column; gap:7px; transform:none; box-shadow:-10px 16px 34px rgba(0,0,0,.24); font:900 9px "Poppins",sans-serif; transition:color .2s ease, border-color .2s ease, opacity .2s ease, box-shadow .2s ease; } body.map-view .nearby-sheet-handle-label { font-size:9px; line-height:1; } body.map-view #myLocationBtn, body.map-view #sosBtn, body.map-view #startVibeNavBtn, body.map-view.map-fab-collapsed #startVibeNavBtn, body.map-view.nearby-feed-hidden #myLocationBtn, body.map-view.nearby-feed-hidden #sosBtn, body.map-view.nearby-feed-hidden #startVibeNavBtn, body.map-view.nearby-feed-hidden.map-fab-collapsed #startVibeNavBtn { bottom:calc(var(--shell-bottom-nav) + 16px + env(safe-area-inset-bottom)); } @media (min-width:720px) { body.map-view .content-sheet { left:auto; right:0; width:min(372px, calc(100vw - 64px)); max-width:none; transform:translateX(0); } body.map-view.nearby-feed-hidden .content-sheet, body.map-view.nearby-now-disabled .content-sheet { transform:translateX(calc(100% + 12px)); } } body.list-view .sheet-header { display:flex; } body.list-view .drag-line { display:block; } body.list-view .nearby-now-tabs { display:none; } body.list-view #roomList { display:block; height:auto; min-height:0; overflow-y:auto; scroll-snap-type:y mandatory; } body.list-view .feed-room-card { height:calc(100dvh - var(--shell-top-nav) - var(--shell-bottom-nav) - 72px); min-height:520px; border-radius:12px; margin-bottom:12px; } @media (min-width:720px) { .top-nav-panel, .content-sheet, body.list-view .content-sheet { left:50%; right:auto; width:min(680px, calc(100vw - 24px)); transform:translateX(-50%); } #searchContainer.dashboard-search-shell { max-width:none; } body.map-view #startVibeNavBtn, body.map-view.map-fab-collapsed #startVibeNavBtn { right:calc(50% - 318px); } body.map-view #myLocationBtn { right:calc(50% - 330px); } body.map-view #sosBtn { left:calc(50% - 330px); } } /* Product hierarchy pass: map first, compact tools, contextual activity. */ .hub-selector-node { min-height:70px; max-height:92px; align-items:center; overflow:visible; } .hub-zone-trigger { display:flex; flex-direction:column; gap:3px; } .hub-snapshot-row { display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; } .hub-snapshot-chip { min-width:0; max-width:112px; height:20px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:4px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.76); font:900 9px "Poppins",sans-serif; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hub-snapshot-chip strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hub-live-chip { color:var(--yellow); background:rgba(255,215,0,.12); } .hub-live-dot { width:6px; height:6px; border-radius:999px; background:#6DFF8B; box-shadow:0 0 8px rgba(109,255,139,.8); flex:0 0 auto; } .hub-secure-chip { color:#6DFF8B; background:rgba(109,255,139,.12); } .hub-secure-chip.exposed { color:var(--red); background:rgba(255,107,122,.14); } .hub-secure-chip .material-icons-outlined { font-size:12px; } .hub-actions { position:relative; } .hub-more-btn.is-active { color:var(--yellow); border-color:rgba(255,215,0,.34); background:rgba(255,215,0,.12); } .hub-overflow-menu { position:absolute; top:calc(100% + 10px); right:0; width:196px; padding:8px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(8,8,18,.94); box-shadow:0 18px 48px rgba(0,0,0,.38); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); display:none; flex-direction:column; gap:6px; z-index:1200; } .hub-overflow-menu.open { display:flex; } .hub-menu-action.icon-btn { width:100%; height:42px; border-radius:10px; padding:0 11px; justify-content:flex-start; gap:9px; color:#fff; background:rgba(255,255,255,.06); font:900 11px "Poppins",sans-serif; } .hub-menu-action.icon-btn .material-icons-outlined, .hub-menu-action.icon-btn i { flex:0 0 auto; color:var(--yellow); font-size:18px; } .hub-menu-action.icon-btn > span:not(.material-icons-outlined):not(.filter-active-badge) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hub-menu-action .filter-active-badge { top:4px; right:5px; } #searchContainer.dashboard-search-shell { position:absolute; top:calc(78px + env(safe-area-inset-top)); right:12px; left:auto; transform:none; z-index:1001; width:46px; min-height:46px; max-width:46px; padding:5px; border-radius:14px; overflow:hidden; cursor:pointer; transition:width .24s cubic-bezier(.2,.8,.2,1), max-width .24s cubic-bezier(.2,.8,.2,1), background .18s ease, border-color .18s ease; } #searchContainer.dashboard-search-shell.is-expanded, #searchContainer.dashboard-search-shell:focus-within { left:12px; right:12px; width:auto; max-width:none; cursor:text; background:rgba(8,8,18,.78); border-color:rgba(255,215,0,.22); } body.map-view.top-nav-peek #searchContainer.dashboard-search-shell:not(.is-expanded):not(:focus-within) { opacity:0; pointer-events:none; } #searchContainer.dashboard-search-shell .dashboard-search-icon { width:34px; height:34px; display:grid; place-items:center; color:var(--yellow); } #searchContainer.dashboard-search-shell input { opacity:0; pointer-events:none; transition:opacity .16s ease; } #searchContainer.dashboard-search-shell.is-expanded input, #searchContainer.dashboard-search-shell:focus-within input { opacity:1; pointer-events:auto; } #searchContainer.dashboard-search-shell #clearSearchBtn { opacity:0; pointer-events:none; } #searchContainer.dashboard-search-shell.is-expanded #clearSearchBtn, #searchContainer.dashboard-search-shell:focus-within #clearSearchBtn { opacity:1; pointer-events:auto; } body.map-view .nearby-now-tabs { display:none; } body.map-view .content-sheet { top:auto; left:50%; right:auto; bottom:calc(var(--shell-bottom-nav) + 84px + env(safe-area-inset-bottom)); width:min(560px, calc(100vw - 24px)); height:auto; max-height:238px; min-height:0; padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.1); transform:translateX(-50%); transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease; } body.map-view.nearby-feed-hidden .content-sheet, body.map-view.nearby-now-disabled .content-sheet { display:flex; transform:translate(-50%, calc(100% + 18px)); opacity:0; pointer-events:none; } body.map-view .nearby-sheet-restore { top:calc(var(--shell-top-nav) + 84px + env(safe-area-inset-top)); right:0; bottom:auto; left:auto; width:40px; min-width:40px; height:112px; padding:8px 0; border-radius:14px 0 0 14px; border:1px solid rgba(255,215,0,.24); border-right:0; transform:none; flex-direction:column; font:900 9px "Poppins",sans-serif; } body.map-view .nearby-sheet-restore.is-sheet-open { opacity:.86; } body.map-view .nearby-sheet-handle-label { transform:rotate(-90deg); width:68px; height:12px; font-size:9px; } body.map-view .nearby-sheet-restore .material-icons-outlined { transform:none; font-size:22px; } body.map-view #roomList { max-height:146px; } body.map-view .nearby-now-card { min-height:54px; grid-template-columns:32px minmax(0,1fr) auto; padding:8px; margin-bottom:7px; } body.map-view .nearby-now-icon { width:32px; height:32px; border-radius:8px; font-size:17px; } body.map-view #startVibeNavBtn { left:50%; right:auto; bottom:calc(var(--shell-bottom-nav) + 20px + env(safe-area-inset-bottom)); width:auto; min-width:148px; height:50px; padding:0 18px; gap:8px; border-radius:999px; transform:translateX(-50%); box-shadow:0 18px 46px rgba(255,180,0,.34); } body.map-view.map-fab-collapsed #startVibeNavBtn { width:56px; min-width:56px; height:56px; padding:0; gap:0; box-shadow:0 16px 38px rgba(255,180,0,.32); } body.map-view #startVibeNavBtn .material-icons-outlined { font-size:22px; } body.map-view.map-fab-collapsed #startVibeNavBtn .material-icons-outlined { font-size:28px; } body.map-view #startVibeNavBtn .start-vibe-label { max-width:82px; opacity:1; } body.map-view.map-fab-collapsed #startVibeNavBtn .start-vibe-label { max-width:0; opacity:0; } body.map-view #startVibeNavBtn:active { transform:translateX(-50%) scale(.96); } body.map-view #myLocationBtn, body.map-view #sosBtn, body.map-view.nearby-feed-hidden #myLocationBtn, body.map-view.nearby-feed-hidden #sosBtn { bottom:calc(var(--shell-bottom-nav) + 25px + env(safe-area-inset-bottom)); } body.map-view #myLocationBtn { right:16px; } body.map-view #sosBtn { left:16px; } .live-signals-panel { top:calc(var(--shell-top-nav) - 40px + env(safe-area-inset-top)); left:50%; width:min(380px, calc(100vw - 24px)); max-height:none; z-index:930; opacity:1; transform:translate(-50%, 0); pointer-events:none; transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1); } .live-signals-panel.is-collapsed, .live-signals-panel.is-disabled { opacity:0; transform:translate(-50%, -14px); } .live-signals-handle, .live-signals-head { display:none; } .live-signals-list { padding:0; max-height:none; overflow:visible; } .live-signal-card, .live-signal-skeleton { width:100%; min-height:74px; border-radius:14px; border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--signal-accent,#D7FF3F); background:rgba(8,8,18,.9); box-shadow:0 18px 46px rgba(0,0,0,.34); } .live-signal-skeleton { display:none; } .live-signal-card { grid-template-columns:32px minmax(0,1fr) 32px; padding:10px; } .live-signal-card.is-entering { transform:translateY(-12px) scale(.98); } .live-signal-card.is-exiting { transform:translateY(-10px) scale(.98); } .venue-badge:not(.verified-venue) { border-color:#FFD700 !important; box-shadow:0 4px 12px rgba(255,215,0,.28) !important; } .venue-badge:not(.verified-venue) i { color:#FFD700 !important; } .venue-badge.verified-venue { border-color:#4da3ff !important; box-shadow:0 4px 15px rgba(77,163,255,.3) !important; } .venue-badge.verified-venue i { color:#4da3ff !important; } .venue-badge.closed, .venue-badge.closed:not(.verified-venue), .venue-badge.verified-venue.closed { border-color:rgba(255,255,255,.15) !important; box-shadow:none !important; } .venue-badge.closed i, .venue-badge.verified-venue.closed i { color:rgba(255,255,255,.3) !important; } .office-marker { border-color:#FFD700 !important; color:#FFD700 !important; } .office-marker.unverified, .office-marker.verified { border-color:#FFD700 !important; color:#FFD700 !important; } .venue-badge .venue-nested-count { background:#D633FF; } @media (max-width:430px) { .hub-selector-node { gap:8px; padding-left:10px; padding-right:8px; } .hub-snapshot-chip { max-width:82px; padding:0 6px; } #hubShellPeopleCount { display:none; } .hub-overflow-menu { right:-2px; width:188px; } body.map-view .content-sheet { bottom:calc(var(--shell-bottom-nav) + 82px + env(safe-area-inset-bottom)); } body.map-view #startVibeNavBtn { min-width:178px; height:52px; } body.map-view.map-fab-collapsed #startVibeNavBtn { min-width:56px; width:56px; height:56px; } } /* Final positioning invariants for the map controls. */ body.map-view #startVibeNavBtn, body.map-view.map-fab-collapsed #startVibeNavBtn, body.map-view.nearby-feed-hidden #startVibeNavBtn, body.map-view.nearby-feed-hidden.map-fab-collapsed #startVibeNavBtn { left:50% !important; right:auto !important; transform:translateX(-50%) !important; } body.map-view #startVibeNavBtn:active, body.map-view.map-fab-collapsed #startVibeNavBtn:active { transform:translateX(-50%) scale(.96) !important; } body.map-view.map-fab-hidden #startVibeNavBtn, body.map-view.map-overlay-open #startVibeNavBtn { transform:translateX(-50%) translateY(12px) scale(.92) !important; } body.map-view.map-fab-collapsed #startVibeNavBtn { width:56px !important; min-width:56px !important; height:56px !important; padding:0 !important; } #myLocationBtn, body.map-view #myLocationBtn { display:grid !important; place-items:center !important; padding:0 !important; line-height:1 !important; } #myLocationBtn .material-icons-outlined, body.map-view #myLocationBtn .material-icons-outlined { display:block; line-height:1; font-size:22px; } /* Keep the hub/feed sheet clear of the fixed bottom nav on safe-area devices. */ body.list-view .content-sheet { bottom:calc(var(--shell-bottom-nav) + env(safe-area-inset-bottom)) !important; padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important; } body.list-view .feed-room-card { min-height:calc(100dvh - var(--shell-top-nav) - var(--shell-bottom-nav) - env(safe-area-inset-bottom) - 28px); } body.map-view .content-sheet { bottom:calc(var(--shell-bottom-nav) + 88px + env(safe-area-inset-bottom)) !important; } @media (max-width:430px) { body.map-view .content-sheet { bottom:calc(var(--shell-bottom-nav) + 88px + env(safe-area-inset-bottom)) !important; } } /* Nearby Now is a left-edge drawer; its motion follows the left-edge handle. */ body.map-view .content-sheet { top:calc(var(--shell-top-nav) + 20px + env(safe-area-inset-top)) !important; bottom:calc(var(--shell-bottom-nav) + 16px + env(safe-area-inset-bottom)) !important; left:0 !important; right:auto !important; width:min(370px, calc(100vw - 52px)) !important; max-height:none !important; border-radius:0 20px 20px 0 !important; border-left:0 !important; transform:translateX(0) !important; opacity:1; box-shadow:18px 0 46px rgba(0,0,0,.38); transition:transform .34s cubic-bezier(.2,.8,.2,1), opacity .2s ease !important; } body.map-view.nearby-feed-hidden .content-sheet, body.map-view.nearby-now-disabled .content-sheet { display:flex !important; transform:translateX(calc(-100% - 14px)) !important; opacity:0; pointer-events:none; } body.map-view .nearby-sheet-restore { top:calc(var(--shell-top-nav) + 84px + env(safe-area-inset-top)) !important; left:0 !important; right:auto !important; bottom:auto !important; border-left:0 !important; border-right:1px solid rgba(255,215,0,.24) !important; border-radius:0 14px 14px 0 !important; transform:none !important; box-shadow:10px 16px 34px rgba(0,0,0,.24) !important; transition:left .34s cubic-bezier(.2,.8,.2,1), opacity .2s ease, color .2s ease, border-color .2s ease !important; } body.map-view .nearby-sheet-restore.is-sheet-open { left:calc(min(370px, calc(100vw - 52px)) - 1px) !important; } body.map-view .nearby-sheet-handle-label { transform:rotate(-90deg); } body.map-view .nearby-sheet-restore .material-icons-outlined { flex:0 0 auto; margin-bottom:10px; } body.map-view #roomList { flex:1; min-height:0; max-height:none; overflow-y:auto; } body.map-view .live-signals-panel, body.map-view .live-signals-handle { transition:opacity .18s ease, visibility 0s linear .18s; } body.map-view.nearby-drawer-open .live-signals-panel, body.map-view.nearby-drawer-open .live-signals-handle, body.map-view.live-hubs-modal-open .live-signals-panel, body.map-view.live-hubs-modal-open .live-signals-handle, body.map-view:not(.top-nav-peek) .live-signals-panel, body.map-view:not(.top-nav-peek) .live-signals-handle { opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } /* Attach the top-nav control to the Featured Hub card using the Nearby handle language. */ body.map-view .top-nav-peek-handle { position:relative; align-self:center; z-index:2; width:122px; min-width:122px; height:34px; margin:-9px auto 0; padding:0 10px 0 13px; border:1px solid rgba(255,215,0,.28); border-top-color:rgba(255,215,0,.16); border-radius:0 0 14px 14px; background:rgba(8,8,18,.9); color:var(--yellow); gap:10px; font:900 9px "Poppins",sans-serif; text-transform:uppercase; box-shadow:0 12px 28px rgba(0,0,0,.28); transition:margin .3s cubic-bezier(.2,.8,.2,1), border-radius .22s ease, border-color .2s ease, box-shadow .2s ease; } body.map-view .hub-selector-node { transition:min-height .3s cubic-bezier(.2,.8,.2,1), max-height .3s cubic-bezier(.2,.8,.2,1), padding .3s cubic-bezier(.2,.8,.2,1), opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1), border-color .22s ease, border-width .22s ease, box-shadow .22s ease; } body.map-view.top-nav-peek .hub-selector-node { min-height:0 !important; } body.map-view .top-nav-peek-handle .material-icons-outlined { flex:0 0 auto; font-size:21px; color:var(--yellow); } body.map-view.top-nav-peek .top-nav-peek-handle { margin-top:0; border-top:0; border-radius:0 0 14px 14px; box-shadow:0 10px 26px rgba(0,0,0,.3); } /* Full-screen hub feed: one complete room per snap, with actions always visible. */ body.list-view .content-sheet { display:flex !important; flex-direction:column; overflow:hidden !important; padding-bottom:0 !important; } body.list-view .content-sheet > .drag-line, body.list-view .content-sheet > .sheet-header, body.list-view .content-sheet > .nearby-now-tabs { flex:0 0 auto; } body.list-view #roomList { flex:1 1 auto; height:auto; min-height:0; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior-y:contain; } body.list-view .feed-room-card { box-sizing:border-box; height:100%; min-height:100%; max-height:100%; margin:0; border-radius:0; padding:20px 20px calc(18px + env(safe-area-inset-bottom)); scroll-snap-align:start; scroll-snap-stop:always; } body.list-view .feed-chat-snippets { min-height:0; } body.list-view .feed-room-footer { flex:0 0 auto; }