/* A net's messages (Pages/Public/Messages.cshtml), after site.css and charts.css. Written for a
   phone first: under 1024 pixels every message is a small card, and from there up the list is
   a table of seven columns. Nothing here is used by another page. */

/* ── The choices above the list ──────────────────────────────────────────── */
/* The search box has the first row to itself; the lists to pick from sit two to a row under
   it on a phone. The script hides "Show": a choice then applies as it is made. */
.msgs-filter input[type="search"] { flex: 1 1 0; }
.msgs-filter input[type="search"]::placeholder { color: var(--faint); }
/* "Clear" sits at the end of the search box's row, and takes no room when there is nothing to clear. */
.msgs-clear { flex: none; }
.msgs-clear:empty { display: none; }
.msgs-choices { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.msgs-choices select { flex: 1 1 130px; }
.msgs-filter > .btn { flex: none; }

/* While the list is asked for again it is dimmed, and nothing on the page moves. */
#messages.loading { opacity: 0.55; }
#messages .summary .tag { margin-right: 4px; }

/* "3 new messages": said at the top of the screen when messages landed above what the reader
   is looking at. It takes the reader to them when pressed. */
.msgs-new {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 18px;
    border: 1px solid var(--amber-fill);
    border-radius: 999px;
    background: var(--amber-fill);
    color: var(--on-amber);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, calc(0.55 * var(--shade)));
}
.msgs-new:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--adm-ring), 0 6px 24px rgba(0, 0, 0, calc(0.55 * var(--shade))); }

.msgs td.said { overflow-wrap: anywhere; }

/* ── A card for each message ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .msgs thead { display: none; }
    .msgs, .msgs tbody { display: block; width: 100%; }
    /* The callsign and the time on the first line, the words under them, and under those one
       quiet line: what it was sent from, the door it came through, the gateway that heard it. */
    .msgs tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 2px 12px; border: 0; border-bottom: 1px solid var(--line); }
    .msgs td { display: block; padding: 0; border: 0; min-width: 0; }
    .msgs td:empty { display: none; }
    .msgs td.who { flex: 1 1 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
    .msgs td.who .flag { margin-right: 0; }
    /* On a card the flag beside the callsign says the country. */
    .msgs td.country { display: none; }
    .msgs td.when { flex: none; text-align: right; color: var(--muted); font-size: 13px; white-space: nowrap; }
    .msgs td.when .utc-only { display: inline; color: var(--faint); font-size: 12.5px; }
    .msgs td.said { flex: 1 1 100%; }
    /* A message with no words keeps its empty line, so that the quiet line still starts under
       the callsign: without it the door and the gateway ran on beside the callsign and broke it. */
    .msgs td.said:empty { display: block; }
    .msgs td.from, .msgs td.door, .msgs td.gate { flex: 0 1 auto; color: var(--muted); font-size: 13px; }
    /* The door first, as it always was; then who heard it; then what it was sent from. */
    .msgs td.door { order: 1; }
    .msgs td.gate { order: 2; }
    .msgs td.from { order: 3; }
    /* The Raw button ends that quiet line, at its right. */
    .msgs td.raw { order: 4; flex: none; width: auto; margin-left: auto; }
    .msgs td[data-label].labelled::before { content: attr(data-label) ": "; color: var(--faint); font-size: 12px; }
    /* A callsign and a gateway are each a whole finger tall to press, and still read as one
       line of the card: what is over is taken from the space between the lines. */
    .msgs td.who a.tap { margin: -8px 0; }
    .msgs td.gate a.tap { margin: -12px 0; }
}

/* ── The table ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .msgs { font-size: 14px; }
    .msgs td.who { min-width: 236px; }
    .msgs td.who .call { white-space: nowrap; margin-right: 6px; }
    /* The country has a column of its own here. */
    .msgs td.who .flag { display: none; }
    .msgs td.country { white-space: nowrap; }
    .msgs td.country a { color: var(--muted); }
    .msgs td.country a:hover { color: var(--text); }
    /* The words give up the width the Raw button's cell takes, so the table is no wider for it. */
    .msgs td.said { min-width: 176px; }
    .msgs td.from, .msgs td.door, .msgs td.gate { color: var(--muted); font-size: 13px; }
    .msgs td.from { min-width: 128px; max-width: 180px; }
    .msgs td.gate { white-space: nowrap; }
    /* In a table a link is a line of text, pressed with a pointer. */
    .msgs a.tap { display: inline; min-height: 0; }
    /* The choices beside the search box, in one row, with "Clear" after them. */
    .msgs-filter input[type="search"] { flex: 1 1 230px; }
    .msgs-choices { flex: 3 1 560px; }
    .msgs-clear { order: 1; }
    .msgs-filter > .btn { order: 2; }
}

/* A message that has just landed flashes once (site.css, .new). A reader who asked for less
   motion gets a mark that stands still instead. */
@media (prefers-reduced-motion: reduce) {
    .msgs tr.new { animation: none; box-shadow: inset 3px 0 0 var(--amber-mark); }
    #messages.loading { opacity: 1; }
}