/* Sociowall + Chat BELOW the map */
.below-row{
  display:flex;
  gap:.6rem;
  align-items:stretch;
  min-width:0;
  flex-wrap: nowrap; /* ✅ keep side-by-side */
}

/* Small top nudge down (as requested) */
.sociowall-panel,
.chat-panel{
  max-width: 32vw;
  min-width: 160px;
  flex: 1 1 0; /* ✅ 1/4 */
  margin-top: 5px; /* ✅ descend 5px */
}

.sociowall-panel{
  flex: 3 1 0; /* ✅ 3/4 */
  min-width:0;              /* IMPORTANT: prevents pushing chat */
  min-height: 160px;
  background: rgba(15, 23, 42, 0.96);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  box-shadow: 0 10px 28px rgba(0,0,0,.9), 0 0 18px rgba(56,189,248,.45);
  padding: .45rem .55rem;
  display:flex;
  flex-direction:column;
}

.sociowall-header{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:#bfdbfe;
  margin-bottom:.25rem;
}

/* list scroll inside wall */
.post-list{
  flex:1;
  overflow-y:auto;
  padding-right:.15rem;
  max-height: 44vh;
}

/* prevent long content from widening layout */
.post-card{
  overflow:hidden;
  min-width:0;
  border-radius:10px;
  border:1px solid rgba(55, 65, 81, 0.9);
  background: rgba(15, 23, 42, 0.92);
  padding:.3rem .45rem;
  margin-bottom:.22rem;
  cursor:pointer;
}

/* SCALE the fixed template so it never forces width */
.post-card .sw-wall-mini{
  --sw-wall-scale: 0.86;
  transform: scale(var(--sw-wall-scale));
  transform-origin: left top;
  width: calc(100% / var(--sw-wall-scale));
}

.post-list-header{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; font-size:.7rem; color:#cbd5f5; }
.km-filter input[type="range"]{ width:160px; }

.status-text{ font-size:.72rem; opacity:.85; margin:.15rem 0; }
.status-error{ color:#fecaca; }

/* ✅ Chat fixed column that can shrink a bit on narrow screens */
.chat-panel{
  flex: 0 0 190px;
  width: 190px;
  min-width: 160px;      /* allow shrink in portrait */
  max-width: min(220px, 42vw);
  min-height: 160px;
  background: rgba(15, 23, 42, 0.96);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  box-shadow: 0 10px 28px rgba(0,0,0,.9), 0 0 18px rgba(56,189,248,.45);
  padding:.4rem .45rem;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.chat-header{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#bfdbfe;
  margin-bottom:.2rem;
}

.chat-users{
  list-style:none;
  padding:0; margin:0;
  font-size:.76rem;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  max-height: 44vh;
}

.chat-users li{ display:flex; align-items:center; gap:.3rem; padding:.18rem .1rem; }
.chat-users li::before{ content:"👤"; font-size:.72rem; opacity:.9; }

/* Stack only ultra-ultra-small */
@media (max-width: 340px){
  .below-row{ flex-direction: column; }
  .chat-panel{ width:100%; min-width:0; max-width:none; flex: 1 1 auto; }
  .post-list{ max-height: 46vh; }
}

/* SW_LAYOUT_RATIO_FIX:BEGIN */
.below-row{ flex-wrap: nowrap !important; }

.sociowall-panel{
  flex: 3 1 0 !important;   /* ✅ 3/4 */
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.chat-panel{
  flex: 1 1 0 !important;   /* ✅ 1/4 */
  width: auto !important;
  max-width: none !important;
  min-width: 140px !important;
}
/* SW_LAYOUT_RATIO_FIX:END */

/* SW_DESKTOP_WIDE_LAYOUT:BEGIN */
/* Big browser: Sociowall 75% / Chat 25% + centered container */
@media (min-width: 900px){
  .below-stage{
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;
    padding-right: 18px;
  }

  .below-row{ gap: 0.9rem; }

  .sociowall-panel{ flex: 0 0 74%; }
  .chat-panel{
    flex: 0 0 26%;
    width: auto;
    max-width: none;
    min-width: 260px;
  }

  .post-list{ max-height: 50vh; }
  .chat-users{ max-height: 50vh; }
}
/* SW_DESKTOP_WIDE_LAYOUT:END */
