/* =====================================================================================================================
 * MAGIC PTT SL DESKTOP · DOCKED, NOT POPPED (2026-11-07, his word: "i don't really like the mobile narrow looking screen
 * when you click on the dead drop stuff ... the mobile looking cards [don't] fit my vision").
 * On the command desk (body.sld) the Dead Drop room, the NEED HELP beacon and Voice in flight open IN THE CENTRE of the
 * desk, where the scope is: the nets, traffic, operators, mesh and drops stay beside them. Desktop forms: a message
 * table with rows, not phone cards; tabs as a tab strip; the key as a slim bar. Phones are untouched.
 * ===================================================================================================================== */

body.sld .slv-dd,
body.sld .slv-sos,
body.sld .slv-flight {
  top: 64px !important; left: 300px !important; right: 340px !important; bottom: 0 !important;
  width: auto !important; transform: none !important; border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 22px 28px 20px !important;
}
body.sld.slv-dd-open, body.sld.slv-sos-on { overflow: auto; }

/* ---------------------------------------------------------------- the Dead Drop room, desk form */
body.sld .slv-dd { background: #05080a; display: flex; gap: 0; }
body.sld .slv-dd__side { display: none !important; }
body.sld .slv-dd__head { padding-bottom: 14px; border-bottom: 1px solid rgba(245, 197, 66, 0.2); }
body.sld .slv-dd__name { font-size: 34px; }
body.sld .slv-dd__close { top: 4px; font-size: 12px; }
body.sld .slv-dd__close::after { content: " · ESC"; }

/* tabs: a strip with an underline, not two pills */
body.sld .slv-dd__tabs { gap: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
body.sld .slv-dd__tabs button {
  flex: none !important; border: 0 !important; border-radius: 0 !important; padding: 12px 0 10px !important;
  border-bottom: 2px solid transparent !important; font-size: 13px;
}
body.sld .slv-dd__tabs button.on { border-bottom-color: #f5c542 !important; }

/* the messages: a table */
body.sld .slv-dd__list { gap: 0; padding-top: 4px; }
body.sld .slv-dd__msg {
  border: 0 !important; border-radius: 0 !important; background: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; padding: 9px 4px !important; gap: 14px !important;
}
body.sld .slv-dd__msg:hover { background: rgba(245, 197, 66, 0.04) !important; }
body.sld .slv-dd__msg.new { background: rgba(245, 197, 66, 0.05) !important; }
body.sld .slv-dd__play { width: 32px !important; height: 32px !important; border-width: 1.5px !important; }
body.sld .slv-dd__play svg { width: 12px; height: 12px; }
body.sld .slv-dd__body { flex-direction: row !important; align-items: baseline; gap: 18px !important; }
body.sld .slv-dd__body b { flex: 0 0 210px; font-size: 15px !important; }
body.sld .slv-dd__body small { font-size: 11px !important; }
/* a text message on one row: who, what, when */
body.sld .slv-dd__msg.text { flex-direction: row !important; align-items: baseline !important; padding-left: 50px !important; }
body.sld .slv-dd__msg.text b { flex: 0 0 210px; }
body.sld .slv-dd__msg.text p { flex: 1; font-size: 14px; }
body.sld .slv-dd__msg.text small { flex: none; }

/* the foot: one slim bar, the rate on the left, the key on the right */
body.sld .slv-dd__foot {
  flex-direction: row !important; align-items: center; justify-content: space-between; gap: 18px;
  padding-top: 14px; border-top: 1px solid rgba(245, 197, 66, 0.2);
}
body.sld .slv-dd__key { height: 56px !important; width: 420px; flex: none; font-size: 18px !important; border-radius: 14px !important; }
body.sld .slv-dd__key::after { content: " · SPACE"; font-size: 12px; letter-spacing: 0.1em; color: #f5c542; margin-left: 6px; }

/* ---------------------------------------------------------------- beacon and flight, desk form */
body.sld .slv-sos { background: radial-gradient(70% 60% at 50% 35%, #2a0508 0%, #05080a 70%); }
body.sld .slv-sos__rows { max-width: 640px; width: 100%; align-self: center; }
body.sld .slv-sos__ok { max-width: 640px; width: 100%; align-self: center !important; height: 60px; }
body.sld .slv-flight { background: radial-gradient(70% 60% at 50% 42%, #1a0b0e 0%, #05080a 70%); }
body.sld .slv-flight__path { max-width: 760px; align-self: center; }
body.sld .slv-flight__key { height: 70px; }

/* the open drop is lit in the desk's drop list */
body.sld .sld-drop.on { background: rgba(245, 197, 66, 0.12) !important; border-color: #f5c542; }

/* closed means gone: the desk layout above sets display, so the hidden state has to win over it (11-07: "i can't get
   this to close" — CLOSE and ESC worked, the room stayed on screen) */
body.sld .slv-dd[hidden], body.sld .slv-sos[hidden], body.sld .slv-flight[hidden] { display: none !important; }

/* CLOSE as a real button you can see and hit, inside the room's edge (11-07: "these dont do anything", tiny and cut off) */
body.sld .slv-dd .slv-dd__close {
  top: 0; right: 0; padding: 9px 16px; border: 1px solid rgba(245, 197, 66, 0.45); border-radius: 8px;
  color: #f5c542; font-size: 12px; letter-spacing: 0.12em; font-weight: 700;
}
body.sld .slv-dd .slv-dd__close:hover { background: rgba(245, 197, 66, 0.12) !important; }
body.sld .slv-dd__name { padding-right: 180px; }

/* ---------------------------------------------------------------- D5 as drawn: the open drop left, the other drops and LIVE VOICE right */
body.sld .slv-dd { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 24px; row-gap: 14px; }
body.sld .slv-dd__head, body.sld .slv-dd__tabs, body.sld .slv-dd__list, body.sld .slv-dd__foot { grid-column: 1; }
body.sld .slv-dd__side { display: flex !important; flex-direction: column; gap: 10px; grid-column: 2; grid-row: 1 / span 4; min-height: 0; overflow-y: auto; border-left: 1px solid rgba(245, 197, 66, 0.2); padding-left: 24px; }
body.sld .slv-dd__tabs button[data-tab="live"] { display: none; }
body.sld .slv-dd__other { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: none !important; box-shadow: none !important; }
body.sld .slv-dd__other b { font-size: 17px; font-weight: 800; letter-spacing: 0.04em; color: #efe6d6; }
body.sld .slv-dd__other small { font-family: "JetBrains Mono", var(--font-mono), monospace; font-size: 10px; color: #8a8174; }
body.sld .slv-dd__other.on { border-color: #f5c542; background: rgba(245, 197, 66, 0.06) !important; }
body.sld .slv-dd__other.on b, body.sld .slv-dd__other.on small { color: #f5c542; }
body.sld .slv-dd__unlock { display: flex; gap: 8px; margin: -4px 0 6px; }
body.sld .slv-dd__unlock input { flex: 1; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(245, 197, 66, 0.35); background: rgba(0, 0, 0, 0.35); color: #efe6d6; font: 14px "JetBrains Mono", monospace; }
body.sld .slv-dd__unlock button { all: unset; cursor: pointer; width: 90px; height: 44px; border-radius: 10px; border: 1px solid #f5c542; color: #f5c542; text-align: center; font: 800 14px var(--font-display); letter-spacing: 0.14em; background: none !important; }
body.sld .slv-dd__live { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; }
body.sld .slv-dd__live p { margin: 0; font-size: 15px; }
body.sld .slv-dd__rates { display: flex; gap: 8px; }
body.sld .slv-dd__rates button { all: unset; box-sizing: border-box; flex: 1; text-align: center; cursor: pointer; padding: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); color: #8a8174; font: 800 14px var(--font-display); letter-spacing: 0.12em; background: none !important; }
body.sld .slv-dd__rates button.on { border-color: rgba(245, 197, 66, 0.5); color: #f5c542; }
body.sld .slv-dd__livekey { all: unset; box-sizing: border-box; cursor: pointer; height: 56px; border-radius: 14px; border: 1px solid #f5c542; text-align: center; display: flex; align-items: center; justify-content: center; color: #efe6d6; font: 800 15px var(--font-display); letter-spacing: 0.12em; background: radial-gradient(80% 120% at 50% 0%, rgba(245, 197, 66, 0.24), rgba(245, 197, 66, 0.04)) !important; touch-action: none; user-select: none; }
body.sld .slv-dd__livekey.is-tx { background: radial-gradient(80% 120% at 50% 0%, rgba(245, 197, 66, 0.55), rgba(245, 197, 66, 0.14)) !important; }
/* room width: the right column narrower, the key stretches, names wrap; nothing overflows the centre */
body.sld .slv-dd { grid-template-columns: minmax(0, 1fr) 280px; }
body.sld .slv-dd__key { width: auto !important; flex: 1 1 auto !important; min-width: 0; }
body.sld .slv-dd__foot .slv-dd__rate { flex: 0 1 220px; min-width: 0; }
body.sld .slv-dd__body b, body.sld .slv-dd__msg.text b { flex: 0 0 150px !important; }
body.sld .slv-dd__body { flex-wrap: wrap; }
body.sld .slv-dd__name { font-size: 28px; padding-right: 150px; }
body.sld .slv-dd__msg.text { padding-left: 46px !important; }
body.sld .slv-dd__msg.text p { min-width: 0; overflow-wrap: anywhere; }