/* Crosslink simulation: layout on top of the main app's styles (../app/css/style.css). */

:root {
  --c-radio: #4e7fd8;
  --c-link: #5ce1e6;
  --c-monitor: #ffd84d;
  --c-manoeuvre: #3ddc97;
  --c-warning: #ff4d4d;
  --c-silent: #5b6475;
}

#panel { width: 310px; }
#panel .explain { margin: 8px 0; line-height: 1.45; }
#feedCard { top: 16px; right: 16px; width: 360px; max-height: calc(50% - 24px); overflow-y: auto; display: block;
  scrollbar-width: thin; scrollbar-color: rgba(140, 160, 200, 0.35) transparent; }
#threatCard { bottom: 16px; right: 16px; width: 360px; max-height: calc(50% - 24px); overflow-y: auto; display: block;
  scrollbar-width: thin; scrollbar-color: rgba(140, 160, 200, 0.35) transparent; }
#detail { bottom: 16px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px - 2 * 350px));
  min-width: 360px; max-height: 46%; overflow-y: auto; display: none; }
#detail .close { position: absolute; top: 8px; right: 8px; padding: 0 7px; }
#detail h2 { font-size: 14px; margin: 0 26px 4px 0; }

.feed-item { padding: 5px 6px; border-radius: 6px; font-size: 12px; border-left: 3px solid transparent; margin-bottom: 3px;
  background: rgba(255, 255, 255, 0.03); cursor: pointer; }
.feed-item:hover { background: rgba(255, 255, 255, 0.08); }
.feed-item .time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.feed-item.detected { border-left-color: var(--c-monitor); }
.feed-item.burn { border-left-color: var(--c-manoeuvre); }
.feed-item.tca { border-left-color: var(--c-link); }
.feed-item.warning { border-left-color: var(--c-warning); }
.feed-item.discard { border-left-color: var(--c-silent); cursor: default; }

.threat-row { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 8px; align-items: center; padding: 6px;
  border-radius: 6px; cursor: pointer; font-size: 12px; }
.threat-row:hover { background: rgba(255, 255, 255, 0.08); }
.threat-row.active { background: rgba(78, 168, 255, 0.18); }
.threat-row .names { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.threat-row .state { color: var(--muted); white-space: nowrap; }
.dot.s-upcoming { background: var(--c-radio); }
.dot.s-monitor { background: var(--c-monitor); }
.dot.s-planned { background: var(--c-monitor); }
.dot.s-manoeuvring { background: var(--c-manoeuvre); }
.dot.s-done { background: var(--c-manoeuvre); opacity: 0.5; }
.dot.s-warning { background: var(--c-warning); }

.msg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.msg > div { padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
.msg dl { margin: 4px 0 0; font-size: 11.5px; }
.msg > div.chosen { border-color: rgba(61, 220, 151, 0.7); background: rgba(61, 220, 151, 0.08); }
.decision { margin-top: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12px; border: 1px solid; }
.decision.ok { background: rgba(61, 220, 151, 0.12); border-color: rgba(61, 220, 151, 0.45); }
.decision.watch { background: rgba(255, 216, 77, 0.1); border-color: rgba(255, 216, 77, 0.45); }
.decision.bad { background: rgba(255, 77, 77, 0.14); border-color: rgba(255, 77, 77, 0.55); }
.steps { margin: 6px 0 0; padding-left: 18px; }
.steps li.done { color: var(--muted); }
.fuelbar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1);
  vertical-align: 1px; margin-right: 4px; overflow: hidden; }
.fuelbar span { display: block; height: 100%; background: var(--c-manoeuvre); }

@media (max-width: 900px) {
  #detail { left: 16px; right: 16px; transform: none; width: auto; min-width: 0; }
  #feedCard { display: none; }
}