/* NEB WebAR — UI overlay styles.
   The AR <canvas> fills the screen; these DOM screens layer on top. */

:root {
  --brand: #6a1b9a;
  --ink: #1c1f26;
  --muted: #5b6472;
  --bg: #0d0f13;
  --card: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); }

/* Live camera feed sits at the very back; A-Frame canvas (transparent) over it */
#camera-feed {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; background: #000;
}
#ar-scene { position: fixed; inset: 0; z-index: 1; }
#ar-scene .a-canvas { background: transparent !important; }

/* Screens overlay */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: none; flex-direction: column;
  background: linear-gradient(160deg, #14171d, #23262d);
  color: #fff; padding: 24px;
}
.screen.active { display: flex; }
/* The AR screen must NOT cover the camera — it's transparent, only chrome shows */
#screen-ar { background: transparent; pointer-events: none; }
#screen-ar .topbar, #screen-ar .portal-panel { pointer-events: auto; }

.brand { font-size: 22px; font-weight: 700; margin: 8px 0 20px; }
.brand span { color: #c79be0; }

/* Login + Register */
.auth-form { display: flex; flex-direction: column; gap: 12px; max-width: 380px; margin: auto; width: 100%; }
.auth-form input {
  padding: 13px 14px; border-radius: 10px; border: 1px solid #3a3f49;
  background: #1b1e25; color: #fff; font-size: 15px; width: 100%;
}
.auth-form .row { display: flex; gap: 10px; }
.auth-form .row input { flex: 1; }
.btn {
  padding: 13px 16px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600;
  background: var(--brand); color: #fff; cursor: pointer;
}
.btn.ghost { background: transparent; border: 1px solid #4a505b; }
.btn.small { padding: 8px 12px; font-size: 13px; }

/* Top bar (portal list + AR) */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.topbar .title { font-size: 17px; font-weight: 700; }
.topbar .actions { display: flex; gap: 8px; }

/* AR chrome */
#screen-ar .topbar { background: rgba(0,0,0,.35); border-radius: 12px; padding: 8px 10px; backdrop-filter: blur(6px); }
.hint { align-self: center; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; padding: 8px 14px; border-radius: 20px; }

/* Scanning UI (shown while no portal is open) */
.ar-scan-ui {
  pointer-events: none;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
/* Explicit rule needed: the class display:flex above overrides the UA [hidden] */
.ar-scan-ui[hidden] { display: none; }
.reticle {
  width: 62vw; max-width: 300px; aspect-ratio: 1; border-radius: 22px;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.18);
  animation: reticle-pulse 1.8s ease-in-out infinite;
}
@keyframes reticle-pulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }

/* Open-portal panel (design carousel + vote), pinned to the bottom */
.portal-panel {
  pointer-events: auto;
  position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 20;
  background: var(--card); color: var(--ink); border-radius: 18px;
  padding: 14px 16px 16px; box-shadow: 0 -6px 24px rgba(0,0,0,.3);
}
.portal-panel[hidden] { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.panel-title { font-size: 17px; font-weight: 700; }
/* Ghost buttons inside the white panel need dark text (global .btn is white). */
.portal-panel .btn.ghost { color: var(--ink); border-color: var(--border); background: #f3f4f7; }
.design-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.design-info { flex: 1; text-align: center; }
.design-title { font-weight: 700; font-size: 16px; }
.design-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.nav-btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: #f3f4f7; color: var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.nav-btn:active { background: #e6e8ec; }
.vote-cta { width: 100%; }
.vote-cta:disabled { opacity: .5; cursor: default; }

/* Transparent gesture layer over the camera while scanning. Catches swipe-up.
   Sits above the camera but BELOW the reticle/hint/pull tab (higher z-index). */
.swipe-catcher {
  pointer-events: auto; position: fixed; inset: 0; z-index: 5;
  background: transparent; touch-action: none;
}
.ar-scan-ui .reticle, .ar-scan-ui .hint, .nearby-pull { position: relative; z-index: 6; }

/* Nearby: pull tab shown at bottom while scanning */
.nearby-pull {
  pointer-events: auto; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 16px;
  padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px);
}
.pull-grip { width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.7); }
.pull-chevron { font-size: 14px; opacity: .8; }

/* Nearby: bottom sheet */
.nearby-sheet {
  pointer-events: auto; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--card); color: var(--ink); border-radius: 18px 18px 0 0;
  max-height: 70vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .28s ease;
  box-shadow: 0 -6px 24px rgba(0,0,0,.3);
  touch-action: pan-y; /* allow list scroll, but let us read vertical swipes */
}
.nearby-sheet.open { transform: translateY(0); }
.nearby-sheet[hidden] { display: none; }
.nearby-head { padding: 10px 16px 6px; }
.sheet-handle { width: 44px; height: 5px; background: #d0d4da; border-radius: 3px; margin: 0 auto 8px; }
.nearby-title-row { display: flex; align-items: center; justify-content: space-between; }
.nearby-title { font-size: 17px; font-weight: 700; }
.nearby-sheet .btn.ghost { color: var(--ink); border-color: var(--border); background: #f3f4f7; }
.nearby-list { list-style: none; margin: 0; padding: 6px 12px 20px; overflow-y: auto; }
.nearby-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 12px; border-bottom: 1px solid #eef0f3; cursor: pointer;
}
.nearby-item:active { background: #f6f1fb; }
.nearby-name { font-weight: 600; }
.nearby-dist { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.nearby-go {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--brand); color: #fff; font-size: 16px; cursor: pointer;
}
.nearby-empty { color: var(--muted); padding: 24px 12px; text-align: center; }

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: #111418; color: #fff; padding: 10px 16px; border-radius: 22px; font-size: 13.5px;
  opacity: 0; transition: all .2s ease; z-index: 40; pointer-events: none; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }