/* THE RADIO (src/ui/radiopanel.js, task R1). styles.css only says WHERE the
   #radio box sits and that it lets touches through; everything it looks like
   is here.

   Two shapes, one panel:
     WIDE (an iPad, a computer) - the feed sits in the free strip down the left
       between the plane's name tag and the POWER lever, the six quick buttons
       and the typing box under it, always there.
     NARROW (a phone: under 700 px, or on its side) - no free strip, so the panel
       folds away into the RADIO button up in the corner and comes back as a
       sheet across the bottom of the picture.
   Everything a finger presses in flight is at least 64 px (the buttons are
   bigger), which is the size an under-nine can actually hit. */

#radio{display:flex;flex-direction:column;justify-content:flex-end;gap:6px}

.radioPanel{display:flex;flex-direction:column;gap:6px;min-height:0;max-height:100%;pointer-events:none}

/* ---------------- the feed: the last eight lines ---------------- */
/* No scrollbar anywhere: eight lines is the lot, and the oldest simply goes. */
.radioFeed{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  min-height:0;overflow:hidden;pointer-events:none;
  /* the oldest line is cut off at the top, so fade the cut rather than slice
     a sentence in half */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22px);
  opacity:1;transition:opacity .8s ease}
/* Ten seconds with nobody talking and it steps back out of the way, so the
   sky wins. Any new line, or a tap on the panel, brings it straight back. */
.radioFeed.idle{opacity:.35}

.radioLine{background:var(--panel);border:1px solid var(--edge);border-radius:10px;
  padding:5px 9px;font-size:13px;line-height:1.3;overflow-wrap:anywhere;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.radioLine b{font-weight:900;letter-spacing:.06em;margin-right:6px}   /* the name, in the speaker's own colour */
.radioLine span{color:var(--ink)}
.radio-sys span{color:var(--dim)}
.radio-boss{border-color:rgba(242,154,58,.45)}
.radio-typed,.radio-quick{border-color:rgba(77,208,255,.4)}

/* ---------------- the six quick taps: two rows of three ---------------- */
.radioQuick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;pointer-events:auto}
.radioQuickBtn{min-height:64px;padding:6px 4px;border-radius:14px;
  background:var(--panel);border:1px solid var(--edge);color:var(--ink);
  font-size:11px;font-weight:800;line-height:1.15;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;text-align:center}
.radioQuickBtn:active{transform:scale(.94);border-color:var(--accent);color:var(--accent)}

/* ---------------- the box to type in ---------------- */
.radioSay{display:flex;gap:6px;pointer-events:auto}
.radioInput{flex:1;min-width:0;height:64px;padding:0 12px;border-radius:14px;
  background:rgba(4,10,20,.9);border:1px solid var(--edge);color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.02em;
  /* 16 px keeps iOS from zooming the whole page when the cursor lands here */
  outline:none;-webkit-user-select:text;user-select:text;-webkit-appearance:none;appearance:none}
.radioInput::placeholder{color:var(--dim);font-size:12px;font-weight:800;letter-spacing:.1em}
.radioInput:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(77,208,255,.25)}
/* Three lines in five seconds is the lot. The placeholder says how long is
   left; this is so a child SEES the box say no. */
.radioInput.cooling{animation:radioNo .32s ease}
@keyframes radioNo{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.radioSend{width:64px;height:64px;border-radius:14px;flex:0 0 auto;
  background:var(--panel);border:1px solid var(--edge);color:var(--accent);
  font-size:11px;font-weight:900;letter-spacing:.1em}
.radioSend:active{transform:scale(.94)}
/* Cooling down: the button counts the seconds, and the quick taps wait too -
   the box usually still holds the words that did not go, so the placeholder
   behind them cannot be read. */
.radioPanel.cooling .radioSend{color:var(--dim);border-color:rgba(255,91,61,.45)}
.radioPanel.cooling .radioQuickBtn{opacity:.45}

/* Closes the phone's sheet. There is nothing to close on a wide screen. */
.radioClose{display:none}

/* The RADIO button in the corner (#radioBtn): the plugin takes the `hidden`
   class off and puts `radioOn` on, and it only ever shows on a narrow screen -
   on a wide one the panel is already on the picture. */
#radioBtn.radioOn{display:none}
#radioBtn.on{border-color:var(--accent);color:var(--accent)}

/* ---------------- a phone: fold it away ---------------- */
/* ...upright (under 700 px wide) OR lying on its side (844 x 390: wide, but no
   height to spare - the panel sat on the name tag and the POWER lever). */
@media (max-width:699px),(orientation:landscape) and (max-height:480px){
  #radioBtn.radioOn{display:flex}
  #radio{display:none}
  /* The sheet: across the bottom, over the toys and the levers, with room for
     the on-screen keyboard above it. */
  #radio.radioOpen{display:flex;z-index:12;
    left:calc(8px + var(--safeL));right:calc(8px + var(--safeR));
    top:auto;bottom:calc(8px + var(--safeB));max-width:none;
    max-height:min(72vh,520px);
    background:rgba(4,10,20,.92);border:1px solid var(--edge);border-radius:18px;
    padding:10px;box-shadow:0 -8px 30px rgba(0,0,0,.5)}
  #radio.radioOpen .radioPanel{pointer-events:auto}
  #radio.radioOpen .radioFeed{pointer-events:auto}
  .radioClose{display:flex;position:absolute;top:6px;right:6px;
    width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;
    background:var(--panel);border:1px solid var(--edge);color:var(--dim);font-size:18px}
  .radioFeed{padding-right:52px}
  .radioLine{font-size:14px}
  .radioQuickBtn{min-height:68px;font-size:12px}
}

/* A phone lying on its side has almost no height: fewer lines, not smaller
   words (a six-year-old is reading them). */
@media (orientation:landscape) and (max-height:480px){
  #radio.radioOpen{max-height:84vh}
  .radioQuickBtn{min-height:56px}
  .radioInput,.radioSend{height:56px}
}

/* On foot beside the wreck the flying furniture gets out of the way, the way
   the POWER lever and the toys do. */
body.wreckwalk #radio,body.wreckwalk #radioBtn{display:none !important}