/*
  vybe_mobile.css
  Shared mobile design system — link this in every page's <head>
  after your existing <style> block.

  Usage:
    <link rel="stylesheet" href="/vybe_mobile.css" />
*/

/* ── RESET & SAFE AREA ── */
:root {
  --nav-h: 58px;
  --bottom-h: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --accent:  #00ffff;
  --accent2: #bf5fff;
  --accent3: #ff5fa0;
  --bg:      #06090f;
  --surface: #0c1018;
  --border:  rgba(0,255,255,0.1);
  --text:    #f0f4ff;
  --muted:   #5a6a80;
}

/* ── TOP NAV — mobile overrides ── */
@media (max-width: 660px) {
  .nav {
    padding: 0 16px !important;
    height: var(--nav-h) !important;
    /* only logo + right icons on mobile — tabs hidden below */
  }
  /* Hide the desktop tab row inside the top nav on mobile */
  .nav .nav-tabs {
    display: none !important;
  }
  /* Logo stays left, right cluster stays right */
  .nav-logo {
    font-size: 1.15rem !important;
  }
}

/* ── FEED TABS (Feed / Trending / Following / Saved) ──
   On mobile these live below the top nav as a scroll row,
   not inside it. Wrap them in a <div class="feed-tab-bar"> */
.feed-tab-bar {
  display: none; /* desktop: hidden (nav handles it) */
}
@media (max-width: 660px) {
  .feed-tab-bar {
    display: flex;
    position: sticky;
    top: var(--nav-h);
    z-index: 90;
    background: rgba(6,9,15,0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 0 12px;
  }
  .feed-tab-bar::-webkit-scrollbar { display: none; }
  .feed-tab-bar .nav-tab {
    flex-shrink: 0;
    background: none !important;
    border: none;
    border-radius: 0;
    padding: 12px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    font-family: 'Space Grotesk', sans-serif;
    white-space: nowrap;
  }
  .feed-tab-bar .nav-tab.active {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
  }
  /* Push main content down to clear the sticky tab bar */
  .page, .notif-page, .settings-page {
    padding-top: calc(var(--nav-h) + 46px) !important;
  }
}

/* ── BOTTOM NAV ── */
.vybe-bottom-nav {
  display: none;
}
@media (max-width: 660px) {
  .vybe-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(6,9,15,0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(0,255,255,0.08);
    padding-bottom: var(--safe-bottom);
    height: calc(var(--bottom-h) + var(--safe-bottom));
    align-items: stretch;
    justify-content: space-around;
  }

  .vybe-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 8px 4px 6px;
    transition: color 0.18s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    background: none;
    border: none;
  }
  .vybe-bottom-nav a.active {
    color: var(--accent);
  }
  .vybe-bottom-nav a.active .vbn-icon svg {
    filter: drop-shadow(0 0 6px rgba(0,255,255,0.5));
  }
  .vybe-bottom-nav a:active {
    transform: scale(0.92);
  }

  /* SVG icon wrapper */
  .vbn-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .vbn-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.18s;
  }

  /* Notification dot */
  .vbn-dot {
    position: absolute;
    top: -1px;
    right: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent3);
    border: 1.5px solid var(--bg);
    display: none;
  }
  .vbn-dot.visible { display: block; }

  /* New post FAB — center slot */
  .vbn-post {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
  }
  .vbn-post-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px rgba(0,255,255,0.3);
    transition: transform 0.18s, box-shadow 0.18s;
  }
  .vbn-post:active .vbn-post-ring {
    transform: scale(0.9);
    box-shadow: 0 0 8px rgba(0,255,255,0.2);
  }
  .vbn-post-ring svg {
    width: 20px;
    height: 20px;
    stroke: #000;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Body bottom padding so content clears the nav */
  body {
    padding-bottom: calc(var(--bottom-h) + var(--safe-bottom)) !important;
  }

  /* Toast clears bottom nav */
  .toast {
    bottom: calc(var(--bottom-h) + var(--safe-bottom) + 12px) !important;
  }
}

/* ── GENERAL MOBILE POLISH ── */
@media (max-width: 660px) {
  /* Kill desktop sidebars */
  .sidebar-left, .sidebar-right { display: none !important; }

  /* Post cards edge-to-edge feel */
  .post-card {
    border-radius: 12px !important;
  }

  /* Bigger tap targets */
  .post-action {
    padding: 9px 12px !important;
    font-size: 0.85rem !important;
    min-height: 40px;
  }
  .action-icon { font-size: 1.1rem !important; }

  /* Composer */
  .create-post { border-radius: 12px !important; }
  .create-actions { flex-wrap: wrap; gap: 6px; }
  .drop-btn { margin-left: auto; }

  /* Post media */
  .post-media { max-height: 420px !important; object-fit: cover !important; }

  /* Tighter text padding */
  .post-text   { padding: 0 14px 12px !important; font-size: 0.88rem !important; }
  .post-footer { padding: 10px 14px !important; gap: 6px !important; }
  .post-header { padding: 12px 14px 8px !important; }

  /* Profile page adjustments */
  body.profile-page {
    padding: calc(var(--nav-h) + 16px) 12px calc(var(--bottom-h) + 24px) !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .profile-card { width: 100% !important; max-width: 420px; }

  /* Settings / notifications full width */
  .main, .settings-main { max-width: 100% !important; }

  /* Prevent horizontal scroll */
  html, body { overflow-x: hidden; }
}

/* ── HAPTIC-FEEL BUTTON FEEDBACK ── */
@media (hover: none) {
  button:active, a:active { opacity: 0.75; }
}
