/* Code (shared/chat/code/view.js; docs/code-mode-contract.md §1, §5, §7): the
   Code home's composer (the repository, the branch, the model, Super AI's
   switch and team), the steps timeline, Super AI's discussion (code/team.js:
   chat.css's flow card and turns, with each turn's steps), the proposal card
   with its files and their unified diffs, the pull request's card, the pickers'
   menus, the lock on the shell's Code tab and a Code task's glyph in the list.
   Built from chat.css's classes (lc-root, lc-thread, lc-composer, lc-pill,
   lc-chip, lc-send, lc-md, lc-bubble, lc-notice, lc-empty, lc-flowcard, lc-turn,
   lc-team…) and work.css's gates, notices and dialog (both load with it on
   /chat); these are its own. Every class is lc-, every color a theme.css token
   (the diffs: --diff-add, --diff-del and their backgrounds). Nothing here makes
   the page scroll sideways: a diff scrolls inside its own box, long names and
   paths wrap or cut off, and the composer's chips wrap and shrink. */

/* ------------------------------------------------------------ the view */
.lc-code { height: 100%; }
/* What's in the thread wraps or scrolls in its own box; the thread itself never scrolls sideways. */
.lc-code-thread { overflow-x: hidden; }
.lc-code-inner { min-width: 0; }
.lc-code-lede { max-width: 460px; margin: 12px auto 0; font-size: var(--fs-body, 14px); line-height: 1.55; color: var(--dim); }
.lc-code-empty > .lc-code-gate { margin-top: 20px; }
.lc-code-empty > .lc-code-gate + .lc-modes { margin-top: 18px; }
.lc-code-gh-tile { width: auto; height: auto; background: none; }
.lc-code-after { display: flex; flex-direction: column; gap: 8px; }
.lc-code-after:empty { display: none; }
.lc-code-message { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ------------------------------------------------------------ the composer: Chat's pill, the input always over its row */
.lc-code-row { flex-wrap: wrap; row-gap: 6px; }
.lc-code-where { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; }
.lc-code-ctl { display: flex; align-items: center; gap: var(--cmp-gap, 6px); min-width: 0; margin-left: auto; }
.lc-chip.lc-code-chip { padding: 0 8px 0 10px; }
.lc-chip.lc-code-repo > .lc-chip-label { max-width: 240px; }
.lc-chip.lc-code-branch > .lc-chip-label { max-width: 150px; }
.lc-chip.lc-code-model > .lc-chip-label { max-width: 190px; }
.lc-chip.lc-code-chip-empty { color: var(--dim); }
.lc-chip[aria-disabled="true"] { cursor: default; }
.lc-pill .lc-chip[aria-disabled="true"]:hover { background: transparent; }
.lc-pill .lc-chip.lc-code-chip[aria-disabled="true"] { color: var(--dim); }
/* Super AI (§7): its switch in the accent while it's on; the team's chip, its makers' marks overlapping */
.lc-pill .lc-chip.lc-code-super-on, .lc-pill .lc-chip.lc-code-super-on:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.lc-chip.lc-code-super-on > .lc-icon { color: var(--accent); }
.lc-chip.lc-code-super > .lc-icon svg { width: 15px; height: 15px; }
.lc-chip > .lc-icon.lc-code-lock { color: var(--label); }
.lc-chip > .lc-code-lock svg { width: 12px; height: 12px; }
.lc-chip.lc-code-team { gap: 6px; padding: 0 8px 0 6px; }
.lc-chip.lc-code-team > .lc-chip-label { max-width: 120px; }
.lc-pill .lc-chip.lc-code-team[aria-disabled="true"] { color: var(--dim); }
/* what the box needs before it can go (Super AI's 2 to 4 models) */
.lc-code-hint { margin: 0 2px 4px; font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--dim); }
/* a narrow composer (phones): shorter labels; Super AI's switch an icon (its accent says it's on), the team's
   chip its marks and count */
@container lc-composer (max-width: 479px) {
  .lc-chip.lc-code-repo > .lc-chip-label { max-width: 132px; }
  .lc-chip.lc-code-branch > .lc-chip-label { max-width: 80px; }
  .lc-chip.lc-code-model > .lc-chip-label { max-width: 112px; }
  .lc-chip.lc-code-super > .lc-chip-label { display: none; }
  .lc-chip.lc-code-super { padding: 0 9px; }
  .lc-chip.lc-code-team > .lc-chip-label { max-width: 72px; }
}

/* ------------------------------------------------------------ steps (§6.8): a card a line high, 6 px apart */
.lc-code-steps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lc-code-step {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 11px;
  border-radius: var(--r-card, 12px); background: var(--card); border: 1px solid var(--line);
  color: var(--dim); font-size: var(--fs-sm, 12.5px); line-height: var(--lh-ui, 1.45);
}
.lc-code-step-icon { color: var(--label); }
.lc-code-step-icon svg, .lc-code-state svg { width: 14px; height: 14px; }
.lc-code-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-code-state { flex: none; display: grid; place-items: center; width: 14px; height: 14px; }
.lc-code-state-running { color: var(--text); }
.lc-code-state-running svg { width: 12px; height: 12px; }
.lc-code-state-ok { color: var(--ok); }
.lc-code-state-error { color: var(--danger); }
.lc-code-state-stopped { color: var(--label); }
.lc-code-step-running .lc-code-step-label {
  background: linear-gradient(90deg, var(--dim), var(--text), var(--dim)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lc-shimmer 2s linear infinite;
}

/* ------------------------------------------------------------ a reply: Super AI's card, thinking, steps, words, proposal */
.lc-code-run { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* a reply of a task from before Super AI that compared models: whose it is */
.lc-code-run-name { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 4px 0 0; font: 600 var(--fs-ui, 13.5px)/1.3 var(--font); color: var(--text); }
.lc-code-run-name > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lc-code-run-mark { display: inline-grid; place-items: center; flex: none; color: var(--dim); }
.lc-code-run-mark svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ Super AI's discussion (§7, code/team.js): chat.css's flow card
   and turns; here each turn's steps (a 12.5px --label button, "3 steps", that opens them; the one it's on while it
   speaks), and where a member left the table */
.lc-code-talk .lc-turn-round:first-child .lc-turn-round-title { margin-top: 2px; }
.lc-code-turn-extra { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 2px 6px 4px 40px; }
.lc-code-turn-extra[hidden] { display: none; }
.lc-code-turn-steps {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px 2px 4px; border: 0;
  border-radius: var(--r-control, 8px); background: none; color: var(--label); font: 500 var(--fs-sm, 12.5px)/1.3 var(--font); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lc-code-turn-steps:hover { background: var(--hover); color: var(--text); }
.lc-code-turn-steps:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.lc-code-turn-chev { transition: transform var(--dur-2) var(--ease-out); }
.lc-code-turn-chev svg { width: 11px; height: 11px; }
.lc-code-turn-steps[aria-expanded="true"] .lc-code-turn-chev { transform: rotate(90deg); }
.lc-code-left { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 0 6px 0 40px; font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--dim); overflow-wrap: anywhere; }
.lc-code-left-icon { flex: none; margin-top: 1px; color: var(--label); }
.lc-code-left-icon svg { width: 12px; height: 12px; }
.lc-code-left-list { margin-top: 6px; }
.lc-code-words { min-width: 0; overflow-wrap: anywhere; }
.lc-code-working {
  margin: 0; font: 500 13px/1.45 var(--font); color: var(--muted);
  background: linear-gradient(90deg, var(--muted), var(--text), var(--muted)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lc-shimmer 2s linear infinite;
}
.lc-code-notes { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lc-code-notes:empty, .lc-code-card-slot:empty { display: none; }
.lc-code-card-slot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lc-code-ended { margin: 0; font-size: var(--fs-sm, 12.5px); color: var(--label); }
.lc-code-notice { line-height: 1.45; }

/* ------------------------------------------------------------ the proposal (§1.3) */
.lc-code-proposal {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 16px;
  border-radius: var(--r-pop, 16px); background: var(--card); border: 1px solid var(--line-strong);
}
.lc-code-prop-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.lc-icon.lc-code-prop-tile { width: 30px; height: 30px; border-radius: var(--r-control, 8px); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.lc-code-prop-tile svg { width: 16px; height: 16px; }
.lc-code-prop-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lc-code-prop-title { margin: 0; font: 600 15px/1.35 var(--font); color: var(--text); overflow-wrap: anywhere; }
.lc-code-prop-meta { margin: 0; font-size: var(--fs-sm, 12.5px); line-height: 1.4; color: var(--label); overflow-wrap: anywhere; }
.lc-code-prop-summary { font-size: var(--fs-body, 14px); color: var(--text-soft); overflow-wrap: anywhere; }
.lc-code-prop-empty { margin: 0; font-size: 13px; color: var(--label); }
.lc-code-counts { font: 500 12px/1 var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-code-add { color: var(--diff-add); }
.lc-code-del { color: var(--diff-del); }
.lc-badge.lc-code-badge { flex: none; }
.lc-badge.lc-code-badge-pr { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-text); }
/* while the team still checks or revises it: a badge in the accent (it isn't ready yet) */
.lc-badge.lc-code-badge-live { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
/* Super AI's: "By {writer}, with {others}" */
.lc-code-prop-by { margin: 1px 0 0; font-size: var(--fs-sm, 12.5px); line-height: 1.4; color: var(--dim); overflow-wrap: anywhere; min-width: 0; }
/* A GitHub Actions workflow it changes: a warning line (§1, Safety) */
.lc-code-warn {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 7px 10px; border-radius: var(--r-control, 8px);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent);
  font: 500 var(--fs-sm, 12.5px)/1.45 var(--font); color: var(--warn-text);
}
.lc-code-warn > .lc-icon { margin-top: 1px; }
.lc-code-warn svg { width: 14px; height: 14px; }
/* the files: a row each (its path, how it changed, its counts) that opens its diff */
.lc-code-files { list-style: none; margin: 0; padding: 4px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-code-file { min-width: 0; }
.lc-code-file-head {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 7px 8px; border: 0; border-radius: var(--r-row, 10px);
  background: none; color: var(--text); text-align: left; cursor: pointer; transition: background var(--dur-1) var(--ease-out);
}
.lc-code-file-head:hover { background: var(--hover); }
.lc-code-file-head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.lc-code-file-chev { color: var(--label); transition: transform var(--dur-2) var(--ease-out); }
.lc-code-file-chev svg { width: 12px; height: 12px; }
.lc-code-file-head[aria-expanded="true"] .lc-code-file-chev { transform: rotate(90deg); }
.lc-code-file-path { flex: 1; min-width: 0; font: 12.5px/1.4 var(--mono); overflow-wrap: anywhere; }
.lc-code-file-dir { color: var(--label); }
.lc-code-file-path b { font-weight: 500; color: var(--text); }
.lc-code-file-warn { color: var(--warn); }
.lc-code-file-warn svg { width: 13px; height: 13px; }
.lc-code-file-status { flex: none; font: 500 var(--fs-2xs, 11.5px)/1 var(--font); color: var(--label); }
.lc-code-file-added { color: var(--diff-add); }
.lc-code-file-deleted { color: var(--diff-del); }
.lc-code-file-body { min-width: 0; padding: 2px 0 6px; }
.lc-code-prop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.lc-code-prop-actions .lc-icon svg { width: 14px; height: 14px; }
.lc-btn.lc-code-btn-ghost { background: none; border-color: transparent; color: var(--dim); }
.lc-btn.lc-code-btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.lc-code-prop-error { margin: 0; font-size: var(--fs-sm, 12.5px); color: var(--danger-text); }
.lc-code-prop-discarded { opacity: .62; }
.lc-code-prop-discarded .lc-code-prop-title { text-decoration: line-through; text-decoration-color: var(--label); }

/* ------------------------------------------------------------ a file's unified diff: monospace, line numbers,
   added and removed lines in the --diff tokens; it scrolls sideways (and, when it's long, down) inside its box */
.lc-code-diff { min-width: 0; margin: 2px 0 4px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-row, 10px); background: var(--card2); }
.lc-code-diff-scroll { max-width: 100%; max-height: 520px; overflow: auto; overscroll-behavior: contain; }
.lc-code-diff-scroll:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.lc-code-diff-table { width: max-content; min-width: 100%; border-collapse: collapse; border-spacing: 0; font: 12.5px/1.6 var(--mono); tab-size: 4; color: var(--text); }
.lc-diff-row > td { vertical-align: top; }
.lc-diff-num {
  position: sticky; left: 0; z-index: 1; width: var(--lc-diff-num-w, 5ch); min-width: var(--lc-diff-num-w, 5ch); padding: 0 8px;
  text-align: right; color: var(--label); background: var(--card2); user-select: none; font-variant-numeric: tabular-nums;
}
.lc-diff-num + .lc-diff-num { left: var(--lc-diff-num-w, 5ch); border-right: 1px solid var(--line); }
.lc-diff-code { padding: 0 16px 0 6px; white-space: pre; }
.lc-diff-sign { display: inline-block; width: 1.5ch; color: var(--label); user-select: none; }
.lc-diff-add > td { background: var(--diff-add-bg); }
.lc-diff-add .lc-diff-num, .lc-diff-add .lc-diff-sign { color: var(--diff-add); }
.lc-diff-del > td { background: var(--diff-del-bg); }
.lc-diff-del .lc-diff-num, .lc-diff-del .lc-diff-sign { color: var(--diff-del); }
.lc-diff-hunk > td, .lc-diff-meta > td { background: var(--overlay-2); color: var(--label); }
.lc-diff-hunk-text { padding: 3px 10px; white-space: pre; }
.lc-code-diff-note { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--label); }
.lc-code-diff > .lc-code-diff-note:first-child { border-top: 0; }

/* ------------------------------------------------------------ the pull request (§1.4) */
.lc-code-pr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; padding: 12px 14px;
  border-radius: var(--r-pop, 16px); background: var(--card); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line));
}
.lc-code-pr-merged { border-color: color-mix(in srgb, var(--accent2) 40%, var(--line)); }
.lc-code-pr-closed { border-color: var(--line-strong); }
.lc-icon.lc-code-pr-tile { width: 32px; height: 32px; border-radius: var(--r-row, 10px); background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.lc-code-pr-merged .lc-code-pr-tile { background: color-mix(in srgb, var(--accent2) 16%, transparent); color: var(--accent2); }
.lc-code-pr-closed .lc-code-pr-tile { background: var(--overlay-3); color: var(--dim); }
.lc-code-pr-tile svg { width: 16px; height: 16px; }
.lc-code-pr-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lc-code-pr-text p { margin: 0; overflow-wrap: anywhere; }
.lc-code-pr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-ui, 13.5px); color: var(--text); }
.lc-code-pr-top b { font-weight: 600; }
.lc-code-pr-state-open { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-text); }
.lc-code-pr-state-merged { background: color-mix(in srgb, var(--accent2) 16%, transparent); color: var(--accent2); }
.lc-code-pr-title { font-size: var(--fs-ui, 13.5px); color: var(--text-soft); }
.lc-code-pr-branch { display: flex; align-items: center; gap: 6px; font: 12px/1.4 var(--mono); color: var(--label); }
.lc-code-pr-branch svg { width: 13px; height: 13px; flex: none; }
a.lc-btn.lc-code-pr-open { margin-left: auto; text-decoration: none; }
.lc-code-pr-open .lc-icon svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------ the pickers: the repository and the branch (§6.2 menus) */
.lc-code-pick { width: min(400px, calc(100vw - 32px)); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lc-code-pick-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 6px; }
.lc-code-pick-option { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: var(--r-row, 10px); cursor: pointer; color: var(--text); }
.lc-code-pick-option:hover, .lc-code-pick-option.lc-active { background: var(--hover); }
.lc-code-pick-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lc-code-pick-icon { color: var(--dim); }
.lc-code-pick-icon svg { width: 15px; height: 15px; }
.lc-code-pick-option[data-private] .lc-code-pick-icon { color: var(--amber); }
.lc-code-pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.lc-code-pick-text b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-code-pick-text small { font-size: 12px; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-badge.lc-code-private, .lc-badge.lc-code-default { flex: none; }
.lc-code-pick-when { flex: none; font-size: var(--fs-2xs, 11.5px); color: var(--label); font-variant-numeric: tabular-nums; }
.lc-code-pick-option .lc-check { color: var(--accent); }
.lc-code-pick-option .lc-check svg { width: 14px; height: 14px; }
.lc-code-pick-more { display: block; width: 100%; margin-top: 2px; padding: 8px 10px; border: 0; border-radius: var(--r-row, 10px); background: none; color: var(--accent); font: 500 13px var(--font); text-align: left; cursor: pointer; }
.lc-code-pick-more:hover { background: var(--hover); }
.lc-code-pick-foot { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs, 12px); color: var(--label); }
.lc-code-pick-note { margin: 10px; }

/* the model's menu is Chat's (chat.css .lc-model-menu); Super AI's team: chat.css's team rows (a box for each
   model, 2 to 4 of them, the lead's badge), then Extra thinking */
.lc-code-team-menu { width: min(340px, calc(100vw - 32px)); overflow-y: auto; }
.lc-code-team-menu > .lc-think-row { margin-top: 2px; }
.lc-code-sep { height: 1px; margin: 4px 6px; background: var(--line); }
/* Super AI below Max: which plan has it, and Upgrade */
.lc-code-lock-pop { width: min(300px, calc(100vw - 32px)); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.lc-code-lock-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-ui, 13.5px); color: var(--text); }
.lc-code-lock-title svg { width: 14px; height: 14px; color: var(--accent); }
.lc-code-lock-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
.lc-code-lock-actions { display: flex; justify-content: flex-end; margin-top: 2px; }

/* ------------------------------------------------------------ the shell's Code tab, and a Code task in the list */
/* Code on Free and Go: its tab shows its plan lock (chat.js puts it in) */
.lc-mode-lock { display: inline-flex; margin-left: 6px; color: var(--label); }
.lc-mode-lock svg { width: 12px; height: 12px; }
.lc-chat-code { color: var(--label); }
.lc-chat-code svg { display: block; width: 14px; height: 14px; }
.lc-current .lc-chat-code, .lc-chat-row:hover .lc-chat-code { color: var(--dim); }

/* a finger's targets */
@media (pointer: coarse) {
  .lc-code-file-head { min-height: 40px; }
  .lc-code-turn-steps { min-height: 32px; }
  .lc-code-pick-option { min-height: 44px; }
}
/* a phone's card: the turns' words and steps under the name, as chat.css does for Roundtable's */
@media (max-width: 520px) {
  .lc-code-turn-extra, .lc-code-left { margin-left: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-code-working, .lc-code-step-running .lc-code-step-label { animation: none; }
  .lc-code-file-chev, .lc-code-turn-chev { transition: none; }
}
html[data-motion="reduce"] :is(.lc-code-working, .lc-code-step-running .lc-code-step-label) { animation: none; }