/* ==========================================================================
   DESK OVERVIEW — one row per bot. Tokens only; per-bot tint uses
   color-mix() on --bot-c (flat colour, no gradients).
   ========================================================================== */

.overview { flex: 1; overflow-y: auto; padding: var(--sp-5); background: var(--bg); }
.ov { max-width: 1040px; margin: 0 auto; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--sp-4) var(--sp-3) var(--sp-3); }

.ov__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: 0 var(--sp-2) var(--sp-3); }
.ov__title { font-size: 22px; font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.2; }
.ov__dotsep { margin: 0 8px; color: var(--text-3); font-weight: var(--fw-regular); }
.ov__sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.overview.is-live .ov__sub::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--pos); vertical-align: 1px; animation: pulse 1.2s infinite; }
.ov__totals { font-size: var(--fs-lg); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 2px; }
.ov__totals b { font-weight: var(--fw-semibold); }

.ov__rows { display: flex; flex-direction: column; gap: 2px; }

.orow-wrap { border-radius: var(--radius-md); transition: background var(--dur) var(--ease); }
.orow { width: 100%; display: grid; grid-template-columns: 44px minmax(150px, 190px) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2); text-align: left; border-radius: var(--radius-md); }
.orow:hover { background: var(--hover); }
.orow-wrap.is-killed { background: var(--neg-soft); }
.orow-wrap.is-open { background: var(--surface-2); }
.orow-wrap.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bot-c) 55%, transparent); }

.orow__tile { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--bot-c) 16%, transparent); }
.orow-wrap.is-active .orow__tile { background: color-mix(in srgb, var(--bot-c) 26%, transparent); }
.orow__id { display: flex; flex-direction: column; min-width: 0; }
.orow__id b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.25; }
.orow__sub { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.orow__latest { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--fs-sm); color: var(--text-2); }
.ochip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ochip__badge { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: #fff; background: var(--bot-c); }
.ochip b { font-weight: var(--fw-semibold); color: var(--text); }
.ochip.is-killed b { text-decoration: line-through; color: var(--text-3); }
.ochip.is-killed .ochip__badge { background: var(--text-3); }
.ometa { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.omuted { color: var(--text-3); }
.oneg { color: var(--neg); overflow: hidden; text-overflow: ellipsis; }
.opos { color: var(--pos); }
.owarn { color: var(--warn); }
.oinfo { color: var(--info); }
.olive { color: var(--bot-c); font-weight: var(--fw-medium); }
.olive::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: pulse 1s infinite; }
.oquote { color: var(--warn); font-style: italic; overflow: hidden; text-overflow: ellipsis; }
.omore { font-size: var(--fs-2xs); color: var(--text-3); padding: 1px 6px; border: var(--border-w) solid var(--border); border-radius: 999px; }
.okw { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); padding: 1px 6px; border-radius: var(--radius-xs); letter-spacing: 0.03em; flex-shrink: 0; }
.okw--hard, .okw--pos { color: var(--pos); background: var(--pos-soft); }
.okw--soft { color: var(--info); background: var(--info-soft); }
.okw--warn { color: var(--warn); background: var(--warn-soft); }
.okw--neg, .okw--rumor, .okw--none { color: var(--neg); background: var(--neg-soft); }

/* history: one square per round today, newest on the right */
.orow__hist { display: grid; grid-auto-flow: column; justify-content: start; gap: 2px; margin-top: 4px; }
.orow__hist i { width: 6px; height: 4px; border-radius: 1px; background: var(--surface-3); }
.orow__hist i.is-empty { background: var(--border); opacity: 0.5; }
.orow__hist i.is-pos { background: var(--bot-c); }
.orow__hist i.is-warn { background: var(--warn); }
.orow__hist i.is-neg { background: var(--neg); }
.orow__hist i.is-muted, .orow__hist i.is-skip { background: var(--surface-3); }

.orow__pill { justify-self: end; font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: 6px 14px; border-radius: 999px; white-space: nowrap; color: var(--bot-c); background: color-mix(in srgb, var(--bot-c) 14%, transparent); }
.orow__pill.is-neg { color: var(--neg); background: var(--neg-soft); }
.orow__pill.is-pos { color: var(--pos); background: var(--pos-soft); }
/* The Desk Lead's colour is near-black/white; give its pill the accent instead */
.orow-wrap[data-bot="lead"] .orow__pill:not(.is-pos):not(.is-neg) { color: var(--text); background: var(--surface-3); }
.orow-wrap[data-bot="lead"] .ochip__badge { color: var(--bg); }

.orow__detail { padding: 0 var(--sp-3) var(--sp-3) calc(44px + var(--sp-3) + var(--sp-2)); }
.orow__detail .msg__text { max-height: 180px; overflow-y: auto; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--bot-c); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; user-select: text; }

@media (max-width: 1180px) {
  .orow { grid-template-columns: 40px minmax(120px, 160px) minmax(0, 1fr) auto; }
  .orow__tile { width: 40px; height: 40px; }
  .ov__totals { font-size: var(--fs-md); }
}