/* =====================================================================================================================
 * VISION SCREEN · A DEAD DROP, CRACKED OPEN (2026-11-06). Mock-up: docs/sl-vision/DeadDrop.dc.html (390 x 844).
 * A full-screen room over the home screen (phone and desktop alike: it is opened from the scope).
 * ===================================================================================================================== */

.slv-dd {
  position: fixed; inset: 0; z-index: 90; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(22px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(110% 60% at 50% 0%, #241d06 0%, #040308 60%), #040308;
  color: #efe6d6; font-family: "Saira Semi Condensed", var(--font-display), sans-serif;
}
.slv-dd[hidden] { display: none; }
body.slv-dd-open { overflow: hidden; }
/* The right column (every Dead Drop + its own live key) is the Desktop's (desk-dock.css, body.sld). On a phone it
   drew unstyled under the messages (seen 2026-11-08 making the store shots); the phone has the LIVE VOICE tab. */
body:not(.sld) .slv-dd__side { display: none; }

.slv-dd__head { position: relative; display: flex; flex-direction: column; gap: 2px; }
.slv-dd__kick { font-size: 12px; letter-spacing: 0.24em; color: #f5c542; font-weight: 700; }
.slv-dd__name { font-size: 30px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.05; padding-right: 64px; }
.slv-dd__where { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; }
.slv-dd__close {
  all: unset; position: absolute; right: 0; top: 0; cursor: pointer; padding: 2px 0 8px 12px;
  font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174;
  -webkit-tap-highlight-color: transparent;
}

.slv-dd__tabs { display: flex; gap: 8px; }
.slv-dd__tabs button {
  background: none !important; box-shadow: none !important; transform: none !important;
  all: unset; box-sizing: border-box; flex: 1; text-align: center; cursor: pointer; padding: 9px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); color: #8a8174; font-size: 13px; font-weight: 800; letter-spacing: 0.14em;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.slv-dd__tabs button.on { border-color: #f5c542; color: #f5c542; }

.slv-dd__list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; flex: 1; -webkit-overflow-scrolling: touch; }
.slv-dd__msg {
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 12px;
  flex: none;
}
.slv-dd__msg.voice.new { border-color: rgba(245, 197, 66, 0.35); background: rgba(245, 197, 66, 0.05); }
.slv-dd__msg.text { flex-direction: column; align-items: stretch; gap: 4px; }
.slv-dd__msg.text.new { border-color: rgba(245, 197, 66, 0.35); }
.slv-dd__play {
  all: unset; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; flex: none; cursor: pointer;
  border: 2px solid rgba(245, 197, 66, 0.4); display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.slv-dd__play svg path { fill: #8a8174; }
.slv-dd__msg.new .slv-dd__play { border-color: #f5c542; }
.slv-dd__msg.new .slv-dd__play svg path { fill: #f5c542; }
.slv-dd__play.playing { background: rgba(245, 197, 66, 0.25); border-color: #f5c542; }
.slv-dd__play.playing svg path { fill: #f5c542; }
.slv-dd__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.slv-dd__body b, .slv-dd__msg.text b { font-weight: 800; font-size: 15px; }
.slv-dd__msg.text b { font-size: 14px; }
.slv-dd__msg.text p { margin: 0; font-size: 14px; color: #efe6d6; line-height: 1.3; overflow-wrap: anywhere; }
.slv-dd__msg small { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 10px; color: #8a8174; }
.slv-dd__new { font-size: 11px; color: #f5c542; font-weight: 800; letter-spacing: 0.12em; flex: none; }
.slv-dd__note { margin: 4px 2px; font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; line-height: 1.5; }

.slv-dd__lock { display: flex; flex-direction: column; gap: 8px; }
.slv-dd__lock span { font-size: 12px; letter-spacing: 0.16em; color: #f5c542; font-weight: 700; }
.slv-dd__lock input { box-sizing: border-box; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(245, 197, 66, 0.35); background: rgba(0, 0, 0, 0.4); color: #efe6d6; font: 15px "JetBrains Mono", monospace; }
.slv-dd__lock button { all: unset; text-align: center; cursor: pointer; padding: 10px; border-radius: 10px; border: 1px solid #f5c542; color: #f5c542; font-weight: 800; letter-spacing: 0.14em; }

.slv-dd__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; flex: none; }
.slv-dd__rate { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 11px; color: #8a8174; }
.slv-dd__key {
  all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;
  height: 120px; border-radius: 24px; border: 1px solid #f5c542; cursor: pointer;
  background: radial-gradient(80% 120% at 50% 0%, rgba(245, 197, 66, 0.24), rgba(245, 197, 66, 0.04));
  color: #efe6d6; font-family: inherit; font-size: 24px; font-weight: 800; letter-spacing: 0.12em; padding: 0 12px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.slv-dd__key.is-tx { background: radial-gradient(80% 120% at 50% 0%, rgba(245, 197, 66, 0.55), rgba(245, 197, 66, 0.14)); }

/* several drops on one marker: pick one */
.slv-dd-pick {
  position: fixed; z-index: 91; left: 16px; right: 16px; top: 30%; display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border: 1px solid #f5c542; border-radius: 14px; background: rgba(8, 6, 2, 0.97);
  font-family: "Saira Semi Condensed", var(--font-display), sans-serif;
}
.slv-dd-pick span { font-size: 12px; letter-spacing: 0.24em; color: #f5c542; font-weight: 700; }
.slv-dd-pick button { background: none !important; box-shadow: none !important; transform: none !important; all: unset; cursor: pointer; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(245, 197, 66, 0.35); color: #efe6d6; font-size: 17px; font-weight: 800; letter-spacing: 0.06em; }
.slv-dd-pick .slv-dd-pick__x { border: 0; color: #8a8174; font: 11px "JetBrains Mono", monospace; text-align: right; padding: 4px 0 0; }

/* Desktop and wide windows: the phone screen, centred. In this file, after its own "inset: 0", so it wins. */
@media (min-width: 641px) {
  .slv-dd { left: 50%; right: auto; width: min(430px, 100%); transform: translateX(-50%); border-left: 1px solid rgba(255, 255, 255, 0.06); border-right: 1px solid rgba(255, 255, 255, 0.06); }
}


.slv-dd .slv-dd__seek { all: unset; cursor: pointer; align-self: flex-start; font: 800 12px "Saira Semi Condensed", sans-serif; letter-spacing: 0.14em; color: #2ee6d6; padding: 4px 0; }
body.sld .slv-dd__seek { display: none; }