.media-tools{display:flex;align-items:center;gap:9px;flex-shrink:0}.media-attach{width:36px;height:36px;border-radius:9px;color:var(--muted)}.media-attach:hover{background:var(--soft);color:var(--accent)}.media-attach .icon{width:21px;height:21px}.media-hint{font-size:11px;color:var(--muted)}.composer-bottom .media-tools{margin-right:auto}.media-draft{display:flex;gap:9px;flex-wrap:wrap;min-width:0}.media-draft:empty{display:none}.media-draft:not(:empty){padding:10px 0}.media-preview{position:relative;margin:0;width:116px;aspect-ratio:1;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--soft);flex-shrink:0}.media-preview img,.media-preview video{width:100%;height:100%;object-fit:cover}.media-preview>button{position:absolute;right:5px;top:5px;width:25px;height:25px;display:grid;place-items:center;background:#142130bb;color:#fff;border-radius:50%;font-size:20px;line-height:1}.media-preview figcaption{position:absolute;bottom:0;inset-inline:0;padding:6px;background:#142130c9;color:white;font-size:10px;line-height:1.4}.media-preview progress{position:absolute;bottom:0;left:0;width:100%;height:3px;accent-color:var(--accent)}.media-preview.has-error{width:160px;aspect-ratio:1.3}.media-preview.has-error figcaption{background:#7e243de8}.media-video-label{position:absolute;top:9px;left:8px;font-size:8px;font-weight:700;color:#fff;text-shadow:0 1px 5px #000}.media-gallery{display:grid;grid-template-columns:1fr;gap:4px;overflow:hidden;border-radius:12px;margin:8px 0;max-width:100%;min-width:0}.media-gallery.media-count-2,.media-gallery.media-count-3,.media-gallery.media-count-4{grid-template-columns:1fr 1fr}.media-photo{display:block;background:var(--soft);padding:0;min-width:0;aspect-ratio:4/3;overflow:hidden}.media-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .2s}.media-photo:hover img{filter:brightness(.94)}.media-video{position:relative;min-width:0;background:#10151b;aspect-ratio:16/9}.media-video>video{width:100%;height:100%;display:block;object-fit:contain}.media-expand{position:absolute;top:8px;right:8px;width:30px;height:30px;color:white;background:#152232c9;border-radius:7px;font-size:19px}.room-message-content .media-gallery{width:360px;max-width:100%;margin:6px 0}.room-message-content:has(.media-gallery){min-width:min(280px,100%)}.room-chat-form .media-hint,.chat-form .media-hint{display:none}.room-chat-form .media-tools,.chat-form .media-tools{align-self:flex-end}.room-chat-form{flex-wrap:wrap}.room-chat-form .media-draft{flex-basis:100%;order:3}.room-chat-form textarea{flex:1;min-width:0}.direct-compose{padding:0 14px 14px}.direct-compose>.media-draft{padding-inline:4px}.direct-compose .chat-form{margin:0!important}.bubble:has(.media-gallery){min-width:240px;max-width:min(440px,85%)}.bubble .media-gallery{width:340px;max-width:100%}.bubble>p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.post .media-gallery{margin-top:13px;max-height:650px}.comment-line .media-gallery{max-width:360px}.media-viewer{display:grid;place-items:center;min-height:120px}.media-viewer img,.media-viewer video{max-width:100%;max-height:82svh;object-fit:contain;border-radius:8px}.modal.is-media{width:min(1000px,95vw);max-width:95vw;padding:40px 18px 18px;background:var(--panel)}.modal.is-media .modal-close{z-index:1}.media-viewer video{width:100%}
@media(max-width:600px){.media-hint{display:none}.media-preview{width:93px}.media-preview.has-error{width:140px}.room-message-content .media-gallery{width:300px}.room-chat-form .media-draft{padding:8px 0 0}.room-chat-form .media-tools{margin-left:-3px}.direct-compose{padding:0 8px 9px}.media-gallery{border-radius:9px}.bubble:has(.media-gallery){max-width:92%;min-width:0}.post .media-gallery{margin-inline:-2px}.modal.is-media{padding:35px 8px 8px}}

#media-viewer-backdrop{position:fixed;inset:0;z-index:500;background:#0a101bea;backdrop-filter:blur(10px);display:grid;place-items:center;padding:24px}.media-lightbox{position:relative;width:100%;height:100%;display:grid;place-items:center}.media-lightbox>button{position:absolute;z-index:2;right:0;top:0;width:44px;height:44px;border-radius:50%;color:#fff;background:#ffffff1a;font-size:28px}.media-lightbox>img,.media-lightbox>video{max-width:100%;max-height:calc(100svh - 48px);object-fit:contain;border-radius:7px}.media-lightbox>video{width:min(1200px,100%)}