/* T035: files of an order and a task in the panel — tiles you can recognise by their picture, the drop zone,
   upload progress. Straight edges as the whole «Кузня» panel; colour always with a word or a sign. */
.files-block { position: relative; margin: 0 0 var(--sp-6); }
.panel .files-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 20px; }
.files-count { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 18px; font-weight: 600; }
.files-count[hidden] { display: none; }

/* Tiles: «узнать» a file needs a real picture, so the thumbnail is the largest part of the tile. */
.file-grid { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.file-grid:empty { display: none; }
.file-tile { display: flex; flex-direction: column; min-width: 0; background: var(--surface-1); border: 1px solid var(--border); padding: var(--sp-2) var(--sp-2) var(--sp-3); gap: 4px; }
.file-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-subtle, var(--border)); color: var(--text-2); text-decoration: none; margin-bottom: var(--sp-2); }
a.file-thumb { cursor: zoom-in; transition: border-color 160ms var(--ease-out, ease-out); }
a.file-thumb:hover { border-color: var(--border-strong); }
.file-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.file-tile--image .file-thumb img, .file-tile--video .file-thumb img { object-fit: cover; background: transparent; }
.file-glyph { display: grid; justify-items: center; gap: 6px; }
.panel .file-glyph-icon { width: 52px; height: 52px; stroke-width: 1.4; }
.file-glyph-label { font-family: var(--font-mono); font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--text-1); }
.file-flag { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; background: var(--surface-inverse, #16181b); color: var(--text-inverse, #fff); font-size: 18px; line-height: 1.4; }
.panel .file-flag-icon { width: 18px; height: 18px; }
.panel .file-name { margin: 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.panel .file-meta { margin: 0; color: var(--text-2); font-size: 18px; }
.panel .file-note { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 0; padding: 6px 8px; background: var(--warning-bg); color: var(--warning-fg); font-size: 18px; line-height: 1.35; }
.panel .file-note svg { width: 20px; height: 20px; margin-top: 2px; }
.file-actions { display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }
.file-actions[hidden] { display: none; }
.panel .file-actions .btn { min-height: 52px; padding-inline: var(--sp-3); }
.file-actions .file-open { flex: 1 1 auto; }
.file-actions form { display: contents; }
.panel .file-actions .file-remove { flex: 0 0 52px; width: 52px; padding: 0; color: var(--danger-fg); }
.panel .file-actions .file-remove:hover { background: var(--danger-bg); border-color: var(--danger-border, var(--danger-fg)); }
.panel .file-remove svg { width: 24px; height: 24px; }
.file-actions .file-retry, .file-actions .file-dismiss { flex: 1 1 0; }

/* A file on its way: «У черзі» → «Завантажуємо… 47 %» → «Обробляємо…»; an error says what to do. */
.file-thumb--pending { color: var(--text-3, var(--text-2)); }
.panel .file-thumb--pending svg { width: 44px; height: 44px; }
.file-progress { height: 6px; background: var(--fill-track); overflow: hidden; margin-top: 4px; }
.file-progress i { display: block; height: 100%; background: var(--chart-work, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 160ms linear; }
.file-tile--pending .file-meta { color: var(--text-1); }
.file-tile.is-processing .file-progress i { transform: none; animation: file-wait 1.1s ease-in-out infinite; transform-origin: center; }
@keyframes file-wait { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: .35; } }
.file-tile.is-error { border-color: var(--danger-fg); }
.file-tile.is-error .file-progress { display: none; }
.panel .file-tile.is-error .file-meta { color: var(--danger-fg); font-weight: 600; }

/* The drop zone. Empty order: a calm area with one action; with files: a slim bar under them. */
.dropzone { position: relative; margin: 0 0 var(--sp-3); }
.dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.panel .dropzone-body { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon title pick" "icon hint pick"; align-items: center; gap: 2px var(--sp-4); margin: 0; padding: var(--sp-4) var(--sp-5); border: 2px dashed var(--border-strong); background: var(--surface-1); cursor: pointer; font-weight: 400; transition: border-color 160ms ease-out, background-color 160ms ease-out; }
.dropzone--empty .dropzone-body { padding-block: var(--sp-8); }
.dropzone-body:hover { border-color: var(--accent); }
.dropzone:focus-within .dropzone-body { outline: var(--focus-w, 3px) solid var(--focus-ring); outline-offset: 2px; }
.panel .dropzone-icon { grid-area: icon; width: 40px; height: 40px; color: var(--text-2); }
.dropzone-title { grid-area: title; font-size: 20px; font-weight: 600; color: var(--text-1); }
.dropzone-hint { grid-area: hint; color: var(--text-2); font-size: 18px; }
.dropzone-pick { grid-area: pick; pointer-events: none; }
.dz-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .dz-touch { display: inline; } .dz-pointer { display: none; } }
.dropzone-submit { margin-top: var(--sp-3); }
.dropzone.is-enhanced .dropzone-submit { display: none; }
.dropzone-drop { display: none; }
/* Files are being dragged over the page: the zone is where they go — «Перетягніть сюди» over all of it. */
body.is-file-drag .dropzone.is-enhanced .dropzone-drop { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin: 0; border: 3px dashed var(--accent); background: var(--accent-bg); color: var(--accent-fg); font-size: 24px; font-weight: 600; pointer-events: none; }
body.is-file-drag .dropzone.is-enhanced { min-height: 120px; }
body.is-file-drag .dropzone.is-over .dropzone-drop { border-style: solid; }
.panel .dropzone-drop svg { width: 36px; height: 36px; }
@media (max-width: 699px) {
  /* Phone: one file per row — the picture at the left, the name beside it, the actions under them. */
  .file-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .file-tile { display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb meta" "thumb note" "actions actions"; align-content: start; column-gap: var(--sp-3); }
  .file-thumb { grid-area: thumb; width: 136px; margin: 0; align-self: start; }
  .panel .file-name { grid-area: name; }
  .panel .file-meta { grid-area: meta; }
  .panel .file-note { grid-area: note; }
  .file-actions { grid-area: actions; }
  .file-tile--pending .file-progress { grid-column: 2; }
  .file-flag { left: 4px; bottom: 4px; padding: 0 6px; }
  .panel .dropzone-body { grid-template-columns: auto 1fr; grid-template-areas: "icon title" "hint hint" "pick pick"; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4); }
  .dropzone--empty .dropzone-body { padding-block: var(--sp-5); }
  .dropzone-pick { width: 100%; }
}

.link-add { margin: 0 0 var(--sp-2); }
.panel .link-open svg { width: 22px; height: 22px; }
.link-form { margin-top: var(--sp-3); max-width: 640px; }
.link-form[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .file-progress i, .dropzone-body, a.file-thumb { transition: none; }
  .file-tile.is-processing .file-progress i { animation: none; }
}