/* social.css — Social Feature UI
   Standalone file matching the app's aesthetic */

.lp-ic{ display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; line-height:1; vertical-align:-0.125em; flex:0 0 auto; }
.lp-ic > svg{ width:1em; height:1em; display:block; stroke:currentColor; fill:none; }
.lp-ic > svg [fill="currentColor"]{ fill:currentColor; }

/* Which set of system surfaces this page belongs to, and on a phone which
   colour the OS paints the status bar icons. It has to follow this app's own
   theme switch, not the system's: a static "light dark" means "follow
   the system", which puts the bar and the icons on it on opposite sides and
   makes the clock vanish into the bar. Same shape as app.css. */
:root{ color-scheme: dark; }
html.light-theme, html.light-theme-preload, body.light-theme{ color-scheme: light; }
/* Light mode ka gehra cyan, app.css jaisa — neon cyan safed par 1.54 : 1 tha.
   Ye page saved accent nahi lagata, isliye seedha cyan ka shade. --on-accent
   sirf light me hai; dark `var(--on-accent, #000)` ke fallback se #000 rakhta. */
body.light-theme, html.light-theme-preload body{
  --accent:#057BB9; --accent-rgb:5,123,185;
  --cyan:#057BB9;   --cyan-rgb:5,123,185;
  --on-accent:#fff;
}
:root{
  --bg:#000000;  --text:#F8FAFC;  --text-dim:#94A3B8;  --text-faint:#64748B;
  --card:rgba(255,255,255,.03);   --card-hover:rgba(255,255,255,.05);
  --card-brd:rgba(255,255,255,.24);
  --surface-bg:rgba(255,255,255,.04); --surface-border:rgba(255,255,255,.24);
  --inner-box-bg:rgba(255,255,255,0.04);
  --inner-box-border:rgba(255,255,255,0.26);
  --feed-sep:#28303f;
  --radius:18px;   --pad-page:24px;

  --accent:var(--cyan);   --accent-rgb:var(--cyan-rgb);
  --cyan:#00E5FF;    --cyan-rgb:0,229,255;
  --magenta:#FF3EA0; --magenta-rgb:255,62,160;
  --amber:#FFB224;   --amber-rgb:255,178,36;
  --violet:#9B6BFF;  --lime:#10B981;  --blue:#3B82F6;
  --danger:#FF4D6D;

  --content-bg:var(--bg);
  --content-text:var(--text);
  --content-text-dim:var(--text-dim);
  --content-text-faint:var(--text-faint);
  --content-card-bg:var(--bg);
  --content-card-border:var(--card-brd);
  --content-card-shadow:none;
  --content-divider:var(--surface-border);
  --chat-bar-bg:var(--bg);
  --chat-bubble-bg:rgba(255,255,255,0.12);
  --chat-bubble-border:rgba(255,255,255,0.2);
  --chat-bubble-text:#FFFFFF;
}

html.light-theme-preload,
html.light-theme,
body.light-theme{
  --bg:#FFFFFF;  --text:#0F172A;  --text-dim:#475569;  --text-faint:#94A3B8;
  --card:rgba(0,0,0,.025);        --card-hover:rgba(0,0,0,.04);
  --card-brd:rgba(0,0,0,.12);
  --surface-bg:rgba(0,0,0,.02);   --surface-border:rgba(0,0,0,.10);
  --inner-box-bg:rgba(0,0,0,0.03);
  --inner-box-border:rgba(0,0,0,0.10);
  --feed-sep:#E2E8F0;
  --glass-bg:rgba(255,255,255,.85);
  --danger:#DC2626;

  --content-bg:#FFFFFF;
  --content-text:#0F172A;
  --content-text-dim:#475569;
  --content-text-faint:#94A3B8;
  --content-card-bg:#FFFFFF;
  --content-card-border:#E2E8F0;
  --content-card-shadow:0 2px 12px rgba(0,0,0,.06);
  --content-divider:#E2E8F0;
  --chat-bar-bg:#FFFFFF;
  --chat-bubble-bg:rgba(0, 92, 75, 0.7);
  --chat-bubble-border:transparent;
  --chat-bubble-text:#FFFFFF;
}

body.light-theme .soc-header {
  background: #FFFFFF;
}

body.social-page {
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:'Inter', sans-serif;
  /* clip, not hidden: hidden makes the body a scroll container, which is
     what broke scrolling inside the sections. Carried over from caa02a7. */
  overflow-x:clip;
  -webkit-font-smoothing: antialiased;
}
.social-page * { box-sizing:border-box; }
.social-page h1,.social-page h2,.social-page h3,.social-page h4,.social-page h5,.social-page h6 { 
  font-family:'Space Grotesk', sans-serif; font-weight:700; margin:0 0 10px 0; 
}
.social-page a { color:var(--accent); text-decoration:none; }
.social-page button { font-family:inherit; cursor:pointer; }

/* ============================================================
   HEADER
   ============================================================ */
.soc-header{
  display:flex; align-items:center; gap:14px;
  padding:10px var(--pad-page);
  background:var(--bg);
  border-bottom:1px solid var(--surface-border);
  position:sticky; top:0; z-index:200;
}
.soc-header-logo{
  width:32px; height:32px; border-radius:10px; object-fit:cover;
}
.soc-header-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:18px; font-weight:700; letter-spacing:0.5px;
  color:var(--text);
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.soc-header-back{
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; width:32px; height:32px; margin-right:-6px;
  color:var(--text); font-size:24px; cursor:pointer;
}
.top-tabs{
  flex:1; display:flex; align-items:center; gap:8px;
}
.top-tabs .nav-btn{
  background:none; border:none; color:var(--text-dim); padding:6px 12px;
  border-radius:8px; font-weight:600; font-size:14px;
  display:flex; align-items:center; gap:6px; transition:0.2s;
}
.top-tabs .nav-btn:hover{ color:var(--text); background:var(--surface-bg); }
.top-tabs .nav-btn.active{
  color:var(--text); background:var(--surface-border);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app-container{
  position:relative; min-height:calc(100dvh - 53px);
}
.page-content{
  display:none; padding:var(--pad-page);
  max-width:800px; margin:0 auto;
}
.page-content.active{ display:block; }
.sec-chat-layout.active {
  display: flex !important;
  flex-direction: column;
  /* --chat-h is set from visualViewport.height in social.js, in real pixels —
     that API is the one signal that reliably shrinks for the on-screen
     keyboard on every mobile browser; 100dvh does not on all of them, and
     trusting it here is what let the composer sit above a slab of leftover
     space instead of the keyboard. The calc() is only the value for the
     instant before that script runs. */
  height: var(--chat-h, calc(100dvh - 53px));
}
.soc-feed-list{
  display:flex; flex-direction:column; gap:16px;
}
/* Unread. Same dot in both places it appears — beside a club in the list, and
   on the Clubs tab — so one is recognisably the other seen from further away.
   On the tab it is positioned against the tab; in a card it is a plain inline
   box, which the card's own style attribute overrides to static. */
.club-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
  position:absolute; top:6px; right:calc(50% - 16px);
}

/* The heading over each Clubs section. Was an inline style on the one heading
   there used to be; there are three now, and three copies of the same inline
   style is how two of them end up different from the third. */
/* One surface, top to bottom. The cards are white and the page behind them was
   not, so every gap between sections read as a grey band and the space under
   the last card read as an empty block — a layout bug rather than a margin.
   The section is the card colour now and tall enough to reach the bottom bar,
   so there is nothing behind the list to show through. */
#sec-clubs{
  background:var(--content-bg);
  min-height:calc(100dvh - 53px);
}
/* This list carries .soc-feed-list for its column layout, and on a phone that
   class also paints the separator colour behind the feed's edge-to-edge cards.
   The clubs cards draw their own dividers, so all that background did here was
   show through: as a strip above the first heading, a line either side of each
   one, and — because padding is painted too — a 120px grey slab under the last
   card that read as an empty section. */
#clubs-listed-container{
  background:var(--content-bg);
  padding-top:0 !important;
}
.clubs-head{
  padding:20px var(--pad-page) 8px; margin:0;
  background:var(--content-bg);
  font-size:12px; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-faint);
}
.liked-icon svg {
  fill: currentColor !important;
}
.soc-card {
  background: var(--content-bg);
  border: 1px solid var(--content-card-border);
  border-radius: var(--radius);
  padding: 20px var(--pad-page);
}
/* Tail clearance so a scrolling list's last card is not left under the fixed
   bottom bar. Scoped to the two lists that actually scroll to an end — it used
   to be every .soc-card:last-child, and the Clubs page stacks three lists on
   one screen, so each of them grew 120px of blank space in the middle of the
   page. Measured: 120px on three cards where 16px was wanted. */
#feed-container > .soc-card:last-child,
#profile-container > .soc-card:last-child {
  padding-bottom: 120px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}
.sec-chat-layout{
  height:calc(100dvh - 53px); /* 53px header */
}

/* WhatsApp style chat bubbles */
.chat-bubble-me { background:#005c4b; color:#e9edef; }
.chat-bubble-other { background:#202c33; color:#e9edef; border:1px solid var(--surface-border); }
.light-theme .chat-bubble-me, body.light-theme .chat-bubble-me { background:#d9fdd3; color:#111b21; }
.light-theme .chat-bubble-other, body.light-theme .chat-bubble-other { background:#ffffff; color:#111b21; border:1px solid #d1d7db; }

/* ============================================================
   BOTTOM NAV
   ============================================================ */
/* Hidden by default; the phone breakpoint below turns it into the fixed row.
   This page does not load app.css — the comment that used to sit here said
   app.css controlled this, which was never true for a standalone page, and
   left .bottom-nav with no layout rule at all: it rendered as a plain block,
   so the tabs (each already display:flex on its own) stacked one under the
   other instead of sitting in a row, and the FAB circle — which does have its
   own fixed position — floated with nothing around it. resources.css has the
   same nav and got this right; this mirrors it. */
.bottom-nav { display:none; }
/* .social-page a sets color:var(--accent) and outranks a bare .desktop-fab,
   so the home icon came out cyan on a cyan circle — invisible. */
.social-page .desktop-fab{
  position:fixed; right:32px; bottom:32px; z-index:90;
  width:56px; height:56px; border-radius:50% !important;
  background:var(--accent); color:var(--on-accent, #000);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; box-shadow:0 8px 32px rgba(0,0,0,0.4);
  transition:transform 0.2s;
}
.social-page .desktop-fab:hover{ transform:scale(1.05) translateY(-2px); }

/* ============================================================
   LOADERS
   ============================================================ */
.soc-skeleton{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg); display:flex; flex-direction:column;
}
.soc-skel-header{
  height:53px; display:flex; align-items:center; gap:14px; padding:0 var(--pad-page);
  border-bottom:1px solid var(--surface-border);
}
.shimmer{
  background:linear-gradient(90deg, var(--inner-box-bg) 0%, var(--inner-box-border) 50%, var(--inner-box-bg) 100%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite linear;
}
@keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
#transitionLoader{
  position:fixed; top:12px; right:var(--pad-page); z-index:999;
  display:none; align-items:center; justify-content:center;
}
/* The hand-off back to the app. Deliberately the same shape and the same
   numbers as index.html's own boot loader (.gl-logo / .gl-skeleton-track in
   app.css) — 100px logo, 32px gap, a 180x4 track with a sweeping half-width
   bar — so the two documents meet without the picture changing. Copied rather
   than shared because this page does not load app.css; if that loader is ever
   restyled, this is the other half to restyle with it. */
.as-logo{
  width:100px; height:100px; border-radius:24px; object-fit:cover;
  margin-bottom:32px; border:1px solid var(--inner-box-border);
  animation:asPulse 2s infinite ease-in-out;
}
.as-track{
  width:180px; height:4px; background:var(--inner-box-border);
  border-radius:4px; overflow:hidden; position:relative;
}
.as-bar{
  position:absolute; top:0; left:0; bottom:0; width:50%;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:asBar 1.5s infinite linear;
}
@keyframes asBar{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(200%); } }
@keyframes asPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }

.round-spinner{
  width:20px; height:20px;
  border:2px solid var(--surface-border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.6s linear infinite;
}
@keyframes spin{ 100%{transform:rotate(360deg);} }

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media(max-width:1024px){
  :root{ --pad-page:20px; }
  .social-page .desktop-fab{ right:24px; bottom:24px; }
}

@media(max-width:640px){
  :root{ --pad-page:14px; }
  
  .top-tabs{ display:none; }
  .social-page .desktop-fab{ display:none; }

  /* The row itself. .bottom-tab already lays out its own icon-over-label; this
     is what was missing — the parent turning into a fixed, horizontal bar
     instead of the block it defaulted to. Same values as resources.css's
     working .bottom-nav. */
  .bottom-nav {
    display:flex; position:fixed; bottom:0; left:0; right:0;
    /* The surface colour, not the page colour: white in light mode, so the
       whole strip behind the icons reads as one white bar continuous with the
       composer above it, instead of the page's grey showing through. Dark
       mode resolves this to the same value it always had. */
    background:var(--content-bg); border-top:1px solid var(--surface-border);
    padding:8px 10px; padding-bottom:env(safe-area-inset-bottom, 8px);
    justify-content:space-around; z-index:100;
  }

  .app-container{ min-height:calc(100dvh - 53px - 83px); }
  
  /* On phone the page reads as one edge-to-edge feed separated by a band */
  .page-content{
    padding:0;
  }
  .soc-feed-list{
    gap:0; background:var(--feed-sep);
  }
  
  /* Each card inside feed-list will need to have its own background and padding to simulate the unframed layout */
  .soc-card{
    background:var(--content-bg);
    border:none !important; border-radius:0 !important;
    margin-bottom:0;
    border-bottom:1px solid var(--feed-sep) !important;
    padding:20px var(--pad-page);
  }
  #feed-container > .soc-card:last-child,
  #profile-container > .soc-card:last-child {
    padding-bottom: 120px !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
  }
  /* The Clubs page gets its clearance once, on the container, instead of on
     the last card of each of its three lists. */
  #clubs-listed-container { padding-bottom: 120px; }

  /* The Profile tab's Load More is drawn INSIDE #profile-container, and that
     container carries .soc-feed-list — which on a phone paints the separator
     colour behind the edge-to-edge cards. The Feed tab's copy of this control
     is a sibling of its list, not a child, so it has always shown the page
     colour; this one showed a grey-blue slab sitting under the last post, and
     the button on top of it read as a different colour from everything else in
     dark mode.

     The 50px goes from margin to padding for the reason the chat bar's 10px
     did: a margin is outside the box, so nothing paints it and the grey would
     still show through above the button. The 120px at the bottom is the same
     clearance the feed's last card gets, so the control clears the fixed nav
     instead of ending underneath it. */
  #profile-container > #profileLoadMoreContainer {
    background: var(--content-bg);
    margin-top: 0 !important;
    padding: 66px 16px 120px !important;
  }

  .sec-chat-layout {
    padding-bottom: 0;
  }
  
  .chat-input-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 99 !important;
    /* The 10px under the type box lives here, in this bar's own bottom
       padding, and no longer as a margin below the bar. A margin is outside
       the box, so nothing painted it and the page background showed through —
       that was the grey strip. Padding is inside, so this bar's own
       background covers it: white in light mode, the app's dark in dark.
       It sits on the bar rather than on the textarea itself because the
       textarea and the send button are centred against each other in this
       flex row — a margin on only one of them would push the two out of line
       by half of it. Below the row is below the type box either way, since
       the textarea is the taller of the two. */
    padding: 8px 12px 10px 12px !important;
    background: var(--chat-bar-bg) !important;
  }
  .chat-input-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 500px;
    background: inherit;
    z-index: -1;
    display: none;
  }
  /* The keyboard is the only thing that takes this bar off screen. An earlier
     pass hid it for the whole Chat tab on the reasoning that WhatsApp shows
     no tab bar inside a chat — but this app's Chat is a tab, not a screen you
     opened from a list, and losing the way back to Feed for as long as you're
     on it is not the same trade. Keyboard up it goes, keyboard down it comes
     back. Nothing here is chat-specific: the same applies to a search field
     or a post on any other tab. */
  body.keyboard-open .bottom-nav {
    display: none !important;
  }
  /* No height override for the keyboard here any more — .sec-chat-layout.active
     already tracks it every time visualViewport fires, keyboard open or not,
     so there is nothing left for a keyboard-open case to override. The margin
     doesn't change either; only what sits under it does. */
  body.keyboard-open .chat-input-bar {
    border-bottom: 1px solid var(--feed-sep);
  }
  body.keyboard-open .chat-input-bar::after {
    display: block;
  }
  .fab-container {
    display:flex; align-items:center; justify-content:center;
    flex:0 0 60px; position:relative;
  }
  .fab-btn {
    position:absolute; top:-24px;
    width:56px; height:56px; border-radius:50%;
    background:var(--accent); color:var(--on-accent, #000);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition:transform 0.2s;
  }
  .fab-btn:active { transform:scale(0.92); }
  .fab-btn .lp-ic { font-size:24px; line-height:1; color:#000; }
  
  .bottom-tab {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:4px 0; gap:3px; font-size:11px; font-weight:600;
    color:var(--text-faint); border:none; background:none !important;
    min-width:60px; min-height:44px;
    -webkit-tap-highlight-color:transparent;
  }
  .bottom-tab .bt-icon{ font-size:19px; line-height:1; transition:0.2s; }
  .bottom-tab .bt-label{ font-size:11px; font-weight:600; }
  .bottom-tab.active{ color:var(--accent); font-weight:700; background:none !important; }
  .bottom-tab.active .bt-icon{ transform:translateY(-1px); }
  .bottom-tab.active .bt-label{ text-decoration:underline; text-underline-offset:3px; }
}

/* Hide scrollbar for chat inputs */
.chat-input-textarea {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-input-textarea::-webkit-scrollbar {
  display: none;
}

/* Transform only, from a visible base — AGENTS.md 5, and this one was caught
   doing exactly what that rule describes. The first frame used to be
   opacity:0, so when the frame clock stops the element holds it and never
   appears: open the post menu, switch apps or lock the phone, come back, and
   the menu is invisible while still sitting there catching taps. Measured with
   the tab hidden, it stayed at opacity 0 half a second into a 0.15s animation
   with no animation running at all. The scale still reads as a pop-in. */
@keyframes scaleInDrop {
  0% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* =========================================================
   DESKTOP DRAWER (Phase 6)
   ========================================================= */
.desktop-drawer { display: none; }
.desktop-content { width: 100%; }

@media (min-width: 1024px) {
  .top-tabs { display: none !important; }
  .bottom-nav { display: none !important; }
  
  /* Reset header: spans edge-to-edge from drawer line, straight corners, 10px bottom margin */
  .soc-header {
    border-radius: 0 !important;
    margin: 0 0 10px 0 !important;
    padding: 12px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--surface-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    background: var(--bg) !important;
  }
  .res-header {
    border-radius: 0 !important;
    margin: 0 0 10px 0 !important;
    padding: 12px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--surface-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    background: var(--bg) !important;
  }

  .desktop-layout {
    display: grid;
    grid-template-columns: min(33%, 396px) 1fr;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }
  .desktop-drawer {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--surface-border) !important;
    background: var(--bg);
  }
  .drawer-header {
    padding: 24px 32px 16px 32px;
  }
  .drawer-header h1 {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 700;
    font-family: "Space Grotesk", sans-serif;
  }
  .drawer-header p {
    margin: 0;
    font-size: 13px;
    color: var(--text-dim);
  }
  .drawer-divider {
    height: 1px;
    background: var(--card-brd);
    margin: 0 32px 16px 32px;
  }
  .drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    gap: 8px;
  }
  .drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    min-height: 44px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .drawer-item i, .drawer-item svg {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }
  .drawer-item:hover {
    background: var(--card-hover);
    color: var(--text);
  }
  .drawer-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .drawer-item.is-active {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  
  .drawer-footer {
    margin-top: auto;
    padding: 16px 32px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .drawer-footer a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-faint);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.15s ease;
  }
  .drawer-footer a:hover {
    color: var(--text);
  }

  .desktop-content {
    padding: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }
  .desktop-content-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #list-view {
    width: 100% !important;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .page-content {
    max-width: 860px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 10px 24px 40px 24px !important;
    box-sizing: border-box !important;
  }

  /* Chat: fixed height, border-right line from head bar to bottom of type box, 40px margin to Home FAB */
  #sec-chat.sec-chat-layout.active {
    width: calc(100% - 120px) !important;
    max-width: calc(100% - 120px) !important;
    padding: 0 !important;
    margin: 0 !important;
    height: calc(100vh - 66px) !important;
    max-height: calc(100vh - 66px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    border-right: 1px solid var(--feed-sep) !important;
    box-sizing: border-box !important;
  }
  .desktop-content.chat-active,
  body.in-chat-tab .desktop-content {
    overflow: hidden !important;
  }
  #globalChatMessagesList {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 24px 20px 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  #globalChatMessagesList::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  #sec-chat .chat-input-bar {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    padding: 12px 24px 16px 32px !important;
    background: var(--chat-bar-bg, var(--bg)) !important;
    border-top: 1px solid var(--feed-sep) !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Club Chat Room dialog: positioned to the right of drawer, drawer remains visible on side */
  #chatRoomDialog {
    left: min(33%, 396px) !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }
  #chatRoomDialog #chatMessagesList {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 24px 20px 32px !important;
    width: calc(100% - 120px) !important;
    max-width: calc(100% - 120px) !important;
    margin-right: 120px !important;
    border-right: 1px solid var(--feed-sep) !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  #chatRoomDialog #chatMessagesList::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  #chatRoomDialog .chat-input-bar {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    padding: 12px 24px 16px 32px !important;
    z-index: 10 !important;
    width: calc(100% - 120px) !important;
    max-width: calc(100% - 120px) !important;
    margin-right: 120px !important;
    border-right: 1px solid var(--feed-sep) !important;
    box-sizing: border-box !important;
  }

  /* Send button size & icon color */
  #globalChatSendBtn, #chatSendBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    color: #000 !important;
  }
  #globalChatSendBtn svg, #chatSendBtn svg {
    fill: #000 !important;
    color: #000 !important;
  }

  /* Last post bottom line & spacing on desktop (replaces mobile clearance) */
  #feed-container > .soc-card:last-child,
  #profile-container > .soc-card:last-child,
  #profile-recent-posts > .soc-card:last-child {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--content-card-border) !important;
  }
  #feedLoadMoreContainer, #feedLoadMoreBtn,
  #profileLoadMoreContainer, #profileLoadMoreBtn {
    margin-top: 50px !important;
  }

  /* Clubs page cards: 10px margin top and bottom */
  #clubs-listed-container .soc-card {
    margin: 10px 0 !important;
    border-radius: 14px !important;
    border: 1px solid var(--card-brd) !important;
  }

  /* Edit Profile Dialog Modal styling */
  #onboardingModal {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
  #onboardingModal > div {
    max-width: 410px !important;
    width: 90% !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
  }
  body.light-theme #onboardingModal > div {
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-item, .drawer-footer a {
    transition: none;
  }
}


/* --- Ripple & Press Feedback --- */
* { -webkit-tap-highlight-color: transparent; }

button, a, .fab-btn, .desktop-fab, .bottom-tab, .nav-btn, .soc-header-logo, .soc-header-back {
  touch-action: manipulation;
}

.lp-press {
  position: relative;
  overflow: hidden;
  transition: transform 90ms ease-out;
}
.lp-press[style*="position:absolute"],
.lp-press[style*="position: absolute"] {
  position: absolute;
}
.lp-press:active {
  transform: scale(0.97);
}
.card.lp-press:active,
.challenge-card.lp-press:active {
  transform: scale(0.988);
}

.lp-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: 0.18;
  transform: scale(0);
  animation: lpRipple 380ms cubic-bezier(0.2, 0.6, 0.35, 1) forwards;
}
@keyframes lpRipple { to { transform: scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lp-ripple { display: none; }
}
/* ------------------------------- */

/* ============================================================
   CHALLENGE CLUB RANKINGS DIALOG STYLES
============================================================ */
.cr-tab-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
}
.cr-tab-btn:hover {
  color: var(--text);
}
.cr-tab-btn.active {
  background: var(--surface-bg);
  color: var(--text);
  border: 1px solid var(--surface-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cr-rank-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--card-brd);
  border-radius: 12px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.cr-rank-card:hover {
  background: var(--card-hover);
}

/* Podium Ranks (Top 3) */
.cr-rank-podium-1 {
  border: 1px solid rgba(255, 184, 0, 0.45);
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.10), var(--card));
}
.cr-rank-podium-2 {
  border: 1px solid rgba(226, 232, 240, 0.35);
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.08), var(--card));
}
.cr-rank-podium-3 {
  border: 1px solid rgba(249, 115, 22, 0.35);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), var(--card));
}

/* User when in Top 10: 50% thicker border (2.5px vs 1px), vibrant accent */
.cr-rank-self {
  border: 2px solid var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.10) !important;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.20) !important;
}

/* User personal standing card below Top 10 */
.cr-user-standing-card {
  border: 2px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.15);
}

/* Round loading spinner for Load More */
.round-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--surface-border);
  border-top-color: var(--accent);
  animation: roundSpin 0.7s linear infinite;
  display: inline-block;
  box-sizing: border-box;
}

@keyframes roundSpin {
  to { transform: rotate(360deg); }
}