.application-shell {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.sheet-workspace {
  position: relative;
  min-width: 0;
  container: sheet-workspace / inline-size;
}

.sheet-workspace:has(.character-dock:is([data-history-active], [data-sheet-details-open])) {
  --character-dock-clearance:
    calc(
      (2 * var(--character-dock-control-size)) +
      (3 * var(--character-dock-inset)) +
      env(safe-area-inset-bottom, 0px)
    );
}

.sheet-workspace:has(.character-dock[data-history-open]) {
  --character-dock-clearance:
    calc(
      80dvh + var(--character-dock-inset) +
      env(safe-area-inset-bottom, 0px)
    );
}

.character-dock {
  --character-dock-bottom-offset:
    max(var(--character-dock-inset), env(safe-area-inset-bottom, 0px));
  position: fixed;
  z-index: 45;
  right: max(var(--character-dock-inset), env(safe-area-inset-right, 0px));
  bottom: var(--character-dock-bottom-offset);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: max-content;
  max-width: calc(100vw - (2 * var(--character-dock-inset)));
  max-height: calc(80dvh - var(--character-dock-bottom-offset));
  border: 1px solid var(--character-dock-control-border);
  border-radius: var(--character-dock-radius);
  color: var(--inverse-text);
  background: var(--character-dock-background);
  box-shadow: 0 0.3rem 1rem var(--chrome-shadow);
  interpolate-size: allow-keywords;
  transform-origin: right bottom;
  transition: width var(--motion-fast) ease-out;
}

.character-dock:is([data-history-active], [data-sheet-details-open]) {
  grid-template-columns: minmax(0, 1fr);
}

.character-dock:is([data-history-open], [data-sheet-details-open]) {
  width: min(
    var(--sheet-details-max-width),
    calc(100vw - var(--library-width) - (2 * var(--character-dock-inset)))
  );
}

.application-shell:has(.trash-pane:not([hidden]))
.character-dock:is([data-history-open], [data-sheet-details-open]) {
  width: min(
    var(--sheet-details-max-width),
    calc(100vw - (2 * var(--library-width)) - (2 * var(--character-dock-inset)))
  );
}

.character-dock[data-history-active][data-sheet-details-open] {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.character-dock[data-history-active][data-sheet-details-open] .sheet-details-drawer {
  grid-row: 3;
}

.character-dock[data-history-active][data-sheet-details-open] .character-dock-base {
  grid-row: 4;
}

.character-dock > :is(
  .history-controls,
  .history-drawer,
  .sheet-details-drawer,
  .character-dock-base
) {
  grid-column: 1;
}

.character-dock-base,
.character-dock-actions,
.character-context,
.preview-controls,
.preview-action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.character-dock-base {
  grid-row: 3;
  justify-content: flex-end;
  padding: 0.35rem;
}

.character-dock-actions {
  flex-wrap: nowrap;
}

.character-dock button {
  display: inline-flex;
  min-width: var(--character-dock-control-size);
  min-height: var(--character-dock-control-size);
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 1px solid var(--character-dock-control-border);
  color: var(--inverse-text);
  background: var(--character-dock-control-background);
  cursor: pointer;

  &:hover:not(:disabled) {
    background: var(--character-dock-control-hover);
  }

  &:disabled {
    color: var(--disabled-text);
    cursor: not-allowed;
  }

  & svg {
    width: 1.25em;
    height: 1.25em;
  }
}

.character-dock :is(#open-history[aria-pressed="true"], #toggle-play-mode[aria-pressed="true"]) {
  color: var(--character-dock-background);
  border-color: var(--inverse-text);
  background: var(--inverse-text);
}

.character-context {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  display: none;
  width: max-content;
  max-width: min(38rem, calc(100vw - (2 * var(--character-dock-inset))));
  justify-content: flex-end;
  padding: 0.45rem;
  border: 1px solid var(--character-dock-control-border);
  border-radius: var(--character-dock-radius);
  background: var(--character-dock-background);
  box-shadow: 0 0.3rem 1rem var(--chrome-shadow);

  &:has(> :not([hidden])) {
    display: flex;
  }
}

.save-status,
.operation-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.save-status[data-state="error"],
.operation-status[data-state="error"] {
  position: static;
  width: auto;
  height: auto;
  padding-inline: 0.35rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  color: var(--character-dock-status);
  font-size: 0.85rem;
  white-space: nowrap;
}

.character-dock-base > .operation-status[data-state="error"] {
  max-width: min(24rem, 75vw);
  white-space: normal;
}

.character-sheet {
  display: grid;
  grid-template-columns: minmax(0, var(--page-width));
  justify-content: center;
  gap: var(--spread-gap);
  padding-block: var(--spread-gap) var(--character-dock-clearance);

  @media (max-width: 830px) {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
    padding-block: 1.125rem var(--character-dock-clearance);
  }
}

@container sheet-workspace (min-width: 1614px) {
  .character-sheet {
    grid-template-columns: repeat(2, var(--page-width));
  }
}

@media (max-width: 64rem), (pointer: coarse) {
  .sheet-workspace > .library-open {
    position: fixed;
    z-index: 45;
    top: max(var(--character-dock-inset), env(safe-area-inset-top, 0px));
    left: max(var(--character-dock-inset), env(safe-area-inset-left, 0px));
    width: var(--character-dock-control-size);
    height: var(--character-dock-control-size);
    padding: 0.5rem;
    border: 1px solid var(--character-dock-control-border);
    border-radius: 50%;
    place-items: center;
    color: var(--inverse-text);
    background: var(--character-dock-background);
    box-shadow: 0 0.3rem 1rem var(--chrome-shadow);
    cursor: pointer;

    & svg {
      width: 1.25em;
      height: 1.25em;
    }
  }

  .character-dock {
    right: 50%;
    max-width: calc(100vw - (2 * var(--character-dock-inset)));
    transform: translateX(50%);
    transform-origin: center bottom;
  }

  .application-shell .character-dock:is([data-history-open], [data-sheet-details-open]),
  .application-shell:has(.trash-pane:not([hidden]))
  .character-dock:is([data-history-open], [data-sheet-details-open]) {
    width: min(var(--sheet-details-max-width), calc(100vw - (2 * var(--character-dock-inset))));
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-dock,
  .history-drawer,
  .history-drawer[data-closed],
  .sheet-library,
  .trash-pane {
    transition: none;
  }
}