/* Support Inbox — дополнительные стили поверх Polaris web components */
.mf-filters { padding: 12px 12px 4px; }
.mf-row { cursor: pointer; }
.mf-empty, .mf-error { margin-top: 16px; }
.mf-empty { padding: 32px 16px; text-align: center; color: #616161; font-size: 14px; }

.mf-detail-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mf-kv { display: grid; gap: 8px; }
.mf-kv-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; }
.mf-kv-val { overflow-wrap: anywhere; font-size: 14px; }
.mf-message {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5;
  background: #f7f7f7; border-radius: 8px; padding: 12px 14px;
}

.mf-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mf-file { border: 1px solid #e3e3e3; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.mf-file--video { grid-column: 1 / -1; }
.mf-thumb { all: unset; cursor: zoom-in; display: block; aspect-ratio: 4 / 3; background: #f1f1f1; }
.mf-thumb:focus-visible { outline: 2px solid #005bd3; outline-offset: -2px; }
.mf-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-video { width: 100%; max-height: 70vh; background: #000; display: block; }
.mf-nopreview { padding: 24px 12px; text-align: center; font-size: 13px; color: #616161; background: #f7f7f7; }
.mf-file-meta { padding: 8px 10px 10px; display: grid; gap: 2px; font-size: 13px; }
.mf-file-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-file-links { display: flex; gap: 12px; margin-top: 4px; }

.mf-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.mf-lightbox[hidden] { display: none; }
.mf-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.mf-lightbox-close { position: absolute; top: 12px; right: 16px; font-size: 32px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }

@media (max-width: 720px) {
  .mf-kv-row { grid-template-columns: 1fr; gap: 2px; }
  .mf-files { grid-template-columns: repeat(2, 1fr); }
}