/* 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: .35rem .45rem;
  display:flex;
  flex-direction:column;
  transition: max-height 220ms ease;
}

.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;
  transition: max-height 220ms ease;
}

/* prevent long content from widening layout */
.post-card{
  overflow:hidden;
  min-width:0;
  border-radius:12px;
  border:1px solid rgba(51, 65, 85, 0.9);
  background: rgba(15, 23, 42, 0.92);
  padding:.6rem .7rem;
  margin-bottom:.5rem;
  cursor:pointer;
}

.sw-wall-card{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

.sw-wall-head{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.sw-wall-avatar{
  width:34px;
  height:34px;
  border-radius:10px;
  background: rgba(56,189,248,0.22);
  border:1px solid rgba(56,189,248,0.55);
  color:#e2f2ff;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
}
.sw-wall-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sw-wall-meta{ flex:1; min-width:0; }
.sw-wall-author{
  font-size:.85rem;
  font-weight:800;
  color:#e5e7eb;
}
.sw-wall-time{
  font-size:.72rem;
  color:#94a3b8;
}
.sw-wall-badge{
  font-size:.65rem;
  font-weight:800;
  padding:.2rem .5rem;
  border-radius:999px;
  border:1px solid rgba(56,189,248,0.5);
  color:#dbeafe;
  background: rgba(56,189,248,0.18);
  text-transform: uppercase;
  letter-spacing:.06em;
}
.sw-wall-image{
  width:100%;
  height: 180px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.85);
}
.sw-wall-image-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#93c5fd;
  background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.18), rgba(15,23,42,0.92));
}
.sw-wall-image-fallback-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  font-size: .72rem;
}
.sw-wall-image-fallback i{
  font-size: 46px;
  opacity: 0.95;
}
body[data-theme="light"] .sw-wall-image-fallback{
  background: radial-gradient(circle at 30% 30%, rgba(59,130,246,0.18), rgba(255,255,255,0.9));
  color:#1d4ed8;
}
.sw-wall-image img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.sw-wall-title{
  font-size: 1rem;
  font-weight: 900;
  color:#f8fafc;
}
.sw-wall-snippet{
  font-size:.86rem;
  color:#d7e3ff;
  line-height:1.3;
}
.sw-wall-meta-line{
  font-size:.74rem;
  color:#94a3b8;
}
.sw-wall-stats{
  display:flex;
  gap:.75rem;
  font-size:.75rem;
  color:#cbd5f5;
}
.sw-wall-stats i{ margin-right:.25rem; }
.sw-wall-actions{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}
.sw-wall-privacy{
  margin-top:.25rem;
  padding:.5rem .6rem;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.75);
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.sw-wall-privacy-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.72rem;
  color:#cbd5f5;
}
.sw-wall-privacy-row label{
  white-space:nowrap;
}
.sw-wall-privacy-row select{
  flex:1;
  background:#020617;
  border-radius:999px;
  border:1px solid #4b5563;
  padding:.25rem .6rem;
  font-size:.72rem;
  color:#e5e7eb;
}
.sw-wall-privacy-input{
  width:100%;
  border-radius:999px;
  border:1px solid #4b5563;
  padding:.3rem .6rem;
  background:#020617;
  color:#e5e7eb;
  font-size:.72rem;
}
.sw-wall-privacy-check{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.7rem;
  color:#cbd5f5;
}
.sw-wall-privacy-error{
  font-size:.7rem;
  color:#fca5a5;
}

.sw-wall-sentinel{
  height: 1px;
}
.sw-wall-btn{
  border:1px solid rgba(56,189,248,0.35);
  background: rgba(15,23,42,0.6);
  color:#e2f2ff;
  font-weight:800;
  font-size:.75rem;
  padding:.35rem .6rem;
  border-radius:999px;
  cursor:pointer;
}
.sw-wall-btn i{ margin-right:.25rem; }
.sw-wall-btn.is-active{
  background: rgba(56,189,248,0.35);
  border-color: rgba(56,189,248,0.8);
}

.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;
  }

  .sociowall-panel{ max-height: 22vh; }
  .post-list{ max-height: 16vh; }
  .chat-users{ max-height: 16vh; }

  body.sw-wall-expanded .sociowall-panel{ max-height: 70vh; }
  body.sw-wall-expanded .post-list{ max-height: 62vh; }
  body.sw-wall-expanded .chat-users{ max-height: 62vh; }
}
/* SW_DESKTOP_WIDE_LAYOUT:END */