/* ==========================================================================
   Admin: accounts, agents, a dialogue between two agents.
   The Settings page's language: three tiles, each as tall as what it holds, one action at a tile's head,
   one row pattern:  avatar · name (Strong) over meta (Meta) · [test] [more] [chip | switch]
   What waits for an admin (an agent that is on but cannot work) takes the one attention treatment (.attn: ink,
   white words, the drifting RGB ring) and comes first in its list; here only its place and padding are set.
   Every word in ink; off says so in its chip or its switch.
   ========================================================================== */
.view-admin .page { padding-bottom: 40px; }

/* ---------- Head and tiles ---------- */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; padding: 8px 2px 0; margin-bottom: 20px; }
.admin-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.admin-sec { animation: rise var(--dur-3) var(--ease) both; }
.admin-body { margin-top: 16px; }
.admin-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -10px; }

/* ---------- One row pattern ---------- */
.admin-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-width: 0;
  padding: 8px 10px; border-radius: var(--r-2); cursor: pointer; transition: background var(--dur-1) var(--ease);
}
.admin-row:hover, .admin-row:has([aria-expanded="true"]) { background: var(--hover); }
.admin-row-main { display: flex; flex-direction: column; min-width: 0; }
.admin-row-title { line-height: 20px; overflow-wrap: anywhere; }
.admin-row-meta { line-height: 16px; }
.admin-row-end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 24px; }
.admin-row-end > .chip { margin-left: 4px; }
.admin-row.is-fresh { animation: admin-fresh 2.4s var(--ease); }
@keyframes admin-fresh { from { background: var(--fill); } }
/* An agent that is off: its glyph fades to --stroke, like a paused agent anywhere else */
.admin-agent.is-off .av-agent { --av-fg: var(--stroke); }

/* Test and More appear where the pointer is; their place is kept so nothing shifts. */
.admin-more { opacity: 0; transition: opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.admin-row:hover .admin-more, .admin-row:focus-within .admin-more, .admin-more[aria-expanded="true"] { opacity: 1; }
.admin-row:hover .admin-more[disabled] { opacity: .4; }

/* An agent that is on but cannot work waits for an admin (.attn holds its fill, ring and hover). The padding gives
   back the ring's width, so its avatar and words keep the column of the rows around it; the open one is lighter. */
.admin-row.attn { margin: 2px 0; padding: calc(12px - var(--attn-w)) calc(10px - var(--attn-w)); border-radius: var(--r-3); transition: --attn-bg var(--dur-1) var(--ease); }
.admin-row.attn:has([aria-expanded="true"]) { --attn-bg: var(--attn-fill-hover); }
.admin-row.attn + .admin-row:not(.attn) { margin-top: 8px; }
.admin-status { display: inline-flex; align-items: center; gap: 6px; }
.admin-status .dot { margin: 0 1px; }

/* ---------- Accounts: the registration switch at the foot ---------- */
.admin-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-reg { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }

/* ---------- Forms (the modals and the dialogue) ---------- */
.admin-form { display: flex; flex-direction: column; gap: 20px; }
.admin-pass { position: relative; display: block; }
.admin-pass > .input { padding-right: 44px; }
.admin-pass > .icon-btn { position: absolute; top: 5px; right: 5px; }
.admin-seg { display: grid; width: 100%; }

/* A secret shown once: the text as code, Copy beside it */
.admin-secret { display: flex; align-items: flex-start; gap: 12px; padding: 8px 8px 8px 14px; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.admin-secret > code { flex: 1 1 auto; min-width: 0; padding: 5px 0; word-break: break-all; user-select: all; }
.admin-secret > .btn { flex: none; }

/* ---------- Dialogue ---------- */
.admin-grid { gap: 16px; }
.admin-grid .check { align-self: start; }
.admin-dialogue-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.admin-started { min-width: 0; }
.admin-started .btn-link { margin-left: 2px; }

/* ---------- Smaller screens (1280×800): the same rhythm, a step tighter ---------- */
@media (max-height: 860px) {
  .view-admin .page { padding-bottom: 24px; }
  .admin-head { padding-top: 4px; margin-bottom: 16px; }
  .view-admin .admin-sec { padding-top: 16px; padding-bottom: 16px; }
  .admin-body { margin-top: 12px; }
  .admin-row { padding-top: 6px; padding-bottom: 6px; }
  .admin-row.attn { padding-top: calc(10px - var(--attn-w)); padding-bottom: calc(10px - var(--attn-w)); }
  .admin-grid { gap: 14px; }
}