/* ============================================================================
   COMMUNITY — true Discord-style mobile layout (authoritative, loads LAST)
   Goals: NO top gap, channel header flush at top, clean edge-to-edge message
   rows (not boxed cards), feed scrolls, composer pinned at bottom.
   ============================================================================ */
@media (max-width: 900px) {

  /* Keep the app header (hamburger) VISIBLE so users can always open the drawer to
     leave the community page. Only hide legacy/duplicate headers. */
  body:has(.page-community) .mobile-header,
  body:has(.page-community) .top-header { display: none !important; }

  /* #page-content is the element that gets .page-community — use the ID so we beat the
     base #page-content padding-top (ID specificity) that was leaving a ~120px top gap. */
  #page-content.page-community,
  .page-community {
    position: fixed !important;
    /* Sit BELOW the app header so the hamburger stays tappable (leave via the drawer). */
    top: calc(var(--ms-topbar-h, 54px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    /* Bottom tab bar was removed — extend the community view to the bottom edge.
       height:auto forces top+bottom to govern the height (a stray height:100vh was
       making it 54px too tall, pushing the composer + newest messages off-screen). */
    bottom: 0 !important;
    height: auto !important;
    /* A broad `main`/`.page-content { min-height:100vh }` rule was forcing this
       to full viewport height — overflowing 54px past the fold and hiding the
       composer. Neutralise it (this id+class selector wins on specificity). */
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    background: #0a0e1a !important;
    z-index: 40 !important;          /* above content, below the bottom nav (z 1000) */
    overflow: hidden !important;
  }

  .page-community .dc-layout {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;       /* kill the ~120px top padding from older fix files */
    padding-top: 0 !important;
    transform: none !important;
    background: transparent !important;
  }

  /* MOBILE = two views toggled by .chat-open:
       LIST (default)      → channel list (sidebar) fills the screen, chat hidden.
       CHAT (.chat-open)   → chat (dc-main) fills the screen, channel list hidden. */
  /* LIST view: pin the channel list to fill the screen below the header (the flex/height
     chain collapses to 0, and the base is absolute+translateX(-100%) off-screen — so use
     fixed positioning to guarantee it shows + scrolls). */
  .page-community .dc-layout:not(.chat-open) .dc-sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: calc(var(--ms-topbar-h, 54px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: auto !important;
    transform: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 41 !important;
    background: #0a0e1a !important;
    padding: 0.25rem 0 1rem !important;
  }
  .page-community .dc-layout.chat-open .dc-sidebar { display: none !important; }

  .page-community .dc-main {
    display: none !important;            /* hidden in LIST view */
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
    overflow: hidden !important;          /* only the feed scrolls */
  }
  .page-community .dc-layout.chat-open .dc-main {
    display: flex !important;             /* shown in CHAT view, in normal flow */
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    /* community-mobile-channel-view.css parks .dc-main at opacity:0 + pointer-events:none
       and only re-enables it via a .dc-main.active class that the (now-removed) legacy script
       used to set. Restore both here so the chat is actually VISIBLE and TAPPABLE — without
       this the composer/textarea look fine but taps do nothing (no keyboard). */
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Belt-and-suspenders: the whole composer + its controls must accept taps. */
  .page-community .dc-layout.chat-open .dc-main,
  .page-community .dc-inline-composer,
  .page-community .dc-ic-textarea,
  .page-community #dc-post-input,
  .page-community .dc-feed,
  .page-community .dc-ic-tool-btn,
  .page-community .dc-ic-post-btn { pointer-events: auto !important; }
  .page-community #dc-post-input { opacity: 1 !important; }
  /* Ensure textarea is directly focusable, not blocked by overlays. */
  .page-community .dc-ic-textarea {
    position: relative !important;
    z-index: auto !important;
  }
  .page-community .dc-inline-composer {
    z-index: 100 !important;
    flex-shrink: 0 !important;   /* never let the feed squish the composer to nothing */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Show the explicit back button so members can clearly return to the channel list (it is
     styled in styles.css for mobile). The channel-name tap still works as a secondary switcher.
     Hide only the legacy duplicate that community-mobile-ux.js injects. */
  .page-community .dc-channel-back-btn { display: none !important; }

  /* Channel name = tappable switcher, with a caret to signal it opens the channel list. */
  .page-community .dc-main-title {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    -webkit-tap-highlight-color: transparent;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 45% !important;
    text-align: center !important;
  }
  .page-community .dc-switch-caret {
    opacity: 0.55;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  .page-community .dc-layout.channels-peek .dc-switch-caret { transform: rotate(180deg); }

  /* SIDE PANEL: tapping the channel name slides the channel list in over the chat
     (same idea as the hamburger drawer). Beats the base "display:none" sidebar via the
     extra .channels-peek class. */
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;   /* pack sections at the top, do not spread to fill */
    gap: 0.12rem !important;                   /* tighten spacing between rows/sections so all channels fit */
    position: fixed !important;
    top: calc(var(--ms-topbar-h, 54px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important; right: auto !important; bottom: 0 !important;
    width: 84% !important; max-width: 330px !important; height: auto !important;
    transform: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 9999 !important;
    background: #0a0e1a !important;
    box-shadow: 4px 0 28px rgba(0,0,0,0.55) !important;
    /* Bottom clearance so the LAST channels scroll into view above the nav/safe-area
       (the panel could not be scrolled to its end before). */
    padding: 0.25rem 0 calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior: contain !important;
    animation: dcPeekIn 0.18s ease-out;
  }
  /* Condense the slide-in panel: tight channel rows + tighter sections so the whole list
     fits with little or no scrolling (rows were 56px min-height with large gaps). */
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar .dc-channel-item,
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar .dc-dm-item {
    padding: 0.35rem 0.7rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    gap: 0.5rem !important;
  }
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar .dc-channel-section-label,
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar .dc-right-label,
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar .dc-sidebar-section {
    margin: 0.5rem 0 0.1rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar .dc-channel-list,
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar .dc-channels,
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar .dc-dm-list {
    gap: 0 !important;
    row-gap: 0 !important;
  }
  @keyframes dcPeekIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

  /* Dim backdrop over the chat while the panel is open (tap it to close — handled in JS). */
  .page-community .dc-layout.chat-open.channels-peek .dc-main::before {
    content: '';
    position: fixed;
    top: calc(var(--ms-topbar-h, 54px) + env(safe-area-inset-top, 0px));
    /* Start the backdrop AFTER the sidebar so it NEVER overlays the channel list. The
       backdrop is .dc-main's pseudo-element, so in .dc-main's stacking context it could sit
       above the slid-in sidebar and swallow channel taps (channel selection appeared dead). */
    left: min(84%, 330px); right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 55;
    backdrop-filter: blur(2px);
  }
  /* While the channel panel is open, drop the chat below the panel so its posts/composer
     can never paint over the slid-in sidebar (the channel list was rendering BEHIND the chat). */
  .page-community .dc-layout.chat-open.channels-peek .dc-main {
    z-index: 0 !important;
  }
  /* While the channel panel is open, the chat behind must NOT intercept taps.
     Post action buttons (comment/like) were painting over the slid-in sidebar and
     swallowing channel taps, so selecting a channel did nothing. Kill the chat's
     pointer events; the sidebar stays interactive, and a tap on the dimmed area
     still bubbles to .dc-layout (which closes the panel). */
  .page-community .dc-layout.chat-open.channels-peek .dc-main,
  .page-community .dc-layout.chat-open.channels-peek .dc-main * { pointer-events: none !important; }
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar,
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar * { pointer-events: auto !important; }
  /* On very small phones, make the sidebar full-width for easier reach. */
  @media (max-width: 480px) {
    .page-community .dc-layout.chat-open.channels-peek .dc-sidebar {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  /* The global gold quick-log FAB collides with the composer here and is redundant
     (you post via the composer) — hide it on community. */
  body:has(.page-community) .log-fab { display: none !important; }
  
  /* Right panel (online users, connections, squads) hidden by default on mobile.
     Use a header button to open it as a full-screen sheet. */
  .dc-right { display: none !important; }
  .page-community .dc-right-panel-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
  }
  .page-community .dc-right-panel-btn:hover { color: var(--gold, #c8a03c); background: rgba(255,255,255,0.06); }
  .page-community .dc-right-panel-btn svg { width: 18px; height: 18px; }
  
  /* Right panel as full-screen sheet when open */
  .page-community .dc-right.mobile-sheet-open {
    display: flex !important;
    position: fixed !important;
    inset: calc(var(--ms-topbar-h, 54px) + env(safe-area-inset-top, 0px)) 0 0 0 !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    background: #0a0e1a !important;
    z-index: 9999 !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Composer buttons — compact, not oversized gold blocks. */
  .page-community .dc-ic-post-btn {
    flex: 0 0 auto !important;
    min-width: 60px !important;
    height: 38px !important;
    padding: 7px 16px !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
  }
  .page-community .dc-ic-tool-btn {
    flex: 0 0 auto !important;
    min-width: 38px !important; width: 38px !important; height: 38px !important;
    padding: 7px !important;
  }
  .page-community .dc-ic-tool-btn svg { width: 18px !important; height: 18px !important; }

  /* The hidden sidebar must take ZERO space (display:none + zero box) so it can't
     contribute to the layout offset. */
  .page-community .dc-sidebar { display: none !important; width: 0 !important; height: 0 !important; }

  /* Channel header — flush at the very top, accounts for the iOS status bar. */
  .page-community .dc-main-header {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.7rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background: #0d1424 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    margin: 0 !important;
  }

  /* The feed scrolls; tight Discord spacing. */
  .page-community .dc-feed,
  .page-community .dm-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* MESSAGE ROWS — Discord style: edge-to-edge, no card box, tight. */
  .page-community .post-card,
  .page-community .post-card.pc {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0.35rem 1rem !important;
    display: flex !important;
    gap: 0.7rem !important;
    align-items: flex-start !important;
  }
  .page-community .post-card:hover { background: rgba(255,255,255,0.025) !important; }
  .page-community .pc-avatar {
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important; flex-shrink: 0 !important;
  }
  .page-community .pc-name { font-weight: 600 !important; font-size: 0.9rem !important; }
  .page-community .pc-time { font-size: 0.72rem !important; color: rgba(255,255,255,0.4) !important; }
  .page-community .pc-text { font-size: 0.92rem !important; line-height: 1.4 !important; margin-top: 2px !important; }

  /* MOBILE: like + comment actions go BELOW the post media (not above/overlapping).
     .pc-actions lives inside .pc-header, so we make .pc-body a flex column and dissolve
     .pc-header (display:contents) to promote .pc-meta + .pc-actions into orderable
     siblings, then push the action row (and the inline-comments panel) after the media.
     Natural order (0): meta -> text -> media/audio -> reactions; then actions, then comments. */
  .page-community .pc-body { display: flex !important; flex-direction: column !important; }
  .page-community .pc-header { display: contents !important; }
  .page-community .pc-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    order: 0 !important;
  }
  .page-community .pc-actions {
    order: 10 !important;
    margin-left: 0 !important;
    margin-top: 6px !important;
    gap: 14px !important;
    align-self: flex-start !important;
  }
  .page-community .pc-inline-comments { order: 11 !important; }

  /* Composer sits IN-FLOW at the bottom of the chat column (NOT position:fixed).
     An older file (fix-composer-layout-mobile.css) forced position:fixed+z-index:600 —
     a fixed input inside the fixed, overflow-hidden .page-community is an iOS focus trap
     (tap doesn't bring up the keyboard / the keyboard covers it). Force it back in-flow so
     iOS scrolls it into view above the keyboard normally. */
  .page-community .dc-inline-composer {
    position: relative !important;
    bottom: auto !important; left: auto !important; right: auto !important;
    width: auto !important;
    z-index: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)) !important;
    background: #0d1424 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }
  /* In-flow composer means the feed no longer needs the 140px gap an older file added. */
  .page-community .dc-feed,
  .page-community .dm-messages { padding-bottom: 0.5rem !important; }
  /* The GIF picker also went position:fixed in the old file — keep it in-flow above the composer. */
  .page-community .dc-ic-gif-picker,
  .page-community .dc-gif-picker {
    position: relative !important;
    bottom: auto !important; left: auto !important; right: auto !important;
    width: auto !important; z-index: auto !important;
  }

  /* Kill stray pseudo-element "dark spots" from older fix files. */
  .page-community .dc-feed::before,
  .page-community .dc-feed::after,
  .page-community .dc-layout::before,
  .page-community .dc-layout::after { display: none !important; }

  /* Empty-feed friendly state. */
  .page-community .dc-feed:empty::after {
    content: "No messages yet. Say hello to your team!";
    display: block; text-align: center;
    color: rgba(255,255,255,0.4); font-size: 0.9rem; padding: 3rem 1rem;
  }
}

/* Real mobile Chrome/Safari: position:fixed + bottom:0 resolves against the LAYOUT
   viewport, which sits BELOW the address bar. That pushes the in-flow composer off
   the visible screen and the feed can't scroll to reach it ("can't see the text box
   at the bottom"). Pin the height to the DYNAMIC viewport (dvh) so the VISIBLE area
   governs — composer stays on screen, feed scrolls normally. */
@media (max-width: 900px) {
  @supports (height: 100dvh) {
    #page-content.page-community,
    .page-community {
      height: calc(100dvh - (var(--ms-topbar-h, 54px) + env(safe-area-inset-top, 0px))) !important;
      min-height: 0 !important;   /* beat the stray min-height:100vh that re-inflated it */
      max-height: none !important;
      bottom: auto !important;
    }
  }
}

/* ============================================================================
   CONDENSE + ONLINE PIN (2026-06-20) — the message feed and channel list wasted
   a lot of vertical space; tighten both, and pin "N online" to the bottom-left.
   All scoped to .page-community + max-width:900px, so desktop is untouched.
   ============================================================================ */
@media (max-width: 900px) {
  /* --- Tighter message rows: pull name/text/reactions closer, less gap per post --- */
  .page-community .post-card,
  .page-community .post-card.pc {
    padding: 0.2rem 1rem !important;
    gap: 0.6rem !important;
  }
  .page-community .pc-avatar { width: 34px !important; height: 34px !important; }
  .page-community .pc-text { margin-top: 1px !important; line-height: 1.35 !important; }
  .page-community .pc-actions { margin-top: 3px !important; }
  .page-community .pc-inline-comments { margin-top: 3px !important; }

  /* --- Tighter channel list (applies to the list view AND the slide-in panel) --- */
  .page-community .dc-sidebar { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .page-community .dc-sidebar-header {
    padding: 0.5rem 1rem 0.25rem !important;
    margin: 0 !important;
  }
  .page-community .dc-sidebar .dc-section-label,
  .page-community .dc-sidebar .dc-channel-section-label {
    margin: 0.45rem 0 0.1rem !important;
    padding: 0 1rem !important;
  }
  .page-community .dc-sidebar .dc-channel-item,
  .page-community .dc-sidebar .dc-dm-item,
  .page-community .dc-sidebar .dc-squad-item {
    padding: 0.3rem 0.9rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    gap: 0.55rem !important;
  }

  /* --- Pin "N online" to the bottom-left of the sidebar, always visible --- */
  .page-community .dc-sidebar-footer {
    margin-top: auto !important;
    position: sticky !important;
    bottom: 0 !important;
    width: 100% !important;
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    background: #0a0e1a !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    text-align: left !important;
  }
  .page-community .dc-online-count {
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
  }
  /* The sticky footer reserves its own space, so the old 84px bottom scroll-clearance
     padding is no longer needed — it was leaving "N online" floating above the bottom.
     Zero it so the footer reaches the true bottom edge (safe-area handled in the footer). */
  .page-community .dc-layout:not(.chat-open) .dc-sidebar,
  .page-community .dc-layout.chat-open.channels-peek .dc-sidebar {
    padding-bottom: 0 !important;
  }

  /* --- Composer: the textarea was taking the full row width, pushing the photo/
     video/GIF/voice/Post buttons off the right edge of the screen. Let the row wrap
     so the textarea fills row 1 and the buttons sit on row 2 (tools left, Post right). */
  .page-community .dc-ic-row {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    align-items: center !important;
  }
  .page-community .dc-ic-textarea { flex: 1 1 100% !important; }
  .page-community .dc-ic-post-btn { margin-left: auto !important; }

  /* --- "Messages" + new-message button: the "+" was a big out-of-place gold box.
     Make it a small bordered "+" sitting at the right of a clear "Messages" heading. */
  .page-community .dc-dm-section-label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
  }
  .page-community .dc-dm-section-label > span { display: inline !important; }
  .page-community .dc-new-dm-btn {
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    color: var(--gold, #c8a03c) !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Native WebView can report a desktop-width viewport, which hid the channel back button.
   Force the channel/DM back button visible in the native app so members can always exit a channel. */
body.native-app .dc-mobile-back-btn { display: flex !important; }

/* ID specificity beats the min-width:769 hide — always show the channel back button in community. */
.page-community #dc-mobile-back { display: flex !important; }

/* Channel-list (sidebar) header: gold close to slide back to the chat on mobile. */
.dc-sidebar-header { display: flex; align-items: center; justify-content: space-between; }
.dc-sidebar-close { display: none; }
@media (max-width: 900px) {
  .page-community .dc-sidebar-close { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--gold, #c8a03c); font-size: 1.7rem; line-height: 1; width: 38px; height: 38px; cursor: pointer; padding: 0; }
}

/* ============================================================================
   CHANNEL-LIST VIEW FIX (.dc-layout WITHOUT .chat-open)
   Two legacy mobile layout systems (community-mobile-channel-view.css vs this
   file) left the channel-list state broken: real touch taps on DMs/squads/
   channels were swallowed (only synthetic .click() worked => a pointer-events /
   chat-overlap issue), and the close X sat mid-screen because the sidebar
   wasn't full width. Make the list a full-screen, top, fully-tappable overlay
   and neutralise the chat underneath so touches reach the items.
   ============================================================================ */
@media (max-width: 768px) {
  .page-community .dc-layout { position: relative; }
  .page-community .dc-layout:not(.chat-open) .dc-sidebar {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    z-index: 40 !important;
    pointer-events: auto !important;
  }
  .page-community .dc-layout:not(.chat-open) .dc-sidebar * { pointer-events: auto !important; }
  .page-community .dc-layout:not(.chat-open) .dc-main { pointer-events: none !important; }
  /* Full-width header now pushes the close X hard to the right. */
  .page-community .dc-layout:not(.chat-open) .dc-sidebar-header { width: 100%; }
}

/* Squad / DM chat header: the back control is now a gold × pinned to the right (People
   button removed for these views — no member list to show). */
.dc-chat-close {
  margin-left: auto !important;
  font-size: 1.7rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: var(--gold, #c8a03c) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0.5rem !important;
  min-width: 40px !important;
  cursor: pointer;
}

/* "People" button (added by community-mobile-right-panel.js) sits hard-right in the channel header. */
.page-community .dc-main-header .dc-right-panel-btn { margin-left: auto !important; color: var(--gold, #c8a03c) !important; font-weight: 600; }

/* Channel-list (sidebar) header: PIONEER left, close × hard-right. The X is margin-auto'd
   so it pins right regardless of which legacy file also styles .dc-sidebar-header. */
.page-community .dc-sidebar-header { display: flex !important; align-items: center !important; width: 100% !important; }
.page-community .dc-sidebar-close { margin-left: auto !important; }

/* Squad rows match DM ("name") rows: neutral avatar (not gold) so the sidebar list reads
   uniformly across Messages / Squads / Channels. */
.page-community .dc-sidebar .dc-squad-item .dc-squad-avatar,
.page-community .dc-sidebar .dc-squad-item .dc-dm-item-avatar {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* People panel "X" close — mobile sheet only (back to the chat you were in) */
.dc-right-close { display: none; }
@media (max-width: 768px) {
  /* Visual matches the app-wide close "X" in styles.css; this rule only owns the
     conditional display + fixed position (top-right, inside the sheet, above z9999). */
  .dc-right.mobile-sheet-open .dc-right-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed;
    top: calc(var(--ms-topbar-h, 54px) + env(safe-area-inset-top, 0px) + 8px);
    right: 14px; z-index: 10001;
    width: 36px; height: 36px; border-radius: 0; padding: 0;
    background: transparent; border: none;
    color: var(--gold, #d4af37); font-size: 1.7rem; line-height: 1; cursor: pointer;
  }
}

/* ---------------------------------------------------------------------------
   Soft-keyboard inset (iOS): iOS Safari ignores interactive-widget=resizes-content,
   so the chat layout stays full-screen behind the keyboard and leaves a dead gap
   below the composer. The VisualViewport handler in app.js sets --kb-inset + the
   body.kb-open flag; shrink the chat to the visible area so the composer sits flush
   on the keys, and drop the home-indicator inset (the keyboard now covers it).
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.kb-open .page-community .dc-layout.chat-open {
    height: calc(100% - var(--kb-inset, 0px)) !important;
    max-height: calc(100% - var(--kb-inset, 0px)) !important;
  }
  body.kb-open .page-community .dc-inline-composer {
    padding-bottom: 0.5rem !important;
  }
}

/* The community page is near-black (#0a0e1a); the app body behind it is a lighter navy,
   which the on-screen keyboard exposes as a "grey box" in the strip below the fixed page.
   Match the body to the community page so that strip blends in instead of flashing grey. */
body:has(#page-content.page-community) { background: #0a0e1a !important; }
html:has(#page-content.page-community) { background: #0a0e1a !important; }