/* chat-deck.css - the Bridge Deck (1.11.9.39). Picked from the chat panel
   mockups: I5, "Bridge Deck, full column". Material from round 7, I6
   "Gunmetal" (1.11.9.41): the housing is the same moulded green-black as the
   other three panels' bezels, so the column reads as one more panel of the
   same machine, with graphite keycaps and amber legends.

   The whole right column becomes one console: a gunmetal housing, a green
   phosphor CRT, an indicator lamp strip and a sloped keyboard deck. Wire
   Credits and the Leaderboard are no longer sections under the chat; they are
   modes of the same screen, reached from the WIRE and RANKS keys.

   NOTHING IS MOVED IN THE DOM. #chatBox, #transferSection and #leaderboardCompact
   stay direct children of #rightPanel with their ids, because mobile.js tags
   those three children to build its Chat / Wire / Ranks views and the check
   suite asserts on them. Each of the three is painted as the CRT, and the mode
   on #rightPanel[data-deck] decides which one is lit. The keys are proxies:
   they click the existing tabs, call the existing room switch and press the
   existing buttons, so every rule the old controls carried (the 18+ gate on
   Unmod, read receipts, the word limit, the wire cooldown) still applies.

   Desktop only: every rule is scoped off body.fm-mobile. Phones keep their own
   shell, and the deck's added parts are hidden there outright, except the line
   screen and the call strip, which mobile-deck.css shows in the phone's chat
   view (1.11.9.123). */

body.fm-mobile .fmd-plate, body.fm-mobile .fmd-lamps, body.fm-mobile .fmd-deck,
body.fm-mobile .fmd-head, body.fm-mobile .fmd-rule, body.fm-mobile .fmd-prompt, body.fm-mobile .fmd-foot, body.fm-mobile .fmd-lbl{display:none!important}

/* ── Housing ─────────────────────────────────────────────────────────────── */
body:not(.fm-mobile) #rightPanel.fmd{
  --fmd-ph:#7cf0a4; --fmd-ph-dim:rgba(124,240,164,.45); --fmd-ph-glow:rgba(66,255,126,.35); --fmd-amb:#f5c26a;
  border:0;border-radius:9px;padding:9px 13px 10px;gap:7px;
  /* Four screw heads, painted rather than placed: no extra nodes for mobile.js to tag. */
  background:
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) 6px 6px/9px 9px no-repeat,
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) calc(100% - 6px) 6px/9px 9px no-repeat,
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) 6px calc(100% - 6px)/9px 9px no-repeat,
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) calc(100% - 6px) calc(100% - 6px)/9px 9px no-repeat,
    linear-gradient(180deg,#1b201b,#0a0c0a);
  box-shadow:0 0 0 1px #000,0 4px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px #262c26,inset 0 -2px 0 rgba(0,0,0,.6)}
body:not(.fm-mobile) #rightPanel.fmd>*{flex-shrink:0}
body:not(.fm-mobile) #rightPanel.fmd>.fmd-plate{order:0}
body:not(.fm-mobile) #rightPanel.fmd>#margin-call-banner,
body:not(.fm-mobile) #rightPanel.fmd>#dunce-banner{order:1;margin:0}
body:not(.fm-mobile) #rightPanel.fmd>#chatBox,
body:not(.fm-mobile) #rightPanel.fmd>#transferSection,
body:not(.fm-mobile) #rightPanel.fmd>#leaderboardCompact{order:2}
body:not(.fm-mobile) #rightPanel.fmd>.fmd-lamps{order:3}
body:not(.fm-mobile) #rightPanel.fmd>.fmd-deck{order:4}

.fmd-plate{display:flex;justify-content:space-between;align-items:center;padding:0 10px;height:14px;
  font-family:'Share Tech Mono',ui-monospace,monospace;letter-spacing:.2em;color:#8a6a34;text-shadow:0 1px 0 #000;white-space:nowrap;overflow:hidden}
.fmd-plate{gap:10px}
.fmd-plate b{font-weight:400;font-size:10px;flex:0 0 auto}
.fmd-plate span{font-size:9px;min-width:0;overflow:hidden;text-overflow:clip}

/* ── The CRT ─────────────────────────────────────────────────────────────────
   Whichever of the three sections is lit fills the column; the other two are
   gone. The bezel is box-shadow rings, so it costs no layout. */
body:not(.fm-mobile) #rightPanel.fmd>#chatBox,
body:not(.fm-mobile) #rightPanel.fmd>#transferSection,
body:not(.fm-mobile) #rightPanel.fmd>#leaderboardCompact{
  position:relative;margin:7px;padding:0;border:0;border-radius:12px/15px;
  background:radial-gradient(ellipse at 50% 45%,#0a1a0e 0%,#05100a 65%,#020805 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.9),inset 0 0 10px rgba(66,255,126,.08),0 0 0 2px #000,0 0 0 7px #121612,0 0 0 8px #2c332c;
  color:var(--fmd-ph)}
body:not(.fm-mobile) #rightPanel.fmd>#chatBox{display:none;flex:1 1 auto;min-height:0}
body:not(.fm-mobile) #rightPanel.fmd>#transferSection,
body:not(.fm-mobile) #rightPanel.fmd>#leaderboardCompact{display:none;flex:1 1 auto;min-height:0;flex-direction:column;padding:12px 14px 10px;overflow:hidden}
body:not(.fm-mobile) #rightPanel.fmd[data-deck="chat"]>#chatBox{display:flex}
body:not(.fm-mobile) #rightPanel.fmd[data-deck="wire"]>#transferSection{display:flex}
body:not(.fm-mobile) #rightPanel.fmd[data-deck="ranks"]>#leaderboardCompact{display:flex}

/* Scanlines and the glass glint over the lit screen. Above the text, under
   nothing that takes a click. */
body:not(.fm-mobile) #rightPanel.fmd>#chatBox::after,
body:not(.fm-mobile) #rightPanel.fmd>#transferSection::after,
body:not(.fm-mobile) #rightPanel.fmd>#leaderboardCompact::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 28% 14%,rgba(220,255,220,.05),transparent 40%)}

/* ── Comms mode ──────────────────────────────────────────────────────────────
   The old tab strip and room pagers stay in the DOM (the keys click them) but
   are not drawn; the deck below is the control surface now. */
body:not(.fm-mobile) #rightPanel.fmd #chatTabs,
body:not(.fm-mobile) #rightPanel.fmd .roomPager,
body:not(.fm-mobile) #rightPanel.fmd #globalRoomPager{display:none!important}
body:not(.fm-mobile) #rightPanel.fmd .fmd-head{order:-2}
body:not(.fm-mobile) #rightPanel.fmd #chatAnnounce{order:-1;margin:0 12px 6px!important}
.fmd-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px 0;
  font-family:'Share Tech Mono',ui-monospace,monospace;color:var(--fmd-ph);text-shadow:0 0 6px var(--fmd-ph-glow);white-space:nowrap}
.fmd-head .fmd-ch{font-size:13px;letter-spacing:.12em;padding:1px 5px;box-shadow:inset 0 0 0 1px rgba(124,240,164,.7)}
.fmd-head .fmd-rm{font-size:12px;letter-spacing:.1em;opacity:.7}
.fmd-rule{height:0;margin:6px 14px 4px;border-top:1px dashed rgba(124,240,164,.35)}
body:not(.fm-mobile) #rightPanel.fmd .chat-channel{padding:4px 14px;color:#b8f0c8}
body:not(.fm-mobile) #rightPanel.fmd .chat-channel::-webkit-scrollbar{width:6px}
body:not(.fm-mobile) #rightPanel.fmd .chat-channel::-webkit-scrollbar-thumb{background:rgba(124,240,164,.25);border-radius:3px}
body:not(.fm-mobile) #rightPanel.fmd #chatInputRow{position:relative;z-index:4;align-items:center;gap:6px;margin:0 12px 10px;padding:7px 2px 0;
  background:transparent;border-top:1px solid rgba(124,240,164,.3)}
body:not(.fm-mobile) #rightPanel.fmd #chatChannelBadge,
body:not(.fm-mobile) #rightPanel.fmd #chatSend{display:none!important}
/* A-/A+ moved onto the deck; the originals stay as the click targets. */
body:not(.fm-mobile) #rightPanel.fmd #chatFontDec{display:none}
body:not(.fm-mobile) #rightPanel.fmd #chatFontInc{display:none}
.fmd-prompt{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:15px;letter-spacing:.06em;color:var(--fmd-ph);text-shadow:0 0 6px var(--fmd-ph-glow);white-space:nowrap}
body:not(.fm-mobile) #rightPanel.fmd #chatInput{background:transparent;border:0;border-radius:0;padding:2px 0;color:var(--fmd-ph);caret-color:var(--fmd-ph);
  font-size:13px;text-shadow:0 0 6px rgba(124,240,164,.35)}
body:not(.fm-mobile) #rightPanel.fmd #chatInput::placeholder{color:rgba(124,240,164,.4)}
body:not(.fm-mobile) #rightPanel.fmd #chatMentionDrop{background:#041008;border-color:rgba(124,240,164,.4)}

/* ── Wire and Ranks modes ────────────────────────────────────────────────────
   The section's own header becomes the screen title, inverse video. It is not
   a toggle here: the collapsible state is a mobile-and-old-layout concept and
   the screen is always open when lit. */
body:not(.fm-mobile) #rightPanel.fmd #transferSection .collapse-body,
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact .collapse-body{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;position:relative;z-index:4}
body:not(.fm-mobile) #rightPanel.fmd #transferSection>h2,
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact>h2{pointer-events:none;align-self:flex-start;margin:0 0 4px!important;padding:1px 6px;
  font-family:'Share Tech Mono',ui-monospace,monospace!important;font-size:14px!important;letter-spacing:.14em;text-transform:uppercase;
  background:var(--fmd-ph);color:#031006!important;text-shadow:none!important;border:0}
body:not(.fm-mobile) #rightPanel.fmd #transferSection>h2 *,
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact>h2 *{color:#031006!important;opacity:1!important}
body:not(.fm-mobile) #rightPanel.fmd .collapse-chevron{display:none}
body:not(.fm-mobile) #rightPanel.fmd #transferSection .row{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:14px}
body:not(.fm-mobile) #rightPanel.fmd #transferSection .input{max-width:none!important;width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid rgba(124,240,164,.45);border-radius:0;
  padding:4px 0;color:var(--fmd-ph);caret-color:var(--fmd-ph);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;text-align:left;text-shadow:0 0 6px rgba(124,240,164,.35)}
body:not(.fm-mobile) #rightPanel.fmd #transferSection .input::placeholder{color:rgba(124,240,164,.4)}
body:not(.fm-mobile) #rightPanel.fmd #transferSection .input:focus{outline:none;border-bottom-color:var(--fmd-ph)}
body:not(.fm-mobile) #rightPanel.fmd #xfer{display:none}
body:not(.fm-mobile) #rightPanel.fmd #transferSection .collapse-body>div:not(.row):not(.fmd-foot){margin-top:16px!important;padding:7px 9px;border:1px dashed rgba(124,240,164,.45);
  color:var(--fmd-ph)!important;font-size:11px!important;line-height:1.55!important}
body:not(.fm-mobile) #rightPanel.fmd #transferSection #clearanceNote[style*="display: none"],
body:not(.fm-mobile) #rightPanel.fmd #transferSection #clearanceNote[style*="display:none"]{display:none!important}
.fmd-lbl{text-align:left;font-family:'Share Tech Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;color:var(--fmd-ph);opacity:.75;margin-bottom:-10px}
.fmd-foot{margin-top:auto;padding-top:8px;border-top:1px solid rgba(124,240,164,.3);
  font-family:'Share Tech Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;color:var(--fmd-ph);opacity:.8;text-shadow:0 0 6px var(--fmd-ph-glow)}
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact #board{display:flex;flex-direction:column;gap:0;margin-top:8px;overflow-y:auto;min-height:0}
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact #board .lb-row{display:flex;align-items:baseline;gap:8px;padding:6px 2px;border:0;border-bottom:1px dotted rgba(124,240,164,.2);border-radius:0;
  background:transparent;font-size:12px;color:var(--fmd-ph)}
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact #board .lb-row>*{font-size:12px!important}
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact #board .lb-row>span:first-child{min-width:38px!important;opacity:.75!important;font-variant-numeric:tabular-nums}
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact #board .lb-row>b{color:var(--fmd-ph);font-weight:400}
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact #board .lb-row>span:last-child{color:var(--fmd-ph)!important;text-shadow:0 0 6px var(--fmd-ph-glow)}
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact #board .lb-sep{border-top:1px dashed rgba(124,240,164,.35);margin:4px 0}
/* Your row (1.11.9.45): sticky inside the scrolling board, so it is never lost among every account. */
body:not(.fm-mobile) #rightPanel.fmd #leaderboardCompact #board .lb-row.lb-me{background:#0b1d10;border-bottom-color:rgba(124,240,164,.55);box-shadow:inset 3px 0 0 var(--fmd-ph)}

/* ── Lamp strip ──────────────────────────────────────────────────────────── */
.fmd-lamps{display:flex;align-items:center;gap:8px;padding:5px 10px;background:#070907;border-radius:4px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.8),inset 0 0 0 1px #1a1f1a,0 1px 0 rgba(255,255,255,.05)}
.fmd-lamp{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:'Share Tech Mono',ui-monospace,monospace;font-size:8px;letter-spacing:.06em;color:#6c6a5c}
.fmd-lamp i{display:block;width:26px;height:12px;border-radius:2px;background:#1a1d1a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.25)}
.fmd-lamp.on{color:#c8b48a}
.fmd-lamp.on i{background:radial-gradient(#ffe2a8,#f0b454);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 8px rgba(240,180,84,.7)}
.fmd-lamp.at{color:#d8c8a8}
.fmd-lamp.at i{background:radial-gradient(#ffc0b0,#e8402a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 8px rgba(232,64,42,.7)}
/* Traffic you are not looking at: the lamp blinks until you look. */
.fmd-lamp.miss i{animation:fmdBlink 1.1s steps(1,end) infinite}
.fmd-lamp.flash i{background:radial-gradient(#fff4c0,#e8c040);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 6px rgba(232,192,64,.6)}
.fmd-lamp.ring i{background:radial-gradient(#d8ffe0,#46c873);box-shadow:0 0 8px rgba(70,200,115,.7);animation:fmdBlink .6s steps(1,end) infinite}
.fmd-lamp.link i{background:radial-gradient(#d8ffe0,#5ad27a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 8px rgba(90,210,122,.6)}
.fmd-lamp.down i{background:radial-gradient(#ffc0b0,#e8402a);animation:fmdBlink 1.1s steps(1,end) infinite}
.fmd-sp{flex:1}
@keyframes fmdBlink{0%{opacity:1}50%{opacity:.18}}

/* ── Keyboard deck ───────────────────────────────────────────────────────────
   Tilted 14 degrees: enough to read as a sloped deck, little enough that the
   far row's hit areas and lettering stay true. */
.fmd-deck{perspective:800px;perspective-origin:50% 0%}
.fmd-tray{transform:rotateX(14deg);transform-origin:50% 0%;background:linear-gradient(#141814,#080a08);border-radius:7px;padding:9px 9px 11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px #1f241f,0 8px 12px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px;margin-bottom:-6px}
.fmd-row{display:grid;gap:6px}
.fmd-row.ch{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.fmd-row.rm{grid-template-columns:repeat(5,minmax(0,1fr)) .75fr .75fr}
.fmd-row.fn{grid-template-columns:1.3fr 1fr 1fr 1.25fr}
.fmd-k{position:relative;border:0;border-radius:4px;cursor:pointer;min-width:0;height:36px;padding:0 4px;
  font-family:'Share Tech Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;line-height:1.1;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;overflow:hidden;
  background:linear-gradient(#262b26,#171a17);color:var(--fmd-amb);box-shadow:0 4px 0 #060706,0 6px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.fmd-k:active{transform:translateY(3px);box-shadow:0 1px 0 #060706,0 2px 3px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.fmd-k:focus-visible{outline:2px solid #f0b454;outline-offset:2px}
.fmd-k[disabled]{cursor:default;opacity:.38}
.fmd-k[disabled]:active{transform:none}
.fmd-k .led{position:absolute;left:5px;top:4px;width:5px;height:5px;border-radius:50%;background:rgba(0,0,0,.3)}
.fmd-k .cnt{font-size:9px;color:#f0b454}
.fmd-k.cream{background:linear-gradient(#262b26,#171a17);color:#e2d8c0;box-shadow:0 4px 0 #060706,0 6px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.fmd-k.red{background:linear-gradient(#3a1a14,#24100c);color:#ff8a6a;box-shadow:0 4px 0 #0c0403,0 6px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.fmd-k.red .cnt{color:#ffb8a0}
.fmd-k.org,.fmd-k.sel{background:linear-gradient(#f0b454,#b97f2a);color:#1a0f02;box-shadow:0 4px 0 #4a3010,0 6px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.fmd-k.sel{box-shadow:0 4px 0 #4a3010,0 6px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35),0 0 14px rgba(240,180,84,.45)}
.fmd-k.sel .cnt{color:#3a1a04}
.fmd-k.lit{background:radial-gradient(ellipse at 50% 45%,#ffe9b8,#f0b454 60%,#b97f2a);color:#1a0f02;
  box-shadow:0 4px 0 #4a3010,0 6px 5px rgba(0,0,0,.55),0 0 16px 2px rgba(240,180,84,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.fmd-k.grn{background:linear-gradient(#1d3a26,#10241a);color:#42ff7e;box-shadow:0 4px 0 #04100a,0 6px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1),0 0 12px rgba(66,255,126,.25)}
.fmd-k.grn.on{background:linear-gradient(#46e07a,#1f9a48);color:#021006;box-shadow:0 4px 0 #0a3a1a,0 6px 5px rgba(0,0,0,.55),0 0 16px 2px rgba(70,255,125,.5)}
.fmd-k.hang{background:linear-gradient(#e0503a,#9a2a18);color:#fff0e8;box-shadow:0 4px 0 #3a0c04,0 6px 5px rgba(0,0,0,.55),0 0 14px rgba(232,64,42,.5)}
.fmd-k.hang .cnt{display:none!important}
.fmd-k.grn .cnt{color:#000;background:#42ff7e;border-radius:7px;padding:0 5px;font-weight:700}
.fmd-k .led.on{background:#fff2c0;box-shadow:0 0 5px 1px rgba(255,220,140,.9)}
.fmd-k .led.at{background:#f0b454;box-shadow:0 0 5px 1px rgba(240,180,84,.8)}
.fmd-k.red .led.at{background:#ff8a6a;box-shadow:0 0 5px 1px rgba(255,120,90,.8)}
.fmd-k .led.miss{background:#f0b454;animation:fmdBlink 1.1s steps(1,end) infinite}
.fmd-k.rmk{font-size:14px}
.fmd-k.xmit{font-size:13px;letter-spacing:.18em}
.fmd-k svg{flex:0 0 auto}

/* A narrow column (the grid's 280px floor): tighter lettering, and the
   Contacts key keeps its handset and badge but drops the word. */
.fmd-deck{container-type:inline-size}
@container (max-width: 340px){
  .fmd-k{font-size:10px;letter-spacing:.01em;gap:3px;padding:0 3px}
  .fmd-k.grn>span[data-i18n]{display:none}
  .fmd-k.xmit{letter-spacing:.1em}
}

@media (prefers-reduced-motion: reduce){
  .fmd-lamp.miss i,.fmd-lamp.down i,.fmd-k .led.miss{animation:none}
}

/* ── Contacts and calls (1.11.9.42) ─────────────────────────────────────────
   codec.js and voice.js draw their own markup and keep their own ids; these
   rules take the modal styling off it once it is inside the console. Every
   rule is scoped to #fmdLine or #fmdDock, so the phone modals are untouched. */

/* The line screen: a fourth CRT, lit by data-deck="line". */
body:not(.fm-mobile) #rightPanel.fmd>#fmdLine{order:2;display:none;flex:1 1 auto;min-height:0;position:relative;margin:7px;border-radius:12px/15px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,#0a1a0e 0%,#05100a 65%,#020805 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.9),inset 0 0 10px rgba(66,255,126,.08),0 0 0 2px #000,0 0 0 7px #121612,0 0 0 8px #2c332c;color:var(--fmd-ph)}
body:not(.fm-mobile) #rightPanel.fmd[data-deck="line"]>#fmdLine{display:block}
body:not(.fm-mobile) #rightPanel.fmd>#fmdLine::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 28% 14%,rgba(220,255,220,.05),transparent 40%)}
#fmdLine .fmc-ov{position:absolute;inset:0;z-index:1;display:block;background:transparent;overflow-y:auto;font-size:13px}
#fmdLine .fmc-ov::-webkit-scrollbar{width:6px}
#fmdLine .fmc-ov::-webkit-scrollbar-thumb{background:rgba(124,240,164,.25);border-radius:3px}

/* Directory */
#fmdLine .fmc-contacts{width:auto;max-height:none;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 14px 10px}
#fmdLine .fmc-chead{position:sticky;top:0;z-index:3;background:linear-gradient(#071209 70%,transparent);border:0;padding:12px 0 8px;margin-bottom:2px;border-bottom:1px dashed rgba(124,240,164,.28)}
#fmdLine .fmc-ctitle{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:14px;letter-spacing:.14em;background:var(--fmd-ph);color:#021006;padding:1px 6px}
#fmdLine .fmc-x{font-family:'Share Tech Mono',ui-monospace,monospace;color:var(--fmd-ph);opacity:.7}
#fmdLine .fmv-sec{background:transparent;border:0;padding:6px 0 4px}
#fmdLine .fmv-h,#fmdLine .fmc-contacts>.fmv-h{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;color:#f5c26a;text-shadow:0 0 6px rgba(240,180,84,.3);margin:8px 0 4px}
#fmdLine .fmv-h .n{color:#f5c26a}
#fmdLine .fmv-add{gap:6px;align-items:center;margin:2px 0 8px}
#fmdLine .fmv-add::before{content:"ADD>";font-family:'Share Tech Mono',ui-monospace,monospace;font-size:14px;color:var(--fmd-ph);text-shadow:0 0 6px var(--fmd-ph-glow)}
#fmdLine .fmv-add input,#fmdLine #fmvDmIn{background:transparent!important;border:0!important;border-bottom:1px solid rgba(124,240,164,.4)!important;border-radius:0!important;color:var(--fmd-ph)!important;caret-color:var(--fmd-ph);padding:3px 0!important;font-size:13px!important}
#fmdLine .fmv-add input:focus,#fmdLine #fmvDmIn:focus{outline:none;border-bottom-color:var(--fmd-ph)!important}
#fmdLine .fmv-row{border:0;border-bottom:1px dotted rgba(124,240,164,.18);padding:6px 0;gap:7px}
#fmdLine .fmv-av{width:28px;height:28px;border-radius:3px;border-color:rgba(124,240,164,.35)}
#fmdLine .fmv-nm{color:#c8f4d6;font-size:13px}
#fmdLine .fmv-sub{color:rgba(124,240,164,.6);font-size:10px}
#fmdLine .fmv-btn,#fmdLine .fmc-callbtn{border:1px solid rgba(124,240,164,.5);color:var(--fmd-ph);background:transparent;border-radius:2px;padding:2px 6px;
  font-family:'Share Tech Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em}
#fmdLine .fmv-btn:hover,#fmdLine .fmc-callbtn:hover{background:rgba(124,240,164,.12)}
#fmdLine .fmv-btn.red{border-color:rgba(255,106,74,.6);color:#ff8a6a}
#fmdLine .fmv-btn.dim{border-color:rgba(124,240,164,.25);color:rgba(124,240,164,.6)}
#fmdLine .fmv-note,#fmdLine .fmv-warn{font-size:11px}
#fmdLine .fmv-blk summary{color:rgba(124,240,164,.6)}
/* Faction lines: one row each, the blurb is for the modal. */
#fmdLine .fmc-card{align-items:center;gap:8px;padding:6px 0;border-bottom:1px dotted rgba(124,240,164,.18)}
#fmdLine .fmc-card:hover{background:rgba(124,240,164,.05)}
#fmdLine .fmc-cav{width:28px;height:28px;border-radius:3px;border-width:1px}
#fmdLine .fmc-cname{color:#c8f4d6;font-size:13px;font-weight:400}
#fmdLine .fmc-crole{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:10px;margin:1px 0 0}
#fmdLine .fmc-cblurb{display:none}
#fmdLine .fmc-callbtn{border-color:rgba(245,194,106,.6);color:#f5c26a}
#fmdLine .fmc-callbtn.off{border-color:rgba(255,106,74,.45);color:#ff8a6a}
/* Father Xen's signal still haunts his row; the row is short now, so it
   wanders less far. */
#fmdLine .fmc-xsig{font-size:9px;padding:1px 5px}

/* A DM fills the screen: the directory folds away behind it. */
#fmdLine.fmd-dm .fmc-contacts>:not(.fmv-sec):not(.fmc-chead),
#fmdLine.fmd-dm .fmv-sec>:not(#fmvDmPane){display:none!important}
#fmdLine.fmd-dm .fmc-ov{display:flex;flex-direction:column}
#fmdLine.fmd-dm .fmc-contacts{flex:1;display:flex;flex-direction:column;min-height:0}
#fmdLine.fmd-dm .fmv-sec{flex:1;display:flex;flex-direction:column;min-height:0}
#fmdLine #fmvDmPane{border-top:0!important;margin-top:4px!important;padding-top:0!important;flex:1;flex-direction:column;min-height:0}
#fmdLine.fmd-dm #fmvDmPane{display:flex!important}
#fmdLine #fmvDmPane>div:first-child{flex-wrap:wrap}
#fmdLine #fmvDmPane>div:first-child>span:first-child{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:14px!important;letter-spacing:.1em;color:var(--fmd-ph)!important}
#fmdLine #fmvDmLog{flex:1;min-height:90px;max-height:none!important;background:transparent!important;border:0!important;padding:4px 0!important;font-size:13px!important}
#fmdLine #fmvDmPane select{background:transparent!important;border-color:rgba(124,240,164,.35)!important}
#fmdLine #fmvDmPane [data-act="dmsend"]{display:none}

/* Faction call: the codec device without its case. */
#fmdLine .fmc-wrap{width:auto}
#fmdLine .fmc-wrap::before{display:none}
#fmdLine .fmc-dev{max-height:none;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;padding:10px 14px 12px}
#fmdLine .fmc-hdr{font-family:'Share Tech Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;color:rgba(124,240,164,.7);border-bottom:1px dashed rgba(124,240,164,.28);white-space:nowrap;margin-bottom:8px}
#fmdLine .fmc-hdr .fmc-id{min-width:0;overflow:hidden;text-overflow:ellipsis}
#fmdLine .fmc-hdr .fmc-x{flex:0 0 auto}
#fmdLine .fmc-stage{grid-template-columns:1fr 72px;gap:8px}
#fmdLine .fmc-port{border-color:rgba(124,240,164,.25);border-radius:2px;background:#020805}
#fmdLine .fmc-port.them{height:120px}
#fmdLine .fmc-port.you{min-height:72px;height:72px}
#fmdLine .fmc-dlg{background:transparent;border-radius:2px;margin-top:12px}
#fmdLine .fmc-line{font-size:13px;padding:14px 10px 10px;min-height:0}
#fmdLine .fmc-dlg{min-height:0}
#fmdLine .fmc-hint{bottom:4px;font-size:9px}
#fmdLine .fmc-ctl button{font-family:'Share Tech Mono',ui-monospace,monospace;padding:6px 14px;border-radius:2px}
#fmdLine .fmc-ctl.opts{gap:5px}
#fmdLine .fmc-ctl button.fmc-opt{padding:6px 10px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px}

/* ── The voice dock ──────────────────────────────────────────────────────────
   Empty and invisible until voice.js puts a call in it. A small CRT strip
   above the main screen, so the line stays up whichever screen is lit. */
body:not(.fm-mobile) #rightPanel.fmd>#fmdDock{order:1;margin:0 7px}
body:not(.fm-mobile) #rightPanel.fmd>#fmdDock:empty{display:none}
#fmdDock #fmvoiceOverlay,#fmdDock #fmvoiceClosing{position:relative!important;left:auto!important;top:auto!important;width:auto;z-index:1;touch-action:auto}
#fmdDock .fmc-wrap{width:auto}
#fmdDock .fmc-wrap::before{border-radius:8px}
#fmdDock .fmc-dev{border-radius:8px;padding:6px 8px 7px;max-height:none;
  background:radial-gradient(ellipse at 50% 45%,#0a1a0e 0%,#05100a 70%,#020805 100%);border:0;
  box-shadow:inset 0 0 20px rgba(0,0,0,.9),0 0 0 2px #000,0 0 0 5px #121612,0 0 0 6px #2c332c,0 0 14px color-mix(in srgb,var(--fac) 18%,transparent)}
#fmdDock .fmc-hdr{cursor:default;margin-bottom:5px;padding-bottom:4px;font-family:'Share Tech Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em}
#fmdDock .fmc-hdr .nm{display:inline;color:var(--fmd-ph)}
#fmdDock #fmvMin,#fmdDock #fmvEnd{display:none!important}
#fmdDock .fmc-stage{display:grid;grid-template-columns:44px 44px minmax(0,1fr);gap:6px;align-items:center}
#fmdDock .fmc-port.them,#fmdDock .fmc-port.you{height:44px;min-height:0;align-self:center;border-radius:2px}
#fmdDock .fmc-port .meta{display:none}
#fmdDock .fmc-dlg{grid-column:3;margin:0;min-height:0;border:0;background:transparent}
#fmdDock .fmc-name{display:none}
#fmdDock .fmc-line{padding:0;font-size:12px;line-height:1.35;min-height:0;color:#c8f4d6}
#fmdDock .fmc-ctl{grid-column:1/-1;margin-top:5px;gap:5px}
/* Its buttons are keycaps on the console, like the deck's. */
#fmdDock .fmc-ctl button{flex:1;height:28px;padding:0 6px;border:0;border-radius:4px;font-family:'Share Tech Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.06em;
  background:linear-gradient(#262b26,#171a17);color:#e2d8c0;box-shadow:0 3px 0 #060706,0 4px 4px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
#fmdDock .fmc-ctl button:active{transform:translateY(2px);box-shadow:0 1px 0 #060706}
#fmdDock .fmc-ctl .fmc-accept{background:linear-gradient(#46e07a,#1f9a48);color:#021006;box-shadow:0 3px 0 #0a3a1a,0 4px 4px rgba(0,0,0,.55),0 0 12px rgba(70,255,125,.4)}
#fmdDock .fmc-ctl .fmc-decline{background:linear-gradient(#e0503a,#9a2a18);color:#fff0e8;box-shadow:0 3px 0 #3a0c04,0 4px 4px rgba(0,0,0,.55)}
#fmdDock .fmc-ctl .fmv-on{background:linear-gradient(#f0b454,#b97f2a)!important;color:#1a0f02!important}
#fmdDock .fmv-vol{margin-top:2px;font-size:9px}
#fmdDock .fmv-vol input{width:120px}
#fmdDock .fmv-tap{font-size:11px;margin-top:4px}
#fmdLine .fmc-port.you .meta{display:none}