.composer-tool-btn { width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border:1px solid var(--wa-line); border-radius:16px; background:rgba(255,255,255,.035); color:var(--bs-secondary-color); font-size:1.2rem; transition:.18s ease; }
.composer-tool-btn:hover { border-color:rgba(0,168,132,.4); background:rgba(0,168,132,.12); color:var(--wa-primary); }
.composer-tool-btn:disabled { opacity:.55; }
.attachment-preview { display:flex; align-items:center; gap:.75rem; margin-bottom:.65rem; padding:.62rem .7rem; border:1px solid rgba(0,168,132,.25); border-radius:14px; background:rgba(0,168,132,.08); }
.attachment-preview[hidden] { display:none; }
.attachment-preview-thumb { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:rgba(0,0,0,.18); color:var(--wa-primary); font-size:1.5rem; }
.attachment-preview-thumb img { width:100%; height:100%; object-fit:cover; }
.attachment-preview-info { min-width:0; flex:1; }
.attachment-preview-info strong,.attachment-preview-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-preview-info strong { font-size:.78rem; }
.attachment-preview-info small { color:var(--bs-secondary-color); font-size:.65rem; }
.attachment-remove { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(220,53,69,.12); color:#ff8997; }
.upload-progress { height:4px; overflow:hidden; margin:0 0 .55rem; border-radius:999px; background:rgba(255,255,255,.08); }
.upload-progress[hidden] { display:none; }
.upload-progress > div { width:0; height:100%; border-radius:inherit; background:var(--wa-primary); transition:width .12s linear; }
.drop-overlay { position:absolute; inset:0; z-index:10; display:none; place-items:center; border:2px dashed var(--wa-primary); border-radius:16px; background:color-mix(in srgb,var(--bs-body-bg) 94%,transparent); text-align:center; backdrop-filter:blur(8px); }
.drag-active .drop-overlay { display:grid; }
.drop-overlay i,.drop-overlay strong,.drop-overlay small { display:block; }
.drop-overlay i { margin-bottom:.35rem; color:var(--wa-primary); font-size:2rem; }
.drop-overlay small { color:var(--bs-secondary-color); font-size:.68rem; }

.media-image-button { display:block; max-width:100%; padding:0; overflow:hidden; border:0; border-radius:11px; background:#111; cursor:zoom-in; }
.media-image { display:block; width:auto; min-width:180px; max-width:100%; max-height:420px; object-fit:cover; }
.media-caption { margin-top:.5rem; white-space:pre-wrap; word-break:break-word; }
.media-player { max-width:100%; }
.media-video { display:block; width:min(480px,100%); max-height:420px; border-radius:11px; background:#000; }
.audio-wrap { min-width:min(360px,70vw); display:flex; align-items:center; gap:.65rem; padding:.6rem; border-radius:12px; background:rgba(0,0,0,.1); }
.audio-wrap > i { color:var(--wa-primary); font-size:1.25rem; }
.audio-wrap audio { width:100%; height:40px; }
.media-download-link { display:inline-flex; align-items:center; gap:.3rem; margin-top:.45rem; color:inherit; font-size:.7rem; text-decoration:none; opacity:.8; }
.document-card { min-width:min(330px,68vw); display:flex; align-items:center; gap:.7rem; padding:.7rem; border-radius:12px; background:rgba(0,0,0,.11); }
.document-icon { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.1); color:var(--wa-primary); font-size:1.35rem; }
.document-info { min-width:0; }
.document-info strong,.document-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.document-info strong { font-size:.78rem; }
.document-info small { color:var(--bs-secondary-color); font-size:.62rem; }
.document-actions { display:flex; gap:.45rem; margin-top:.45rem; }
.document-actions a { flex:1; display:flex; align-items:center; justify-content:center; gap:.3rem; padding:.38rem .55rem; border:1px solid var(--wa-line); border-radius:8px; color:inherit; font-size:.68rem; font-weight:700; text-decoration:none; }
.document-actions a:hover { border-color:rgba(0,168,132,.4); color:var(--wa-primary); }

.scroll-bottom-btn { position:absolute; right:1.2rem; bottom:94px; z-index:5; width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--wa-line); border-radius:50%; background:var(--bs-body-bg); color:var(--bs-body-color); box-shadow:0 7px 22px rgba(0,0,0,.25); opacity:0; pointer-events:none; transform:translateY(8px); transition:.18s ease; }
.scroll-bottom-btn.visible { opacity:1; pointer-events:auto; transform:none; }

.media-lightbox { position:fixed; inset:0; z-index:1090; display:grid; grid-template-rows:auto minmax(0,1fr); background:rgba(3,8,10,.95); color:#fff; }
.media-lightbox[hidden] { display:none; }
.media-lightbox-toolbar { z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; background:rgba(0,0,0,.35); }
.media-lightbox-toolbar > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-lightbox-toolbar > div { display:flex; gap:.45rem; }
.lightbox-btn { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.media-lightbox-stage { min-height:0; display:grid; place-items:center; padding:1rem 5rem 2rem; }
.media-lightbox-stage img { max-width:100%; max-height:100%; object-fit:contain; user-select:none; }
.lightbox-nav { position:absolute; top:50%; z-index:2; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(0,0,0,.42); color:#fff; transform:translateY(-50%); }
.lightbox-nav.prev { left:1rem; }
.lightbox-nav.next { right:1rem; }
body.lightbox-open { overflow:hidden; }

@media (max-width:767.98px) {
  .composer-tool-btn { width:44px; height:52px; flex-basis:44px; }
  .media-image { min-width:130px; max-height:320px; }
  .scroll-bottom-btn { right:.85rem; bottom:88px; }
  .media-lightbox-stage { padding:1rem .5rem 4.5rem; }
  .lightbox-nav { top:auto; bottom:.8rem; transform:none; }
  .lightbox-nav.prev { left:calc(50% - 58px); }
  .lightbox-nav.next { right:calc(50% - 58px); }
}