.media-player{display:block;max-width:min(100%,400px);max-height:440px;border-radius:10px;margin:8px 0;background:#101716}
.media-info{display:block;color:#52745e;font-size:12px;margin:8px 0;white-space:normal}
.media-action{display:block;margin:8px 0;background:#0f766e;color:#fff;border:0;border-radius:9px;padding:10px 14px;font-size:12px}
.media-remove{display:block;margin:9px 0 0;padding:7px 10px;border:1px solid #d6c6c3;border-radius:9px;background:transparent;color:#8a3932;font-size:12px}
#upload-status{padding:12px 35px;font-size:12px;color:#496750;border-top:1px solid #dfe5e1}
#upload-progress{display:block;width:100%;height:6px;accent-color:#0f766e;margin-top:8px}
#composer{align-items:center}
#choose-media{flex-shrink:0;font-size:28px}
.media-sources{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.media-sources button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;min-height:90px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer}
.media-sources button:hover,.media-sources button:focus-visible{border-color:var(--accent);background:#edf7f3}
.media-sources strong{font-size:15px;color:var(--accent)}.media-sources span{font-size:12px;color:var(--muted);line-height:1.5}
#upload-batch{display:block;margin-bottom:7px;overflow-wrap:anywhere}#upload-stop{padding:7px 11px;margin-top:8px;font-size:12px}
@media(max-width:540px){#upload-status{padding:12px 15px}.media-player{max-height:320px}}
#messages .playback-status{display:block;margin-top:8px;font-size:12px;max-width:480px}
.image-open{display:block;max-width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.video-preview{display:block;position:relative;max-width:100%;padding:0;margin:8px 0;border:0;border-radius:10px;overflow:hidden;background:#12251f;color:#fff}
.video-preview:disabled{opacity:1;cursor:default}
.video-thumbnail{display:block;max-width:min(100%,400px);max-height:250px}
.video-preview-play{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;text-shadow:0 2px 9px #000;pointer-events:none}
.video-preview-fallback{display:block;width:280px;max-width:100%;padding:65px 20px 20px;font-size:12px}
.bubble{width:fit-content;white-space:normal}
.message-text{white-space:pre-wrap}
.message-text:empty,.message-media:empty{display:none}
.bubble.has-media{max-width:min(75%,calc(var(--media-width,400px) + 36px))}
.bubble.has-media .media-info,.bubble.has-media .playback-status{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:800px){.bubble.has-media{max-width:min(90%,calc(var(--media-width,400px) + 36px))}}
#image-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#08110ff5;color:#fff}
#image-dialog[open]{display:flex;flex-direction:column}
#image-dialog::backdrop{background:#08110fe6}
#image-dialog header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0;height:68px;padding:12px 20px}
#image-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#image-close{font-size:30px;line-height:1;min-width:44px;min-height:44px;color:#fff;flex-shrink:0}
#image-stage{flex:1;min-height:0;display:grid;place-items:center;padding:8px 20px 24px;overflow:auto;cursor:zoom-out}
#image-full{display:block;max-width:100%;max-height:calc(100dvh - 100px);object-fit:contain;border-radius:4px;cursor:default}
@media(max-width:540px){#image-dialog header{height:60px;padding:8px 12px}#image-stage{padding:4px 8px 16px}#image-full{max-height:calc(100dvh - 85px)}}