/* Компонент выбора файла «дроп-зона» — отдельный файл, как toggle.css.
   Клик или перетащивание файла открывает выбор; выбранное состояние —
   имя и размер файла со ссылкой «убрать файл». Цвета — переменные темы
   из app.css, поэтому работает в светлой и тёмной теме. */

.filepick {
  cursor: pointer;
  user-select: none;
}

.filepick input[type="file"] {
  display: none;
}

.filepick-empty,
.filepick-filled {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.filepick-filled {
  display: none;
}

.filepick.is-filled .filepick-empty {
  display: none;
}

.filepick.is-filled .filepick-filled {
  display: flex;
}

.filepick svg {
  flex-shrink: 0;
}

.fp-drop {
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.fp-drop:hover,
.fp-drop.is-drag {
  border-color: var(--brand);
  background: var(--surface-2);
}

.fp-drop.is-drag {
  box-shadow: 0 0 0 3px rgba(15, 106, 90, 0.15);
}

:root[data-theme="dark"] .fp-drop.is-drag {
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

.filepick-title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.filepick-title em {
  font-style: normal;
  color: var(--brand);
  text-decoration: underline;
}

.filepick-hint {
  font-size: 0.78rem;
  color: var(--muted);
}

.fp-drop.is-filled {
  border-style: solid;
  border-color: var(--aligned);
  background: rgba(31, 138, 76, 0.07);
}

.filepick-name {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  word-break: break-all;
}

.filepick-size {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Ссылка сброса видна только с выбранным файлом. */
.filepick .filepick-clear {
  display: none;
}

.filepick.is-filled .filepick-clear {
  display: inline-flex;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-family: var(--font);
  padding: 0.15rem 0.1rem;
  margin-top: 0.3rem;
  cursor: pointer;
  text-decoration: underline dotted transparent;
  text-underline-offset: 3px;
  transition: color 0.12s ease;
}

.filepick.is-filled .filepick-clear:hover {
  color: var(--danger);
  text-decoration-color: currentColor;
}