/* ═══════════════════════════════════════════════════════════
   MOBILE — Complete responsive (v3)
   ═══════════════════════════════════════════════════════════ */

/* ── Bottom Navigation ──────────────────────────────────── */
.bottom-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0;
  height:var(--bottom-nav-h);
  background:rgba(8,8,26,.98);
  border-top:1px solid var(--b2);
  backdrop-filter:blur(24px);
  z-index:200;
  /* Safe area for iPhone home indicator */
  padding-bottom:env(safe-area-inset-bottom);
  height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
.bottom-nav::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-glow),transparent);
  opacity:.25;
}
.bottom-nav-inner {
  display:grid; grid-template-columns:repeat(4,1fr);
  height:var(--bottom-nav-h);
}
.bottom-nav-item {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px;
  color:var(--t3); font-size:10px; font-weight:600;
  cursor:pointer; border:none; background:none;
  transition:all var(--t-mid); position:relative;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.bottom-nav-item i { font-size:21px; line-height:1; transition:transform var(--t-spring); }
.bottom-nav-item.active { color:var(--t-accent); }
.bottom-nav-item.active i { transform:scale(1.12); filter:drop-shadow(0 0 8px var(--accent-glow)); }
.bottom-nav-item.active::after {
  content:''; position:absolute; bottom:0; left:22%; right:22%;
  height:2.5px; background:var(--grad-h); border-radius:var(--r-full);
}
.bottom-nav-item .badge {
  position:absolute; top:5px; right:calc(50% - 20px);
  font-size:9px; min-width:15px; height:15px; padding:0 3px;
}

/* Sidebar overlay */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(6,6,15,.75); backdrop-filter:blur(4px);
  z-index:190;
  animation:fadeIn .2s ease;
}

/* ── TABLET ≤900px ──────────────────────────────────────── */
@media(max-width:900px) {
  .auth-page { grid-template-columns:1fr; }
  .auth-left  { display:none; }
  .prof-widgets-row { grid-template-columns:1fr 1fr; }
  .prof-widget--stats { grid-column:1/-1; }
  .adm-stats-grid { grid-template-columns:repeat(3,1fr); }
}

/* ── MOBILE ≤768px ──────────────────────────────────────── */
@media(max-width:768px) {

  /* Show bottom nav */
  .bottom-nav { display:flex; }

  /* Sidebar = drawer */
  .sidebar {
    position:fixed; left:0; top:0; bottom:0;
    width:min(300px,88vw);
    transform:translateX(-105%);
    z-index:195;
    box-shadow:var(--shadow-xl), var(--glow-sm);
    transition:transform .28s cubic-bezier(.16,1,.3,1);
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.visible { display:block; }

  /* Reserve space for bottom nav */
  .main-panel {
    padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* ── App Shell ── */
  .app-shell { height:100dvh; }

  /* ── Auth ── */
  .auth-right { padding:var(--s5) var(--s4); }
  .auth-box   { max-width:100%; padding:0; }
  .auth-title { font-size:24px; }
  .auth-subtitle { font-size:14px; }

  /* ── Chat ── */
  .chat-back { display:flex !important; }
  .chat-shell { height:100%; }
  .msg-content { max-width:85%; }
  .chat-topbar { padding:0 var(--s2); gap:6px; height:54px; }
  .chat-topbar-name { font-size:14px; }
  .chat-input-area {
    padding:var(--s2);
    padding-bottom:max(var(--s2), env(safe-area-inset-bottom));
  }
  .send-btn { width:40px; height:40px; }
  .attach-btn { font-size:18px; }
  .emoji-btn { font-size:18px; }
  .cip-drawer { width:100%; border-radius:20px 20px 0 0; }

  /* ── Profile ── */
  .prof-cover { height:130px; }
  .prof-avatar { width:78px; height:78px; font-size:26px; }
  .prof-avatar-row { margin-top:-40px; padding:0 var(--s3) var(--s2); flex-wrap:wrap; gap:var(--s2); }
  .prof-name { font-size:20px; }
  .prof-username { font-size:13px; }
  .prof-actions { gap:var(--s2); flex-wrap:wrap; }

  /* Profile 3 widgets → 1 col */
  .prof-widgets-row {
    grid-template-columns:1fr;
    padding:0 var(--s3) var(--s3);
    gap:var(--s2);
  }
  .prof-widget--stats .prof-stats-grid {
    flex-direction:row;
    gap:var(--s4);
  }

  /* Profile feed → 1 col */
  .prof-main-content {
    grid-template-columns:1fr;
    padding:0 var(--s3) calc(var(--s5) + var(--bottom-nav-h));
    gap:var(--s3);
  }
  .prof-gallery-col { position:static; }
  .prof-gallery-grid { grid-template-columns:repeat(3,1fr); }
  .prof-new-post-box { border-radius:var(--r-xl); }

  /* ── Settings ── */
  .stg-root  { flex-direction:column; }
  .stg-body  { flex-direction:column; overflow:visible; }

  /* Nav → horizontal scrollable tab bar */
  .stg-nav {
    width:100% !important; min-width:unset;
    border-right:none; border-bottom:1px solid var(--b2);
    flex-direction:row; overflow-x:auto; overflow-y:visible;
    padding:0; height:60px; flex-shrink:0;
    scrollbar-width:none;
  }
  .stg-nav::-webkit-scrollbar { display:none; }

  /* Hide sidebar-only elements */
  .stg-user-card   { display:none !important; }
  .stg-nav-divider { display:none !important; }
  .stg-nav-item--danger { display:none !important; }

  /* Nav items = icon-only tabs */
  .stg-nav-item {
    flex-direction:column; gap:3px;
    padding:8px 16px; min-width:60px;
    border-radius:0; border-left:none;
    white-space:nowrap; flex-shrink:0;
    justify-content:center;
    border-bottom:2px solid transparent;
  }
  .stg-nav-item::before { display:none !important; }
  .stg-nav-item.active {
    border-bottom:2px solid var(--accent-glow);
    background:rgba(124,58,237,.08);
    color:var(--t-accent);
  }
  .stg-nav-text   { display:none; }
  .stg-nav-arrow  { display:none; }
  .stg-nav-icon   {
    width:30px; height:30px; font-size:14px;
    background:transparent; border:none;
  }
  .stg-nav-item.active .stg-nav-icon {
    background:var(--accent-soft);
    border:1px solid var(--b-accent);
  }

  /* Settings content — must scroll */
  .stg-content {
    flex:1; overflow-y:auto;
    min-height:0;
    padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--s4));
  }
  .stg-section  { padding:var(--s3); }
  .stg-form-row { grid-template-columns:1fr; }
  .stg-media-row { flex-direction:column; }
  .stg-theme-grid { grid-template-columns:1fr 1fr; }

  /* ── Admin ── */
  .admin-body { flex-direction:column; }
  .admin-root .stg-nav {
    flex-direction:row; overflow-x:auto;
    width:100%; height:56px; border-right:none;
    border-bottom:1px solid var(--b2);
    flex-shrink:0;
  }
  .admin-root .stg-nav .stg-nav-item {
    flex-direction:column; gap:2px; min-width:60px;
    padding:6px 12px;
  }
  .admin-root .stg-nav .stg-nav-text { display:none; }
  .admin-content { overflow-y:auto; }
  .adm-stats-grid { grid-template-columns:1fr 1fr; }
  .adm-section { padding:var(--s3); }
  .adm-filters { flex-direction:column; }

  /* ── Modals ── */
  .modal-box {
    margin:var(--s4) var(--s2);
    max-width:calc(100vw - 32px);
    max-height:calc(100vh - 120px);
  }
  .modal-body { max-height:50vh; }

  /* ── Comments ── */
  .pcs-comment--reply { margin-left:28px; }

  /* ── User menu ── */
  .user-menu-popup {
    left:var(--s2) !important;
    right:var(--s2) !important;
    width:auto !important;
    bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
}

/* ── SMALL PHONE ≤480px ─────────────────────────────────── */
@media(max-width:480px) {
  .msg-content  { max-width:90%; }
  .msg-bubble   { font-size:14px; }
  .chat-topbar  { height:50px; }
  .send-btn     { width:38px; height:38px; font-size:15px; }
  .input-text   { font-size:14px; }
  .prof-cover   { height:110px; }
  .stg-section  { padding:var(--s2); }
  .pcf-action-btn { font-size:12px; padding:6px 8px; }
  .adm-stats-grid { grid-template-columns:1fr 1fr; }
}

/* ── VERY SMALL ≤380px ──────────────────────────────────── */
@media(max-width:380px) {
  .prof-name { font-size:18px; }
  .bottom-nav-item i { font-size:18px; }
  .bottom-nav-item  { font-size:9px; }
  .stg-nav-item { min-width:52px; padding:8px 10px; }
}

/* ── Touch improvements ─────────────────────────────────── */
@media(hover:none) and (pointer:coarse) {
  .btn-icon  { min-width:44px; min-height:44px; }
  .conv-item { padding:12px var(--s4); }
  .um-item   { padding:13px 10px; }
  .bottom-nav-item { min-height:44px; }
  .pcf-action-btn  { padding:10px; }
  .btn, .btn-primary, .btn-ghost, .btn-secondary { min-height:40px; }
}