/* Queued requests: the phantom toggle on the wall and its glass popover. Pure black + yellow (style.css tokens). */
.ph-tile {
  position: absolute; left: 0; top: 0; z-index: 2; display: block; padding: 0; margin: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  will-change: transform, opacity; -webkit-tap-highlight-color: transparent;
}
.ph-face {
  position: relative; display: block; width: 100%; aspect-ratio: 480 / 272; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(245, 224, 80, 0.075), transparent 72%),
    rgba(255, 255, 255, 0.012);
  box-shadow: inset 0 0 0 1px rgba(245, 224, 80, 0.10);
  transition: box-shadow 0.3s var(--spring), background-color 0.3s;
}
/* dashed outline of the whole card: an SVG-free dashed border that stays crisp at any size */
.ph-face::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px dashed rgba(245, 224, 80, 0.34);
}
.ph-track {
  position: absolute; left: 50%; top: 52%; width: 44%; aspect-ratio: 2.15; transform: translate(-50%, -50%);
  border-radius: 999px; border: 1.5px dashed rgba(245, 224, 80, 0.62);
  background: rgba(245, 224, 80, 0.035);
  animation: ph-breathe 3.4s ease-in-out infinite;
}
.ph-knob {
  position: absolute; top: 50%; left: 7%; height: 76%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255, 246, 176, 0.32), rgba(245, 224, 80, 0.08) 62%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(245, 224, 80, 0.42), 0 0 18px rgba(245, 224, 80, 0.12);
  animation: ph-drift 3.4s ease-in-out infinite;
}
.ph-sheen {
  position: absolute; inset: -20% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 176, 0.09) 48%, rgba(255, 246, 176, 0.16) 50%, rgba(255, 246, 176, 0.09) 52%, transparent 60%);
  transform: translateX(-60%); animation: ph-sheen 4.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.ph-chip {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px;
  border-radius: 999px; font: 600 9.5px/1 var(--font-jetbrains); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lemon); background: rgba(245, 224, 80, 0.10); box-shadow: inset 0 0 0 1px rgba(245, 224, 80, 0.36);
}
.ph-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 8px var(--lemon); animation: ph-dot 1.7s ease-in-out infinite; }
.ph-cap {
  display: block; margin-top: 7px; padding: 0 2px; font: 500 12px/16px var(--font-inter); color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-tile:hover .ph-face, .ph-tile[aria-expanded="true"] .ph-face { box-shadow: inset 0 0 0 1px rgba(245, 224, 80, 0.28), 0 0 32px rgba(245, 224, 80, 0.08); }
.ph-tile:hover .ph-face::before, .ph-tile[aria-expanded="true"] .ph-face::before { border-color: rgba(245, 224, 80, 0.6); }
.ph-tile:focus { outline: none; }
.ph-tile:focus-visible .ph-face { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--lemon); }
/* arriving from the queued flow: materialises out of the stamp */
.ph-tile.ph-in > * { animation: ph-in 0.62s var(--spring) both; }
.ph-tile.ph-in > .ph-cap { animation-delay: 0.12s; }

@keyframes ph-breathe { 0%, 100% { opacity: 0.62; } 50% { opacity: 1; } }
/* transform instead of left: 4% of the track = 11.316% of the knob's own width (knob = 76% of track height, aspect 1, track aspect 2.15) */
@keyframes ph-drift { 0%, 100% { transform: translateY(-50%); } 50% { transform: translate(11.316%, -50%); } }
@keyframes ph-sheen { 0% { transform: translateX(-60%); } 62%, 100% { transform: translateX(60%); } }
@keyframes ph-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ph-in {
  0% { opacity: 0; transform: scale(0.86); filter: blur(6px) brightness(2.2); }
  55% { opacity: 1; filter: blur(0) brightness(1.4); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* ── popover ─────────────────────────────────────────────────────────────────────── */
.ph-pop {
  position: absolute; z-index: 40; width: min(320px, calc(100vw - 32px)); padding: 16px 18px 15px;
  border-radius: 18px; color: var(--fg);
  background: rgba(16, 16, 14, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 246, 176, 0.10), 0 18px 48px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(6px) scale(0.98); transform-origin: 50% 0;
  transition: opacity 0.22s ease, transform 0.32s var(--spring);
}
.ph-pop.in { opacity: 1; transform: none; }
.ph-pop[hidden] { display: none; }
.ph-stamp {
  display: inline-block; margin-bottom: 10px; padding: 4px 9px 3px; border-radius: 6px; transform: rotate(-3deg);
  font: 700 10px/1 var(--font-jetbrains); letter-spacing: 0.22em; text-transform: uppercase; color: var(--lemon);
  box-shadow: inset 0 0 0 1.5px rgba(245, 224, 80, 0.7);
}
.ph-h { margin: 0 28px 8px 0; font: 400 15px/1.4 var(--font-inter); color: var(--fg); }
.ph-h b { color: var(--lemon); font-weight: 600; }
.ph-q { margin: 0 0 8px; font: italic 400 13px/1.45 var(--font-inter); color: var(--fg-2); overflow-wrap: anywhere; max-height: 5.8em; overflow: auto; }
.ph-meta { margin: 0; font: 500 10.5px/1.3 var(--font-jetbrains); letter-spacing: 0.06em; color: var(--fg-3); }
.ph-x {
  position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  font: 400 20px/1 var(--font-inter); color: var(--fg-2); background: transparent; cursor: pointer;
}
.ph-x:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.ph-x:focus-visible { outline: 2px solid var(--lemon); outline-offset: 1px; }
.ph-x::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }   /* 44 px hit area */

/* privacy line under the prompt */
.req-note { margin: 10px auto 0; width: var(--prompt-w); text-align: center; font: 500 10.5px/1.4 var(--font-jetbrains); letter-spacing: 0.04em; color: var(--fg-3); }

@media (max-width: 559px) {
  .ph-chip { left: 7px; top: 7px; height: 18px; padding: 0 6px; font-size: 8.5px; }
  .ph-cap { font-size: 11px; margin-top: 5px; }
  .ph-pop {
    position: fixed; left: 16px !important; right: 16px; top: auto !important; width: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform-origin: 50% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ph-track, .ph-knob, .ph-sheen, .ph-chip i { animation: none; }
  .ph-sheen { display: none; }
  .ph-tile.ph-in > * { animation: ph-in-fade 0.3s ease both; }
  .ph-pop { transition: opacity 0.15s ease; transform: none; }
  @keyframes ph-in-fade { from { opacity: 0; } to { opacity: 1; } }
}