/* The coding panel: what a click on the notch's coding bar opens, in HTML.
   It is the app's own surface, so it stays black and dark in both colour modes, and its
   numbers (sizes, paddings, colours) are the app's. No gradients: flat fills only. */

.cp {
  --cp-accent: #d97857;
  --cp-green: #30d158;
  --cp-red: #ff4245;
  --cp-cyan: #3cd3fe;
  --cp-text: #d6d6d6;
  --cp-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --cp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;

  position: relative;
  box-sizing: border-box;
  width: var(--cp-w, 540px);
  height: var(--cp-h, 444px);
  padding: 14px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #000;
  color: #fff;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  font: 400 11px/1.2 var(--cp-sans);
  color-scheme: dark;
  text-align: left;
}
.cp *, .cp *::before, .cp *::after { box-sizing: border-box; }
.cp [hidden] { display: none !important; }
:where(.cp) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.cp button:focus-visible, .cp [tabindex]:focus-visible { outline: 1.5px solid rgba(255, 255, 255, 0.55); outline-offset: 1px; }

/* ---------- Header: the agent, the session, three small tools ---------- */

.cp-head { flex: none; height: 34px; display: flex; align-items: center; gap: 10px; }
.cp-logo { flex: none; width: 26px; height: 26px; display: block; object-fit: contain; }
.cp-titles { flex: 1; min-width: 0; }
.cp-title { font-size: 15px; line-height: 19px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-sub { margin-top: 1px; font-size: 10px; line-height: 14px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-tools { flex: none; display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.6); pointer-events: none; }
.cp-tools svg { display: block; width: 14px; height: 14px; }

/* ---------- Status: a spinner and what it is doing, or the result ---------- */

.cp-status { flex: none; height: 17px; display: flex; align-items: center; gap: 8px; }
.cp-mark { flex: none; position: relative; width: 16px; height: 16px; }
.cp-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cp-spinner { animation: cp-spin 0.9s linear infinite; }
.cp-check { padding: 1.5px; }
.cp[data-state="done"] .cp-mark { width: 14.5px; }
.cp[data-state="working"] .cp-check, .cp[data-state="done"] .cp-spinner { display: none; }
.cp[data-frozen] .cp-spinner { animation-play-state: paused; opacity: 0.45; }
.cp-state { flex: none; height: 17px; overflow: hidden; font-size: 12px; line-height: 17px; font-weight: 600; white-space: nowrap; }
.cp-detail { min-width: 0; font-size: 11px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-elapsed { flex: none; margin-left: auto; font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.45); }
.cp[data-state="done"] .cp-elapsed { display: none; }

/* ---------- Summary: edits and checks, ticking up as the session goes ---------- */

.cp-summary { flex: none; min-height: 68px; padding: 9px; display: flex; flex-direction: column; gap: 5px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); }
.cp-row { display: flex; align-items: baseline; gap: 7px; height: 13px; line-height: 13px; white-space: nowrap; }
.cp-row.is-files { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cp-row.is-check { font-size: 10px; }
.cp-fill { flex: 1; }
.cp-files { color: rgba(255, 255, 255, 0.65); }
.cp-add { color: var(--cp-green); }
.cp-del { color: var(--cp-red); }
.cp-note { color: rgba(255, 255, 255, 0.4); }
.cp-verdict { color: rgba(255, 255, 255, 0.5); }
.cp-verdict.is-passed { color: var(--cp-green); }
.cp-verdict.is-failed { color: var(--cp-red); }
.cp-command { color: rgba(255, 255, 255, 0.4); overflow: hidden; text-overflow: ellipsis; }
.cp-rule { flex: none; height: 1px; margin: 0; border: 0; background: #2b2b2b; }

/* ---------- Stage: three transcripts on one dark field ---------- */

.cp-stage { position: relative; flex: 1; min-height: 0; border-radius: 9px; background: #0b0b0b; overflow: hidden; }
.cp-pane {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  padding: 10px 15px;
  visibility: hidden; opacity: 0;
  transition: opacity 0.12s linear, visibility 0s linear 0.12s;
  scrollbar-width: none;
  overscroll-behavior: auto;
  user-select: text;
}
.cp-pane::-webkit-scrollbar { display: none; }
.cp-pane.is-on { visibility: visible; opacity: 1; transition-delay: 0s; }
.cp-empty { font-size: 11px; color: #8e8e93; }

/* The scroll thumb is drawn, not native: the same on every platform, out of the layout. */
.cp-thumb { position: absolute; right: 4px; top: 0; width: 3px; height: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 0.25s linear; pointer-events: none; }
.cp-thumb.is-on { opacity: 1; transition-duration: 0.08s; }

/* Activity and Terminal: a heading line (role, then the time), then its text. */
.cp-entry { margin-bottom: 22px; animation: cp-in 0.18s ease-out; }
.cp-h { margin-bottom: 9px; font-size: 10px; line-height: 12px; font-weight: 600; color: var(--hc, #d6d6d6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-dot { margin: 0 8px; }
.cp-b { margin-bottom: 7px; font-size: 11px; line-height: 16px; color: var(--bc, var(--cp-text)); white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-b.is-mono { font-family: var(--cp-mono); }
.cp-k-prompt { --hc: #8cbfff; --bc: #a3ccff; }
.cp-k-read { --hc: #7accE0; }
.cp-k-message { --hc: #bfa6f2; }
.cp-k-edit { --hc: #83d4b3; }
.cp-k-terminal { --hc: #f2bd7a; }
.cp-k-output { --hc: #7accE0; }
.cp-k-done { --hc: #8fd69e; }
.cp-k-failed { --hc: #fa8c87; }
.cp-b.is-command { color: var(--cp-cyan); }
.cp-b.is-ok { color: #8fd69e; }
.cp-b.is-warn { color: #f2bd7a; }
.cp-b.is-bad { color: #fa8c87; }

/* Changes: one card per file, a header you can fold, the diff under it. The right gutter
   is where the drawn scroll thumb sits (the app leaves more for its scroller). */
.cp-pane.is-changes { padding: 8px 14px 8px 8px; }
.cp-file { margin-bottom: 6px; border-radius: 7px; background: rgba(255, 255, 255, 0.055); animation: cp-in 0.18s ease-out; }
.cp-file-head { display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px; font-size: 10px; line-height: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); }
.cp-file-head svg { flex: none; display: block; }
.cp-chevron { width: 9px; height: 9px; transition: transform 0.15s ease-out; }
.cp-file.is-folded .cp-chevron { transform: rotate(-90deg); }
.cp-doc { width: 11px; height: 11px; }
.cp-path { flex: 1; min-width: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-plus { flex: none; color: var(--cp-green); }
.cp-minus { flex: none; color: var(--cp-red); }
.cp-diff { padding: 0 9px 9px; font: 400 10.5px/13px var(--cp-mono); color: rgba(255, 255, 255, 0.6); }
.cp-file.is-folded .cp-diff { display: none; }
.cp-dl { display: flex; align-items: flex-start; }
.cp-ln { flex: none; width: var(--ln, 3ch); margin-right: 1.2ch; text-align: right; color: rgba(255, 255, 255, 0.32); font-variant-numeric: tabular-nums; user-select: none; }
.cp-sg { flex: none; width: 1ch; user-select: none; }
.cp-tx { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-dl.is-add { color: var(--cp-green); }
.cp-dl.is-rem { color: var(--cp-red); }
.cp-dl.is-hunk { color: var(--cp-cyan); }

/* The line being written is already in the layout, its unwritten part just not painted:
   nothing reflows while it types. */
.cp-rest { color: transparent; user-select: none; }
.cp-caret { position: relative; display: inline-block; width: 0; height: 1.15em; vertical-align: text-bottom; pointer-events: none; }
.cp-caret::after { content: ""; position: absolute; left: 0; top: 0; width: 1.5px; height: 100%; background: currentColor; animation: cp-blink 1.06s steps(1) infinite; }
.cp-caret.is-block::after { width: 0.6em; background: rgba(255, 255, 255, 0.78); }

/* ---------- Footer: the tabs, and the two transcript controls ---------- */

.cp-foot { flex: none; display: flex; align-items: center; gap: 4px; height: 24px; }
.cp-tab { padding: 5px 10px; border-radius: 6px; font-size: 10px; line-height: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.5); transition: color 0.12s linear, background-color 0.12s linear; }
.cp-tab:hover { color: rgba(255, 255, 255, 0.78); }
.cp-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, 0.12); }
.cp-spacer { flex: 1; }
.cp-ctl { width: 26px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); }
.cp-ctl svg { display: block; width: 11px; height: 11px; }
.cp-ctl:disabled { cursor: default; background: rgba(255, 255, 255, 0.025); color: rgba(255, 255, 255, 0.22); }

@keyframes cp-spin { to { transform: rotate(-360deg); } }
@keyframes cp-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cp *, .cp *::before, .cp *::after { animation: none !important; transition: none !important; }
}