/* NET REPLAY · phone screen 7 (2026-11-07). Mock-up docs/sl-vision/Replay.dc.html. Violet is replay's own colour. */
.slv-rp {
  position: fixed; inset: 0; z-index: 90; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 70% at 50% 40%, #120d1c 0%, #040308 62%), #040308;
  color: #efe6d6; font-family: "Saira Semi Condensed", var(--font-display), sans-serif;
}
.slv-rp[hidden] { display: none; }
body.slv-rp-open { overflow: hidden; }
.slv-rp__head { position: relative; display: flex; flex-direction: column; gap: 2px; }
.slv-rp__kick { font-size: 12px; letter-spacing: 0.24em; color: #b07cff; font-weight: 700; }
.slv-rp__head b { font-size: 26px; font-weight: 800; }
.slv-rp__head small { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; }
.slv-rp .slv-rp__close { all: unset; position: absolute; right: 0; top: 0; cursor: pointer; padding: 2px 0 8px 12px; font: 11px "JetBrains Mono", monospace; color: #8a8174; }
.slv-rp__scope { width: 100%; max-height: 300px; flex: none; }
.slv-rp__scope text { font-family: "Saira Semi Condensed", var(--font-display), sans-serif; }
.slv-rp__bar { position: relative; height: 56px; border: 1px solid rgba(176, 124, 255, 0.3); border-radius: 12px; overflow: hidden; flex: none; cursor: pointer; }
.slv-rp__clips span { position: absolute; top: 14px; height: 28px; border-radius: 4px; opacity: 0.75; }
.slv-rp__cursor { position: absolute; top: 0; width: 2px; height: 100%; background: #efe6d6; pointer-events: none; }
.slv-rp__axis { display: flex; justify-content: space-between; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 10px; color: #8a8174; }
.slv-rp__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.slv-rp .slv-rp__ev {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 4px; font-size: 14px; font-weight: 800; color: #efe6d6; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.slv-rp__ev small { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; font-weight: 500; flex: none; }
.slv-rp__ev.past { opacity: 0.55; }
.slv-rp__ev.now { opacity: 1; color: #b07cff; }
.slv-rp__txt { font-weight: 500; color: #efe6d6; }
.slv-rp__note { margin: 8px 2px; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; line-height: 1.5; }
.slv-rp__foot { display: flex; gap: 8px; flex: none; }
.slv-rp .slv-rp__foot button {
  all: unset; box-sizing: border-box; flex: 1; height: 60px; border-radius: 14px; text-align: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12); font: 800 18px "Saira Semi Condensed", sans-serif; letter-spacing: 0.12em; color: #efe6d6;
  background: none !important; box-shadow: none !important;
}
.slv-rp .slv-rp__play { border-color: #b07cff !important; background: rgba(176, 124, 255, 0.12) !important; }
.slv-rp .slv-rp__speed.on { border-color: #b07cff !important; color: #b07cff; }
/* the REPLAY tile joins the row under the talk key */
body.slv .slv-more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.slv .slv-more .slv-more__replay b { color: #b07cff; }
@media (min-width: 641px) { .slv-rp { left: 50%; right: auto; width: min(430px, 100%); transform: translateX(-50%); } }