/* ── STICKER PICKER ── */
.sticker-picker-popup {
  position: absolute;
  bottom: 60px;
  right: 10px;
  width: 280px;
  height: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  animation: fadeUp .15s ease both;
}

/* ── MOBILE RESPONSIVE (max-width: 768px) ── */
@media(max-width: 768px) {
  /* Use dvh for better mobile viewport handling */
  .content, .feed-col-wrapper {
    height: 100dvh; 
  }

  /* Adjust Sticker Picker for Mobile */
  .sticker-picker-popup {
    position: fixed;
    bottom: 70px; /* Above bottom nav */
    left: 10px;
    right: 10px;
    width: auto;
    height: 220px;
    grid-template-columns: repeat(5, 1fr);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  }
  
  /* Hide sidebar elements that might leak */
  .right-col { display: none !important; }
  
  /* HIDE secondary nav items on mobile to clean up bar */
  .mobile-hidden { display: none !important; }

  /* Increase tap targets */
  .nav-item { min-height: 48px; }
  .btn, .btn-icon { min-height: 44px; min-width: 44px; }
  
  /* Adjust Modal Sizing */
  .modal {
    width: calc(100% - 32px) !important;
    max-height: 85vh;
    padding: 20px;
    margin: 16px;
  }
  
  /* Feed Header Adjustments */
  .feed-hdr { padding: 12px 16px; }
  .feed-hdr h2 { font-size: 18px; }
  
  /* Ensure proper spacing at bottom for fixed nav */
  .content { margin-bottom: 56px; }
  
  /* Post View Page specific */
  #post-view-replies { padding-bottom: 80px; }
  
  /* Fix text areas on mobile */
  textarea { font-size: 16px !important; } /* Prevents iOS zoom */
}