.application-body.application-code {
  --app-colour: var(--app-colour-code, #383E42);
}
.application-body.application-code .document-content:has(kik-code-editor) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
#app-space .application-body.application-code.state-on .document-body > .document-content:has(kik-code-editor) {
  padding: 0;
}
.application-body.application-code .code-branch {
  color: var(--colour-byline);
}
.application-body.application-code .code-deploy-status,
.application-body.application-code .code-deploy-target {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2em 1em;
  margin: 1em 0;
}
.application-body.application-code .code-deploy-status dt,
.application-body.application-code .code-deploy-target dt {
  color: var(--colour-byline);
}
.application-body.application-code .code-deploy-status dd,
.application-body.application-code .code-deploy-target dd {
  margin: 0;
}
.application-body.application-code aside.sidebar.left .pat-toolbar .toggle-sidebar-size {
  display: inline-block;
}
.application-body.application-code:has(kik-code-editor) > .kik-win-handle[data-edge="e"] {
  transform: translateX(100%);
}
#app-space .application-body.application-code.state-on > .document-body:has(kik-code-editor) {
  overflow: hidden;
  padding-bottom: 0;
  padding-block-end: 0;
}
.application-body.application-code .kik-code-proposal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--pat-well-border-colour, rgba(0, 0, 0, 0.1));
  border-radius: var(--border-radii-medium, var(--border-radii));
}
.application-body.application-code .kik-code-proposal.is-discarded {
  opacity: 0.6;
}
.application-body.application-code .kik-code-proposal-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  margin: 0;
}
.application-body.application-code .kik-code-proposal-head svg.kik-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}
.application-body.application-code .kik-code-proposal-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.application-body.application-code .kik-code-proposal-stats {
  flex: none;
  font-size: 0.85em;
}
.application-body.application-code .kik-code-proposal-stats ins {
  color: var(--colour-success, #16a34a);
  text-decoration: none;
}
.application-body.application-code .kik-code-proposal-stats del {
  color: var(--colour-danger, #dc2626);
  text-decoration: none;
}
.application-body.application-code .kik-code-proposal-message,
.application-body.application-code .kik-code-proposal-note {
  margin: 0;
}
.application-body.application-code .kik-code-proposal-note {
  font-size: 0.9em;
  opacity: 0.8;
}
.application-body.application-code .kik-code-diff {
  max-height: 60vh;
  overflow: auto;
  margin: 0.6rem 0 0;
  padding: 0.5rem 0;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre;
}
.application-body.application-code .kik-code-diff > span {
  display: block;
  padding: 0 0.75rem;
}
.application-body.application-code .kik-code-diff .kik-diff-add {
  background: color-mix(in srgb, var(--colour-success, #16a34a) 14%, transparent);
}
.application-body.application-code .kik-code-diff .kik-diff-del {
  background: color-mix(in srgb, var(--colour-danger, #dc2626) 14%, transparent);
}
.application-body.application-code .kik-code-diff .kik-diff-hunk {
  opacity: 0.6;
}
.application-body.application-code .code-copy-state {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25em 1em;
  margin: 0 0 0.75em;
}
.application-body.application-code .code-copy-state dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.application-body.application-code .code-copy-sync {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 0.5em;
}
.application-body.application-code .code-copy-sync form {
  margin: 0;
}
.application-body.application-code .code-copy-heading {
  margin: 1em 0 0.35em;
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.application-body.application-code .code-copy-progress {
  margin: 0.5em 0;
  max-height: 8em;
  overflow: auto;
  font-size: 0.8em;
  white-space: pre-wrap;
}
.application-body.application-code .code-changes,
.application-body.application-code .code-log {
  list-style: none;
  margin: 0 0 0.75em;
  padding: 0;
}
.application-body.application-code .code-change {
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.application-body.application-code .code-change .code-change-label {
  display: flex;
  flex: 1;
  gap: 0.5em;
  min-width: 0;
  align-items: baseline;
}
.application-body.application-code .code-change .code-node-name {
  overflow-wrap: anywhere;
}
.application-body.application-code .code-change .code-change-code {
  flex: none;
  width: 1.2em;
  text-align: center;
  font-family: var(--kik-font-mono, monospace);
  font-weight: 600;
}
.application-body.application-code .code-change.code-change-deleted .code-node-name {
  text-decoration: line-through;
}
.application-body.application-code .code-log-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  padding: 0.15em 0;
}
.application-body.application-code .code-log-entry .code-log-subject {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.application-body.application-code .code-log-entry .code-log-who {
  opacity: 0.6;
}
.application-body.application-code .code-copy-foot {
  margin-top: 1em;
}
.application-body.application-code .code-versioning-now {
  display: inline-block;
  max-width: 14em;
  margin-inline-start: 0.4em;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  opacity: 0.7;
}
.application-body.application-code .code-versioning-now:empty {
  display: none;
}
.application-body.application-code .code-versioning-dirty {
  margin-inline-start: 0.15em;
}
.application-body.application-code .code-unpushed .code-log-entry .code-log-who {
  flex-basis: 100%;
}
.application-body.application-code .code-stash {
  flex-wrap: nowrap;
  align-items: center;
}
.application-body.application-code .code-stash .code-stash-form {
  margin: 0;
  flex: none;
}
.application-body.application-code .code-diff {
  margin: 0;
  padding: 0.5em 0;
  overflow: auto;
  font-family: var(--kik-font-mono, monospace);
  font-size: 0.85em;
  line-height: 1.45;
  white-space: pre;
}
.application-body.application-code .code-diff-line {
  display: block;
  min-height: 1.45em;
  padding: 0 1em;
}
.application-body.application-code .code-diff-line.code-diff-add {
  background: rgb(40 160 70 / 0.18);
}
.application-body.application-code .code-diff-line.code-diff-del {
  background: rgb(210 60 60 / 0.18);
}
.application-body.application-code .code-diff-line.code-diff-hunk {
  background: rgb(80 120 200 / 0.14);
  opacity: 0.85;
}
.application-body.application-code .code-diff-line.code-diff-meta {
  opacity: 0.6;
}
.application-body.application-code .code-claude {
  --code-claude-line: color-mix(in srgb, currentColor 16%, transparent);
  --code-claude-tint: color-mix(in srgb, currentColor 5%, transparent);
  --code-claude-ok: var(--colour-success, var(--success, #16a34a));
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.application-body.application-code .code-claude.injecting .code-claude-connecting {
  display: flex;
}
.application-body.application-code .code-claude.injecting .code-claude-code-form,
.application-body.application-code .code-claude.injecting .code-claude-start .pat-button-bar {
  opacity: 0.45;
  pointer-events: none;
}
.application-body.application-code .code-claude > .pat-message {
  margin: 0;
}
.application-body.application-code .code-claude form {
  margin: 0;
}
.application-body.application-code .code-claude-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--colour-accent, currentColor) 16%, transparent);
  color: var(--colour-accent, currentColor);
}
.application-body.application-code .code-claude-mark svg.kik-icon {
  width: 1.35rem;
  height: 1.35rem;
}
.application-body.application-code .code-claude-hero {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.application-body.application-code .code-claude-hero.is-connected .code-claude-mark {
  background: color-mix(in srgb, var(--code-claude-ok) 18%, transparent);
  color: var(--code-claude-ok);
}
.application-body.application-code .code-claude-hero-body {
  min-width: 0;
}
.application-body.application-code .code-claude-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}
.application-body.application-code .code-claude-lede {
  margin: 0.2rem 0 0;
  opacity: 0.8;
}
.application-body.application-code .code-claude-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  counter-reset: code-claude-step;
}
.application-body.application-code .code-claude-step {
  counter-increment: code-claude-step;
  display: flex;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--code-claude-line);
  border-radius: var(--border-radii-medium, var(--border-radii, 0.5rem));
  transition: opacity 0.2s ease;
}
.application-body.application-code .code-claude-step p {
  margin: 0.2rem 0 0;
}
.application-body.application-code .code-claude-step.is-current {
  border-color: var(--colour-accent, currentColor);
  background: color-mix(in srgb, var(--colour-accent, currentColor) 7%, transparent);
}
.application-body.application-code .code-claude-step.is-next {
  background: var(--code-claude-tint);
}
.application-body.application-code .code-claude-step.is-later {
  opacity: 0.55;
  border-style: dashed;
}
.application-body.application-code .code-claude-step.is-done {
  opacity: 0.8;
}
.application-body.application-code .code-claude-step.is-done .code-claude-step-mark {
  background: var(--code-claude-ok);
  border-color: var(--code-claude-ok);
  color: var(--white, #fff);
  font-size: 0;
}
.application-body.application-code .code-claude-step.is-done .code-claude-step-mark::after {
  content: "";
  width: 0.3rem;
  height: 0.6rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.application-body.application-code .code-claude-step-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0.9;
}
.application-body.application-code .code-claude-step-mark::before {
  content: counter(code-claude-step);
}
.is-current > .application-body.application-code .code-claude-step-mark {
  background: var(--colour-accent, currentColor);
  border-color: var(--colour-accent, currentColor);
  color: var(--colour-accent-text, var(--white, #fff));
  opacity: 1;
}
.application-body.application-code .code-claude-step-body {
  flex: 1;
  min-width: 0;
}
.application-body.application-code .code-claude-step-title {
  margin: 0.1rem 0 0;
  font-size: 1rem;
}
.application-body.application-code .code-claude-actions {
  margin-top: 0.6rem;
}
.application-body.application-code .code-claude-open {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  font-size: 1.05rem;
  padding-block: 0.65rem;
}
.application-body.application-code .code-claude-code-form {
  margin-top: 0.9rem;
}
.application-body.application-code .code-claude-code-form input[type="text"] {
  width: 100%;
  font-family: var(--kik-font-mono, monospace);
}
.application-body.application-code .code-claude-code-form .pat-button-bar {
  margin-top: 0.4rem;
}
.application-body.application-code .code-claude-connecting {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 0;
  font-weight: 600;
}
.application-body.application-code .code-claude-connecting::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: conic-gradient(
                var(--colour-accent, currentColor) 0deg,
                transparent 270deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: code-claude-spin 0.9s linear infinite;
}
@keyframes code-claude-spin {
 to { transform: rotate(360deg); } }
.application-body.application-code .code-claude-note {
  margin: 0;
  font-size: 0.9em;
  opacity: 0.8;
}
.application-body.application-code .code-claude-link {
  all: unset;
  box-sizing: border-box;
  text-decoration: underline;
  color: var(--colour-accent, inherit);
}
.application-body.application-code .code-claude-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (max-width: 480px) {
.application-body.application-code .code-claude-step {
  padding: 0.7rem;
  gap: 0.6rem;
}
}
@media (max-width: 480px) {
.application-body.application-code .code-claude-open {
  display: flex;
  width: 100%;
  justify-content: center;
}
}
.application-body.application-code .kik-code-action.is-connect {
  border-color: color-mix(in srgb, var(--colour-accent, currentColor) 45%, transparent);
}
.application-body.application-code .kik-code-action.is-connect.is-connected {
  border-color: var(--pat-well-border-colour, rgba(0, 0, 0, 0.1));
}