/* =========================================================
   Agent Session — animated MCP agent terminal

   A dark terminal card that types a natural-language request,
   thinks, then prints the resulting environment table.

   Progressive enhancement: the finished session is written in
   the markup, so with JavaScript off (or reduced motion on) the
   reader still sees the whole exchange. js/agent-session.js
   sets data-session-live on the body, which is what switches the
   steps to hidden and starts the loop.

   Content lives in the HTML — the script reads the command text
   and the table rows out of the DOM, so copy is edited in one
   place and never in the script.

   Used on: agentic-database-devops.html — Split, MCP Server
   Reusable in any split-section media slot.
   ========================================================= */

.agent-session {
    /* terminal chrome — its own surface, not a site background */
    --session-shell: #16232e;
    --session-bar: #0f1d27;
    --session-edge: #2a3b48;
    --session-text: #cfe6ea;
    --session-dim: #8fb6be;
    --session-bright: #eaf6f7;
    --session-rule: rgba(255, 255, 255, 0.18);

    position: relative;
}

/* the teal bloom behind the card */
.agent-session .agent-session-glow {
    position: absolute;
    inset: -6% -3% -16%;
    background-image: radial-gradient(58% 58% at 50% 42%, rgba(8, 198, 173, 0.26), transparent 70%);
    filter: blur(26px);
}

.agent-session .agent-session-window {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--session-edge);
    border-radius: var(--radius-lg);
    background-color: var(--session-shell);
    box-shadow: 0 12px 32px rgba(10, 37, 64, 0.12);
}

/* ---------- Title bar ---------- */

.agent-session .agent-session-window .agent-session-bar {
    gap: 7px;
    height: 36px;
    padding-inline: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background-color: var(--session-bar);
}

.agent-session .agent-session-window .agent-session-bar .agent-session-light {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #e0655b;
}

.agent-session .agent-session-window .agent-session-bar .agent-session-light-amber {
    background-color: #e3a94a;
}

.agent-session .agent-session-window .agent-session-bar .agent-session-light-green {
    background-color: #4fb477;
}

.agent-session .agent-session-window .agent-session-bar span {
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    line-height: var(--line-height-auto);
    color: #7fa6ae;
}

/* ---------- Session body ----------
   The card is as tall as the finished session and stays that
   tall throughout, so nothing jumps as the loop plays and
   nothing is ever cut off:

     - every table row is in the markup from the start and only
       fades in, so the table never grows
     - the thinking line and the answer share one slot below
     - the script pins the prompt to its full typed height

   That leaves the height free to follow the content, which is
   what keeps it honest at a narrow media column. min-height is
   only a floor for wide screens, where the session is shorter
   than the card wants to be. */

.agent-session .agent-session-window .agent-session-body {
    min-height: 340px;
    padding: 18px 18px 20px;
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    line-height: 1.5;
    color: var(--session-text);
}

.agent-session .agent-session-window .agent-session-body .agent-session-prompt {
    min-height: 19px;
    padding: 7px 10px;
    border-left: 2px solid #12e0c4;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--session-bright);
    overflow-wrap: anywhere;
}

.agent-session .agent-session-window .agent-session-body .agent-session-prompt [data-session-caret] {
    color: #0b8e7c;
}

/* ---------- Thinking / answer slot ----------
   the answer line stays in the flow and gives the slot its
   height; the thinking line is laid over it during playback and
   is not part of the finished session at all */

.agent-session .agent-session-window .agent-session-body .agent-session-step {
    position: relative;
    margin-top: 16px;
}

.agent-session .agent-session-window .agent-session-body .agent-session-step .agent-session-status {
    display: none;
    color: var(--session-dim);
}

.agent-session .agent-session-window .agent-session-body .agent-session-table {
    width: 100%;
    max-width: 470px;
    margin-top: 12px;
    border-collapse: collapse;
}

.agent-session .agent-session-window .agent-session-body .agent-session-table th,
.agent-session .agent-session-window .agent-session-body .agent-session-table td {
    padding: 5px 11px;
    border: 1px solid var(--session-rule);
    font-size: var(--font-size-caption);
    line-height: 1.5;
    text-align: left;
}

.agent-session .agent-session-window .agent-session-body .agent-session-table th {
    font-weight: var(--font-weight-semibold);
    color: var(--session-bright);
}

.agent-session .agent-session-window .agent-session-body .agent-session-table td {
    font-weight: var(--font-weight-regular);
    color: var(--session-text);
}

.agent-session .agent-session-window .agent-session-body .agent-session-foot {
    margin-top: 13px;
    color: var(--session-dim);
}

/* ---------- Playback ----------
   everything below only applies once the script has taken over */

/* the thinking line only exists while the loop is running, and it
   sits on top of the answer rather than above it */
.agent-session .agent-session-window [data-session-live] .agent-session-step .agent-session-status {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* every step starts hidden. the table header is deliberately not in
   this list — it arrives with the table itself */
.agent-session .agent-session-window [data-session-live] .agent-session-step .agent-session-status,
.agent-session .agent-session-window [data-session-live] .agent-session-step .agent-session-done,
.agent-session .agent-session-window [data-session-live] .agent-session-table,
.agent-session .agent-session-window [data-session-live] .agent-session-foot,
.agent-session .agent-session-window [data-session-live] .agent-session-table tbody tr {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* each reveal repeats its own hide selector plus the attribute, so it
   always outweighs it — a bare [data-session-shown] would lose to the
   two element selectors in the table-row rule above */
.agent-session .agent-session-window [data-session-live] .agent-session-step .agent-session-status[data-session-shown],
.agent-session .agent-session-window [data-session-live] .agent-session-step .agent-session-done[data-session-shown],
.agent-session .agent-session-window [data-session-live] .agent-session-table[data-session-shown],
.agent-session .agent-session-window [data-session-live] .agent-session-foot[data-session-shown],
.agent-session .agent-session-window [data-session-live] .agent-session-table tbody tr[data-session-shown] {
    opacity: 1;
}

/* the thinking line is done once the answer arrives */
.agent-session .agent-session-window [data-session-live] .agent-session-step .agent-session-status[data-session-spent] {
    display: none;
}

.agent-session .agent-session-window [data-session-live] .agent-session-prompt [data-session-caret] {
    animation: agent-session-caret 1s steps(1) infinite;
}

@keyframes agent-session-caret {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* ---------- Mobile ----------
   no height overrides anywhere below: the card follows its own
   content, so a narrower column simply makes a taller card */
@media (max-width: 767px) {

    .agent-session .agent-session-window .agent-session-body {
        padding: 14px 14px 16px;
    }

    .agent-session .agent-session-window .agent-session-body .agent-session-table th,
    .agent-session .agent-session-window .agent-session-body .agent-session-table td {
        padding: 5px 8px;
    }

}

/* ---------- Small Mobile ---------- */
@media (max-width: 575px) {

    .agent-session .agent-session-window .agent-session-body {
        font-size: var(--font-size-micro);
    }

    .agent-session .agent-session-window .agent-session-body .agent-session-table th,
    .agent-session .agent-session-window .agent-session-body .agent-session-table td {
        padding: 4px 6px;
        font-size: var(--font-size-micro);
    }

}