/* ===========================================================================
   KILLSTREAM (C4) — left-side live kill + starbase feed.
   Palette is tokenised on the pane root (single source of truth, no scattered
   literals). Mirrors the standalone killboard look (css classes prefixed ks-).
   Kill rows are ONE-LINE ultra-compact: [faction icon] winner  killer  loser [icon].
   =========================================================================== */
#killstream_pane {
  --ks-bg: color-mix(in srgb, #0b0f14 82%, transparent);
  --ks-panel: color-mix(in srgb, #121821 88%, transparent);
  --ks-panel2: #0e141c;
  --ks-line: #223044;
  --ks-text: #d7e2ef;
  --ks-dim: #8194aa;
  --ks-accent: #37e0c8;
  --ks-danger: #ff5d6c;
  --ks-gold: #ffcf4d;
  --ks-hover: #ff9e3d;                 /* map hover-pulse color (read by JS) */
  --fac-mud: #ff5d6c; --fac-oni: #4aa8ff; --fac-ust: #ffcf4d;
  --fac-npc: #b07cff; --fac-npc2: #ff9e3d; --fac-none: #8194aa;

  width: 234px;
  margin: 17px 0 0 27px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: var(--ks-text);
  font: 11px/1.3 EEMfontLight, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  pointer-events: none;   /* container transparent to the map; interactive children opt back in */
}

/* header row: title + prebuilt "PvP only" chip */
#killstream_pane .ks-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 4px;
  padding: 1px 2px 5px;
}
#killstream_pane .ks-title {
  cursor: pointer; font-size: 9px; letter-spacing: 1px; color: var(--ks-dim);
  padding: 1px 6px; border-radius: 9px; border: 1px solid var(--ks-line); background: var(--ks-panel2);
}
#killstream_pane .ks-title:hover { color: var(--ks-text); }
/* collapsed: title stays, feed + PvP button hide */
#killstream_pane.ks-collapsed #killstream_list,
#killstream_pane.ks-collapsed .ks-pills { display: none; }
/* per-category filters (pill off => category hidden) */
#killstream_pane.ks-hide-pve #killstream_list .ks-kill.ks-pve { display: none; }
#killstream_pane.ks-hide-pvp #killstream_list .ks-kill:not(.ks-pve) { display: none; }
#killstream_pane.ks-hide-sb #killstream_list .ks-sb { display: none; }
#killstream_pane .ks-pills { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
#killstream_pane .ks-pill {
  cursor: pointer; user-select: none;
  font-size: 9px; letter-spacing: 1px; padding: 1px 6px; border-radius: 9px;
  border: 1px solid var(--ks-line); color: var(--ks-dim); background: var(--ks-panel2);
}
#killstream_pane .ks-pill.ks-off { opacity: 0.4; }

#killstream_list {
  overflow-y: auto; overflow-x: hidden;
  flex: 1 1 auto; min-height: 0;
  /* scrollbar: inherits the app-global div::-webkit-scrollbar style (basic-ui.css) */
}

/* ---- kill row (one-line, ultra-compact) ---- */
#killstream_list .ks-kill {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 7px; margin-bottom: 7px;
  font-size: 11px; line-height: 1.25;
}
#killstream_list .ks-kill:hover { background: color-mix(in srgb, var(--ks-accent) 14%, var(--ks-panel)); }
#killstream_list .ks-side { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 0; }
#killstream_list .ks-side.def { justify-content: flex-end; }
#killstream_list .ks-pl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; min-width: 0; }
#killstream_list .ks-mid { flex: 0 0 auto; color: var(--ks-danger); font-size: 12px; line-height: 1; }
#killstream_list .ks-kill.ks-pve { opacity: 0.6; }        /* PvE de-emphasised (still shown) */
#killstream_list .ks-muted { color: var(--ks-dim); }

/* ---- starbase rows (2-line: title + detail) ---- */
#killstream_list .ks-sb {
  padding: 4px 7px; margin-bottom: 7px;
}
#killstream_list .ks-sb-atk { border-left: 3px solid var(--ks-danger); }
#killstream_list .ks-sb-cap { border-left: 3px solid var(--ks-gold); }
#killstream_list .ks-sb-dng { border-left: 3px solid var(--fac-npc2); }
#killstream_list .ks-sb-head { display: flex; align-items: center; gap: 6px; }
#killstream_list .ks-sb-head .ks-act { margin-left: auto; }
#killstream_list .ks-sb-title { font-family: EEMfontLight, sans-serif; font-weight: 400; font-size: 10.5px; }
#killstream_list .ks-count { color: var(--ks-danger); font-weight: 600; font-size: 9px; }
#killstream_list .ks-sb-body { color: var(--ks-text); font-size: 10.5px; margin-top: 1px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
#killstream_list .ks-arrow { color: var(--ks-dim); }

/* faction icon + label */
#killstream_pane .ks-ficon { width: 14px; height: 14px; vertical-align: -3px; flex: 0 0 auto; }
#killstream_pane .ks-fac { font-weight: 400; }
#killstream_pane .ks-fac.mud { color: var(--fac-mud); }
#killstream_pane .ks-fac.oni { color: var(--fac-oni); }
#killstream_pane .ks-fac.ust { color: var(--fac-ust); }
#killstream_pane .ks-fac.npc { color: var(--fac-npc); }
#killstream_pane .ks-fac.npc2 { color: var(--fac-npc2); }
#killstream_pane .ks-fac.none { color: var(--fac-none); }

/* row-end action icons (pan-to + open-killboard) */
#killstream_list .ks-act { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; margin-left: 4px; }
#killstream_list .ks-ai { width: 13px; height: 13px; opacity: 0.5; cursor: pointer; }
#killstream_list .ks-ai:hover { opacity: 1; }

/* in-app battle-report window (iframe of the standalone in embed mode). On <body>, so it
   defines its own tokens rather than borrowing the pane-scoped ones. */
#killstream_report_ov {
  --ksr-line: #223044; --ksr-panel: #0e141c; --ksr-bg: #0b0f14; --ksr-dim: #8194aa;
  --ksr-scrim: rgba(0, 0, 0, 0.62);
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; background: var(--ksr-scrim);
}
#killstream_report_ov.on { display: flex; }
#killstream_report_ov .ks-report-box {
  position: relative; width: min(780px, 94vw); height: min(82vh, 640px);
  background: var(--ksr-panel); border: 1px solid var(--ksr-line);
  border-radius: 10px; overflow: hidden;
}
#killstream_report_ov .ks-report-close {
  /* aligned to the "Battle report" headline row + the content's right padding edge (16px, matches .wrap) */
  position: absolute; top: 20px; right: 16px; z-index: 2; cursor: pointer;
  color: var(--ksr-dim); font-size: 22px; line-height: 1;
}
#killstream_report_ov .ks-report-close:hover { color: #fff; }
#killstream_report_ov .ks-report-frame { width: 100%; height: 100%; border: 0; background: var(--ksr-bg); }

/* per-entry attack time (HH:MM, no date) */
#killstream_list .ks-time { font-size: 8px; line-height: 1; color: var(--ks-dim); font-variant-numeric: tabular-nums; opacity: 0.8; }
#killstream_list .ks-kill .ks-time { flex: 0 0 auto; margin-left: 3px; align-self: flex-end; }
#killstream_list .ks-sb { position: relative; }
#killstream_list .ks-sb .ks-time { position: absolute; right: 8px; bottom: 4px; }
#killstream_list .ks-sb-body { padding-right: 34px; }   /* reserve space for the inline time */

/* entry animation */
#killstream_list .ks-enter { animation: ks-slidein 0.4s ease; }
@keyframes ks-slidein {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Container is click-through (pointer-events:none) so the map stays interactive behind the
   feed; only the rows + chip capture pointer events (hover-to-mark + click-through). */
#killstream_pane .ks-title,
#killstream_pane .ks-pill,
#killstream_list .ks-kill,
#killstream_list .ks-sb { pointer-events: auto; }