/* SPDX-License-Identifier: ńL-1.0 */
/* Spatial Sense — blur kept stable; fade is tint-only (no parent opacity). */

/* ─── Tokens ───────────────────────────────────────────────────────── */
:root{
  --sense-blur: 5px;
  --sense-border: rgba(255,255,255,0.06);
  --sense-tint: rgba(10,10,10,0.20);       /* when blur is supported */
  --sense-fallback: rgba(10,10,10,0.45);   /* when blur is not supported */
}

/* ─── Group (bottom-center) — no movement, no opacity anim ─────────── */
.nSenseGroup{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  transform: translateX(-50%);
  width: min(72vw, 320px);
  z-index: 2147483000;
  pointer-events: none; /* children manage PE */
}

/* ─── Bar (glass) — blur is constant; we fade its tint only ────────── */
.nSenseBar{
  position: relative;
  pointer-events: auto;

  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 12px 14px;
  border-radius: 45px;

  /* Real backdrop blur (Safari + Chromium) — do NOT animate opacity on ancestors */
  -webkit-backdrop-filter: saturate(1.4) blur(var(--sense-blur));
  backdrop-filter:         saturate(1.4) blur(var(--sense-blur));

  /* Start fully transparent so the tint can fade in (blur stays allocated) */
  background-color: transparent;
  border: 1px solid var(--sense-border);
  background-clip: padding-box;

  overflow: hidden;
  isolation: isolate;

  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: background-color .34s ease, box-shadow .22s ease; /* fade-only */
}

/* Reveal states (either when the shell is visible, or JS adds .reveal) */
.nInterface.ready .nSenseBar,
.nSenseBar.reveal{
  background-color: var(--sense-tint);
}

/* Fallback for engines with no backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .nSenseBar{ background-color: transparent; }
  .nInterface.ready .nSenseBar,
  .nSenseBar.reveal{
    background-color: var(--sense-fallback);
  }
}

/* Keep steady; no lift on open */
.nSenseBar.is-open { transform: none; }
.nSenseBar.is-busy { box-shadow: 0 16px 38px rgba(0,0,0,0.45); }

/* ─── Menu button (+) ──────────────────────────────────────────────── */
.nSenseMenu{
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: transparent;
  outline: none; cursor: pointer;
  position: relative;
}
.nSenseMenu::before,
.nSenseMenu::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px;
  border-radius: 2px; background: #fff; opacity: .9;
  transform: translate(-50%, -50%);
}
.nSenseMenu::after{ transform: translate(-50%, -50%) rotate(90deg); }

/* ─── Text input ───────────────────────────────────────────────────── */
.nSenseInput{
  flex: 1 1 auto;
  width: 100%; min-width: 0; height: 42px;
  background: transparent; border: none; outline: none;
  color: #fff;
  font: 400 14px/1.25 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  letter-spacing: 0.1px;
}
.nSenseInput::placeholder{ color: rgba(255,255,255,0.66); }

/* Reduce motion block intentionally omitted (motion always on). */