.description-modal {
  width: min(620px, calc(100% - 28px));
  max-height: min(88dvh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.description-modal h3 {
  padding-inline-end: 38px;
  font-size: clamp(18px, 4vw, 23px);
  overflow-wrap: anywhere;
}

.description-modal #modalDescription {
  position: relative;
  max-height: 7.8em;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  unicode-bidi: plaintext;
  text-align: start;
  font-size: clamp(12px, 2.6vw, 14px);
  line-height: 1.95;
}

.description-modal #modalDescription.is-collapsible:not(.expanded) {
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

.description-modal #modalDescription.expanded {
  max-height: min(42dvh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.description-more {
  display: block;
  width: max-content;
  margin: -5px auto 14px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #ede9ff;
  color: var(--primary);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.description-more[hidden] { display: none; }

.description-modal .copy-btn {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  box-shadow: 0 -8px 18px #fff;
}

.description-modal .copy-btn > span:first-child { font-size: 18px; }
.description-modal .copy-btn.copied { background: #21845e; }
body.dark .description-modal .copy-btn { box-shadow: 0 -8px 18px #201d2d; }

@media (max-width: 560px) {
  .description-modal {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    padding: 22px 16px 16px;
    border-radius: 18px;
  }

  .description-modal #modalDescription {
    padding: 15px;
  }

  .description-modal #modalDescription.expanded { max-height: 38dvh; }
}