/* ==========================================================================
   The transcript pane
   ========================================================================== */
.pane-detail { background: #101014; }

.detail-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    min-height: 50px;
}
.detail-head .back {
    display: none;
    flex: 0 0 auto;
    color: var(--dim); font-size: 13px;
    padding: 6px 10px 6px 4px;
}
.detail-head canvas { display: block; image-rendering: pixelated; flex: 0 0 auto; }
.detail-head .detail-session {
    display: flex; align-items: center; gap: 10px;
    min-width: 0; flex: 1 1 auto;
    padding: 4px 5px; margin: -4px -5px;
    border-radius: 7px; text-align: left;
}
.detail-head .detail-session:hover:not(:disabled) { background: var(--card); }
.detail-head .detail-session:disabled { opacity: 0.45; cursor: default; }
.detail-head .detail-identity { position: relative; flex: 0 0 auto; }
.detail-head .detail-actions { position: relative; flex: 0 0 auto; }
.detail-head .detail-identity > .clawdfather-crown {
    position: absolute; top: -4px; left: -5px; z-index: 2;
    width: 15px; height: 10px; pointer-events: none;
    background: #f0c75e;
    clip-path: polygon(0 18%, 27% 52%, 43% 0, 58% 52%, 100% 18%, 86% 100%, 14% 100%);
    transform: rotate(-30deg); transform-origin: 50% 80%;
    filter: drop-shadow(0 1px 0 rgba(80, 49, 10, 0.85));
}
.detail-head .detail-identity > .clawdfather-crown[hidden] { display: none; }
.detail-head .detail-who {
    min-width: 0; overflow: hidden;
}
/* **A rule that sets `display` outranks the `hidden` attribute.** The header above sets `flex`,
   so without this the session's header stays on screen behind an agent's. Same trap the chip in
   the list fell into, noted there too. */
.detail-head[hidden] { display: none; }
.detail-head .who { min-width: 0; flex: 1 1 auto; }
.detail-head .name { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-head .sub {
    display: block;
    font-family: var(--mono); font-size: 11px; color: var(--faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail-head .tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.detail-head .detail-more {
    display: grid; place-items: center;
    min-width: 44px; min-height: 44px; padding: 4px 7px;
    color: var(--dim);
}
.detail-head .detail-more:hover:not(:disabled) { color: var(--ink); }
.detail-head .detail-more:disabled { opacity: 0.4; cursor: default; }
.detail-head .detail-more svg {
    display: block; width: 18px; height: 14px; fill: currentColor;
}

/* The same pane, one of the session's agents in it.
   ---------------------------------------------------------------------------
   Deliberately the session header's twin: same height, same hairline, same two lines of text in
   the same places. Following a link should change what the pane is *about* and not where
   anything on it sits — a header that is a different height moves the first line of the
   transcript, which is exactly the thing the reader was looking at when they clicked. */
.agent-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 10px 6px;
    border-bottom: 1px solid var(--line);
    min-height: 50px;
}
.agent-head[hidden] { display: none; }
/* Always visible, unlike the list's back button — this one is the only way out of here on every
   screen size, not just on a phone. */
.agent-head .back {
    flex: 0 0 auto;
    color: var(--dim); font-size: 13px;
    padding: 7px 9px; border-radius: 6px;
}
.agent-head .back:hover { background: var(--card); color: var(--ink); }
.agent-head .who { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.agent-head .name {
    font-size: 13.5px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Monospace, because what it holds is a machine's account of itself: a state, a clock, a token
   count, a number of tools. The session's subtitle is a path and reads the same way. */
.agent-head .sub {
    color: var(--faint); font: 11px/1.5 var(--mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-actions {
    position: absolute; z-index: 45;
    top: calc(100% + 9px); right: -7px;
    width: 184px;
    padding: 5px;
    border: 1px solid var(--line); border-radius: 10px;
    background: #1a1a20;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
}
.session-actions[hidden] { display: none; }
.session-action-stage {
    display: grid; overflow: hidden; border-radius: 7px;
}
.session-action-level {
    grid-area: 1 / 1; min-width: 0;
    transform: translateX(0); opacity: 1; visibility: visible;
    transition: transform 190ms var(--ease), opacity 150ms ease-out, visibility 0s linear;
    will-change: transform, opacity;
}
/* Both levels stay in the grid so the popover keeps one measured height while they trade
   places. `inert` in the script makes the off-stage level unreachable; these states only draw
   the push. Entering Git sends the main actions left and brings Git in from the right. */
.session-action-level[data-place="left"] {
    transform: translateX(calc(-100% - 10px)); opacity: 0; visibility: hidden;
    pointer-events: none;
    transition: transform 190ms var(--ease), opacity 150ms ease-out, visibility 0s linear 190ms;
}
.session-action-level[data-place="right"] {
    transform: translateX(calc(100% + 10px)); opacity: 0; visibility: hidden;
    pointer-events: none;
    transition: transform 190ms var(--ease), opacity 150ms ease-out, visibility 0s linear 190ms;
}
.session-actions::before {
    content: ""; position: absolute; top: -5px; right: 14px;
    width: 8px; height: 8px;
    border-left: 1px solid var(--line); border-top: 1px solid var(--line);
    background: #1a1a20; transform: rotate(45deg);
}
.session-actions button {
    position: relative; width: 100%; min-height: 38px;
    display: flex; align-items: center;
    padding: 7px 10px; border-radius: 7px;
    text-align: left; color: var(--ink); font: 12.5px/1.35 var(--mono);
}
.session-actions button:hover:not(:disabled),
.session-actions button:focus-visible { background: var(--card-hi); }
.session-actions button:disabled { opacity: 0.42; cursor: default; }
.session-actions button .next { margin-left: auto; color: var(--faint); font-size: 16px; }
.session-actions .level-back {
    margin-bottom: 4px; padding-bottom: 9px;
    border-bottom: 1px solid var(--line); border-radius: 7px 7px 0 0;
    color: var(--dim); font-family: var(--ui);
}
.session-actions .end {
    margin-top: 4px; padding-top: 9px;
    border-top: 1px solid var(--line); border-radius: 0 0 7px 7px;
    color: #d88f7b; font-family: var(--ui);
}
/* A view of the open session that takes the transcript's space rather than floating over it.
   There are two — the repository's changes, and one background command's output — and they are
   the same piece of furniture, which is why none of this is named after either of them. The
   header stays put; only the transcript and the things under it step aside. `data-panel` names
   which one is up, and there is never more than one. */
.panel-view {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    background: #101014;
}
.panel-view[hidden] { display: none; }
.pane-detail[data-panel] > .tx-scroll,
.pane-detail[data-panel] > .live,
.pane-detail[data-panel] > .agents,
.pane-detail[data-panel] > .composer { display: none; }
.panel-view-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 9px;
    padding: 13px 16px 12px 18px;
    border-bottom: 1px solid var(--line);
}
.panel-view-head h2 {
    min-width: 0; flex: 1 1 auto;
    margin: 0; color: var(--ink); font-size: 14px; font-weight: 600;
}
.panel-view-body { flex: 1 1 auto; padding: 16px 18px 24px; }

/* What a background command has printed, which is bytes in the order they were written and not
   a conversation. So: the terminal's own typeface, its own wrapping, and no attempt to make a
   build log look like prose. */
.shell-out {
    margin: 0; color: var(--dim); font: 12px/1.65 var(--mono);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Leading it, the command itself. The one thing on this screen somebody can match against what
   they remember asking for, so it is the thing set largest — and set in the terminal's typeface,
   because it is a line of shell and not a sentence. */
.shell-cmd {
    margin: 0 0 8px; color: var(--ink); font: 12.5px/1.6 var(--mono);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Under it, the two facts the bytes do not carry: what it was for, and whether anything more is
   coming. */
.shell-said {
    margin: 0 0 12px; color: var(--faint); font: 11.5px/1.5 var(--mono);
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.shell-said .dot {
    flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); opacity: 0.8;
}
.shell-said[data-ended="1"] .dot { background: var(--faint); opacity: 1; }
/* Claude Code's own word for this command, kept because it is what `/bashes` and `KillShell` take
   on the Mac — and kept quiet, because to anybody else it is nine random characters. */
.shell-said .id { color: var(--line); }
.git-branch {
    margin: 0 0 12px; color: var(--dim);
    font: 12px/1.5 var(--mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.git-files { margin: 0; padding: 0; list-style: none; }
.git-file {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 9px; align-items: center;
    min-height: 38px; padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    font: 12px/1.4 var(--mono);
}
.git-file:first-child { border-top: 1px solid var(--line); }
.git-file .mark { color: var(--accent); font-weight: 700; letter-spacing: 1px; }
.git-file[data-kind="untracked"] .mark { color: var(--warn); }
.git-file[data-kind="conflict"] .mark { color: var(--bad); }
.git-file .path { min-width: 0; overflow: hidden; white-space: nowrap; color: var(--ink); }
.git-file .stats { white-space: nowrap; color: var(--faint); }
.git-file .stats .add { color: var(--ok); }
.git-file .stats .del { color: #d88f7b; }
.git-note { padding: 24px 4px; color: var(--faint); font-size: 13px; }
.git-note.err { color: var(--bad); }
.chip {
    border: 1px solid var(--line); border-radius: 7px;
    padding: 4px 9px; font-size: 11.5px; color: var(--dim);
    background: var(--card);
}
.chip:hover:not(:disabled) { background: var(--card-hi); color: var(--ink); }
.chip:disabled { opacity: 0.4; cursor: default; }
.chip.on { border-color: var(--accent-ed); color: var(--accent); }
/* A chip that destroys something. The same restrained red the confirm sheet's own button takes
   for ending a session — enough that it does not read as one more thing to press idly, not so
   much that it competes with a session actually asking for an answer. */
.chip.danger { border-color: #57362e; color: #e09985; }
.chip.danger:hover:not(:disabled) { background: #2f2322; color: #f0b6a2; }
.chip[hidden] { display: none; }
/* An icon on each of the two buttons in the transcript header. They used to be two words in two
   identical chips — one a sort control and one a thing that reaches out and moves a window on
   another machine — and reading as the same kind of control is how "Reveal" came to mean nothing
   at all to somebody. */
.chip .ico { display: inline-block; vertical-align: -2px; width: 13px; height: 13px; margin-right: 5px; }
.chip .ico.arrow { transition: transform 180ms var(--ease); }
.chip.on .ico.arrow { transform: rotate(180deg); }