/* Media cards deliberately omit file metadata; ordinary documents retain it. */
.attachment-card.audio-attachment { width: min(330px, 100%); min-width: min(250px, 100%); line-height:1.3; }
.audio-attachment > audio { display:none; }
.voice-player { display:flex; gap:12px; align-items:center; padding:8px 4px; color:var(--ink); }
.voice-player .voice-play { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; padding:10px; background:var(--ink); color:var(--surface); }
.voice-play svg { display:block; width:24px; height:24px; fill:currentColor; }
.voice-player-body { flex:1; min-width:0; }
.voice-wave { position:relative; height:36px; }
.voice-wave-bars { display:flex; height:100%; gap:2px; align-items:center; justify-content:space-between; }
.voice-wave-bars i { display:block; flex:1; max-width:4px; min-width:1px; border-radius:3px; background:currentColor; opacity:.35; }
.voice-wave-bars i.played { opacity:1; background:var(--accent,#168dff); }
.voice-wave input[type="range"] { position:absolute; inset:0; width:100%; height:100%; min-height:0; opacity:0; padding:0; margin:0; cursor:pointer; touch-action:pan-y; }
.voice-wave:focus-within { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.voice-wave-unavailable { border-bottom:1px solid currentColor; }
.voice-duration { display:block; margin-top:2px; font-size:12px; font-weight:400; font-variant-numeric:tabular-nums; }
.attachment-card.media-attachment {
  display: block; position: relative; width: min(330px, 100%); min-width: 100px;
  padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: transparent; line-height: 0;
}
[data-theme="dark"] .attachment-card.media-attachment { background: transparent; }
.media-attachment > img, .media-attachment > video {
  display: block; width: 100%; height: auto; max-height: 360px;
  object-fit: contain; border-radius: inherit; pointer-events: none;
}
.media-attachment.media-loading { min-height: 150px; background: rgba(128,157,168,.12); }
.media-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border: 2px solid rgba(128,157,168,.3); border-top-color: var(--accent); border-radius: 50%; animation: media-loading-spin .8s linear infinite; }
@keyframes media-loading-spin { to { transform: rotate(360deg); } }
.media-attachment.media-load-error { min-height: 100px; }
.media-load-error::after { content: "Открыть вложение"; position: absolute; inset: 0; display: grid; place-items: center; line-height: 1.4; background: var(--surface-soft); color: var(--ink); }
.pending-attachment.pending-media { position: relative; display: block; padding: 0; width: 82px; height: 82px; border-radius: 13px; overflow: hidden; }
.pending-media > img,.pending-media > video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pending-media > button { position: absolute; right: 3px; top: 3px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; color: white; background: rgba(0,0,0,.65); border-radius: 50%; font-size: 20px; line-height: 1; }
.attachment-viewer.media-viewer { display: block; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-backdrop-filter: none; backdrop-filter: none; }
.media-viewer button { font-family: inherit; font-weight: 600; }
.attachment-viewer.media-viewer::after { display: none; }
.media-viewer .attachment-viewer-content { width: 100%; height: 100%; padding: 0; overflow: hidden; background: #fff; }
.media-viewer .attachment-viewer-content > img,.media-viewer .attachment-viewer-content > video { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; -webkit-touch-callout: none; user-select: none; }
.attachment-viewer.media-viewer.video-viewer,.media-viewer.video-viewer .attachment-viewer-content { background: #000; }
.media-viewer .attachment-viewer-toolbar,.media-viewer-bottom { position: absolute; z-index: 3; left: 0; right: 0; border: 0; background: rgba(0,0,0,.88); color: #fff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.media-viewer .attachment-viewer-toolbar { top: 0; grid-template-columns: 44px minmax(0,1fr) auto; gap: 6px; transform: translateY(-100%); }
.media-viewer-bottom { bottom: 0; display: grid; gap: 8px; padding: 12px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); transform: translateY(100%); }
.media-viewer.chrome-visible .attachment-viewer-toolbar,.media-viewer.chrome-visible .media-viewer-bottom { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.media-viewer .attachment-viewer-save { font-size: 14px; padding: 0 10px; color: #fff; }
.media-viewer-bottom button,.media-viewer-bottom select { min-height: 40px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 6px 10px; color: #fff; background: #292929; font: inherit; font-size: 14px; }
.media-playback-actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.media-viewer-bottom input[type="range"] { width: 100%; height: 28px; padding: 0; margin: 0; accent-color: #fff; background: transparent; border: 0; touch-action: pan-x; }
.media-playback-time { text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.media-viewer.media-zoomed .attachment-viewer-content { overflow: auto; }
.media-viewer.media-zoomed .attachment-viewer-content > img { width: 200%; height: 200%; max-width: none; object-fit: contain; }
.attachment-viewer.media-viewer.image-viewer,
.media-viewer.image-viewer .attachment-viewer-content { background: #000; }
.media-viewer.image-viewer .attachment-viewer-content { touch-action: none; overscroll-behavior: contain; }
.media-viewer.image-viewer .attachment-viewer-content > img { transform-origin: center; will-change: transform; }
.media-viewer.file-viewer .attachment-viewer-content { padding: 80px 12px 100px; }
.media-viewer.file-viewer .attachment-viewer-content > p { color: #273a41; }
.media-viewer-error { position: absolute; top: 50%; left: 10%; right: 10%; padding: 18px; border-radius: 12px; color: #fff; background: rgba(0,0,0,.8); text-align: center; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .media-loading::after { animation: none; }.media-viewer .attachment-viewer-toolbar,.media-viewer-bottom { transition: none; } }