/*
 * The comms ticker (#pp-comms) and its log: one transmission at a time,
 * written and cleared by js/three/comms.js, the speaker in their faction's
 * color on a dark tinted box, and the last eight lines above it while it is
 * hovered or after it is tapped.
 *
 * WHERE IT STANDS, measured in the rig at 1280 by 800. In flight the range
 * readout (js/three/galaxy-edge.js) is 18 to 53 px off the bottom edge and
 * the key hint 71 to 112; in browse the Enter Flight button is 24 to 68 and
 * the corner rails 24 to 63. So the ticker stands 80 px off the bottom (plus
 * the gun row's band when a run carries one), clear over the readout and the
 * button, and the key hint, which holds that height for the first seconds of
 * a flight, has it first: the ticker stands down while the hint is up.
 *
 * On a touch screen in flight the thumbs own the bottom corners and the
 * readout the bottom center (css/touch-hud.css). Upright, the pad is the
 * tallest thing there, so the ticker stands 12 px over the pad's top edge,
 * worked from touch-hud's own sizes so it follows them: 293 px off the
 * bottom at 375 by 812, where the pad's top is at 281 and the afterburner
 * readout's at 251. On its side the pad and the stick come down to the
 * bottom edge and the readout is one line, 18 to 53 px off the bottom, so
 * the ticker stands 10 px over the readout, as wide as the gap between the
 * two thumb clusters with 12 px clear of each.
 */

.pp-comms {
    position: fixed;
    left: 50%;
    bottom: calc(var(--pp-band, 0px) + 80px);
    transform: translateX(-50%);
    z-index: 57;
    box-sizing: border-box;
    width: max-content;
    max-width: min(720px, calc(100vw - 32px));
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 17px;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

/* Up while a line is, or while the log is open over it. */
.pp-comms.pp-comms-on,
.pp-comms.pp-comms-open {
    opacity: 1;
    pointer-events: auto;
}

.pp-comms-line {
    padding: 7px 12px 8px;
    border-radius: 6px;
    background: rgba(8, 12, 20, 0.8);
    cursor: default;
}

.pp-comms-line i {
    margin-right: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

.pp-comms-who {
    margin-right: 7px;
    font-weight: 700;
}

.pp-comms-say {
    color: #ffffff;
}

/* The log stacks above the line, newest at the foot; what does not fit is
   the oldest, and it is the top that is cut. Its height caps include its
   padding. */
.pp-comms-log {
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    max-height: 184px;
    margin: 0 0 6px;
    padding: 8px 12px;
    overflow: hidden;
    list-style: none;
    border-radius: 6px;
    background: rgba(8, 12, 20, 0.88);
}

.pp-comms-open .pp-comms-log {
    display: flex;
}

.pp-comms-log li {
    flex: 0 0 auto;
    padding: 2px 0;
    color: rgba(255, 255, 255, 0.88);
}

.pp-comms-log b {
    margin-right: 7px;
    font-weight: 700;
}

/*
 * Down with whatever the page says is going on, from the frame it happens
 * and for the moments the layer is not being stepped at all: the 2D field, a
 * page panel or drawer open (every one stands ahead of the ticker in
 * index.php, so the sibling rules reach it), a warp, a held or paused run,
 * the arcade, and every run but the Expedition (the combat runs and the
 * arcade boards stow the place the population stands in). And down under the
 * key hint on a desktop, which stands where the ticker does.
 */
body:not(.pp-3d) .pp-comms,
#settings-panel.active ~ .pp-comms,
#slide-panel.active ~ .pp-comms,
#apps-panel.active ~ .pp-comms,
#about-panel.active ~ .pp-comms,
.pp-board.show ~ .pp-comms,
#pp-gate.show ~ .pp-comms,
body.pp-warping .pp-comms,
body.pp-paused .pp-comms,
body.pp-held .pp-comms,
body.pp-arcade .pp-comms,
body.pp-run:not(.pp-expedition) .pp-comms,
body.fly-mode:not(.pp-touch-device) .pp-hint:not(.pp-fade) + .pp-comms {
    display: none;
}

/* ---------------- a touch screen in flight ---------------- */

body.pp-touch-device.fly-mode:not(.pp-paused) .pp-comms {
    bottom: calc(var(--pp-t-base) + 2 * var(--pp-t-vert) + 2 * var(--pp-t-row)
        + var(--pp-t-fire) + 12px);
    max-width: calc(100vw - 2 * var(--pp-t-side));
}

/* Upright the log has from under the right hand counters (their foot is at
   288 at 375 by 812) down to a ticker of three lines, whose top is at 452. */
body.pp-touch-device.fly-mode:not(.pp-paused) .pp-comms-log {
    max-height: 150px;
}

@media (orientation: landscape) and (max-height: 500px) {
    body.pp-touch-device.fly-mode:not(.pp-paused) .pp-comms {
        bottom: 63px;
        max-width: calc(100vw - 2 * (var(--pp-t-side) + var(--pp-t-boost)
            + var(--pp-t-col) + var(--pp-t-fire) + 12px));
    }

    /* On its side it stops under the counters, whose foot is at 168 at 812
       by 375, over a ticker of two lines, whose top is at 262. */
    body.pp-touch-device.fly-mode:not(.pp-paused) .pp-comms-log {
        max-height: 88px;
    }
}