/* The multi-agent page.
 *
 * Loads after display.css (tokens + the shared .ad-tile styles) and site.css
 * (the bar, buttons, toast). Nothing here restyles a tile — tiles come from the
 * shared renderer and must look identical to the paywall preview and the
 * MissionBoard widget, or the page is selling something it isn't.
 */

.board-hint {
    max-width: 980px;
    margin: 0 auto 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ad-dim);
}

.board-hint strong { color: var(--ad-text-2); font-weight: 600; }

.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
}

/* The display page's .page is 860px; /agents is .page--wide at 980. A board is
   a board — same tile width on both, or the free view reads as a different,
   meaner product than the paid one. :has() so the single-agent card keeps its
   narrower reading width. */
.page:has(> #display-card .board-grid--viewer),
.page:has(.board-grid--viewer) { max-width: 980px; }

/* ── One cell: uuid strip on top, live tile beneath ─────────────────────── */
.cell { min-width: 0; }

.cell-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    min-height: 24px;
}

/* Always visible, never a hover reveal: this address is what a second agent
   needs, and surfacing it is the point of the page. Clickable — the whole
   text copies the full URL. */
.cell-url {
    font-family: var(--ad-mono);
    font-size: 10.5px;
    color: var(--ad-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    cursor: pointer;
    transition: color 0.15s;
}
.cell-url:hover { color: var(--ad-running); }

.cell-tools {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.cell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.cell-btn:hover {
    color: var(--ad-text);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.cell-btn[disabled] { opacity: 0.25; cursor: default; }
.cell-btn[disabled]:hover { color: rgba(255, 255, 255, 0.35); background: none; border-color: transparent; }

.cell-btn[data-act="remove"]:hover { color: var(--ad-error); }

/* Same tile shell as the paywall preview: container-sized so the shared
   renderer's cqmin type resolves. */
.cell-tile {
    container-type: size;
    height: 200px;
    background: #131316;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

/* On the overview (#board-grid — the /agents page only, not the display
   page's own board) the tile IS the way into its display: cursor and a
   brightening border say so before anyone has to guess. */
#board-grid .cell-tile { cursor: pointer; transition: border-color 0.15s; }
#board-grid .cell:hover .cell-tile { border-color: rgba(79, 195, 247, 0.35); }

.cell-loading {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ad-mono);
    font-size: 11px;
    color: var(--ad-dim);
}

/* ── The teaching state: a display before its first post ─────────────────── */
.tile-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    text-align: center;
}

.tile-empty-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ad-waiting);
    animation: ad-pulse 2s ease-in-out infinite;
}

.tile-empty-lead {
    margin: 0;
    font-family: var(--ad-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--ad-text);
}

/* Clickable — copies the full URL, like the strip above the tile. */
.tile-empty-url {
    font-family: var(--ad-mono);
    font-size: 10.5px;
    color: var(--ad-running);
    background: rgba(79, 195, 247, 0.08);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: 6px;
    padding: 4px 9px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.tile-empty-url:hover {
    background: rgba(79, 195, 247, 0.16);
    border-color: rgba(79, 195, 247, 0.4);
}

.tile-empty-hint {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ad-dim);
    max-width: 30ch;
}

/* ── The add cell ────────────────────────────────────────────────────────── */
.cell--add {
    display: flex;
    flex-direction: column;
}

.cell--add .add-inner {
    /* Aligns with the tiles beside it: the neighbours carry a 24px uuid strip
       plus its 6px gap above their tile, so the dashed box starts level with
       them rather than floating high. */
    margin-top: 30px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    text-align: center;
}

.cell--add h2 {
    font-family: var(--ad-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--ad-text);
    margin: 0;
}

.add-or {
    font-family: var(--ad-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ad-dim);
}

.add-row {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 240px;
}

.add-row input {
    flex: 1;
    min-width: 0;
    background: rgba(12, 12, 22, 0.9);
    border: 1px solid var(--ad-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: var(--ad-mono);
    font-size: 11px;
    color: #fff;
    outline: none;
}

.add-row input:focus { border-color: rgba(79, 195, 247, 0.45); }

.add-row .btn { padding: 8px 12px; font-size: 12.5px; }

/* ── Locked tiles (the upsell) ────────────────────────────────────────────────
 * Agents beyond the board's unlock render blurred with one button over them.
 * The blur is COSMETIC — the actual gate is server-side: /data redacts locked
 * agents (no name, status, stats or messages leave the server), so deleting
 * this filter in devtools reveals a skeleton, not the data. */
.cell--locked { position: relative; }

.cell--locked .ad-tile {
    filter: blur(9px);
    pointer-events: none;
    user-select: none;
}

.cell-unlock {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(6, 6, 12, 0.32);
    border: none;
    border-radius: 12px;
    color: var(--ad-text);
    font-family: var(--ad-head);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.cell-unlock:hover { background: rgba(6, 6, 12, 0.5); }
.cell-unlock-lock { font-size: 20px; }

/* The locked agent's name, shown unblurred on the overlay. */
.cell-unlock-name {
    font-family: var(--ad-head);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

/* ── Remove an agent from a board ─────────────────────────────────────────────
 * Destructive, so it is quiet: it only comes up when you are on the tile, and it
 * arms before it fires (two presses — see viewer.js). A row of × buttons sitting
 * permanently over a wall display would be both noise and an invitation.
 *
 * Locked cells carry it too — the locked slot is usually a typo or a stray
 * unnamed post, and a paywall you cannot decline is a hostage note. The unlock
 * overlay is absolute over the WHOLE cell (inset: 0), so without the stacking
 * here the overlay would eat the chip's clicks on exactly those cells. */
.cell-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-height: 24px;
    margin-bottom: 6px;
    position: relative;
    z-index: 3;
}

/* EVERY toolbar control sleeps until the cell is hovered — same rule on the
   display page's board and the /agents page, because the two views are the
   same product and looked like two products (Matt, 18 Aug). */
.cell-toolbar > * { opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s; }
.cell:hover .cell-toolbar > *,
.cell:focus-within .cell-toolbar > * { opacity: 1; }

@media (hover: none) {
    .cell-toolbar > * { opacity: 1; }
}

.cell-del,
.cell-instr {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(6, 6, 12, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-family: var(--ad-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

.cell-instr { margin-right: 6px; }

/* The label sleeps until the button is armed. At rest the control is a small
   grey trash can — enough to find when you want it, invisible when you don't.
   The word only appears when it is a question that needs reading. */
.cell-del .cell-del-label { display: none; }
.cell-del[data-armed] .cell-del-label { display: inline; }

.cell:hover .cell-del,
.cell:focus-within .cell-del,
.cell:hover .cell-instr,
.cell:focus-within .cell-instr { opacity: 1; }

/* Grey on hover, not red. Red on a status page reads as "something is wrong
   over here" — it is spent on the armed state below, where it is a warning. */
.cell-del:hover { color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.25); }

/* Instructions go cyan where remove goes red: same shape, opposite intent. */
.cell-instr:hover { color: var(--ad-running); border-color: rgba(79, 195, 247, 0.45); }

/* Armed: the second press is the one that deletes, so it stops being quiet. */
.cell-del[data-armed] {
    opacity: 1;
    color: var(--ad-error);
    border-color: rgba(255, 107, 107, 0.6);
    background: rgba(40, 8, 10, 0.9);
}

.cell-del[disabled] { cursor: default; color: rgba(255, 255, 255, 0.3); }

/* No hover on a touch screen, so there is nothing to reveal — show them at rest
   and let the arm step be the safety. */
@media (hover: none) {
    .cell-del, .cell-instr { opacity: 1; }
}

@media (max-width: 640px) {
    .board-grid { grid-template-columns: 1fr; }
    .cell-tile, .cell--add .add-inner { height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    .tile-empty-dot { animation: none; }
}