/* ============================================================
   ASKPILOT MCP — one register, six agents.

   Six agent tiles down the left, each a sliver of that agent's own
   chat: while it is that agent's turn, its request types itself under
   the name; once Askpilot has acted, the line settles into what was
   done. A beam runs from each tile to the row it changes in the
   Askpilot register on the right, and the register is all the console
   shows: the workflows, what starts them, who owns them, their state,
   and which agent last changed them. js/agent-hub.js sets data-beat /
   data-phase on the stage and toggles classes and data-state /
   data-owner on rows; everything visible is drawn here. Every word is
   in the markup.
   ============================================================ */

/* No frame of its own: the register on the right is the framed object, and
   a box around the tiles and the register would be a box in a box. The
   stage keeps the .hiw-panel hooks the slider uses, and none of its look. */
#ag-stage.hiw-panel.ag-stage {
    padding: 0; background: none;
    border: 0; border-radius: 0; box-shadow: none;
}
.ag-grid {
    display: grid;
    grid-template-columns: 250px 70px minmax(0, 1fr);
    align-items: start;
}

/* --- the agents ------------------------------------------------------------
   Each tile is a sliver of that agent's chat: the agent's mark in a chip, its
   name, and under the name a line that is closed until it is needed. During
   the agent's turn the line opens and the request types into it; once
   Askpilot has acted it settles into what was done. The name sits centred
   when the line is closed and rides up as it opens, so a tile is never
   top-heavy and nothing jumps. */
.ag-agents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ag-agent {
    position: relative; box-sizing: border-box; height: 74px;
    display: flex; align-items: center; gap: 11px;
    padding: 0 14px 0 12px;
    border: 1px solid #ECE7EE; border-radius: 14px; background: #fff;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.ag-av {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: #FBFAFE; border: 1px solid #EFEBF2;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ag-av img { width: 19px; height: 19px; object-fit: contain; }
.ag-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ag-agent b { font-size: 0.8125rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
/* the line under the name: closed, then open for a request or a result */
.ag-line {
    position: relative; height: 30px; max-height: 0; margin-top: 0; overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-agent.is-on .ag-line, .ag-agent.is-done .ag-line { max-height: 30px; margin-top: 3px; }
.ag-ask, .ag-did {
    position: absolute; left: 0; right: 0; top: 0; margin: 0;
    font-size: 0.6875rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    opacity: 0; transition: opacity 0.25s ease;
}
.ag-ask { font-weight: 600; color: var(--ink); }
.ag-ask i { display: inline-block; font-style: normal; opacity: 0; transform: translateY(3px); --d: 0s; }
.ag-ask i:nth-child(1) { --d: 0.00s; }  .ag-ask i:nth-child(2) { --d: 0.05s; }  .ag-ask i:nth-child(3) { --d: 0.10s; }
.ag-ask i:nth-child(4) { --d: 0.15s; }  .ag-ask i:nth-child(5) { --d: 0.20s; }  .ag-ask i:nth-child(6) { --d: 0.25s; }
.ag-ask i:nth-child(7) { --d: 0.30s; }  .ag-ask i:nth-child(8) { --d: 0.35s; }  .ag-ask i:nth-child(9) { --d: 0.40s; }
.ag-ask i:nth-child(10) { --d: 0.45s; } .ag-ask i:nth-child(11) { --d: 0.50s; } .ag-ask i:nth-child(12) { --d: 0.55s; }
.ag-ask i:nth-child(13) { --d: 0.60s; } .ag-ask i:nth-child(14) { --d: 0.65s; }
.ag-did { font-weight: 600; color: var(--ok-fg); }
.ag-did svg { display: inline-block; width: 11px; height: 11px; margin: 0 4px -1px 0; }
.ag-agent.is-on:not(.is-done) .ag-ask { opacity: 1; }
.ag-agent.is-on:not(.is-done) .ag-ask i { animation: ag-word 0.4s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both; }
.ag-agent.is-done .ag-did { opacity: 1; }
/* the agent whose turn it is */
.ag-agent.is-on {
    border-color: var(--brand-magenta);
    box-shadow: 0 0 0 3px rgba(213, 59, 213, 0.12), 0 12px 26px -16px rgba(22, 18, 26, 0.3);
    transform: translateX(4px);
}
.ag-agent.is-on .ag-av { background: #fff; border-color: #F0D9F0; transform: scale(1.06); }
@keyframes ag-word { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* --- the beams: one per agent, ending on the row it changes ---------------- */
.ag-beams { display: block; width: 70px; height: 494px; overflow: visible; }
.ag-beam { fill: none; stroke: #E4DDDA; stroke-width: 1.5; stroke-dasharray: 3 4; transition: stroke 0.3s ease; }
.ag-beam.is-on { stroke: #C9B5CF; }
.ag-beam-run {
    fill: none; stroke: var(--brand-magenta); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 14 100; stroke-dashoffset: 14;
    opacity: 0;
}
.ag-beam-run.is-on { animation: ag-run 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes ag-run {
    0% { opacity: 0; stroke-dashoffset: 14; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; stroke-dashoffset: -100; }
}

/* --- the register: the Sources page's list, showing workflows -------------
   The same .sc-app shell, title, search, New, thead and rows as the Sources
   screen in the Integrations tab, with the same access icons and the same
   three columns. Only what the agents change is added: a state tag after the
   name (the Sources list's own Connected tag, in more colours), an access
   that can change hands, and Just now with the agent's mark in Updated. The
   sidebar is collapsed to icons so the list has the room the Sources one has. */
.sc-app.ag-app { height: 494px; }
.ag-app .sc-side { width: 54px; padding: 14px 8px 12px; }
.ag-app .sc-brand { padding: 0; margin-bottom: 14px; justify-content: center; }
.ag-app .sc-brand b, .ag-app .sc-brand-collapse, .ag-app .sc-nav-item span { display: none; }
.ag-app .sc-nav-item { justify-content: center; padding: 8px 0; }
.ag-app .sc-user { justify-content: center; padding: 10px 0 0; gap: 0; font-size: 0; }
/* the Sources list's columns, with the name given the room the state tags need */
.ag-app .sc-thead, .ag-app .sc-row { grid-template-columns: 1fr 150px 130px; margin: 0 -12px; padding-left: 16px; padding-right: 16px; }
.ag-app .sc-row { transition: background 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; }
/* the row being changed: lit, with the beam's colour on its left edge */
/* a hairline, set back from the marks by the row's own inset */
.ag-row.is-hot { background: #FFF8FF; box-shadow: inset 2px 0 0 var(--brand-magenta); }
.ag-row.is-dim { opacity: 0.45; }
/* the row Claude creates keeps its place from the start, folded shut */
.ag-app .sc-row.ag-row--new { padding-top: 0; padding-bottom: 0; height: 0; opacity: 0; overflow: hidden; border-bottom-width: 0; transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease 0.15s, border-bottom-width 0.1s; }
.ag-app .sc-row.ag-row--new.is-in { height: 38px; opacity: 1; border-bottom-width: 1px; }

.ag-app .sc-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-bolt { flex: none; width: 15px; height: 15px; display: grid; place-items: center; color: var(--sc-ink, #16121A); }
.ag-bolt svg { width: 14px; height: 14px; }
/* the state tag: the Sources list's Connected tag, one colour per state */
.ag-app .sc-tag { display: none; animation: ag-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ag-row.is-in .sc-tag[data-t="new"] { display: inline-block; }
.ag-row.is-noted .sc-tag[data-t="updated"] { display: inline-block; }
.ag-row[data-state="paused"] .sc-tag[data-t="paused"] { display: inline-block; background: #FFF6E5; color: #8A5A00; }
.ag-row[data-state="running"] .sc-tag[data-t="running"] { display: inline-block; background: var(--pink-wash); color: var(--pink-deep); }
.ag-row[data-state="archived"] .sc-tag[data-t="archived"] { display: inline-block; background: #F4F1F5; color: var(--muted); }
/* access: as it was, until a workflow is handed to someone */
.ag-acc { display: none; align-items: center; gap: 6px; font-style: normal; white-space: nowrap; }
.ag-acc svg { flex: none; width: 13px; height: 13px; color: var(--sc-ink, #16121A); }
.ag-row[data-owner="a"] .ag-acc--a, .ag-row[data-owner="b"] .ag-acc--b { display: inline-flex; animation: ag-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* Updated: the time, until an agent touches the row. While the agent works,
   the cell says who is changing it, with the agent's mark; once the turn is
   over it settles to Just now, and the list reads as it always does. */
.ag-app .sc-row-time { position: relative; white-space: nowrap; }
.ag-app .sc-row-time time { transition: opacity 0.2s ease; }
.ag-by, .ag-just {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px;
    opacity: 0; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-by { font-weight: 600; color: var(--sc-ink, #16121A); transform: translateX(8px); }
.ag-by i { font-style: normal; }
.ag-by img { flex: none; width: 15px; height: 15px; }
.ag-just { color: #4B5563; }
.ag-row.is-by .sc-row-time time { opacity: 0; }
.ag-row.is-by.is-hot .ag-by { opacity: 1; transform: none; }
.ag-row.is-by:not(.is-hot) .ag-just { opacity: 1; transition-delay: 0.15s; }
/* a busy row shows its work on the tag it is about to earn */
.ag-row[data-state="busy"] { background: #FFF7FF; }

@keyframes ag-pop { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* --- narrower --------------------------------------------------------------- */
@media (max-width: 1100px) {
    .ag-grid { grid-template-columns: 212px 56px minmax(0, 1fr); }
    .ag-beams { width: 56px; }
    .ag-app .sc-thead, .ag-app .sc-row { grid-template-columns: 1fr 128px 110px; }
    .ag-app .sc-search { max-width: 170px; }
}
/* Below 980px the Sources shell (css/how-it-works.css) turns its sidebar into
   a top bar and fixes its main pane's height. Neither suits a register that
   sits under a row of agent chips, so everything the shell decides at that
   width is decided again here: no sidebar, natural height, and two columns,
   Name and Updated, because Updated is where an agent's change shows. */
@media (max-width: 980px) {
    .ag-grid { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
    .ag-agents { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
    .ag-agent { height: 40px; gap: 8px; padding: 0 10px 0 6px; }
    .ag-av { width: 28px; height: 28px; border-radius: 8px; }
    .ag-av img { width: 16px; height: 16px; }
    .ag-line, .ag-agent.is-on .ag-line, .ag-agent.is-done .ag-line { display: none; }
    .ag-agent.is-on { transform: none; }
    .ag-beams { display: none; }

    /* a fixed height here too, so the box never grows or shrinks as tags
       arrive or the new row folds open; six two-line rows fit with air */
    .sc-app.ag-app { height: 470px; flex-direction: column; }
    .ag-app .sc-side { display: none; }
    .ag-app .sc-main { flex: 1; height: auto; min-height: 0; }
    .ag-app .sc-view { position: static; padding: 16px 12px 8px; transform: none; }
    .ag-app .sc-h1 { font-size: 19px; }
    .ag-app .sc-toolbar { margin: 12px 0 2px; }
    .ag-app .sc-search { display: none; }
    .ag-app .sc-thead, .ag-app .sc-row { grid-template-columns: minmax(0, 1fr) 82px; gap: 8px; margin: 0 -6px; padding-left: 10px; padding-right: 10px; }
    .ag-app .sc-thead span:nth-child(2), .ag-app .sc-row-access { display: none; }
    .ag-app .sc-thead span:last-child, .ag-app .sc-row-time { display: block; font-size: 12px; }
    /* on a phone the name may take two lines rather than lose its tag */
    /* every row is two lines tall whether or not it needs them, so a tag
       arriving never moves the rows below it */
    .ag-app .sc-row { height: 48px; min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 12px; }
    .ag-app .sc-row-name { min-width: 0; white-space: normal; overflow: visible; display: block; line-height: 1.3; }
    .ag-app .sc-row-name img, .ag-app .sc-row-name .ag-bolt { display: inline-block; vertical-align: -3px; margin-right: 8px; }
    .ag-app .sc-tag { margin-left: 5px; vertical-align: 1px; }
    .ag-app .sc-row.ag-row--new { height: 0; }
    .ag-app .sc-row.ag-row--new.is-in { height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .ag-agent, .ag-av, .ag-line, .ag-ask, .ag-did, .ag-row, .ag-row--new, .ag-beam, .ag-by, .ag-just, .sc-row-time time { transition: none; }
    .ag-ask i, .ag-beam-run.is-on, .ag-acc, .sc-tag { animation: none !important; }
    .ag-ask i { opacity: 1; transform: none; }
}