/* ═══════════════════════════════════════════════════════════════
   LAYOUT: HEADER, BODY, SIDEBARS, MAIN FEED, RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   LAYOUT: HEADER
   ─────────────────────────────────────────────────────────────
   Position: FIXED (not sticky). Sticky is relative to its scroll
   ancestor — which means scrolling in side columns or in any flex
   gap could break the pin. Fixed is anchored to the viewport, so
   no matter where the wheel event lands, the header stays put.
   This matches the X/Twitter pattern.
   ═══════════════════════════════════════════════════════════════ */
.header {
  /* !important here is intentional belt-and-suspenders against any
     stale cached CSS or specificity surprise. The header MUST stay
     pinned to the viewport top regardless of which area scrolls. */
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 200;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  /* PERF: backdrop-filter removed in P35. It was a major scroll-lag
     contributor on Chrome/Windows because every scroll forces the
     compositor to re-rasterize whatever's behind the header. Solid
     background looks nearly identical and removes that cost entirely. */
  /* Force a compositor layer so the header renders on its own GPU
     surface — bulletproofs against any scroll-induced repaint quirk
     in Chrome where sticky/fixed elements can momentarily lift. */
  transform: translateZ(0);
}
.header-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 20px; height: 100%;
  display: flex; align-items: center; gap: 16px;
}
.header-logo {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  flex-shrink: 0; transition: opacity var(--transition);
}
.header-logo:hover { opacity: .8; }
.header-logo-text { font-size: 20px; font-weight: 800; color: var(--text-0); letter-spacing: -.03em; }
.header-logo-text .brand-x { color: var(--accent); }

/* P65.303 — Guest-mode back button.  Injected by renderExploreModeChrome
   to the left of the NOX logo when the viewer is browsing as a guest.
   Compact circular button with a chevron — matches the visual weight
   of the logo's icon so the header doesn't feel front-heavy. */
.header-guest-back {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform .08s ease;
}
.header-guest-back:hover {
  background: var(--bg-3);
  border-color: var(--border-hover);
  color: var(--text-0);
}
.header-guest-back:active { transform: translateY(1px); }
.header-search {
  flex: 1; max-width: 600px; position: relative; margin: 0 auto;
}
.header-search .input {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 8px 80px 8px 36px; font-size: 13px;
  color: var(--text-2); transition: all .2s;
  font-family: var(--font); letter-spacing: .01em;
}
.header-search .input::placeholder { color: var(--text-4); font-size: 13px; }
.header-search .input:focus {
  background: var(--bg-1); border-color: rgba(0,196,114,.25);
  box-shadow: 0 0 0 3px rgba(0,196,114,.06); color: var(--text-0);
}
.header-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-4); transition: color .2s; }
.header-search .input:focus ~ svg, .header-search:focus-within svg { color: var(--accent); }
.header-search-hint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px; pointer-events: none;
}
.header-search-hint kbd {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 6px; font-size: 10px; color: var(--text-4); font-family: var(--mono);
  line-height: 1.4;
}
.header-search .input:focus ~ .header-search-hint { opacity: 0; }
.header-search-hint .sep { color: var(--text-4); font-size: 9px; }
.header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.header-lang-btn {
  height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; transition: all .15s; position: relative; background: transparent; border: 1px solid var(--border);
  padding: 0 10px; color: var(--text-2);
}
.header-lang-btn:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--text-0); }
.header-lang-btn svg { flex-shrink: 0; opacity: .7; }
.header-lang-btn:hover svg { opacity: 1; }
.lang-code { font-size: 11px; font-weight: 700; letter-spacing: .04em; font-family: var(--mono); }
.lang-menu { padding: 6px 0 !important; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; }
.lang-menu::-webkit-scrollbar { width: 4px; }
.lang-menu::-webkit-scrollbar-track { background: transparent; }
.lang-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }
.lang-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.15); }
.lang-menu .lang-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer;
  font-size: 13px; color: var(--text-2); transition: background .1s; width: 100%;
}
.lang-menu .lang-item:hover { background: rgba(255,255,255,.04); }
.lang-menu .lang-item.active { color: var(--accent); background: rgba(0,196,114,.04); }
.lang-menu .lang-item .lang-flag { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.lang-menu .lang-item .lang-name { flex: 1; }
.lang-menu .lang-item .lang-check { margin-left: auto; font-size: 11px; color: var(--accent); opacity: 0; }
.lang-menu .lang-item.active .lang-check { opacity: 1; }
.lang-code-badge { font-size: 10px; font-weight: 700; font-family: var(--mono); color: var(--text-3); background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; min-width: 26px; text-align: center; letter-spacing: .03em; flex-shrink: 0; }
.lang-item.active .lang-code-badge { color: var(--accent); border-color: rgba(0,196,114,.2); background: rgba(0,196,114,.06); }
.lang-search-wrap { display: flex; align-items: center; gap: 7px; padding: 6px 10px; margin: 2px 6px 4px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; transition: border-color .15s; }
.lang-search-wrap:focus-within { border-color: rgba(0,196,114,.3); }
.lang-search-input { background: transparent; border: none; outline: none; color: var(--text-0); font-size: 12px; font-family: inherit; width: 100%; padding: 0; }
.lang-search-input::placeholder { color: var(--text-4); }
.header-notif {
  position: relative; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); transition: all .2s; border: 1px solid transparent;
  background: transparent; cursor: pointer;
}
.header-notif:hover { background: var(--bg-hover); color: var(--text-1); border-color: var(--border); }
.header-notif-dot {
  position: absolute; top: 7px; right: 7px; width: 9px; height: 9px;
  background: var(--red); border-radius: 50%; border: 2px solid var(--bg-0);
  box-shadow: 0 0 0 0 rgba(239,68,68,.4); animation: notifPulse 2s ease-in-out infinite;
}
.header-notif-count {
  position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px;
  background: var(--red); border-radius: 8px; border: 2px solid var(--bg-0);
  font-size: 9px; font-weight: 700; color: #fff; display: none;
  align-items: center; justify-content: center; padding: 0 3px;
  font-family: var(--mono); line-height: 1;
}
.header-notif-count.show { display: flex; }
@keyframes notifPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); } }
.header-profile-btn {
  display: flex; align-items: center; gap: 6px; padding: 4px; padding-right: 8px;
  border-radius: 24px; cursor: pointer; transition: all .2s;
  border: 1px solid transparent; background: transparent;
}
.header-profile-btn:hover { background: var(--bg-hover); border-color: var(--border); }
.header-profile-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12px;
  font-weight: 700; color: #fff; transition: all .2s;
  border: 2px solid transparent; flex-shrink: 0;
  overflow: hidden;
}
.header-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.header-profile-btn:hover .header-profile-avatar { border-color: transparent; }
.header-profile-chevron { color: var(--text-4); transition: transform .2s; flex-shrink: 0; }
.header-profile-btn:hover .header-profile-chevron { color: var(--text-2); }
.header-profile-btn.open .header-profile-chevron { transform: rotate(180deg); }
.user-menu-header {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border-bottom: 1px solid rgba(0,196,114,.08); margin-bottom: 4px;
  background: linear-gradient(180deg, rgba(0,196,114,.03) 0%, transparent 100%);
  border-radius: 8px 8px 0 0;
}
.user-menu-avatar {
  width: 34px; height: 34px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 13px;
  font-weight: 700; color: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,196,114,.15);
  overflow: hidden;
}
.user-menu-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* P65.127 — SM badge inline with the username in the dropdown
   header. Default `.sm-badge` is sized for byline contexts (17px
   tall, 26px min-width) which looks chunky here next to the small
   green-check icon. Shrink it to match the row's visual weight. */
.user-menu-header .sm-badge {
  height: 14px;
  min-width: 22px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 5px;
  /* Drop the constant pulse — the dropdown is a transient menu,
     a glowing badge inside it competes with the menu items. */
  animation: none;
}
.user-menu-header .sm-badge .sm-badge-text {
  font-size: 8.5px;
  letter-spacing: 0.04em;
}
.user-menu-header .sm-badge .sm-badge-shine {
  /* Hide the sweeping shine in this context too — same reason as
     the animation. Looks busy in a small menu. */
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT: BODY
   ═══════════════════════════════════════════════════════════════ */
.app-body {
  display: flex; min-height: calc(100vh - var(--top-offset));
  max-width: 1100px; margin: 0 auto;
  /* Header + ticker are now position: fixed, so push content down
     to clear them. This is the offset for the entire scrollable
     area, NOT a sticky offset. */
  padding-top: var(--top-offset);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT: LEFT SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar-left {
  width: var(--sidebar-w); flex-shrink: 0; padding: 14px 10px 14px 16px;
  position: sticky; top: var(--top-offset); height: calc(100vh - var(--top-offset));
  overflow-y: auto; border-right: 1px solid var(--border);
  /* Twitter-style: invisible until hovered. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s ease;
}
.sidebar-left:hover { scrollbar-color: rgba(255,255,255,.14) transparent; }
.sidebar-left::-webkit-scrollbar { width: 6px; }
.sidebar-left::-webkit-scrollbar-track { background: transparent; }
.sidebar-left::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background .2s ease;
}
.sidebar-left:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); }
.sidebar-left::-webkit-scrollbar-thumb:hover { background: rgba(0,196,114,.30); }
.nav-section { margin-bottom: 4px; }
.nav-section-title {
  font-size: 10px; font-weight: 600; color: var(--text-4); letter-spacing: .08em;
  text-transform: uppercase; padding: 10px 14px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px;
  font-size: 13px; font-weight: 500; color: var(--text-2); border-radius: var(--radius-s);
  transition: all .15s ease; position: relative;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-1); }
.nav-item-active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.nav-item svg { flex-shrink: 0; width: 18px; height: 18px; }
.nav-item-badge {
  margin-left: auto; background: var(--red); color: #fff; font-size: 10px;
  font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 18px;
  text-align: center;
}
.nav-divider { height: 1px; background: var(--border); margin: 10px 12px; }
/* P65.36 — external nav link (opens new tab). */
.nav-item-external .nav-item-ext {
  margin-left: auto;
  color: var(--text-4);
  flex-shrink: 0;
  width: 10px; height: 10px;
}
.nav-item-external:hover .nav-item-ext { color: var(--accent); }
.sidebar-footer {
  padding: 12px; margin-top: auto; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-4);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT: MAIN FEED
   ═══════════════════════════════════════════════════════════════ */
.main-feed {
  flex: 1; min-width: 0; padding: 0 20px; max-width: 620px;
  position: sticky; top: var(--top-offset); height: calc(100vh - var(--top-offset));
  overflow-y: auto; overflow-x: hidden;
  /* Twitter-style scrollbar: invisible by default, dim on hover.
     Firefox: scrollbar-color "thumb track" — both transparent until
     :hover swaps in real colors below. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s ease;
}
.main-feed:hover { scrollbar-color: rgba(255,255,255,.14) transparent; }
.main-feed::-webkit-scrollbar { width: 6px; height: 6px; }
.main-feed::-webkit-scrollbar-track { background: transparent; }
.main-feed::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background .2s ease;
}
.main-feed:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); }
.main-feed::-webkit-scrollbar-thumb:hover  { background: rgba(0,196,114,.30); }
.feed-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-0); padding: 14px 0 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT: RIGHT SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar-right {
  width: var(--right-w); flex-shrink: 0; padding: 14px 16px 14px 12px;
  position: sticky; top: var(--top-offset); height: calc(100vh - var(--top-offset));
  overflow-y: auto; overflow-x: hidden;
  /* Twitter-style: invisible until hovered. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s ease;
}
.sidebar-right:hover { scrollbar-color: rgba(255,255,255,.14) transparent; }
.sidebar-right::-webkit-scrollbar { width: 6px; }
.sidebar-right::-webkit-scrollbar-track { background: transparent; }
.sidebar-right::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background .2s ease;
}
.sidebar-right:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); }
.sidebar-right::-webkit-scrollbar-thumb:hover { background: rgba(0,196,114,.30); }
.right-card { margin-bottom: 10px; border-color: rgba(0,196,114,.12) !important; }
.right-card:hover { transform: none !important; border-color: rgba(0,196,114,.12) !important; }
.right-card-title { font-size: 13px; font-weight: 700; color: var(--text-0); margin-bottom: 10px; letter-spacing: -.01em; }
.right-card-more { font-size: 12px; color: var(--accent); cursor: pointer; margin-top: 10px; display: inline-block; }
.right-card-more:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .sidebar-right { display: none; }
  .main-feed { max-width: 100%; }
}
@media (max-width: 900px) {
  .sidebar-left { display: none; }
  .header-search { max-width: none; }
  .mobile-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--bg-1); border-top: 1px solid var(--border);
    display: flex; justify-content: space-around; padding: 6px 0 env(safe-area-inset-bottom);
  }
  .mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 12px; font-size: 10px; color: var(--text-3); transition: color var(--transition);
  }
  .mobile-nav-item.active { color: var(--accent); }
  .app-body { padding-bottom: 60px; }
  .settings-nav { display: none; }
  .settings-content { padding: 16px; }
}
@media (min-width: 901px) {
  .mobile-nav { display: none; }
}
@media (max-width: 600px) {
  .header-inner { padding: 0 12px; gap: 8px; }

  .btn span.hide-mobile { display: none; }
  .post-inner { padding: 14px; }
  .notif-panel { width: calc(100% - 16px); right: 8px; }
  .stat-grid-3, .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .profile-header { flex-direction: column; align-items: center; text-align: center; }
  .profile-stats-row { justify-content: center; }
  .profile-actions { justify-content: center; }
}
.hm-scroll::-webkit-scrollbar { display:none; }
</style>