/* разделы с этими иконками грузятся отдельно, а карточка нужна в чате сразу */
:is(.file-card,.file-viewer) .ui-download { --icon: var(--ic-download, url('icons/download.svg')); }
:is(.file-card,.file-viewer) .ui-file { --icon: var(--ic-file, url('icons/file.svg')); }
:is(.file-card,.file-viewer) .ui-square-pen { --icon: var(--ic-square-pen, url('icons/square-pen.svg')); }
.file-viewer .ui-x { --icon: var(--ic-x, url('icons/x.svg')); }
.file-viewer .ui-heart { --icon: var(--ic-heart, url('icons/heart.svg')); }
.file-viewer .ui-plus { --icon: var(--ic-plus, url('icons/plus.svg')); }
.file-viewer .ui-minus { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M5 12h14'/></svg>"); }
.file-viewer .ui-chevron-left { --icon: var(--ic-chevron-down, url('icons/chevron-down.svg')); transform: rotate(90deg); }
.file-viewer .ui-chevron-right { --icon: var(--ic-chevron-down, url('icons/chevron-down.svg')); transform: rotate(-90deg); }

/* карточка файла в чате */
.message-file-group.file-card { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 22px; width: min(100%,440px); margin: 12px 0 2px; padding: 14px 16px 14px 14px; border-radius: 20px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.message-file-group.file-card + .message-file-group.file-card { margin-top: 8px; }
.project-message-files .file-card { flex: 0 0 100%; margin-top: 4px; }
.file-card-pile { --file-ratio: 1.778; --file-w: 124px; position: relative; display: block; width: calc(var(--file-w) + 22px); height: calc(var(--file-w) / var(--file-ratio) + 22px); transition: scale .18s var(--ease); }
.file-card-pile.is-doc { --file-ratio: .707; --file-w: 84px; }
.file-card-pile.is-table { --file-ratio: 1.25; --file-w: 112px; }
.file-card-tile { position: absolute; top: 0; left: 0; display: block; width: var(--file-w); height: calc(var(--file-w) / var(--file-ratio)); overflow: hidden; border-radius: 9px; background: color-mix(in srgb,var(--text) 8%,var(--field)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent),0 3px 10px #0003; transform-origin: 50% 60%; transition: transform .5s var(--ease); }
.file-card-pile.is-doc .file-card-tile { border-radius: 6px; }
.file-card-tile[data-pose="0"] { z-index: 3; }
.file-card-tile[data-pose="1"] { z-index: 2; }
.file-card-tile[data-pose="2"] { z-index: 1; }
.file-card-tile:not(.is-loading):has(img), .is-table .file-card-tile, .is-doc .file-card-tile:not(.is-loading) { background: #fff; }
.file-card-pile.is-ready .file-card-tile[data-pose="1"] { transform: translate(11px,10px) rotate(3deg) scale(.97); }
.file-card-pile.is-ready .file-card-tile[data-pose="2"] { transform: translate(21px,18px) rotate(6.5deg) scale(.93); }
.file-card-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; animation: fileCardIn .28s ease both; }
.file-card-tile.is-loading::after { content: ''; position: absolute; inset: 0; animation: skeletonPulse 1s ease-in-out infinite alternate; background: color-mix(in srgb,var(--text) 10%,transparent); }
@keyframes fileCardIn { from { opacity: 0; } to { opacity: 1; } }
.file-mini-table { display: block; color: #222; font-size: 6px; line-height: 1.5; }
.file-mini-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); border-bottom: .5px solid #ddd; }
.file-mini-row:first-child { background: #eee; font-weight: 700; }
.file-mini-row span { overflow: hidden; padding: 1.5px 3px; white-space: nowrap; text-overflow: clip; border-right: .5px solid #ddd; }
.file-mini-text { margin: 0; padding: 7px; overflow: hidden; color: #333; font: 5px/1.45 ui-monospace,Menlo,monospace; white-space: pre-wrap; word-break: break-word; }
.file-card-blank { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--muted); background: color-mix(in srgb,var(--text) 6%,var(--field)); }
.file-card-blank em { font-size: 10px; font-style: normal; font-weight: 650; letter-spacing: .03em; }
.file-card-info { display: grid; justify-items: start; min-width: 0; }
.file-card-title { display: -webkit-box; max-width: 100%; padding: 0; overflow: hidden; border: 0; background: none; color: var(--text); text-align: left; font: inherit; font-size: 15px; font-weight: 620; line-height: 1.28; cursor: pointer; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.file-card-title:focus-visible, .file-card-download:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.file-card-ext { margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.file-card-kind { margin-top: 1px; color: var(--muted); font-size: 12.5px; }
.file-card-download { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 9px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: var(--hover); color: var(--text); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; touch-action: manipulation; transition: background .18s ease,scale .18s var(--ease); }
.file-card-download .ui-icon { width: 16px; height: 16px; }
.file-card-download:active { scale: .96; }
.file-card:active:not(:has(.file-card-download:active)) .file-card-pile { scale: .97; }
.file-card .message-file-menu { top: auto; bottom: calc(100% + 5px); }
.file-card .message-file-menu .ui-icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .file-card:hover .file-card-pile.is-ready .file-card-tile[data-pose="0"] { transform: translateY(-2px); }
  .file-card:hover .file-card-pile.is-ready .file-card-tile[data-pose="1"] { transform: translate(15px,10px) rotate(5deg) scale(.97); }
  .file-card:hover .file-card-pile.is-ready .file-card-tile[data-pose="2"] { transform: translate(28px,18px) rotate(10deg) scale(.93); }
  .file-card-download:hover { background: var(--menu-selected); }
}
@media (max-width: 480px) {
  .message-file-group.file-card { gap: 18px; padding: 12px 12px 12px 12px; }
  .file-card-pile { --file-w: 108px; }
  .file-card-pile.is-doc { --file-w: 76px; }
  .file-card-pile.is-table { --file-w: 96px; }
}

/* просмотр на весь экран */
.file-viewer { position: fixed; z-index: 185; inset: 0; bottom: auto; top: var(--web-visual-top,0px); height: var(--visible-height,var(--browser-viewport-height,100dvh)); display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: var(--bg); color: var(--text); overscroll-behavior: contain; }
.fv-head { display: flex; align-items: center; gap: 10px; padding: max(10px,var(--tg-controls-top,0px),env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left)); }
.fv-titles { display: grid; flex: 1; min-width: 0; }
.fv-titles b { overflow: hidden; font-size: 15px; font-weight: 620; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.fv-titles small { overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fv-actions { display: flex; flex: none; align-items: center; gap: 6px; }
.fv-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; touch-action: manipulation; transition: background .18s ease,opacity .18s ease; -webkit-tap-highlight-color: transparent; }
.fv-icon:disabled { opacity: .35; cursor: default; }
.fv-icon[hidden] { display: none; }
.fv-icon[aria-pressed="true"] { color: #ff5a6e; }
.fv-icon:active:not(:disabled), .fv-download:active { background: var(--hover); }
.fv-zoom { display: none; }
.fv-download { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: 4px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; touch-action: manipulation; transition: background .18s ease; -webkit-tap-highlight-color: transparent; }
.fv-download .ui-icon { width: 18px; height: 18px; }
.fv-stage { position: relative; min-height: 0; overflow: hidden; }
.fv-scroll { height: 100%; outline: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.fv-page { position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--r); border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent),0 8px 30px #0003; }
.fv-page img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.fv-page.is-loading { background: color-mix(in srgb,var(--text) 8%,var(--field)); }
.fv-page.is-loading::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb,var(--text) 8%,transparent); animation: skeletonPulse 1s ease-in-out infinite alternate; }
.fv-page-retry { position: absolute; inset: 0; display: none; border: 0; background: none; color: #555; font: inherit; font-size: 13px; cursor: pointer; }
.fv-page.has-failed .fv-page-retry { display: block; }

.fv-scroll.is-slides { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; }
.fv-scroll.is-slides::-webkit-scrollbar { display: none; }
.fv-cell { flex: 0 0 100%; min-width: 0; display: grid; place-items: center; padding: 6px 16px 14px; box-sizing: border-box; container-type: size; scroll-snap-align: center; scroll-snap-stop: always; }
.fv-cell .fv-page { width: min(100cqw,calc(100cqh * var(--r))); }
.fv-arrow { position: absolute; z-index: 2; top: 50%; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb,var(--panel) 88%,transparent); color: var(--text); box-shadow: 0 2px 12px #0004; cursor: pointer; translate: 0 -50%; transition: opacity .18s ease,background .18s ease; }
.fv-arrow.is-prev { left: 14px; } .fv-arrow.is-next { right: 14px; }
.fv-arrow:disabled { opacity: 0; pointer-events: none; }
.fv-foot { min-width: 0; padding: 0 0 max(10px,env(safe-area-inset-bottom)); }
.fv-foot[hidden] { display: none; }
.fv-strip { display: flex; gap: 8px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
.fv-strip::-webkit-scrollbar { display: none; }
.fv-strip::before, .fv-strip::after { content: ''; margin: auto; }
.fv-thumb { position: relative; flex: none; height: 54px; aspect-ratio: var(--r); padding: 0; overflow: hidden; border: 0; border-radius: 5px; background: color-mix(in srgb,var(--text) 10%,var(--field)); cursor: pointer; opacity: .6; transition: opacity .18s ease,box-shadow .18s ease; -webkit-tap-highlight-color: transparent; }
.fv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fv-thumb[aria-current] { opacity: 1; box-shadow: 0 0 0 2px var(--text); }

.fv-scroll.is-doc { --fv-zoom: 1; display: block; overflow: auto; padding: 6px 16px max(24px,env(safe-area-inset-bottom)); box-sizing: border-box; touch-action: pan-x pan-y; }
.fv-scroll.is-doc .fv-page { width: calc(min(860px,100%) * var(--fv-zoom)); margin: 0 auto 14px; }

.fv-scroll.is-table { overflow: auto; padding: 0 max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); box-sizing: border-box; }
.fv-table { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.35; }
.fv-table th, .fv-table td { max-width: 320px; padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.fv-table td { min-width: 56px; }
.fv-table th { position: sticky; z-index: 1; top: 0; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); font-weight: 620; white-space: nowrap; }
.fv-table :is(td,th).is-number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fv-tabs { display: flex; gap: 6px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; }
.fv-tabs::-webkit-scrollbar { display: none; }
.fv-tab { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; transition: background .18s ease,color .18s ease; }
.fv-tab[aria-selected="true"] { background: var(--panel); color: var(--text); font-weight: 550; }

.fv-scroll.is-text { overflow: auto; padding: 6px 16px max(24px,env(safe-area-inset-bottom)); box-sizing: border-box; }
.fv-text { width: min(860px,100%); margin: 0 auto; box-sizing: border-box; padding: 20px 22px; border-radius: 12px; background: var(--panel); font: 13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }

.fv-note, .fv-empty { display: grid; justify-items: center; gap: 12px; margin: 0 auto; padding: 22px 16px; color: var(--muted); font-size: 14px; text-align: center; }
.fv-cell > .fv-note { align-self: center; }
.fv-note p, .fv-empty p { max-width: 340px; margin: 0; line-height: 1.4; }
.fv-empty { height: 100%; box-sizing: border-box; align-content: center; }
.fv-empty > .ui-icon { width: 32px; height: 32px; }
.fv-note-download { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; }
.fv-note-download .ui-icon { width: 18px; height: 18px; }

.fv-waiting { display: grid; height: 100%; place-content: center; justify-items: center; gap: 14px; }
.fv-waiting > span { display: block; width: min(68vw,300px); aspect-ratio: .707; border-radius: 8px; background: color-mix(in srgb,var(--text) 10%,var(--field)); animation: skeletonPulse 1s ease-in-out infinite alternate; }
.fv-waiting.is-slide > span { width: min(82vw,640px); aspect-ratio: 16/9; }
.fv-waiting.is-table > span { width: min(82vw,640px); aspect-ratio: 16/9; }
.fv-waiting-text { color: var(--muted); font-size: 13px; }

@media (hover: hover) and (pointer: fine) {
  .fv-icon:hover:not(:disabled), .fv-download:hover, .fv-note-download:hover { background: var(--hover); }
  .fv-arrow { display: grid; }
  .fv-arrow:hover { background: var(--hover); }
  .fv-zoom { display: grid; }
  .fv-zoom[hidden] { display: none; }
  .fv-thumb:hover { opacity: 1; }
  .fv-tab:hover { color: var(--text); }
  .fv-cell { padding: 6px 72px 16px; }
}
@media (max-width: 480px) {
  .fv-download { width: 40px; padding: 0; margin-left: 0; justify-content: center; background: transparent; }
  .fv-download span:not(.ui-icon) { display: none; }
  .fv-cell { padding: 6px 10px 12px; }
  .fv-scroll.is-doc { padding-inline: 10px; }
  .fv-thumb { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .file-card-tile, .file-card-pile { transition: none; }
  .file-card-tile img { animation: none; }
}