/*
  Community media and uploads module.
  Extracted from the former pages/70-community.css; keep after 68-community-compact.css.
*/

/*
 * Extracted from assets/app.css on 2026-04-06.
 * Section: Community pages, uploads, reactions and community-specific behavior
 * Source lines: 22282-25803
 */

/* community media + uploads */
.communityComposer__toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.communityComposer__toolbarLeft,
.communityComposer__toolbarRight{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.communityComposer__hint--inline{
  opacity:.78;
}
.communityComposer__field--drop{
  position:relative;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.communityComposer__field--drop.is-dragover{
  border-color:rgba(255,147,42,.55);
  box-shadow:0 0 0 1px rgba(255,147,42,.22), 0 10px 24px rgba(255,147,42,.12);
  background:rgba(255,147,42,.06);
}
.communityComposer__field--drop.is-disabled{
  opacity:.66;
  cursor:not-allowed;
}
.communityComposer__field--drop.is-disabled .communityComposer__input{
  cursor:not-allowed;
}
.communityComposerUploads{
  margin-bottom:10px;
}
.communityComposerUploads__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.communityUploadItem{
  min-width:200px;
  max-width:280px;
  flex:1 1 200px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.communityUploadItem.is-pending{
  opacity:.86;
}
.communityUploadItem.is-error{
  border-color:rgba(255,125,125,.26);
}
.communityUploadItem__thumb{
  width:50px;
  height:50px;
  flex:0 0 50px;
  border-radius:11px;
  object-fit:cover;
  background:rgba(255,255,255,.05);
}
.communityUploadItem__thumb--stub{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.78);
}
.communityUploadItem__meta{
  min-width:0;
  flex:1 1 auto;
}
.communityUploadItem__title{
  font-weight:700;
}
.communityUploadItem__info{
  font-size:12px;
  opacity:.78;
  margin-top:3px;
}
.communityUploadItem__actions{
  flex:0 0 auto;
}
.communityMessage__text{
  white-space:normal;
  word-break:break-word;
}
.communityMessage__link{
  color:var(--accent, #ff932a);
  text-decoration:none;
}
.communityMessage__link:hover{
  text-decoration:underline;
}
.communityMessage__media{
  margin-top:10px;
  display:grid;
  gap:10px;
}
.communityMediaGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:8px;
}
.communityMediaGrid.is-single{
  grid-template-columns:minmax(220px,460px);
}
.communityMediaCard{
  display:block;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.communityMediaCard img{
  display:block;
  width:100%;
  height:100%;
  max-height:300px;
  object-fit:cover;
}
.communityEmbedCard{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  border-radius:14px;
  overflow:hidden;
}
.communityEmbedCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.communityEmbedCard__badge{
  font-weight:700;
}
.communityEmbedCard__source{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  font-size:12px;
}
.communityEmbedCard__source:hover{
  color:var(--accent, #ff932a);
}
.communityEmbedCard__ratio{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:#000;
}
.communityEmbedCard__ratio iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.communityLinkCards{
  display:grid;
  gap:8px;
}
.communityLinkCard{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  color:inherit;
}
.communityLinkCard__title{
  font-weight:700;
}
.communityLinkCard__meta{
  opacity:.76;
  font-size:12px;
  word-break:break-all;
}
@media (max-width: 720px){
  .communityComposer__toolbar{
    align-items:flex-start;
  }
  .communityUploadItem{
    min-width:100%;
  }
  .communityMediaGrid,
  .communityMediaGrid.is-single{
    grid-template-columns:1fr;
  }
  .communityEmbedCard__top{
    flex-direction:column;
    align-items:flex-start;
  }
}

