/* Docs & files */

.mini-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-file { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }

.mini-file__icon {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--muted);
}

.mini-file__icon--vault { color: var(--accent); }
.mini-file__name { max-width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 20px 16px;
  margin-top: 20px;
  padding: 4px;
  border-radius: var(--radius);
  transition: background-color 0.15s, outline-color 0.15s;
  outline: 2px dashed transparent;
}

.is-dropping { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: 4px; }
.is-uploading { opacity: 0.5; pointer-events: none; }

.file-tile { display: grid; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }

.file-tile__preview {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--accent);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.file-tile:hover .file-tile__preview { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.file-tile__preview img { width: 100%; height: 100%; object-fit: cover; }

.file-tile--document .file-tile__preview { place-items: start; padding: 14px 16px; background: var(--surface); }

.file-tile__page {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
}

.file-tile--vault .file-tile__preview { background: var(--accent-soft); border-color: transparent; }

.file-tile__ext {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font: 700 13px var(--font-mono);
  box-shadow: var(--shadow-sm);
}

.file-tile__ext--large { padding: 14px 22px; font-size: 22px; }

.file-tile__name { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.file-tile .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.upload-preview {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.upload-preview img, .upload-preview video { max-width: 100%; max-height: 70vh; border-radius: var(--radius-sm); }
.upload-preview audio { width: 100%; }
.upload-preview__pdf { width: 100%; height: 70vh; border: 0; border-radius: var(--radius-sm); background: #fff; }

.trix-content--document + * { margin-top: 0; }
trix-editor.trix-content--document { min-height: 360px; font-size: 16px; }