/* THE PROBE ROOM -- the UP axis (2026-09-09).
 *
 * Loaded after liveRoom.css. Every colour, radius, duration, z-index and
 * spacing value here comes from vaultTokens.css; nothing is hard-coded and
 * nothing new is invented, because this is a new SURFACE, not a new visual
 * language.
 *
 * THE ONE RULE THIS FILE OBEYS ABOVE ALL OTHERS
 * ---------------------------------------------
 * GAME IS THE SACRED CENTRE. The only thing this file puts on the game
 * screen is a single small top-centre hint, in the same register as the
 * Live Room's bottom-centre one, sitting in the strip between the two
 * corner affordances that no game surface uses. There are no giant edge
 * arrows anywhere. The panel itself slides down from the top -- the mirror
 * of the Live Room sliding up from the bottom -- so the spatial language is
 * literally the same idea in the opposite direction.
 */

/* ---------------------------------------------------------------------
   1. UP → PROBE hint
   Top centre, between "‹ PEOPLE" and "WAGERS ›". Deliberately quieter
   than either: it is a discoverability cue, not a control competing with
   the round.
   ------------------------------------------------------------------ */
.probe-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 4px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 12px;
  min-height: 28px;
  background: transparent;
  border: 0;
  color: var(--vault-text-muted);
  font-size: var(--vault-type-micro);
  font-weight: var(--vault-weight-medium);
  letter-spacing: 0.14em;
  opacity: 0.55;
  cursor: pointer;
  z-index: var(--vault-z-chevron);
  transition: opacity var(--vault-motion-fast) var(--vault-ease),
              color var(--vault-motion-fast) var(--vault-ease);
}
.probe-hint:hover, .probe-hint:focus-visible { opacity: 1; color: var(--vault-text); }
.probe-hint:active { transform: translateX(-50%) scale(0.96); }
.probe-hint-chev { font-size: 14px; line-height: 1; }

/* Lit while THIS player is in the Probe Room -- the persistent, honest
   answer to "am I queryable right now?", visible without opening anything. */
.probe-hint.probe-hint-on { opacity: 1; color: var(--vault-gold); }

/* Someone else is in the Probe Room and this player is not. A dot, never a
   badge with a count: the Probe Room is a place, not a notification feed. */
.probe-hint-dot {
  position: absolute;
  top: 2px; right: 4px;
  width: 6px; height: 6px;
  border-radius: var(--vault-radius-pill);
  background: var(--vault-gold);
  box-shadow: 0 0 6px var(--vault-gold-glow);
}

/* ---------------------------------------------------------------------
   2. THE PANEL
   Slides DOWN from the top, the exact mirror of the Live Room's slide up.
   ------------------------------------------------------------------ */
.probe-panel {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 86vh;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  gap: var(--vault-space-2);
  padding: var(--vault-space-3);
  /* The top band belongs to the two corner affordances and the UP cue,
     which are fixed at a HIGHER z-index than any panel (--vault-z-chevron
     is above --vault-z-panel, deliberately, so navigation is never lost
     behind a surface). The panel therefore starts BELOW that band rather
     than trying to win a stacking fight it should not win -- the same
     accommodation liveRoom.css makes for .shell-header. */
  padding-top: calc(env(safe-area-inset-top, 0px) + 46px);
  background: var(--vault-surface);
  border-bottom: 1px solid var(--vault-edge);
  border-radius: 0 0 var(--vault-radius-card) var(--vault-radius-card);
  box-shadow: var(--vault-elev-3);
  transform: translateY(-100%);
  visibility: hidden;
  z-index: var(--vault-z-panel);
  transition: transform var(--vault-motion-base) var(--vault-ease-out),
              visibility 0s linear var(--vault-motion-base);
}
.probe-panel.probe-panel-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--vault-motion-base) var(--vault-ease-out),
              visibility 0s;
}

.probe-header { display: flex; align-items: center; gap: var(--vault-space-2); }
.probe-title {
  font-size: var(--vault-type-small);
  font-weight: var(--vault-weight-heavy);
  letter-spacing: 0.16em;
  color: var(--vault-gold);
}
.probe-subtitle {
  font-size: var(--vault-type-micro);
  color: var(--vault-text-muted);
  letter-spacing: 0.06em;
}
.probe-close-btn {
  margin-left: auto;
  min-width: var(--vault-touch-min);
  min-height: var(--vault-touch-min);
  background: transparent;
  border: 0;
  color: var(--vault-text-muted);
  font-size: var(--vault-type-lead);
  cursor: pointer;
}
.probe-close-btn:hover, .probe-close-btn:focus-visible { color: var(--vault-text); }

/* ---------------------------------------------------------------------
   3. CONSENT
   The single most important control on the surface, so it is the first
   thing in the panel and it states in plain words what it does.
   ------------------------------------------------------------------ */
.probe-consent {
  display: flex;
  align-items: center;
  gap: var(--vault-space-3);
  padding: var(--vault-space-3);
  background: var(--vault-surface-raised);
  border: 1px solid var(--vault-edge);
  border-radius: var(--vault-radius-control);
}
.probe-consent-text {
  flex: 1;
  font-size: var(--vault-type-small);
  color: var(--vault-text-muted);
  line-height: 1.35;
}
.probe-consent-text b { color: var(--vault-text); font-weight: var(--vault-weight-medium); }
.probe-consent-btn {
  min-height: var(--vault-touch-min);
  padding: 0 var(--vault-space-4);
  border-radius: var(--vault-radius-pill);
  border: 1px solid var(--vault-edge-control);
  background: transparent;
  color: var(--vault-text);
  font-size: var(--vault-type-small);
  font-weight: var(--vault-weight-strong);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color var(--vault-motion-fast) var(--vault-ease),
              color var(--vault-motion-fast) var(--vault-ease),
              border-color var(--vault-motion-fast) var(--vault-ease);
}
.probe-consent-btn:active { transform: scale(0.97); }
/* CHOICE STAYS LIT (spec section 9 / docs/34): being in the Probe Room is a
   persistent state, so the control that put you there stays visibly on. */
.probe-consent-btn.probe-on {
  background: var(--vault-gold-ink);
  border-color: var(--vault-gold-ring);
  color: var(--vault-gold);
  box-shadow: var(--vault-elev-select);
}

/* ---------------------------------------------------------------------
   4. WHO IS IN
   ------------------------------------------------------------------ */
.probe-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vault-space-2);
  min-height: 40px;
}
.probe-person {
  display: inline-flex;
  align-items: center;
  gap: var(--vault-space-2);
  min-height: 40px;
  padding: 0 var(--vault-space-3);
  border-radius: var(--vault-radius-pill);
  border: 1px solid var(--vault-edge);
  background: var(--vault-surface-raised);
  color: var(--vault-text);
  font-size: var(--vault-type-small);
  font-weight: var(--vault-weight-medium);
  cursor: pointer;
  transition: border-color var(--vault-motion-fast) var(--vault-ease),
              background-color var(--vault-motion-fast) var(--vault-ease);
}
.probe-person:active { transform: scale(0.97); }
.probe-person.probe-person-selected {
  background: var(--vault-gold-ink);
  border-color: var(--vault-gold-ring);
  color: var(--vault-gold);
  box-shadow: var(--vault-elev-select);
}
.probe-person[disabled] { opacity: 0.45; cursor: default; }
.probe-person-self { opacity: 0.6; cursor: default; }
/* Player photos are game UI, never navigable images (spec section 9). */
.probe-person-photo {
  width: 24px; height: 24px;
  border-radius: var(--vault-radius-pill);
  object-fit: cover;
  background: var(--vault-surface);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Live reaction, when the target happens to have a camera on. Entirely
   optional decoration: Probe works identically with no media at all. */
.probe-person-live {
  width: 8px; height: 8px;
  border-radius: var(--vault-radius-pill);
  background: var(--vault-gold);
  box-shadow: 0 0 6px var(--vault-gold-glow);
}

.probe-empty {
  font-size: var(--vault-type-small);
  color: var(--vault-text-muted);
  line-height: 1.4;
}

/* ---------------------------------------------------------------------
   5. ASKING
   ------------------------------------------------------------------ */
.probe-composer { display: flex; flex-direction: column; gap: var(--vault-space-2); }
.probe-input {
  width: 100%;
  min-height: 64px;
  resize: none;
  padding: var(--vault-space-3);
  border-radius: var(--vault-radius-control);
  border: 1px solid var(--vault-edge-control);
  background: var(--vault-ground);
  color: var(--vault-text);
  font: inherit;
  font-size: var(--vault-type-body);
  line-height: 1.35;
}
.probe-input:focus-visible { outline: 2px solid var(--vault-focus-color); outline-offset: 2px; }
.probe-composer-row { display: flex; align-items: center; gap: var(--vault-space-2); }
.probe-ask-btn {
  min-height: var(--vault-touch-min);
  padding: 0 var(--vault-space-5);
  border-radius: var(--vault-radius-pill);
  border: 1px solid var(--vault-gold-ring);
  background: var(--vault-gold-ink);
  color: var(--vault-gold);
  font-size: var(--vault-type-small);
  font-weight: var(--vault-weight-heavy);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.probe-ask-btn:active { transform: scale(0.97); }
.probe-ask-btn[disabled] { opacity: 0.4; cursor: default; transform: none; }
.probe-hint-text {
  font-size: var(--vault-type-micro);
  color: var(--vault-text-muted);
  line-height: 1.4;
}
.probe-hint-text.probe-refused { color: var(--vault-gold-soft); }

/* ---------------------------------------------------------------------
   6. THE ANSWERS
   Newest first. Vault's line is the loud part; the question that provoked
   it sits above it, small.
   ------------------------------------------------------------------ */
.probe-feed {
  flex: 1;
  /* Without this a flex child refuses to shrink below its content, so the
     feed pushes the footnote off the panel instead of scrolling. */
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--vault-space-2);
  padding-right: 2px;
}
.probe-answer {
  padding: var(--vault-space-3);
  border-radius: var(--vault-radius-card);
  border: 1px solid var(--vault-edge);
  background: var(--vault-surface-raised);
  animation: probe-answer-in var(--vault-motion-slow) var(--vault-ease-out);
}
@keyframes probe-answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.probe-answer-q {
  font-size: var(--vault-type-micro);
  color: var(--vault-text-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--vault-space-2);
}
.probe-answer-line {
  font-size: var(--vault-type-lead);
  font-weight: var(--vault-weight-strong);
  line-height: 1.3;
  color: var(--vault-text);
}
/* Spice is visible in the DELIVERY, not in a badge. The one thing the tier
   changes here is how hot the line looks. */
.probe-answer[data-tier="high"] .probe-answer-line { color: var(--vault-gold); }
.probe-answer[data-tier="low"] .probe-answer-line { font-weight: var(--vault-weight-medium); }

.probe-footnote {
  font-size: var(--vault-type-micro);
  color: var(--vault-text-muted);
  line-height: 1.4;
  opacity: 0.8;
}

/* ---------------------------------------------------------------------
   7. DESKTOP
   Phones swipe. Everything above is already a real <button>/<textarea>, so
   desktop needs only room to breathe and a visible keyboard route, which
   is the panel's own focus order plus the UP/ESC keys wired in client.js.
   ------------------------------------------------------------------ */
@media (min-width: 720px) {
  .probe-panel {
    left: 50%;
    right: auto;
    width: min(680px, 92vw);
    transform: translate(-50%, -100%);
    border-radius: 0 0 var(--vault-radius-card) var(--vault-radius-card);
  }
  .probe-panel.probe-panel-open { transform: translate(-50%, 0); }
}