.playground-view {
  min-height: calc(100dvh - 140px);
}

.playground-shell {
  height: min(760px, calc(100dvh - 190px));
  min-height: 560px;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
}

.playground-shell > aside {
  overflow: auto;
}

.playground-shell > aside select {
  height: auto;
  min-height: 48px;
  max-height: 320px;
  padding: 12px;
  line-height: 1.35;
}

.playground-shell > aside select optgroup {
  color: #9b8cff;
  background: #0f1218;
  font: 600 11px/1.4 "IBM Plex Mono", monospace;
}

.playground-shell > aside select option {
  color: #f6f8fc;
  background: #12161d;
  padding: 9px 10px;
  font: 14px/1.4 "Instrument Sans", "Segoe UI", sans-serif;
}

.playground-model-info {
  background: linear-gradient(145deg, #151823, #10131a);
  border-color: #ffffff24;
  position: relative;
  overflow: hidden;
}

.playground-model-info::after {
  content: "";
  background: linear-gradient(90deg, #20d59a, #8b75f4);
  height: 2px;
  position: absolute;
  inset: auto 0 0;
}

.playground-model-info b {
  font-size: 18px;
}

.playground-model-info span {
  color: #aef4dc;
  word-break: break-word;
}

.playground-model-info span::before {
  content: "Списание ";
  color: #7a8492;
}

.playground-model-info small {
  max-width: 210px;
}

.playground-shell > main {
  min-height: 0;
  height: 100%;
}

.chat-flow {
  min-height: 0;
  max-height: none;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.chat-message {
  overflow-wrap: anywhere;
}

.chat-message > div small {
  text-transform: none;
  color: #7bdcb8;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message p {
  white-space: pre-wrap;
}

.playground-media {
  width: min(640px, 100%);
  max-height: min(460px, 48dvh);
}

.chat-composer textarea {
  resize: none;
  min-height: 64px;
  max-height: 132px;
}

@media (width <= 860px) {
  .playground-shell {
    height: calc(100dvh - 128px);
    min-height: 620px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .playground-shell > aside {
    max-height: 260px;
  }

  .chat-flow {
    padding: 16px 12px;
  }

  .chat-message {
    max-width: 94%;
  }

  .chat-message > div {
    align-items: flex-start;
  }

  .chat-message > div small {
    max-width: 190px;
  }
}

@media (width <= 520px) {
  .playground-shell {
    height: calc(100dvh - 110px);
    min-height: 600px;
  }

  .playground-shell > aside {
    padding: 16px;
  }

  .chat-composer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 10px;
  }

  .chat-composer.no-attach {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .chat-composer textarea {
    min-height: 58px;
    padding: 13px;
  }
}