/* ── VerbaSave Responsive CSS ─────────────────────────────────────────────
   Breakpoints:
     1024px  hide right sidebar
      900px  compact left sidebar (icons only, ≥681px)
      680px  hide left sidebar → show bottom nav
   ────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   1.  MOBILE BOTTOM NAVIGATION
   ══════════════════════════════════════════════════════════════════ */
#vs-mobile-nav {
  display: none;                         /* hidden by default on desktop */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  background: var(--surface, #111118);
  border-top: 1px solid var(--border, rgba(255,255,255,0.07));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  height: calc(56px + env(safe-area-inset-bottom, 0px));
}

.vs-mnav-inner {
  display: flex;
  align-items: center;
  height: 56px;
  justify-content: space-around;
}

.vs-mnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: var(--text-2, rgba(255,255,255,0.50));
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
  border-radius: 12px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.vs-mnav-item svg { opacity: 0.65; transition: opacity .15s; }
.vs-mnav-item.active { color: var(--accent-1, #4F8EF7); }
.vs-mnav-item.active svg { opacity: 1; }
.vs-mnav-item:active { opacity: 0.7; }

.vs-mnav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #F05A5A;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  display: none;
}
.vs-mnav-badge.show { display: flex; }

/* FAB: move above bottom nav on mobile */
@media (max-width: 680px) {
  .fab {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   2.  HAMBURGER BUTTON + SIDEBAR DRAWER
   ══════════════════════════════════════════════════════════════════ */

/* ── Hamburger button ─────────────────────────────────────────────── */
#vs-hamburger {
  display: none;  /* only on mobile */
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 600;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  background: var(--surface, #111118);
  color: var(--text-1, #fff);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
#vs-hamburger:active { transform: scale(0.94); }

/* ── Dark overlay behind drawer ───────────────────────────────────── */
#vs-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 598;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  display: none; /* shown only on mobile via media query + body class */
}

/* ── Drawer: sidebar-left slides in from left ─────────────────────── */
@media (max-width: 680px) {
  /* Sidebar becomes a fixed off-screen drawer */
  .sidebar-left {
    display: flex !important;   /* override the hide rule */
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 599;
    width: 260px !important;
    height: 100vh !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    box-shadow: 4px 0 32px rgba(0,0,0,0.5);
  }

  /* Open state: drawer + overlay become visible */
  body.vs-drawer-open .sidebar-left {
    transform: translateX(0);
  }
  body.vs-drawer-open #vs-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  body.vs-drawer-open #vs-hamburger {
    /* X icon while open — handled via JS class */
  }

  /* Hamburger hidden — swipe-only mode */
  #vs-hamburger { display: none !important; }
  /* Overlay: always block on mobile, invisible until drawer opens */
  #vs-drawer-overlay { display: block; pointer-events: none; }

  /* Left-edge pull tab — shows when drawer is closed */
  #vs-drawer-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 597;
    width: 18px;
    height: 48px;
    background: var(--surface, #111118);
    border: 1px solid var(--border-hi, rgba(255,255,255,0.13));
    border-left: none;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    box-shadow: 2px 0 8px rgba(0,0,0,0.25);
    transition: opacity .2s;
    -webkit-tap-highlight-color: transparent;
  }
  #vs-drawer-tab svg { opacity: 0.5; }
  body.vs-drawer-open #vs-drawer-tab { opacity: 0; pointer-events: none; }

  /* bottom nav stays on top of overlay */
  #vs-mobile-nav { z-index: 600; }
}

/* ══════════════════════════════════════════════════════════════════
   3.  THREE-COLUMN APP LAYOUT
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablet: hide right sidebar ──────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar-right { display: none !important; }
  .feed-col { max-width: none; border-right: none; }
}

/* ── Compact sidebar: icons + label ────────────────────────────────
   At 900px, shrink sidebar to 64px icon-only mode
   ──────────────────────────────────────────────────────────────────*/
@media (max-width: 900px) and (min-width: 681px) {
  .sidebar-left {
    width: 68px !important;
    padding: 20px 8px 20px !important;
    overflow: hidden;
  }
  .sidebar-left .logo span,
  .sidebar-left .logo-text { display: none !important; }
  .sidebar-left .logo { justify-content: center; padding: 0 !important; margin-bottom: 20px; }
  .sidebar-left .logo img { height: 26px; }
  .sidebar-left .nav-item span:not(.notif-badge):not(.vs-mnav-badge),
  .sidebar-left .nav-item [data-i18n],
  .sidebar-left #nav-shared-pro-badge { display: none !important; }
  .sidebar-left .nav-item { justify-content: center; padding: 10px 0; gap: 0; }
  .sidebar-left .vs-search-wrap { display: none !important; }
  .sidebar-left .user-chip-name,
  .sidebar-left .user-chip-plan,
  .sidebar-left .user-chip-logout span { display: none !important; }
  .sidebar-left-bottom { align-items: center; }
  .sidebar-left .user-chip { flex-direction: column; gap: 8px; padding: 8px 4px; }
  .sidebar-left .btn-primary span,
  .sidebar-left #sidebar-new-post span { display: none !important; }
  .sidebar-left .btn-primary,
  .sidebar-left #sidebar-new-post { min-width: 0; padding: 10px; border-radius: 50%; justify-content: center; }
}

/* ── Mobile: show bottom nav, fixed-height inner scroll ──────────── */
@media (max-width: 680px) {
  #vs-mobile-nav { display: flex; flex-direction: column; justify-content: flex-end; }

  /* Keep app fixed at 100vh — inner columns scroll */
  .app { height: 100vh !important; overflow: hidden; }

  /* All main content columns: subtract bottom nav height */
  .feed-col, .lb-col, .settings-col, .search-col {
    max-width: 100% !important;
    border-right: none !important;
    border-left: none !important;
    height: calc(100vh - 56px) !important;
    -webkit-overflow-scrolling: touch;
  }

  /* feed-col keeps overflow:hidden, inner .feed-scroll scrolls */
  /* lb-col, settings-col, search-col already have overflow-y:auto */
  .lb-col       { overflow-y: auto !important; padding-bottom: 20px !important; }
  .settings-col { overflow-y: auto !important; }
  .search-col   { overflow-y: auto !important; }

  /* Extra padding so last post actions aren't hidden behind bottom nav */
  .feed-scroll  { padding-bottom: 72px !important; }
  #posts-feed, #feed-list { padding-bottom: 72px !important; }

  /* prevent scroll on body when drawer open */
  body.vs-drawer-open { overflow: hidden; }

  /* Mobile search bar (injected by mobile-nav.js on search.html) */
  #vs-mobile-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
    background: var(--surface, #111118);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  #vs-mobile-search-bar input {
    flex: 1;
    background: var(--surface-2, #1A1A24);
    border: 1px solid var(--border-hi, rgba(255,255,255,0.13));
    border-radius: 999px;
    padding: 9px 14px;
    color: var(--text-1, #fff);
    font-size: 14px;
    font-family: inherit;
    outline: none;
  }
  #vs-mobile-search-bar input::placeholder { color: var(--text-3, rgba(255,255,255,0.3)); }
  #vs-mobile-search-bar input:focus { border-color: var(--accent-1, #4F8EF7); }
  #vs-mobile-search-bar button {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent-1, #4F8EF7);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* Notification dropdown: full-width above bottom nav on mobile */
  #notif-dropdown {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════
   3.  FEED / POST CARDS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* post card inner padding */
  .post-card { padding: 12px 14px !important; }
  .post-header { gap: 8px !important; }
  .post-avatar { width: 36px !important; height: 36px !important; }

  /* composer */
  .composer { padding: 12px 14px !important; }
  .composer-input { font-size: 15px !important; }

  /* post actions */
  .post-actions { gap: 12px !important; }
  .post-action-btn { font-size: 12px !important; }

  /* feed header tabs */
  .feed-tabs { padding: 0 14px !important; gap: 8px !important; }
  .feed-tab { font-size: 13px !important; }

  /* composer toolbar */
  .composer-toolbar { gap: 4px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   4.  LEADERBOARD
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* podium: scale down */
  .podium { gap: 8px !important; padding: 12px 8px 16px !important; }
  .podium-slot { min-width: 80px !important; }
  .podium-av   { width: 52px !important; height: 52px !important; }
  .podium-av.rank-1-av { width: 64px !important; height: 64px !important; }
  .podium-name { font-size: 11px !important; }
  .podium-num  { font-size: 18px !important; }
  .podium-pts  { font-size: 10px !important; }
  .podium-block { height: 30px !important; }

  /* tabs */
  .lb-tabs { padding: 0 12px !important; gap: 6px !important; }
  .lb-tab  { font-size: 12px !important; padding: 6px 10px !important; }

  /* list rows */
  .lb-row { padding: 8px 10px !important; }
  .lb-av  { width: 34px !important; height: 34px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   5.  SETTINGS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .settings-col {
    padding: 0 !important;
    height: auto !important;
    overflow-y: visible !important;
  }
  .settings-header { padding: 20px 16px 0 !important; }
  .settings-body   { padding: 16px !important; gap: 16px !important; }
  .settings-card   { padding: 16px !important; }
  .settings-card h3 { font-size: 14px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   6.  SEARCH
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .search-col { padding: 16px !important; }
  .search-results-header { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   7.  MODALS / OVERLAYS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* generic modal panel */
  .modal-panel,
  .compose-modal-box,
  [id$="-modal"] .modal-inner {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  /* center modal overlays */
  .modal-overlay,
  .compose-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  /* notification panel */
  #notif-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    top: auto !important;
    bottom: 56px !important;
  }
  /* AI chat widget: full width */
  #vs-chat-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    top: auto !important;
    bottom: 56px !important;
  }
  #vs-chat-bubble {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   8.  PROFILE PAGE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .profile-header-card { padding: 16px !important; }
  .profile-avatar      { width: 64px !important; height: 64px !important; }
  .profile-stats       { gap: 16px !important; }
  .profile-stat-num    { font-size: 18px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   9.  AUTH PAGE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .auth-card { padding: 28px 20px !important; margin: 16px !important; }
  .auth-logo  { font-size: 20px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   10. BIBLIOTECA HEADER (already has rules, enhance here)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .bib-header-nav { display: none !important; }
  .bib-header-right .vs-theme-toggle { display: none !important; }
  .bib-count { display: none !important; }
  .bib-lang-toggle { display: none !important; }
}

/* (shared page feed handled by section 2 mobile rules) */

/* ══════════════════════════════════════════════════════════════════
   12. GLOBAL SMALL-SCREEN FIXES
   ══════════════════════════════════════════════════════════════════ */

/* ── Biblioteca: hide mindmap + sticky notes on mobile ── */
@media (max-width: 680px) {
  /* Mindmap unusable on small screen */
  #rt-btn-mindmap,
  #bib-mindmap-modal { display: none !important; }

  /* Sticky notes have absolute position with desktop coords → horizontal overflow.
     Hide them entirely on mobile (also hide the button to create new ones). */
  .sticky-note { display: none !important; }
  .rt-btn[data-tool="sticky"] { display: none !important; }

  /* Prevent any residual absolute children from causing horizontal scroll */
  #br-content-wrap { overflow-x: hidden !important; }
}

/* ── Biblioteca: flashcard sidebar full-screen drawer on mobile ── */
#br-fc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 499;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s, visibility .28s;
}
#br-fc-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 680px) {
  #br-fc-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: hidden !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  /* Lock body scroll when flashcard drawer is open — no position:fixed (breaks iOS) */
  body.fc-drawer-open {
    overflow: hidden !important;
    touch-action: none;
  }
  /* Prevent card text overflow */
  #br-fc-sidebar .br-fc-card-q,
  #br-fc-sidebar .br-fc-card-a {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }
}

@media (max-width: 680px) {
  /* prevent horizontal overflow */
  .app { overflow-x: hidden; }

  /* images inside posts */
  .post-img { max-height: 280px !important; }

  /* search dropdown: full width */
  .vs-search-dropdown { width: 100%; left: 0 !important; right: 0 !important; }

  /* sidebar-right widgets that appear as cards in right sidebar */
  .widget-card { padding: 14px !important; }
}

/* Tablet tweaks (601-1024) */
@media (max-width: 1024px) and (min-width: 681px) {
  /* feed col can be wider without right sidebar */
  .feed-col { max-width: 680px; }
}

/* ── Scroll-to-top button (biblioteca, mobile only) ─────────────── */
#vs-scroll-top {
  display: none; /* hidden on desktop */
}
@media (max-width: 680px) {
  #vs-scroll-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: 128px; /* above AI chat bubble (~68px) + bubble height (~52px) + 8px gap */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-1, #4F8EF7);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    z-index: 490;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s, visibility .25s, transform .25s;
    transform: translateY(8px);
  }
  #vs-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}