/* ============================================
   ANIMHA-AR Public VR — Fullscreen Preview
   Adapted from admin preview for public usage
   ============================================ */

/* ── Base ── */
.vr-page { position:fixed; inset:0; background:#0a0f0d; }
.vr-page .pnlm-container { background:#0a0f0d !important; }
.vr-page .pnlm-about-msg,
.vr-page .pnlm-orientation-button,
.vr-page .pnlm-controls-container,
.vr-page .pnlm-compass,
.vr-page .pnlm-load-button-container { display:none !important; }
.vr-page .pnlm-load-box { background:rgba(0,54,37,0.92)!important; border-radius:16px!important; font-family:'Inter',sans-serif!important; backdrop-filter:blur(16px); }
.vr-page .pnlm-lbar { background:rgba(255,255,255,0.15)!important; }
.vr-page .pnlm-lbar-fill { background:linear-gradient(90deg,#e9c349,#f0d97a)!important; }
.vr-page .pnlm-load-box p { color:#fafaf5!important; font-family:'Inter',sans-serif!important; }
.vr-page .pnlm-tooltip > span { visibility:hidden!important; position:absolute!important; width:0!important; height:0!important; overflow:hidden!important; }

/* ── Vignette ── */
.vr-vignette { position:absolute; inset:0; pointer-events:none; z-index:10; box-shadow:inset 0 0 120px 40px rgba(10,15,13,0.5), inset 0 0 60px 10px rgba(10,15,13,0.3); }

/* ── Scene Info Chip (top center) ── */
.vr-scene-chip { position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:50; background:rgba(0,15,10,0.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1); border-radius:50px; padding:10px 24px; color:white; font-family:'Inter',sans-serif; display:flex; align-items:center; gap:10px; transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); max-width:80vw; }
.vr-scene-chip .sc-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-scene-chip .sc-sub { font-size:11px; color:rgba(255,255,255,0.5); white-space:nowrap; }
.vr-scene-chip .sc-counter { font-size:10px; background:rgba(255,255,255,0.12); padding:3px 10px; border-radius:20px; font-weight:600; letter-spacing:0.05em; flex-shrink:0; }

/* ── Back button (top left) ── */
.vr-back-btn { position:absolute; top:20px; left:20px; z-index:60; width:44px; height:44px; background:rgba(0,15,10,0.6); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.12); border-radius:50%; color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.25s; text-decoration:none; }
.vr-back-btn:hover { background:rgba(0,54,37,0.7); border-color:rgba(255,255,255,0.2); }
.vr-back-btn .material-symbols-outlined { font-size:22px; }

/* ── Scene List Panel (top right, vertical thumbnails) ── */
.vr-scene-panel { position:absolute; top:20px; right:20px; z-index:55; width:200px; max-height:calc(100vh - 200px); display:flex; flex-direction:column; gap:6px; overflow-y:auto; transition:all 0.4s ease; }
.vr-scene-panel::-webkit-scrollbar { width:4px; }
.vr-scene-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:4px; }
.vr-scene-panel.collapsed { width:44px; max-height:44px; overflow:hidden; }

.vr-scene-toggle { width:44px; height:44px; background:rgba(0,15,10,0.6); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.12); border-radius:12px; color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.25s; flex-shrink:0; align-self:flex-end; }
.vr-scene-toggle:hover { background:rgba(0,54,37,0.7); }

.vr-scene-card { display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; cursor:pointer; transition:all 0.25s; border:1px solid transparent; background:rgba(0,15,10,0.65); backdrop-filter:blur(16px); flex-shrink:0; }
.vr-scene-card:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1); }
.vr-scene-card.active { background:rgba(233,195,73,0.1); border-color:rgba(233,195,73,0.25); }
.vr-scene-card img { width:48px; height:36px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.vr-scene-card .sc-name { font-size:11px; font-weight:600; color:white; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vr-scene-card .sc-info { font-size:9px; color:rgba(255,255,255,0.4); margin-top:1px; }

/* ── Bottom Toolbar ── */
.vr-toolbar { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:50; display:flex; align-items:center; gap:2px; background:rgba(0,15,10,0.55); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:6px 10px; }
.vr-toolbar-divider { width:1px; height:24px; background:rgba(255,255,255,0.12); margin:0 6px; }
.vr-toolbar-btn { width:38px; height:38px; border-radius:10px; border:none; background:transparent; color:rgba(255,255,255,0.7); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; font-size:0; position:relative; }
.vr-toolbar-btn:hover { background:rgba(255,255,255,0.12); color:white; }
.vr-toolbar-btn.active { background:rgba(233,195,73,0.2); color:#e9c349; }
.vr-toolbar-btn .material-symbols-outlined { font-size:20px; }
.vr-toolbar-btn[data-tooltip]::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:rgba(0,15,10,0.9); color:white; font-size:11px; font-family:'Inter',sans-serif; font-weight:500; padding:5px 10px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.2s; }
.vr-toolbar-btn[data-tooltip]:hover::after { opacity:1; }

/* ── Compass ── */
.vr-compass { position:absolute; bottom:160px; right:20px; z-index:50; width:52px; height:52px; border-radius:50%; background:rgba(0,15,10,0.55); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; }
.vr-compass-needle { width:20px; height:20px; transition:transform 0.15s ease-out; }
.vr-compass-needle svg { width:100%; height:100%; }

/* ── Auto-Rotate Badge ── */
.vr-rotate-badge { position:absolute; bottom:80px; left:20px; z-index:50; background:rgba(0,15,10,0.55); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:6px 14px; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,0.6); font-size:11px; font-weight:500; font-family:'Inter',sans-serif; transition:all 0.3s; cursor:pointer; }
.vr-rotate-badge.rotating { color:#e9c349; border-color:rgba(233,195,73,0.2); }
.vr-rotate-badge .material-symbols-outlined { font-size:16px; }
@keyframes spinSlow { to { transform:rotate(360deg); } }
.vr-rotate-badge.rotating .material-symbols-outlined { animation:spinSlow 3s linear infinite; }

/* ── Audio Badge ── */
.vr-audio-badge { position:absolute; bottom:80px; left:160px; z-index:50; background:rgba(0,15,10,0.55); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:6px 14px; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,0.6); font-size:11px; font-weight:500; font-family:'Inter',sans-serif; transition:all 0.3s; cursor:pointer; }
.vr-audio-badge.playing { color:#9ed2b9; border-color:rgba(158,210,185,0.25); }
.vr-audio-badge .material-symbols-outlined { font-size:16px; }

/* ── Scene Transition ── */
.vr-transition { position:absolute; inset:0; z-index:40; background:#0a0f0d; opacity:0; pointer-events:none; transition:opacity 0.45s ease; }
.vr-transition.active { opacity:1; }

/* ── Loading ── */
.vr-loading { position:absolute; inset:0; z-index:100; background:#0a0f0d; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity 0.6s ease; }
.vr-loading.hidden { opacity:0; pointer-events:none; }
.vr-loading-ring { width:52px; height:52px; border:3px solid rgba(255,255,255,0.08); border-top-color:#e9c349; border-radius:50%; animation:vrSpin 0.9s linear infinite; }
@keyframes vrSpin { to { transform:rotate(360deg); } }
.vr-loading-text { color:rgba(255,255,255,0.5); font-size:13px; font-weight:500; font-family:'Inter',sans-serif; margin-top:16px; letter-spacing:0.05em; }

/* ── Point-mark Hotspots ── */
.vr-page .pnlm-hotspot.pnlm-sprite.pnlm-info { background:none!important; border:none!important; margin:0!important; opacity:1!important; overflow:visible!important; }
.point-hotspot { position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; cursor:pointer; pointer-events:auto; gap:4px; }
.point-hotspot-label { background:rgba(0,30,20,0.85); backdrop-filter:blur(10px); color:white; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; padding:6px 14px; border-radius:8px; white-space:nowrap; transition:all 0.25s; border:1px solid rgba(255,255,255,0.08); box-shadow:0 4px 16px rgba(0,0,0,0.3); letter-spacing:0.01em; }
.point-hotspot:hover .point-hotspot-label { background:rgba(0,54,37,0.95); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.5); }
.point-hotspot-circle { width:10px; height:10px; background:white; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,0.2), 0 2px 8px rgba(0,0,0,0.4); transition:all 0.25s; animation:pointPulse 2.5s ease-in-out infinite; flex-shrink:0; }
.point-hotspot:hover .point-hotspot-circle { transform:scale(1.4); box-shadow:0 0 0 5px rgba(255,255,255,0.3), 0 4px 16px rgba(0,0,0,0.5); animation:none; }
@keyframes pointPulse { 0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,0.2), 0 2px 8px rgba(0,0,0,0.4)} 50%{box-shadow:0 0 0 6px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.4)} }

/* ── Mini-map ── */
.vr-minimap-wrap { position:absolute; bottom:80px; right:20px; z-index:50; width:240px; height:170px; border-radius:16px; overflow:hidden; border:2px solid rgba(0,0,0,0.12); box-shadow:0 12px 40px rgba(0,0,0,0.25); transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.vr-minimap-wrap.expanded { width:380px; height:280px; bottom:70px; }
.vr-minimap-wrap.collapsed { width:44px; height:44px; border-radius:50%; cursor:pointer; }
#vr-minimap { width:100%; height:100%; }
.vr-minimap-wrap.collapsed #vr-minimap { opacity:0; }
.vr-minimap-toggle { position:absolute; top:6px; left:6px; z-index:55; width:28px; height:28px; background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); border:1px solid rgba(0,0,0,0.12); border-radius:6px; color:#333; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.vr-minimap-toggle:hover { background:rgba(255,255,255,0.95); }
.vr-minimap-wrap.collapsed .vr-minimap-toggle { top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; border-radius:50%; background:rgba(0,54,37,0.8); border:2px solid rgba(233,195,73,0.5); color:white; }
.vr-minimap-legend { position:absolute; bottom:6px; left:6px; right:6px; z-index:55; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); border-radius:6px; padding:4px 8px; font-family:'Inter',sans-serif; font-size:9px; color:#333; display:flex; flex-wrap:wrap; gap:4px; align-items:center; border:1px solid rgba(0,0,0,0.08); }
.vr-minimap-wrap.collapsed .vr-minimap-legend { display:none; }
.vr-minimap-legend .lg-item { display:flex; align-items:center; gap:3px; }
.vr-minimap-legend .lg-line { width:14px; height:3px; border-radius:2px; }
#vr-minimap .leaflet-control-attribution { display:none!important; }
#vr-minimap .leaflet-control-zoom { margin:6px!important; }
#vr-minimap .leaflet-control-zoom a { width:26px!important; height:26px!important; line-height:26px!important; font-size:14px!important; background:rgba(255,255,255,0.9)!important; color:#333!important; border:1px solid rgba(0,0,0,0.12)!important; backdrop-filter:blur(8px); transition:all 0.2s; }
#vr-minimap .leaflet-control-zoom a:hover { background:#fff!important; color:#1A4D3A!important; border-color:rgba(0,54,37,0.3)!important; }
#vr-minimap .leaflet-control-zoom-in { border-radius:6px 6px 0 0!important; }
#vr-minimap .leaflet-control-zoom-out { border-radius:0 0 6px 6px!important; }
.vr-minimap-wrap.collapsed .leaflet-control-zoom { display:none!important; }

/* ── Keyboard Hints ── */
.vr-kb-hints { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); z-index:50; background:rgba(0,15,10,0.75); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px 20px; display:flex; gap:16px; color:rgba(255,255,255,0.5); font-size:10px; font-family:'Inter',sans-serif; opacity:0; transition:opacity 0.5s; pointer-events:none; }
.vr-kb-hints.show { opacity:1; }
.vr-kb-hints kbd { background:rgba(255,255,255,0.1); padding:2px 6px; border-radius:4px; font-family:monospace; font-size:10px; color:rgba(255,255,255,0.7); margin-right:4px; }

/* ══ MOBILE ══ */
@media (max-width:639px) {
    .vr-scene-chip { top:12px; padding:7px 14px; gap:8px; max-width:60vw; }
    .vr-scene-chip .sc-title { font-size:12px; }
    .vr-scene-chip .sc-sub { font-size:9px; }
    .vr-scene-chip .sc-counter { font-size:9px; padding:2px 8px; }
    .vr-back-btn { top:12px; left:12px; width:38px; height:38px; }
    .vr-scene-panel { top:12px; right:12px; width:170px; }
    .vr-scene-panel.collapsed { width:38px; max-height:38px; }
    .vr-scene-toggle { width:38px; height:38px; }
    .vr-toolbar { bottom:12px; left:8px; right:8px; transform:none; border-radius:12px; padding:4px 6px; gap:1px; overflow-x:auto; justify-content:center; -ms-overflow-style:none; scrollbar-width:none; }
    .vr-toolbar::-webkit-scrollbar { display:none; }
    .vr-toolbar-btn { width:34px; height:34px; flex-shrink:0; }
    .vr-toolbar-btn .material-symbols-outlined { font-size:18px; }
    .vr-toolbar-divider { height:20px; margin:0 3px; }
    .vr-toolbar-btn[data-tooltip]::after { display:none; }
    .vr-rotate-badge { bottom:auto; top:56px; left:12px; padding:4px 10px; font-size:10px; }
    .vr-audio-badge { bottom:auto; top:56px; left:auto; right:12px; padding:4px 10px; font-size:10px; }
    .vr-compass { bottom:130px; right:12px; width:40px; height:40px; }
    .vr-compass-needle { width:16px; height:16px; }
    .vr-minimap-wrap { width:180px; height:130px; bottom:60px; right:12px; }
    .vr-minimap-wrap.expanded { width:280px; height:220px; bottom:55px; }
    .vr-kb-hints { display:none!important; }
    .point-hotspot-label { font-size:10px; padding:4px 10px; }
    .point-hotspot-stem { height:20px; }
    .point-hotspot-circle { width:10px; height:10px; }
    .vr-vignette { box-shadow:inset 0 0 60px 20px rgba(10,15,13,0.4), inset 0 0 30px 5px rgba(10,15,13,0.2); }
}