/*
 * Чат «Задать вопросы по тексту» (?dialog=<код чата>): карточка записи
 * сверху, сообщения, поле ввода внизу. Обычный CSS рядом с собранным
 * style.css: цвета — токены вебаппа (scss/_design-system.scss), тёмная
 * тема — через .dark-theme. Высота — стабильная высота вебаппа Telegram:
 * с клавиатурой экран сжимается, поле ввода остаётся над ней.
 */

.page--qa {
  --qa-surface: var(--color-tile-background);
  --qa-text: var(--color-text);
  --qa-muted: rgba(0, 50, 75, 0.6);
  --qa-user: #0091da;
  --qa-user-text: var(--color-white);
  --qa-input-bg: var(--color-white);
  --qa-input-text: var(--color-text);
  --qa-chip-bg: rgba(var(--color-accent-2-rgba), 0.12);
  --qa-chip-text: #0077b8;
  --qa-link: #0077b8;
  --qa-stroke: rgba(var(--color-accent-2-rgba), 0.25);
  /* плитки полупрозрачные; шторка лежит поверх чата — тот же цвет, но плотный */
  --qa-sheet-bg: #e6f7ff;
  --qa-composer-bg: rgba(var(--color-white-rgba), 0.6);
  --qa-dot: var(--color-accent-2);
  --qa-bad: #c0392b;
  --qa-bad-bg: #ffe9e6;
  --qa-notice-bg: rgba(0, 50, 75, 0.35);
}

.dark-theme .page--qa {
  --qa-muted: #a5a7ac;
  --qa-user: var(--color-accent-2);
  --qa-input-bg: #2c3341;
  --qa-input-text: var(--color-white);
  --qa-chip-bg: rgba(var(--color-accent-2-rgba), 0.18);
  --qa-chip-text: #8fd6ff;
  --qa-link: #8fd6ff;
  --qa-stroke: #3a4250;
  --qa-sheet-bg: #1e2430;
  --qa-composer-bg: rgba(17, 21, 30, 0.8);
  --qa-bad: #ff6b6b;
  --qa-bad-bg: #3a1f1c;
  --qa-notice-bg: rgba(0, 0, 0, 0.4);
}

/* у карточек и формы display: flex — атрибут hidden без этого не сработает */
.page--qa [hidden] {
  display: none !important;
}

.page--qa.page--show {
  display: flex;
  flex-direction: column;
  block-size: var(--tg-viewport-stable-height, 100vh);
  /* у страниц без .page__header style.css добавляет отступ сверху — здесь
     свой заголовок с карточкой записи */
  padding-block-start: 0;
  overflow: hidden;
  /* страница не листается — место под полосу справа ей не нужно */
  scrollbar-gutter: auto;
}

.qa {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-block-size: 0;
}

/* --- запись ---------------------------------------------------------------- */

.qa__header {
  position: relative;
  z-index: 2;
  flex: none;
  padding-block: 0.75rem 0.25rem;
}

.qa__header .container {
  position: relative;
}

.qa__record {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  color: var(--qa-text);
  background: var(--qa-surface);
  border-radius: 1.25rem;
}

.qa__record-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.qa__record-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--color-white);
  background: var(--color-accent-2);
  border-radius: 50%;
}

.qa__record-icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.qa__record-info {
  min-inline-size: 0;
}

.qa__record-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.qa__record-meta {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--qa-muted);
}

.qa__record-preview {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--qa-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* открытая шторка продолжает карточку: нижние углы у неё, не у карточки */
.qa__record.is-open {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* --- шторка с текстом -------------------------------------------------------- */

.qa__sheet {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: var(--container-offset-x);
  z-index: 3;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  background: var(--qa-sheet-bg);
  border-block-start: 1px solid var(--qa-stroke);
  border-end-start-radius: 1.25rem;
  border-end-end-radius: 1.25rem;
  box-shadow: 0 0.75rem 1.75rem rgba(0, 30, 60, 0.25);
  opacity: 0;
  transform: translateY(-0.75rem);
  transition:
    transform var(--transition-duration) var(--transition-timing-f),
    opacity var(--transition-duration) var(--transition-timing-f),
    visibility 0s linear var(--transition-duration);
}

.qa__sheet.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

/* высотой по тексту, длинный — не выше трети экрана и листается внутри */
.qa__sheet-text {
  max-block-size: min(30vh, 16rem);
  padding: 0.625rem 1rem 0.25rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--qa-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

.qa__sheet-handle {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0.625rem;
  background: none;
  border: 0;
}

.qa__sheet-handle span {
  inline-size: 2.25rem;
  block-size: 0.25rem;
  background: var(--qa-stroke);
  border-radius: 999px;
}

.qa__record-toggle {
  align-self: flex-start;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--qa-link);
  background: none;
  border: 0;
}

/* --- сообщения ------------------------------------------------------------- */

.qa__body {
  flex: 1;
  min-block-size: 0;
  padding-block: 0.5rem 0.75rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* без видимой полосы, как в мессенджерах: на компьютере она отнимала
     ширину у ленты, и сообщения не совпадали с карточкой записи и полем
     ввода. Колесо, тачпад и палец листают как прежде */
  scrollbar-width: none;
}

.qa__body::-webkit-scrollbar {
  display: none;
}

.qa__messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.qa__msg {
  max-inline-size: 86%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  border-radius: 1.125rem;
  overflow-wrap: anywhere;
}

.qa__msg--user {
  align-self: flex-end;
  color: var(--qa-user-text);
  white-space: pre-wrap;
  background: var(--qa-user);
  border-end-end-radius: 0.375rem;
}

.qa__msg--assistant {
  align-self: flex-start;
  color: var(--qa-text);
  background: var(--qa-surface);
  border-end-start-radius: 0.375rem;
}

.qa__msg--assistant p,
.qa__msg--assistant ul {
  margin: 0;
}

.qa__msg--assistant ul {
  padding-inline-start: 1.125rem;
}

.qa__msg--assistant li + li {
  margin-block-start: 0.25rem;
}

.qa__msg--assistant p + p,
.qa__msg--assistant p + ul,
.qa__msg--assistant ul + p,
.qa__msg--assistant ul + ul {
  margin-block-start: 0.5rem;
}

.qa__msg--intro {
  max-inline-size: 100%;
}

/* «Скопировать» — справа внизу ответа */
.qa__msg-actions {
  display: flex;
  justify-content: flex-end;
  margin-block: 0.125rem -0.375rem;
  margin-inline-end: -0.5rem;
}

.qa__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  padding: 0;
  color: var(--qa-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  transition:
    color var(--transition-duration) var(--transition-timing-f),
    background-color var(--transition-duration) var(--transition-timing-f);
}

.qa__copy svg {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
}

.qa__copy:active {
  background: var(--qa-chip-bg);
}

.qa__copy.is-done {
  color: var(--qa-link);
}

/* ответ ещё пишется — мигающий курсор в конце текста */
.qa__msg.is-streaming .qa__msg-text > p:last-child::after,
.qa__msg.is-streaming .qa__msg-text > ul:last-child > li:last-child::after {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 1em;
  margin-inline-start: 0.125rem;
  vertical-align: -0.125em;
  content: "";
  background: var(--qa-dot);
  border-radius: 0.125rem;
  animation: qa-caret 0.9s steps(2, start) infinite;
}

@keyframes qa-caret {
  to {
    visibility: hidden;
  }
}

.qa__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-block-start: 0.625rem;
}

.qa__chip {
  padding: 0.4375rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--qa-chip-text);
  text-align: start;
  background: var(--qa-chip-bg);
  border: 0;
  border-radius: 1rem;
}

.qa__chip:disabled {
  opacity: 0.5;
}

.qa__typing {
  display: inline-flex;
  gap: 0.25rem;
  padding-block: 0.25rem;
}

.qa__typing i {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background: var(--qa-dot);
  border-radius: 50%;
  animation: qa-bounce 1.2s infinite ease-in-out;
}

.qa__typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.qa__typing i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes qa-bounce {
  0%,
  80%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-0.25rem);
  }
}

.qa__msg--error {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  color: var(--qa-bad);
  background: var(--qa-bad-bg);
}

.qa__retry {
  padding: 0.25rem 0.625rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-white);
  background: var(--qa-bad);
  border: 0;
  border-radius: 1rem;
}

.qa__notice {
  align-self: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: var(--color-white);
  text-align: center;
  background: var(--qa-notice-bg);
  border-radius: 1rem;
}

/* --- состояние вместо чата --------------------------------------------------- */

.qa__state {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  padding: 1.125rem 1.25rem;
  margin-block-start: 1.5rem;
  color: var(--qa-text);
  text-align: center;
  background: var(--qa-surface);
  border-radius: 1.5rem;
}

.qa__state-text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

/* --- поле ввода -------------------------------------------------------------- */

.qa__composer {
  flex: none;
  padding-block: 0.625rem;
  padding-block-end: calc(0.625rem + env(safe-area-inset-bottom));
  background: var(--qa-composer-bg);
}

.qa__form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.qa__input {
  flex: 1;
  min-block-size: 2.75rem;
  max-block-size: 7.5rem;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--qa-input-text);
  background: var(--qa-input-bg);
  border: 0;
  border-radius: 1.375rem;
  outline: none;
  resize: none;
}

.qa__input::placeholder {
  color: var(--qa-muted);
}

.qa__input:disabled {
  opacity: 0.7;
}

.qa__send {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--color-white);
  background: var(--color-accent-2);
  border: 0;
  border-radius: 50%;
  transition: opacity var(--transition-duration) var(--transition-timing-f);
}

.qa__send svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.qa__send:disabled {
  opacity: 0.5;
}

.qa__closed {
  padding: 0.75rem 1rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--qa-text);
  text-align: center;
  background: var(--qa-surface);
  border-radius: 1.375rem;
}