/* =================================================================
   OpenedMic™ — /app Room Chrome (Packet 3)
   -----------------------------------------------------------------
   Additive stylesheet loaded ONLY on /app (public/index.html).
   Composes Packet 1 tokens (tokens.css / base.css / components.css).
   Scope: broadcaster room + listener room + QR/share surface +
   live-state indicators + reactions + chat polish.
   Uses an .om-app-room namespace on room primitives to avoid any
   collision with existing inline-styled classes in the SPA.
   ----------------------------------------------------------------- */

/* ── STATUS BAR — Direction Freeze §5.3 / §8.1 state language ─────
   Enhances the existing .status-bar + .sdot + .stxt elements so
   each state reads distinctly. No element renames; purely CSS.
   ----------------------------------------------------------------- */

.status-bar {
  /* Token-align background/border without changing layout. */
  background: var(--om-surface-2);
  border-color: var(--om-border-subtle);
  border-radius: var(--om-radius-md);
}

/* Live-dot per Direction Freeze §5.3: 10 px circle + 2 s pulse. */
.sdot {
  width: 10px;
  height: 10px;
  position: relative;
}
.sdot.r {
  background: var(--om-role-signal-live);
  box-shadow: none;
  animation: none;
}
.sdot.r::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--om-role-signal-live);
  animation: om-live-pulse 2000ms var(--om-ease-standard) infinite;
  opacity: 0.4;
}
.sdot.g {
  background: var(--om-signal-ok);
  box-shadow: none;
  animation: none;
}
.sdot.a {
  background: var(--om-signal-warn);
  box-shadow: none;
  animation: none;
}
.sdot.a::after {
  /* Grace / connecting — slower, more subtle pulse. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--om-signal-warn);
  animation: om-live-pulse 2600ms var(--om-ease-standard) infinite;
  opacity: 0.35;
}

@keyframes om-live-pulse {
  0%   { transform: scale(1);   opacity: 0.4; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sdot.r::after,
  .sdot.a::after {
    animation: none;
    opacity: 0;
  }
}

/* Status text — token colors per state. */
.stxt {
  color: var(--om-text-secondary);
  font-family: var(--om-font-sans);
  font-weight: var(--om-weight-semibold);
}
.stxt.live {
  color: var(--om-role-signal-live);
}

/* Elapsed-time readout (new — added by Packet 3 JS). */
.om-elapsed {
  display: none; /* hidden unless live */
  margin-inline-start: auto;
  padding-inline: var(--om-space-2);
  font-family: var(--om-font-mono);
  font-size: var(--om-type-live-time-readout);
  color: var(--om-text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.status-bar.is-live .om-elapsed {
  display: inline-block;
  color: var(--om-text-primary);
}

/* ── ROOM-CODE + SHARE — premium minimal surface ──────────────── */

/* Existing .rctag (room-code tag) token-aligned. */
.rctag {
  font-family: var(--om-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: var(--om-text-primary);
  background: var(--om-surface-3);
  border: 1px solid var(--om-border-default);
}

/* QR wrap — gentle elevation + rhythm. Non-destructive overrides. */
.qr-w {
  border-radius: var(--om-radius-lg);
}

#qr-container {
  padding: var(--om-space-3);
  background: #ffffff;
  border-radius: var(--om-radius-md);
  display: inline-block;
}

#room-link {
  font-family: var(--om-font-mono);
  color: var(--om-text-secondary);
  letter-spacing: 0.02em;
  word-break: break-all;
  padding-block: var(--om-space-2);
}

/* Share + Copy buttons get token-aligned focus rings without
   changing their colors (they already use brand-red). */
#share-btn:focus-visible,
.qr-w button:focus-visible {
  outline: 2px solid var(--om-brand-red);
  outline-offset: 2px;
  border-radius: var(--om-radius-md);
}

/* Announcement region for copy success (JS inserts content). */
.om-copy-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── REACTIONS — focus ring + token-aligned active state ──────── */

.r-btn {
  transition:
    transform  var(--om-duration-short) var(--om-ease-standard),
    background var(--om-duration-short) var(--om-ease-standard);
}

.r-btn:focus-visible {
  outline: 2px solid var(--om-brand-red);
  outline-offset: 2px;
}

.r-btn:hover {
  transform: scale(1.08);
}

.r-btn:active {
  transform: scale(0.96);
}

/* ── CHAT — token-aligned polish (additive; no class rename) ──── */

.chat-msg,
.chat-message {
  border-radius: var(--om-radius-md);
}

.chat-input,
#chat-input {
  border-color: var(--om-border-default);
}

.chat-input:focus,
#chat-input:focus {
  outline: none;
  border-color: var(--om-brand-red);
}

/* ── LISTENER connect/echo banners — token-aligned subtle palette ── */

.cbanner,
.wbanner {
  border-radius: var(--om-radius-md);
  font-size: var(--om-type-sub);
}

/* ── RETRY button already styled; only focus-ring improvement. ── */
#retry-listen-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ── In-room keyboard-shortcut helper toast (JS shows briefly) ── */
.om-shortcut-hint {
  position: fixed;
  inset-block-end: var(--om-space-6);
  inset-inline-end: var(--om-space-6);
  z-index: var(--om-z-toast);
  background: var(--om-surface-3);
  color: var(--om-text-secondary);
  border: 1px solid var(--om-border-default);
  border-radius: var(--om-radius-md);
  padding: var(--om-space-2) var(--om-space-3);
  font-size: var(--om-type-micro);
  letter-spacing: 0.04em;
  font-family: var(--om-font-mono);
  box-shadow: var(--om-shadow-2);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   var(--om-duration-short) var(--om-ease-standard),
    transform var(--om-duration-short) var(--om-ease-standard);
  pointer-events: none;
}
.om-shortcut-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =================================================================
   L5B — VT5B-MACRO-02 — App-shell additive utilities
   -----------------------------------------------------------------
   Net-new opt-in utilities for /app surfaces. Zero existing markup
   in public/index.html or anywhere else consumes these classes.
   Every rule composes only existing --om-* tokens. No new tokens.
   No existing class modified. Single git revert restores prior
   state. Authored 2026-04-26 under L5B.
   ----------------------------------------------------------------- */

/* ── APP CONTROL GROUP — operational button cluster ────────────
   Use as a wrapper around adjacent room-control buttons to give
   them token-aligned spacing. Does NOT modify any existing button
   class. Safe to add to a parent <div> later without touching
   children. */
.om-app-control-group {
  display: inline-flex;
  align-items: center;
  gap: var(--om-space-2);
  padding: var(--om-space-1);
  background: var(--om-surface-2);
  border: 1px solid var(--om-border-subtle);
  border-radius: var(--om-radius-md);
}
.om-app-control-group--quiet {
  background: transparent;
  border-color: transparent;
}
.om-app-control-group--block {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

/* ── APP META STRIP — horizontal divider with breathing room ────
   For app shells where a hairline rule is too austere and a card
   border too heavy. Sits well above the room-code area or below
   the live-state band. */
.om-app-meta-strip {
  display: flex;
  align-items: center;
  gap: var(--om-space-3);
  padding-block: var(--om-space-2);
  border-block: 1px solid var(--om-border-subtle);
  color: var(--om-text-tertiary);
  font-family: var(--om-font-sans);
  font-size: var(--om-type-caption);
  letter-spacing: var(--om-tracking-wide);
}
.om-app-meta-strip > .om-app-meta-strip__separator {
  flex: 1;
  block-size: 1px;
  background: var(--om-border-subtle);
}

/* ── APP STATE PILL — small status pill family ─────────────────
   Mirrors .op-tag-* from ops.css but lives on the app side. Uses
   the same alpha tints already declared as state-tint tokens by
   VT2/VT3 (--om-surface-tag-*-bg). No live-signal pill is
   provided here — the live signal is reserved for .sdot.r and
   .om-badge--live per the sacred contract. */
.om-app-state-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--om-space-1);
  padding-block: 2px;
  padding-inline: var(--om-space-2);
  border-radius: var(--om-radius-pill);
  font-family: var(--om-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--om-type-micro);
  font-weight: var(--om-weight-bold);
  letter-spacing: var(--om-tracking-wide);
}
.om-app-state-pill--ok    { background: var(--om-surface-tag-ok-bg);    color: var(--om-signal-ok); }
.om-app-state-pill--warn  { background: var(--om-surface-tag-warn-bg);  color: var(--om-signal-warn); }
.om-app-state-pill--error { background: var(--om-surface-tag-error-bg); color: var(--om-signal-error); }
.om-app-state-pill--info  { background: var(--om-surface-tag-info-bg);  color: var(--om-signal-info); }

/* ── APP FIGURE — content frame for QR codes / embedded media ──
   Use around the QR canvas, share-screen embeds, or any
   illustrative figure. Adds a quiet token-aligned card with
   internal padding so figures don't sit flush against the
   surface they live on. */
.om-app-figure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--om-space-3);
  background: var(--om-surface-2);
  border: 1px solid var(--om-border-subtle);
  border-radius: var(--om-radius-lg);
}
.om-app-figure--paper {
  background: #ffffff;
  color: var(--om-text-inverse);
}
.om-app-figure--ghost {
  background: transparent;
  border-style: dashed;
  border-color: var(--om-border-default);
}

/* ── KEYBOARD SHORTCUT KEY ─────────────────────────────────────
   Tiny chip for in-product keyboard hints. Complements the
   existing .om-shortcut-hint toast above. */
.om-app-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 22px;
  padding-block: 1px;
  padding-inline: var(--om-space-2);
  background: var(--om-surface-3);
  border: 1px solid var(--om-border-default);
  border-radius: var(--om-radius-sm);
  font-family: var(--om-font-mono);
  font-size: var(--om-type-micro);
  letter-spacing: 0.04em;
  color: var(--om-text-secondary);
}

/* ── ELAPSED TIME WRAP (composition-only) ──────────────────────
   For non-status timers and read-aloud counters that should
   inherit the same monospaced + tabular treatment as .om-elapsed
   without claiming live-state semantics. */
.om-app-time {
  font-family: var(--om-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--om-type-mono-data);
  color: var(--om-text-tertiary);
  letter-spacing: 0.02em;
}
.om-app-time--ink { color: var(--om-text-primary); }