/* Стили кнопки, статусов и спиннера */
.save-button {
  height:50px;
  width:322px;
  background:#20D999;
  font-size:14px;
  color:#000;
}
.save-status {
  font-size:10px;
  display:none;
}
.save-status .success {
  display:none;
  font-size:10px;
  color:#20D999;
}
.save-status .error {
  display:none;
  font-size:10px;
  color:#B277FC;
}

.loading-status, .error-status {
  font-size:10px;
}
.loading-status {
  display:none;
  color:#20D999;
}
.error-status {
  display:none;
  color:#B277FC;
}

.spinner {
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid #20D999;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin {
  to {transform: rotate(360deg);}
}
.js-diary-block {
  position: relative;
  border-width: 1px 0px 0px 0px;
  border-color: rgba(255,255,255,0.1);
  border-style: solid;
  
  /* Задаём фиксированную или максимальную высоту блока */
  max-height: 300px; /* подберите подходящее значение, например 400px */
  overflow-y: auto;
  padding: 10px; /* небольшой отступ для контента */
}

.js-diary-list {
  /* Ставим position:static или relative, чтобы список занимал всю доступную область */
  position: static;
  margin-bottom: 60px; /* оставляем место под кнопку */
  overflow-y: visible;
}

/* Кнопку делаем "липкой", чтобы она оставалась внизу при прокрутке */
.save-button.js-save-button {
  position: sticky;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  height:50px;
  width:322px;
  background:#20D999;
  font-size:14px;
  color:#000;
  margin-top:10px;
}