/* cb-radio.css - the CB set on the galaxy map (1.11.9.115). See cb-radio.js.

   A cab radio, not a CRT: the same moulded green-black housing as the Nav
   Console, but an amber backlit LCD for the channel and the log, a five-bar
   signal meter, RX and TX lamps and a speaker grille. Amber is the captains'
   colour on the map too, so a handle here and a label there read as one person.
   Collapsed it is just the faceplate with a scrolling last line. */

body.fm-mobile #gCB{display:none!important}
#gCB{--amb:#ffb54a;--amb-dim:#a8742c;--amb-glow:rgba(255,170,60,.35);--lcd:#1b1206;
  position:absolute;left:12px;bottom:12px;z-index:7;width:330px;box-sizing:border-box;padding:7px 8px 8px;border-radius:8px;
  font-family:'Share Tech Mono',ui-monospace,monospace;user-select:none;
  background:
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) 5px 5px/9px 9px no-repeat,
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) calc(100% - 5px) 5px/9px 9px no-repeat,
    linear-gradient(180deg,#1d221d,#0b0d0b);
  box-shadow:0 0 0 1px #000,0 8px 24px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px #262c26}
#gCB.on{width:420px}
#gCB{width:380px}

.cb-face{display:flex;align-items:center;gap:7px;padding:0 6px 0 12px;cursor:pointer}
#gCB.on .cb-face{cursor:default}
.cb-pwr{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 40% 35%,#5a625a,#1a1d1a 70%);box-shadow:0 2px 0 #000,inset 0 1px 0 rgba(255,255,255,.15),0 0 0 1px #000}
.cb-pwr::after{content:"";display:block;width:2px;height:8px;margin:7px auto 0;background:var(--amb-dim);border-radius:1px}
#gCB.on .cb-pwr::after{background:var(--amb);box-shadow:0 0 6px var(--amb)}
.cb-lcd{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:26px;padding:0 8px;border-radius:3px;overflow:hidden;
  background:var(--lcd);box-shadow:inset 0 1px 4px #000,0 0 0 1px #3a2a12;color:var(--amb);text-shadow:0 0 6px var(--amb-glow)}
.cb-ch{font-size:20px;letter-spacing:.04em;line-height:1}
.cb-tag{font-size:9px;letter-spacing:.2em;color:var(--amb-dim);text-shadow:none}
.cb-ticker{flex:1;min-width:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.cb-meter{display:flex;align-items:flex-end;gap:2px;height:16px}
.cb-meter i{display:block;width:3px;background:#2a2014}
.cb-meter i:nth-child(1){height:5px}.cb-meter i:nth-child(2){height:7px}.cb-meter i:nth-child(3){height:10px}.cb-meter i:nth-child(4){height:13px}.cb-meter i:nth-child(5){height:16px}
.cb-meter i.lit{background:var(--amb);box-shadow:0 0 5px var(--amb-glow)}
.cb-lamp{width:7px;height:7px;border-radius:50%;background:#1a140a;box-shadow:inset 0 1px 2px #000,0 0 0 1px #000}
.cb-lamp.rx.hot{animation:cbRx 1.1s ease-out}
.cb-lamp.tx.hot{animation:cbTx 1.1s ease-out}
@keyframes cbRx{0%,40%{background:#7cf0a4;box-shadow:0 0 8px #42ff7e}100%{background:#1a140a}}
@keyframes cbTx{0%,40%{background:#ff6a4a;box-shadow:0 0 8px #ff4a2a}100%{background:#1a140a}}
.cb-open{flex:0 0 auto;height:26px;padding:0 12px;border:0;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px;letter-spacing:.14em;white-space:nowrap;
  background:linear-gradient(#ffc76a,#d8922a);color:#1b1206;font-weight:700;
  box-shadow:0 3px 0 #6a4410,0 4px 5px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.45)}
.cb-open:hover{background:linear-gradient(#ffd88a,#e8a23a)}
.cb-open:active{transform:translateY(2px);box-shadow:0 1px 0 #6a4410}
#gCB.on .cb-open{background:linear-gradient(#262b26,#171a17);color:var(--amb);font-weight:400;box-shadow:0 3px 0 #060706,0 4px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
#gCB.has-new .cb-open{animation:cbKey 1.6s ease-in-out infinite}
@keyframes cbKey{50%{box-shadow:0 3px 0 #6a4410,0 0 14px rgba(255,180,70,.75),inset 0 1px 0 rgba(255,255,255,.45)}}
.cb-unread{min-width:0;font-size:10px;color:#1b1206;background:var(--amb);border-radius:7px;padding:0 5px;line-height:14px}
.cb-unread:empty{display:none}
#gCB.has-new .cb-lcd{animation:cbNew 2.4s ease-in-out infinite}
@keyframes cbNew{50%{box-shadow:inset 0 1px 4px #000,0 0 0 1px #6a4a1a,0 0 10px rgba(255,170,60,.25)}}

.cb-body{display:none;margin-top:7px}
#gCB.on .cb-body{display:block}
.cb-log{height:230px;overflow-y:auto;padding:7px 9px;border-radius:5px;user-select:text;
  background:radial-gradient(ellipse at 50% 40%,#22170a,#130c04 75%);box-shadow:inset 0 1px 6px #000,0 0 0 1px #3a2a12;
  color:var(--amb);font-size:12px;line-height:17px;text-shadow:0 0 5px var(--amb-glow)}
.cb-log::-webkit-scrollbar{width:6px}.cb-log::-webkit-scrollbar-thumb{background:rgba(255,181,74,.25);border-radius:3px}
.cb-row{margin-bottom:5px;word-wrap:break-word}
.cb-row.re{padding-left:12px;position:relative}
.cb-row.re::before{content:"\203A";position:absolute;left:2px;color:var(--amb-dim)}
.cb-ts{font-size:9px;color:var(--amb-dim);margin-right:6px;text-shadow:none}
.cb-row b{font-weight:400;color:#ffd38a;cursor:pointer;margin-right:6px}
.cb-row b::after{content:":"}
.cb-row b:hover{text-decoration:underline}
.cb-row.pl b{color:#9bffba;text-shadow:0 0 5px rgba(66,255,126,.3)}
.cb-row.me b{color:#ffffff;text-shadow:none}
.cb-row.pl .cb-t,.cb-row.me .cb-t{color:#e8e0cc;text-shadow:none}
.cb-role{font-style:normal;font-size:9px;letter-spacing:.1em;color:#1b1206;background:#7cf0a4;padding:0 4px;margin-right:6px;border-radius:2px;text-shadow:none}
.cb-empty{color:var(--amb-dim);font-size:11px;text-shadow:none;padding:6px 0}

.cb-tx{display:flex;align-items:center;gap:6px;margin-top:7px}
.cb-prompt{font-size:11px;color:var(--amb-dim);letter-spacing:.1em}
.cb-tx input{flex:1;min-width:0;height:28px;box-sizing:border-box;padding:0 8px;border:0;border-radius:3px;outline:none;user-select:text;
  background:var(--lcd);box-shadow:inset 0 1px 4px #000,0 0 0 1px #3a2a12;color:var(--amb);font-family:inherit;font-size:12px}
.cb-tx input::placeholder{color:#6a4c22}
.cb-tx input:focus{box-shadow:inset 0 1px 4px #000,0 0 0 1px var(--amb-dim)}
.cb-mic{flex:0 0 auto;height:28px;padding:0 11px;border:0;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;letter-spacing:.14em;
  background:radial-gradient(ellipse at 50% 40%,#ff7a5a,#c22a14 65%,#7a1408);color:#200402;
  box-shadow:0 3px 0 #3a0c04,0 4px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.cb-mic:active{transform:translateY(2px);box-shadow:0 1px 0 #3a0c04}
.cb-err{height:0;overflow:hidden;font-size:10px;color:#ff8a6a;transition:height .15s}
.cb-err.on{height:16px;margin-top:4px}
.cb-grille{display:none;height:6px;margin:7px 30% 0;border-radius:3px;background:repeating-linear-gradient(90deg,#050605 0 2px,#22281f 2px 4px)}
#gCB.on .cb-grille{display:block}

/* The nav console's NPC popover tag, in the radio's amber. */
.nvt-cb{background:#d8b26a!important;color:#1b1206!important}

/* ── Docked in the Nav Console plate (1.11.9.120) ─────────────────────────
   The set used to float in the corner of the map. It now sits at the left of
   the console's top bar, ahead of NAV CONSOLE 20026: the faceplate is the bar's
   first control, and the opened log drops up from it over the bottom of the map
   in its own housing. The console's plate letter-spacing and nowrap are reset
   inside it. */
#gCB.cb-docked{position:relative;left:auto;bottom:auto;z-index:8;flex:0 1 340px;width:auto;min-width:230px;padding:0;
  background:none;box-shadow:none;letter-spacing:normal;text-shadow:none;white-space:normal}
#gCB.cb-docked.on{width:auto}
#gCB.cb-docked .cb-face{padding:0}
#gCB.cb-docked .cb-body{position:absolute;left:-12px;bottom:calc(100% + 16px);width:440px;margin:0;box-sizing:border-box;padding:9px 10px 10px;border-radius:8px;
  background:
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) 5px 5px/9px 9px no-repeat,
    radial-gradient(circle at 35% 35%,#4a524a 0,#151815 3px,#000 3.5px,transparent 4px) calc(100% - 5px) 5px/9px 9px no-repeat,
    linear-gradient(180deg,#1d221d,#0b0d0b);
  box-shadow:0 0 0 1px #000,0 -8px 24px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px #262c26}
#gCB.cb-docked .cb-grille,#gCB.cb-docked.on .cb-grille{display:none}