.change-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.62);
}

.change-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(760px, 100%);
  max-height: min(78dvh, 760px);
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border: 1px solid #343841;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: #202124;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.48);
}

.change-sheet-handle { width: 48px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: #c7cbd3; }
.change-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid #343841; }
.change-sheet > header strong { font-size: 18px; }
.change-sheet-close { width: 48px; min-width: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #f2f2f2; font-size: 28px; }
.change-sheet-state { margin: 16px 0; color: #aeb4be; }
.change-sheet-state.error { color: #ffb5ba; }
.change-sheet-diffs { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.change-sheet-diff { padding: 4px 0; border-bottom: 1px solid #343841; }
.change-sheet-diff[open] { padding-bottom: 10px; }
.change-sheet-diff > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 0; cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; }
.change-sheet-diff > summary::-webkit-details-marker { display: none; }
.change-sheet-diff > summary::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid #aeb4be; border-bottom: 2px solid #aeb4be; transform: rotate(-45deg); transition: transform .16s ease; }
.change-sheet-diff[open] > summary::before { transform: rotate(45deg); }
.change-file-name { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; white-space: nowrap; }
.change-file-directory { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; color: #d7dbe3; }
.change-file-basename { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.change-file-extension { flex: 0 0 auto; }
.change-file-stats { margin-left: auto; display: inline-flex; flex: 0 0 auto; gap: 8px; font-variant-numeric: tabular-nums; }
.change-file-additions { color: #4ade80; }
.change-file-deletions { color: #fb7185; }
.change-sheet-diff pre { width: 100%; max-width: 100%; margin: 0; padding: 8px 0; overflow-x: hidden; background: #111317; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

html[data-theme="light"] .app-shell .diff-fold { background-color: #f6f8fa !important; color: #57606a !important; }

@media(max-width:640px) {
  .change-sheet { width: 100%; max-height: 82dvh; padding-inline: 10px; border-radius: 24px 24px 0 0; }
  .change-sheet-close { min-height: 48px; }
}

.change-sheet-backdrop { animation: change-sheet-backdrop-enter var(--motion-sheet) ease both; }
.change-sheet { animation: change-sheet-enter var(--motion-sheet) var(--motion-ease-out) both; }
.change-sheet-backdrop--exit { animation: change-sheet-backdrop-exit var(--motion-sheet) ease both; }
.change-sheet--exit { animation: change-sheet-exit var(--motion-sheet) var(--motion-ease) both; }
@keyframes change-sheet-enter { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes change-sheet-exit { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 100%); } }
@keyframes change-sheet-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes change-sheet-backdrop-exit { from { opacity: 1; } to { opacity: 0; } }
