/* ==========================================================================
   Admin: agents, accounts, a dialogue between two agents.
   The Settings page's language: tiles as tall as what they hold, one action at a tile's head, one row pattern:
     an account   avatar · name (Strong) over meta (Meta) · [more] [chip]
     an agent     avatar · name over role · state · model · thinking · Test · Instructions · Questions (the Archivist) · Memories · switch
   Agents take the whole width (their controls in columns); accounts and the dialogue share the row under them.
   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(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.admin-sec { animation: rise var(--dur-3) var(--ease) both; }
.admin-sec.is-wide { grid-column: 1 / -1; }
.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); } }

/* More appears where the pointer is; its 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; }

/* ---------- Agents: one row each, the controls in columns under their names ---------- */
/* The buttons' column holds the Archivist's four (Test · Instructions · Questions · Memories) on every row and under
   the heads, so every row's model and thinking sit in the same columns. */
.admin-agent-cols, .admin-agent { grid-template-columns: 32px minmax(0, 1fr) 248px 228px minmax(392px, auto) 32px; }
.admin-agent-cols { display: grid; align-items: end; column-gap: 12px; padding: 0 0 6px; }
.admin-agent { min-height: 56px; cursor: default; }
.admin-agent:hover { background: transparent; }
.admin-agent .admin-row-meta { line-height: 18px; }
.admin-model { width: 100%; }
.admin-effort { display: grid; width: 100%; }
.admin-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.admin-agent > .switch { justify-self: end; }
/* 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); }
.admin-status { display: inline-flex; align-items: center; gap: 6px; }
.admin-status .dot { margin: 0 1px; }
.admin-todo { font-size: var(--fs-meta); }

/* 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. */
.admin-row.attn { margin: 2px 0; padding: calc(12px - var(--attn-w)) calc(10px - var(--attn-w)); border-radius: var(--r-3); }
.admin-row.attn + .admin-row:not(.attn) { margin-top: 8px; }

/* ---------- 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%; }

/* ---------- What an agent has learned: search over the list, each memory with Forget ---------- */
.admin-mem { display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.admin-mem-search { flex: none; }
.admin-mem-list { display: flex; flex-direction: column; flex: 1 1 auto; }
.admin-mem-list > .empty { flex: 1 1 auto; }
.admin-mem-wait { margin: 0; padding: 8px 2px; }
.admin-mem-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; }
.admin-mem-row + .admin-mem-row { border-top: 1px solid var(--line); }
.admin-mem-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.admin-mem-text { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.admin-mem-meta { font-size: var(--fs-meta); }
.admin-mem-forget { flex: none; margin-top: -2px; }
.admin-mem-n { font-size: var(--fs-meta); }

/* ---------- 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; }
}