/* Live parts of the CuboidStatus page: the Now tiles, the Feed, the map button.
   Uses the dashboard's variables (--page, --surface, --ink, --ink2, --mut, --grid, --ring, --cell0)
   so the two halves read as one page; the fallback index.html defines the same variables. */

:root {
  --lv-place: #1baf7a; --lv-break: #eb6834; --lv-join: #2a78d6; --lv-quit: #898781; --lv-death: #e34948;
  --lv-adv: #eda100; --lv-weather: #4a3aa7; --lv-chat: #e87ba4; --lv-server: #52514e;
  --lv-sky: #cfe6ff; --lv-live: #1baf7a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lv-place: #199e70; --lv-break: #d95926; --lv-join: #3987e5; --lv-quit: #898781; --lv-death: #e66767;
    --lv-adv: #c98500; --lv-weather: #9085e9; --lv-chat: #d55181; --lv-server: #c3c2b7;
    --lv-sky: #1b2a44; --lv-live: #199e70;
  }
}
:root[data-theme="dark"] {
  --lv-place: #199e70; --lv-break: #d95926; --lv-join: #3987e5; --lv-quit: #898781; --lv-death: #e66767;
  --lv-adv: #c98500; --lv-weather: #9085e9; --lv-chat: #d55181; --lv-server: #c3c2b7;
  --lv-sky: #1b2a44; --lv-live: #199e70;
}

/* ---- Now ---- */
.live-now .tiles { margin-bottom: 0; }
.live-now .tile { min-height: 84px; }
.live-now .tile.clock { background: linear-gradient(180deg, var(--lv-sky), var(--surface) 85%); }
.live-now .v { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.live-now .v .max { font-size: 13px; font-weight: 400; color: var(--ink2); }
.live-now .players { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.live-now .players span { background: var(--cell0); border-radius: 999px; padding: 1px 9px; font-size: 12.5px; }
.live-now .players span i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.live-now .players:empty::after { content: "—"; color: var(--mut); }
.live-conn { font-size: 12px; color: var(--mut); margin-left: 8px; font-weight: 400; }
.live-conn::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mut); margin-right: 5px; }
.live-conn.live::before { background: var(--lv-live); }
section#now h2 { display: flex; align-items: baseline; }

/* ---- Feed ---- */
.live-feed .filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.live-feed label.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--cell0); border: 1px solid transparent; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; cursor: pointer; user-select: none; color: var(--ink2); }
.live-feed label.chip input { margin: 0; accent-color: var(--ink); }
.live-feed label.chip.on { color: var(--ink); border-color: var(--grid); }
.live-feed select, .live-feed button.tog { font: inherit; font-size: 12.5px; background: var(--cell0); color: var(--ink2); border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.live-feed button.tog[aria-pressed="true"] { color: var(--ink); border-color: var(--grid); }
.live-feed ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ring); border-radius: 8px; max-height: 60vh; overflow: auto; overscroll-behavior: contain; }
.live-feed ol:empty::after { content: "No events yet."; display: block; padding: 14px; color: var(--mut); }
.live-feed li.ev { display: grid; grid-template-columns: 52px 10px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 12px; border-top: 1px solid var(--grid); }
.live-feed li.ev:first-child { border-top: 0; }
.live-feed li.ev.hidden { display: none; }
.live-feed li.ev.fresh { animation: lv-fade 1.2s ease-out; }
@keyframes lv-fade { from { background: var(--cell0); } to { background: transparent; } }
.live-feed time { color: var(--mut); font-size: 12px; font-variant-numeric: tabular-nums; }
.live-feed .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); transform: translateY(-1px); }
.live-feed .text { min-width: 0; overflow-wrap: anywhere; }
.live-feed .text b { font-weight: 600; }
.live-feed .cnt { font: inherit; font-size: 12px; color: var(--ink2); background: var(--cell0); border: 0; border-radius: 999px; padding: 1px 8px; cursor: pointer; }
.live-feed .cnt[aria-expanded="true"] { color: var(--ink); }
.live-feed .items { grid-column: 3 / 5; margin: 2px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink2); columns: 2; column-gap: 24px; }
.live-feed .items li { padding: 1px 0; break-inside: avoid; }
.live-feed .items .more { font-style: italic; }
.type-place { --c: var(--lv-place); } .type-break { --c: var(--lv-break); } .type-join { --c: var(--lv-join); }
.type-quit { --c: var(--lv-quit); } .type-death { --c: var(--lv-death); } .type-advancement { --c: var(--lv-adv); }
.type-weather { --c: var(--lv-weather); } .type-chat { --c: var(--lv-chat); } .type-server { --c: var(--lv-server); }

/* ---- chat box under the feed ---- */
.live-say { margin-top: 10px; }
.live-say .row { display: flex; gap: 6px; align-items: center; }
.live-say [hidden] { display: none; }
.live-say .row + .row { margin-top: 6px; }
.live-say input { font: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--grid); border-radius: 6px; background: var(--surface); color: var(--ink); min-width: 0; }
.live-say input:focus { outline: none; border-color: var(--ink2); }
.live-say input[aria-label="Message"] { flex: 1 1 auto; }
.live-say input[aria-label="Token"] { flex: 1 1 auto; max-width: 320px; }
.live-say .send { font: inherit; font-size: 13px; font-weight: 500; background: var(--seq); color: #fff; border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
.live-say .send:disabled { opacity: .6; cursor: default; }
.live-say .say-status { font-size: 12px; color: var(--mut); min-height: 1.2em; margin-top: 4px; }

/* ---- Map button (in the page header) ---- */
/* .live-actions layout is set by the page (sidebar column on wide screens); the fallback page gets the row below. */
.live-actions:not(aside *) { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.live-map-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--seq); color: #fff; text-decoration: none; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 8px; line-height: 1; }
.live-map-btn:hover { filter: brightness(1.08); }
.live-map-btn svg { width: 15px; height: 15px; display: block; }

/* ---- fallback page (no dashboard render yet) ---- */
.live-empty { color: var(--mut); font-size: 13px; }
@media (max-width: 520px) { .live-feed li.ev { grid-template-columns: 44px 10px 1fr auto; } .live-feed .items { columns: 1; } }