/* ─────────────────────────────────────────────────────────────────
   tw-sources-uploader: стили для блока «Использовать свои материалы»
   Используется на /app/textworks и на textworks-лендингах (доклад и т.п.).
   Отдельный файл, чтобы не дублировать ~60 строк CSS на каждой странице.
   ───────────────────────────────────────────────────────────────── */

/* Свитч (визуальный toggle на основе <label>+<input type="checkbox">) */
.tw-switch[data-on="true"] {
  background-color: #6366f1; /* indigo-500 */
}
.tw-switch[data-on="true"] .tw-switch-thumb {
  transform: translateX(20px);
}

/* Карточка одного файла в списке источников */
.tw-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
}
.tw-source-row[data-status="error"] {
  border-color: #fecaca;
  background: #fef2f2;
}
.tw-source-row[data-status="ready"] {
  border-color: #c7d2fe;
}
.tw-source-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-source-meta {
  color: #6b7280;
  font-size: 12px;
  white-space: nowrap;
}
.tw-source-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #c7d2fe;
  border-top-color: #4f46e5;
  border-radius: 9999px;
  animation: tw-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes tw-spin {
  to { transform: rotate(360deg); }
}
.tw-source-remove {
  color: #9ca3af;
  padding: 2px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.tw-source-remove:hover {
  color: #ef4444;
}

/* Подсветка drop-зоны при перетаскивании файла */
#tw-sources-dropzone.tw-dragover {
  border-color: #4f46e5 !important;
  background: rgba(99, 102, 241, 0.08) !important;
}

/* ─── Хинт-иконка «?» с тултипом ──────────────────────────────────
   Маленький круглый «?» рядом с лейблом. Тултип показывается:
     • на десктопе — при hover на иконке;
     • на мобилке  — при tap (focus, благодаря tabindex="0").
   Реализован через CSS pseudo-element `::after`, без JS.
   ───────────────────────────────────────────────────────────────── */
.tw-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #ede9fe;             /* purple-100 */
  color: #7c3aed;                  /* purple-600 */
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  position: relative;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.tw-hint:focus {
  outline: none;
}
.tw-hint:focus-visible {
  /* Доступность: видимая обводка только при tab-навигации, без неё
     focus-через-клик не подсвечивается (что нам и нужно для hint-кнопки). */
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}
.tw-hint::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  background: #1f2937;             /* gray-800 */
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  border-radius: 8px;
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tw-hint:hover::after,
.tw-hint:focus::after {
  opacity: 1;
}
/* На узких экранах тултип не должен вылезать за края — суживаем. */
@media (max-width: 480px) {
  .tw-hint::after {
    max-width: 220px;
  }
}

/* ─── Адаптация под маленькие экраны (≤480px) ─────────────────────
   На узких экранах (например, iPhone SE: 320px viewport, контейнер
   лендинга оставляет ~256px после своего padding) карточка файла
   `[иконка][имя][размер][мета][×]` в одну строку слишком сильно
   ужимает имя — его не видно за многоточием.
   Переходим на двухстрочный layout: верх — иконка + имя + кнопка ×,
   низ — размер и мета (статус / симв. / OCR / текст ошибки).
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tw-source-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  /* Имя файла растягивается до края, оставляя место только для × */
  .tw-source-name {
    flex: 1 1 auto;
  }
  /* Размер и мета — отдельная строка под именем. Чтобы они оказались
     именно ПОД именем, ставим им принудительный перенос строки. */
  .tw-source-row .tw-source-meta:first-of-type {
    flex-basis: 100%;
    margin-top: 2px;
  }
  .tw-source-meta {
    white-space: normal; /* длинные тексты ошибок переносятся, а не вылезают */
  }
}

/* На очень узких экранах подсказка про лимиты в dropzone выглядит
   приятнее с принудительным переносом по разделителю «·». Это
   небольшой косметический trick — на десктопе ничего не меняется. */
@media (max-width: 380px) {
  #tw-sources-dropzone .text-xs {
    line-height: 1.4;
  }
}