/* Keep the brand visible on small screens. Looper hides .top-bar-brand on mobile. */
.app-header .top-bar-brand {
  display: flex !important;
  align-items: center;
  min-width: 0;
}
.cx-brand-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.cx-brand-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 180px;
}
@media (min-width: 768px) {
  .cx-brand-logo {
    height: 32px;
    max-width: 240px;
  }
}
.cx-page-logo {
  display: block;
  width: min(100%, 1024px);
  height: auto;
  max-height: 96px;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 575.98px) {
  .cx-page-logo {
    max-height: 64px;
  }
}

/* Submenus follow has-open only. Looper otherwise keeps an active parent stuck open. */
.app-aside .stacked-menu .menu-item.has-child.has-active:not(.has-open) > .menu {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
.cx-hero-photo,
.cx-card-photo {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.cx-hero-photo { height: 280px; }
.cx-card-photo { height: 220px; }
@media (min-width: 768px) {
  .cx-hero-photo { height: 360px; }
  .cx-card-photo { height: 260px; }
}
.cx-avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #2a2a2a;
  border: 2px solid #3b82f6;
}
.cx-avatar-wrap img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  display: block;
}
.cx-avatar-wrap input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 96px;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.page-cover.cx-page-cover-photo {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.cx-detail-grid dt {
  color: #868e96;
  font-weight: 500;
}
.cx-detail-grid dd {
  margin-bottom: 0.75rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.grid-3 > .card {
  margin-bottom: 0;
}
.cx-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.cx-media-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.25rem;
  background: #1b1f22;
}
.cx-media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cx-media-tile .cx-media-del {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
.cx-online-badge {
  vertical-align: middle;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cx-online-avatar,
.cx-online-avatar img {
  width: 128px;
  height: 128px;
}
.cx-online-avatar img {
  object-fit: cover;
  border-radius: 50%;
}

.cx-video-lock{position:relative;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#111;border-radius:.25rem}
.cx-video-lock-blur{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#222 0 12px,#1a1a1a 12px 24px);filter:blur(8px)}
.cx-video-lock-label{position:relative;z-index:1;font-size:1.25rem;font-weight:600;margin-bottom:.75rem}
.cx-video-lock .btn{position:relative;z-index:1}

.cx-dock{position:fixed;left:0;right:0;bottom:0;z-index:1030;height:50px;background:#000;border-top:1px solid #111}
body,.app,.wrapper,.page,.has-sidebar{padding-bottom:50px}

.cx-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:1030;height:50px;
  background:#000;border-top:1px solid #111;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;color:#ddd;font-size:13px;
}
.cx-dock-chat{
  background:transparent;border:0;color:#ddd;font-size:20px;line-height:1;padding:4px 8px;
}
.cx-dock-chat:not(.is-disabled):hover{color:#fff;}
.cx-dock-chat.is-disabled{opacity:.35;cursor:not-allowed;}
.cx-shout-panel{
  position:fixed;left:0;right:0;bottom:50px;z-index:1029;
  height:66.66vh;max-height:66.66vh;
  background:#121212;border-top:1px solid #222;
  display:flex;flex-direction:column;
}
.cx-shout-panel[hidden]{display:none !important;}
.cx-shout-head{
  height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;border-bottom:1px solid #222;flex:0 0 auto;
}
.cx-shout-body{flex:1 1 auto;overflow:auto;}
.cx-shout-pub{display:flex;align-items:center;border-top:1px solid #222;flex:0 0 auto;}
.cx-shout-pub .form-control{background:transparent;color:#eee;}

.cx-shout-panel{
  background:rgba(18,18,18,.82);
  width:100%;
  backdrop-filter:blur(8px);
}
@media (min-width:768px){
  .cx-shout-panel{
    width:66.66vw;
    left:auto;
    right:0;
  }
}
.cx-shout-panel .conversation-outbound{
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
}
.cx-shout-panel .conversation-outbound .conversation-avatar{
  margin-left:.5rem;
}
.cx-shout-panel .user-avatar,
.cx-shout-panel .user-avatar img{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
}

@media (min-width:768px){
  .cx-shout-panel{
    width:66.66vw;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
}
.cx-shout-panel .conversation-list{
  padding:12px;
}
.cx-shout-panel .conversation-list > li{
  display:flex;
  align-items:flex-end;
  margin:0 0 12px;
}
.cx-shout-panel .conversation-inbound{
  justify-content:flex-start;
  flex-direction:row;
}
.cx-shout-panel .conversation-outbound{
  justify-content:flex-end;
  flex-direction:row;
}
.cx-shout-panel .conversation-avatar{
  flex:0 0 auto;
  align-self:flex-end;
}
.cx-shout-panel .conversation-inbound .conversation-avatar{
  margin:0 8px 0 0;
}
.cx-shout-panel .conversation-outbound .conversation-avatar{
  margin:0 0 0 8px;
}
.cx-shout-panel .conversation-message{
  max-width:70%;
}
.cx-shout-panel .conversation-outbound .conversation-message-text,
.cx-shout-panel .conversation-inbound .conversation-message-text{
  position:relative;
}
.cx-shout-panel .conversation-outbound .conversation-meta{
  text-align:right;
}

.cx-shout-panel .conversation-outbound .conversation-message-text{
  border-radius:1rem 1rem 0 1rem !important;
}
.cx-shout-panel .conversation-inbound .conversation-message-text{
  border-radius:1rem 1rem 1rem 0 !important;
}

.cx-emoji-pop{
  position:fixed;z-index:2000;width:280px;height:240px;
  background:#1b1b1b;border:1px solid #333;border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);padding:8px;display:flex;flex-direction:column;
}
.cx-emoji-pop[hidden]{display:none !important;}
.cx-emoji-cat{margin-bottom:8px;}
.cx-emoji-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;}
.cx-emoji-btn{background:transparent;border:0;font-size:22px;line-height:1.3;padding:2px;cursor:pointer;border-radius:4px;}
.cx-emoji-btn:hover{background:#333;}
.cx-emoji-empty{grid-column:1/-1;color:#888;font-size:12px;padding:8px;}