* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif; background: #111; color: #ddd;
    overflow: hidden; }

/* ── Header ───────────────────────────────────────────────────────── */
header {
    background: #222; color: #eee; padding: 8px 14px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid #333;
    height: 41px; flex: 0 0 auto;
    position: relative; z-index: 60;
}
header .brand { font-weight: 700; font-size: 14px; }
header button {
    background: #2a4a7a; color: #fff; border: 1px solid #5577aa;
    padding: 5px 10px; font-size: 12px; cursor: pointer;
    border-radius: 4px; font-family: inherit;
}
header button:hover { background: #3a5a8a; }
header .panel-toggle { background: #333; border-color: #555; color: #ddd; }
header .panel-toggle:hover { background: #444; }
header .meta {
    margin-left: auto; color: #aaa; font-size: 12px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 50%;
}

/* ── Spelunker iframe occupies the whole area below the header ───── */
#ng-iframe {
    position: fixed; left: 0; right: 0; top: 41px; bottom: 0;
    width: 100%; height: calc(100vh - 41px);
    border: none; background: #000;
}

/* ── Floating windows (Windows + Decision panels) ────────────────── */
.floating-window {
    position: fixed;
    background: rgba(28, 28, 32, 0.97);
    border: 1px solid #444;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    z-index: 50;
    min-width: 260px; min-height: 80px;
    display: flex; flex-direction: column;
    overflow: hidden;
    resize: both;
    color: #ddd;
}
.floating-window.hidden { display: none; }
.floating-window.collapsed {
    resize: none; height: auto !important; min-height: 0;
}
.floating-window.collapsed .panel-body { display: none; }
.floating-window.collapsed { border-radius: 6px; }

.panel-header {
    cursor: grab; user-select: none;
    background: linear-gradient(180deg, #2c2f3a, #24262e);
    padding: 7px 10px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid #444;
    flex: 0 0 auto;
}
.panel-header:active { cursor: grabbing; }
.panel-header .grip {
    color: #6088ff; font-size: 16px; cursor: grab;
    line-height: 1; padding: 0 2px;
}
.panel-header .title {
    flex: 1; font-size: 12px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: #cfd2db; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.panel-min, .panel-close {
    background: #383b46; color: #ccc; border: 1px solid #555;
    width: 22px; height: 22px; border-radius: 3px; cursor: pointer;
    font-size: 12px; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.panel-min:hover  { background: #4a4d58; }
.panel-close:hover { background: #aa3333; border-color: #cc4444; }

.panel-body {
    flex: 1 1 auto; overflow: auto; padding: 10px 12px;
}

/* ── Default panel positions ─────────────────────────────────────── */
#left-panel {
    left: 12px; top: 56px;
    width: 320px; height: 33vh;
}
#decision-panel {
    right: 12px; bottom: 16px;
    width: 540px; max-width: 96vw;
}

/* ── Left panel (windows list) interior ──────────────────────────── */
#left-panel .panel-body h3 {
    margin: 12px 0 6px; font-size: 11px;
    color: #999; text-transform: uppercase; letter-spacing: .5px;
}
#left-panel .panel-body h3:first-child { margin-top: 0; }

#tab-toggle { display: flex; gap: 4px; }
#tab-toggle button {
    flex: 1; background: #222; color: #aaa; border: 1px solid #444;
    padding: 6px 4px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
#tab-toggle button.active {
    background: #2a4a7a; color: #fff; border-color: #5577aa;
}

#window-list { font-size: 12px; }
.win-row {
    padding: 6px 8px; border-bottom: 1px solid #2a2a2a; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
}
.win-row:hover { background: #232b3a; }
.win-row.selected { background: #2a4a7a; color: #fff; }
.win-row .idx { color: #aaf; font-family: monospace; min-width: 42px; }
.win-row .prob { font-family: monospace; color: #fa6; min-width: 48px;
    text-align: right; font-size: 11px; }
.win-row .verdict-tag {
    margin-left: auto; font-size: 10px; padding: 1px 5px;
    border-radius: 3px; font-weight: bold;
}
.win-row .verdict-tag.yes    { background: #2a8a3a; color: #fff; }
.win-row .verdict-tag.no     { background: #aa2a2a; color: #fff; }
.win-row .verdict-tag.skip   { background: #555; color: #ddd; }
.win-row .verdict-tag.unsure { background: #aa8a2a; color: #fff; }
.win-row .verdict-tag.affinity-tag {
    background: transparent; color: #aaa; border: 1px solid #555;
    margin-left: 4px;
}
.win-row.is-suspect .idx { font-weight: bold; }

/* ── Decision panel interior ─────────────────────────────────────── */
#decision-panel .panel-body {
    display: flex; flex-direction: column; gap: 8px;
}
.decision-group { display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; }
.dg-label {
    font-size: 11px; color: #999; text-transform: uppercase;
    letter-spacing: .5px; min-width: 92px;
}
.dg-buttons { display: flex; gap: 3px; flex-wrap: wrap; }
.dg-buttons button {
    background: #222; color: #ddd; border: 1px solid #444;
    padding: 6px 12px; font-size: 12px; cursor: pointer;
    border-radius: 4px; font-weight: 600;
}
.dg-buttons button:hover { background: #333; }
.dg-buttons button.active.v-yes    { background: #2a8a3a; border-color: #4a4; color: #fff; }
.dg-buttons button.active.v-no     { background: #aa2a2a; border-color: #c44; color: #fff; }
.dg-buttons button.active.v-skip   { background: #555;    border-color: #777; }
.dg-buttons button.active.v-unsure { background: #aa8a2a; border-color: #cb6; color: #fff; }
/* SPLIT WHICH per-cluster button: background colour is set inline
   (matches the EM annotation colour for that cluster); we only style
   geometry + the muted/active states here.  Inactive = dim (low
   opacity + grey border so the colour reads as "available but not
   selected"); active = full colour with a bright outline. */
.dg-buttons button.split-cluster-btn {
    color: #000; padding: 6px 10px; min-width: 36px;
    border: 2px solid #444; opacity: 0.45;
    text-shadow: 0 0 2px rgba(255,255,255,0.6);
}
.dg-buttons button.split-cluster-btn:hover { opacity: 0.75; }
.dg-buttons button.split-cluster-btn.active {
    opacity: 1.0; border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}
#cur-notes {
    background: #222; color: #eee; border: 1px solid #444;
    padding: 6px; border-radius: 4px;
    font-family: inherit; font-size: 12px;
}
.btn-next {
    background: #2a8a3a; color: #fff; border: 1px solid #4caf50;
    padding: 4px 12px; font-size: 12px; font-weight: 600;
    cursor: pointer; border-radius: 4px;
}
.btn-next:hover { background: #3aaa4a; }
.btn-back {
    background: #444a55; color: #ddd; border: 1px solid #666;
    padding: 4px 12px; font-size: 12px; font-weight: 600;
    cursor: pointer; border-radius: 4px;
}
.btn-back:hover { background: #565c68; }

/* ── Welcome overlay ─────────────────────────────────────────────── */
#welcome-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
}
#welcome-overlay.hidden { display: none; }
#welcome-overlay .card {
    background: #1f1f1f; color: #ddd; max-width: 600px;
    padding: 22px 26px; border-radius: 8px;
    border: 1px solid #444; line-height: 1.55;
}
#welcome-overlay h2 { margin: 0 0 12px; }
#welcome-overlay a { color: #6cf; }
#welcome-overlay kbd {
    background: #333; padding: 1px 5px; border-radius: 3px;
    border: 1px solid #555; font-size: 11px; font-family: monospace;
}
#welcome-overlay .dim {
    color: #999; font-size: 12px; line-height: 1.5; margin: 8px 0 0;
}
#welcome-overlay .link-btn {
    background: #2a4a7a; color: #fff; border: 1px solid #5577aa;
    padding: 4px 10px; font-size: 12px; cursor: pointer;
    border-radius: 4px; font-family: inherit;
}
#welcome-overlay .link-btn:hover { background: #3a5a8a; }
#welcome-overlay .link-btn.primary {
    background: #2a8a3a; border-color: #4caf50; font-weight: 600;
    padding: 6px 14px; font-size: 13px;
}
#welcome-overlay .link-btn.primary:hover { background: #3aaa4a; }